/* =============================================================
   TAX MASTER — Expressive layer
   Additive stylesheet: color moments + motion primitives.
   Loads AFTER styles.css and only introduces new tokens/classes
   or overrides where explicitly re-declared.
   ============================================================= */

:root{
  /* new accent tokens */
  --saffron:  #E8833A;
  --saffron-soft:#FBE7D4;
  --plum:     #7C3F58;
  --plum-soft:#F1DDE5;
  --teal:     #3B7A8E;
  --teal-soft:#D6E6EC;
  --blush:    #F4CFC0;

  /* accent gradient rails */
  --grad-warm: linear-gradient(120deg, var(--emerald) 0%, var(--saffron) 55%, var(--gold) 100%);
  --grad-cool: linear-gradient(120deg, var(--teal) 0%, var(--emerald) 60%, var(--gold) 100%);
  --grad-royal: linear-gradient(120deg, var(--plum) 0%, var(--emerald) 55%, var(--saffron) 100%);

  /* motion easings */
  --ease-out-quart: cubic-bezier(.22,.61,.36,1);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);
}

/* ============================================================
   1. AURORA WASH  (used in hero + founder)
   ============================================================ */
.aurora{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  contain:strict;
}
.aurora__layer{
  position:absolute;inset:-20%;
  filter:blur(60px) saturate(1.2);
  opacity:.55;
  animation:aurora-shift 22s ease-in-out infinite alternate;
  will-change:transform;
}
.aurora__layer--a{
  background:
    radial-gradient(closest-side at 20% 30%, var(--saffron) 0%, transparent 55%),
    radial-gradient(closest-side at 80% 20%, var(--teal) 0%, transparent 55%),
    radial-gradient(closest-side at 70% 80%, var(--emerald) 0%, transparent 60%),
    radial-gradient(closest-side at 20% 80%, var(--gold) 0%, transparent 55%);
  animation-duration:26s;
}
.aurora__layer--b{
  background:
    radial-gradient(closest-side at 60% 40%, var(--plum) 0%, transparent 55%),
    radial-gradient(closest-side at 30% 60%, var(--saffron) 0%, transparent 55%),
    radial-gradient(closest-side at 90% 70%, var(--emerald) 0%, transparent 55%);
  opacity:.35;
  animation-duration:32s;
  animation-direction:alternate-reverse;
}
@keyframes aurora-shift{
  0%  { transform:translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform:translate3d(2%, -2%, 0) scale(1.08) rotate(6deg); }
  100%{ transform:translate3d(-3%, 2%, 0) scale(1.12) rotate(-4deg); }
}
/* mobile: kill aurora entirely — big perf win */
@media (max-width:900px){
  .aurora{display:none}
}
@media (prefers-reduced-motion:reduce){
  .aurora__layer{animation:none}
}

/* ============================================================
   2. FLOATING ORBS  (hero ambient shapes)
   ============================================================ */
.orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.orb{
  position:absolute;border-radius:50%;
  filter:blur(30px);opacity:.6;
  will-change:transform;
  animation:orb-float linear infinite;
}
.orb--1{ width:220px;height:220px;left:8%;top:20%;background:radial-gradient(circle, var(--saffron), transparent 70%);animation-duration:28s}
.orb--2{ width:180px;height:180px;right:12%;top:12%;background:radial-gradient(circle, var(--teal),    transparent 70%);animation-duration:34s;animation-delay:-6s}
.orb--3{ width:280px;height:280px;left:38%;bottom:8%;background:radial-gradient(circle, var(--plum),    transparent 70%);animation-duration:40s;animation-delay:-12s;opacity:.4}
.orb--4{ width:160px;height:160px;right:25%;bottom:18%;background:radial-gradient(circle, var(--gold),  transparent 70%);animation-duration:32s;animation-delay:-4s}
.orb--5{ width:120px;height:120px;left:55%;top:36%;background:radial-gradient(circle, var(--emerald),  transparent 70%);animation-duration:26s;animation-delay:-10s;opacity:.5}

@keyframes orb-float{
  0%  { transform:translate3d(0,0,0)     scale(1); }
  25% { transform:translate3d(3vw,-2vh,0) scale(1.05); }
  50% { transform:translate3d(-2vw,3vh,0) scale(.95); }
  75% { transform:translate3d(2vw,2vh,0)  scale(1.02); }
  100%{ transform:translate3d(0,0,0)     scale(1); }
}
@media (max-width:900px){ .orbs{display:none} }
@media (prefers-reduced-motion:reduce){ .orb{animation:none} }

/* ============================================================
   3. CURSOR SPOTLIGHT  (desktop only)
   ============================================================ */
.spotlight{
  position:fixed;pointer-events:none;z-index:1;
  width:520px;height:520px;
  left:0;top:0;
  transform:translate3d(var(--x, 50vw), var(--y, 50vh), 0) translate(-50%, -50%);
  background:radial-gradient(circle, rgba(232,131,58,.14), rgba(212,161,90,.06) 40%, transparent 65%);
  mix-blend-mode:multiply;
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}
.spotlight.is-on{opacity:1}
@media (max-width:900px), (hover:none){ .spotlight{display:none} }
@media (prefers-reduced-motion:reduce){ .spotlight{display:none} }

/* ============================================================
   4. ANIMATED GRADIENT BORDERS  (cards)
   ============================================================ */
.gborder{
  position:relative;
  isolation:isolate;
}
.gborder::before{
  content:"";
  position:absolute;inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--gb-a, 0deg),
    var(--emerald), var(--gold), var(--saffron), var(--plum), var(--teal), var(--emerald));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
  z-index:-1;
  pointer-events:none;
  animation:gborder-spin 8s linear infinite;
  animation-play-state:paused;
}
.gborder:hover::before, .gborder.is-active::before{
  opacity:1;
  animation-play-state:running;
}
@keyframes gborder-spin{
  to{ --gb-a: 360deg; }
}
@property --gb-a{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@media (prefers-reduced-motion:reduce){
  .gborder::before{animation:none}
}

/* ============================================================
   5. HERO STAT STRIP  (count-up numbers)
   ============================================================ */
.hero__stats{
  position:relative;z-index:2;
  margin-top:40px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:720px){.hero__stats{grid-template-columns:repeat(4,1fr)}}
.hero__stat{
  padding:20px 4px;
  border-right:1px solid var(--line);
  position:relative;
  transition:background .3s ease;
}
.hero__stat:nth-child(2n){border-right:0}
@media (min-width:720px){
  .hero__stat:nth-child(2n){border-right:1px solid var(--line)}
  .hero__stat:last-child{border-right:0}
}
.hero__stat-num{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(30px, 3.8vw, 46px);
  letter-spacing:-.03em;line-height:1;
  color:var(--ink);
  display:inline-flex;align-items:baseline;gap:2px;
}
.hero__stat-num em{
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  font-size:.66em;
  color:var(--stat-accent, var(--emerald));
  margin-left:4px;
}
.hero__stat-lbl{
  font-family:ui-monospace, "SF Mono", monospace;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-top:8px;
}
.hero__stat-dot{
  position:absolute;top:20px;right:8px;
  width:6px;height:6px;border-radius:99px;
  background:var(--stat-accent, var(--emerald));
  opacity:.6;
}

/* ============================================================
   6. ICON DRAW-IN  (SVG stroke animation on hover)
   ============================================================ */
.svg-draw path, .svg-draw circle, .svg-draw rect, .svg-draw line, .svg-draw polyline, .svg-draw polygon{
  stroke-dasharray:200;
  stroke-dashoffset:200;
  transition:stroke-dashoffset .8s var(--ease-out-quart);
}
.svg-draw.is-drawn path, .svg-draw.is-drawn circle,
.svg-draw.is-drawn rect, .svg-draw.is-drawn line,
.svg-draw.is-drawn polyline, .svg-draw.is-drawn polygon{
  stroke-dashoffset:0;
}

/* Applies to any lucide icon inside .icon-tile.tile-draw when parent is hovered */
.tile-draw:hover svg *,
.tile-draw:focus-visible svg *{
  animation:tile-redraw .7s var(--ease-out-quart) both;
}

/* Lucide replaces <i data-lucide> with <svg class="lucide">, so all icon
   selectors below target `svg` (or `.lucide`) — NOT `i[data-lucide]`. */
@keyframes tile-redraw{
  0%   { stroke-dasharray:100; stroke-dashoffset:100; }
  100% { stroke-dasharray:100; stroke-dashoffset:0; }
}

/* ============================================================
   7. HOW-IT-WORKS: gradient progress rail
   ============================================================ */
.steps{position:relative}
.steps::before{
  content:"";
  position:absolute;
  left:22px;right:22px;
  top:56px;height:2px;
  background:linear-gradient(90deg,
    var(--emerald) 0%,
    var(--saffron) 25%,
    var(--gold) 50%,
    var(--plum) 75%,
    var(--teal) 100%);
  border-radius:2px;
  opacity:0;
  transform:scaleX(var(--sp, 0));
  transform-origin:left;
  transition:opacity .5s ease;
  z-index:0;
}
@media (max-width:1079px){ .steps::before{display:none} }
.steps.is-in::before{opacity:.6}

/* Each step gets a personality color */
.step{--step-color:var(--emerald)}
.step:nth-child(1){--step-color:var(--emerald)}
.step:nth-child(2){--step-color:var(--saffron)}
.step:nth-child(3){--step-color:var(--gold)}
.step:nth-child(4){--step-color:var(--plum)}
.step:nth-child(5){--step-color:var(--teal)}

.step{position:relative;z-index:1}
.step__num{
  color:var(--step-color) !important;
  transition:transform .4s var(--ease-spring), color .3s ease;
}
.step:hover .step__num{ transform:translateY(-2px) scale(1.05); }

/* .step__icon is defined in styles.css as `.step__icon` on the svg itself (i data-lucide got replaced) */
.step .step__icon{ transition:color .3s ease, transform .3s var(--ease-spring); }
.step:hover .step__icon{ color:var(--step-color) !important; transform:rotate(-8deg) scale(1.1) }

/* colored corner accent on hover */
.step::after{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--step-color);
  border-radius:2px 0 0 2px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease-out-quart);
}
.step:hover::after{transform:scaleY(1)}

/* ============================================================
   8. MARQUEE: dual rows + color chips
   ============================================================ */
.marquee-band{padding:22px 0}
.marquee + .marquee{
  margin-top:14px;
}
.marquee__track--reverse{
  animation-direction:reverse;
  animation-duration:56s;
}
.marquee__item.is-chip{
  background:var(--chip-bg, var(--saffron));
  color:#fff;
  font-family:var(--f-display);font-style:normal;
  font-weight:500;font-size:.55em;
  padding:.35em .8em;border-radius:99px;
  letter-spacing:.02em;
  transform:translateY(-.15em);
  display:inline-flex;align-items:center;gap:.5em;
  box-shadow:0 6px 18px -6px var(--chip-shadow, rgba(232,131,58,.5));
}
.marquee__item.is-chip.c-saffron{ --chip-bg:var(--saffron); --chip-shadow:rgba(232,131,58,.5); }
.marquee__item.is-chip.c-plum{    --chip-bg:var(--plum);    --chip-shadow:rgba(124,63,88,.5); }
.marquee__item.is-chip.c-teal{    --chip-bg:var(--teal);    --chip-shadow:rgba(59,122,142,.5); }
.marquee__item.is-chip.c-emerald{ --chip-bg:var(--emerald); --chip-shadow:rgba(10,74,60,.5); }

/* ============================================================
   9. DOCS: per-service accent colors
   ============================================================ */
.docs__opt{position:relative}
.docs__opt[data-target="itr"]   { --opt-color:var(--emerald); }
.docs__opt[data-target="gstreg"]{ --opt-color:var(--saffron); }
.docs__opt[data-target="gstret"]{ --opt-color:var(--gold); }
.docs__opt[data-target="bizreg"]{ --opt-color:var(--plum); }
.docs__opt[data-target="acc"]   { --opt-color:var(--teal); }
.docs__opt[data-target="tds"]   { --opt-color:var(--saffron); }

.docs__opt.is-active{
  background:var(--opt-color) !important;
  color:#fff !important;
  transform:translateX(2px);
  transition:transform .35s var(--ease-spring), background .3s ease;
}
.docs__opt.is-active svg{ color:#fff !important }
.docs__opt::before{
  content:"";
  position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:var(--opt-color);
  border-radius:0 2px 2px 0;
  transform:scaleY(0);transform-origin:center;
  transition:transform .3s var(--ease-out-quart);
}
.docs__opt:hover::before{transform:scaleY(1)}
.docs__opt.is-active::before{display:none}

.docs__panel{ transition:opacity .3s ease; }
.docs__panel.is-swapping{ opacity:.4; }

.docs__list li{
  position:relative;
  transition:background .25s ease, transform .25s var(--ease-out-quart);
}
.docs__list li:hover{
  background:#fff;
  transform:translateX(3px);
}
.docs__list li svg{
  transition:transform .3s var(--ease-spring);
}
.docs__list li:hover svg{
  transform:rotate(360deg) scale(1.15);
}

/* ============================================================
   10. SERVICE FINDER: liven up the tabs & items
   ============================================================ */
.finder__tab{
  transition:background .25s ease, color .25s ease;
}
.finder__tab svg{
  transition:transform .35s var(--ease-spring), color .3s ease;
}
.finder__tab:hover svg{transform:translateY(-2px) scale(1.15)}
.finder__tab.is-active svg{color:var(--saffron)}
.finder__tab.is-active::after{
  background:linear-gradient(90deg, var(--emerald), var(--saffron)) !important;
}

.finder__item{
  transition:transform .3s var(--ease-spring),
             background .25s ease,
             border-color .25s ease,
             box-shadow .3s ease !important;
}
.finder__item:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 12px 24px -14px rgba(14,27,44,.2);
}
.finder__item-icon{
  transition:transform .35s var(--ease-spring), background .3s ease;
}
.finder__item:hover .finder__item-icon{
  transform:rotate(-8deg) scale(1.1);
  background:var(--emerald-soft);
}

/* rotate accent color per item index (set by JS) */
.finder__item[data-c="1"] .finder__item-icon svg{ color:var(--saffron) }
.finder__item[data-c="2"] .finder__item-icon svg{ color:var(--plum) }
.finder__item[data-c="3"] .finder__item-icon svg{ color:var(--teal) }
.finder__item[data-c="4"] .finder__item-icon svg{ color:var(--gold) }
.finder__item[data-c="5"] .finder__item-icon svg{ color:var(--emerald) }
.finder__item[data-c="0"] .finder__item-icon svg{ color:var(--emerald) }

/* ============================================================
   11. TESTIMONIALS: gradient border cards + decorative glyph
   ============================================================ */
.reviews .review:nth-child(1){ --rev-a:var(--emerald); --rev-b:var(--saffron); }
.reviews .review:nth-child(2){ --rev-a:var(--plum);    --rev-b:var(--gold); }
.reviews .review:nth-child(3){ --rev-a:var(--teal);    --rev-b:var(--emerald); }

.review{
  position:relative;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease;
}
.review::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(135deg, var(--rev-a), var(--rev-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}
.review:hover{ transform:translateY(-4px); box-shadow:0 24px 40px -20px rgba(14,27,44,.18); }
.review:hover::after{ opacity:1 }
.review__stars svg{
  transition:transform .25s var(--ease-spring) calc(var(--i, 0) * 50ms);
  color:#F59E0B !important;
  fill:#F59E0B !important;
  stroke:#F59E0B !important;
}
.review:hover .review__stars svg{
  transform:scale(1.18) rotate(-6deg);
  color:#FBBF24 !important;
  fill:#FBBF24 !important;
  stroke:#FBBF24 !important;
}

/* ============================================================
   12. FOUNDER: dark aurora
   ============================================================ */
.section--dark .aurora__layer--a{
  background:
    radial-gradient(closest-side at 20% 30%, rgba(232,131,58,.6) 0%, transparent 55%),
    radial-gradient(closest-side at 80% 20%, rgba(124,63,88,.7) 0%, transparent 55%),
    radial-gradient(closest-side at 70% 80%, rgba(10,74,60,.7) 0%, transparent 60%),
    radial-gradient(closest-side at 20% 80%, rgba(212,161,90,.5) 0%, transparent 55%);
  opacity:.35;
}
.section--dark .aurora__layer--b{
  background:
    radial-gradient(closest-side at 60% 40%, rgba(59,122,142,.5) 0%, transparent 55%),
    radial-gradient(closest-side at 30% 60%, rgba(232,131,58,.5) 0%, transparent 55%);
  opacity:.25;
}
@media (max-width:900px){
  .section--dark .aurora{display:none}
}

/* colorized founder cell icons — target svg since Lucide replaces the <i> */
.founder__cell:nth-child(1) svg{ color:var(--saffron) !important }
.founder__cell:nth-child(2) svg{ color:var(--gold) !important }
.founder__cell:nth-child(3) svg{ color:var(--teal) !important }
.founder__cell:nth-child(4) svg{ color:var(--plum) !important; opacity:.9 }

/* ============================================================
   13. CONSULT FORM: gradient border card
   ============================================================ */
.consult__form{
  position:relative;isolation:isolate;
}
.consult__form::before{
  content:"";
  position:absolute;inset:-1px;border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--gb-a, 0deg),
    var(--emerald), var(--gold), var(--saffron), var(--plum), var(--teal), var(--emerald));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.28;
  animation:gborder-spin 14s linear infinite;
  pointer-events:none;z-index:-1;
}
.consult__form:focus-within::before{ opacity:.8; animation-duration:6s }

.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--emerald) !important;
  box-shadow:0 0 0 3px rgba(10,74,60,.12), 0 0 0 4px rgba(232,131,58,.10) !important;
}

.consult__way{
  transition:transform .3s var(--ease-spring), background .25s ease, border-color .25s ease;
}
.consult__way:hover:not(.consult__way--static){
  transform:translateY(-2px) translateX(2px);
}
.consult__way:nth-child(1) svg{ color:var(--emerald) }
.consult__way:nth-child(2) svg{ color:var(--saffron) }
.consult__way:nth-child(3) svg{ color:var(--plum) }
.consult__way:nth-child(4) svg{ color:var(--teal) }

/* ============================================================
   14. WHY-US: colored icon tiles
   ============================================================ */
/* why-us icon tiles — styles.css uses .why__cell i[data-lucide]{ padding/background }
   which also becomes dead after Lucide render. Re-declare on svg. */
.why__cell svg{
  width:26px;height:26px;padding:10px;border-radius:12px;box-sizing:content-box;
  margin-bottom:16px;display:inline-block;
  transition:transform .4s var(--ease-spring), background .3s ease, color .3s ease;
}
.why__cell:nth-child(1) svg{ background:var(--emerald-soft) !important; color:var(--emerald) !important }
.why__cell:nth-child(2) svg{ background:var(--saffron-soft) !important; color:var(--saffron) !important }
.why__cell:nth-child(3) svg{ background:var(--plum-soft) !important;    color:var(--plum) !important }
.why__cell:nth-child(4) svg{ background:var(--teal-soft) !important;    color:var(--teal) !important }
.why__cell:nth-child(5) svg{ background:var(--gold-soft) !important;    color:#8B6A2C !important }
.why__cell:nth-child(6) svg{ background:var(--emerald-soft) !important; color:var(--emerald) !important }

.why__cell{ transition:transform .35s var(--ease-spring), box-shadow .35s ease; }
.why__cell:hover{ transform:translateY(-4px) }
.why__cell:hover svg{ transform:rotate(-8deg) scale(1.08) }

/* ============================================================
   15. FOOTER: subtle bottom aurora + colored socials
   ============================================================ */
.footer{position:relative;overflow:hidden}
.footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(232,131,58,.14), transparent 70%),
    radial-gradient(50% 100% at 80% 100%, rgba(124,63,88,.14), transparent 70%),
    radial-gradient(45% 100% at 50% 100%, rgba(10,74,60,.14), transparent 70%);
  filter:blur(4px);
  opacity:.9;
}
.footer__social a{
  transition:background .25s ease, color .25s ease, transform .3s var(--ease-spring);
}
.footer__social a:nth-child(1):hover{ background:linear-gradient(135deg,#F09433,#E6683C,#DC2743,#CC2366,#BC1888) !important; color:#fff !important }
.footer__social a:nth-child(2):hover{ background:#FF0000 !important; color:#fff !important }
.footer__social a:nth-child(3):hover{ background:#1877F2 !important; color:#fff !important }
.footer__social a:nth-child(4):hover{ background:var(--wa) !important; color:#fff !important }
.footer__social a:nth-child(5):hover{ background:var(--emerald) !important; color:#fff !important }
.footer__social a:nth-child(6):hover{ background:var(--saffron) !important; color:#fff !important }

/* ============================================================
   16. SECTION TINT — richer between-section washes
   ============================================================ */
.section--tint{
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(232,131,58,.05), transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(59,122,142,.05), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 60%, var(--paper) 100%);
}

/* ============================================================
   17. BUTTON glow on primary — subtle color pop
   ============================================================ */
.btn--primary{
  position:relative;overflow:hidden;
  transition:transform .18s ease, background .18s, color .18s, border-color .18s, box-shadow .28s;
}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 45%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease-out-quart);
  pointer-events:none;
}
.btn--primary:hover::after{ transform:translateX(120%) }
.btn--primary:hover{ box-shadow:0 12px 28px -12px rgba(10,74,60,.5) }

.btn--gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease-out-quart);
  pointer-events:none;
}
.btn--gold{position:relative;overflow:hidden}
.btn--gold:hover::after{ transform:translateX(120%) }

/* ============================================================
   18. HERO title accent word — animated gradient fill
   ============================================================ */
.hero__title-em{
  background:linear-gradient(120deg, var(--emerald), var(--saffron), var(--gold), var(--emerald));
  background-size:300% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
          color:transparent;
  animation:title-shine 8s ease-in-out infinite;
}
@keyframes title-shine{
  0%,100% { background-position:0% 50% }
  50%     { background-position:100% 50% }
}
@media (prefers-reduced-motion:reduce){
  .hero__title-em{ animation:none; background-position:20% 50% }
}

/* ============================================================
   19. HERO card polish
   ============================================================ */
.hero__card{
  animation:card-float 8s ease-in-out infinite;
}
@keyframes card-float{
  0%,100% { transform:translateY(0) }
  50%     { transform:translateY(-6px) }
}
@media (max-width:900px), (prefers-reduced-motion:reduce){
  .hero__card{ animation:none }
}

.hero__card-eyebrow::before{
  content:"";display:inline-block;width:8px;height:2px;
  background:var(--saffron);margin-right:8px;vertical-align:middle;
}

.chip{ transition:transform .3s var(--ease-spring), background .25s ease, border-color .25s ease }
.chip:hover{ transform:translateY(-2px); border-color:var(--saffron) }
.chip:nth-child(1) svg{ color:var(--emerald) }
.chip:nth-child(2) svg{ color:var(--saffron) }
.chip:nth-child(3) svg{ color:var(--plum) }
.chip:nth-child(4) svg{ color:var(--teal) }
.chip:nth-child(5) svg{ color:var(--gold) }

/* ============================================================
   20. STRIP items — colorize slightly
   ============================================================ */
.strip__item{ transition:color .25s ease, transform .25s ease }
.strip__item:hover{ transform:translateY(-1px) }
.strip__item:nth-child(1) svg{ color:var(--emerald) }
.strip__item:nth-child(2) svg{ color:var(--saffron) }
.strip__item:nth-child(3) svg{ color:var(--plum) }
.strip__item:nth-child(4) svg{ color:var(--teal) }
.strip__item:nth-child(5) svg{ color:var(--gold) }
.strip__item:nth-child(6) svg{ color:var(--emerald) }

/* ============================================================
   21. Nav CTA subtle color echo
   ============================================================ */
.nav__cta .btn--primary{
  background:linear-gradient(120deg, var(--ink) 0%, var(--emerald) 100%);
  border-color:transparent;
}
.nav__cta .btn--primary:hover{
  background:linear-gradient(120deg, var(--emerald) 0%, var(--saffron) 120%);
}

/* ============================================================
   22. HERO shift — lighter veil so aurora shows through
   ============================================================ */
@media (min-width:900px){
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(251,250,247,.82) 0%, rgba(251,250,247,.72) 45%, rgba(251,250,247,.84) 100%),
      linear-gradient(115deg, rgba(251,250,247,.90) 0%, rgba(251,250,247,.48) 45%, rgba(251,250,247,.30) 100%);
  }
}

/* ============================================================
   23. Faster reveals on the second visit + hero enter
   ============================================================ */
.hero__inner .hero__copy{ animation:hero-copy-in .9s var(--ease-out-quart) both }
@keyframes hero-copy-in{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
.hero__inner .hero__card{ animation:hero-card-in 1.1s var(--ease-out-quart) .2s both, card-float 8s ease-in-out 1.4s infinite }
@keyframes hero-card-in{
  from{ opacity:0; transform:translateY(30px) scale(.96) }
  to  { opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .hero__inner .hero__copy,
  .hero__inner .hero__card{ animation:none }
}