/* ==========================================================
   Variant base — loaded after style.css / motion.css / site-extras.css
   Re-expresses every hard-coded color through --v-* tokens so a
   palette file can restyle the whole homepage.
   ========================================================== */

:root{
  /* map the brand tokens onto the variant tokens */
  --nebula:var(--v-accent);
  --periwinkle:var(--v-accent-2);
  --lavender:var(--v-lavender);
  --comet:var(--v-cta);
  --solar:var(--v-solar);
  --midnight:var(--v-on-light);   /* text + borders on light surfaces (badges, CTA, marquee, colored cards) */
  --moonlight:var(--v-bg);
  --bg:var(--v-bg);
  --bg-2:var(--v-bg2);
  --bg-3:var(--v-band);
  --ink:var(--v-ink);
  --ink-soft:var(--v-ink-soft);
  --line:var(--v-line);
  --rule:1px solid var(--v-line);
  --logo-ink:var(--v-ink);
}

/* page */
html{background:var(--v-bg)}
body{background:radial-gradient(120% 70% at 85% 0%,var(--v-glow-top) 0%,var(--v-bg2) 38%,var(--v-bg) 72%) no-repeat fixed;color:var(--v-ink)}
.nav{background:rgba(var(--v-bg-rgb),.84);border-bottom:1px solid var(--v-line)}
.kicker,.band-white .kicker,.band-soft .kicker{color:var(--v-accent)}
.statement em{color:var(--v-accent)}
.embed-cap .views{color:var(--v-accent)}
.btn.ghost{color:var(--v-ink);border-color:var(--v-ink-soft)}
.btn.ghost:hover{background:var(--v-ink);color:var(--v-bg);border-color:var(--v-ink)}
.fstar{color:var(--v-cta)}
.fstar.peri{color:var(--v-badge-3)}
.marquee span{color:var(--v-on-light)}

/* interior pages: roles that were pale peach/lavender on the dark site read as the accent on light */
.kicker,.on-dark .kicker,.band .kicker,.band-soft .kicker,.band-white .kicker,.vhero .kicker,
.case-evidence .kicker,.case-page .kicker,
.tier .tier-tag,.tier.featured .tier-tag,.step .num,.field label,.contact-list .label,.feature-meta .tag,
.pull cite,.quote cite,.work-item .stat{color:var(--v-accent)}
.row h3{color:var(--v-ink)}
.band{color:var(--v-ink)}
.band p{color:var(--v-ink-soft)}
/* case-studies.css loads after this file on those pages, so these need the extra specificity */
html .case-evidence .kicker,html .case-page .kicker,html .impact-metrics dd,html .evidence-summary strong{color:var(--v-accent)}
.proof strong,.embed-cap .views,.floor strong,.field.check strong,.form-note a,.evidence-summary strong,.impact-metrics dd,.feature .go{color:var(--v-accent)}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--v-ink) 42%,transparent)}
.form-note{color:var(--v-ink-soft)}
.vhero p{color:var(--v-ink-soft)}
.btn.outline-light{color:var(--v-ink);border-color:var(--v-ink-soft)}
.btn.light{color:var(--v-on-light)}
/* the dark closing band and footer keep their light-on-dark roles */
.band-dark .kicker,.cta .story-prompt{color:var(--v-cta)}
.foot h4{color:var(--v-cta)}
.foot .tagline{color:var(--v-cta)}

/* dark blocks: closing CTA + footer */
.band-dark{background:var(--v-dark);color:#fff}
.band-dark p,.band-dark .statement,.band-dark .cta-copy{color:#fff}
.band-dark .kicker,.cta .story-prompt{color:var(--v-cta)}
.foot{background:var(--v-dark);color:#fff}
.foot .tagline{color:var(--v-cta)}

/* client logos: some were inverted to white for the dark site */
body :is(.client-logo--kolkata-chai,.client-logo--trust-pharmacy,.client-logo--wick-pour) img{filter:var(--v-logo-filter)}

/* hero mockup */
.badge{background:#fff;color:var(--v-on-light);border-color:var(--v-on-light);box-shadow:4px 4px 0 var(--v-badge-3)}
.b-views{background:#fff;color:var(--v-on-light);box-shadow:4px 4px 0 var(--v-accent)}
.b-views .big{color:var(--v-accent)}
.b-followers{background:var(--v-lavender)}
.b-followers b{color:var(--v-accent)}
.b-irl{background:var(--v-badge-3)}
.dm-avatar{background:linear-gradient(135deg,var(--v-lavender),var(--v-badge-3));border-color:var(--v-on-light)}
.mock-glow{background:radial-gradient(closest-side,rgba(var(--v-cta-rgb),.35),rgba(var(--v-accent2-rgb),.18) 55%,transparent 75%)}
.phone{border-color:var(--v-phone-ring);box-shadow:0 30px 60px rgba(0,0,0,.28),0 0 0 8px var(--v-phone-ring)}

/* shine CTA: nav button + apply submit */
:is(.nav .links .btn.pop,.btn.shine-cta){
  background:linear-gradient(115deg,var(--v-cta) 0%,var(--v-cta-2) 35%,var(--v-cta-3) 50%,var(--v-cta-2) 65%,var(--v-cta) 100%);
  background-size:220% 100%;
  border-color:var(--v-on-light);color:var(--v-on-light);
  box-shadow:3px 3px 0 var(--v-on-light),0 0 18px rgba(var(--v-cta-rgb),.55),0 0 40px rgba(var(--v-cta-rgb),.25);
}
:is(.nav .links .btn.pop,.btn.shine-cta):hover{box-shadow:5px 5px 0 var(--v-on-light),0 0 26px rgba(var(--v-cta-rgb),.95),0 0 60px rgba(var(--v-cta-rgb),.5)}
@keyframes cta-glow{
  0%,100%{box-shadow:3px 3px 0 var(--v-on-light),0 0 14px rgba(var(--v-cta-rgb),.45),0 0 32px rgba(var(--v-cta-rgb),.18)}
  50%{box-shadow:3px 3px 0 var(--v-on-light),0 0 24px rgba(var(--v-cta-rgb),.85),0 0 54px rgba(var(--v-cta-rgb),.4)}
}
:is(.nav .links .btn.pop,.btn.shine-cta) .spark{background:var(--v-spark);filter:drop-shadow(0 0 4px var(--v-cta)) drop-shadow(0 0 8px rgba(var(--v-cta-rgb),.8))}

/* hero CTA (secondary) */
.btn.pop.launch{color:var(--v-ink);border-color:var(--v-accent-2);box-shadow:3px 3px 0 rgba(var(--v-accent2-rgb),.35)}
.btn.pop.launch:hover{background:var(--v-accent-2);color:var(--v-on-accent2);border-color:var(--v-accent-2);box-shadow:5px 5px 0 rgba(var(--v-accent2-rgb),.45)}
.btn.pop.launch .launch-star svg{fill:var(--v-cta)}
.btn.pop.launch:hover .launch-star svg{fill:var(--v-on-accent2)}
.btn.pop.launch.charging{background:var(--v-accent-2);color:var(--v-on-accent2);box-shadow:5px 5px 0 rgba(var(--v-accent2-rgb),.45),0 0 22px rgba(var(--v-accent2-rgb),.8),0 0 56px rgba(var(--v-accent2-rgb),.4)}

/* shooting stars fired from the hero CTA */
.shooting-star{background:linear-gradient(90deg,transparent 0%,rgba(var(--v-accent-rgb),0) 12%,rgba(var(--v-accent-rgb),.75) 65%,var(--v-accent) 100%);filter:drop-shadow(0 0 6px rgba(var(--v-accent-rgb),.9))}
.shooting-star::after{background:var(--v-accent)}
.shooting-star.peach{background:linear-gradient(90deg,transparent 0%,rgba(var(--v-cta-rgb),0) 12%,rgba(var(--v-cta-rgb),.8) 65%,var(--v-cta) 100%);filter:drop-shadow(0 0 6px rgba(var(--v-cta-rgb),.9))}
.shooting-star.peach::after{background:var(--v-cta)}
.shooting-star.peri{background:linear-gradient(90deg,transparent 0%,rgba(var(--v-accent2-rgb),0) 12%,rgba(var(--v-accent2-rgb),.8) 65%,var(--v-accent-2) 100%);filter:drop-shadow(0 0 6px rgba(var(--v-accent2-rgb),.9))}
.shooting-star.peri::after{background:var(--v-accent-2)}
.hero-flash{background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(var(--v-cta-rgb),.55) 0%,rgba(var(--v-cta-rgb),.25) 22%,rgba(var(--v-accent2-rgb),.12) 45%,transparent 65%)}

/* "shine." — the shining word, homepage hero + services hero */
em.shine-word{
  background:linear-gradient(100deg,var(--v-shine) 0%,var(--v-shine) 38%,var(--v-shine-hi) 50%,var(--v-shine) 62%,var(--v-shine) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 16px rgba(var(--v-shine-rgb),.35));
}
em.shine-word::before,em.shine-word::after{background:var(--v-shine)}

/* variant switcher (preview only) */
.variant-bar{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:999;display:flex;align-items:center;gap:.2rem;padding:.35rem .45rem;border-radius:999px;background:rgba(20,16,28,.88);backdrop-filter:blur(8px);font:600 .7rem/1 'Poppins',sans-serif;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.variant-bar span{padding:0 .5rem 0 .6rem;opacity:.6;font-weight:500}
.variant-bar a{color:#fff;text-decoration:none;padding:.45rem .7rem;border-radius:999px;opacity:.75;white-space:nowrap}
.variant-bar a:hover{opacity:1;background:rgba(255,255,255,.12)}
.variant-bar a.on{background:#fff;color:#111;opacity:1}
@media (max-width:700px){.variant-bar span{display:none}.variant-bar a{padding:.4rem .5rem}}