/* =========================================================
   NerrowPay — Design Tokens
========================================================= */
:root{
  --primary: #2563EB;
  --primary-dark: #1D4ED8;
  --secondary: #7C3AED;
  --accent: #06B6D4;

  --bg: #ffffff;
  --bg-alt: #F7F8FC;
  --surface: #ffffff;
  --surface-glass: rgba(255,255,255,0.6);
  --border: rgba(15,23,42,0.08);

  --text: #0F172A;
  --text-muted: #52607A;
  --text-soft: #8592AB;

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(15,23,42,0.06);
  --shadow-md: 0 12px 32px rgba(37,99,235,0.12);
  --shadow-lg: 0 24px 60px rgba(37,99,235,0.16);

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--primary));

  --container: 1200px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"]{
  --bg: #0B1120;
  --bg-alt: #0F172A;
  --surface: #131C31;
  --surface-glass: rgba(19,28,49,0.55);
  --border: rgba(255,255,255,0.08);
  --text: #EEF2FF;
  --text-muted: #9AA6C3;
  --text-soft: #6C7A9C;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.35);
  --shadow-md: 0 16px 40px rgba(0,0,0,0.45);
  --shadow-lg: 0 28px 70px rgba(0,0,0,0.55);
}

/* =========================================================
   Reset & Base
========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease), color .35s var(--ease);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text); margin:0 0 .5em; line-height:1.2; font-weight:700; }
p{ margin:0 0 1em; color:var(--text-muted); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--primary); color:#fff;
  padding:.75rem 1.25rem; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; }
.container-narrow{ max-width:800px; }
.section{ padding:110px 0; position:relative; }
@media (max-width:768px){ .section{ padding:72px 0; } }

.eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--primary);
  background:rgba(37,99,235,0.08); padding:6px 14px; border-radius:var(--radius-pill);
  margin-bottom:1rem;
}
.section-head{ max-width:640px; margin:0 auto 3.5rem; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); }
.section-sub{ font-size:1.05rem; }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:var(--radius-pill); border:1.5px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-lg{ padding:1rem 2rem; font-size:1rem; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--gradient-primary); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--text-muted); }
.btn-ghost:hover{ color:var(--primary); }

/* =========================================================
   Glassmorphism helper
========================================================= */
.glass{
  background:var(--surface-glass);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}

/* =========================================================
   Signature rail line (decorative, follows scroll)
========================================================= */
.rail-line{
  position:absolute; top:0; left:0; width:100%; height:6000px; z-index:0;
  pointer-events:none; opacity:.35;
}
.rail-line path{
  fill:none; stroke:var(--primary); stroke-width:1.4; stroke-dasharray:6 10; stroke-linecap:round;
}
@media (max-width:900px){ .rail-line{ display:none; } }

/* =========================================================
   Navbar
========================================================= */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:500; height:var(--nav-h);
  display:flex; align-items:center; background:transparent;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:var(--surface-glass); backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:var(--shadow-sm); height:66px; border-bottom-color:var(--border);
}
.nav-container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin-right:auto; }
.brand-name em{ font-style:normal; color:var(--primary); }
.nav-menu{ display:flex; gap:2rem; align-items:center; }
.nav-menu a{ font-weight:500; font-size:.94rem; color:var(--text-muted); position:relative; padding:4px 0; }
.nav-menu a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gradient-primary);
  transition:width .25s var(--ease);
}
.nav-menu a:hover{ color:var(--text); }
.nav-menu a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:.75rem; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:color .2s, border-color .2s;
}
.theme-toggle:hover{ color:var(--primary); border-color:var(--primary); }
.icon-moon{ display:none; }
[data-theme="dark"] .icon-sun{ display:none; }
[data-theme="dark"] .icon-moon{ display:block; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; }

@media (max-width:960px){
  .nav-cta-secondary{ display:none; }
  .nav-menu{
    position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:flex-start;
    background:var(--surface); padding:1.5rem 24px; gap:1.1rem; border-bottom:1px solid var(--border);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:all .3s var(--ease); box-shadow:var(--shadow-md);
  }
  .nav-menu.open{ transform:translateY(0); opacity:1; visibility:visible; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:640px){ .nav-cta{ display:none; } }

/* =========================================================
   Hero
========================================================= */
.hero{ position:relative; padding:calc(var(--nav-h) + 64px) 0 100px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-1; background:var(--bg); }
.grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px), linear-gradient(90deg, rgba(37,99,235,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%, black 10%, transparent 70%);
}
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:float 16s ease-in-out infinite; }
.blob-1{ width:520px; height:520px; background:var(--primary); top:-180px; left:-140px; }
.blob-2{ width:460px; height:460px; background:var(--secondary); top:60px; right:-160px; animation-delay:-5s; }
.blob-3{ width:360px; height:360px; background:var(--accent); bottom:-140px; left:35%; animation-delay:-10s; opacity:.35; }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-30px) scale(1.08); }
}
[data-theme="dark"] .blob{ opacity:.28; }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.hero-copy h1{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing:-.01em; }
.hero-sub{ font-size:1.12rem; max-width:520px; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin:2rem 0 2.25rem; }
.hero-trustline{ display:flex; align-items:center; gap:1rem; }
.hero-trustline p{ margin:0; font-size:.92rem; }
.avatars{ display:flex; }
.avatars span{
  width:34px; height:34px; border-radius:50%; margin-left:-10px; border:2px solid var(--bg);
  background:var(--gradient-primary);
}
.avatars span:first-child{ margin-left:0; }
.avatars span:nth-child(2){ background:var(--gradient-accent); }
.avatars span:nth-child(3){ background:linear-gradient(135deg,var(--secondary),var(--accent)); }
.avatars span:nth-child(4){ background:linear-gradient(135deg,var(--primary-dark),var(--secondary)); }

.hero-visual{ position:relative; }
.dashboard-card{ border-radius:var(--radius-lg); padding:1.4rem; box-shadow:var(--shadow-lg); }
.dashboard-head{ display:flex; align-items:center; gap:6px; margin-bottom:1.1rem; }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.red{ background:#F87171; } .dot.yellow{ background:#FBBF24; } .dot.green{ background:#34D399; }
.dashboard-title{ margin-left:.6rem; font-size:.85rem; font-weight:600; color:var(--text-muted); }
.dash-stat{ display:flex; flex-direction:column; margin-bottom:1rem; }
.dash-label{ font-size:.78rem; color:var(--text-soft); }
.dash-value{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; }
.dash-delta{ font-size:.8rem; font-weight:600; }
.dash-delta.up{ color:#10B981; }
.chart-wrap{ margin-bottom:1.1rem; }
.chart-svg{ width:100%; height:90px; overflow:visible; }
.chart-line{ fill:none; stroke:var(--primary); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.chart-fill{ fill:rgba(37,99,235,0.12); stroke:none; }
.dash-tx{ display:flex; flex-direction:column; gap:.6rem; }
.dash-tx li{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--text-muted); }
.dash-tx li b{ margin-left:auto; color:var(--text); }
.tx-dot{ width:8px; height:8px; border-radius:50%; }
.tx-dot.upi{ background:var(--primary); } .tx-dot.card{ background:var(--secondary); } .tx-dot.intl{ background:var(--accent); }

.float-chip{
  position:absolute; padding:.6rem 1rem; border-radius:var(--radius-pill); font-size:.8rem; font-weight:600;
  box-shadow:var(--shadow-md); animation:bob 5s ease-in-out infinite;
}
.chip-1{ top:-18px; right:10%; animation-delay:-1.5s; }
.chip-2{ bottom:14%; left:-30px; animation-delay:-3s; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.scroll-cue{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); }
.scroll-cue span{
  display:block; width:22px; height:36px; border:2px solid var(--border); border-radius:14px; position:relative;
}
.scroll-cue span::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--primary);
  border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; top:6px; } 100%{ opacity:0; top:18px; } }

@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:460px; margin:0 auto; }
}

/* =========================================================
   Trusted / logo marquee
========================================================= */
.trusted{ padding:56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trusted-label{ text-align:center; font-weight:600; color:var(--text-soft); font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2rem; }
.logo-marquee{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.logo-track{ display:flex; gap:3.5rem; width:max-content; animation:marquee 28s linear infinite; }
.logo-track span{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--text-soft); opacity:.7; white-space:nowrap; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   Card grids (services / why)
========================================================= */
.card-grid{ display:grid; gap:1.6rem; }
.services-grid{ grid-template-columns:repeat(5,1fr); }
.why-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){ .services-grid{ grid-template-columns:repeat(3,1fr); } .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } .why-grid{ grid-template-columns:1fr; } }

.service-card, .why-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.8rem 1.5rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service-card:hover, .why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,0.25); }
.service-card h3, .why-card h3{ font-size:1.05rem; }
.service-card p, .why-card p{ font-size:.92rem; margin-bottom:0; }
.card-icon{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px;
  background:rgba(37,99,235,0.1); color:var(--primary); margin-bottom:1rem; transition:transform .3s var(--ease), background .3s;
}
.card-icon svg{ width:22px; height:22px; }
.card-icon.accent{ background:rgba(6,182,212,0.12); color:var(--accent); }
.service-card:hover .card-icon, .why-card:hover .card-icon{ transform:scale(1.1) rotate(-6deg); }

/* =========================================================
   Stats
========================================================= */
.stats{ background:var(--gradient-primary); padding:80px 0; position:relative; overflow:hidden; }
.stats::before{
  content:''; position:absolute; inset:0; opacity:.25;
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.4), transparent 40%), radial-gradient(circle at 80% 80%, rgba(255,255,255,.3), transparent 40%);
}
.stats-grid{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); text-align:center; gap:2rem; }
.stat-num{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.6rem); color:#fff; }
.stat-label{ display:block; margin-top:.4rem; font-size:.88rem; color:rgba(255,255,255,.85); font-weight:500; }
@media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   Developers / API
========================================================= */
.dev-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
.dev-points{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.4rem; }
.dev-points li{ position:relative; padding-left:1.6rem; color:var(--text-muted); font-size:.95rem; }
.dev-points li::before{ content:'✓'; position:absolute; left:0; color:var(--primary); font-weight:700; }

.code-panel{ border-radius:var(--radius-lg); overflow:hidden; }
.code-tabs{ display:flex; border-bottom:1px solid var(--border); overflow-x:auto; }
.code-tab{
  background:none; border:none; padding:.9rem 1.3rem; font-size:.86rem; font-weight:600; color:var(--text-soft);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s, border-color .2s;
}
.code-tab.active{ color:var(--primary); border-color:var(--primary); }
.code-body{ position:relative; }
.copy-btn{
  position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:.4rem;
  background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--text-muted);
  padding:.4rem .8rem; border-radius:var(--radius-pill); font-size:.78rem; font-weight:600; z-index:2;
  transition:background .2s, color .2s;
}
.copy-btn:hover{ color:var(--primary); border-color:var(--primary); }
.code-block{
  margin:0; padding:2.8rem 1.5rem 1.6rem; background:#0B1120; color:#D6E2FF; font-size:.86rem;
  overflow-x:auto; min-height:220px; font-family:'SFMono-Regular',Consolas,monospace; line-height:1.7;
}
.code-block code{ font-family:inherit; }
@media (max-width:960px){ .dev-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Testimonials
========================================================= */
.testi-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }
.testi-card{ border-radius:var(--radius-lg); padding:2rem; }
.stars{ color:#FBBF24; letter-spacing:2px; margin-bottom:1rem; }
.testi-card blockquote{ margin:0 0 1.5rem; font-size:1rem; color:var(--text); font-style:italic; }
.testi-card figcaption{ display:flex; align-items:center; gap:.8rem; font-size:.88rem; color:var(--text-muted); }
.avatar{
  width:42px; height:42px; border-radius:50%; background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0;
}

/* =========================================================
   Pricing
========================================================= */
.pricing{ background:var(--bg-alt); }
.pricing-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
.price-card{
  border-radius:var(--radius-lg); padding:2.4rem 2rem; display:flex; flex-direction:column; position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.price-card:hover{ transform:translateY(-6px); }
.price-featured{ border:1.5px solid var(--primary); box-shadow:var(--shadow-lg); transform:scale(1.03); }
.price-featured:hover{ transform:scale(1.03) translateY(-6px); }
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--gradient-primary); color:#fff;
  font-size:.75rem; font-weight:700; padding:.4rem 1rem; border-radius:var(--radius-pill);
}
.price{ font-family:var(--font-display); font-size:1rem; color:var(--text-muted); margin-bottom:.2rem; }
.price span{ font-size:2.1rem; font-weight:800; color:var(--text); }
.price-note{ font-size:.85rem; margin-bottom:1.6rem; }
.price-features{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:2rem; flex-grow:1; }
.price-features li{ position:relative; padding-left:1.6rem; font-size:.92rem; color:var(--text-muted); }
.price-features li::before{ content:'✓'; position:absolute; left:0; color:var(--primary); font-weight:700; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } .price-featured{ transform:none; } .price-featured:hover{ transform:translateY(-6px); } }

/* =========================================================
   FAQ Accordion
========================================================= */
.accordion{ display:flex; flex-direction:column; gap:1rem; }
.acc-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; padding:1.2rem 1.5rem; text-align:left; font-family:var(--font-display);
  font-weight:600; font-size:.98rem; color:var(--text);
}
.acc-trigger svg{ flex-shrink:0; transition:transform .3s var(--ease); color:var(--primary); }
.acc-item.open .acc-trigger svg{ transform:rotate(180deg); }
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.acc-panel p{ padding:0 1.5rem 1.3rem; margin:0; font-size:.93rem; }

/* =========================================================
   Contact
========================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:flex-start; }
.contact-info{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.4rem; font-size:.95rem; color:var(--text-muted); }
.contact-form{ border-radius:var(--radius-lg); padding:2.2rem; display:flex; flex-direction:column; gap:1.2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--text-muted); }
.field input, .field textarea{
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:.75rem .9rem;
  font-family:var(--font-body); font-size:.94rem; color:var(--text); transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.field textarea{ resize:vertical; }
.form-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.form-status{ font-size:.88rem; color:var(--primary); min-height:1.2em; margin:0; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* =========================================================
   Footer
========================================================= */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--border); padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:2.5rem; padding-bottom:3rem; }
.footer-brand p{ font-size:.9rem; max-width:280px; }
.social-icons{ display:flex; gap:.7rem; margin-top:1rem; }
.social-icons a{
  width:36px; height:36px; border-radius:50%; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:color .2s, border-color .2s, transform .2s;
}
.social-icons a:hover{ color:var(--primary); border-color:var(--primary); transform:translateY(-3px); }
.footer-col h4{ font-size:.95rem; margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col ul a{ font-size:.9rem; color:var(--text-muted); transition:color .2s; }
.footer-col ul a:hover{ color:var(--primary); }
.mini-form{ display:flex; gap:.5rem; margin-top:.8rem; }
.mini-form input{
  flex:1; min-width:0; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-pill);
  padding:.6rem 1rem; font-size:.88rem; color:var(--text);
}
.mini-form button{
  width:40px; height:40px; flex-shrink:0; border-radius:50%; border:none; background:var(--gradient-primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.footer-bottom{ border-top:1px solid var(--border); padding:1.5rem 0; text-align:center; }
.footer-bottom p{ margin:0; font-size:.85rem; color:var(--text-soft); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Floating UI
========================================================= */
.whatsapp-fab{
  position:fixed; bottom:24px; left:24px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.4); z-index:400;
  transition:transform .25s var(--ease);
}
.whatsapp-fab:hover{ transform:scale(1.08); }
.back-to-top{
  position:fixed; bottom:24px; right:24px; width:48px; height:48px; border-radius:50%; background:var(--gradient-primary);
  color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:all .3s var(--ease); z-index:400;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-4px); }

.toast{
  position:fixed; bottom:96px; left:50%; transform:translate(-50%, 20px); background:var(--text); color:var(--bg);
  padding:.8rem 1.4rem; border-radius:var(--radius-pill); font-size:.9rem; font-weight:600; opacity:0; visibility:hidden;
  transition:all .3s var(--ease); z-index:600; box-shadow:var(--shadow-lg);
}
.toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }

/* =========================================================
   Scroll reveal
========================================================= */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].revealed{ opacity:1; transform:translateY(0); }

/* =========================================================
   Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
   Responsive type scale tweaks
========================================================= */
@media (max-width:480px){
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .form-actions{ flex-direction:column; }
  .form-actions .btn{ width:100%; }
}

/* =========================================================
   Legal / info pages (Privacy, Terms, Refund, Security)
========================================================= */
.page-hero{
  padding:calc(var(--nav-h) + 64px) 0 56px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
}
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:.6rem; }
.page-hero .page-updated{ color:var(--text-soft); font-size:.9rem; margin:0; }

.legal-content{ padding:64px 0 100px; }
.legal-content .legal-inner{ max-width:800px; margin:0 auto; }
.legal-content h2{
  font-size:1.3rem; margin-top:2.6rem; padding-top:.2rem; scroll-margin-top:calc(var(--nav-h) + 20px);
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:1.05rem; margin-top:1.6rem; }
.legal-content p{ font-size:.98rem; }
.legal-content ul, .legal-content ol{
  margin:0 0 1.2rem; padding-left:1.3rem; color:var(--text-muted); font-size:.98rem;
}
.legal-content li{ list-style:disc; margin-bottom:.5rem; }
.legal-content ol li{ list-style:decimal; }
.legal-content li::marker{ color:var(--primary); }
.legal-content a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }
.legal-content strong{ color:var(--text); }

.legal-toc{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.4rem 1.6rem; margin-bottom:2.5rem;
}
.legal-toc h2{ font-size:1rem; margin:0 0 .8rem; text-transform:uppercase; letter-spacing:.04em; }
.legal-toc ol{ margin:0; padding-left:1.2rem; columns:2; column-gap:2rem; }
.legal-toc li{ list-style:decimal; margin-bottom:.4rem; break-inside:avoid; }
.legal-toc a{ font-size:.92rem; color:var(--text-muted); }
.legal-toc a:hover{ color:var(--primary); }
@media (max-width:600px){ .legal-toc ol{ columns:1; } }

.legal-callout{
  display:flex; gap:.9rem; align-items:flex-start; background:rgba(37,99,235,0.06);
  border:1px solid rgba(37,99,235,0.18); border-radius:var(--radius-md); padding:1.1rem 1.3rem; margin:1.6rem 0;
}
.legal-callout p{ margin:0; font-size:.92rem; }
[data-theme="dark"] .legal-callout{ background:rgba(37,99,235,0.12); }

.security-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin:1.6rem 0 2rem; }
.security-grid .mini-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.2rem 1.3rem;
}
.security-grid .mini-card h3{ margin:0 0 .4rem; font-size:1rem; display:flex; align-items:center; gap:.5rem; }
.security-grid .mini-card p{ margin:0; font-size:.9rem; }
@media (max-width:600px){ .security-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Loading spinners (Contact + Subscribe forms)
========================================================= */
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn-spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:spin .7s linear infinite; flex-shrink:0;
}
.btn-outline .btn-spinner{ border-color:rgba(37,99,235,0.25); border-top-color:var(--primary); }

.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn-label{ opacity:.6; }
.btn.is-loading .btn-spinner{ display:inline-block; }

.mini-form-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.mini-form-btn .btn-spinner{
  border-color:rgba(255,255,255,0.4); border-top-color:#fff; position:absolute;
}
.mini-form-btn.is-loading .btn-label{ opacity:0; }
.mini-form-btn.is-loading .btn-spinner{ display:inline-block; }

.field.is-disabled input, .field.is-disabled textarea{ opacity:.6; }

.form-status.is-success{ color:#16a34a; }
.form-status.is-error{ color:#dc2626; }
[data-theme="dark"] .form-status.is-success{ color:#4ade80; }
[data-theme="dark"] .form-status.is-error{ color:#f87171; }