/* style.css — Fayro brand design system */
@import url('https://api.fontshare.com/v2/css?f[]=sora@400,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Hind+Siliguri:wght@400;500;600;700&display=swap');

:root,
[data-theme='light'] {
  /* Fayro surfaces — warm, no black */
  --color-bg: #FBF7F2;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFFDFB;
  --color-surface-offset: #F4ECE2;
  --color-surface-offset-2: #EDE2D4;
  --color-divider: #E8DDCE;
  --color-border: #E0D3C1;

  /* Text — warm espresso, never pure black */
  --color-text: #2A1F17;
  --color-text-muted: #6E5B4B;
  --color-text-faint: #A89684;
  --color-text-inverse: #FFFDFB;

  /* Primary — Fayro orange */
  --color-primary: #FF6611;
  --color-primary-hover: #E55700;
  --color-primary-active: #C44900;
  --color-primary-soft: #FFE6D6;
  --color-primary-highlight: #FFD4B8;

  /* Semantic */
  --color-success: #2E7D32;
  --color-success-soft: #D7F0D8;
  --color-error: #C0392B;
  --color-error-soft: #FBE3DF;
  --color-warning: #B26A00;
  --color-warning-soft: #FBEAD0;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16,1,0.3,1);

  --shadow-sm: 0 1px 2px oklch(0.3 0.02 50 / 0.06);
  --shadow-md: 0 6px 18px oklch(0.35 0.03 50 / 0.10);
  --shadow-lg: 0 18px 48px oklch(0.35 0.04 50 / 0.16);
  --shadow-orange: 0 12px 40px oklch(0.62 0.17 45 / 0.30);

  --content-narrow: 640px;
  --content-default: 1080px;
  --content-wide: 1240px;

  --font-display: 'Sora', 'Hind Siliguri', system-ui, sans-serif;
  --font-body: 'Inter', 'Hind Siliguri', system-ui, sans-serif;
  --font-bangla: 'Hind Siliguri', 'Inter', sans-serif;

  /* Fluid type scale — grows with viewport */
  --text-xs: clamp(0.72rem, 0.69rem + 0.15vw, 0.8rem);
  --text-sm: clamp(0.83rem, 0.80rem + 0.18vw, 0.90rem);
  --text-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.02rem);
  --text-lg: clamp(1.08rem, 1.03rem + 0.28vw, 1.22rem);
  --text-xl: clamp(1.35rem, 1.25rem + 0.55vw, 1.7rem);
  --text-2xl: clamp(1.75rem, 1.55rem + 1.0vw, 2.45rem);
  --text-hero: clamp(2.4rem, 1.85rem + 2.7vw, 4.0rem);

  /* 4px spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

[data-theme='dark'] {
  --color-bg: #1C1610;
  --color-surface: #251D14;
  --color-surface-2: #2B2218;
  --color-surface-offset: #322617;
  --color-surface-offset-2: #3A2C1B;
  --color-divider: #3A2E22;
  --color-border: #4A3A2A;

  --color-text: #F6ECE0;
  --color-text-muted: #B79E84;
  --color-text-faint: #806A55;
  --color-text-inverse: #1C1610;

  --color-primary: #FF7A33;
  --color-primary-hover: #FF8F4D;
  --color-primary-active: #FF6611;
  --color-primary-soft: #3A2410;
  --color-primary-highlight: #4A2D14;

  --color-success: #6DBE70;
  --color-success-soft: #1E3320;
  --color-error: #E5705E;
  --color-error-soft: #3A1E1A;
  --color-warning: #D99A33;
  --color-warning-soft: #3A2A12;

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
  --shadow-md: 0 6px 18px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 48px oklch(0 0 0 / 0.5);
  --shadow-orange: 0 12px 40px oklch(0.62 0.17 45 / 0.25);
}
@media (prefers-color-scheme: dark){:root:not([data-theme]){}}

/* ---------- Layout primitives ---------- */
.container{width:100%;max-width:var(--content-default);margin-inline:auto;padding-inline:clamp(1rem,5vw,2rem)}
.container--wide{max-width:var(--content-wide)}
.container--narrow{max-width:var(--content-narrow)}
section{padding-block:clamp(3rem,8vw,7rem)}
.section-tight{padding-block:clamp(2rem,5vw,4rem)}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--color-bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--color-border);transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s}
.site-header.hidden{transform:translateY(-100%)}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:68px}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--color-text)}
.brand-logo{height:30px;width:auto;display:block}
[data-theme='dark'] .brand-logo{filter:brightness(1.08)}
.brand-wordmark{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:.04em;color:var(--color-primary)}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{padding:.5rem .85rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none}
.nav-links a:hover{color:var(--color-text);background:var(--color-surface-offset)}
.nav-cta{display:flex;align-items:center;gap:.5rem}
.theme-toggle{width:40px;height:40px;border-radius:var(--radius-full);display:grid;place-items:center;color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:var(--color-text);background:var(--color-surface-offset)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:var(--radius-md);place-items:center;color:var(--color-text);border:1px solid var(--color-border)}
@media(max-width:880px){
  .nav-toggle{display:grid}
  .nav-links{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--color-bg);padding:1rem;gap:.25rem;border-bottom:1px solid var(--color-border);transform:translateY(-120%);transition:transform .35s cubic-bezier(0.16,1,0.3,1);box-shadow:var(--shadow-lg)}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:.85rem 1rem;font-size:var(--text-base)}
  .nav-cta .btn--ghost{display:none}
  .site-header .nav-cta-btn{display:none !important}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:var(--radius-full);font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);text-decoration:none;line-height:1;white-space:nowrap;border:1.5px solid transparent;transition:all var(--transition-interactive)}
.btn--primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-orange)}
.btn--primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 16px 44px oklch(0.62 0.17 45 / .38)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.btn--ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn--lg{padding:1rem 1.8rem;font-size:var(--text-base)}
.btn--block{width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(4rem,10vw,7rem);padding-bottom:clamp(3rem,8vw,6rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;text-align:left}}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-soft);padding:.4rem .9rem;border-radius:var(--radius-full);margin-bottom:1.5rem}
.hero h1{font-size:var(--text-hero);font-weight:800;line-height:.98;margin-bottom:1.5rem}
.hero h1 .accent{color:var(--color-primary);position:relative}
.hero-sub{font-size:var(--text-lg);color:var(--color-text-muted);max-width:48ch;margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
@media(max-width:480px){.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn{width:100%;justify-content:center}}
.hero-trust{display:flex;align-items:center;gap:1.25rem;margin-top:2.5rem;flex-wrap:wrap}
.trust-item{display:flex;flex-direction:column}
.trust-num{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);color:var(--color-primary);line-height:1}
.trust-label{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.25rem}

/* hero visual — animated battery bolt */
.hero-visual{position:relative;display:grid;place-items:center;min-height:340px}
.bolt-stage{position:relative;width:min(420px,80vw);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.bolt-orb{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--color-primary-highlight),var(--color-primary) 55%,var(--color-primary-active) 100%);box-shadow:var(--shadow-orange);animation:pulse 4s ease-in-out infinite}
.bolt-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--color-primary) 40%,transparent);animation:spin 22s linear infinite}
.bolt-ring--2{inset:-6%;border-style:dashed;animation-duration:34s;animation-direction:reverse;opacity:.6}
.bolt-svg{position:relative;z-index:2;width:42%;height:auto;filter:drop-shadow(0 8px 18px oklch(0.5 .15 45 / .4));animation:floaty 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--color-primary);opacity:.7;animation:sparkle 3s ease-in-out infinite}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

/* ---------- Section heading ---------- */
.section-head{text-align:center;max-width:60ch;margin:0 auto clamp(2.5rem,5vw,4rem)}
.section-head.left{text-align:left;margin-inline:0}
.eyebrow.center{margin-inline:auto}
.section-head h2{font-size:var(--text-2xl);font-weight:800;margin-bottom:1rem}
.section-head p{color:var(--color-text-muted);font-size:var(--text-lg)}

/* ---------- Product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1rem,3vw,1.75rem)}
.product-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive);text-decoration:none;color:inherit}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--color-primary-highlight)}
.product-media{aspect-ratio:4/3;background:linear-gradient(135deg,var(--color-surface-offset),var(--color-surface-offset-2));display:grid;place-items:center;position:relative;overflow:hidden}
.product-media .glyph{font-size:3.5rem;filter:grayscale(.1)}
.product-body{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.product-tag{font-family:var(--font-display);font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary)}
.product-card h3{font-size:var(--text-lg);font-weight:700}
.product-desc{color:var(--color-text-muted);font-size:var(--text-sm);flex:1}
.product-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
.price{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);color:var(--color-text)}
.price small{font-size:var(--text-xs);color:var(--color-text-faint);font-weight:500}

/* image-based product media (real hero images) */
.product-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.product-card:hover .product-media img{transform:scale(1.04)}
.product-media .glyph{display:none}
.watt-badge{position:absolute;top:.85rem;left:.85rem;z-index:2;background:rgba(255,255,255,.92);color:var(--color-primary-active);font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);padding:.3rem .65rem;border-radius:999px;box-shadow:var(--shadow-sm);backdrop-filter:blur(4px);letter-spacing:.02em}
.flagship-flag{position:absolute;top:.85rem;right:.85rem;z-index:2;background:var(--color-primary);color:#fff;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);padding:.3rem .7rem;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.price--tba{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-text-muted);letter-spacing:.04em}
.product-card--flagship{grid-column:span 2;border-color:var(--color-primary-highlight);box-shadow:0 12px 40px -18px var(--color-primary)}
.product-card--flagship .product-media{aspect-ratio:16/9}
@media(max-width:720px){.product-card--flagship{grid-column:span 1}}
.product-card--flagship h3{font-size:var(--text-xl)}

/* colour swatches (30W product page) */
.swatches{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem}
.swatch{position:relative;width:38px;height:38px;border-radius:50%;border:2px solid var(--color-border);cursor:pointer;transition:transform .2s,border-color .2s;padding:0;background:var(--color-surface-2)}
.swatch:hover{transform:scale(1.1)}
.swatch.is-active{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.swatch span{display:block;width:100%;height:100%;border-radius:50%}
.swatch-label{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-text);align-self:center;margin-left:.25rem}

/* hero product showcase — "energy field" stage: the orb, expanding sonar waves,
   rotating rings and orbiting sparks form a radiating energy field; the flagship
   30W charger floats forward in the lower portion so the field shows clearly above it.
   --energy is updated by JS to tint the field to the active product colour. */
.hero-stage{position:relative;z-index:2;width:min(460px,86vw);aspect-ratio:1;display:block}

/* energy field layer (everything centered, behind the product; clipped so rotating
   orbits/sparks can never push the page width) */
.hs-field{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:50%}
.hs-field>*{position:absolute;inset:0;margin:auto}

/* energy core orb — pulses, tinted by the active product colour */
.hs-orb{
  width:60%;height:60%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,
    color-mix(in oklab,var(--energy,#F2F0EC) 38%,var(--color-primary-highlight)),
    var(--color-primary) 56%,var(--color-primary-active));
  box-shadow:0 0 60px 8px color-mix(in oklab,var(--energy,#F2F0EC) 30%,var(--color-primary) 70%);
  filter:blur(1.5px);
  animation:pulse 4s ease-in-out infinite;
  transition:background .7s ease,box-shadow .7s ease;
}

/* sonar waves — expand outward and fade (staggered) */
.hs-wave{
  width:60%;height:60%;border-radius:50%;border:2px solid var(--color-primary);
  opacity:0;transform:scale(.55);
  animation:hs-wave 4.2s ease-out infinite;
}
.hs-wave--2{animation-delay:1.4s}
.hs-wave--3{animation-delay:2.8s}
@keyframes hs-wave{
  0%{transform:scale(.5);opacity:.5}
  60%{opacity:.16}
  100%{transform:scale(1.75);opacity:0}
}

/* rotating structural rings */
.hs-ring{width:80%;height:80%;border-radius:50%;border:1.5px solid color-mix(in oklab,var(--color-primary) 40%,transparent);animation:spin 22s linear infinite}
.hs-ring--2{width:95%;height:95%;border-style:dashed;opacity:.5;animation:spin 34s linear infinite reverse}

/* orbiting energy sparks on tilted circular paths */
.hs-orbit{width:72%;height:72%;border-radius:50%;animation:spin 9s linear infinite}
.hs-orbit--2{width:88%;height:88%;animation:spin 14s linear infinite reverse}
.hs-spark{
  top:-5px;left:50%;margin-left:-5px;width:10px;height:10px;border-radius:50%;
  background:var(--color-primary);
  box-shadow:0 0 12px 3px color-mix(in oklab,var(--energy,#F2F0EC) 25%,var(--color-primary) 75%);
  animation:sparkle 3s ease-in-out infinite;
}

/* flagship product — floats forward, positioned lower so the field is visible above */
.hero-stage .hp-img{
  position:absolute;left:50%;bottom:4%;width:72%;transform:translateX(-50%) translateY(10px) scale(.97);
  object-fit:contain;opacity:0;
  transition:opacity .45s ease,transform .45s ease;
  filter:drop-shadow(0 26px 30px oklch(0.4 .14 45 / .34));
  z-index:2;
}
.hero-stage .hp-img.is-on{opacity:1;animation:hs-float 6s ease-in-out infinite}
@keyframes hs-float{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-1.5deg)}
  50%{transform:translateX(-50%) translateY(-16px) rotate(1.5deg)}
}

/* colour label */
.hp-colorname{position:absolute;bottom:-.6rem;left:50%;transform:translateX(-50%);z-index:4;background:rgba(255,255,255,.94);color:var(--color-primary-active);font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;padding:.35rem .9rem;border-radius:999px;box-shadow:var(--shadow-sm);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .hero-stage .hp-img{transition:none;animation:none}
  .hs-orb,.hs-wave,.hs-ring,.hs-orbit,.hs-spark{animation:none}
  .hs-wave{opacity:.18;transform:scale(1.1)}
}

/* spec chips / feature pills */
.feature-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem}
.pill{font-size:var(--text-xs);font-weight:600;padding:.35rem .8rem;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary-active);border:1px solid var(--color-primary-highlight)}
.specs-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:1rem;font-style:italic}

/* ---------- Feature / value props ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.feature{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.75rem;transition:transform var(--transition-interactive),border-color var(--transition-interactive)}
.feature:hover{transform:translateY(-4px);border-color:var(--color-primary-highlight)}
.feature-ico{width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);display:grid;place-items:center;margin-bottom:1rem}
.feature h3{font-size:var(--text-lg);margin-bottom:.4rem}
.feature p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ---------- Warranty CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:clamp(2.5rem,6vw,4.5rem);background:linear-gradient(135deg,var(--color-primary-active),var(--color-primary));color:#fff;text-align:center;box-shadow:var(--shadow-orange)}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.18),transparent 50%);pointer-events:none}
.cta-band h2{color:#fff;font-size:var(--text-2xl);margin-bottom:.75rem;position:relative}
.cta-band p{color:rgba(255,255,255,.92);max-width:54ch;margin:0 auto 1.75rem;position:relative;font-size:var(--text-lg)}
.cta-band .btn{position:relative}
.cta-band .btn--ghost{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.25);border-color:#fff}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;counter-reset:step}
.step{position:relative;padding:1.75rem;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:1.75rem;width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm)}
.step h3{font-size:var(--text-base);font-weight:700;margin-bottom:.4rem;padding-top:.5rem}
.step p{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ---------- Forms ---------- */
.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow-md)}
.field{margin-bottom:1.25rem}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);margin-bottom:.5rem}
.field .hint{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.4rem}
.field .req{color:var(--color-primary)}
.input,.select,.textarea{width:100%;padding:.85rem 1rem;border-radius:var(--radius-md);border:1.5px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:var(--text-base);transition:border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-soft)}
.textarea{min-height:120px;resize:vertical}
.input[readonly]{background:var(--color-surface-offset);color:var(--color-text-muted)}
select.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E5B4B' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

/* ---------- Alerts / result ---------- */
.alert{padding:1rem 1.25rem;border-radius:var(--radius-md);font-size:var(--text-sm);display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem}
.alert--error{background:var(--color-error-soft);color:var(--color-error);border:1px solid color-mix(in oklab,var(--color-error) 30%,transparent)}
.alert--success{background:var(--color-success-soft);color:var(--color-success);border:1px solid color-mix(in oklab,var(--color-success) 30%,transparent)}
.alert--info{background:var(--color-primary-soft);color:var(--color-primary-active);border:1px solid var(--color-primary-highlight)}
.result-card{text-align:center;padding:clamp(1.5rem,4vw,2.5rem)}
.result-ico{width:64px;height:64px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center}
.result-ico.ok{background:var(--color-success-soft);color:var(--color-success)}
.result-ico.warn{background:var(--color-warning-soft);color:var(--color-warning)}
.result-ico.bad{background:var(--color-error-soft);color:var(--color-error)}
.result-ico svg{width:32px;height:32px}
.status-pill{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);padding:.4rem 1rem;border-radius:var(--radius-full)}
.status-active{background:var(--color-success-soft);color:var(--color-success)}
.status-expired{background:var(--color-error-soft);color:var(--color-error)}
.status-unregistered{background:var(--color-warning-soft);color:var(--color-warning)}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding-block:clamp(2.5rem,5vw,4rem)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;margin-bottom:1rem;color:var(--color-text)}
.footer-col a{display:block;color:var(--color-text-muted);font-size:var(--text-sm);text-decoration:none;padding:.25rem 0}
.footer-col a:hover{color:var(--color-primary)}
.footer-brand p{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:.75rem;max-width:34ch}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--color-text-faint);font-size:var(--text-xs)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- Marquee trust strip ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--color-border);background:var(--color-surface);padding:1rem 0;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;animation:marquee 28s linear infinite;width:max-content}
.marquee span{font-family:var(--font-display);font-weight:600;color:var(--color-text-muted);font-size:var(--text-sm);letter-spacing:.05em;display:inline-flex;align-items:center;gap:.5rem}
.marquee span::before{content:"⚡";color:var(--color-primary)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Misc ---------- */
.lead{font-size:var(--text-lg);color:var(--color-text-muted)}
.bangla-toggle{display:inline-flex;background:var(--color-surface-offset);border-radius:var(--radius-full);padding:3px;gap:2px}
.bangla-toggle button{padding:.4rem .9rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted)}
.bangla-toggle button.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}
.divider{height:1px;background:var(--color-border);margin-block:1.5rem}
.kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.kv{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem 1.25rem}
.kv-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-display)}
.kv-val{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);margin-top:.25rem}
.prose{max-width:68ch}
.prose h2{font-size:var(--text-xl);margin:2rem 0 .75rem}
.prose h3{font-size:var(--text-lg);margin:1.5rem 0 .5rem}
.prose p,.prose li{color:var(--color-text-muted);margin-bottom:.75rem;line-height:1.7}
.prose ul{padding-left:1.25rem}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,3rem);align-items:start}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}