/* ============================================================================
   TELANGANA MARKETING AGENCY  ·  BRAND LAYER
   Positioning: Telangana's own performance agency — priced in public,
   results in rupees, answers on WhatsApp.
   Palette: near-black ground, cool paper, electric violet accent.
   Type: Sora (display) + Inter (body). Big numbers, tabular data, whitespace.
   Only tokens and what core.css genuinely lacks live here.
   ========================================================================== */

:root{
  --ink:#0d0c11;
  --ink-2:#171520;
  --paper:#fbfaf9;
  --paper-2:#f2f0f5;
  --line:#e2dfe9;
  --accent:#6d28d9;        /* 7.0:1 on paper — safe for text */
  --accent-soft:#a78bfa;   /* 7.1:1 on ink   — the on-dark accent */
  --muted:#55505c;         /* 7.4:1 on paper */

  --wa:#0f7a6d;            /* WhatsApp green, darkened to pass AA on white */
  --wa-ink:#0b5f55;

  --font-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* Sora has no 400 weight loaded — core's default of 400 would fall back badly */
h1,h2,h3,h4,.display{font-weight:600;letter-spacing:-.028em}
.display-xl,.display-lg{letter-spacing:-.036em}
.eyebrow{letter-spacing:.2em;font-weight:600}
.btn{letter-spacing:.06em;font-weight:600;border-radius:var(--r-sm)}
strong,b{font-weight:600}
.tnum,.num,td.num,.stat__n,.reveal-price__n{font-variant-numeric:tabular-nums}

/* Squarer geometry than core's default — this brand is sharp, not soft */
.card,.wizard,.modal__panel,.table-wrap,.ph{border-radius:var(--r-md)}

/* ---------- ON-DARK ACCENT CORRECTION (contrast, not decoration) ---------- */
.on-dark .eyebrow,.on-dark .accent,.on-dark .stat__n,.on-dark .link--accent,
.on-dark .card__num,.on-dark .card__icon,.on-dark .choice span svg,
.on-dark .reveal-price__n,.on-dark .figure__n{color:var(--accent-soft)}
.on-dark .card__icon{background:color-mix(in srgb,var(--accent-soft) 14%,transparent)}
.on-dark .badge{
  color:var(--accent-soft);
  background:color-mix(in srgb,var(--accent-soft) 13%,transparent);
  border-color:color-mix(in srgb,var(--accent-soft) 32%,transparent);
}
.on-dark .rule--short{background:var(--accent-soft)}

/* Core's action-bar green is 2.2:1 against white text. Fix it. */
.actionbar a.is-wa{background:var(--wa)}

/* ---------- WHATSAPP BUTTON ---------- */
.btn--wa{--btn-bg:var(--wa);--btn-fg:#fff}
.btn--wa:hover{--btn-bg:var(--wa-ink)}

/* ---------- HEADER OVER THE DARK HERO ----------
   The header is transparent until it sticks, and at rest it sits on the
   near-black hero. Without this it is ink-on-ink and effectively invisible. */
.header{color:var(--paper)}
.header .brand small{color:rgba(251,250,249,.62)}
.header .btn--ghost{--btn-fg:var(--paper);border-color:rgba(251,250,249,.32)}
.header .btn--ghost:hover{border-color:var(--paper);background:rgba(251,250,249,.1)}
.header.is-stuck{color:var(--ink)}
.header.is-stuck .brand small{color:var(--muted)}
.header.is-stuck .btn--ghost{--btn-fg:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.header.is-stuck .btn--ghost:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}

@media (max-width:960px){
  /* The drop-down panel paints itself paper, so it needs ink text regardless */
  .nav{color:var(--ink)}
  /* Core hides header buttons on mobile. The +91 number is a trust signal in
     this market — its absence reads as fake — so it stays. */
  .header__cta .btn.header__tel{display:inline-flex;padding:.7em 1em;font-size:11px}
}
@media (max-width:430px){
  .header__tel span{display:none}
  .header__cta .btn.header__tel{padding:.7em .85em}
}

/* Accordion buttons inherit weight from their wrapping heading */
.acc__btn{font-weight:600}

/* ---------- SECTION HEADS ---------- */
.sec-head{max-width:54rem;margin-bottom:var(--s-2xl)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-bottom:var(--s-sm)}

/* ---------- HERO ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding-top:calc(var(--header-h) + var(--s-xl));
  padding-bottom:var(--s-2xl);
  --fg-muted:rgba(251,250,249,.68);
  --hairline:rgba(251,250,249,.14);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(62% 52% at 82% 8%,rgba(109,40,217,.55),transparent 64%),
    radial-gradient(52% 58% at 4% 92%,rgba(167,139,250,.22),transparent 62%),
    linear-gradient(172deg,#151321 0%,#0d0c11 52%,#08070b 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 82% 72% at 30% 42%,#000 6%,transparent 74%);
}
.hero__layout{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:1080px){.hero__layout{grid-template-columns:1.06fr .94fr}}
.hero h1{
  font-size:clamp(2.7rem,1.9rem + 4vw,5.1rem);
  line-height:1.0;letter-spacing:-.038em;margin-bottom:var(--s-md);
}
.hero .lede{color:var(--fg-muted);max-width:36rem}
.hero__eyebrow{color:var(--accent-soft)}

.hero__trust{
  display:grid;gap:var(--s-sm) var(--s-lg);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  margin-top:var(--s-xl);padding-top:var(--s-md);
  border-top:1px solid var(--hairline);
}
.hero__trust div{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--step--2);line-height:1.45;color:var(--fg-muted)}
.hero__trust svg{width:16px;height:16px;color:var(--accent-soft);flex:none;margin-top:2px}

/* ---------- THE LEAD WIZARD (light card on the dark hero) ---------- */
.funnel{--bg:#fff;--fg:#0d0c11;--fg-muted:#55505c;--surface:#f5f3f9;--hairline:#e4e0ec}
.funnel.wizard{border-color:rgba(255,255,255,.16);box-shadow:0 32px 90px rgba(0,0,0,.55)}
.funnel__crown{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.2rem;
  background:linear-gradient(90deg,#171520,#241d3c);
  color:var(--paper);
}
.funnel__crown span{font-size:var(--step--2);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.5em}
.funnel__crown svg{width:15px;height:15px;color:var(--accent-soft)}
.funnel__crown b{color:var(--accent-soft);font-weight:600;font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase}
.funnel .wizard__q{font-size:var(--step-2);font-weight:600}
.funnel .wizard__body{min-height:0}

/* ---------- BIG FIGURE (results-forward number display) ---------- */
.figure{display:flex;flex-direction:column;gap:.35rem}
.figure__n{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--step-5);line-height:1;color:var(--accent);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.figure__l{font-size:var(--step--2);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted)}
.figure__note{font-size:var(--step--2);color:var(--fg-muted);line-height:1.4}

/* ---------- INDUSTRY SELECTOR ---------- */
.inds{display:grid;gap:var(--s-sm);grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.ind{
  display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;padding:clamp(1.3rem,2.6vw,1.7rem);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--bg);position:relative;overflow:hidden;
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid);
}
.ind::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width var(--t-slow) var(--ease-out);
}
.ind:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline))}
.ind:hover::after{width:100%}
.ind__ico{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);flex:none}
.ind__ico svg{width:21px;height:21px}
.ind h3{font-size:var(--step-1);font-weight:600}
.ind p{font-size:var(--step--1);color:var(--fg-muted);line-height:1.55;flex:1}
.ind__spend{
  font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:flex;align-items:center;gap:.4em;
}
.ind__spend svg{width:13px;height:13px;transition:translate var(--t-mid) var(--ease-out)}
.ind:hover .ind__spend svg{translate:4px 0}

/* ---------- SERVICE CARDS ---------- */
.svc{
  display:block;text-decoration:none;position:relative;
  padding:clamp(1.4rem,2.8vw,1.9rem);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--bg);
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out),border-color var(--t-mid);
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--accent) 38%,var(--hairline))}
.svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:var(--s-sm)}
.svc__ico{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);flex:none}
.svc__ico svg{width:20px;height:20px}
.svc__from{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);text-align:right;line-height:1.5;flex:none}
.svc__from b{display:block;font-family:var(--font-display);font-size:var(--step-0);color:var(--accent);letter-spacing:-.01em;font-weight:600}
.svc h3{font-size:var(--step-1);margin-bottom:.35em;font-weight:600}
.svc p{color:var(--fg-muted);font-size:var(--step--1);line-height:1.55}

/* ---------- PRICING TIERS ---------- */
.tiers{display:grid;gap:var(--s-md);grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));align-items:stretch}
.tier{
  display:flex;flex-direction:column;
  padding:clamp(1.5rem,3vw,2rem);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--bg);position:relative;
}
.tier--featured{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow-3);
}
.tier__tag{
  position:absolute;top:0;right:clamp(1.5rem,3vw,2rem);translate:0 -50%;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.42em .9em;border-radius:var(--r-full);
}
.tier h3{font-size:var(--step-1);font-weight:600;margin-bottom:.3em}
.tier__who{font-size:var(--step--1);color:var(--fg-muted);line-height:1.5;min-height:3.1em}
.tier__price{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;
  font-size:var(--step-5);line-height:1;color:var(--fg);
  margin:var(--s-md) 0 .2em;font-variant-numeric:tabular-nums;
}
.tier__per{font-size:var(--step--2);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.12em}
.tier__spend{
  margin:var(--s-md) 0;padding:.75em .9em;
  border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  font-size:var(--step--2);color:var(--accent);font-weight:600;line-height:1.4;
}
.tier ul{list-style:none;padding:0;margin:0 0 var(--s-lg);display:grid;gap:.65rem;flex:1}
.tier li{display:flex;gap:.6rem;font-size:var(--step--1);line-height:1.5;color:var(--fg-muted)}
.tier li svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:4px}
.tier .btn{margin-top:auto}

/* ---------- TABLES ---------- */
.table-plain th[scope="row"]{
  background:transparent;text-transform:none;letter-spacing:0;
  font-size:var(--step-0);color:var(--fg);font-weight:500;white-space:normal;
}
.table-plain td.num{color:var(--fg);font-weight:500}
.table-plain caption{
  caption-side:top;text-align:left;padding:1em 1.15em .6em;
  font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);background:var(--surface);font-weight:600;
}

/* ---------- CALCULATOR ---------- */
.calc{display:grid;gap:var(--s-lg);align-items:start}
@media (min-width:960px){.calc{grid-template-columns:1fr 1.05fr;gap:var(--s-xl)}}
.calc__panel{
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--bg);
}
.calc__out{
  padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--r-md);
  background:var(--ink);color:var(--paper);
  --fg-muted:rgba(251,250,249,.66);
  --hairline:rgba(251,250,249,.15);
  position:relative;overflow:hidden;
}
.calc__out::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 88% 4%,rgba(109,40,217,.5),transparent 66%);
  pointer-events:none;
}
.calc__out>*{position:relative}
.calc__grid{display:grid;gap:var(--s-md) var(--s-lg);grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.calc__grid .figure__n{color:var(--accent-soft);font-size:var(--step-4)}
.calc__hero{
  padding-bottom:var(--s-md);margin-bottom:var(--s-md);
  border-bottom:1px solid var(--hairline);
}
.calc__hero .figure__n{font-size:clamp(3rem,2rem + 5vw,4.6rem);color:#fff}
.calc__delta{
  margin-top:var(--s-md);padding:.9em 1em;
  border-radius:var(--r-sm);
  background:rgba(251,250,249,.07);
  border:1px solid var(--hairline);
  font-size:var(--step--1);line-height:1.55;color:var(--fg-muted);
}
.calc__delta b{color:#fff;font-weight:600}
.calc__disclaim{
  margin-top:var(--s-md);font-size:var(--step--2);line-height:1.5;
  color:var(--fg-muted);display:flex;gap:.55rem;
}
.calc__disclaim svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--accent-soft)}

.range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:32px;background:transparent;cursor:pointer;display:block;
}
.range::-webkit-slider-runnable-track{
  height:6px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--accent) var(--pct,40%),var(--hairline) var(--pct,40%));
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;margin-top:-9px;
  background:var(--bg);border:3px solid var(--accent);box-shadow:var(--shadow-2);
}
.range::-moz-range-track{height:6px;border-radius:var(--r-full);background:var(--hairline)}
.range::-moz-range-progress{height:6px;border-radius:var(--r-full);background:var(--accent)}
.range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:var(--shadow-2)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 32%,transparent)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 32%,transparent)}
.range__val{
  font-family:var(--font-display);font-weight:600;font-size:var(--step-2);
  color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.range__ends{display:flex;justify-content:space-between;font-size:var(--step--2);color:var(--fg-muted);font-variant-numeric:tabular-nums}

/* ---------- ASSUMPTIONS DISCLOSURE ---------- */
.disclose{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--bg)}
.disclose>summary{
  padding:1.05em 1.2em;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:var(--step--1);font-weight:600;
}
.disclose>summary::-webkit-details-marker{display:none}
.disclose>summary::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  rotate:45deg;translate:0 -2px;transition:rotate var(--t-mid) var(--ease-out);
}
.disclose[open]>summary::after{rotate:-135deg;translate:0 2px}
.disclose>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-md)}
.disclose__body{padding:0 1.2em 1.4em;border-top:1px solid var(--hairline);padding-top:1.2em}
.disclose__body p,.disclose__body li{font-size:var(--step--1);color:var(--fg-muted);line-height:1.6}
.disclose__body ul{padding-left:1.15em;display:grid;gap:.5rem;margin-top:.75rem}

/* ---------- NOTE / HONESTY CALLOUT ---------- */
.note{
  border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:clamp(1rem,2.5vw,1.4rem) clamp(1.1rem,2.5vw,1.5rem);
}
.note h4{font-size:var(--step-0);font-weight:600;margin-bottom:.4em}
.note p{font-size:var(--step--1);color:var(--fg-muted);line-height:1.6}
.on-dark .note{border-left-color:var(--accent-soft);background:rgba(251,250,249,.06)}

/* ---------- CASE STUDY PLACEHOLDER SLOTS ---------- */
.cases{display:grid;gap:var(--s-md);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.case{
  border:2px dashed color-mix(in srgb,var(--accent) 40%,var(--hairline));
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  padding:clamp(1.3rem,2.8vw,1.8rem);
  display:flex;flex-direction:column;gap:var(--s-sm);
}
.case__tag{
  align-self:flex-start;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  padding:.4em .8em;border-radius:var(--r-full);
}
.case__ph{aspect-ratio:16/10}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem var(--s-sm);margin:0;font-size:var(--step--1)}
.case dt{color:var(--fg-muted);white-space:nowrap}
.case dd{margin:0;font-weight:500;color:var(--fg)}
.case__fill{color:color-mix(in srgb,var(--fg) 45%,transparent);font-style:italic;font-weight:400}

/* ---------- PROCESS TIMELINE ---------- */
.steps{display:grid;gap:var(--s-lg);grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.step{position:relative;padding-top:var(--s-lg)}
.step::before{
  content:"";position:absolute;top:0;left:0;right:var(--s-sm);height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.step__when{
  display:block;font-size:var(--step--2);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin-bottom:.55em;
}
.step h3{font-size:var(--step-1);font-weight:600;margin-bottom:.4em}
.step p{color:var(--fg-muted);font-size:var(--step--1);line-height:1.55}
.on-dark .step__when{color:var(--accent-soft)}
.on-dark .step::before{background:linear-gradient(90deg,var(--accent-soft),transparent)}

/* ---------- FINAL CTA ---------- */
.finale{text-align:center;position:relative;overflow:hidden}
.finale h2{font-size:var(--step-6);margin-bottom:var(--s-md)}

/* ---------- FOOTER GEO ---------- */
.geo{display:flex;flex-wrap:wrap;gap:.5rem}
.geo a{
  font-size:var(--step--2);text-decoration:none;
  padding:.4em .8em;border-radius:var(--r-full);
  border:1px solid var(--hairline);color:var(--fg-muted);
  transition:color var(--t-fast),border-color var(--t-fast),background-color var(--t-fast);
}
.geo a:hover{color:var(--paper);border-color:var(--accent-soft);background:rgba(251,250,249,.06)}

/* ---------- SUCCESS PANEL ---------- */
.done{
  background:#fff;color:#0d0c11;
  border-radius:var(--r-md);border:1px solid #e4e0ec;
  box-shadow:0 32px 90px rgba(0,0,0,.5);
  padding:clamp(1.75rem,4vw,2.5rem);text-align:center;
}
.done .card__icon{margin-inline:auto;width:54px;height:54px}
.done .card__icon svg{width:26px;height:26px}

/* ---------- RESPONSIVE FINE-TUNING ---------- */
@media (max-width:1079px){
  .hero{padding-top:calc(var(--header-h) + var(--s-lg))}
  .hero__layout{grid-template-columns:1fr}
}
@media (max-width:620px){
  .hero h1{font-size:clamp(2.25rem,8.5vw,3.1rem)}
  .tier__who{min-height:0}
  .case dl{grid-template-columns:1fr}
  .case dt{margin-top:.35rem}
}

/* ---------- LUXURY PASS: photographic hero -------------------------------
   HITEC City at night under the violet atmosphere.
   Photo: Mohammad Anees Qamar, CC BY 4.0, via Wikimedia Commons
   (File:"High-rise office towers lit up at night in Hi-Tech City, Hyderabad
   – View of Sattva and adjacent buildings".jpg) */
.hero{
  background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/%22High-rise%20office%20towers%20lit%20up%20at%20night%20in%20Hi-Tech%20City%2C%20Hyderabad%20%E2%80%93%20View%20of%20Sattva%20and%20adjacent%20buildings%22.jpg?width=1536");
  background-size:cover;background-position:center 30%;
}
.hero::before{
  background:
    radial-gradient(62% 52% at 82% 8%,rgba(109,40,217,.52),transparent 64%),
    radial-gradient(52% 58% at 4% 92%,rgba(167,139,250,.20),transparent 62%),
    linear-gradient(172deg,rgba(21,19,33,.94) 0%,rgba(13,12,17,.88) 52%,rgba(8,7,11,.94) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .hero{animation:tmaDrift 44s ease-in-out infinite alternate}
  @keyframes tmaDrift{from{background-position:center 28%}to{background-position:center 36%}}
}
@media (prefers-reduced-motion:reduce){.hero{animation:none}}