/* ─────────────────────────────────────────────────────────────
   VidDL.io — instrument-panel dark. Editorial display type over a
   technical mono scaffold, hairline rules, one accent used sparingly.
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#0a0e16;
  --bg-2:#0d1320;
  --card:#111827;
  --line:#1e2942;
  --line-soft:#161f33;
  --txt:#e8eefc;
  --dim:#97a6c4;
  --faint:#5f6d8c;
  --accent:#6366f1;
  --accent-2:#a855f7;
  --hot:#c4b5fd;

  --display:'Bricolage Grotesque',Georgia,serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --gut:clamp(20px,5vw,64px);
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:normal}

/* film grain, keeps the flat dark from looking like a dead PNG */
.grain{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.22;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── type scale ─────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.028em;line-height:1.04}

h1{
  font-size:clamp(40px,5.4vw,76px);
  font-weight:700;
  letter-spacing:-.042em;
  line-height:1.0;
}
h1 em{
  background:linear-gradient(104deg,var(--hot) 0%,var(--accent-2) 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.big{font-size:clamp(31px,4.6vw,56px);max-width:19ch}
h3{font-size:21px;letter-spacing:-.02em}

.tag{
  font-family:var(--mono);font-size:14.4px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-2);
  margin-bottom:26px;
}
.tag.small{margin-bottom:14px}

.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:26px;
}

.lede{font-size:clamp(17px,1.65vw,20px);color:var(--dim);max-width:53ch;margin-top:26px}
.sub{font-size:clamp(16.5px,1.5vw,19px);color:var(--dim);max-width:60ch;margin-top:22px}
.fine{font-size:13.5px;color:var(--faint);line-height:1.6;margin-top:18px}
.fine.wide{max-width:64ch}

/* ── chrome ─────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:26px;
  padding:16px var(--gut);
  background:linear-gradient(180deg,rgba(10,14,22,.92),rgba(10,14,22,0));
  backdrop-filter:blur(9px);
}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:21px;font-weight:700;letter-spacing:-.04em}
.nav-links{margin-left:auto;display:flex;gap:26px;font-size:14.5px;color:var(--dim)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--txt)}
@media(max-width:760px){.nav-links{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:11px;
  color:#fff;background:linear-gradient(118deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 32px -10px rgba(124,82,237,.75);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2),box-shadow .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(124,82,237,.9)}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:9px}
.btn-lg{padding:17px 30px;font-size:16.5px;border-radius:13px}

.btn-ghost{
  font-size:15px;color:var(--dim);padding:13px 4px;
  border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;
}
.btn-ghost:hover{color:var(--txt);border-color:var(--accent-2)}

/* ── hero ───────────────────────────────────────────────── */
/* Wide: copy holds the left column, the swarm and the mark own the right.
   Narrow: the copy takes the full width and the swarm sits above it. */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:150px var(--gut) clamp(64px,9vh,112px);
  overflow:hidden;
}
/* The chip field. Each chip is a small dark badge carrying one platform
   mark, flying toward the logo. Positions come from hero.js as transforms,
   so the browser can keep the whole field on the compositor. */
.chip-field{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.chip{
  position:absolute;top:0;left:0;
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:12px;
  background:rgba(8,12,22,.74);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 18px -4px var(--glow,#8b5cf6);
  backdrop-filter:blur(2px);
  opacity:0;will-change:transform,opacity;
}
/* The icon files are a mixed bag: most are single-colour marks, one
   carries its own palette. Knocking them all to white keeps the field
   consistent, and the per-platform colour lives in the glow instead. */
.chip img{
  width:20px;height:20px;display:block;object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 0 5px var(--glow,#8b5cf6));
  opacity:.94;
}
@media(max-width:700px){
  .chip{width:34px;height:34px;border-radius:10px}
  .chip img{width:17px;height:17px}
}

/* The stylesheet is the single source of truth for where the mark sits.
   hero.js measures it from layout and aims the chips at it, so moving the
   logo here moves the whole convergence with it. */
.hero-core{
  position:absolute;left:50%;top:22%;z-index:2;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
@media(min-width:820px){ .hero-core{left:70%;top:34%} }
@media(min-width:1100px){ .hero-core{left:75.5%;top:46%} }
.core-breathe{animation:breathe 5.5s ease-in-out infinite}
.hero-core img{
  width:clamp(84px,10vw,124px);height:auto;
  filter:drop-shadow(0 0 42px rgba(139,92,246,.62));
}
/* pulse and breathe live on separate elements so they cannot fight
   over the same transform when a glyph lands */
#coreMark.pulse{animation:pulse .42s cubic-bezier(.2,.9,.3,1.4)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}

.hero-copy{position:relative;z-index:3;max-width:640px}
@media(min-width:1100px){.hero-copy{max-width:min(600px,49%)}}
/* Glyphs wander behind the copy and cost it contrast. A soft scrim keeps
   the text readable while the swarm still shows through around it.
   Gentle on desktop, firmer when the copy and the swarm are stacked. */
.hero-copy::before{
  content:"";position:absolute;inset:-36px -30px -52px;z-index:-1;
  background:radial-gradient(118% 76% at 24% 54%,
    rgba(10,14,22,.86) 0%,rgba(10,14,22,.58) 44%,rgba(10,14,22,0) 78%);
}
@media(max-width:820px){
  .hero-copy::before{
    inset:-30px -22px -44px;
    background:radial-gradient(130% 78% at 34% 62%,
      rgba(10,14,22,.94) 0%,rgba(10,14,22,.72) 48%,rgba(10,14,22,0) 84%);
  }
}
.hero-cta{display:flex;align-items:center;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero-foot{
  display:flex;align-items:center;gap:13px;margin-top:34px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);
}
.hero-foot i{width:3px;height:3px;border-radius:50%;background:var(--line);display:block}

.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:1px;height:46px;background:linear-gradient(var(--line),transparent);overflow:hidden}
.scroll-hint span{position:absolute;inset:0;background:var(--accent-2);
  animation:trickle 2.4s ease-in-out infinite}
@keyframes trickle{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* a soft wash behind the field so the hero is never flat black */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 40% at 76% 46%,rgba(139,92,246,.17),transparent 70%),
    radial-gradient(38% 32% at 22% 24%,rgba(99,102,241,.10),transparent 72%);
}

/* ── secondary pages ────────────────────────────────────── */
.page-sub{background:
  radial-gradient(70% 42% at 78% -6%,rgba(168,85,247,.16),transparent 66%),
  radial-gradient(60% 38% at 6% -4%,rgba(99,102,241,.14),transparent 70%),
  var(--bg);
  background-repeat:no-repeat;
}
.nav-links a.here{color:var(--txt)}
.sub-head{padding:clamp(140px,17vh,196px) var(--gut) clamp(46px,7vh,76px)}
.sub-h1{font-size:clamp(40px,6.4vw,84px);font-weight:700;letter-spacing:-.045em;line-height:1.0}
.sub-h1 em{
  background:linear-gradient(104deg,var(--hot) 0%,var(--accent-2) 55%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub-head .lede{margin-top:28px}
/* the header already carries its own breathing room, so the band that
   follows it does not need a second helping on top */
/* the band straight after a page header is a continuation, not a new
   section, so it gets no dividing rule */
.sub-head + .band{padding-top:clamp(18px,3vh,42px)}
.sub-head + .band::before{display:none}
.sub-head + .band .price-card{margin-top:0}

.why{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
@media(max-width:820px){.why{grid-template-columns:1fr}}
.why-card{border:1px solid var(--line);border-radius:16px;padding:26px 28px;background:var(--bg-2)}
.why-card p:not(.tag){color:var(--dim);font-size:15.5px}

.inline-link{color:var(--hot);border-bottom:1px solid rgba(196,181,253,.35)}
.inline-link:hover{border-bottom-color:var(--hot)}

/* ── bands ──────────────────────────────────────────────── */
.band{position:relative;padding:clamp(84px,11vw,152px) var(--gut)}
.band::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,#ffffff 0%,var(--accent-2) 100%);
}
.band.alt{background:var(--bg-2)}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap.narrow{max-width:800px}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:34px;
  color:var(--dim);max-width:900px}
@media(max-width:760px){.cols{grid-template-columns:1fr;gap:20px}}

.ledger{list-style:none;margin-top:46px;border-top:1px solid var(--line-soft)}
.ledger li{padding:19px 0;border-bottom:1px solid var(--line-soft);
  color:var(--dim);font-size:15.5px}
.ledger b{color:var(--txt);font-weight:600}
.ledger.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;border-top:none;margin-top:54px}
.ledger.three li{border-top:1px solid var(--line-soft);border-bottom:none}
@media(max-width:820px){.ledger.three{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:52px;background:var(--line-soft);border:1px solid var(--line-soft)}
.steps li{background:var(--bg);padding:34px 30px 38px}
.band.alt .steps li{background:var(--bg-2)}
.step-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--accent-2)}
.steps h3{margin:16px 0 11px}
.steps p{color:var(--dim);font-size:15px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* platforms */
.platforms{margin-top:58px}
.platforms ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.platforms li{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:var(--dim);
  transition:border-color .2s,color .2s;
}
.platforms li:hover{border-color:var(--accent);color:var(--txt)}

/* ── credit studio ──────────────────────────────────────── */
.studio{
  display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(30px,5vw,68px);
  margin-top:58px;align-items:start;
}
@media(max-width:900px){.studio{grid-template-columns:1fr}}

.studio-stage{display:flex;justify-content:center}
.phone{
  position:relative;width:100%;max-width:330px;aspect-ratio:9/16;
  border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(168deg,#4c2a72 0%,#2b2f63 42%,#16213c 100%);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.9);
}
.phone-sky{position:absolute;inset:0;
  background:radial-gradient(70% 44% at 28% 16%,rgba(255,255,255,.14),transparent 62%)}

.credit-bar{
  position:absolute;left:16px;bottom:16px;z-index:3;
  display:flex;align-items:center;gap:7px;
  padding:6px 11px 6px 9px;border-radius:7px;
  background:rgba(0,0,0,.8);color:#fff;
  font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:-.01em;
  transition:top .42s cubic-bezier(.3,.9,.3,1.1),bottom .42s cubic-bezier(.3,.9,.3,1.1),
             background .28s,color .28s;
}
.credit-bar svg{width:15px;height:15px;flex:none;color:#e1306c}
.credit-bar.light{background:rgba(255,255,255,.95);color:#0b0b0b}
.credit-bar.light svg{color:#c1306c}
.credit-bar.brand{background:linear-gradient(118deg,var(--accent),var(--accent-2))}
.credit-bar.brand svg{color:#fff}
.credit-bar.pos-top{top:16px;bottom:auto}
.credit-bar.pos-centre{top:50%;bottom:auto;transform:translateY(-50%)}
.credit-bar.pos-bottom{bottom:16px;top:auto}

.stamp{
  position:absolute;z-index:4;width:44%;color:#fff;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));
  transition:opacity .5s ease,top .4s,left .4s,right .4s,bottom .4s,transform .4s;
}
.stamp svg{width:100%;height:auto}
.stamp.fading{animation:stampFade 4s ease-in-out infinite}
@keyframes stampFade{0%,12%{opacity:1}30%,92%{opacity:0}100%{opacity:1}}

.studio-controls{display:grid;gap:30px;align-content:start}
.ctl-label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);margin-bottom:11px}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{
  font-family:var(--body);font-size:14px;font-weight:500;
  padding:10px 17px;background:transparent;color:var(--dim);
  border:none;border-right:1px solid var(--line);cursor:pointer;transition:.18s;
}
.seg button:last-child{border-right:none}
.seg button:hover{color:var(--txt);background:rgba(99,102,241,.1)}
.seg button.on{background:linear-gradient(118deg,var(--accent),var(--accent-2));color:#fff}

.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:126px}
.grid9 button{aspect-ratio:1;border:1px solid var(--line);background:var(--bg);
  border-radius:6px;cursor:pointer;padding:0;transition:.16s}
.band.alt .grid9 button{background:var(--bg-2)}
.grid9 button:hover{border-color:var(--accent)}
.grid9 button.on{background:linear-gradient(118deg,var(--accent),var(--accent-2));border-color:transparent}

.switch{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:14.5px;cursor:pointer}
.switch input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}

/* ── scribe ─────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);margin-top:44px}
.split p{color:var(--dim);margin-bottom:18px;max-width:52ch}
.split em{color:var(--txt);font-weight:600}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.keycard{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--card)}
.keys{list-style:none;display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.keys li{display:flex;justify-content:space-between;align-items:center;
  background:var(--card);padding:14px 16px;font-size:15px}
.keys i{font-family:var(--mono);font-style:normal;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* ── privacy ────────────────────────────────────────────── */
.hairline{height:1px;background:linear-gradient(90deg,var(--accent),transparent);margin:44px 0 0}

/* ── price ──────────────────────────────────────────────── */
.price-card{
  margin-top:52px;border:1px solid var(--line);border-radius:20px;
  background:var(--card);overflow:hidden;
  box-shadow:0 40px 100px -50px rgba(99,102,241,.5);
}
.price-head{
  display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  padding:38px 38px 34px;border-bottom:1px solid var(--line-soft);
  background:radial-gradient(90% 150% at 0% 0%,rgba(99,102,241,.14),transparent 62%);
}
.amount{font-family:var(--display);font-size:clamp(50px,7.5vw,78px);
  font-weight:700;letter-spacing:-.05em;line-height:1;margin-top:6px}
.cur{font-size:.5em;vertical-align:.42em;color:var(--dim);margin-right:2px}
.once{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:12px}

.includes{list-style:none;padding:30px 38px 12px;display:grid;gap:13px}
.includes li{position:relative;padding-left:27px;color:var(--dim);font-size:15.5px}
.includes li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:6px;
  border-left:2px solid var(--accent-2);border-bottom:2px solid var(--accent-2);
  transform:rotate(-45deg);
}
.price-card .fine{padding:0 38px 34px;margin-top:14px}
@media(max-width:640px){
  .price-head,.includes,.price-card .fine{padding-left:24px;padding-right:24px}
}

/* ── downloads ──────────────────────────────────────────── */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
@media(max-width:820px){.dl{grid-template-columns:1fr}}
.dl-card{
  display:grid;gap:7px;padding:30px 28px;border-radius:15px;
  border:1px solid var(--line);background:var(--card);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2),border-color .2s,box-shadow .2s;
}
.dl-card:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 24px 50px -28px rgba(99,102,241,.8)}
.dl-os{font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.03em}
.dl-meta{font-size:13.5px;color:var(--faint)}
.dl-go{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-2);margin-top:10px}
.dl-card.ghost{background:transparent;border-style:dashed}

/* ── faq ────────────────────────────────────────────────── */
.faq{margin-top:46px;border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:23px 40px 23px 0;position:relative;
  font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--hot)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{color:var(--dim);font-size:15.5px;padding-bottom:26px;max-width:66ch}

/* ── footer ─────────────────────────────────────────────── */
.foot{padding:56px var(--gut) 72px;border-top:1px solid var(--line-soft);background:var(--bg)}
.foot .wrap{display:grid;gap:11px;justify-items:start}
.foot p{color:var(--faint);font-size:14px}

/* ── card lighting ──────────────────────────────────────────
   Cards track the pointer: a soft spotlight follows the cursor across
   the surface, the border picks up the accent, and the whole card tilts
   a few degrees toward it. The class is applied by studio.js, so a card
   without JS is simply a flat card rather than a broken one.
   ───────────────────────────────────────────────────────── */
.card-fx{
  position:relative;isolation:isolate;
  transition:transform .32s cubic-bezier(.2,.8,.3,1.1),
             border-color .3s, box-shadow .35s;
  will-change:transform;
}
.card-fx::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),
    rgba(139,92,246,.20), rgba(99,102,241,.08) 38%, transparent 66%);
  opacity:0;transition:opacity .38s ease;pointer-events:none;
}
.card-fx:hover::before{opacity:1}

/* a thin light that rides the cursor around the edge */
.card-fx::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
    rgba(196,181,253,.85), rgba(168,85,247,.35) 34%, transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .38s ease;
}
.card-fx:hover::after{opacity:1}
.card-fx:hover{box-shadow:0 28px 60px -34px rgba(124,82,237,.85)}

/* the price card gets a slow sheen of its own, it is the money object */
.price-card{position:relative;overflow:hidden}
.price-card .price-head::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(104deg,transparent,rgba(196,181,253,.10),transparent);
  animation:sheen 7s ease-in-out infinite;pointer-events:none;
}
@keyframes sheen{0%{left:-60%}55%,100%{left:130%}}

/* platform pills catch a little light too. isolation + z-index keeps the
   wash behind the label; a positioned ::before would otherwise paint
   over the text it is meant to sit under. */
.platforms li{position:relative;overflow:hidden;isolation:isolate}
.platforms li::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(99,102,241,.26),rgba(168,85,247,.26));
  opacity:0;transition:opacity .3s;
}
.platforms li:hover::before{opacity:1}

/* ── entrance choreography ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-core img,.scroll-hint span,.stamp.fading{animation:none}
  .btn:hover,.dl-card:hover{transform:none}
}