/* ============================================================
   FLUENTLY.IO  —  Design system
   Evolved from the Talkie reference boards.
   Coral · Warm white · Soft sage · Dark charcoal · Muted gray
   ============================================================ */

/* ----- Tokens ------------------------------------------------ */
:root{
  --coral:        #DD571C;
  --coral-deep:   #BE4712;
  --coral-soft:   #F5D8C2;
  --coral-tint:   #FBEDDE;

  --cream:        #F6F4ED;   /* page background — warm off-white */
  --cream-raise:  #FBFAF5;
  --paper:        #FFFFFF;

  --sage:         #E7EFE2;   /* phone screen / soft panels */
  --sage-deep:    #DBE6D2;
  --sage-tint:    #EFF4EB;

  --ink:          #23271F;   /* near-black headings */
  --charcoal:     #3C413A;   /* dark olive buttons */
  --charcoal-2:   #2E322B;   /* phone frame */
  --muted:        #888D81;   /* muted gray body */
  --muted-soft:   #A7AC9F;

  --lime:         #D9EC58;   /* sparing accent (tags) */
  --butter:       #F4D24E;   /* sparing accent */

  --line:         rgba(35,39,31,.10);
  --line-soft:    rgba(35,39,31,.06);

  --r-xs: 12px;
  --r-sm: 16px;
  --r:    22px;
  --r-lg: 30px;
  --r-xl: 42px;
  --pill: 999px;

  --sh-xs: 0 1px 3px rgba(35,39,31,.05);
  --sh-sm: 0 4px 14px -6px rgba(35,39,31,.12);
  --sh:    0 22px 48px -24px rgba(35,39,31,.22);
  --sh-lg: 0 50px 100px -40px rgba(35,39,31,.30);
  --sh-coral: 0 18px 40px -16px rgba(221, 87, 28,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.16,1,.3,1); /* buttery ease-out for entrances */

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
}

/* ----- Reset ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:"Nunito", system-ui, -apple-system, sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:18px;
  line-height:1.6;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }
::selection{ background:var(--coral); color:#fff; }

/* ----- Signature background grid ----------------------------- */
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Crect x='1' y='1' width='44' height='44' rx='13' fill='none' stroke='%23e3e0d4' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size:46px 46px;
}
.bg-grid::after{   /* warm vignette so the grid fades at edges */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--cream) 100%);
}

/* ----- Typography -------------------------------------------- */
h1,h2,h3,h4{ font-weight:800; line-height:1.04; letter-spacing:-.02em; color:var(--ink); }
.display{
  font-weight:900;
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  line-height:.98;
  letter-spacing:-.035em;
}
.h-sec{ font-weight:800; font-size:clamp(2rem, 4.6vw, 3.5rem); letter-spacing:-.03em; }
.h-card{ font-weight:800; font-size:1.35rem; letter-spacing:-.02em; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--muted); font-weight:600; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral);
}
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--coral); }
.muted{ color:var(--muted); }
.coral-text{ color:var(--coral); }

/* ----- Layout ------------------------------------------------ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap-wide{ max-width:1360px; }
section{ position:relative; }
section[id]{ scroll-margin-top:84px; }
.section{ padding-block:clamp(72px,11vw,150px); }
.section-tight{ padding-block:clamp(48px,7vw,90px); }
.center{ text-align:center; }
.stack-sm>*+*{ margin-top:.6rem; }
.stack>*+*{ margin-top:1.1rem; }
.stack-lg>*+*{ margin-top:1.8rem; }
.sec-head{ max-width:680px; }
.sec-head.center{ margin-inline:auto; }

/* ----- Buttons ----------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:800; font-size:1rem; letter-spacing:-.01em;
  padding:.95em 1.7em; border-radius:var(--pill);
  transition:transform .25s var(--ease-back), box-shadow .3s var(--ease), background .25s;
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-coral{ background:var(--coral); color:#fff; box-shadow:var(--sh-coral); }
.btn-coral:hover{ background:var(--coral-deep); transform:translateY(-2px); }
.btn-dark{ background:var(--charcoal); color:#fff; box-shadow:var(--sh-sm); }
.btn-dark:hover{ background:var(--ink); transform:translateY(-2px); }
.btn-ghost{ background:var(--cream-raise); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--coral); }
.btn-lg{ padding:1.1em 2.1em; font-size:1.08rem; }
.btn-block{ width:100%; }

/* ----- Pills / tags / chips ---------------------------------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.35em .85em; border-radius:var(--pill);
  font-size:.82rem; font-weight:800; letter-spacing:-.01em;
  background:var(--sage-deep); color:var(--charcoal);
}
.tag-coral{ background:var(--coral); color:#fff; }
.tag-lime{ background:var(--lime); color:#3a4012; }
.tag-cream{ background:var(--cream-raise); color:var(--muted); box-shadow:inset 0 0 0 1.2px var(--line); }
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.55em 1.05em; border-radius:var(--pill);
  font-size:.95rem; font-weight:700;
  background:var(--paper); color:var(--ink);
  box-shadow:inset 0 0 0 1.4px var(--line);
  transition:.2s var(--ease);
}
.chip[data-on="1"], .chip:hover{ background:var(--coral); color:#fff; box-shadow:none; }

/* ----- Navigation -------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:60;
  padding-block:14px;
  backdrop-filter:saturate(140%) blur(12px);
  background:color-mix(in srgb, var(--cream) 78%, transparent);
  transition:box-shadow .3s, background .3s;
}
.nav.is-stuck{ box-shadow:0 1px 0 var(--line), var(--sh-sm); }
.nav__in{ display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:.34em; font-weight:900; font-size:1.22rem; letter-spacing:-.03em; }
.brand b{ margin-left:-.14em; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand b{ color:var(--coral); }
.nav__links{ display:flex; align-items:center; gap:6px; margin-left:8px; }
.nav__links a{
  padding:.5em .95em; border-radius:var(--pill); font-weight:700; font-size:.98rem; color:var(--charcoal);
  transition:.2s var(--ease);
}
.nav__links a:hover{ background:var(--sage); }
.nav__links a.active{ background:var(--ink); color:#fff; }
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.nav__toggle{ display:none; width:44px; height:44px; border-radius:14px; background:var(--cream-raise);
  box-shadow:inset 0 0 0 1.4px var(--line); place-items:center; }
.nav__toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; }
.nav__toggle span::before,.nav__toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; }
.nav__toggle span::before{ top:-6px; } .nav__toggle span::after{ top:6px; }

@media(max-width:880px){
  .nav__links{
    position:fixed; inset:64px 12px auto 12px; flex-direction:column; align-items:stretch; gap:4px;
    background:var(--cream-raise); padding:14px; border-radius:var(--r-lg);
    box-shadow:var(--sh-lg); border:1px solid var(--line);
    transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:.25s var(--ease);
  }
  .nav__links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:.8em 1em; font-size:1.05rem; }
  .nav__toggle{ display:grid; }
  .nav .btn{ display:none; }
}

/* ----- Decorative floating blobs ----------------------------- */
.floaty{ position:absolute; pointer-events:none; z-index:0; opacity:.9; }
.blob-dot{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }

/* ----- The Fluent mascot (SVG) ------------------------------- */
.fluent{ width:100%; height:auto; overflow:visible; }
.fluent .eye{ transform-box:fill-box; transform-origin:center; transition:transform .09s ease; }
.fluent.blink .eye{ transform:scaleY(.12); }
.fluent .body{ transform-box:fill-box; transform-origin:50% 100%; }
@keyframes breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.025,.98) } }
@keyframes bobbing{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes bobbing-sm{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@keyframes squish{ 0%,100%{ transform:scale(1,1) } 30%{ transform:scale(1.06,.92) } 60%{ transform:scale(.96,1.05) } }
.anim-breathe .body{ animation:breathe 4.5s var(--ease) infinite; }
.float-bob{ animation:bobbing 6s var(--ease) infinite; }
.float-bob-sm{ animation:bobbing-sm 5s var(--ease) infinite; }

/* ----- Generic card ------------------------------------------ */
.card{
  background:var(--paper); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm); padding:clamp(20px,3vw,32px);
  border:1px solid var(--line-soft);
}
.card-sage{ background:var(--sage); border-color:transparent; }
.card-cream{ background:var(--cream-raise); }
.card-coral{ background:var(--coral); color:#fff; border-color:transparent; }
.card-ink{ background:var(--ink); color:#fff; border-color:transparent; }
.card-flush{ padding:0; overflow:hidden; }

/* ----- Phone mockup ------------------------------------------ */
.phone{
  --pw:300px;
  width:var(--pw); aspect-ratio:300/620; flex:none;
  background:var(--charcoal-2); border-radius:46px;
  padding:11px; box-shadow:var(--sh-lg), inset 0 0 0 2px rgba(255,255,255,.04);
  position:relative;
}
.phone::before{ /* side button */
  content:""; position:absolute; left:-3px; top:140px; width:3px; height:54px; border-radius:3px; background:var(--charcoal-2);
}
.phone__screen{
  width:100%; height:100%; background:var(--sage); border-radius:36px; overflow:hidden;
  position:relative; display:flex; flex-direction:column;
}
.phone__notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:42%; height:24px; background:#15170f; border-radius:0 0 16px 16px; z-index:5;
}
.scr{ flex:1; display:flex; flex-direction:column; padding:34px 16px 14px; gap:12px; overflow:hidden; }
.scr-status{ position:absolute; top:13px; left:18px; right:18px; display:flex; justify-content:space-between;
  font-size:11px; font-weight:800; color:var(--ink); z-index:6; }
.scr-status .dots{ display:flex; gap:4px; align-items:center; }
.scr-status .dots i{ width:13px; height:9px; background:var(--ink); border-radius:2px; display:inline-block; opacity:.85; }

/* mini app UI atoms reused inside phones */
.appbar{ display:flex; align-items:center; justify-content:space-between; }
.appbar .flag{ width:22px; height:16px; border-radius:4px; background:linear-gradient(120deg,#3a4d8f 50%,#c33 50%); box-shadow:var(--sh-xs); }
.appbar .stat{ display:flex; gap:10px; font-weight:800; font-size:12px; align-items:center; }
.appbar .stat span{ display:inline-flex; align-items:center; gap:3px; }
.mini-card{ background:#fff; border-radius:18px; padding:12px 13px; box-shadow:var(--sh-xs); }
.mini-row{ display:flex; align-items:center; gap:10px; }
.mini-ava{ width:34px; height:34px; border-radius:11px; background:var(--coral); flex:none; display:grid; place-items:center; }
.mini-ava svg{ width:24px; }
.bubble{ padding:9px 13px; border-radius:16px; font-size:12.5px; font-weight:600; line-height:1.35; max-width:80%; }
.bubble.them{ background:#fff; border-bottom-left-radius:5px; box-shadow:var(--sh-xs); color:var(--ink); }
.bubble.me{ background:var(--charcoal); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.wave{ display:flex; align-items:center; gap:3px; height:26px; }
.wave i{ width:3px; border-radius:3px; background:var(--coral); animation:wv 1.1s ease-in-out infinite; }
@keyframes wv{ 0%,100%{ height:7px } 50%{ height:24px } }
.mic{ width:58px; height:58px; border-radius:50%; background:var(--coral); display:grid; place-items:center; margin-inline:auto;
  box-shadow:var(--sh-coral); }
.mic svg{ width:24px; color:#fff; }
.prog{ height:8px; border-radius:8px; background:var(--sage-deep); overflow:hidden; }
.prog i{ display:block; height:100%; background:var(--coral); border-radius:8px; }
.scr-cta{ margin-top:auto; background:var(--charcoal); color:#fff; text-align:center; padding:12px; border-radius:16px; font-weight:800; font-size:13px; }
.tabbar{ display:flex; justify-content:space-between; padding:10px 14px 4px; }
.tabbar i{ width:20px; height:20px; border-radius:7px; background:var(--sage-deep); display:block; }
.tabbar i.on{ background:var(--coral); }

/* ----- Chapter / section system ------------------------------ */
.chapter{ padding-block:clamp(64px,9vw,120px); position:relative; }
.chapter.tint{ background:var(--sage-tint); }
.chap-tag{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.chap-tag .no{ font-weight:900; font-size:1rem; letter-spacing:.04em; color:var(--coral); font-variant-numeric:tabular-nums; }
.chap-tag .ln{ flex:1; height:1.5px; background:var(--line); max-width:120px; }
.chap-tag .lab{ font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; color:var(--muted); }

/* side dot-nav (presentation style) */
.dotnav{ position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:16px; }
.dotnav a{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.dotnav a .t{ font-size:.78rem; font-weight:800; color:var(--charcoal); opacity:0; transform:translateX(6px); transition:.25s var(--ease); background:var(--cream-raise); padding:3px 9px; border-radius:var(--pill); box-shadow:var(--sh-xs); }
.dotnav a .d{ width:11px; height:11px; border-radius:50%; background:var(--muted-soft); box-shadow:0 0 0 0 var(--coral); transition:.25s var(--ease); flex:none; }
.dotnav a:hover .t{ opacity:1; transform:none; }
.dotnav a.active .d{ background:var(--coral); transform:scale(1.25); }
.dotnav a.active .t{ opacity:1; transform:none; color:var(--coral); }
@media(max-width:1100px){ .dotnav{ display:none; } }

/* ----- Hero stage -------------------------------------------- */
.hero-stage{
  position:relative; height:clamp(440px,52vw,600px);
  display:flex; align-items:center; justify-content:center;
}
.hero-phone{ position:absolute; --pw:clamp(218px,24vw,290px); }
.hero-phone.hp1{ transform:rotate(-6deg); left:50%; margin-left:clamp(-300px,-26vw,-220px); z-index:2; }
.hero-phone.hp2{ transform:rotate(6deg); left:50%; margin-left:clamp(20px,4vw,60px); z-index:3; }
.hero-mascot{
  position:absolute; width:clamp(120px,15vw,190px); z-index:4;
  left:50%; transform:translateX(-50%); bottom:-2%;
  filter:drop-shadow(0 24px 34px rgba(35,39,31,.22));
}
@media(max-width:820px){
  .hero-stage{ height:auto; flex-direction:column; gap:20px; padding-block:10px; }
  .hero-phone{ position:relative; left:auto!important; right:auto!important; margin:0!important; --pw:clamp(230px,62vw,270px); }
  .hero-phone.hp1{ transform:rotate(-3deg); z-index:2; } .hero-phone.hp2{ transform:rotate(3deg); margin-top:-30px!important; }
  .hero-mascot{ position:relative; bottom:auto; transform:none; left:auto; margin-top:-10px; }
  .hero-stage .blob-dot{ display:none; }
}

/* ----- Feature split rows ------------------------------------ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:center; }
.split.rev .split__media{ order:2; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } .split.rev .split__media{ order:0; } }
.feature-ico{
  width:54px; height:54px; border-radius:18px; display:grid; place-items:center;
  background:var(--coral-tint); color:var(--coral); margin-bottom:18px;
}
.feature-ico svg{ width:28px; }

/* ----- Feature card grid ------------------------------------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media(max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }
.fcard{ display:flex; flex-direction:column; gap:12px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.fcard:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.fcard .feature-ico{ margin-bottom:4px; }
.fcard p{ color:var(--muted); font-size:.98rem; }

/* ----- Stat / progress / streak / achievement ---------------- */
.stat-num{ font-weight:900; font-size:clamp(2.4rem,5vw,3.4rem); letter-spacing:-.04em; line-height:1; color:var(--ink); }
.stat-lab{ color:var(--muted); font-weight:700; font-size:.95rem; }
.ach{ display:flex; align-items:center; gap:14px; }
.ach__badge{ width:50px; height:50px; border-radius:16px; flex:none; display:grid; place-items:center; font-size:24px;
  background:var(--lime); box-shadow:var(--sh-xs); }
.streak{ display:flex; gap:7px; }
.streak i{ flex:1; aspect-ratio:1; border-radius:10px; background:var(--sage-deep); display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--muted-soft); }
.streak i.on{ background:var(--coral); color:#fff; }

/* ----- Testimonials ------------------------------------------ */
.quote{ font-size:clamp(1.05rem,1.5vw,1.18rem); font-weight:700; color:var(--ink); line-height:1.5; }
.who{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.who .av{ width:42px; height:42px; border-radius:50%; flex:none; background:var(--sage-deep); display:grid; place-items:center; font-weight:900; color:var(--charcoal); }
.who b{ display:block; font-weight:800; font-size:.98rem; }
.who span{ color:var(--muted); font-size:.85rem; font-weight:600; }

/* ----- Marquee ----------------------------------------------- */
.marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:46px; width:max-content; animation:slide 28s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%) } }
.marquee__track b{ font-size:1.4rem; font-weight:800; color:var(--muted-soft); display:inline-flex; align-items:center; gap:46px; letter-spacing:-.02em; }
.marquee__track b::after{ content:"✳"; color:var(--coral); }

/* ----- FAQ --------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 4px; text-align:left; font-weight:800; font-size:1.12rem; letter-spacing:-.01em; }
.faq__q .pm{ width:30px; height:30px; flex:none; border-radius:50%; background:var(--sage); display:grid; place-items:center; transition:.3s var(--ease); }
.faq__q .pm::before,.faq__q .pm::after{ content:""; position:absolute; width:13px; height:2.4px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.faq__q .pm::after{ transform:rotate(90deg); }
.faq__item.open .pm{ background:var(--coral); }
.faq__item.open .pm::before,.faq__item.open .pm::after{ background:#fff; }
.faq__item.open .pm::after{ transform:rotate(0); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq__a p{ padding:0 4px 26px; color:var(--muted); max-width:62ch; }

/* ----- Pricing ----------------------------------------------- */
.price{ display:flex; flex-direction:column; gap:18px; position:relative; }
.price.feat{ background:var(--ink); color:#fff; transform:translateY(-10px); }
.price.feat .muted{ color:#b9beb1; }
.price__amt{ font-weight:900; font-size:3rem; letter-spacing:-.04em; line-height:1; }
.price__amt span{ font-size:1rem; font-weight:700; color:var(--muted); }
.price ul{ display:flex; flex-direction:column; gap:11px; }
.price li{ display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:.97rem; }
.price li svg{ width:19px; flex:none; color:var(--coral); margin-top:2px; }
.price.feat li svg{ color:var(--lime); }
@media(max-width:860px){ .price.feat{ transform:none; } }

/* ----- CTA band ---------------------------------------------- */
.cta-band{ background:var(--ink); color:#fff; border-radius:var(--r-xl); overflow:hidden; position:relative; }
.cta-band .display{ color:#fff; }

/* ----- Footer ------------------------------------------------ */
.footer{ padding-block:64px 40px; }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer h5{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:14px; font-weight:800; }
.footer a{ display:block; color:var(--charcoal); font-weight:600; padding:5px 0; transition:.2s; }
.footer a:hover{ color:var(--coral); }
.footer__bar{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:.88rem; font-weight:600; }
@media(max-width:760px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media(max-width:460px){ .footer__top{ grid-template-columns:1fr; } }

/* ----- Reveal animations ------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px) scale(.99); transition:opacity .85s var(--ease-smooth), transform .85s var(--ease-smooth); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s } .reveal[data-d="2"]{ transition-delay:.2s }
.reveal[data-d="3"]{ transition-delay:.3s } .reveal[data-d="4"]{ transition-delay:.4s }
.reveal[data-d="5"]{ transition-delay:.5s } .reveal[data-d="6"]{ transition-delay:.6s }
@media(prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ----- Utilities --------------------------------------------- */
.flex{ display:flex; } .ac{ align-items:center; } .jc{ justify-content:center; } .jb{ justify-content:space-between; }
.wrap-flex{ flex-wrap:wrap; }
.gap-s{ gap:10px } .gap{ gap:18px } .gap-l{ gap:30px }
.mt-s{ margin-top:14px } .mt{ margin-top:28px } .mt-l{ margin-top:44px }
.rel{ position:relative; z-index:1; }
.hide-m{ } @media(max-width:680px){ .hide-m{ display:none!important; } }
.maxw-sm{ max-width:540px; } .maxw-md{ max-width:720px; }