/* ============================================================
   P POWER — base
   dark luxury: glass, chrome, pavé, smoke
   ============================================================ */

:root{
  /* --- the room ------------------------------------------------------ */
  --void:#050508;
  --night:#0a0a0f;
  --slab:#101018;
  --smoke-1:rgba(255,255,255,.05);
  --smoke-2:rgba(255,255,255,.09);
  --chrome-1:#ffffff;
  --chrome-2:#c8d2dc;
  --chrome-3:#6b7683;
  --chrome-4:#eef4fa;
  --text:#eef1f5;
  --text-dim:#9aa3ad;
  --text-faint:#808a96;

  /* --- colourway (default: Emerald Ice) ------------------------------- */
  --accent:#4ef09a;
  --accent-2:#a06bff;
  --accent-ink:#04120a;
  --glow-a:rgba(78,240,154,.30);
  --glow-b:rgba(160,107,255,.26);

  /* --- type ------------------------------------------------------------ */
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --sans:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Bodoni Moda',Didot,Georgia,serif;

  --step--2:clamp(.68rem,.66rem + .1vw,.74rem);
  --step--1:clamp(.8rem,.77rem + .16vw,.88rem);
  --step-0:clamp(.96rem,.93rem + .18vw,1.05rem);
  --step-1:clamp(1.14rem,1.06rem + .38vw,1.4rem);
  --step-2:clamp(1.45rem,1.2rem + 1.1vw,2.3rem);
  --step-3:clamp(1.9rem,1.4rem + 2.1vw,3.3rem);
  --step-4:clamp(2.6rem,1.5rem + 4.6vw,5.6rem);
  --step-5:clamp(3.2rem,1.3rem + 8.2vw,9.5rem);

  /* --- shape ------------------------------------------------------------ */
  --gut:clamp(1rem,3.4vw,2.4rem);
  --max:1380px;
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:38px;
  --glass:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 46%,rgba(255,255,255,.05));
  --edge:1px solid rgba(255,255,255,.12);
  --lift:0 30px 70px -34px rgba(0,0,0,1),0 1px 0 rgba(255,255,255,.13) inset;
  --lift-glow:0 30px 70px -30px var(--glow-a),0 1px 0 rgba(255,255,255,.18) inset;
  --ease:cubic-bezier(.2,.7,.3,1);
}

[data-theme="ruby"]{
  --accent:#ffc24d;--accent-2:#ff3b5c;--accent-ink:#1a0703;
  --glow-a:rgba(255,194,77,.32);--glow-b:rgba(255,59,92,.28);
}
[data-theme="ice"]{
  --accent:#8fd8ff;--accent-2:#a95cff;--accent-ink:#04101a;
  --glow-a:rgba(143,216,255,.32);--glow-b:rgba(169,92,255,.30);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:.88;letter-spacing:0;text-transform:uppercase}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- the atmosphere ------------------------------------------- */
.smoke{position:fixed;inset:-6%;z-index:-2;pointer-events:none;overflow:hidden;background:var(--void);will-change:transform}
.smoke i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.72;mix-blend-mode:screen}
.smoke i:nth-child(1){width:60vw;height:60vw;left:-14vw;top:-10vw;background:radial-gradient(circle,var(--glow-a),transparent 68%);animation:drift1 26s ease-in-out infinite alternate}
.smoke i:nth-child(2){width:52vw;height:52vw;right:-12vw;top:22vh;background:radial-gradient(circle,var(--glow-b),transparent 68%);animation:drift2 32s ease-in-out infinite alternate}
.smoke i:nth-child(3){width:46vw;height:46vw;left:24vw;bottom:-16vw;background:radial-gradient(circle,var(--glow-a),transparent 70%);animation:drift3 38s ease-in-out infinite alternate}
.smoke i:nth-child(4){width:40vw;height:40vw;right:14vw;bottom:-8vw;background:radial-gradient(circle,var(--glow-b),transparent 70%);animation:drift1 30s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(12vw,10vh) scale(1.16)}}
@keyframes drift2{to{transform:translate(-14vw,-8vh) scale(1.1)}}
@keyframes drift3{to{transform:translate(8vw,-12vh) scale(1.2)}}
.grain{
  position:fixed;inset:-40%;z-index:9998;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}
  60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,1%)}100%{transform:translate(0,0)}
}

/* ---------- layout ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:clamp(3rem,7vw,6.5rem)}
.section--deep{background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 22%,rgba(0,0,0,.55) 78%,transparent)}

/* chain rule — the divider */
.chain{height:26px;width:100%;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26'%3E%3Cg fill='none' stroke='%23c8d2dc' stroke-width='2.4'%3E%3Cellipse cx='15' cy='13' rx='12' ry='7'/%3E%3Cellipse cx='45' cy='13' rx='7' ry='11'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}

/* ---------- type ------------------------------------------------------- */
.h-mega{font-size:var(--step-5);line-height:.82}
.h-xl{font-size:var(--step-4);line-height:.85}
.mono{font-family:var(--mono)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.chrome{
  background:linear-gradient(176deg,#fff 2%,#e6eef6 18%,#93a1ad 42%,#fdfefe 52%,#7d8894 66%,#dfe9f2 84%,#fff 98%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 14px 30px rgba(255,255,255,.16));
}
.gem{
  background:linear-gradient(178deg,#fff 4%,var(--accent) 38%,var(--accent-2) 62%,#fff 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 34px var(--glow-a));
}

.eyebrow{
  display:flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:var(--step--2);
  font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--accent);flex:none;
  box-shadow:0 0 10px var(--accent)}

/* ---------- buttons ----------------------------------------------------- */

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.85em 1.5em;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  color:var(--text);font-family:var(--sans);font-weight:700;font-size:var(--step--1);letter-spacing:.02em;
  box-shadow:0 10px 26px -14px #000,0 1px 0 rgba(255,255,255,.25) inset;
  transition:transform .16s var(--ease),box-shadow .22s var(--ease),background .22s;
  overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0 0 55% 0;background:linear-gradient(180deg,rgba(255,255,255,.28),transparent);
  pointer-events:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px #000,0 1px 0 rgba(255,255,255,.35) inset}
.btn:active{transform:translateY(0)}
.btn--gem{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 72%,#000));
  color:var(--accent-ink);border-color:rgba(255,255,255,.5);
  box-shadow:0 16px 40px -16px var(--glow-a),0 1px 0 rgba(255,255,255,.7) inset;
}
.btn--gem:hover{box-shadow:0 22px 52px -16px var(--glow-a),0 1px 0 rgba(255,255,255,.85) inset}
.btn--ghost{background:rgba(255,255,255,.04)}
.btn--lg{padding:1.05em 2.1em;font-size:var(--step-0)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}

.chip{
  display:inline-flex;align-items:center;gap:.45em;padding:.34em .8em;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  font-family:var(--mono);font-size:var(--step--2);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-dim);backdrop-filter:blur(8px);
}
.chip--gem{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  box-shadow:0 0 22px -6px var(--glow-a)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;
  animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}

/* ---------- reveal ------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}

.skip{position:absolute;left:-9999px;z-index:99999;padding:.8em 1.2em;background:var(--accent);color:var(--accent-ink)}
.skip:focus{left:0;top:0}