/* Layout: one dark glass corridor. Hero = the real aluminum card + its live page; then color picker, the order path, yearly pricing. */
:root{
  color-scheme:dark;
  --void:#07060c;          /* page black, slight violet bias */
  --deep:#100d1c;          /* raised black */
  --glass:rgba(150,128,255,.07);
  --glass-hi:rgba(150,128,255,.14);
  --edge:rgba(176,156,255,.22);
  --ink:#ece9f7;
  --ink-2:#a9a3c4;
  --ink-3:#6f6a8a;
  --violet:#8b6cff;        /* the one accent */
  --violet-hi:#b8a5ff;
  --metal:#c9c6d6;         /* bare aluminum, for etch notes */
  --f-display:"Michroma","Eurostile","Arial Black",sans-serif;
  --f-body:"Albert Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --cut:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
#particles{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--violet-hi)}
:focus-visible{outline:2px solid var(--violet-hi);outline-offset:3px}

/* glass with squared, cut corners */
.glass{background:linear-gradient(160deg,var(--glass-hi),var(--glass) 55%);border:1px solid var(--edge);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-hi)}
h1,h2,h3{text-wrap:balance;margin:0}
h1,h2{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;line-height:1.15}
h2{font-size:clamp(24px,3.2vw,34px)}
p{margin:0}

/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(7,6,12,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(176,156,255,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.nav img{height:30px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--ink-2);text-decoration:none;font-size:14px}
.nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--f-body);color:#fff;background:var(--violet);border:0;padding:12px 20px;text-decoration:none;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .2s}
.btn:hover{background:#7a58ff}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.ghost:hover{background:var(--glass-hi)}
@media (max-width:760px){.nav ul{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(48px,8vw,96px) clamp(40px,6vw,72px)}
.hero h1{font-size:clamp(30px,4.6vw,54px);margin-block:14px 18px}
.hero h1 em{font-style:normal;color:var(--violet-hi)}
.hero .lede{color:var(--ink-2);font-size:18px;max-width:34rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.spec{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}
.spec b{color:var(--ink-2);font-weight:500}
.stage{position:relative;min-width:0;aspect-ratio:1/0.92;max-width:100%}
.stage .phone{position:absolute;right:0;top:0;width:52%;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
.stage .metal{position:absolute;left:0;bottom:6%;width:74%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.65));animation:float 7s ease-in-out infinite}
.stage .pulse{position:absolute;left:12%;bottom:10%;width:28%;aspect-ratio:1;border-radius:50%;border:1px solid var(--violet);opacity:.0;animation:beat 3.2s ease-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-1.2deg)}}
@keyframes beat{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@media (max-width:860px){.hero{grid-template-columns:1fr}.stage{max-width:520px;margin-inline:auto;width:100%}}

section{padding-block:clamp(56px,8vw,96px)}
.head{display:grid;gap:12px;max-width:44rem;margin-bottom:36px}
.head p{color:var(--ink-2)}

/* color picker */
.picker{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:clamp(20px,4vw,40px)}
.picker figure{margin:0;min-width:0}
.picker figure img{width:100%;max-width:560px;display:block;margin-inline:auto;filter:drop-shadow(0 20px 36px rgba(0,0,0,.55));transition:opacity .25s}
.swatches{display:flex;flex-wrap:wrap;gap:10px;margin-block:18px 22px}
.sw{width:44px;height:44px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sw[aria-pressed="true"]{border-color:var(--violet-hi);box-shadow:0 0 0 3px var(--void),0 0 0 5px var(--violet)}
.picker .note{color:var(--ink-2);font-size:15px}
.picker .note strong{color:var(--ink)}
.etch{margin-top:18px;font-family:var(--f-mono);font-size:12px;color:var(--metal);border-top:1px solid var(--edge);padding-top:14px}
@media (max-width:860px){.picker{grid-template-columns:1fr}}

/* front / back */
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.face{padding:20px;display:grid;gap:14px;align-content:start;min-width:0}
.face img{width:100%;display:block;filter:drop-shadow(0 14px 24px rgba(0,0,0,.5))}
.face h3{font-size:17px}
.face p{color:var(--ink-2);font-size:14.5px}
@media (max-width:900px){.faces{grid-template-columns:1fr;max-width:520px}}

/* order path */
.path{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:s;list-style:none;padding:0;margin:0}
.path li{position:relative;padding:22px 16px 0 0;border-top:1px solid var(--edge);min-width:0}
.path li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:12px;color:var(--violet-hi);position:absolute;top:-9px;left:0;background:var(--void);padding-right:8px}
.path li::after{content:"";position:absolute;top:-4px;right:16px;width:7px;height:7px;background:var(--violet);transform:rotate(45deg)}
.path li:last-child::after{display:none}
.path h3{font-size:16px;margin-bottom:6px}
.path p{color:var(--ink-2);font-size:14px}
@media (max-width:980px){.path{grid-template-columns:repeat(2,1fr);row-gap:30px}}
@media (max-width:520px){.path{grid-template-columns:1fr}}

/* pricing */
.toggle-note{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);margin-top:-18px;margin-bottom:28px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{padding:28px 24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.tier.pick{background:linear-gradient(160deg,rgba(139,108,255,.26),rgba(139,108,255,.08) 60%);border-color:rgba(184,165,255,.5)}
.tier .name{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tier h3{font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:.04em}
.tier .tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-hi)}
.price{font-family:var(--f-display);font-size:38px;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-family:var(--f-body);font-size:14px;color:var(--ink-2);letter-spacing:0}
.tier .for{color:var(--ink-2);font-size:14.5px}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.tier li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline}
.tier li::before{content:"";width:8px;height:8px;background:var(--violet);transform:rotate(45deg) translateY(-1px)}
.tier .btn{margin-top:auto;justify-content:center}
.ent{margin-top:20px;padding:18px 24px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.ent p{color:var(--ink-2)}
@media (max-width:900px){.tiers{grid-template-columns:1fr;max-width:460px}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq details{padding:18px 22px}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--violet-hi);font-family:var(--f-mono)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin-top:10px;font-size:15px}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

footer{border-top:1px solid rgba(176,156,255,.12);padding-block:32px;color:var(--ink-3);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer img{height:24px;width:auto;opacity:.8}
.nav .btn{white-space:nowrap}
@media (max-width:480px){.nav .btn{padding:8px 11px;font-size:13px}.nav img{height:22px}.nav{gap:10px}}