:root{
  --mask:#1c0d27;--mask-2:#2a1438;--mask-3:#3a1d4d;--orchid:#c57bc0;--orchid-d:#8f3f8b;
  --gold:#f0b429;--gold-d:#c8920f;--silk:#f6f1ea;--paper:#f7f4f8;--ink:#1b1022;--muted:#6c5f76;--line:#e3dbe8;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:24px;--max:1340px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink);background:#fff;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.5rem,6.4vw,5.4rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3{font-size:1.3rem;letter-spacing:-.01em}
p{max-width:66ch}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:10px 14px;z-index:100}
.skip:focus{left:8px}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s}
.hdr.solid,.hdr.always{background:rgba(28,13,39,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{height:54px;width:auto;border-radius:3px}
.brand span{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.1;letter-spacing:-.01em}
.brand small{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.1em;color:var(--orchid);margin-top:3px}
.nav{display:flex;align-items:center;gap:30px}
.nav a{color:#e9dfef;text-decoration:none;font-size:.95rem;position:relative;padding:6px 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .25s}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.nav a[aria-current]{color:#fff}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--ink)!important;font-weight:600;text-decoration:none;padding:14px 24px;border-radius:3px;border:0;font:600 1rem var(--body);cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:#ffc93f;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.dark{background:var(--mask);color:#fff!important}
.btn.dark:hover{background:var(--mask-3)}
.nav .btn{padding:10px 18px;font-size:.92rem}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;color:#fff}
.burger span{display:block;height:2px;background:currentColor;margin:6px 10px;transition:.25s}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:radial-gradient(120% 90% at 78% 30%,#4a2360 0%,var(--mask) 62%);color:#fff;overflow:hidden;isolation:isolate}
.hero svg.traces{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,13,39,.92) 0%,rgba(28,13,39,.55) 48%,rgba(28,13,39,0) 78%),linear-gradient(0deg,rgba(28,13,39,.85),rgba(28,13,39,0) 40%);z-index:-1}
.hero .wrap{padding-top:140px;padding-bottom:clamp(64px,10vh,110px)}
.hero .tag{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.08em;margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero .tag i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(240,180,41,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(240,180,41,0)}100%{box-shadow:0 0 0 0 rgba(240,180,41,0)}}
.hero h1{max-width:13ch}
.hero h1 em{font-style:normal;color:var(--orchid)}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#dccfe4;margin:26px 0 38px;max-width:52ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-facts{display:flex;gap:clamp(20px,4vw,56px);margin-top:clamp(44px,8vh,84px);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.hero-facts div b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.2rem);color:#fff;line-height:1}
.hero-facts div span{font-family:var(--mono);font-size:.72rem;color:#b9a6c6;letter-spacing:.05em}
.trace{fill:none;stroke:rgba(197,123,192,.28);stroke-width:2.2;stroke-linejoin:round}
.pulse{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:46 1400;stroke-dashoffset:1446;animation:flow var(--d,7s) linear infinite;animation-delay:var(--dl,0s);filter:drop-shadow(0 0 5px rgba(240,180,41,.8))}
@keyframes flow{to{stroke-dashoffset:0}}
.pad{fill:#1c0d27;stroke:var(--gold);stroke-width:2.4}

/* page hero (inner) */
.phero{background:radial-gradient(100% 140% at 85% 0,#4a2360,var(--mask) 65%);color:#fff;padding:170px 0 80px;position:relative;overflow:hidden}
.phero h1{font-size:clamp(2.3rem,5vw,4.2rem);max-width:18ch}
.phero p{color:#d6c7df;font-size:1.15rem;margin-top:20px}
.phero .crumb{font-family:var(--mono);font-size:.75rem;color:var(--orchid);letter-spacing:.08em;margin-bottom:18px}
.phero::after{content:"";position:absolute;right:-60px;top:50%;width:420px;height:420px;border:2px solid rgba(197,123,192,.18);border-radius:50%;transform:translateY(-50%);box-shadow:0 0 0 40px rgba(197,123,192,.05),0 0 0 90px rgba(197,123,192,.03)}

/* sections */
.sec{padding:clamp(72px,10vw,130px) 0}
.sec.paper{background:var(--paper)}
.sec.dark{background:var(--mask);color:#fff}
.kicker{font-family:var(--mono);font-size:.78rem;color:var(--orchid-d);letter-spacing:.06em;margin-bottom:14px}
.sec.dark .kicker{color:var(--gold)}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head p{margin-top:16px;color:var(--muted);font-size:1.1rem}
.sec.dark .sec-head p{color:#c7b6d2}

/* board inspector */
.inspect{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.board-wrap{background:var(--mask-2);border-radius:6px;padding:clamp(10px,2vw,22px);box-shadow:0 30px 60px -30px rgba(28,13,39,.7)}
.board-wrap svg{width:100%;height:auto}
.hot{cursor:pointer;outline:none}
.hot .ring{fill:rgba(240,180,41,0);stroke:var(--gold);stroke-width:2;stroke-dasharray:5 5;opacity:0;transition:.2s}
.hot:hover .ring,.hot:focus-visible .ring,.hot.on .ring{opacity:1;fill:rgba(240,180,41,.12)}
.hot .dot{fill:var(--gold);animation:ping2 2.4s infinite}
@keyframes ping2{0%,100%{opacity:1}50%{opacity:.35}}
.hot.on .dot{animation:none;opacity:1}
.silk{font-family:var(--mono);font-size:13px;fill:#efe6f3;letter-spacing:.04em}
.panel{border-left:3px solid var(--gold);padding:6px 0 6px 26px;min-height:280px}
.panel .ref{font-family:var(--mono);color:var(--orchid-d);font-size:.8rem;letter-spacing:.06em}
.panel h3{font-size:clamp(1.5rem,2.4vw,2rem);margin:8px 0 14px}
.panel p{color:var(--muted)}
.panel ul{list-style:none;margin-top:18px;display:grid;gap:8px}
.panel li{font-family:var(--mono);font-size:.82rem;display:flex;gap:10px}
.panel li::before{content:"+";color:var(--gold-d);font-weight:700}
.hint{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-top:18px}

/* build slider */
.scale{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:34px;border:1px solid rgba(255,255,255,.2);border-radius:4px;overflow:hidden}
.scale button{background:transparent;color:#cdbad8;border:0;padding:18px 12px;font:600 1rem var(--display);cursor:pointer;transition:.25s;border-right:1px solid rgba(255,255,255,.2)}
.scale button:last-child{border-right:0}
.scale button[aria-selected=true]{background:var(--gold);color:var(--ink)}
.scale-out{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.stack{display:flex;gap:6px;align-items:flex-end;height:180px}
.stack i{flex:1;background:var(--orchid);border-radius:2px 2px 0 0;opacity:.85;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.stack i:nth-child(odd){background:var(--gold)}
.scale-out h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:12px}
.scale-out p{color:#d6c7df}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags span{font-family:var(--mono);font-size:.74rem;border:1px solid rgba(255,255,255,.28);padding:6px 10px;border-radius:2px;color:#e9dfef}

/* guarantee */
.guar{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);align-items:center;background:var(--gold);color:var(--ink);padding:clamp(28px,4vw,48px) clamp(24px,4vw,56px);border-radius:4px}
.guar b{font-family:var(--display);font-size:clamp(3.4rem,8vw,6.5rem);line-height:.9;letter-spacing:-.04em}
.guar h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin-bottom:6px}
.guar p{max-width:56ch}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:34px 30px;text-decoration:none;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s}
.tile:hover{transform:translateY(-6px);box-shadow:0 24px 40px -24px rgba(58,29,77,.4);border-color:var(--orchid)}
.tile .n{font-family:var(--mono);font-size:.78rem;color:var(--orchid-d)}
.tile h3{margin:26px 0 10px;font-size:1.55rem}
.tile p{color:var(--muted);font-size:.98rem;flex:1}
.tile .go{margin-top:24px;font-weight:600;display:flex;align-items:center;gap:8px}
.tile .go::after{content:"→";transition:transform .2s}
.tile:hover .go::after{transform:translateX(5px)}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:linear-gradient(90deg,var(--gold),var(--orchid))}
.step{padding:0 18px 0 0;position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--mask);border:2px solid var(--gold);color:var(--gold);font-family:var(--mono);font-size:.82rem;position:relative}
.step h3{font-size:1.1rem;margin:20px 0 8px}
.step p{font-size:.93rem;color:#c7b6d2}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:1rem}
.spec th,.spec td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--orchid-d);width:32%;letter-spacing:.04em}

/* two col, values */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.vals div{padding:20px;border:1px solid var(--line);background:#fff}
.vals b{font-family:var(--display);font-size:1.15rem;display:block}
.vals span{font-size:.9rem;color:var(--muted)}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.principle{background:#fff;padding:34px 30px}
.principle .n{font-family:var(--mono);font-size:.78rem;color:var(--orchid-d)}
.principle h3{margin:16px 0 10px}
.principle p{color:var(--muted);font-size:.98rem}
.timeline{border-left:2px solid var(--orchid);padding-left:30px;display:grid;gap:34px}
.timeline div{position:relative}
.timeline div::before{content:"";position:absolute;left:-39px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--orchid)}
.timeline b{font-family:var(--mono);font-size:.85rem;color:var(--orchid-d)}

/* quality */
.iso{display:flex;align-items:center;gap:22px;background:var(--mask);color:#fff;padding:28px 32px;border-radius:4px}
.iso b{font-family:var(--display);font-size:3rem;color:var(--gold);line-height:1}
.checks{list-style:none;display:grid;gap:0}
.checks li{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:12px}
.checks li::before{content:"✓";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);font-weight:700;font-size:.9rem}
.checks b{font-family:var(--display);font-size:1.15rem;display:block}
.checks span{color:var(--muted);font-size:.97rem}

/* contact */
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px)}
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.04em;display:grid;gap:8px}
input,select,textarea{font:400 1rem var(--body);padding:14px 14px;border:1.5px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);width:100%}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orchid-d);box-shadow:0 0 0 3px rgba(197,123,192,.25)}
.cards{display:grid;gap:14px}
.ccard{padding:24px 26px;background:var(--paper);border-left:3px solid var(--orchid)}
.ccard .mono{color:var(--orchid-d);display:block;margin-bottom:6px}
.ccard a,.ccard b{font-family:var(--display);font-size:1.35rem;text-decoration:none;font-weight:700}
.ccard a:hover{color:var(--orchid-d)}
.note{font-size:.88rem;color:var(--muted);margin-top:4px}
.ok{background:#e9f7ee;border-left:3px solid #2c9a59;padding:16px 18px;display:none}

/* cta band */
.band{background:linear-gradient(120deg,var(--mask-3),var(--mask));color:#fff;padding:clamp(60px,8vw,100px) 0;position:relative;overflow:hidden}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.band h2{max-width:20ch}
.band p{color:#cdbad8;margin-top:10px}

/* footer */
.ftr{background:#12081a;color:#b9a6c6;padding:70px 0 30px;font-size:.95rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:50px}
.ftr h4{font-family:var(--mono);font-weight:500;font-size:.75rem;color:var(--gold);letter-spacing:.08em;margin-bottom:16px}
.ftr a{display:block;text-decoration:none;padding:4px 0;color:#d6c7df}
.ftr a:hover{color:#fff}
.ftr img{height:58px;width:auto;margin-bottom:16px;border-radius:3px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.82rem}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.pulse{display:none}}

@media (max-width:980px){
  .nav{position:fixed;inset:78px 0 auto 0;background:var(--mask);flex-direction:column;align-items:flex-start;gap:0;padding:10px var(--gut) 28px;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:.3s}
  .nav.open{max-height:520px;opacity:1;pointer-events:auto;overflow:visible}
  .nav a{padding:16px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.1rem}
  .nav .btn{margin-top:18px;width:auto;border:0}
  .burger{display:block}
  .hdr{background:rgba(28,13,39,.94)}
  .inspect,.scale-out,.two,.cgrid{grid-template-columns:1fr}
  .tiles,.principles{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .step{display:grid;grid-template-columns:46px 1fr;gap:0 18px;padding:0}
  .step h3{margin:0 0 6px}
  .step p{grid-column:2}
  .step::before{grid-row:1 / span 2}
  .guar{grid-template-columns:1fr;text-align:left}
  .fgrid{grid-template-columns:1fr 1fr}
  .hero::after{background:linear-gradient(0deg,rgba(28,13,39,.95) 0%,rgba(28,13,39,.7) 55%,rgba(28,13,39,.35) 100%)}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand span small{display:none}
  .brand img{height:46px}
  .row2,.vals{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .scale button{font-size:.88rem;padding:14px 4px}
  .panel{min-height:0}
  .spec th{width:36%}
  .spec th,.spec td{padding:14px 8px;font-size:.95rem}
  .phero::after{display:none}
  .iso{flex-direction:column;align-items:flex-start}
  .hero-facts{gap:20px 28px}
}
