/* =========================================================
   SwadSathi — marketing site stylesheet  (v2, bolder)
   One file, no framework. Dark hero, warm light body.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand */
  --spice:      #e8502a;
  --spice-2:    #ff7a3d;
  --spice-dark: #b8391b;
  --spice-soft: #fdece7;
  --turmeric:   #f2a93b;
  --leaf:       #0f8f63;
  --leaf-soft:  #e4f5ee;
  --plum:       #6c3bd9;
  --plum-soft:  #efeaff;

  /* dark surfaces */
  --night:      #100c14;
  --night-2:    #1a1420;
  --night-line: rgba(255,255,255,.10);

  /* light neutrals */
  --ink:        #14161c;
  --ink-2:      #454b58;
  --ink-3:      #6f7684;
  --line:       #e9e4dc;
  --line-2:     #f3efe8;
  --cream:      #fdfaf6;
  --cream-2:    #f8f3ec;
  --surface:    #ffffff;

  --shadow-sm:  0 1px 2px rgba(20,22,28,.05), 0 2px 6px rgba(20,22,28,.05);
  --shadow-md:  0 6px 16px rgba(20,22,28,.07), 0 18px 40px -18px rgba(20,22,28,.18);
  --shadow-lg:  0 16px 40px rgba(20,22,28,.10), 0 50px 90px -40px rgba(20,22,28,.35);
  --glow:       0 0 0 1px rgba(232,80,42,.18), 0 20px 60px -20px rgba(232,80,42,.45);

  --radius:     16px;
  --radius-lg:  26px;
  --pad:        clamp(18px, 4vw, 44px);
  --maxw:       1200px;
  --ease:       cubic-bezier(.22,1,.36,1);

  --font: 'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
          Roboto,'Noto Sans Gujarati','Noto Sans Devanagari',Helvetica,Arial,sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100% }
body{
  font-family:var(--font);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
/* email addresses and URLs are single unbreakable tokens — let them wrap */
a[href^="mailto:"],a[href^="http"]{ overflow-wrap:anywhere }
ul,ol{ list-style:none }
button,input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--spice); color:#fff }

h1,h2,h3,h4{ line-height:1.08; letter-spacing:-.03em; font-weight:800 }
h1{ font-size:clamp(36px, 6.4vw, 68px); letter-spacing:-.042em }
h2{ font-size:clamp(28px, 4.4vw, 46px); letter-spacing:-.036em }
h3{ font-size:clamp(18px, 2.1vw, 22px); font-weight:700; letter-spacing:-.02em }
p{ color:var(--ink-2) }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.section{ padding:clamp(60px, 9vw, 112px) 0 }
.section--tight{ padding:clamp(40px, 6vw, 72px) 0 }
.section--alt{ background:var(--surface); border-block:1px solid var(--line-2) }

/* dark band */
.section--dark{
  position:relative; overflow:hidden;
  background:var(--night); color:#fff;
}
.section--dark::before{
  content:''; position:absolute; inset:-40% -10% auto -10%; height:130%;
  background:
    radial-gradient(42% 44% at 14% 8%, rgba(232,80,42,.34), transparent 66%),
    radial-gradient(38% 40% at 88% 4%, rgba(108,59,217,.30), transparent 66%),
    radial-gradient(34% 36% at 60% 92%, rgba(242,169,59,.20), transparent 68%);
  pointer-events:none;
}
.section--dark > *{ position:relative }
.section--dark h2,.section--dark h3{ color:#fff }
.section--dark p{ color:rgba(255,255,255,.66) }

.center{ text-align:center }
.lede{ font-size:clamp(16px, 1.7vw, 19px); color:var(--ink-3); max-width:60ch; line-height:1.62 }
.section--dark .lede{ color:rgba(255,255,255,.68) }
.center .lede{ margin-inline:auto }

.grid{ display:grid; gap:clamp(14px, 2.2vw, 24px) }
.grid-2{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) }
.grid-3{ grid-template-columns:repeat(auto-fit, minmax(262px, 1fr)) }
.grid-4{ grid-template-columns:repeat(auto-fit, minmax(206px, 1fr)) }

/* ---------- 4. Eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--spice);
  background:var(--spice-soft);
  border:1px solid #f8ded5;
  padding:7px 14px; border-radius:99px;
  margin-bottom:20px;
}
.eyebrow--leaf{ color:var(--leaf); background:var(--leaf-soft); border-color:#c9ebdd }
.eyebrow--plum{ color:var(--plum); background:var(--plum-soft); border-color:#ddd2fb }
.section--dark .eyebrow{
  color:#ffb99f; background:rgba(232,80,42,.16); border-color:rgba(232,80,42,.34);
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border-radius:12px; border:1px solid transparent;
  font-size:15px; font-weight:700; white-space:nowrap; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease), color .25s;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--primary{
  background:linear-gradient(135deg,var(--spice-2),var(--spice));
  color:#fff; box-shadow:0 8px 22px -8px rgba(232,80,42,.7);
}
.btn--primary:hover{ box-shadow:0 14px 30px -10px rgba(232,80,42,.75) }
.btn--ghost{ background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:var(--shadow-sm) }
.btn--ghost:hover{ border-color:var(--ink-3) }
.btn--lg{ padding:17px 34px; font-size:16.5px; border-radius:13px }
.btn--block{ width:100% }
.section--dark .btn--ghost,.hero .btn--ghost{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); color:#fff; box-shadow:none;
}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{
  background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.45);
}

/* ---------- 6. Header ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(16,12,20,.72);
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s;
}
.hdr.is-stuck{ background:rgba(16,12,20,.92); border-bottom-color:var(--night-line) }
.hdr__in{ display:flex; align-items:center; gap:18px; height:70px }

.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19.5px;
  letter-spacing:-.03em; color:#fff }
.brand__logo{ width:36px; height:36px; flex:none }
.brand small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.45); margin-top:-2px }

.nav{ margin-left:auto; display:flex; align-items:center; gap:2px }
.nav a{
  padding:9px 15px; border-radius:10px;
  font-size:14.5px; font-weight:600; color:rgba(255,255,255,.7);
  transition:background .2s, color .2s;
}
.nav a:hover{ background:rgba(255,255,255,.09); color:#fff }
.nav a[aria-current="page"]{ color:#fff }
.nav a[aria-current="page"]::after{
  content:''; display:block; height:2px; margin-top:5px; border-radius:2px;
  background:linear-gradient(90deg,var(--spice-2),var(--turmeric));
}
.nav .btn{ margin-left:10px; padding:11px 20px; font-size:14px }
.nav .btn:hover{ transform:none }
.hdr__cta{ display:none }

.burger{
  display:none; margin-left:auto;
  width:44px; height:44px; border-radius:11px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  align-items:center; justify-content:center; cursor:pointer;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; position:relative }
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:18px; height:2px; background:#fff;
}
.burger span::before{ top:-6px } .burger span::after{ top:6px }

@media (max-width:960px){
  .nav{ display:none }
  .burger{ display:flex }
  .nav.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:70px; left:0; right:0;
    background:var(--night); border-bottom:1px solid var(--night-line);
    padding:14px var(--pad) 22px;
  }
  .nav.is-open a{ padding:13px 14px; font-size:16px }
  .nav.is-open .btn{ margin:10px 0 0 }
}

/* ---------- 7. Hero (dark) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--night); color:#fff;
  padding:clamp(48px, 7vw, 92px) 0 clamp(70px, 9vw, 130px);
  margin-top:-1px;
}
.hero::before{
  content:''; position:absolute; inset:-30% -15% auto -15%; height:150%;
  background:
    radial-gradient(40% 40% at 12% 6%, rgba(232,80,42,.42), transparent 64%),
    radial-gradient(36% 38% at 86% 0%, rgba(108,59,217,.34), transparent 64%),
    radial-gradient(40% 40% at 62% 88%, rgba(242,169,59,.20), transparent 68%);
  pointer-events:none;
}
/* fade into the light body below */
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background:linear-gradient(180deg, transparent, var(--cream));
  pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:1 }
.hero__in{ display:grid; gap:clamp(32px,5vw,56px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center }
@media (max-width:1000px){ .hero__in{ grid-template-columns:1fr } }

.hero h1{ color:#fff }
.hero h1 span{
  background:linear-gradient(100deg,var(--turmeric),var(--spice-2) 55%,#ff9a7a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede{ margin-top:20px; color:rgba(255,255,255,.7); font-size:clamp(16px,1.8vw,19.5px) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.hero__note{ margin-top:18px; font-size:13.5px; color:rgba(255,255,255,.45) }

/* big number strip */
.figs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:clamp(14px,2.4vw,28px);
  margin-top:34px; padding-top:28px;
  border-top:1px solid var(--night-line);
}
.fig b{
  display:block; font-size:clamp(24px,3.2vw,34px); font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(120deg,#fff,rgba(255,255,255,.55));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fig span{ font-size:12.5px; color:rgba(255,255,255,.5); font-weight:500 }

/* ---------- 8. Cards ---------- */
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px, 2.5vw, 30px);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card--hover:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:#e0d8cb }
.card h3{ margin-bottom:8px }
.card p{ font-size:14.8px; line-height:1.58 }

.section--dark .card{
  background:rgba(255,255,255,.045);
  border-color:var(--night-line);
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.section--dark .card--hover:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22) }

.ico{
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--spice-soft),#fff5f1);
  color:var(--spice);
  border:1px solid #f8ded5;
  margin-bottom:18px;
}
.ico svg{ width:22px; height:22px; stroke-width:1.9; fill:none; stroke:currentColor }
.ico--leaf{ background:linear-gradient(135deg,var(--leaf-soft),#f2fbf7); color:var(--leaf); border-color:#c9ebdd }
.ico--gold{ background:linear-gradient(135deg,#fdf2e0,#fffaf2); color:#c08213; border-color:#f6e3c2 }
.ico--plum{ background:linear-gradient(135deg,var(--plum-soft),#f8f5ff); color:var(--plum); border-color:#ddd2fb }
.section--dark .ico{
  background:rgba(232,80,42,.16); border-color:rgba(232,80,42,.32); color:#ff9a7a;
}

/* tick list */
.ticks{ margin-top:14px; display:grid; gap:9px }
.ticks li{ display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); line-height:1.5 }
.section--dark .ticks li{ color:rgba(255,255,255,.68) }
.ticks li::before{
  content:''; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%;
  background:var(--leaf-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8f63' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.section--dark .ticks li::before{ background-color:rgba(15,143,99,.28) }

/* ---------- 9. Tabs / tour ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:0 auto clamp(28px,4vw,42px) }
.tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface);
  font-size:14.5px; font-weight:700; color:var(--ink-2); cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:all .25s var(--ease);
}
.tab:hover{ border-color:var(--ink-3); transform:translateY(-2px) }
.tab[aria-selected="true"]{
  background:linear-gradient(135deg,var(--spice-2),var(--spice));
  border-color:transparent; color:#fff;
  box-shadow:0 8px 20px -8px rgba(232,80,42,.65);
}

.panel[hidden]{ display:none }
.panel{ animation:fade .45s var(--ease) }
@keyframes fade{ from{ opacity:0; transform:translateY(12px) } }

.tour{ display:grid; gap:clamp(26px,4vw,50px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); align-items:center }
@media (max-width:920px){ .tour{ grid-template-columns:1fr } }
.tour__body h3{ font-size:clamp(22px,2.8vw,30px); font-weight:800; margin-bottom:12px }

/* ---------- 10. Screenshot frames ---------- */
figure{ margin:0 }
.shot{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
}
.hero .shot,.section--dark .shot{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.05);
}
.shot__bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 15px;
  background:#f5f1eb; border-bottom:1px solid var(--line);
}
.shot__bar i{ width:10px; height:10px; border-radius:50%; background:#dcd6cb; flex:none }
.shot__bar i:nth-child(1){ background:#f6a09a } .shot__bar i:nth-child(2){ background:#f7d18e }
.shot__bar i:nth-child(3){ background:#a9dbb7 }
.shot__url{
  margin-left:8px; flex:1;
  background:#fff; border:1px solid var(--line);
  border-radius:7px; padding:4px 11px;
  font-size:11.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot img{ width:100%; display:block; background:#fff }
figcaption{ margin-top:14px; font-size:13.5px; color:var(--ink-3); text-align:center }
.section--dark figcaption{ color:rgba(255,255,255,.45) }

/* ---------- 11. Module grid ---------- */
.mods{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  grid-template-columns:repeat(auto-fit, minmax(228px,1fr));
}
.mod{ background:var(--surface); padding:24px 22px; transition:background .25s }
.mod:hover{ background:#fffcf8 }
.mod h4{ font-size:15.5px; font-weight:700; margin-bottom:6px;
  display:flex; align-items:center; gap:9px; letter-spacing:-.015em }
.mod h4 svg{ width:18px; height:18px; color:var(--spice); flex:none;
  stroke-width:1.9; fill:none; stroke:currentColor }
.mod p{ font-size:13.6px; color:var(--ink-3); line-height:1.5 }

/* ---------- 12. Stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.stat{ background:var(--surface); padding:clamp(22px,2.8vw,32px) }
.stat b{ display:block; font-size:clamp(28px,3.6vw,42px); font-weight:800;
  letter-spacing:-.04em; color:var(--ink) }
.stat span{ font-size:12.8px; color:var(--ink-3) }

/* ---------- 13. Steps ---------- */
.steps{ counter-reset:s; display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(222px,1fr)) }
.step{ position:relative; padding-top:50px }
.step::before{
  counter-increment:s; content:"0" counter(s);
  position:absolute; top:0; left:0;
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--spice-2),var(--spice));
  color:#fff; font-weight:800; font-size:14px;
  box-shadow:0 8px 18px -8px rgba(232,80,42,.7);
}
.step h3{ font-size:17.5px; margin-bottom:7px }
.step p{ font-size:14.3px }

/* ---------- 14. Pricing ---------- */
.plans{ display:grid; gap:clamp(16px,2.2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); align-items:start }
.plan{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(26px,3vw,34px); box-shadow:var(--shadow-sm) }
.plan--best{
  border-color:transparent; box-shadow:var(--glow);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(135deg,var(--spice-2),var(--turmeric)) border-box;
  border:2px solid transparent;
}
.plan__tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--spice-2),var(--spice)); color:#fff;
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 15px; border-radius:99px; white-space:nowrap;
}
.plan h3{ font-size:19px }
.plan__price{ margin:16px 0 4px; font-size:clamp(32px,4.2vw,44px); font-weight:800; letter-spacing:-.04em }
.plan__price small{ font-size:15px; font-weight:600; color:var(--ink-3); letter-spacing:0 }
.plan__for{ font-size:13.8px; color:var(--ink-3); min-height:44px }
.plan .ticks{ margin:22px 0 26px }

/* ---------- 15. FAQ ---------- */
.faq{ max-width:840px; margin-inline:auto; display:grid; gap:10px }
details.qa{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
details.qa[open]{ border-color:#e0d8cb; box-shadow:var(--shadow-sm) }
details.qa summary{
  cursor:pointer; list-style:none;
  padding:19px 54px 19px 24px; position:relative;
  font-weight:700; font-size:16px; letter-spacing:-.015em;
}
details.qa summary::-webkit-details-marker{ display:none }
details.qa summary::after{
  content:''; position:absolute; right:24px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.2px solid var(--spice); border-bottom:2.2px solid var(--spice);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
details.qa[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
details.qa .qa__a{ padding:0 24px 22px; font-size:15px; color:var(--ink-2) }
details.qa .qa__a p + p{ margin-top:10px }

/* ---------- 16. CTA band ---------- */
.cta{
  position:relative; overflow:hidden;
  background:var(--night); color:#fff;
  border-radius:var(--radius-lg);
  padding:clamp(38px,5.5vw,68px);
  text-align:center;
}
.cta::before{
  content:''; position:absolute; inset:auto -10% -70% -10%; height:150%;
  background:
    radial-gradient(46% 60% at 30% 100%, rgba(232,80,42,.55), transparent 68%),
    radial-gradient(40% 55% at 74% 100%, rgba(108,59,217,.42), transparent 70%);
}
.cta > *{ position:relative }
.cta h2{ color:#fff }
.cta p{ color:rgba(255,255,255,.7); margin:16px auto 0; max-width:54ch }
.cta__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:30px }
.cta .btn--ghost{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26); color:#fff; box-shadow:none }
.cta .btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5) }

/* ---------- 17. Forms ---------- */
.form{ display:grid; gap:17px }
.field{ display:grid; gap:7px }
.field label{ font-size:13.5px; font-weight:700 }
.field .req{ color:var(--spice) }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px;
  font-size:15px; transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--spice); box-shadow:0 0 0 3px rgba(232,80,42,.15);
}
.field textarea{ min-height:120px; resize:vertical }
.field small{ font-size:12.5px; color:var(--ink-3) }
.form__row{ display:grid; gap:17px; grid-template-columns:1fr 1fr }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr } }

/* ---------- 18. Footer ---------- */
.ftr{ background:var(--night); color:rgba(255,255,255,.62); padding:clamp(46px,6vw,72px) 0 0 }
.ftr a{ color:rgba(255,255,255,.62); transition:color .2s }
.ftr a:hover{ color:#fff }
/* The brand column has a 220px floor and the link columns 138px, which together
   exceed a 375px screen — so collapse the track count on small widths instead. */
.ftr__grid{ display:grid; gap:clamp(26px,4vw,44px);
  grid-template-columns:minmax(220px,1.5fr) repeat(auto-fit,minmax(138px,1fr)) }
@media (max-width:700px){ .ftr__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:430px){ .ftr__grid{ grid-template-columns:1fr } }
.ftr p{ color:rgba(255,255,255,.55); font-size:14px; margin-top:16px; max-width:38ch }
.ftr h4{ color:#fff; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px }
.ftr li + li{ margin-top:10px }
.ftr li{ font-size:14.3px }
.ftr__bar{
  margin-top:clamp(34px,5vw,52px); padding:22px 0;
  border-top:1px solid var(--night-line);
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-size:13px; color:rgba(255,255,255,.42);
}

/* ---------- 19. Breadcrumb ---------- */
.crumbs{ padding:18px 0; font-size:13.5px; color:var(--ink-3) }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.crumbs li::after{ content:'/'; margin-left:8px; color:var(--line) }
.crumbs li:last-child::after{ content:'' }
.crumbs a:hover{ color:var(--spice) }

/* ---------- 20. Reveal ---------- */
.rv{ opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease) }
.rv.in{ opacity:1; transform:none }

/* ---------- 21. Utilities ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--spice); color:#fff; padding:10px 18px; border-radius:9px }
.skip:focus{ left:16px }
:focus-visible{ outline:2px solid var(--spice); outline-offset:3px; border-radius:5px }
.mt-0{ margin-top:0 } .mt-2{ margin-top:18px } .mt-3{ margin-top:28px } .mt-4{ margin-top:42px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important }
  .rv{ opacity:1; transform:none }
  .btn:hover,.tab:hover,.card--hover:hover{ transform:none }
}

@media print{ .hdr,.ftr,.cta,.burger{ display:none } body{ background:#fff } }