@font-face{font-family:'Orbitron';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/orbitron-400.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/orbitron-700.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/orbitron-800.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-weight:900;font-style:normal;font-display:swap;src:url(fonts/orbitron-900.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/rajdhani-400.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/rajdhani-600.woff2) format('woff2')}
@font-face{font-family:'Share Tech Mono';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/share-tech-mono-400.woff2) format('woff2')}

:root{
  --void:#05040B; --navy:#090B20; --panel:#0a0616; --panel2:#0d0820;
  --mag:#F400D7; --pink:#FF19B7; --red:#FF1748; --uv:#6C2BFF;
  --cyan:#00E7FF; --org:#FF5A00; --warm:#FFF6E8;
  --bd:rgba(244,0,215,.42); --bd-hard:rgba(244,0,215,.75); --bd2:rgba(0,231,255,.30);
  --tx:#d9d2ec; --dim:#8b86ad; --dim2:#565177;
  --fh:'Orbitron',sans-serif; --fe:'elevon','Elevon ThreeG','Orbitron',sans-serif;
  --fb:'Rajdhani',sans-serif; --fm:'Share Tech Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--tx);font-family:var(--fb);font-size:16px;line-height:1.55;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.14) 3px,rgba(0,0,0,.14) 4px);pointer-events:none;z-index:9990}
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 55%,rgba(2,1,6,.55) 100%);pointer-events:none;z-index:9991}
::selection{background:rgba(244,0,215,.35);color:#fff}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--mag),var(--uv));border-radius:4px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

/* ═══ HUD FRAME PRIMITIVES — brand system §05 ═══ */
.oct{--cut:14px;position:relative;background:linear-gradient(160deg,rgba(244,0,215,.75),rgba(108,43,255,.5) 40%,rgba(244,0,215,.35) 70%,rgba(0,231,255,.55));clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));padding:1px}
.oct-in{background:linear-gradient(180deg,var(--panel2),var(--panel) 60%,#070412);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));height:100%}
.oct.cy{background:linear-gradient(160deg,rgba(0,231,255,.7),rgba(108,43,255,.45) 45%,rgba(0,231,255,.3) 75%,rgba(244,0,215,.5))}
.oct.or{background:linear-gradient(160deg,rgba(255,90,0,.8),rgba(255,23,72,.5) 45%,rgba(255,90,0,.3) 75%,rgba(255,246,232,.5))}
.corner{position:absolute;width:20px;height:20px;z-index:5;pointer-events:none}
.c-tl{top:-2px;left:-2px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);filter:drop-shadow(0 0 6px rgba(0,231,255,.8))}
.c-tr{top:-2px;right:-2px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);filter:drop-shadow(0 0 6px rgba(0,231,255,.8))}
.c-bl{bottom:-2px;left:-2px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan);filter:drop-shadow(0 0 6px rgba(0,231,255,.8))}
.c-br{bottom:-2px;right:-2px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);filter:drop-shadow(0 0 6px rgba(0,231,255,.8))}
.ticks{position:absolute;top:-1px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:6}
.ticks i{width:14px;height:3px;background:var(--mag);box-shadow:0 0 8px rgba(244,0,215,.9)}
.ticks i:nth-child(2){background:var(--cyan);box-shadow:0 0 8px rgba(0,231,255,.9)}
.dots{position:absolute;bottom:6px;right:14px;display:flex;gap:4px;z-index:6}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--org);box-shadow:0 0 6px rgba(255,90,0,.9)}
.dots i:nth-child(2){background:var(--mag);box-shadow:0 0 6px rgba(244,0,215,.9)}
.dots i:nth-child(3){background:var(--cyan);box-shadow:0 0 6px rgba(0,231,255,.9)}

/* ═══ HEADER ═══ */
.top{position:sticky;top:0;z-index:1000;background:rgba(5,4,11,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(244,0,215,.25);display:flex;align-items:center;gap:18px;padding:0 26px;height:58px}
.top-mark{height:34px;width:auto;cursor:pointer;filter:drop-shadow(0 0 14px rgba(108,43,255,.6))}
.top-logo{font-family:var(--fh);font-weight:900;font-size:13px;letter-spacing:.22em;color:var(--pink);text-shadow:0 0 18px rgba(244,0,215,.7);white-space:nowrap;cursor:pointer}
.top-div{width:1px;height:26px;background:linear-gradient(var(--mag),transparent);opacity:.6}
.top-logo em{font-style:normal;color:var(--cyan);text-shadow:0 0 14px rgba(0,231,255,.7)}
.top-sub{font-family:var(--fm);font-size:10px;letter-spacing:.24em;color:var(--dim2);white-space:nowrap}
.top nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.top nav a{font-family:var(--fh);font-size:9px;letter-spacing:.14em;color:var(--dim);padding:7px 10px;border:1px solid transparent;transition:all .2s;text-transform:uppercase;cursor:pointer}
.top nav a:hover{color:var(--cyan);border-color:rgba(0,231,255,.35);text-shadow:0 0 10px rgba(0,231,255,.6)}
.top nav a.on{color:var(--pink);border-color:rgba(244,0,215,.5);text-shadow:0 0 12px rgba(244,0,215,.7)}
.qs-chip{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--org);border:1px solid rgba(255,90,0,.5);padding:6px 12px;cursor:pointer;white-space:nowrap;animation:vpulse 3.2s ease-in-out infinite}
@keyframes vpulse{0%,100%{box-shadow:0 0 14px rgba(255,90,0,.15) inset,0 0 10px rgba(255,90,0,.12)}50%{box-shadow:0 0 20px rgba(255,90,0,.3) inset,0 0 22px rgba(255,90,0,.3)}}
.burger{display:none;margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--cyan);border:1px solid var(--bd2);padding:7px 11px;cursor:pointer}

/* ═══ LAYOUT ═══ */
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 28px}
section{padding:74px 0 30px;position:relative}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.sec-idx{font-family:var(--fm);font-size:13px;color:var(--cyan);letter-spacing:.2em;text-shadow:0 0 10px rgba(0,231,255,.6)}
.sec-title{font-family:var(--fh);font-weight:900;font-size:clamp(22px,3.4vw,34px);letter-spacing:.12em;color:var(--warm);text-transform:uppercase;text-shadow:0 0 26px rgba(244,0,215,.35)}
.sec-title b{color:var(--pink);text-shadow:0 0 22px rgba(244,0,215,.8)}
.sec-rule{height:2px;margin:10px 0 14px;background:linear-gradient(90deg,var(--mag),rgba(244,0,215,.25) 35%,transparent 75%);box-shadow:0 0 12px rgba(244,0,215,.45);position:relative}
.sec-rule::after{content:'';position:absolute;right:0;top:-2px;width:60px;height:6px;background:repeating-linear-gradient(90deg,var(--cyan) 0 6px,transparent 6px 12px);opacity:.7}
.sec-note{font-family:var(--fm);font-size:11px;color:var(--dim);letter-spacing:.14em;margin-bottom:26px;text-transform:uppercase}
.sec-note b{color:var(--org)}
.kicker{font-family:var(--fh);font-size:10px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:10px;text-shadow:0 0 12px rgba(0,231,255,.5)}
.lead{font-size:18px;color:var(--tx);max-width:860px;line-height:1.65}
.lead strong{color:var(--pink);font-weight:600}
.lead em{color:var(--cyan);font-style:normal}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.on{opacity:1;transform:none}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:15px 24px;cursor:pointer;border:1px solid var(--bd2);color:var(--cyan);background:rgba(9,11,32,.6);transition:.2s;clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}
.btn:hover{transform:translateY(-2px);color:var(--warm);border-color:var(--cyan);box-shadow:0 0 24px rgba(0,231,255,.25)}
.btn.pri{background:linear-gradient(100deg,var(--mag),#a300bb);border-color:transparent;color:#fff;box-shadow:0 0 34px rgba(244,0,215,.3)}
.btn.pri:hover{box-shadow:0 0 46px rgba(244,0,215,.5)}
.btn.alert{background:linear-gradient(100deg,var(--org),#c23600);border-color:transparent;color:#fff;box-shadow:0 0 30px rgba(255,90,0,.3)}

/* ═══ CHIPS / DATABOX / RAIL ═══ */
.chip{font-family:var(--fm);font-size:10px;letter-spacing:.14em;padding:5px 12px;border:1px solid;text-transform:uppercase;display:inline-block}
.chip.m{color:var(--pink);border-color:rgba(244,0,215,.55);background:rgba(244,0,215,.08);box-shadow:0 0 12px rgba(244,0,215,.2)}
.chip.c{color:var(--cyan);border-color:rgba(0,231,255,.5);background:rgba(0,231,255,.07);box-shadow:0 0 12px rgba(0,231,255,.18)}
.chip.o{color:var(--org);border-color:rgba(255,90,0,.55);background:rgba(255,90,0,.08);box-shadow:0 0 12px rgba(255,90,0,.2)}
.chip.r{color:#ff5d7e;border-color:rgba(255,23,72,.55);background:rgba(255,23,72,.08);box-shadow:0 0 12px rgba(255,23,72,.2)}
.databox{border:1px solid rgba(0,231,255,.4);padding:12px 16px;font-family:var(--fm);font-size:10.5px;color:var(--cyan);letter-spacing:.12em;line-height:1.9;position:relative;text-transform:uppercase}
.databox::before{content:'';position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.databox::after{content:'';position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.databox b{color:var(--warm)}
.railspine{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column;gap:10px;padding:12px 7px;border:1px solid rgba(244,0,215,.35);background:rgba(5,4,11,.7);backdrop-filter:blur(6px)}
.railspine i{width:24px;height:24px;border:1px solid rgba(0,231,255,.55);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--cyan);font-style:normal;box-shadow:0 0 8px rgba(0,231,255,.2) inset;cursor:pointer;transition:.2s}
.railspine i:hover{border-color:rgba(244,0,215,.7);color:var(--pink);box-shadow:0 0 12px rgba(244,0,215,.3) inset}
.railspine i.on{border-color:rgba(244,0,215,.8);color:var(--pink);background:rgba(244,0,215,.08)}

/* ═══ DATA STRIP ═══ */
.strip{border-top:1px solid rgba(244,0,215,.3);border-bottom:1px solid rgba(244,0,215,.3);background:rgba(9,4,18,.75);overflow:hidden;white-space:nowrap;padding:9px 0;position:relative}
.strip-inner{display:inline-block;animation:marq 44s linear infinite;font-family:var(--fm);font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
.strip-inner b{color:var(--mag);text-shadow:0 0 10px rgba(244,0,215,.6)}
.strip-inner i{font-style:normal;color:var(--cyan)}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ PAGE 1 · HOME HERO ═══ */
.hero{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:70px 20px 60px}
.hero-field{position:absolute;inset:-20%;background:
 radial-gradient(ellipse 60% 45% at 50% 42%,rgba(244,0,215,.20),transparent 60%),
 radial-gradient(ellipse 45% 35% at 22% 75%,rgba(108,43,255,.16),transparent 65%),
 radial-gradient(ellipse 40% 30% at 80% 25%,rgba(0,231,255,.10),transparent 60%),
 radial-gradient(ellipse 70% 60% at 50% 110%,rgba(255,23,72,.10),transparent 65%);
 animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translateY(-8px) scale(1)}100%{transform:translateY(10px) scale(1.03)}}
.hero-mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(0,231,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,231,255,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 75%)}
.hero-frame{position:relative;width:min(880px,94vw);padding:52px 44px 40px;text-align:center;z-index:2}
.hero-brand-line{font-family:var(--fm);font-size:11px;letter-spacing:.4em;color:var(--dim);text-transform:uppercase;margin-bottom:26px}
.hero-brand-line b{color:var(--org)}
.hero-logo{width:min(660px,82vw);margin:0 auto;filter:drop-shadow(0 0 34px rgba(244,0,215,.55)) drop-shadow(0 0 90px rgba(244,0,215,.28));animation:logoPulse 5s ease-in-out infinite}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 30px rgba(244,0,215,.5)) drop-shadow(0 0 80px rgba(244,0,215,.25))}50%{filter:drop-shadow(0 0 44px rgba(244,0,215,.7)) drop-shadow(0 0 120px rgba(244,0,215,.4))}}
.hero-tag{margin-top:30px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.hero-word{font-family:var(--fe);font-weight:300;font-size:15px;letter-spacing:.4em;text-transform:uppercase}
.hero-word.w1{color:var(--warm);text-shadow:0 0 14px rgba(255,246,232,.5)}
.hero-word.w2{color:var(--org);text-shadow:0 0 16px rgba(255,90,0,.7)}
.hero-word.w3{color:var(--cyan);text-shadow:0 0 16px rgba(0,231,255,.7)}
.hero-sep{width:5px;height:5px;background:var(--mag);transform:rotate(45deg);box-shadow:0 0 10px rgba(244,0,215,.9)}
.hero-desc{margin:22px auto 0;font-size:16px;color:var(--dim);max-width:600px;line-height:1.65}
.hero-desc b{color:var(--pink);font-weight:600}
.hero-cta{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-meta{margin-top:34px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}
.hero-meta span b{color:var(--cyan)}

/* ═══ CORE CARDS ═══ */
.core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.core-card .oct-in{padding:26px 24px 30px}
.core-word{font-family:var(--fe);font-weight:300;font-size:24px;letter-spacing:.18em;margin-bottom:4px}
.core-card.k1 .core-word{color:var(--warm);text-shadow:0 0 18px rgba(255,246,232,.4)}
.core-card.k2 .core-word{color:var(--org);text-shadow:0 0 18px rgba(255,90,0,.6)}
.core-card.k3 .core-word{color:var(--cyan);text-shadow:0 0 18px rgba(0,231,255,.6)}
.core-lbl{font-family:var(--fm);font-size:10px;letter-spacing:.24em;color:var(--dim2);text-transform:uppercase;margin-bottom:14px}
.core-card p{font-size:14.5px;color:var(--dim);line-height:1.6}
.core-card p b{color:var(--tx)}

/* ═══ QUOTE ═══ */
.quote{position:relative;padding:32px 40px 28px 96px;margin-top:26px}
.quote .oct-in{position:absolute;inset:0}
.quote-mark{position:absolute;left:30px;top:14px;font-family:var(--fh);font-size:72px;font-weight:900;color:var(--mag);text-shadow:0 0 26px rgba(244,0,215,.7);line-height:1;z-index:2}
.quote-text{position:relative;z-index:2;font-weight:500;font-size:22px;line-height:1.5;color:var(--warm)}
.quote-text b{color:var(--pink)}
.quote-src{position:relative;z-index:2;margin-top:10px;font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}

/* ═══ SPLIT / FEATURE ═══ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.feature .oct-in{padding:10px}
.feature-img{position:relative;overflow:hidden}
.feature-img img{width:100%;transition:transform .6s ease}
.feature:hover .feature-img img{transform:scale(1.015)}
.feature-bar{display:flex;align-items:center;gap:16px;padding:14px 12px 8px;flex-wrap:wrap}
.pg-chip{font-family:var(--fh);font-weight:900;font-size:13px;color:var(--void);background:var(--mag);padding:4px 12px;box-shadow:0 0 18px rgba(244,0,215,.6);letter-spacing:.1em}
.feature-title{font-family:var(--fe);font-weight:300;font-size:15px;letter-spacing:.18em;color:var(--warm);text-transform:uppercase}
.feature-sub{font-family:var(--fm);font-size:10px;color:var(--dim2);letter-spacing:.16em;text-transform:uppercase}
.feature-note{margin-left:auto;font-family:var(--fm);font-size:10px;color:var(--cyan);letter-spacing:.14em;text-transform:uppercase}

/* ═══ GALLERY ═══ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-item{position:relative;overflow:hidden;border:1px solid rgba(244,0,215,.35);transition:border-color .25s,box-shadow .25s}
.gal-item:hover{border-color:var(--bd-hard);box-shadow:0 0 26px rgba(244,0,215,.3)}
.gal-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10.6;transition:transform .6s}
.gal-item:hover img{transform:scale(1.04)}
.gal-tag{position:absolute;left:0;bottom:0;right:0;padding:22px 12px 9px;background:linear-gradient(transparent,rgba(4,2,9,.94));font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;color:var(--pink);text-transform:uppercase}

/* ═══ USE / AVOID ═══ */
.ua-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ua .oct-in{padding:24px 26px}
.ua h4{font-family:var(--fh);font-size:13px;letter-spacing:.22em;margin-bottom:14px;text-transform:uppercase}
.ua.use h4{color:#3dffc5;text-shadow:0 0 14px rgba(61,255,197,.5)}
.ua.avoid h4{color:var(--red);text-shadow:0 0 14px rgba(255,23,72,.5)}
.ua li{list-style:none;font-size:14px;color:var(--dim);padding:8px 0 8px 26px;position:relative;border-bottom:1px dashed rgba(255,255,255,.05)}
.ua li b{color:var(--tx)}
.ua.use li::before{content:'▸';position:absolute;left:4px;color:#3dffc5}
.ua.avoid li::before{content:'✕';position:absolute;left:4px;color:var(--red);font-size:11px;top:11px}

/* ═══ PAGE 2 · QUICKSTART FUNNEL ═══ */
.qs-hero{position:relative;overflow:hidden;padding:64px 0 20px;
  background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(255,90,0,.13),transparent 62%),
             radial-gradient(ellipse 55% 45% at 20% 80%,rgba(244,0,215,.13),transparent 65%)}
.qs-stage{display:grid;grid-template-columns:1fr minmax(320px,420px) 1fr;gap:24px;align-items:center;max-width:1280px;margin:0 auto;padding:0 28px}
.qs-art{position:relative}
.qs-art img{width:100%;object-fit:cover;aspect-ratio:9/15.5;filter:saturate(1.05)}
.qs-art .gal-tag{color:var(--cyan)}
.qs-core{text-align:center}
.qs-eyebrow{font-family:var(--fm);font-size:10px;letter-spacing:.3em;color:var(--org);text-transform:uppercase;margin-bottom:16px}
.qs-title{font-family:var(--fh);font-weight:900;font-size:clamp(46px,7.4vw,88px);line-height:.88;letter-spacing:-.03em;color:var(--warm);text-transform:uppercase;text-shadow:0 0 40px rgba(244,0,215,.45)}
.qs-title b{color:var(--pink);text-shadow:0 0 30px rgba(244,0,215,.9)}
.qs-sub{margin:20px auto 0;max-width:430px;color:var(--dim);font-size:16px;line-height:1.65}
.qs-console{margin-top:28px;text-align:left}
.qs-console .oct-in{padding:26px 24px 28px}
.qs-console label span{display:block;margin-bottom:8px;font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.qs-console input{width:100%;height:50px;padding:0 14px;color:var(--warm);border:1px solid rgba(0,231,255,.35);background:rgba(5,4,11,.8);outline:none;font-family:var(--fm);font-size:13px;letter-spacing:.06em}
.qs-console input:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(0,231,255,.18)}
.qs-console .btn{width:100%;justify-content:center;margin-top:14px}
.qs-fine{margin-top:14px;font-family:var(--fm);font-size:9px;letter-spacing:.14em;color:var(--dim2);text-transform:uppercase;line-height:1.8}

/* countdown */
.cd{display:flex;gap:9px;justify-content:center;margin:30px 0 8px;flex-wrap:wrap}
.cd div{min-width:86px;padding:14px 12px;border:1px solid rgba(255,90,0,.42);background:rgba(255,90,0,.05);text-align:center;position:relative}
.cd div::before{content:'';position:absolute;top:-1px;left:-1px;width:8px;height:8px;border-top:2px solid var(--org);border-left:2px solid var(--org)}
.cd b{display:block;font-family:var(--fh);font-weight:900;font-size:34px;line-height:1;color:var(--org);text-shadow:0 0 20px rgba(255,90,0,.6)}
.cd span{display:block;margin-top:9px;font-family:var(--fm);font-size:8.5px;letter-spacing:.2em;color:var(--dim2)}

/* funnel diagram */
.funnel{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:12px;align-items:stretch}
.fn{position:relative;padding:26px 20px 24px;border:1px solid rgba(244,0,215,.3);border-right:0;background:linear-gradient(180deg,rgba(13,8,32,.9),rgba(7,4,18,.9))}
.fn:last-child{border-right:1px solid rgba(244,0,215,.3)}
.fn::after{content:'▸';position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:4;color:var(--mag);font-size:15px;text-shadow:0 0 10px rgba(244,0,215,.9);background:var(--void);padding:2px}
.fn:last-child::after{content:''}
.fn-no{font-family:var(--fm);font-size:9.5px;letter-spacing:.2em;color:var(--dim2)}
.fn-ico{margin:14px 0 12px;font-size:22px;color:var(--cyan);text-shadow:0 0 14px rgba(0,231,255,.6)}
.fn h4{font-family:var(--fh);font-size:12px;letter-spacing:.14em;color:var(--warm);text-transform:uppercase;margin-bottom:8px}
.fn p{font-size:13px;color:var(--dim);line-height:1.55}
.fn .metric{margin-top:12px;font-family:var(--fm);font-size:9px;letter-spacing:.14em;color:var(--org);text-transform:uppercase}
.fn.hot{background:linear-gradient(180deg,rgba(244,0,215,.12),rgba(7,4,18,.92));border-color:rgba(244,0,215,.6)}

/* what's inside strip */
.inside{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.inside .oct-in{padding:22px 20px 24px;height:100%}
.inside .n{font-family:var(--fh);font-weight:900;font-size:30px;color:var(--pink);text-shadow:0 0 18px rgba(244,0,215,.6);line-height:1}
.inside h4{font-family:var(--fh);font-size:11px;letter-spacing:.16em;color:var(--warm);text-transform:uppercase;margin:12px 0 8px}
.inside p{font-size:13px;color:var(--dim);line-height:1.55}

/* ═══ PAGE 3 · UNIVERSE (zigzag) ═══ */
.spread{position:relative;min-height:460px;overflow:hidden;border-bottom:1px solid rgba(0,231,255,.25)}
.spread>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.spread::after{content:'';position:absolute;inset:0;background:linear-gradient(92deg,rgba(5,4,11,.96) 22%,rgba(5,4,11,.35) 78%)}
.spread>div{position:relative;z-index:2;max-width:660px;padding:110px 28px}
@media(min-width:1181px){.spread>div{padding-left:84px}}
.spread h2{margin:16px 0;font-family:var(--fh);font-weight:900;font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.045em;color:var(--warm);text-shadow:0 0 34px rgba(244,0,215,.4)}
.spread h2 b{color:var(--pink)}
.spread p{color:#cdc7dc;font-size:18px;line-height:1.6}
.zig{display:grid;gap:16px}
.zig article{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:center;padding:18px;border:1px solid rgba(244,0,215,.22);background:linear-gradient(120deg,rgba(13,8,32,.55),transparent 70%)}
.zig article:nth-child(even){grid-template-columns:1fr 340px}
.zig article:nth-child(even) .zig-art{order:2}
.zig-art{position:relative;overflow:hidden;border:1px solid rgba(0,231,255,.3)}
.zig-art img{width:100%;height:230px;object-fit:cover;transition:transform .6s}
.zig article:hover .zig-art img{transform:scale(1.05)}
.zig-no{position:absolute;top:10px;left:12px;z-index:3;font-family:var(--fh);font-weight:900;font-size:26px;color:var(--warm);text-shadow:0 0 14px rgba(0,0,0,.9)}
.zig h3{font-family:var(--fh);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--warm);text-transform:uppercase;margin-bottom:6px}
.zig h3 span{color:var(--cyan);font-size:12px;letter-spacing:.2em;display:block;margin-bottom:8px;font-family:var(--fm)}
.zig p{color:var(--dim);font-size:15px;line-height:1.6;margin-bottom:12px}

/* ═══ PAGE 4 · SPECIES (dossier grid) ═══ */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.spec-card{position:relative;overflow:hidden;border:1px solid rgba(244,0,215,.34);min-height:400px;display:flex;flex-direction:column;justify-content:flex-end}
.spec-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s}
.spec-card:hover img{transform:scale(1.05)}
.spec-card::after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(4,2,9,.97) 72%)}
.spec-card>div{position:relative;z-index:3;padding:18px}
.spec-card .idx{position:absolute;top:12px;left:14px;z-index:3;font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--cyan);text-shadow:0 0 8px rgba(0,0,0,.9)}
.spec-card h3{font-family:var(--fh);font-weight:700;font-size:17px;letter-spacing:.05em;color:var(--warm);text-transform:uppercase;margin-bottom:7px}
.spec-card p{font-size:13px;color:#a9a3bd;line-height:1.5}
.spec-card .tag{margin-top:10px;font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--pink);text-transform:uppercase}
.spec-table{width:100%;border-collapse:collapse;margin-top:16px}
.spec-table th{text-align:left;padding:12px 12px;border-bottom:1px solid var(--bd);font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}
.spec-table td{padding:13px 12px;border-bottom:1px solid rgba(255,255,255,.055);color:var(--dim);font-size:14px}
.spec-table td.n{font-family:var(--fh);font-weight:700;color:var(--warm);font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.spec-table td.c{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--org);text-transform:uppercase;white-space:nowrap}

/* ═══ PAGE 5 · CLASSES (flare ring) ═══ */
.ring-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,64px);align-items:center}
.ring{position:relative;width:min(100%,440px);aspect-ratio:1/1;margin:0 auto;align-self:center}
.ring-orb{position:absolute;border-radius:50%;border:1px solid rgba(0,231,255,.28);box-shadow:inset 0 0 40px rgba(0,231,255,.04)}
.r1{inset:6%}.r2{inset:19%}.r3{inset:32%}
.ring-spin{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(244,0,215,.35);animation:spin 34s linear infinite}
.ring-spin::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--mag);top:50%;left:-5px;box-shadow:0 0 16px var(--mag)}
@keyframes spin{to{transform:rotate(360deg)}}
.ring-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:39%;aspect-ratio:1/1;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(circle at 40% 35%,rgba(255,246,232,.9),var(--org) 26%,var(--mag) 72%);
  box-shadow:0 0 70px rgba(244,0,215,.5),0 0 130px rgba(255,90,0,.25)}
.ring-core b{font-family:var(--fh);font-weight:900;font-size:15px;color:var(--void);letter-spacing:.1em;line-height:1.25}
.ring-node{position:absolute;padding:9px 13px;border:1px solid var(--bd2);background:rgba(5,4,11,.92);font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;white-space:nowrap;box-shadow:0 0 18px rgba(0,231,255,.14)}
.n-force{top:2%;left:50%;transform:translateX(-50%)}
.n-insight{top:50%;right:-4%;transform:translateY(-50%)}
.n-influence{bottom:2%;left:50%;transform:translateX(-50%)}
.n-invention{top:50%;left:-4%;transform:translateY(-50%)}
.path-list{border-top:1px solid var(--bd)}
.path-list article{padding:22px 6px;display:grid;grid-template-columns:52px 1fr 34px;gap:18px;align-items:center;border-bottom:1px solid var(--bd);transition:.2s}
.path-list article:hover{background:linear-gradient(90deg,rgba(244,0,215,.07),transparent)}
.path-list .pn{font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--org)}
.path-list h3{font-family:var(--fh);font-weight:700;font-size:21px;letter-spacing:.05em;color:var(--warm);text-transform:uppercase;margin-bottom:5px}
.path-list p{color:var(--dim);font-size:15px;line-height:1.55}
.path-list .pl{font-family:var(--fh);font-weight:300;font-size:26px;color:var(--cyan);text-align:right}

/* ═══ PAGE 6 · EDITION 1 ═══ */
.ed{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,4vw,60px);align-items:start}
.ed-cover{position:relative}
.ed-cover .oct-in{padding:12px}
.ed-cover img{width:100%;aspect-ratio:9/13;object-fit:cover}
.ed-cover .stamp{position:absolute;bottom:22px;left:22px;right:22px;z-index:4;font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase;background:rgba(5,4,11,.85);border:1px solid rgba(0,231,255,.32);padding:9px 11px}
.ed-specs{width:100%;border-collapse:collapse;margin:22px 0}
.ed-specs td{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--tx);font-size:15px}
.ed-specs td:first-child{width:180px;font-family:var(--fm);font-size:10px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;vertical-align:top;padding-right:16px}
.price{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin:22px 0 6px}
.price b{font-family:var(--fh);font-weight:900;font-size:52px;color:var(--warm);letter-spacing:-.03em;text-shadow:0 0 26px rgba(244,0,215,.4)}
.price s{color:var(--dim2);font-size:19px}
.chan{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

/* ═══ PAGE 7 · PROCESS (quiet) ═══ */
.prose{max-width:760px}
.prose .lede{font-size:21px;color:var(--tx);line-height:1.65;margin-bottom:34px}
.prose h3{font-family:var(--fh);font-weight:700;font-size:14px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;margin:38px 0 12px;text-shadow:0 0 12px rgba(0,231,255,.4)}
.prose p{color:var(--dim);font-size:16.5px;line-height:1.75;margin-bottom:14px}
.prose p b{color:var(--tx)}

/* ═══ PAGE · ABOUT (Octokraken the company) ═══ */
.co-hero{position:relative;overflow:hidden;padding:78px 0 30px;
 background:radial-gradient(ellipse 62% 52% at 26% 34%,rgba(108,43,255,.22),transparent 62%),
            radial-gradient(ellipse 50% 40% at 82% 72%,rgba(244,0,215,.13),transparent 66%)}
.co-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,72px);align-items:center;max-width:1280px;margin:0 auto;padding:0 28px}
.co-mark{position:relative;display:grid;place-items:center;padding:44px 30px}
.co-mark img{width:min(100%,420px);filter:drop-shadow(0 0 40px rgba(108,43,255,.6)) drop-shadow(0 0 90px rgba(108,43,255,.25));animation:okPulse 6s ease-in-out infinite}
@keyframes okPulse{0%,100%{filter:drop-shadow(0 0 34px rgba(108,43,255,.5)) drop-shadow(0 0 80px rgba(108,43,255,.2))}50%{filter:drop-shadow(0 0 50px rgba(108,43,255,.75)) drop-shadow(0 0 120px rgba(108,43,255,.35))}}
.co-h1{font-family:var(--fh);font-weight:900;font-size:clamp(30px,4.6vw,58px);line-height:1.02;letter-spacing:-.02em;color:var(--warm);text-transform:uppercase;text-shadow:0 0 30px rgba(108,43,255,.4)}
.co-h1 b{color:var(--uv);text-shadow:0 0 26px rgba(108,43,255,.9)}
.co-lede{margin-top:20px;font-size:19px;color:var(--tx);line-height:1.65;max-width:620px}
.co-lede b{color:var(--pink)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--bd2)}
.cap-grid>div{padding:30px 26px;min-height:190px;border-right:1px solid var(--bd2);border-bottom:1px solid var(--bd2);display:flex;flex-direction:column}
.cap-grid>div:nth-child(3n){border-right:0}
.cap-grid>div:nth-last-child(-n+3){border-bottom:0}
.cap-grid .ci{font-size:22px;color:var(--uv);text-shadow:0 0 16px rgba(108,43,255,.7);margin-bottom:14px}
.cap-grid h4{font-family:var(--fh);font-size:12px;letter-spacing:.16em;color:var(--warm);text-transform:uppercase;margin-bottom:9px}
.cap-grid p{font-size:14px;color:var(--dim);line-height:1.55;margin:0}
.cap-grid .st{margin-top:auto;padding-top:14px;font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase}
.focus-band{position:relative;padding:clamp(38px,5vw,68px) clamp(26px,4vw,60px);border-left:3px solid var(--mag);
 background:linear-gradient(100deg,rgba(244,0,215,.16),rgba(108,43,255,.06) 55%,transparent)}
.focus-band .k{font-family:var(--fm);font-size:10px;letter-spacing:.26em;color:var(--cyan);text-transform:uppercase}
.focus-band h2{margin:14px 0 12px;font-family:var(--fh);font-weight:900;font-size:clamp(26px,3.8vw,50px);letter-spacing:-.02em;color:var(--warm);text-transform:uppercase}
.focus-band h2 b{color:var(--pink);text-shadow:0 0 26px rgba(244,0,215,.8)}
.focus-band p{color:var(--tx);font-size:18px;line-height:1.65;max-width:760px}
.team{border-top:1px solid var(--bd)}
.team article{display:grid;grid-template-columns:190px 1fr;gap:clamp(24px,4vw,52px);padding:32px 0;border-bottom:1px solid var(--bd);align-items:center}
.mono{height:190px;display:flex;align-items:flex-end;justify-content:space-between;padding:20px;border:1px solid rgba(255,255,255,.12);
 background:linear-gradient(145deg,rgba(108,43,255,.26),rgba(0,231,255,.05))}
.mono span{font-family:var(--fh);font-weight:800;font-size:42px;color:var(--warm);text-shadow:0 0 20px rgba(108,43,255,.6)}
.mono small{font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--org)}
.team .role{font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
.team h3{margin:10px 0 14px;font-family:var(--fh);font-weight:700;font-size:27px;letter-spacing:.03em;color:var(--warm);text-transform:uppercase}
.team p{max-width:860px;color:var(--dim);font-size:16px;line-height:1.6}
.tl{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--uv)}
.tl article{padding:30px 24px;min-height:210px;border-right:1px solid var(--bd)}
.tl article:last-child{border-right:0}
.tl span{font-family:var(--fm);font-size:9.5px;letter-spacing:.18em;color:var(--uv);text-transform:uppercase}
.tl h3{margin:40px 0 10px;font-family:var(--fh);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--warm);text-transform:uppercase}
.tl p{color:var(--dim);font-size:14px;line-height:1.55}

/* ═══ PAGE 8 · LINKS ═══ */
.hub{max-width:520px;margin:0 auto;padding:60px 24px 90px;text-align:center}
.hub img{width:280px;margin:0 auto 10px;filter:drop-shadow(0 0 26px rgba(244,0,215,.5))}
.hub .sub{font-family:var(--fm);font-size:10px;letter-spacing:.28em;color:var(--cyan);text-transform:uppercase;margin-bottom:32px}
.hub-list{display:grid;gap:10px;text-align:left}
.hub-list a{min-height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(0,231,255,.28);background:rgba(9,11,32,.65);font-family:var(--fh);font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--tx);text-transform:uppercase;transition:.2s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hub-list a:hover{transform:translateX(4px);border-color:var(--bd-hard);color:var(--warm)}
.hub-list a i{font-style:normal;color:var(--mag)}
.hub-list a.lead{background:linear-gradient(100deg,var(--mag),#a300bb);border-color:transparent;color:#fff;box-shadow:0 0 30px rgba(244,0,215,.3)}
.hub-list a.lead i{color:#fff}

/* ═══ CAPTURE BAND ═══ */
.capture{position:relative;padding:0}
.capture .oct-in{padding:clamp(30px,4vw,56px);background:radial-gradient(ellipse 60% 90% at 88% 10%,rgba(244,0,215,.16),transparent 55%),linear-gradient(180deg,var(--panel2),#070412)}
.capture h2{font-family:var(--fh);font-weight:900;font-size:clamp(26px,3.4vw,44px);letter-spacing:.04em;color:var(--warm);text-transform:uppercase;margin:12px 0 10px;text-shadow:0 0 24px rgba(244,0,215,.35)}
.capture p{color:var(--dim);font-size:17px;max-width:620px;line-height:1.6}
.cap-form{display:grid;grid-template-columns:1fr auto;gap:10px;max-width:620px;margin-top:24px}
.cap-form input{height:52px;padding:0 15px;color:var(--warm);border:1px solid rgba(0,231,255,.3);background:rgba(5,4,11,.8);outline:none;font-family:var(--fm);font-size:13px}
.cap-form input:focus{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,231,255,.15)}

/* ═══ FOOTER ═══ */
footer{border-top:1px solid rgba(244,0,215,.25);padding:44px 28px 40px;text-align:center;margin-top:70px}
.foot-logo{width:230px;margin:0 auto 12px;opacity:.95;filter:drop-shadow(0 0 20px rgba(108,43,255,.5))}
.foot-cv{width:150px;margin:0 auto 18px;opacity:.55;filter:drop-shadow(0 0 12px rgba(244,0,215,.35))}
.foot-tag{font-family:var(--fm);font-size:9.5px;letter-spacing:.22em;color:var(--dim2);text-transform:uppercase;margin-bottom:18px}
.foot-nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:20px;font-family:var(--fm);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.foot-nav a{color:var(--cyan);cursor:pointer}
.foot-line{font-family:var(--fm);font-size:9.5px;letter-spacing:.24em;color:rgba(244,0,215,.6);text-transform:uppercase}
.foot-line2{font-family:var(--fm);font-size:9px;letter-spacing:.18em;color:var(--dim2);margin-top:10px;text-transform:uppercase}

.page{display:none}
.page.on{display:block}
.mob{display:none}

@media(max-width:1180px){.railspine{display:none}}
@media(max-width:980px){
 .core-grid,.gal,.spec-grid,.inside{grid-template-columns:1fr 1fr}
 .split,.split.rev,.ring-layout,.ed,.ua-grid,.qs-stage{grid-template-columns:1fr}
 .qs-art{display:none}
 .zig article,.zig article:nth-child(even){grid-template-columns:1fr}
 .zig article:nth-child(even) .zig-art{order:0}
 .funnel{grid-template-columns:1fr 1fr}
 .fn{border-right:1px solid rgba(244,0,215,.3)}
 .fn::after{content:''}
}
@media(max-width:700px){
 .top nav{display:none}.burger{display:block}
 .qs-chip{display:none}
 .top{padding:0 15px;height:52px}.top-sub{display:none}
 .mob{position:fixed;top:52px;left:0;right:0;z-index:999;background:rgba(5,4,11,.985);border-bottom:1px solid var(--bd);padding:12px;display:none}
 .mob.on{display:grid}
 .mob a{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--fh);font-size:11px;letter-spacing:.12em;color:var(--tx);text-transform:uppercase}
 .wrap,.wrap-narrow{padding:0 18px}
 section{padding:52px 0 22px}
 .core-grid,.gal,.spec-grid,.inside,.funnel,.cap-grid{grid-template-columns:1fr}
 .cap-grid>div{border-right:0!important;border-bottom:1px solid var(--bd2)}
 .team article{grid-template-columns:1fr}
 .mono{height:150px}
 .cap-form{grid-template-columns:1fr}
 .hero-frame{padding:34px 14px 26px}
 .quote{padding:26px 22px 24px 66px}
 .quote-mark{font-size:54px;left:20px}
 .spread>div{padding:70px 18px}
 .ed-specs td:first-child{width:120px}
 .cd div{min-width:70px;padding:11px 8px}.cd b{font-size:24px}
}
@media(max-width:980px){
 .co-grid{grid-template-columns:1fr;gap:26px}
 .co-mark{padding:20px 10px}
 .co-mark img{width:min(72%,300px)}
 .tl{grid-template-columns:1fr 1fr}
 .cap-grid{grid-template-columns:1fr 1fr}
 .cap-grid>div:nth-child(3n){border-right:1px solid var(--bd2)}
 .cap-grid>div:nth-child(2n){border-right:0}
 .cap-grid>div:nth-last-child(-n+3){border-bottom:1px solid var(--bd2)}
 .team article{grid-template-columns:150px 1fr;gap:24px}
 .mono{height:150px;padding:14px}.mono span{font-size:32px}
}
@media(max-width:700px){
 .co-mark{order:-1;padding:6px 0 14px}
 .co-mark img{width:min(66%,240px)}
 .tl,.cap-grid{grid-template-columns:1fr}
 .cap-grid>div{border-right:0!important;border-bottom:1px solid var(--bd2)}
 .cap-grid>div:last-child{border-bottom:0}
 .tl article{border-right:0;border-bottom:1px solid var(--bd);min-height:auto}
 .team article{grid-template-columns:1fr;gap:18px}
 .mono{height:120px}
 .focus-band{padding:30px 20px;border-left-width:2px}
 .co-h1{font-size:clamp(26px,7.4vw,38px)}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* ── OCT CARD GRID (home / classes / edition) ───────────────── */
.oct-grid{display:grid;gap:16px;margin-top:34px}
.oct-grid.three{grid-template-columns:repeat(3,1fr)}
.oct-card{position:relative;padding:26px 24px 24px;background:linear-gradient(160deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--bd2);display:flex;flex-direction:column;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:border-color .35s ease,transform .35s ease}
.oct-card:hover{border-color:rgba(244,0,215,.45);transform:translateY(-3px)}
.oct-card::after{content:"";position:absolute;right:14px;bottom:12px;width:26px;height:2px;
  background:linear-gradient(90deg,var(--org),var(--mag),var(--cyan));opacity:.8}
.oct-card .card-no{font-family:var(--fm);font-size:9px;letter-spacing:.2em;color:var(--mag);text-transform:uppercase;margin-bottom:16px}
.oct-card .glyph{font-size:24px;color:var(--cyan);text-shadow:0 0 18px rgba(0,231,255,.55);margin-bottom:14px;line-height:1}
.oct-card h3{font-family:var(--fh);font-size:14px;letter-spacing:.09em;color:var(--warm);text-transform:uppercase;line-height:1.35;margin:0 0 11px}
.oct-card p{font-size:14.5px;color:var(--dim);line-height:1.6;margin:0 0 18px}
.oct-card b{margin-top:auto;font-family:var(--fm);font-size:9px;letter-spacing:.17em;color:var(--cyan);text-transform:uppercase;font-weight:400}

/* ── STORY COPY (split editorial column) ────────────────────── */
.story-copy .mini-label{display:inline-block;font-family:var(--fm);font-size:9.5px;letter-spacing:.24em;
  color:var(--cyan);text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid rgba(0,231,255,.25);margin-bottom:20px}
.story-copy h2{font-family:var(--fh);font-weight:800;font-size:clamp(26px,3.3vw,42px);line-height:1.08;
  letter-spacing:.02em;color:var(--warm);margin:0 0 18px;text-transform:uppercase}
.story-copy p{font-size:16px;color:var(--dim);line-height:1.72;margin:0 0 24px}
.story-copy ul{list-style:none;margin:0 0 26px;padding:0;border-top:1px solid var(--bd2)}
.story-copy ul li{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--bd2);
  font-family:var(--fm);font-size:10px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}
.story-copy ul li b{flex:0 0 54px;font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:.02em;
  color:var(--mag);text-shadow:0 0 14px rgba(244,0,215,.45)}
.text-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:10px;letter-spacing:.2em;
  color:var(--cyan);text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(0,231,255,.35);transition:color .3s,border-color .3s}
.text-link:hover{color:var(--mag);border-color:rgba(244,0,215,.6)}
@media(max-width:900px){.oct-grid.three{grid-template-columns:1fr}}
@media(min-width:901px) and (max-width:1180px){.oct-grid.three{grid-template-columns:1fr 1fr}}


.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--mag);color:#fff;padding:10px 16px;font-family:var(--fm);font-size:12px}
.skip:focus{left:8px;top:8px}
a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.foot-legal a{color:var(--dim2)}
.cookie{position:fixed;left:16px;bottom:16px;z-index:9995;max-width:420px;background:rgba(9,11,32,.97);border:1px solid var(--bd2);padding:16px 18px;display:flex;gap:14px;align-items:center;backdrop-filter:blur(8px)}
.cookie p{font-size:13px;color:var(--dim);line-height:1.5;margin:0}
.cookie button{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--cyan);background:none;border:1px solid var(--bd2);padding:9px 14px;cursor:pointer;white-space:nowrap}
.cookie button:hover{border-color:var(--cyan);color:var(--warm)}
@media(max-width:620px){.cookie{left:10px;right:10px;bottom:10px;max-width:none;flex-direction:column;align-items:flex-start}}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.spread h1.spread-h1{margin:16px 0;font-family:var(--fh);font-weight:900;font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.045em;color:var(--warm);text-shadow:0 0 34px rgba(244,0,215,.4);text-transform:none}
.spread h1.spread-h1 b{color:var(--pink)}

/* ── STORE ─────────────────────────────────────────── */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px}
.prod{position:relative;display:flex;flex-direction:column;background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--bd2);transition:border-color .35s ease,transform .35s ease;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.prod:hover{border-color:rgba(244,0,215,.5);transform:translateY(-3px)}
.prod-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--void);border-bottom:1px solid var(--bd2)}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.prod:hover .prod-img img{transform:scale(1.04)}
.prod-flag{position:absolute;top:12px;left:12px;font-family:var(--fm);font-size:9px;letter-spacing:.18em;
  color:var(--red);border:1px solid rgba(255,23,72,.6);background:rgba(5,4,11,.85);padding:6px 10px}
.prod-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.prod-body h3{font-family:var(--fh);font-size:14px;letter-spacing:.08em;color:var(--warm);text-transform:uppercase;margin:0 0 10px}
.prod-body p{font-size:14.5px;color:var(--dim);line-height:1.6;margin:0 0 20px}
.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.prod-price{font-family:var(--fh);font-weight:800;font-size:20px;color:var(--warm);letter-spacing:.02em}
.prod-foot .btn{padding:12px 18px;font-size:10px}
@media(max-width:820px){.prod-grid{grid-template-columns:1fr}}