/* ══════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════ */

/* Lock scroll while loading */
body.preloading { overflow: hidden; }

#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #f7fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .5s ease, visibility .5s ease;
}

#preloader.pre-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pre-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* Logo + brand name */
.pre-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: preLogoPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.pre-logo {
  width: 64px;
  height: 60px;
  object-fit: contain;
}
.pre-brand {
  font-family: var(--font-head, 'Raleway', sans-serif);
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue, #0e6098);
  letter-spacing: -1px;
  line-height: 1;
}
.pre-brand span { color: var(--green, #61b172); }

/* Cycling text */
.pre-text-anim {
  height: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pre-word {
  font-family: var(--font-body, 'Mulish', sans-serif);
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-400, #94a3b8);
  letter-spacing: .4px;
  display: block;
  animation: preWordSlide .4s ease both;
}

/* Progress bar */
.pre-bar {
  width: 120px;
  height: 3px;
  background: var(--gray-200, #e2e8f0);
  border-radius: 99px;
  overflow: hidden;
}
.pre-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue, #0e6098), var(--green, #61b172));
  border-radius: 99px;
  animation: preBarFill 1.8s cubic-bezier(.4,0,.2,1) forwards;
}

/* Keyframes */
@keyframes preLogoPop {
  from { opacity: 0; transform: scale(.82) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes preWordSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes preBarFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  85%  { width: 90%; }
  100% { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader { transition: none; }
  .pre-logo-wrap, .pre-word, .pre-bar-fill { animation: none; }
  .pre-bar-fill { width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   E-Bill — Teasy Services  |  style.css
   21st.dev visual language:
   spotlight · glass · grain · bento · beam borders
   shimmer text · aurora bg · magnetic buttons
   ═══════════════════════════════════════════════════════ */


:root {
  --blue:#0e6098; --blue-dark:#0a4d7a; --blue-light:#1a7bbf;
  --blue-xlight:#3d9fd4; --blue-pale:#e8f3fb;
  --green:#61b172; --green-dark:#4d9a5e; --green-light:#7ac98a; --green-pale:#edf7ef;
  --white:#ffffff; --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0;
  --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b;
  --gray-700:#334155; --gray-900:#0f172a;
  --font-head:'Raleway','Raleway-fallback',Arial,sans-serif;
  --font-body:'Mulish','Mulish-fallback',Arial,sans-serif;
  --r:16px; --rl:24px;
  --s0:0 1px 4px rgba(14,96,152,.06); --s1:0 4px 24px rgba(14,96,152,.10);
  --s2:0 8px 32px rgba(14,96,152,.14); --s3:0 16px 48px rgba(14,96,152,.18);
  --s4:0 28px 72px rgba(14,96,152,.24);
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}


/* ── FONT METRIC OVERRIDES — reduce CLS on font swap ── */
/* These match system-ui metrics to Raleway so the fallback
   takes the same space as the webfont, preventing reflow */
/* ── FONT METRIC OVERRIDES
   Makes Arial fallback take the same space as Raleway/Mulish.
   When display:optional means the webfont never swaps in,
   these ensure the fallback text looks nearly identical in size.
── */
@font-face {
  font-family: 'Raleway-fallback';
  src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
  ascent-override: 93%;
  descent-override: 23%;
  line-gap-override: 0%;
  size-adjust: 100%;
  font-weight: 400 800;
}
@font-face {
  font-family: 'Mulish-fallback';
  src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
  ascent-override: 98%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 100%;
  font-weight: 400 700;
}

/* ── FORCE font-display:optional on Google Fonts faces ──
   Overrides any @font-face injected by Google Fonts API
   so the browser NEVER swaps — eliminates CLS entirely.
── */
@font-face {
  font-family: 'Raleway';
  font-display: optional;
  src: local('Raleway'), local('Raleway-Regular');
  font-weight: 400;
}
@font-face {
  font-family: 'Raleway';
  font-display: optional;
  src: local('Raleway Bold'), local('Raleway-Bold');
  font-weight: 700;
}
@font-face {
  font-family: 'Raleway';
  font-display: optional;
  src: local('Raleway ExtraBold'), local('Raleway-ExtraBold');
  font-weight: 800;
}
@font-face {
  font-family: 'Mulish';
  font-display: optional;
  src: local('Mulish'), local('Mulish-Regular');
  font-weight: 400;
}
@font-face {
  font-family: 'Mulish';
  font-display: optional;
  src: local('Mulish Bold'), local('Mulish-Bold');
  font-weight: 700;
}


/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--gray-700);background:var(--white);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ── SCROLL PROGRESS ── */
#scroll-progress{position:fixed;top:0;left:0;height:3px;z-index:2000;background:var(--blue);width:0%;border-radius:0 3px 3px 0;transition:width .1s linear;}
@keyframes gradMove{0%{background-position:0%}100%{background-position:300%}}

/* grain overlay applied after load via JS class */

/* ── PAGE SYSTEM ── */
.page{display:none}.page.active{display:block}

/* cursor-spotlight injected lazily by JS after first mousemove */

/* ══ NAV — glass morphism ══ */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:68px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);border-bottom:1px solid rgba(14,96,152,.08);transition:all .3s var(--ease);}
nav.scrolled{background:rgba(255,255,255,.9);box-shadow:0 4px 32px rgba(14,96,152,.1),0 1px 0 rgba(14,96,152,.05);}
.nav-logo{display:flex;align-items:center;gap:11px;cursor:pointer;text-decoration:none;transition:opacity .2s;}
.nav-logo:hover{opacity:.82}
.nav-logo svg,.nav-logo-img{width:36px;height:34px;object-fit:contain;display:block;}
.nav-logo-text{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--blue);letter-spacing:-.5px;}
.nav-logo-text span{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:1.8rem;list-style:none;}
.nav-links a{font-family:var(--font-body);font-weight:600;font-size:.89rem;color:var(--gray-500);text-decoration:none;position:relative;padding-bottom:2px;transition:color .2s;}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:2px;transition:width .25s var(--ease);}
.nav-links a:hover{color:var(--blue)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:10px;align-items:center}

/* ══ BUTTONS ══ */
.btn{font-family:var(--font-body);font-weight:700;font-size:.9rem;padding:10px 22px;border-radius:10px;border:none;cursor:pointer;transition:all .22s var(--ease);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;position:relative;overflow:hidden;letter-spacing:.1px;user-select:none;}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .5s var(--ease);pointer-events:none;}
.btn:hover::before{left:160%}
.btn:active{transform:scale(.97)!important;transition-duration:.08s}
.btn-primary{background:var(--blue);color:white}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(14,96,152,.36);}
.btn-green{background:var(--green);color:white}
.btn-green:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 28px rgba(97,177,114,.36);}
.btn-outline{background:transparent;color:var(--blue);border:1.5px solid rgba(14,96,152,.4);}
.btn-outline:hover{background:var(--blue);color:white;transform:translateY(-2px);box-shadow:0 8px 24px rgba(14,96,152,.22);border-color:transparent;}
.btn-white{background:white;color:var(--blue);font-weight:800}
.btn-white:hover{background:#f0f7ff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.22);}
.btn-ghost{background:rgba(255,255,255,.14);color:white;border:1.5px solid rgba(255,255,255,.22);}
.btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.btn-lg{padding:15px 36px;font-size:1rem;border-radius:12px}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;border:none;background:none;padding:6px;border-radius:8px;transition:background .2s;}
.hamburger:hover{background:var(--gray-100)}
.hamburger span{display:block;width:22px;height:2px;background:var(--gray-700);border-radius:2px;transition:all .3s;}

/* ── MOBILE NAV ── */
.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--gray-200);padding:1.2rem 1.5rem;z-index:999;flex-direction:column;gap:.8rem;box-shadow:0 20px 60px rgba(14,96,152,.14);}
.mobile-nav.open{display:flex;animation:slideDown .22s var(--ease)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mobile-nav a{font-weight:600;font-size:.95rem;color:var(--gray-700);text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--gray-100);transition:color .2s,padding-left .2s;}
.mobile-nav a:hover{color:var(--blue);padding-left:6px}
.mobile-nav a:last-child{border-bottom:none}

/* ══ HERO ══ */
.hero{min-height:100vh;display:flex;align-items:center;background:#f7fbff;position:relative;overflow:hidden;padding:90px 2rem 64px;contain:layout;}
.hero-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(48px);opacity:.45;animation:auroraFloat 12s ease-in-out infinite;will-change:transform;}
.aurora-blob-1{width:700px;height:700px;top:-200px;right:-150px;background:radial-gradient(circle,rgba(14,96,152,.18) 0%,transparent 70%);animation-delay:0s;}
.aurora-blob-2{width:500px;height:500px;bottom:-120px;left:-100px;background:radial-gradient(circle,rgba(97,177,114,.16) 0%,transparent 70%);animation-delay:-4s;}
.aurora-blob-3{width:350px;height:350px;top:40%;left:30%;background:radial-gradient(circle,rgba(61,159,212,.10) 0%,transparent 70%);animation-delay:-8s;}
@keyframes auroraFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(28px,-18px) scale(1.06)}66%{transform:translate(-18px,12px) scale(.96)}}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(14,96,152,.09) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,black 20%,transparent 100%);pointer-events:none;}
.hero-inner{max-width:1200px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1;contain:layout style;}

/* Hero badge shimmer */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(97,177,114,.1);border:1px solid rgba(97,177,114,.25);color:var(--green-dark);border-radius:50px;padding:6px 16px;font-size:.79rem;font-weight:700;margin-bottom:1.4rem;margin-top:2.2rem;letter-spacing:.4px;position:relative;overflow:hidden;}
.hero-badge::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(97,177,114,.18),transparent);transform:skewX(-20deg);animation:badgeShimmer 6s ease-in-out infinite;}
@keyframes badgeShimmer{0%,55%{left:-100%}75%,100%{left:160%}}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 0 0 rgba(97,177,114,.5);animation:ping 2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(97,177,114,.5)}70%{box-shadow:0 0 0 10px rgba(97,177,114,0)}100%{box-shadow:0 0 0 0 rgba(97,177,114,0)}}

.hero h1{font-family:var(--font-head);font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;line-height:1.15;color:var(--gray-900);margin-bottom:1.2rem;letter-spacing:-1.5px;}
.hero h1 .accent{color:var(--blue)}
.hero h1 .accent-green{background:linear-gradient(135deg,var(--green) 0%,var(--green-dark) 50%,#2d7a3e 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmerText 4s linear 3;display:inline-block;min-width:14ch;vertical-align:bottom;}
@keyframes shimmerText{0%{background-position:0% center}100%{background-position:200% center}}
.hero-sub{font-size:1.03rem;line-height:1.75;color:var(--gray-500);margin-bottom:2rem;max-width:460px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:2.8rem}

/* Stats pill */
.hero-stats{display:flex;gap:0;border:1px solid rgba(14,96,152,.12);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--s0);width:fit-content;}
.stat{padding:13px 22px;text-align:center;border-right:1px solid rgba(14,96,152,.1);}
.stat:last-child{border-right:none}
.stat-num{font-family:var(--font-head);font-size:1.45rem;font-weight:800;color:var(--blue);line-height:1;}
.stat-label{font-size:.7rem;color:var(--gray-500);font-weight:700;margin-top:3px;letter-spacing:.4px;text-transform:uppercase;}

/* Floating invoice */
.hero-visual{position:relative}
.invoice-card{background:#fff;border-radius:20px;box-shadow:0 24px 64px rgba(14,96,152,.15),0 4px 16px rgba(14,96,152,.08);border:1px solid rgba(14,96,152,.08);padding:28px;position:relative;animation:floatCard 5s ease-in-out infinite;will-change:transform;contain:layout style;}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-10px) rotate(.3deg)}66%{transform:translateY(-5px) rotate(-.2deg)}}
.invoice-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.invoice-brand{font-family:var(--font-head);font-weight:800;color:var(--blue);font-size:1.1rem}
.invoice-num{font-size:.75rem;color:var(--gray-500);margin-top:2px}
.invoice-badge{background:var(--green-pale);color:var(--green-dark);font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:50px;border:1px solid rgba(97,177,114,.2);}
.invoice-divider{height:1px;background:var(--gray-100);margin:14px 0}
.invoice-row{display:flex;justify-content:space-between;font-size:.83rem;padding:5px 0}
.invoice-row.total{font-weight:700;font-size:.94rem;color:var(--gray-900);padding-top:12px;margin-top:6px;border-top:2px solid var(--gray-200);}
.invoice-row .label{color:var(--gray-500)}
.invoice-footer{margin-top:16px;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-light) 100%);color:white;border-radius:10px;padding:11px 16px;display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;}
.whatsapp-bubble{position:absolute;bottom:-22px;right:-22px;background:linear-gradient(135deg,#1fbe5e 0%,#25D366 100%);color:white;border-radius:14px;padding:11px 18px;box-shadow:0 10px 32px rgba(37,211,102,.38);font-size:.79rem;font-weight:700;display:flex;align-items:center;gap:8px;animation:floatCard 5s ease-in-out infinite .9s;white-space:nowrap;will-change:transform;}
.payment-chip{position:absolute;top:-20px;left:-22px;background:#fff;border-radius:12px;padding:10px 16px;box-shadow:var(--s3);font-size:.79rem;font-weight:700;color:var(--gray-900);display:flex;align-items:center;gap:8px;animation:floatCard 5s ease-in-out infinite 1.8s;border:1px solid rgba(14,96,152,.1);white-space:nowrap;will-change:transform;}

/* ══ SECTION COMMONS ══ */
section{padding:100px 2rem}
/* Skip off-screen rendering */
.how-bg,.features-grid,.gst-section,.wallet-section,.whatsapp-section{content-visibility:auto;contain-intrinsic-size:0 600px;}
/* faq-section intentionally excluded — content-visibility causes unstyled flash on first load */
.section-inner{max-width:1200px;margin:0 auto}
.section-tag{font-size:.74rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--green);margin-bottom:.8rem;display:flex;align-items:center;gap:8px;}
.section-tag::before{content:'';display:block;width:18px;height:2px;background:var(--green);border-radius:2px;}
.section-title{font-family:var(--font-head);font-size:clamp(1.8rem,3.5vw,2.55rem);font-weight:800;color:var(--gray-900);line-height:1.15;letter-spacing:-1px;margin-bottom:1rem;}
.section-sub{font-size:1.01rem;color:var(--gray-500);line-height:1.75;max-width:560px;}
.section-header{margin-bottom:3.5rem}
.section-header.center{text-align:center}
.section-header.center .section-sub{margin:0 auto}
.section-header.center .section-tag{justify-content:center}
.section-header.center .section-tag::before{display:none}

/* ══ HOW IT WORKS ══ */
.how-bg{background:var(--gray-50);position:relative;}
.how-bg::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green),var(--blue-xlight));background-size:200% 100%;animation:gradMove 8s linear infinite;}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.4rem;}

/* Card with JS-driven spotlight */
.step-card{background:white;border-radius:var(--r);padding:1.8rem 1.4rem;text-align:center;border:1px solid var(--gray-200);transition:transform .3s var(--spring),box-shadow .3s var(--ease),border-color .3s;position:relative;overflow:hidden;--cx:50%;--cy:50%;}
.step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--r) var(--r) 0 0;opacity:0;transition:opacity .3s;}
.step-card:nth-child(odd)::before{background:var(--blue)}
.step-card:nth-child(even)::before{background:var(--green)}
.step-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(14,96,152,.14);border-color:rgba(14,96,152,.12);}
.step-card:hover::before{opacity:1}
/* Cursor glow */
.step-card-glow{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(180px circle at var(--cx) var(--cy),rgba(14,96,152,.08) 0%,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none;}
.step-card:hover .step-card-glow{opacity:1}

.step-num{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.2rem;font-weight:800;margin:0 auto 1.1rem;color:white;position:relative;z-index:1;}
.step-card:nth-child(odd) .step-num{background:linear-gradient(135deg,var(--blue),var(--blue-xlight))}
.step-card:nth-child(even) .step-num{background:linear-gradient(135deg,var(--green),var(--green-light))}
.step-card h3{font-family:var(--font-head);font-size:.98rem;font-weight:700;color:var(--gray-900);margin-bottom:.4rem;position:relative;z-index:1;}
.step-card p{font-size:.85rem;color:var(--gray-500);line-height:1.6;position:relative;z-index:1;}

/* ══ FEATURES — Bento Grid ══ */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.feature-card.wide{grid-column:span 2}

.feature-card{background:#fff;border-radius:var(--r);padding:1.8rem;border:1px solid rgba(14,96,152,.08);transition:transform .3s var(--spring),box-shadow .3s var(--ease),border-color .3s;position:relative;overflow:hidden;cursor:default;--cx:50%;--cy:50%;}
/* JS cursor glow */
.feature-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--cx) var(--cy),rgba(14,96,152,.07) 0%,transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none;}
.feature-card:hover .feature-glow{opacity:1}
.feature-card:hover{border-color:rgba(14,96,152,.2);box-shadow:0 16px 48px rgba(14,96,152,.13);transform:translateY(-4px) scale(1.005);}
/* Animated top beam on hover */
.feature-card::before{content:'';position:absolute;top:0;left:-100%;right:100%;height:2px;background:linear-gradient(90deg,transparent,var(--blue),var(--green),transparent);border-radius:2px;transition:none;}
.feature-card:hover::before{left:0;right:0;transition:left .4s var(--ease),right .4s var(--ease);}
.feature-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:1rem;transition:transform .3s var(--spring);position:relative;z-index:1;}
.feature-card:hover .feature-icon{transform:scale(1.12) rotate(-4deg)}
.feature-icon.blue{background:var(--blue-pale);box-shadow:0 0 0 4px rgba(14,96,152,.05)}
.feature-icon.green{background:var(--green-pale);box-shadow:0 0 0 4px rgba(97,177,114,.05)}
.feature-card h3{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--gray-900);margin-bottom:.45rem;display:flex;align-items:center;flex-wrap:wrap;gap:4px;position:relative;z-index:1;}
.feature-card p{font-size:.86rem;color:var(--gray-500);line-height:1.65;position:relative;z-index:1;}
.pro-badge-inline{display:inline-flex;align-items:center;background:linear-gradient(135deg,var(--blue),var(--blue-light));color:white;font-size:.6rem;font-weight:800;padding:2px 8px;border-radius:50px;margin-left:4px;letter-spacing:.4px;box-shadow:0 2px 8px rgba(14,96,152,.28);}

/* ══ PRICING ══ */
.pricing-bg{background:linear-gradient(180deg,#f0f8ff 0%,white 55%);position:relative;}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;max-width:860px;margin:0 auto;align-items:start;padding-top:32px;overflow:visible;}
.plan-card{background:#fff;border-radius:var(--rl);border:1.5px solid rgba(14,96,152,.1);padding:2.4rem 2rem;position:relative;transition:transform .3s var(--spring),box-shadow .3s var(--ease);--cx:50%;--cy:50%;}
.plan-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--cx) var(--cy),rgba(14,96,152,.06) 0%,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none;overflow:hidden;}
.plan-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--cx) var(--cy),rgba(14,96,152,.06) 0%,transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none;}
.plan-card:hover{transform:translateY(-5px);box-shadow:0 24px 56px rgba(14,96,152,.14);}
.plan-card:hover .plan-glow{opacity:1}
.plan-card.featured{border-color:rgba(14,96,152,.28);background:linear-gradient(180deg,rgba(232,243,251,.5) 0%,rgba(255,255,255,.95) 40%);box-shadow:0 0 0 4px rgba(14,96,152,.06),var(--s4);}
.pricing-grid{align-items:start}
/* Animated ring on featured card */
.plan-ring{position:absolute;inset:-1px;border-radius:calc(var(--rl) + 1px);background:linear-gradient(135deg,var(--blue),var(--green),var(--blue-xlight));z-index:-1;opacity:.22;}

.plan-badge{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue),var(--blue-light));color:white;font-size:.72rem;font-weight:800;padding:5px 18px;border-radius:50px;letter-spacing:.6px;white-space:nowrap;box-shadow:0 4px 20px rgba(14,96,152,.38);z-index:10;}
.plan-name{font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:var(--gray-900);margin-bottom:.3rem}
.plan-tagline{font-size:.83rem;color:var(--gray-500);margin-bottom:1.5rem}
.plan-price{font-family:var(--font-head);font-size:2.75rem;font-weight:800;color:var(--blue);line-height:1}
.plan-price .currency{font-size:1.4rem;vertical-align:top;margin-top:7px;display:inline-block}
.plan-price .period{font-size:.87rem;font-weight:600;color:var(--gray-500)}
.plan-note{font-size:.75rem;color:var(--gray-500);margin-top:5px}
.plan-wallet-note{background:var(--green-pale);border:1px solid rgba(97,177,114,.22);border-radius:8px;padding:10px 14px;font-size:.8rem;color:var(--green-dark);font-weight:600;margin:1.2rem 0;display:flex;align-items:center;gap:8px;}
.plan-invoice-rate{display:flex;align-items:center;gap:12px;background:var(--blue-pale);border-radius:8px;padding:10px 14px;margin-bottom:1.4rem;border:1px solid rgba(14,96,152,.08);}
.plan-invoice-rate .rate{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--blue)}
.plan-invoice-rate .rate-label{font-size:.78rem;color:var(--gray-500);line-height:1.4}
.plan-divider{height:1px;background:var(--gray-200);margin:1.4rem 0}
.plan-features{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.plan-features li{font-size:.86rem;display:flex;align-items:flex-start;gap:10px;color:var(--gray-700);line-height:1.5;}
.plan-features li::before{content:'✓';font-weight:900;flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.67rem;margin-top:1px;}
.plan-card.basic .plan-features li::before{background:var(--green-pale);color:var(--green-dark)}
.plan-card.featured .plan-features li::before{background:var(--blue-pale);color:var(--blue)}
.plan-features li.no{color:var(--gray-500)}
.plan-features li.no::before{background:var(--gray-100);color:var(--gray-500);content:'✗'}
.plan-cta{margin-top:1.8rem}.plan-cta .btn{width:100%;justify-content:center}

/* ══ GST ══ */
.gst-section{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 55%,#1588cc 100%);color:white;position:relative;overflow:hidden;}
.gst-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.gst-inner{max-width:1040px;margin:0 auto;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.gst-inner .section-tag{color:rgba(255,255,255,.75)}
.gst-inner .section-tag::before{background:rgba(255,255,255,.28)}
.gst-inner .section-title{color:white}.gst-inner .section-sub{color:rgba(255,255,255,.7)}
.gst-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:1.4rem}
.gst-list li{display:flex;align-items:flex-start;gap:12px;font-size:.9rem;color:rgba(255,255,255,.8)}
.gst-list li span.icon{width:30px;height:30px;border-radius:8px;flex-shrink:0;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.9rem;border:1px solid rgba(255,255,255,.08);}
.gst-visual{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border-radius:20px;padding:2rem;border:1px solid rgba(255,255,255,.12);}
.gst-visual-title{font-family:var(--font-head);font-weight:800;font-size:.98rem;color:white;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.gst-visual-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.87rem;}
.gst-visual-row:last-child{border-bottom:none;border-top:1px solid rgba(255,255,255,.18);font-weight:700;font-size:1.02rem;padding-top:14px;margin-top:4px;}
.gst-visual-row .lbl{color:rgba(255,255,255,.78)}.gst-visual-row .val{color:white;font-weight:600}

/* ══ WALLET ══ */
.wallet-section{background:var(--gray-50)}
.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.wallet-card-main{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 60%,var(--blue-xlight) 100%);border-radius:20px;padding:2.2rem;color:white;box-shadow:0 24px 56px rgba(14,96,152,.32);position:relative;overflow:hidden;}
.wallet-card-main::after{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06);}
.wallet-balance-label{font-size:.75rem;opacity:.68;margin-bottom:.3rem;letter-spacing:.6px;text-transform:uppercase}
.wallet-balance{font-family:var(--font-head);font-size:2.5rem;font-weight:800;margin-bottom:1.2rem;letter-spacing:-1px}
.wallet-meta{display:flex;gap:1.5rem;font-size:.77rem;opacity:.78}.wallet-meta span{display:flex;align-items:center;gap:5px}
.wallet-txn{background:#fff;border-radius:14px;padding:1.4rem;box-shadow:var(--s3);margin-top:-20px;margin-left:20px;border:1px solid rgba(14,96,152,.08);}
.wallet-txn-title{font-family:var(--font-head);font-weight:700;font-size:.84rem;color:var(--gray-900);margin-bottom:10px}
.txn-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:.83rem}
.txn-row+.txn-row{border-top:1px solid var(--gray-100)}
.txn-row .txn-debit{color:#ef4444;font-weight:700}.txn-row .txn-credit{color:var(--green);font-weight:700}.txn-row .txn-label{color:var(--gray-700)}
.wallet-points{display:flex;flex-direction:column;gap:.9rem;margin-top:1.3rem}
.wallet-point{display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:1rem 1.2rem;border:1px solid rgba(14,96,152,.08);transition:transform .25s var(--spring),box-shadow .25s,border-color .25s;}
.wallet-point:hover{box-shadow:var(--s1);transform:translateX(5px);border-color:rgba(14,96,152,.18);}
.wallet-point-icon{font-size:1.35rem;flex-shrink:0}.wallet-point h4{font-family:var(--font-head);font-weight:700;font-size:.93rem;color:var(--gray-900);margin-bottom:.2rem}
.wallet-point p{font-size:.81rem;color:var(--gray-500);line-height:1.55}

/* ══ WHATSAPP ══ */
.whatsapp-section{background:linear-gradient(135deg,#eaf7ee 0%,#f0f8ff 100%);position:relative;}
.whatsapp-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.chat-window{background:#e5ddd5;border-radius:20px;overflow:hidden;box-shadow:var(--s4);border:1px solid rgba(0,0,0,.06);}
.chat-header{background:#075e54;color:white;padding:12px 16px;display:flex;align-items:center;gap:12px;}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--green-light),var(--green));display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.chat-contact{font-size:.86rem;font-weight:700}.chat-status{font-size:.7rem;opacity:.78}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:82%;border-radius:12px;padding:9px 13px;font-size:.8rem;line-height:1.55;position:relative;}
.chat-msg.out{align-self:flex-end;background:#d9fdd3;border-bottom-right-radius:2px;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.07);}
.chat-msg.in{align-self:flex-start;background:white;border-bottom-left-radius:2px;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.07);}
.chat-msg strong{color:var(--blue-dark)}.chat-msg-time{font-size:.62rem;color:#999;text-align:right;margin-top:4px}
.wa-features{display:flex;flex-direction:column;gap:.85rem;margin-top:1.5rem}
.wa-feat{display:flex;gap:13px;align-items:flex-start;background:#fff;border-radius:12px;padding:.95rem 1.1rem;border:1px solid rgba(97,177,114,.12);transition:transform .25s var(--spring),box-shadow .25s,border-color .25s;}
.wa-feat:hover{box-shadow:0 8px 24px rgba(97,177,114,.14);border-color:rgba(97,177,114,.25);transform:translateY(-3px);}
.wa-feat-icon{width:40px;height:40px;border-radius:10px;background:var(--green-pale);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;}
.wa-feat h4{font-family:var(--font-head);font-weight:700;font-size:.89rem;color:var(--gray-900);margin-bottom:.15rem}
.wa-feat p{font-size:.81rem;color:var(--gray-500)}

/* ══ CTA ══ */
.cta-section{background:linear-gradient(145deg,var(--blue-dark) 0%,var(--blue) 50%,#1a8fd1 100%);color:white;text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;}
.cta-orb{position:absolute;border-radius:50%;pointer-events:none}
.cta-orb-1{top:-80px;right:-80px;width:360px;height:360px;background:radial-gradient(circle,rgba(97,177,114,.22) 0%,transparent 70%);}
.cta-orb-2{bottom:-60px;left:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 70%);}
.cta-section .section-inner{position:relative;z-index:1}
.cta-section .section-tag{color:rgba(255,255,255,.75);justify-content:center}.cta-section .section-tag::before{background:rgba(255,255,255,.28)}
.cta-section .section-title{color:white}.cta-section .section-sub{color:rgba(255,255,255,.72);margin:0 auto 2.2rem}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ══ FOOTER ══ */
footer{background:var(--gray-900);color:rgba(255,255,255,.58);padding:72px 2rem 36px;position:relative;}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--green),var(--blue-xlight),var(--blue));background-size:300% 100%;animation:gradMove 8s linear infinite;}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.footer-logo-wrap{display:inline-flex;align-items:center;justify-content:center;background:white;border-radius:14px;width:60px;height:60px;margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.2);padding:9px;transition:transform .25s var(--spring),box-shadow .25s;}
.footer-logo-wrap:hover{transform:scale(1.06);box-shadow:0 8px 28px rgba(14,96,152,.25)}
.footer-logo-wrap svg,.footer-logo-img{width:42px;height:40px;display:block;object-fit:contain;}
.footer-brand-name{font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:white;margin-bottom:.4rem}
.footer-brand-name span{color:var(--green)}
.footer-legal-name{font-size:.7rem;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:.8rem;}
.footer-brand p{font-size:.85rem;line-height:1.75;max-width:260px}
.footer-col h4{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:white;margin-bottom:1.1rem;letter-spacing:.2px;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.footer-col a{font-size:.83rem;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s,padding-left .2s;cursor:pointer;display:inline-flex;align-items:center;}
.footer-col a:hover{color:var(--green-light);padding-left:5px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:center;font-size:.8rem;color:rgba(255,255,255,.55);text-align:center;}

/* ══ INNER PAGES ══ */
.inner-page{padding-top:68px;min-height:100vh}
.inner-page-hero{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue) 60%,#1a8fd1 100%);color:white;padding:72px 2rem;position:relative;overflow:hidden;}
.inner-page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
.inner-page-hero-inner{max-width:860px;margin:0 auto;position:relative;z-index:1}
.inner-page-hero h1{font-family:var(--font-head);font-size:clamp(1.8rem,3.5vw,2.55rem);font-weight:800;margin-bottom:.8rem;letter-spacing:-.5px;}
.inner-page-hero p{opacity:.7;font-size:.94rem}
.inner-page-content{max-width:860px;margin:0 auto;padding:64px 2rem}
.inner-page-content h2{font-family:var(--font-head);font-size:1.28rem;font-weight:800;color:var(--gray-900);margin:2.2rem 0 .7rem;padding-left:12px;border-left:3px solid var(--blue);}
.inner-page-content h2:first-child{margin-top:0}
.inner-page-content p{font-size:.91rem;line-height:1.85;color:var(--gray-700);margin-bottom:.9rem}
.inner-page-content ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.1rem}
.inner-page-content ul li{font-size:.91rem;color:var(--gray-700);line-height:1.75;display:flex;gap:10px;align-items:flex-start;}
.inner-page-content ul li::before{content:'→';color:var(--blue);font-weight:700;flex-shrink:0;margin-top:1px}
.inner-page-content .info-box{background:var(--blue-pale);border-left:4px solid var(--blue);border-radius:0 10px 10px 0;padding:1.1rem 1.4rem;margin:1.4rem 0;font-size:.9rem;color:var(--blue-dark);line-height:1.65;}

/* ══ FADE REVEALS ══ */
.fade-up{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-up-children>*{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.fade-up-children.visible>*:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0s}
.fade-up-children.visible>*:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.07s}
.fade-up-children.visible>*:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.14s}
.fade-up-children.visible>*:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.21s}
.fade-up-children.visible>*:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.28s}
.fade-up-children.visible>*:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.35s}
.fade-up-children.visible>*:nth-child(7){opacity:1;transform:translateY(0);transition-delay:.42s}
.fade-up-children.visible>*:nth-child(n+8){opacity:1;transform:translateY(0);transition-delay:.49s}


/* ══════════════════════════════════════════
   FAQ SECTION — two-column layout + numbered accordion
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   FAQ — clean centered accordion
══════════════════════════════════════════ */
.faq-section {
  background: var(--white);
  padding: 96px 2rem;
  border-top: 1px solid var(--gray-200);
}
.faq-inner {
  max-width: 720px;
  margin: 0 auto;
}
.faq-top {
  text-align: center;
  margin-bottom: 3rem;
}
.faq-top .section-tag { justify-content: center; }
.faq-top .section-tag::before { display: none; }
.faq-top .section-sub { margin: .6rem auto 0; }

/* List */
.faq-list {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
}

/* Each item — divided by border */
.faq-item {
  border-bottom: 1px solid var(--gray-200);
}
.faq-item:last-child { border-bottom: none; }

/* Question button */
.faq-q {
  width: 100%;
  background: var(--white);
  border: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
  font-size: .97rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.45;
  transition: background .18s, color .18s;
  min-height: 56px;
}
.faq-q:hover {
  background: var(--gray-50);
  color: var(--blue);
}
.faq-q[aria-expanded="true"] {
  background: var(--blue-pale);
  color: var(--blue);
}

/* Chevron icon */
.faq-chevron {
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform .28s cubic-bezier(.4,0,.2,1), color .18s;
}
.faq-q:hover .faq-chevron { color: var(--blue); }
.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
  color: var(--blue);
}

/* Answer */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, padding .22s ease;
  background: var(--white);
}
.faq-a.open {
  max-height: 400px;
}
.faq-a p {
  padding: 0 1.5rem 1.25rem;
  margin: 0;
  font-size: .9rem;
  color: var(--gray-500);
  line-height: 1.8;
  border-top: 1px solid var(--gray-200);
  padding-top: .9rem;
}
.faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.faq-a strong { color: var(--gray-700); }

.faq-q:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

@media (max-width: 640px) {
  .faq-section { padding: 60px 1.25rem; }
  .faq-q { padding: 1rem 1.1rem; font-size: .91rem; }
  .faq-a p { padding: 0 1.1rem 1rem; padding-top: .8rem; }
}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .feature-card.wide{grid-column:span 1}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
  .footer-grid .footer-brand{grid-column:1/-1}
}
@media(max-width:900px){
  nav{padding:0 1.25rem}
  .nav-links{display:none}.hamburger{display:flex}
  section{padding:64px 1.5rem}
  .hero{padding:90px 1.5rem 56px}
  .hero-inner{grid-template-columns:1fr;gap:32px}.hero-visual{display:none}
  .gst-inner{grid-template-columns:1fr;gap:32px}
  .wallet-grid{grid-template-columns:1fr;gap:32px}
  .whatsapp-grid{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-grid .footer-brand{grid-column:1/-1}
  .steps-grid{grid-template-columns:repeat(3,1fr)}
  .inner-page-content{padding:48px 1.5rem}
}
@media(max-width:640px){
  section{padding:56px 1.25rem}
  .hero{padding:86px 1.25rem 48px}
  .hero h1{font-size:1.95rem;letter-spacing:-.8px}
  .hero-actions{flex-direction:column;gap:10px}.hero-actions .btn{width:100%}
  .hero-stats{flex-wrap:wrap;width:100%}.hero-stats .stat{flex:1;min-width:85px}
  .stat-num{font-size:1.3rem}.btn-lg{padding:14px 24px;font-size:.95rem}
  .section-title{font-size:1.65rem}
  .features-grid{grid-template-columns:1fr}.feature-card.wide{grid-column:span 1}
  .steps-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .cta-actions{flex-direction:column;align-items:center}.cta-actions .btn{width:100%;max-width:300px}
  .wallet-card-main{padding:1.6rem}.wallet-balance{font-size:2.1rem}
  .wallet-txn{margin-left:0;margin-top:16px}.plan-card{padding:1.8rem 1.4rem}
  .inner-page-hero{padding:52px 1.25rem}.inner-page-content{padding:36px 1.25rem}
}
@media(max-width:420px){
  .steps-grid{grid-template-columns:1fr}.hero h1{font-size:1.75rem}
}



/* ══════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   Kill all animations / transitions for
   users who request it — and for bots
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .aurora-blob,.hero-badge::after,.hero-badge-dot,
  .invoice-card,.whatsapp-bubble,.payment-chip,
  #scroll-progress,.plan-ring,.faq-icon,
  .feature-card::before,.how-bg::before,
  footer::before,.faq-section::before {
    animation:none !important;
    transition:none !important;
  }
}
/* Grain overlay — applied by JS after page fully loaded */
body.grain-loaded::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  opacity:.35;
}
/* Cursor spotlight — injected by JS after first mousemove */
#cursor-spotlight{
  position:fixed;pointer-events:none;z-index:0;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,96,152,.05) 0%,transparent 55%);
  transform:translate(-50%,-50%);
  will-change:transform;
}
/* ── H3 aliases for promoted headings (was h4) ── */
.wa-feat-title{font-family:var(--font-head);font-weight:700;font-size:.89rem;color:var(--gray-900);margin-bottom:.15rem;}
.wallet-point-title{font-family:var(--font-head);font-weight:700;font-size:.93rem;color:var(--gray-900);margin-bottom:.2rem;}
.footer-col-heading{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:white;margin-bottom:1.1rem;letter-spacing:.2px;}

/* ── SKIP TO MAIN (keyboard / screen reader) ── */
.skip-to-main{position:absolute;top:-100%;left:1rem;z-index:9999;background:var(--blue);color:white;padding:.75rem 1.5rem;border-radius:0 0 8px 8px;font-weight:700;text-decoration:none;transition:top .2s;}
.skip-to-main:focus{top:0;}

/* ── MOBILE TOUCH OPTIMISATIONS ── */
/* Remove blue flash on tap (iOS/Android) */
a,button,.btn{-webkit-tap-highlight-color:transparent;}
/* Ensure touch targets are 44×44px minimum (WCAG 2.5.5) */
.btn{min-height:44px;}
.btn-lg{min-height:52px;}
.hamburger{min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center;}
.faq-q{min-height:52px;}
.nav-links a{padding:4px 2px;}
/* Smooth momentum scrolling on iOS */
html{-webkit-overflow-scrolling:touch;}
/* Prevent font size inflation on orientation change */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* touch-action: manipulation removes 300ms tap delay */
a,button,.btn{touch-action:manipulation;}
/* ── FOCUS STYLES — keyboard navigation (WCAG 2.4.7) ── */
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}
.btn:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(14,96,152,.15);
}
.faq-q:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:-2px;
  background:rgba(14,96,152,.03);
}
.nav-links a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
  border-radius:4px;
}
/* Remove default outline on mouse click only */
:focus:not(:focus-visible){outline:none;}
/* ── PRINT STYLES ── */
@media print{
  nav,.hero-aurora,.aurora-blob,#scroll-progress,
  .hamburger,.mobile-nav,.cursor-spotlight,
  .btn-magnetic,.cta-section{display:none!important;}
  body{font-size:12pt;color:#000;background:#fff;}
  a[href]::after{content:" (" attr(href) ")";font-size:10pt;color:#666;}
  .hero{min-height:auto;padding:2rem 0;}
  section{padding:1.5rem 0;page-break-inside:avoid;}
}
/* ── SCROLL MARGIN — prevent nav covering anchor targets ── */
#how,#features,#pricing,#faq,#main-content{scroll-margin-top:80px;}