/* =========================================================
   yora.lol
   Tokens, glass treatment and type scale taken from the
   aora.lol status page stylesheet.
   ========================================================= */

:root{
  --bg:#080808;
  --text:#f5f5f5;
  --muted:rgba(245,245,245,.48);
  --faint:rgba(245,245,245,.22);

  --s1:rgba(255,255,255,.03);
  --s2:rgba(255,255,255,.06);
  --s3:rgba(255,255,255,.09);
  --b1:rgba(255,255,255,.06);
  --b2:rgba(255,255,255,.11);
  --b3:rgba(255,255,255,.2);

  /* status_glass */
  --glass-top:rgba(255,255,255,.085);
  --glass-bottom:rgba(255,255,255,.034);
  --glass-border:rgba(255,255,255,.13);
  --divider:rgba(255,255,255,.065);
  --gmuted:rgba(255,255,255,.46);

  --display:"Chillax",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:"Satoshi",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --r:10px;
  --rl:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease2:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x lives on html: putting it on the flex body makes body
   its own scroll container and breaks window scrolling + anchors */
html{ scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  background:var(--bg);
  color:#fff;
  font-family:var(--sans);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.lock{ overflow:hidden; }

h1,h2,h3,h4{ margin:0; }
p{ margin:0; }
ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
::selection{ background:rgba(255,255,255,.22); color:#fff; }

::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); }

/* =========================================================
   Ambient background
   aora blurs a looping video 22px behind a noise + 50% black
   scrim. Same scrim here, with CSS light forms in place of
   the video.
   ========================================================= */
.site-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; background:var(--bg);
}
/* the whole light field slowly counter-rotates so no two passes
   over the page ever look quite the same */
.site-bg__lights{
  position:absolute; inset:-25%;
  filter:blur(26px);
  animation:field 120s linear infinite;
}
@keyframes field{ to{ transform:rotate(360deg) } }

.site-bg__lights i{
  position:absolute; display:block; border-radius:50%;
  will-change:transform,opacity; backface-visibility:hidden;
}
.l1{ width:74vw; height:56vw; left:-14vw; top:-20vw;
     background:radial-gradient(circle at 45% 55%,rgba(255,255,255,.55),rgba(255,255,255,.18) 46%,transparent 72%);
     animation:drift1 34s ease-in-out infinite, breathe 17s ease-in-out infinite; }
.l2{ width:60vw; height:48vw; right:-14vw; top:6vw;
     background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.34),transparent 68%);
     animation:drift2 43s ease-in-out infinite, breathe 21s ease-in-out infinite -6s; }
.l3{ width:96vw; height:48vw; left:2vw; bottom:-18vw;
     background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.64),rgba(255,255,255,.18) 48%,transparent 74%);
     animation:drift3 38s ease-in-out infinite, breathe 19s ease-in-out infinite -3s; }
.l4{ width:76vw; height:52vw; left:12vw; top:14vw;
     background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.62),rgba(255,255,255,.22) 44%,transparent 72%);
     animation:drift4 31s ease-in-out infinite, breathe 23s ease-in-out infinite -11s; }
.l5{ width:46vw; height:60vw; left:-10vw; top:20vw;
     background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.52),transparent 70%);
     animation:drift5 47s ease-in-out infinite, breathe 15s ease-in-out infinite -8s; }
.l6{ width:38vw; height:38vw; right:4vw; bottom:2vw;
     background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.44),transparent 68%);
     animation:drift6 36s ease-in-out infinite, breathe 25s ease-in-out infinite -14s; }
.l7{ width:30vw; height:44vw; left:38vw; top:-8vw;
     background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.30),transparent 70%);
     animation:drift7 52s ease-in-out infinite, breathe 13s ease-in-out infinite -5s; }

/* multi-waypoint paths so the motion never reads as a ping-pong */
@keyframes drift1{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  28%{ transform:translate3d(8vw,5vw,0) scale(1.14) }
  55%{ transform:translate3d(3vw,11vw,0) scale(1.05) }
  78%{ transform:translate3d(-5vw,4vw,0) scale(1.18) }
}
@keyframes drift2{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  33%{ transform:translate3d(-9vw,7vw,0) scale(1.12) }
  62%{ transform:translate3d(-2vw,14vw,0) scale(1.02) }
  84%{ transform:translate3d(5vw,6vw,0) scale(1.16) }
}
@keyframes drift3{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  30%{ transform:translate3d(-7vw,-5vw,0) scale(1.13) }
  58%{ transform:translate3d(4vw,-9vw,0) scale(1.04) }
  80%{ transform:translate3d(9vw,-2vw,0) scale(1.17) }
}
@keyframes drift4{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  26%{ transform:translate3d(7vw,-7vw,0) scale(1.2) }
  54%{ transform:translate3d(-4vw,-11vw,0) scale(1.06) }
  79%{ transform:translate3d(-9vw,-3vw,0) scale(1.15) }
}
@keyframes drift5{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  35%{ transform:translate3d(10vw,-6vw,0) scale(1.1) }
  68%{ transform:translate3d(4vw,8vw,0) scale(1.22) }
}
@keyframes drift6{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  40%{ transform:translate3d(-11vw,-8vw,0) scale(1.18) }
  72%{ transform:translate3d(-3vw,-14vw,0) scale(1.04) }
}
@keyframes drift7{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  45%{ transform:translate3d(-8vw,12vw,0) scale(1.24) }
  75%{ transform:translate3d(7vw,6vw,0) scale(1.08) }
}
@keyframes breathe{ 0%,100%{ opacity:.62 } 50%{ opacity:1 } }

/* slow conic sheen rotating over the field */
.site-bg__sweep{
  position:absolute; inset:-60%;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,255,255,.075) 55deg, transparent 130deg,
    transparent 210deg, rgba(255,255,255,.055) 268deg, transparent 340deg);
  filter:blur(56px);
  animation:sweepSpin 74s linear infinite;
}
@keyframes sweepSpin{ to{ transform:rotate(360deg) } }

/* a soft light bar that drifts across, like a lens pass */
.site-bg__beam{
  position:absolute; top:-30%; left:-40%; width:55%; height:170%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);
  filter:blur(48px);
  transform:rotate(14deg);
  animation:beam 26s ease-in-out infinite;
}
@keyframes beam{
  0%,100%{ transform:translateX(0) rotate(14deg); opacity:0 }
  15%{ opacity:.75 }
  50%{ transform:translateX(150%) rotate(14deg); opacity:.9 }
  85%{ opacity:.5 }
}

/* aora's exact grain + scrim */
.site-bg::after{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
             rgba(0,0,0,.36);
  background-size:160px 160px,auto;
  background-blend-mode:overlay,normal;
}

/* =========================================================
   Boot
   ========================================================= */
.boot{
  position:fixed; inset:0; z-index:900;
  display:grid; place-items:center; background:var(--bg);
  transition:opacity .65s var(--ease), visibility .65s;
}
.boot.done{ opacity:0; visibility:hidden; }
.boot__inner{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.boot__mark{ width:42px; height:42px; color:var(--text); }
.boot__mark svg{ width:100%; height:100%; animation:markIn .9s var(--ease) both, spin 9s linear .9s infinite; }
@keyframes markIn{ from{ opacity:0; transform:scale(.6) rotate(-90deg) } }
@keyframes spin{ to{ transform:rotate(360deg) } }
.boot__word{
  font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.045em;
  opacity:0; animation:fadeUp .7s var(--ease) .25s forwards;
}
.boot__word b{ font-weight:600; color:var(--faint); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.boot__bar{ width:150px; height:1px; background:rgba(255,255,255,.1); overflow:hidden; }
.boot__bar i{ display:block; height:100%; width:0; background:var(--text); transition:width .28s var(--ease); }

/* =========================================================
   Navbar — aora's exact capsule
   ========================================================= */
.navbar{
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:500;
  width:calc(100% - 48px); max-width:920px; height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px 10px 22px;
  border-radius:100px;
  background:rgba(255,255,255,.012);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid transparent; background-clip:padding-box;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(255,255,255,.05),
    0 12px 48px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.07);
}
.navbar__links{ display:flex; align-items:center; gap:28px; padding-right:14px; }
.navbar__links a{ font-size:14px; color:var(--muted); transition:color .3s var(--ease); }
.navbar__links a:hover{ color:var(--text); }

.logo{ display:inline-flex; align-items:center; gap:9px; }
.logo__mark{ width:23px; height:23px; color:var(--text); transition:transform .7s var(--ease); }
.logo:hover .logo__mark{ transform:rotate(90deg); }
.logo__word{ font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-.05em; }
.logo__word b{ font-weight:600; color:var(--faint); }
.logo--lg .logo__mark{ width:28px; height:28px; }
.logo--lg .logo__word{ font-size:22px; }

/* =========================================================
   Main — aora's status_main metrics
   ========================================================= */
.main{
  position:relative; z-index:1; flex:1;
  width:min(920px,calc(100% - 36px)); margin:0 auto;
  padding:158px 0 96px;
}

[data-r]{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-r].in{ opacity:1; transform:none; }

/* ---- hero ---- */
.hero{ width:min(640px,100%); margin:0 auto 42px; text-align:center; }
.hero__logo{ display:inline-flex; align-items:center; gap:9px; margin-bottom:21px; }
.hero__mark{ width:27px; height:27px; color:var(--text); }
.hero__word{ font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.05em; }
.hero__word b{ font-weight:600; color:var(--faint); }

.hero h1{
  font-family:var(--display);
  font-size:clamp(3.7rem,9vw,6.2rem);
  font-weight:600;
  line-height:.86;
  letter-spacing:-.06em;
  /* slow highlight travelling across the letterforms */
  background:linear-gradient(100deg,
    #fff 0%, #fff 32%, rgba(255,255,255,.62) 50%, #fff 68%, #fff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:sheen 8s ease-in-out infinite;
  /* background-clip:text only paints inside the element box, and a .86
     line-height puts the "y" descender outside it. Grow the paint box,
     then pull it back so surrounding layout is untouched. */
  padding-top:.10em;    margin-top:-.10em;
  padding-bottom:.20em; margin-bottom:-.20em;
}
@keyframes sheen{
  0%,100%{ background-position:120% 0 }
  50%{ background-position:-20% 0 }
}
.hero p{
  margin:18px auto 0; max-width:430px;
  color:var(--gmuted);
  font-size:.88rem; font-weight:450; line-height:1.55;
}

/* =========================================================
   Glass panel — aora's status_glass
   ========================================================= */
.glass{
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--glass-border);
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));
  backdrop-filter:blur(34px) saturate(145%);
  -webkit-backdrop-filter:blur(34px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 22px 58px rgba(0,0,0,.28);
}
.glass::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(110deg,rgba(255,255,255,.055),transparent 22%,transparent 76%,rgba(255,255,255,.026));
  pointer-events:none;
}

/* =========================================================
   Drag stage
   ========================================================= */
.stage{
  display:flex; flex-direction:column; align-items:center;
  padding:30px 24px 34px; border-radius:28px;
}

/* ---- browser mock ---- */
.chrome{
  width:min(560px,100%);
  border-radius:14px 14px 12px 12px; overflow:hidden;
  background:rgba(5,5,5,.5);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.3);
}

/* tab strip */
.chrome__tabs{
  display:flex; align-items:flex-end; gap:5px;
  padding:7px 9px 0; background:rgba(255,255,255,.028);
}
.ctab{
  display:inline-flex; align-items:center; gap:7px;
  height:29px; padding:0 10px; border-radius:8px 8px 0 0;
  background:rgba(255,255,255,.10);
  font-size:11px; color:rgba(255,255,255,.86); white-space:nowrap;
}
.ctab--dim{ background:rgba(255,255,255,.035); color:rgba(255,255,255,.45); }
.cfav{ width:11px; height:11px; border-radius:3px; background:rgba(255,255,255,.85); flex:0 0 auto; }
.cfav--2{ background:rgba(255,255,255,.32); }
.cclose{ width:7px; height:7px; border-radius:2px; background:rgba(255,255,255,.3); }
.cplus{ width:16px; height:16px; margin:0 0 6px 3px; border-radius:4px; background:rgba(255,255,255,.09); }

/* omnibox */
.chrome__omni{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; background:rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.cnav{ display:inline-flex; align-items:center; gap:7px; }
.cnav i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.2); }
.curl{
  flex:1; display:inline-flex; align-items:center; gap:7px;
  height:24px; padding:0 11px; border-radius:99px;
  background:rgba(0,0,0,.36); border:1px solid rgba(255,255,255,.06);
  font-size:10.5px; color:rgba(255,255,255,.6);
}
.clock{ width:7px; height:8px; border-radius:2px; background:rgba(255,255,255,.42); flex:0 0 auto; }
.ccaret{
  width:1px; height:11px; margin-left:1px;
  background:rgba(255,255,255,.75);
  animation:caret 1.1s step-end infinite;
}
@keyframes caret{ 50%{ opacity:0 } }

/* the mock browser breathes very slightly so the panel feels live */
.chrome{ animation:chromeFloat 9s ease-in-out infinite; }
@keyframes chromeFloat{ 50%{ transform:translateY(-3px) } }

/* active tab keeps a faint pulse */
.ctab:not(.ctab--dim){ animation:tabGlow 5s ease-in-out infinite; }
@keyframes tabGlow{ 50%{ background:rgba(255,255,255,.16) } }

/* bookmark rows fade up in sequence when the panel appears.
   done with transitions, not animations, so the drop-target pulse
   and skeleton shimmer on these same elements keep running */
.chrome__marks .bmk{
  opacity:0; transform:translateY(-5px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:var(--bd,0ms);
}
.stage.in .chrome__marks .bmk{ opacity:1; transform:none; }
.chrome__marks .bmk:nth-child(1){ --bd:300ms }
.chrome__marks .bmk:nth-child(2){ --bd:380ms }
.chrome__marks .bmk:nth-child(3){ --bd:460ms }
.chrome__marks .bmk:nth-child(4){ --bd:540ms }
.chrome__marks .bmk:nth-child(5){ --bd:620ms }
.chrome__marks .bmk:nth-child(6){ --bd:700ms }

/* the bookmarks bar itself */
.chrome__marks{
  display:flex; align-items:center; gap:5px;
  padding:7px 8px; background:rgba(255,255,255,.022);
  overflow:hidden;
}
.bmk{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 9px; border-radius:6px;
  font-size:11px; color:rgba(255,255,255,.68); white-space:nowrap;
}
.bfav{ width:11px; height:11px; border-radius:3px; background:rgba(255,255,255,.75); flex:0 0 auto; }
.bfav--b{ background:rgba(255,255,255,.45); }
.bfav--c{ background:rgba(255,255,255,.95); }
.bmk--drop{
  padding:0 13px; color:rgba(255,255,255,.9);
  border:1px dashed rgba(255,255,255,.45);
  animation:target 2.4s ease-in-out infinite;
}
@keyframes target{
  50%{ border-color:#fff; background:rgba(255,255,255,.14); box-shadow:0 0 22px -4px rgba(255,255,255,.4); }
}
.bmk--skel{
  width:52px; padding:0; height:13px; border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.16),rgba(255,255,255,.07));
  background-size:220% 100%;
  animation:shimmer 1.9s linear infinite;
}
.bmk--skel2{ width:36px; animation-delay:.5s; }
@keyframes shimmer{ to{ background-position:-220% 0 } }

.chrome__cap{
  margin-top:12px;
  font-size:11.5px; color:var(--faint); text-align:center;
}

.stage__arrow{ width:52px; height:72px; margin:4px 0 2px; }
.stage__arrow .ln,.stage__arrow .hd{
  fill:none; stroke:rgba(255,255,255,.42); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.stage__arrow .ln{ stroke-dasharray:4 6; animation:march 1.2s linear infinite; }
@keyframes march{ to{ stroke-dashoffset:-20 } }
.stage__arrow .hd{ animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-4px); opacity:.6 } }

/* aora's btn-primary */
.drag{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px 14px 18px;
  border:0; border-radius:100px;
  background:#fff; color:#000;
  font-family:var(--display);
  font-size:15px; font-weight:600; letter-spacing:-.03em;
  cursor:grab;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 4px 24px 0 rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  -webkit-user-drag:element;
}
.drag:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.3),
    0 8px 34px 0 rgba(255,255,255,.26),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.drag:active{ cursor:grabbing; transform:scale(.985); }
.drag.dragging{ opacity:.5; }
.drag{ position:relative; overflow:hidden; animation:lift 4.5s ease-in-out infinite; }
@keyframes lift{ 50%{ transform:translateY(-4px) } }
.drag:hover{ animation-play-state:paused; }
.drag__shine{
  position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 32%,rgba(0,0,0,.10) 50%,transparent 68%);
  transform:translateX(-130%);
  animation:dragShine 4.5s var(--ease) infinite;
  pointer-events:none;
}
@keyframes dragShine{ 0%,58%{ transform:translateX(-130%) } 100%{ transform:translateX(130%) } }
.drag__mark,.drag__grip,.drag__label{ position:relative; z-index:1; }
.drag__mark{ transition:transform .6s var(--ease); }
.drag:hover .drag__mark{ transform:rotate(90deg); }
.drag__mark{ width:19px; height:19px; color:#000; }
.drag__grip{ display:grid; grid-template-columns:repeat(2,3px); gap:3px; opacity:.28; }
.drag__grip i{ width:3px; height:3px; border-radius:50%; background:#000; }

.hint{ margin-top:18px; font-size:12.5px; color:var(--faint); text-align:center; }
.hint.shake{ animation:shake .5s var(--ease); color:#fff; }
@keyframes shake{ 25%{ transform:translateX(-5px) } 50%{ transform:translateX(5px) } 75%{ transform:translateX(-3px) } }

/* =========================================================
   Steps — aora's services panel
   ========================================================= */
.steps{ margin-top:22px; padding:22px; border-radius:28px; }
.steps__head{
  display:flex; align-items:center; justify-content:center;
  padding:4px 4px 24px; text-align:center;
}
.steps__head h2{
  font-family:var(--display); font-size:2rem; font-weight:600;
  line-height:1; letter-spacing:-.035em;
}
.steps__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.stepcard{
  overflow:hidden; padding:18px 18px 20px;
  border:1px solid rgba(255,255,255,.09); border-radius:20px;
  background:rgba(5,5,5,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(0,0,0,.12);
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.stepcard:hover{
  background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.18);
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(0,0,0,.22);
}
.stepcard::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  opacity:0; transition:opacity .5s var(--ease);
}
.stepcard{ position:relative; }
.stepcard:hover::after{ opacity:1; }

/* staggered entrance once the panel reveals */
.steps.in .stepcard{ animation:cardIn .75s var(--ease) both; }
.steps.in .stepcard:nth-child(1){ animation-delay:.10s }
.steps.in .stepcard:nth-child(2){ animation-delay:.20s }
.steps.in .stepcard:nth-child(3){ animation-delay:.30s }
@keyframes cardIn{ from{ opacity:0; transform:translateY(20px) scale(.985) } }
.stepcard__n{
  display:block; margin-bottom:12px;
  font-family:var(--display); font-size:12.5px; font-weight:600; color:rgba(255,255,255,.34);
}
.stepcard h3{
  color:rgba(255,255,255,.94);
  font-family:var(--display); font-size:.98rem; font-weight:600; letter-spacing:-.02em; line-height:1.35;
}
.stepcard p{ margin-top:9px; font-size:.76rem; line-height:1.6; color:rgba(255,255,255,.5); }
.stepcard strong{ color:#fff; font-weight:500; }

.keys{ display:inline-flex; align-items:center; gap:4px; margin:13px 12px 0 0; }
.keys em{ font-style:normal; margin-left:5px; font-size:10.5px; color:rgba(255,255,255,.3); }
kbd{
  display:inline-grid; place-items:center; min-width:24px; height:23px; padding:0 6px;
  border-radius:8px;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font-family:var(--sans); font-size:10.5px; color:rgba(255,255,255,.72); line-height:1;
}

/* =========================================================
   Footer
   ========================================================= */
.ft{
  position:relative; z-index:1; overflow:hidden;
  border-top:1px solid var(--b1);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%);
}
.ft__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr;
  width:min(1180px,calc(100% - 36px)); margin:0 auto;
}
.ft__brand{ padding:44px 40px 48px 0; }
.ft__brand > p{
  max-width:250px; margin-top:20px;
  font-size:13px; line-height:1.7; color:var(--muted);
}
.ft__social{ display:flex; gap:10px; margin-top:32px; }
.ft__social a{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  color:var(--faint);
  transition:color .3s var(--ease), transform .4s var(--ease);
}
.ft__social a svg{ width:20px; height:20px; }
.ft__social a:hover{ color:#fff; transform:translateY(-2px); }

.ft__col{ padding:44px 28px 48px; border-left:1px solid var(--b1); }
.ft__col h3{
  margin-bottom:26px; padding-bottom:14px;
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7);
  border-bottom:1px solid var(--b1);
}
.ft__col a{
  display:block; padding:6px 0; width:fit-content;
  font-size:13.5px; color:var(--faint);
  transition:color .3s var(--ease), transform .4s var(--ease);
}
.ft__col a:hover{ color:#fff; transform:translateX(3px); }

.ft__bar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  width:min(1180px,calc(100% - 36px)); margin:0 auto;
  padding:20px 0 26px; border-top:1px solid var(--b1);
  font-size:12.5px; color:var(--faint);
}
.ft__status{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px 7px 11px; border-radius:100px;
  background:rgba(74,222,128,.075); border:1px solid rgba(74,222,128,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.16);
  font-size:12.5px; color:#9feab0;
}
.ft__status i{
  width:7px; height:7px; border-radius:50%; background:#6ee78e;
  box-shadow:0 0 0 3px rgba(110,231,142,.14);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(110,231,142,0) } }

.ft__mark{
  position:absolute; left:50%; bottom:-.40em; z-index:1;
  transform:translateX(-50%);
  font-family:var(--display); font-weight:600; letter-spacing:-.06em;
  font-size:clamp(90px,17vw,230px); line-height:1;
  color:rgba(255,255,255,.035);
  white-space:nowrap; pointer-events:none; user-select:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .steps__grid{ grid-template-columns:1fr; }
  .ft__grid{ grid-template-columns:1fr 1fr; }
  .ft__brand{ grid-column:1 / -1; padding:36px 0 30px; }
  .ft__col{ padding:28px 24px 32px; }
  .ft__col:nth-child(2){ border-left:none; }
  .ft__col:nth-child(even){ border-left:1px solid var(--b1); }
}
@media (max-width:780px){ .main{ padding-top:136px; } }
@media (max-width:620px){
  .main{ width:min(100% - 24px,920px); padding:124px 0 76px; }
  .hero{ margin-bottom:34px; }
  .hero h1{ font-size:clamp(3.3rem,17vw,5rem); }
  .stage{ padding:22px 15px 26px; border-radius:22px; }
  .steps{ padding:15px; border-radius:22px; }
  .steps__head{ padding:2px 3px 16px; }
  .steps__head h2{ font-size:1.6rem; }
  .stepcard{ border-radius:17px; }
  .navbar{ width:calc(100% - 24px); height:56px; padding-left:16px; }
  .navbar__links{ gap:16px; padding-right:6px; }
  .navbar__links a{ font-size:12.5px; }
  .chrome__marks{ gap:4px; }
  .bmk{ padding:0 7px; font-size:10px; }
  .ft__grid{ grid-template-columns:1fr; }
  .ft__col{ border-left:none !important; border-top:1px solid var(--b1); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}