/* Deskpet site. Sections in page order: base, nav, hero, design, screen, desk, girl, setup, specs, coin, reserve, footer. */

@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/sora.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jetbrains-mono.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format('woff2')}

:root{
  --bg:#09080e;
  --bg-2:#0d0b15;
  --card:#0f0d18;
  --ink:#f4f2fb;
  --mut:#a8a3bf;
  --dim:#736e8b;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --glass:rgba(255,255,255,.04);
  --vio:#a78bfa;
  --vio-2:#7c5cff;
  --pink:#ff9ad5;
  --grn:#4df29a;
  --red:#ff6b86;
  --wrap:1240px;
  --pad:32px;
  --f-d:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-m:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --f-s:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(900px 600px at 82% -8%,rgba(124,92,255,.20),transparent 62%),
  radial-gradient(700px 520px at -6% 38%,rgba(255,154,213,.07),transparent 60%),
  radial-gradient(900px 700px at 60% 110%,rgba(77,242,154,.05),transparent 60%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
:where(img,svg){display:block;max-width:100%}
:where(a){color:inherit;text-decoration:none}
:where(button,input){font:inherit;color:inherit}
:where(button){background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0}
:where(ul,ol){padding:0;list-style:none}
:where(i,em){font-style:normal}
::selection{background:rgba(124,92,255,.45);color:#fff}
:focus-visible{outline:2px solid var(--vio);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.num{font-family:var(--f-m);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.up{color:var(--grn)}
.dn{color:var(--red)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.eyebrow{display:flex;align-items:center;gap:12px;font:600 12px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--vio)}
.eyebrow span[lang=ja]{letter-spacing:.12em;font-family:var(--f-b);font-weight:600;color:var(--ink);opacity:.85}
.eyebrow i{width:26px;height:1px;background:linear-gradient(90deg,var(--vio),transparent)}

h1,h2{font-family:var(--f-d);font-weight:700;letter-spacing:-.045em;text-wrap:balance}
h1 em,h2 em{font-family:var(--f-s);font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.02em;padding-right:.06em;background:linear-gradient(100deg,#d9ccff 0%,#a78bfa 42%,#ff9ad5 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--mut);font-size:clamp(16px,1.3vw,18.5px);line-height:1.62;max-width:54ch;text-wrap:pretty}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;font:600 15px/1 var(--f-b);letter-spacing:-.01em;white-space:nowrap;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s}
.btn-primary{color:#fff;background:linear-gradient(135deg,#b7a0ff 0%,#7c5cff 52%,#6638ee 100%);box-shadow:0 12px 32px -10px rgba(124,92,255,.75),inset 0 1px 0 rgba(255,255,255,.38)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(124,92,255,.9),inset 0 1px 0 rgba(255,255,255,.38)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--glass);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn-icon{width:54px;padding:0;flex:none}
.btn[disabled]{opacity:.6;pointer-events:none}

/* scroll reveal: only below the first screen, and only when the script runs */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in,.rv-all .rv{opacity:1;transform:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.nav-in{pointer-events:auto;display:flex;align-items:center;gap:30px;height:58px;padding:0 9px 0 22px;border-radius:999px;border:1px solid var(--line);background:rgba(13,11,21,.58);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 18px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);transition:background .3s,border-color .3s}
.nav.is-stuck .nav-in{background:rgba(13,11,21,.82);border-color:var(--line-2)}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 18px/1 var(--f-d);letter-spacing:-.04em;color:var(--ink)}
.brand svg{color:var(--vio)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:9px 13px;border-radius:999px;font:500 14px/1 var(--f-b);color:var(--mut);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}

/* ---------- hero ---------- */
.hero{position:relative;padding:136px 0 0;overflow:hidden}
.hero-orb{position:absolute;right:-12%;top:4%;width:min(980px,78vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(124,92,255,.26),rgba(124,92,255,.08) 55%,transparent 72%);filter:blur(20px);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:8px;min-height:min(720px,calc(100vh - 220px))}
.hero-copy{position:relative;z-index:2;padding:24px 0 40px}
.hero h1{font-size:clamp(46px,6.3vw,92px);line-height:.96;margin:26px 0 26px;white-space:nowrap}
.hero-sub{color:var(--mut);font-size:clamp(16px,1.35vw,19px);line-height:1.62;max-width:44ch;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.facts{display:flex;flex-wrap:wrap;gap:22px 36px;margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
.facts b{display:block;font:600 20px/1.1 var(--f-d);letter-spacing:-.03em;white-space:nowrap}
.facts span{display:block;margin-top:7px;font-size:12.5px;line-height:1.3;color:var(--dim);white-space:nowrap}

.hero-art{position:relative;aspect-ratio:1200/896;margin:0 -9% 0 -6%}
.hero-glow{position:absolute;left:18%;right:14%;top:14%;bottom:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(124,92,255,.42),rgba(255,154,213,.10) 60%,transparent 78%);filter:blur(46px)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-composite:intersect}

.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;height:58px;padding:0 18px 0 10px;border-radius:18px;border:1px solid var(--line-2);background:rgba(15,13,24,.66);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 22px 48px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);white-space:nowrap;animation:float 7s ease-in-out infinite}
.chip-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--mut)}
.chip-ic.vio{color:var(--vio);background:rgba(167,139,250,.14)}
.chip-ic.grn{color:var(--grn);background:rgba(77,242,154,.12)}
.chip-t small{display:block;font:600 10.5px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.chip-t b{display:block;margin-top:6px;font:600 14px/1 var(--f-b);letter-spacing:-.01em}
.chip-t b.num{font-family:var(--f-m);font-size:14.5px}
.chip-a{left:3%;top:15%}
.chip-b{right:7%;top:41%;animation-duration:8.5s;animation-delay:-3s}
.chip-c{right:6%;bottom:4%;animation-duration:9.5s;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.ticker{position:relative;margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker-in{display:flex;width:max-content;animation:slide 38s linear infinite}
.ticker span{display:inline-flex;align-items:center;gap:26px;padding:18px 0 18px 26px;font:600 12px/1 var(--f-m);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--vio);opacity:.7}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(84px,10.5vw,148px) 0}
.sec-tint{background:linear-gradient(180deg,transparent,rgba(124,92,255,.045) 22%,rgba(124,92,255,.045) 78%,transparent)}
.sec-flush{padding-top:0}
.sec-last{padding-bottom:clamp(64px,8vw,110px)}
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2,.coin h2,.reserve h2,.girl h2{font-size:clamp(36px,4.7vw,66px);line-height:1;margin:20px 0 20px}

/* ---------- design yours ---------- */
.cfg{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:stretch}
.stage{position:relative;min-height:560px;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:#0c0b10;box-shadow:0 40px 90px -50px rgba(124,92,255,.55),inset 0 1px 0 rgba(255,255,255,.05)}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.stage-img.is-on{opacity:1}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(9,8,14,.55) 0%,transparent 18%,transparent 76%,rgba(9,8,14,.8) 100%)}
.stage-top{position:absolute;z-index:2;left:22px;right:22px;top:20px;display:flex;align-items:center;justify-content:space-between}
.stage-no{font:500 13px/1 var(--f-m);letter-spacing:.06em;color:var(--dim)}
.stage-no b{font-weight:600;color:var(--ink)}
.stage-live{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;border:1px solid rgba(77,242,154,.3);background:rgba(77,242,154,.08);font:600 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--grn)}
.stage-live i{width:6px;height:6px;border-radius:50%;background:var(--grn);box-shadow:0 0 10px var(--grn);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.stage-name{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}
.stage-name b{display:block;height:1.12em;font:600 clamp(28px,2.7vw,38px)/1.12 var(--f-d);letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-name span{display:block;margin-top:8px;font:500 13.5px/1 var(--f-b);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-load{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--vio),var(--grn),transparent);background-size:50% 100%;background-repeat:no-repeat;background-position:-60% 0;opacity:0;transition:opacity .2s}
.stage.is-loading .stage-load{opacity:1;animation:scan 1s linear infinite}
@keyframes scan{to{background-position:160% 0}}

.panel{display:flex;flex-direction:column;gap:22px;padding:26px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.opt-head{display:flex;align-items:baseline;justify-content:space-between;height:20px;margin-bottom:12px}
.opt-head span{font:600 11.5px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.opt-head b{font:600 14px/1 var(--f-b);color:var(--ink)}
.namebox{position:relative}
.namebox input{display:block;width:100%;height:52px;padding:0 150px 0 18px;border-radius:16px;border:1px solid var(--line);background:rgba(9,8,14,.55);font:600 17px/1 var(--f-d);letter-spacing:-.02em;outline:none;transition:border-color .2s,box-shadow .2s}
.namebox input:focus{border-color:var(--vio);box-shadow:0 0 0 4px rgba(124,92,255,.2)}
.namebox span{position:absolute;right:16px;top:0;height:52px;display:flex;align-items:center;font-size:12px;color:var(--dim);pointer-events:none}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0c0b10;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),opacity .25s}
.tile span{position:absolute;left:0;right:0;bottom:0;padding:22px 4px 9px;text-align:center;font:600 12px/1 var(--f-b);letter-spacing:-.01em;color:var(--mut);background:linear-gradient(180deg,transparent,rgba(9,8,14,.94) 70%);transition:color .25s}
.tile:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tile:hover img{transform:scale(1.05)}
.tile.is-on{border-color:var(--vio);box-shadow:0 0 0 1px var(--vio),0 14px 34px -14px rgba(124,92,255,.85)}
.tile.is-on span{color:#fff}
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:9px;height:76px;padding-top:13px;border-radius:16px;border:1px solid var(--line);background:var(--glass);transition:border-color .25s,background .25s,transform .25s var(--ease)}
.swatch i{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 32% 28%,var(--c),var(--c2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 6px 14px -6px var(--c)}
.swatch span{font:500 11.5px/1 var(--f-b);color:var(--mut);transition:color .25s}
.swatch:hover{border-color:var(--line-2);transform:translateY(-2px)}
.swatch.is-on{border-color:var(--vio);background:rgba(124,92,255,.13);box-shadow:0 0 0 1px var(--vio)}
.swatch.is-on span{color:#fff}
.buy{display:grid;gap:18px;margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
.price{display:flex;align-items:center;gap:16px;min-height:40px;min-width:0}
.price-n{flex:none;font:600 34px/1 var(--f-d);letter-spacing:-.04em;white-space:nowrap}
.price-s{font-size:12px;line-height:1.35;color:var(--dim)}
.buy-btns{display:flex;gap:10px}
.buy-btns .btn-primary{flex:1}

.wall{display:grid;gap:12px;height:358px;margin-top:clamp(40px,5vw,64px);padding:4px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.wall-row{display:flex;gap:12px;width:max-content;padding-right:12px;animation:slide 100s linear infinite}
.wall-row:nth-child(2){animation-direction:reverse;animation-duration:120s}
.wall:hover .wall-row{animation-play-state:paused}
.wall-item{position:relative;flex:none;width:135px;height:169px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0c0b10;transition:border-color .25s,transform .25s var(--ease)}
.wall-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wall-item:hover{border-color:var(--vio);transform:translateY(-3px)}

/* ---------- screen ---------- */
.modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:center}
.mode-list{display:grid;gap:8px}
.mode{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:18px;min-height:92px;padding:16px 20px;border-radius:20px;border:1px solid transparent;overflow:hidden;transition:background .3s,border-color .3s}
.mode-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:var(--dim);transition:color .3s,border-color .3s,background .3s}
.mode-t{display:block}
.mode-t b{display:block;font:600 17.5px/1.2 var(--f-d);letter-spacing:-.025em;color:var(--mut);transition:color .3s}
.mode-t small{display:block;margin-top:5px;font-size:14.5px;line-height:1.5;color:var(--dim);transition:color .3s}
.mode:hover .mode-t b{color:var(--ink)}
.mode.is-on{background:rgba(255,255,255,.045);border-color:var(--line)}
.mode.is-on .mode-t b{color:var(--ink)}
.mode.is-on .mode-t small{color:var(--mut)}
.mode.is-on .mode-ic{color:var(--grn);border-color:rgba(77,242,154,.34);background:rgba(77,242,154,.09)}
.mode-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--vio),var(--grn));transform:scaleX(0);transform-origin:0 50%}
.mode.is-on .mode-bar{animation:fill 5.5s linear forwards}
.modes.is-paused .mode.is-on .mode-bar{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

.device{position:relative;width:100%;max-width:580px;justify-self:center}
.device-glow{position:absolute;inset:-8% -6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(77,242,154,.20),rgba(124,92,255,.14) 55%,transparent 76%);filter:blur(44px)}
.device-body{position:relative;padding:16px;border-radius:30px;background:linear-gradient(150deg,#2b2935 0%,#14131a 34%,#0b0a0f 100%);box-shadow:0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12),0 50px 90px -40px rgba(0,0,0,.95);transform:perspective(1500px) rotateY(-8deg) rotateX(3deg);transform-origin:50% 50%}
.device-screen{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;container-type:inline-size;background:radial-gradient(120% 90% at 50% 0%,#151c22 0%,#0b0f12 58%,#070a0c 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.device-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 32%)}
.device-note{margin-top:22px;text-align:center;font-size:12.5px;color:var(--dim)}
.s-bar{position:absolute;z-index:1;left:5cqw;right:5cqw;top:2.6cqw;display:flex;justify-content:space-between;align-items:center;font:600 2.6cqw/1 var(--f-b);letter-spacing:.16em;text-transform:uppercase;color:#6f7786}
.s-bar span{display:flex;align-items:center;gap:1.4cqw;max-width:60%;white-space:nowrap;overflow:hidden}
.s-bar i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--grn);box-shadow:0 0 2cqw var(--grn)}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6cqw 7cqw;opacity:0;transform:scale(.97);transition:opacity .45s ease,transform .45s var(--ease);font-family:var(--f-b)}
.scr.is-on{opacity:1;transform:none}
.s-label{display:flex;align-items:center;gap:1.6cqw;font:600 3.3cqw/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:#8d95a3}
.s-bell svg{width:4.4cqw;height:4.4cqw}
.s-big{font:700 13cqw/1 var(--f-b);letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin-top:3.2cqw;text-shadow:0 0 6cqw rgba(77,242,154,.35)}
.s-white{color:#fff;text-shadow:none}
.s-mid{font:700 7cqw/1 var(--f-b);letter-spacing:-.03em;margin-top:3cqw;font-variant-numeric:tabular-nums}
.s-small{margin-top:2.6cqw;font:500 3.5cqw/1 var(--f-b);color:#8d95a3}
.s-pill{margin-top:3cqw;padding:1.5cqw 3.2cqw;border-radius:99cqw;font:700 3.6cqw/1 var(--f-b);font-variant-numeric:tabular-nums;background:rgba(77,242,154,.16)}
.scr-pnl{justify-content:flex-start;padding:9cqw 0 0}
.s-chart{position:absolute;left:0;right:0;bottom:0;width:100%;height:36%}
.scr-bags{align-items:stretch;justify-content:center;gap:2cqw;padding:8cqw 7cqw 4cqw}
.s-head,.s-total{display:flex;justify-content:space-between;align-items:center;font:600 3.2cqw/1 var(--f-b);letter-spacing:.14em;text-transform:uppercase;color:#8d95a3}
.s-head{margin-bottom:1.4cqw}
.s-total{margin-top:1.6cqw;padding-top:3cqw;border-top:1px solid rgba(255,255,255,.09)}
.s-total b{font:700 5cqw/1 var(--f-b);letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums}
.bag{display:grid;grid-template-columns:1fr auto 22cqw;align-items:center;gap:3cqw;height:10cqw;padding:0 3.6cqw;border-radius:3cqw;background:rgba(255,255,255,.05)}
.bag b{font:700 4.5cqw/1 var(--f-b);letter-spacing:-.02em;color:#fff}
.bag span{font:500 3.5cqw/1 var(--f-b);color:#8d95a3;font-variant-numeric:tabular-nums}
.bag i{text-align:right;font:700 4.4cqw/1 var(--f-b);font-variant-numeric:tabular-nums}
.scr-alert .s-big{font-size:15cqw;margin-top:4.4cqw}
.scr-alert .s-mid{font-size:8.6cqw}
.scr-alert .s-label{color:var(--vio)}
.scr-feed{padding-top:9cqw;padding-bottom:4cqw}
.scr-feed .s-mid{font-size:5cqw;margin-top:3.4cqw}
.scr-feed .s-big{font-size:12cqw;margin-top:2.6cqw}
.feed{align-self:stretch;display:grid;gap:1.6cqw;margin-top:5cqw}
.feed div{display:grid;grid-template-columns:9cqw 1fr auto 8cqw;align-items:center;gap:2.6cqw;height:8.6cqw;padding:0 3.4cqw;border-radius:2.6cqw;background:rgba(255,255,255,.05);font:500 3.4cqw/1 var(--f-b);color:#8d95a3}
.feed b{font-weight:700;color:var(--grn)}
.feed span{font-weight:700;color:#fff}
.feed i{font-variant-numeric:tabular-nums}
.feed em{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- on the desk ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-template-areas:"night night morning" "night night hand" "alert box note"}
.shot{position:relative;aspect-ratio:4/3;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#0c0b10}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.shot:hover img{transform:scale(1.045)}
.shot figcaption{position:absolute;left:14px;bottom:14px;height:32px;display:flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(9,8,14,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 12.5px/1 var(--f-b);letter-spacing:-.005em}
.shot-night{grid-area:night;aspect-ratio:auto}
.shot-night img{object-position:50% 60%}
.shot-morning{grid-area:morning}
.shot-hand{grid-area:hand}
.shot-alert{grid-area:alert}
.shot-box{grid-area:box}
.note{grid-area:note;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(120% 90% at 100% 0%,rgba(124,92,255,.22),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.note-k{font:600 11.5px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--grn)}
.note-v{margin-top:16px;font:600 clamp(22px,2.3vw,30px)/1.12 var(--f-d);letter-spacing:-.035em}
.note-s{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--mut)}

/* ---------- the girl ---------- */
.girl{position:relative;display:flex;align-items:center;min-height:clamp(420px,44vw,580px);border-radius:32px;overflow:hidden;border:1px solid var(--line);background:#0b0a12}
.girl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% 50%}
.girl::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,8,14,.97) 0%,rgba(9,8,14,.86) 30%,rgba(9,8,14,.2) 58%,rgba(9,8,14,0) 72%)}
.girl-copy{position:relative;z-index:1;max-width:540px;padding:clamp(28px,5vw,64px)}
.girl-copy .btn{margin-top:26px}
.girl-copy p:last-of-type{color:var(--mut);font-size:clamp(16px,1.3vw,18.5px);line-height:1.62;text-wrap:pretty}

/* ---------- setup: product code + public address ---------- */
.link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.link-steps{display:grid;gap:12px}
.lstep{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:16px;align-items:start;padding:22px 24px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:border-color .3s,box-shadow .3s,opacity .3s}
.lstep-n{font:400 44px/1 var(--f-s);font-style:italic;letter-spacing:-.02em;background:linear-gradient(120deg,#d9ccff,#a78bfa 55%,#ff9ad5);-webkit-background-clip:text;background-clip:text;color:transparent}
.lstep h3{font:600 19px/1.2 var(--f-d);letter-spacing:-.03em}
.lstep p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--mut);text-wrap:pretty}
.lstep.is-off{opacity:.42}
.lstep.is-on{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 1px rgba(167,139,250,.35),0 24px 54px -34px rgba(124,92,255,.9)}
.lfield{position:relative;grid-column:1/-1;margin-top:16px}
.lfield input{display:block;width:100%;height:54px;padding:0 50px 0 18px;border-radius:16px;border:1px solid var(--line-2);background:rgba(9,8,14,.6);font-size:15px;font-weight:600;letter-spacing:.02em;outline:none;transition:border-color .2s,box-shadow .2s}
.lfield input::placeholder{color:var(--dim);font-weight:500}
.lfield input:focus{border-color:var(--vio);box-shadow:0 0 0 4px rgba(124,92,255,.2)}
.lfield input:disabled{cursor:not-allowed}
.lfield input[readonly]{border-color:rgba(77,242,154,.3)}
#linkCode{letter-spacing:.2em;font-size:17px}
.lfield i{position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--grn);opacity:0;transform:scale(.5);transition:opacity .25s,transform .3s var(--ease)}
.lfield i::after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border-right:2.2px solid #06130c;border-bottom:2.2px solid #06130c;transform:rotate(45deg)}
.lstep.is-done .lfield i{opacity:1;transform:none}
.link-act{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:16px;margin-top:18px}
.link-act .btn{min-width:168px}
.link-reset{height:40px;padding:0 10px;border-radius:10px;font:600 13.5px/1 var(--f-b);color:var(--mut);transition:color .2s,background .2s}
.link-reset:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.link-msg{height:20px;font-size:13.5px;line-height:20px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-msg.ok{color:var(--grn)}
.link-msg.err{color:var(--red)}
.link-device .device-body{transform:perspective(1500px) rotateY(8deg) rotateX(3deg)}
.s-bar b{font-weight:600}
#linkBar i{background:#6f7786;box-shadow:none;transition:background .3s,box-shadow .3s}
.link[data-state=live] #linkBar{color:var(--grn)}
.link[data-state=live] #linkBar i{background:var(--grn);box-shadow:0 0 2cqw var(--grn)}
.s-code{margin-top:4.4cqw;font:700 11cqw/1 var(--f-m);letter-spacing:.06em;color:#7d8594;font-variant-numeric:tabular-nums;white-space:nowrap}
.s-code.s-white{color:#fff}
.scr-link .s-small{margin-top:4.2cqw}
.s-watch{margin-top:2.6cqw;font:500 3.1cqw/1 var(--f-b);color:#8d95a3}
.s-watch b{font-family:var(--f-m);font-weight:600;color:#c9cfd9}
.scr-pnl.scr-link{padding-top:8cqw}
.scr-pnl.scr-link .s-chart{height:30%}

/* ---------- specs ---------- */
.specs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.specs-grid .sec-head{margin-bottom:34px}
.spec div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:20px;padding:17px 0;border-top:1px solid var(--line)}
.spec div:last-child{border-bottom:1px solid var(--line)}
.spec dt{font:600 11.5px/1.5 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.spec dd{font-size:15.5px;line-height:1.5;color:var(--ink)}
.fine{margin-top:18px;font-size:12.5px;color:var(--dim)}
.spec-shot{position:relative;aspect-ratio:4/5;border-radius:30px;overflow:hidden;border:1px solid var(--line);background:#0c0b10;box-shadow:0 40px 90px -50px rgba(124,92,255,.55)}
.spec-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:49% 50%}

/* ---------- coin ---------- */
.coin{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4.5vw,60px);border-radius:32px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(90% 120% at 0% 0%,rgba(124,92,255,.24),transparent 58%),radial-gradient(70% 110% at 100% 100%,rgba(77,242,154,.10),transparent 60%),var(--card)}
.coin h2{margin:18px 0 18px}
.coin h2 em{font-size:1.16em}
.ca{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;height:60px;margin-top:32px;padding:0 8px 0 20px;border-radius:18px;border:1px solid var(--line-2);background:rgba(9,8,14,.6)}
.ca-k{font:600 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ca-v{font-size:14px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-copy{height:44px;width:84px;border-radius:13px;border:1px solid var(--line-2);background:var(--glass);font:600 13px/1 var(--f-b);text-align:center;transition:background .2s,border-color .2s}
.ca-copy:hover{background:rgba(255,255,255,.09)}
.ca-copy[disabled]{opacity:.4;cursor:default}
.perks{display:grid;gap:14px}
.perks li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;align-items:start;padding:22px;border-radius:22px;border:1px solid var(--line);background:rgba(9,8,14,.5)}
.perk-ic{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:var(--vio);background:rgba(167,139,250,.13);border:1px solid rgba(167,139,250,.28)}
.perks h3{font:600 17px/1.25 var(--f-d);letter-spacing:-.025em}
.perks p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--mut)}

/* ---------- reserve ---------- */
.reserve{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:34px;overflow:hidden;border:1px solid var(--line-2);background:radial-gradient(90% 130% at 100% 0%,rgba(124,92,255,.26),transparent 60%),var(--card);box-shadow:0 60px 120px -70px rgba(124,92,255,.75)}
.reserve-art{position:relative;min-height:480px;background:#0c0b10}
.reserve-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.reserve-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 62%,rgba(15,13,24,.9) 100%)}
.reserve-main{padding:clamp(28px,4.5vw,60px);display:flex;flex-direction:column;justify-content:center}
.reserve h2{margin:18px 0 18px}
.picked{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:10px;margin-top:30px}
.picked li{height:60px;display:flex;flex-direction:column;justify-content:center;padding:0 14px;border-radius:16px;border:1px solid var(--line);background:rgba(9,8,14,.5);min-width:0}
.picked small{font:600 10px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.picked b{margin-top:8px;font:600 15px/1 var(--f-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picked .picked-edit{padding:0;border:0;background:none;align-items:center}
.picked-edit a{display:flex;align-items:center;height:60px;padding:0 16px;border-radius:16px;font:600 13px/1 var(--f-b);color:var(--vio);transition:background .2s}
.picked-edit a:hover{background:rgba(167,139,250,.1)}
.form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:14px}
.form input{height:58px;min-width:0;padding:0 22px;border-radius:999px;border:1px solid var(--line-2);background:rgba(9,8,14,.65);font-size:15.5px;outline:none;transition:border-color .2s,box-shadow .2s}
.form input::placeholder{color:var(--dim)}
.form input:focus{border-color:var(--vio);box-shadow:0 0 0 4px rgba(124,92,255,.2)}
.form .btn{height:58px;min-width:150px}
.form-msg{height:22px;margin-top:14px;font-size:13.5px;line-height:22px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.form-msg.ok{color:var(--grn)}
.form-msg.err{color:var(--red)}

.faq{max-width:860px;margin:clamp(56px,7vw,96px) auto 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;cursor:pointer;list-style:none;font:600 clamp(17px,1.6vw,20px)/1.3 var(--f-d);letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.8px solid var(--vio);border-bottom:1.8px solid var(--vio);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 44px 26px 4px;color:var(--mut);font-size:15.5px;line-height:1.65;max-width:68ch}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:34px 0 44px}
.foot-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px}
.foot p{font-size:14px;color:var(--dim)}
.foot-links{display:flex;gap:4px}
.foot-links a{padding:8px 12px;border-radius:999px;font-size:14px;color:var(--mut);transition:color .2s,background .2s}
.foot-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}

/* ---------- smaller screens ---------- */
@media (max-width:1120px){
  .nav-links a{padding:9px 9px}
  .nav-in{gap:16px}
}
@media (max-width:980px){
  :root{--pad:22px}
  .nav-links{display:none}
  .nav-in{width:100%;justify-content:space-between}
  .hero{padding-top:112px}
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:0}
  .hero-copy{padding-bottom:8px}
  .hero h1{white-space:normal}
  .hero-art{margin:0 -22px}
  .hero-orb{right:-30%;top:34%;width:120vw}
  .cfg{grid-template-columns:minmax(0,1fr)}
  .stage{min-height:0;aspect-ratio:1/1}
  .modes{grid-template-columns:minmax(0,1fr)}
  .device{order:-1}
  .device-body{transform:none}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"night night" "morning hand" "alert box" "note note"}
  .shot-night{aspect-ratio:16/10}
  .link{grid-template-columns:minmax(0,1fr)}
  .link-device .device-body{transform:none}
  .specs-grid{grid-template-columns:minmax(0,1fr)}
  .spec-shot{aspect-ratio:4/3;order:-1}
  .coin{grid-template-columns:minmax(0,1fr)}
  .reserve{grid-template-columns:minmax(0,1fr)}
  .reserve-art{min-height:0;aspect-ratio:4/3}
  .reserve-art::after{background:linear-gradient(180deg,transparent 60%,rgba(15,13,24,.9) 100%)}
  .girl::after{background:linear-gradient(90deg,rgba(9,8,14,.96) 0%,rgba(9,8,14,.82) 46%,rgba(9,8,14,.25) 100%)}
}
@media (max-width:640px){
  :root{--pad:18px}
  .btn{height:52px;padding:0 22px}
  .btn-sm{height:40px;padding:0 16px}
  .btn-icon{width:52px;padding:0}
  .hero-cta .btn{flex:1}
  .facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;margin-top:40px}
  .chip{height:48px;padding:0 13px 0 7px;gap:9px;border-radius:15px}
  .chip-ic{width:32px;height:32px;border-radius:10px}
  .chip-t b{font-size:12.5px}
  .chip-t b.num{font-size:13px}
  .chip-a{left:4%;top:6%}
  .chip-b{right:4%;top:auto;bottom:4%}
  .chip-c{display:none}
  .panel{padding:18px;border-radius:24px;gap:18px}
  .stage{border-radius:24px}
  .tiles{gap:8px}
  .tile span{font-size:11px}
  .swatches{gap:8px}
  .mode{grid-template-columns:42px minmax(0,1fr);gap:14px;padding:14px 14px}
  .mode-ic{width:42px;height:42px}
  .bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"night" "morning" "hand" "alert" "box" "note"}
  .shot-night{aspect-ratio:4/3}
  .spec div{grid-template-columns:104px minmax(0,1fr);gap:14px}
  .picked{grid-template-columns:repeat(2,minmax(0,1fr))}
  .namebox input{padding-right:18px}
  .namebox span{display:none}
  .picked li{padding:0 12px}
  .picked .picked-edit{grid-column:1/-1;align-items:flex-start}
  .picked-edit a{height:40px;padding:0 12px}
  .form{grid-template-columns:minmax(0,1fr)}
  .form-msg{white-space:normal;height:44px}
  .lstep{grid-template-columns:46px minmax(0,1fr);padding:18px}
  .lstep-n{font-size:36px}
  .link-act{grid-template-columns:minmax(0,1fr) auto}
  .link-act .btn{min-width:0}
  .link-msg{grid-column:1/-1;margin-top:10px}
  .ca{grid-template-columns:minmax(0,1fr) auto;padding-left:16px}
  .ca-k{display:none}
  .foot-in{grid-template-columns:minmax(0,1fr);justify-items:start}
  .faq details p{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .chip,.ticker-in,.wall-row,.stage-live i{animation:none}
}