@font-face {
  font-family: "Flowtifyy Inter";
  src: url("/public/fonts/Inter-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Abril Fatface";
  src: url("/public/fonts/AbrilFatface-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --brand-blue: #1768d4;
  --brand-blue-deep: #124eaa;
  --brand-mint: #69d7bc;
  --brand-ink: #18334f;
  --brand-muted: #5c7185;
  --brand-line: #dce9f1;
  --brand-wash: #f4f9fc;
  --brand-mint-wash: #edf9f5;
}

html { scroll-behavior: smooth; }
body {
  font-family: "Flowtifyy Inter", "Inter", sans-serif !important;
  color: var(--brand-ink) !important;
  background-color: #f8fbfd !important;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h1 *, h2 * {
  font-family: "Abril Fatface", Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}
a { text-underline-offset: .18em; }
button, input, select, textarea { font-family: "Flowtifyy Inter", "Inter", sans-serif; }
:focus-visible {
  outline: 3px solid #3cae9e !important;
  outline-offset: 3px;
}

/* Shared public navigation */
.nav, nav.nav {
  background: rgba(250, 253, 255, .94) !important;
  border-color: var(--brand-line) !important;
  box-shadow: 0 8px 30px rgba(36, 83, 120, .045);
}
.nav-logo-text { color: var(--brand-ink) !important; font-family: "Flowtifyy Inter", sans-serif !important; }
.nav-links a.nav-link { color: #526b82 !important; }
.nav-links a.nav-link:hover, .mobile-menu a:hover { color: var(--brand-blue) !important; background: #edf6fb !important; }
.lang-switcher { background: #edf4f8 !important; }
.lang-btn.active { color: var(--brand-blue) !important; }
.btn-nav-login, .btn-back {
  color: #426079 !important;
  border-color: #d2e2ec !important;
  background: rgba(255,255,255,.7);
}
.btn-nav-login:hover, .btn-back:hover { color: var(--brand-blue) !important; border-color: #9cc9df !important; background: #f2f9fc !important; }
.btn-nav-start, .btn-hero-primary, .cta-btn {
  background: var(--brand-blue) !important;
  box-shadow: 0 8px 22px rgba(23,104,212,.17) !important;
}
.mobile-menu { background: #fbfdfe !important; border-color: var(--brand-line) !important; }
.hamburger span { background: var(--brand-ink) !important; }

/* Landing: airy Swiss blue with soft mint accents */
.hero {
  color: var(--brand-ink) !important;
  background:
    radial-gradient(ellipse at 82% 5%, rgba(105,215,188,.25), transparent 34%),
    radial-gradient(ellipse at 7% 95%, rgba(81,158,225,.15), transparent 35%),
    linear-gradient(180deg, #f0f8fc 0%, #fbfdfe 78%) !important;
  border-bottom: 1px solid var(--brand-line);
}
.hero::before, .hero::after { opacity: .22; }
.hero-badge { color: #276b72 !important; background: #e7f7f2 !important; border-color: #c9ebe0 !important; }
.hero h1, .hero h1 span { color: var(--brand-ink) !important; -webkit-text-fill-color: var(--brand-ink) !important; background: none !important; }
.hero h1 span { color: var(--brand-blue) !important; -webkit-text-fill-color: var(--brand-blue) !important; }
.hero-sub { color: #536e84 !important; }
.hero-trust { color: #60798b !important; }
.btn-hero-secondary { color: var(--brand-blue) !important; background: #fff !important; border-color: #c9dfeb !important; backdrop-filter: none !important; }
.btn-hero-secondary:hover { background: #eff8fb !important; border-color: #8dbdd2 !important; }
.hero-visual { box-shadow: 0 28px 76px rgba(34,83,118,.15), 0 0 0 1px rgba(57,126,160,.08) !important; }
.mv-sidebar { background: #eaf4f8 !important; border-right: 1px solid #d6e7ee; }
.mv-sidebar-logo { color: var(--brand-ink) !important; }
.mv-item { color: #688094 !important; }
.mv-item.active { background: #d9f2eb !important; color: #176c82 !important; }
.mv-main { background: #f6fafb !important; }
.section-tag { color: var(--brand-blue) !important; background: #edf6fc !important; -webkit-text-fill-color: var(--brand-blue) !important; border-color: #cfe4f0 !important; }
.section-h2 { color: var(--brand-ink) !important; }
.section-sub { color: var(--brand-muted) !important; }
.features-bg, .webflow-bg { background: #fbfdfe !important; border-color: var(--brand-line) !important; }
.agency-bg, .pricing-bg { background: linear-gradient(135deg,#f2f8fb,#f2faf7) !important; border-color: var(--brand-line) !important; }
.feat-card, .agency-visual, .price-card, .twint-visual, .api-card {
  border-color: #dce9ef !important;
  box-shadow: 0 12px 36px rgba(39,83,112,.045);
}
.feat-card { border-radius: 18px !important; }
.feat-card:hover { border-color: #8bc9c2 !important; box-shadow: 0 16px 36px rgba(39,120,134,.10) !important; }
.feat-icon, .step-num, .twint-point-num { background: #dff4ed !important; color: #176b70 !important; box-shadow: none !important; }
.feat-card h3, .shop-name, .price-name, .step-content h3, .agency-point { color: var(--brand-ink) !important; }
.pwa-bg, .payment-bg {
  color: var(--brand-ink) !important;
  background: linear-gradient(140deg,#eef8fb 0%,#f3faf7 100%) !important;
  border-top: 1px solid var(--brand-line) !important;
}
.pwa-tag, .payment-tag { color: #247a78 !important; background: #e3f5ef !important; border-color: #c4e7dc !important; }
.pwa-h2, .payment-h2, .pay-card h3 { color: var(--brand-ink) !important; }
.pwa-sub, .payment-sub, .pay-card p { color: #5b7184 !important; }
.pwa-point, .pay-card { background: rgba(255,255,255,.78) !important; border-color: #d9e9ed !important; }
.pwa-point-label { color: var(--brand-ink) !important; }
.pwa-point-text { color: #60788a !important; }
.pwa-mockup { background: #e9f3f5 !important; border-color: #d2e4e8 !important; }
.pwa-phone { background: #d9e8ec !important; border-color: #c0d4db !important; box-shadow: 0 18px 40px rgba(42,83,110,.15) !important; }
.pwa-phone-bar { background: #9bbbc2 !important; }
.pwa-phone-stat, .pwa-phone-order { background: #f8fcfc !important; }
.pwa-phone-stat-v, .pwa-phone-order span { color: var(--brand-ink) !important; }
.pwa-phone-stat-l, .pwa-phone-order { color: #6a8290 !important; }
.pwa-badge { color: #3d6276 !important; background: #fff !important; border-color: #d5e5e9 !important; }
.payment-grid .pay-card:hover { border-color: #93cfc0 !important; background: #fff !important; }
.twint-bg { background: linear-gradient(135deg,#f1f8fb,#f0faf6) !important; border-color: var(--brand-line) !important; }
.twint-qr { background: #e7f3f5 !important; color: #276a77; }
.price-card.popular { background: linear-gradient(180deg,#eef8fc 0%,#fff 50%) !important; box-shadow: 0 0 0 2px #72b9d0,0 12px 34px rgba(23,104,212,.10) !important; }
.price-card.free-card { border-color: #8dd7c1 !important; box-shadow: 0 0 0 1px #8dd7c1,0 12px 34px rgba(64,168,142,.09) !important; }
.price-popular-badge { background: #dff4ed !important; color: #176b70 !important; box-shadow: none !important; }
.pricing-toggle-inner, .currency-toggle { background: #e6eff3 !important; }
.ptoggle-btn.active, .ctoggle-btn.active { color: var(--brand-blue) !important; }
.rm-cta, .cta-section, .final-cta {
  color: var(--brand-ink) !important;
  background: linear-gradient(135deg,#e9f5fa,#e8f7f1) !important;
}
.rm-cta h2, .cta-section h2, .final-cta h2 { color: var(--brand-ink) !important; }
.rm-cta p, .cta-section p, .final-cta p { color: #536d80 !important; }
.rm-cta a, .cta-section a, .final-cta a { color: #fff !important; background: var(--brand-blue) !important; }
.footer, .footer-simple, .docs-footer {
  color: #476379 !important;
  background: #eef6f8 !important;
  border-top: 1px solid #d9e8ed !important;
}
.footer p, .footer-simple p, .docs-footer p { color: #5e778a !important; }
.footer a, .footer-simple-links a, .footer-links a, .docs-footer-links a { color: #446c82 !important; }
.footer a:hover, .footer-simple-links a:hover, .docs-footer-links a:hover { color: var(--brand-blue) !important; }

/* Information pages */
.docs-hero, .legal-hero {
  background: linear-gradient(135deg,#edf7fc 0%,#f0faf6 100%) !important;
  border-color: var(--brand-line) !important;
}
.docs-hero h1, .legal-hero h1, .page-header h1, .article-h1, .hero h1 { color: var(--brand-ink) !important; }
.docs-hero p, .legal-hero .update, .section-sub { color: var(--brand-muted) !important; }
.docs-search input { border-color: #cfe0e8 !important; box-shadow: 0 8px 22px rgba(43,87,112,.06); }
.docs-search input:focus { border-color: var(--brand-blue) !important; }
.docs-layout { gap: 42px !important; }
.docs-content { min-width: 0; overflow-wrap: break-word; }
.docs-section .step-body, .docs-section .callout-body { min-width: 0; }
.docs-section .docs-table { display: block; max-width: 100%; overflow-x: auto; }
.docs-hero h1 { overflow-wrap: anywhere; }
.docs-sidebar { border-color: var(--brand-line) !important; box-shadow: 0 8px 24px rgba(35,82,112,.04); }
.sidebar-section-title { color: #648095 !important; }
.docs-sidebar a { color: #456176 !important; }
.docs-sidebar a:hover { background: #f0f8fa !important; }
.docs-sidebar a.active { color: var(--brand-blue) !important; background: #eaf5fb !important; border-left-color: var(--brand-blue) !important; }
.docs-section h2, .docs-section h3, .legal-body h2, .legal-body h3 { color: var(--brand-ink) !important; }
.docs-section h2 { border-color: #d7e6ec !important; }
.docs-section p, .docs-section ul, .docs-section ol, .legal-body p, .legal-body ul { color: #435d72 !important; }
.docs-section a, .legal-body a { color: var(--brand-blue) !important; }
.docs-section pre { background: #193650 !important; }
.callout-info { color: #205c80 !important; background: #eef7fc !important; border-color: #cce3f0 !important; }
.callout-tip { color: #286653 !important; background: #edf8f3 !important; border-color: #cce9dc !important; }
.callout-pro { color: #315c75 !important; background: #eef5f8 !important; border-color: #d0e2e9 !important; }
.docs-table th, .legal-body table th { color: var(--brand-ink) !important; background: #edf5f8 !important; }
.docs-table td, .legal-body table td { color: #435d72 !important; }
.docs-table tr:nth-child(even) td { background: #f6fafb !important; }
.faq-item { border-color: var(--brand-line) !important; }
.faq-q { color: var(--brand-ink) !important; }
.faq-q:hover { background: #f1f8fa !important; }
.faq-a { color: #435d72 !important; }
.legal-body .highlight { color: #435d72 !important; background: #eef7fb !important; border-left-color: var(--brand-blue) !important; }
.legal-lang-tab.active { background: var(--brand-blue) !important; border-color: var(--brand-blue) !important; }
.page-wrap, .article-wrap, .rm-body, .legal-body { color: var(--brand-ink); }
.blog-card, .rm-item, .cta-box { border-color: var(--brand-line) !important; box-shadow: 0 12px 30px rgba(35,82,112,.05); }
.blog-card { border-radius: 18px !important; }
.card-stripe { background: linear-gradient(90deg,#4b9ed8,#78d6bd) !important; }
.card-tag, .article-tag, .section-tag, .hero-tag { color: #246eb0 !important; background: #edf6fb !important; border-color: #cfe5f0 !important; }
.card-title, .article-content h2, .article-content h3, .cta-box h3 { color: var(--brand-ink) !important; }
.card-excerpt, .article-content, .article-excerpt { color: #4c6578 !important; }
.card-date, .article-meta { color: #627b8e !important; }
.card-link, .breadcrumb a, .article-content a, footer a { color: var(--brand-blue) !important; }
.article-excerpt { border-color: var(--brand-line) !important; }
.cta-box { background: linear-gradient(135deg,#eef7fc,#eff9f5) !important; border-color: #d1e7e8 !important; }
.cta-box p { color: #536d80 !important; }
.article-content strong { color: var(--brand-ink) !important; }
.article-content code, .docs-section code { color: #27566f; }
.rm-item { border-radius: 16px !important; }
.rm-item:hover { border-color: #9acdc9 !important; box-shadow: 0 12px 30px rgba(36,112,121,.08) !important; }
.rm-status.planned { color: #2469b0 !important; background: #eaf4fa !important; }
.rm-status.in_progress { color: #80631e !important; background: #faf3de !important; }
.rm-status.done { color: #267257 !important; background: #e8f6ef !important; }
.rm-status.idee { color: #426c7c !important; background: #eaf3f5 !important; }
.rm-category { color: #547287 !important; background: #edf4f7 !important; }
.rm-filter-btn.active, .rm-filter-btn:hover { background: var(--brand-blue) !important; border-color: var(--brand-blue) !important; }
.rm-cta {
  border: 1px solid #d0e7e7 !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 48px rgba(41,95,117,.07);
}
.rm-cta a { color: white !important; background: var(--brand-blue) !important; }
.cta-bg {
  background: linear-gradient(135deg,#edf7fb 0%,#eaf7f2 100%) !important;
  border-top: 1px solid var(--brand-line);
}
.cta-bg::before, .cta-bg::after { opacity: .16; }
.cta-bg h2, .cta-bg h2 span { color: var(--brand-ink) !important; -webkit-text-fill-color: var(--brand-ink) !important; background: none !important; }
.cta-bg p { color: #536d80 !important; }
.btn-cta-white { color: #fff !important; background: var(--brand-blue) !important; box-shadow: 0 8px 22px rgba(23,104,212,.16) !important; }
.btn-cta-outline { color: var(--brand-blue) !important; background: #fff !important; border-color: #c9dfeb !important; backdrop-filter: none !important; }
.faq-bg { background: #f3f8fa !important; border-color: var(--brand-line) !important; }
.faq-q { color: var(--brand-ink) !important; }
.faq-icon { color: #4d7185 !important; border-color: #c9dbe2 !important; }
.faq-item.open .faq-icon { color: #fff !important; background: var(--brand-blue) !important; border-color: var(--brand-blue) !important; }
#feature-request, #blog { background: #f5fafc !important; border-color: var(--brand-line) !important; }
.footer-logo-text { color: var(--brand-ink) !important; font-family: "Flowtifyy Inter", sans-serif !important; }
.footer-tagline, .footer-by, .footer-col h4, .footer-copy { color: #587285 !important; }
.footer-col a, .footer-legal a { color: #42667c !important; }
.footer-divider { background: #d5e5e9 !important; }

@media (max-width: 760px) {
  .hero { padding-left: 18px !important; padding-right: 18px !important; }
  .section-wrap, .section-sm, .pwa-inner, .payment-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .docs-layout { gap: 22px !important; }
  .docs-sidebar { max-height: 320px; overflow-y: auto; }
  .page-wrap, .article-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .rm-body { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}