:root{--o:#ff7a1a;--o2:#ffb347;--pink:#ff4fa3;--blue:#4fb3ff;--violet:#9a6bff;--ink:#05030a;--txt:#f6eee6;--dim:#b8a99c}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font-family:ui-sans-serif,-apple-system,"SF Pro Display",Inter,Segoe UI,sans-serif;overflow-x:hidden;line-height:1.55}
#frac,#stars{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
#stars{z-index:1;pointer-events:none}
.sigil{position:fixed;left:50%;top:50%;z-index:2;pointer-events:none;font-weight:900;font-size:min(34vw,420px);letter-spacing:.12em;transform:translate(-50%,-50%) perspective(900px) rotateX(18deg);background:radial-gradient(circle at 30% 40%,rgba(255,160,80,.16),rgba(255,79,163,.08) 40%,rgba(79,179,255,.05) 70%,transparent);-webkit-background-clip:text;background-clip:text;color:transparent;filter:blur(1.2px);animation:sig 26s ease-in-out infinite;white-space:nowrap;opacity:.9}
.sigil::after{content:"SIGIL";position:absolute;inset:0;background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 70%,#ffd,transparent),radial-gradient(1px 1px at 80% 20%,#fff,transparent);-webkit-background-clip:text;background-clip:text}
@keyframes sig{0%,100%{transform:translate(-50%,-50%) perspective(900px) rotateX(18deg) rotateY(-12deg) scale(1)}50%{transform:translate(-50%,-52%) perspective(900px) rotateX(8deg) rotateY(12deg) scale(1.06)}}
main{position:relative;z-index:3}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:linear-gradient(#05030acc,transparent)}
.logo{font-weight:900;letter-spacing:.32em;font-size:15px;display:flex;align-items:center;gap:10px}
.dot{width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,var(--o2),var(--o) 55%,#d94400);box-shadow:0 0 18px var(--o);transform:rotate(45deg)}
nav a{color:var(--dim);text-decoration:none;margin-left:22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
nav a:hover{color:var(--o2)}
.cta{padding:9px 16px;border:1px solid var(--o);border-radius:999px;color:var(--txt)!important;background:#ff7a1a22}
section{min-height:100vh;padding:120px 7vw 80px;display:flex;flex-direction:column;justify-content:center}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}nav a:not(.cta){display:none}}
.kicker{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--o2);margin-bottom:18px}
h1{font-size:clamp(64px,11vw,168px);font-weight:900;line-height:.86;letter-spacing:-.02em;background:linear-gradient(120deg,#fff3e0 0%,var(--o2) 25%,var(--o) 50%,var(--pink) 78%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px #ff7a1a55)}
.nots{margin:26px 0 8px;font-size:clamp(18px,2.1vw,26px);color:var(--dim)}
.nots s{text-decoration-color:var(--o);text-decoration-thickness:2px}
.big{font-size:clamp(26px,3.4vw,44px);font-weight:800;margin:6px 0 30px}
.big b{color:var(--o)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{padding:15px 26px;border-radius:999px;border:0;font-weight:800;letter-spacing:.08em;font-size:14px;cursor:pointer;text-decoration:none;color:#170800;background:linear-gradient(135deg,var(--o2),var(--o));box-shadow:0 0 30px #ff7a1a66;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 50px #ff7a1aaa}
.ghost{background:transparent;color:var(--txt);border:1px solid #ffffff33;box-shadow:none}
.by{margin-top:26px;font-size:12px;letter-spacing:.38em;color:var(--dim)}
/* CUBE */
.stage{height:min(70vh,560px);display:flex;align-items:center;justify-content:center;perspective:1300px;cursor:grab;touch-action:none;position:relative}
.stage:active{cursor:grabbing}
.cube{--s:min(30vw,240px);width:var(--s);height:var(--s);position:relative;transform-style:preserve-3d;transition:transform .05s linear}
.face{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.7,0,.2,1);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:#0b0610}
.face i{border-radius:9px;display:block;background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:inset 0 0 14px #0007,inset 0 1px 0 #fff4}
.face .lab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;font-weight:900;letter-spacing:.24em;font-size:calc(var(--s)*.075);text-shadow:0 2px 12px #000c;color:#fff}
.face .lab small{font-weight:600;font-size:.5em;letter-spacing:.2em;opacity:.85;margin-top:6px}
.f1{--c1:#ffb347;--c2:#ff6a00}.f2{--c1:#ff7ab8;--c2:#d6006e}.f3{--c1:#7fd0ff;--c2:#1060ff}.f4{--c1:#c7a4ff;--c2:#6a2cff}.f5{--c1:#ffe08a;--c2:#ff9a00}.f6{--c1:#8fffd0;--c2:#00a37a}
.glow{position:absolute;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,#ff7a1a55,transparent 65%);filter:blur(30px);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25);opacity:.6}}
.fold{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;color:var(--dim);background:#0009;border:1px solid #ffffff22;padding:8px 16px;border-radius:999px;cursor:pointer;z-index:5}
.fold:hover{color:var(--o2);border-color:var(--o)}
.hint{position:absolute;top:6px;width:100%;text-align:center;font-size:11px;letter-spacing:.3em;color:#ffffff55}
/* SECTIONS */
h2{font-size:clamp(38px,5.6vw,80px);font-weight:900;line-height:.95;margin-bottom:22px;letter-spacing:-.01em}
h2 em{font-style:normal;background:linear-gradient(90deg,var(--o2),var(--pink),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:760px;font-size:clamp(17px,1.6vw,21px);color:var(--dim);margin-bottom:46px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;perspective:1200px}
.card{position:relative;padding:26px 24px;border-radius:20px;background:linear-gradient(160deg,#ffffff10,#ffffff04);border:1px solid #ffffff1c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .35s,border-color .35s,box-shadow .35s;transform-style:preserve-3d;overflow:hidden}
.card:hover{border-color:var(--o);box-shadow:0 20px 60px #ff7a1a33}
.card .n{font-size:11px;letter-spacing:.3em;color:var(--o2)}
.card h3{font-size:22px;margin:10px 0 8px;letter-spacing:.04em}
.card p{color:var(--dim);font-size:15px}
.card .tag{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:.24em;padding:5px 10px;border-radius:999px;border:1px solid #ffffff2a;color:#fff9}
.card::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,#ff7a1a22,transparent,#4fb3ff1c,transparent);animation:spin 14s linear infinite;z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media(max-width:800px){.hero-card{grid-template-columns:1fr}}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mods div{padding:14px 10px;border-radius:12px;text-align:center;font-size:12px;letter-spacing:.14em;background:#ffffff08;border:1px solid #ffffff14}
.mods div b{display:block;font-size:20px;margin-bottom:4px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:10px}
.tier{padding:30px 26px;border-radius:22px;border:1px solid #ffffff1e;background:linear-gradient(170deg,#ffffff0e,#00000030);position:relative}
.tier.mid{border-color:var(--o);box-shadow:0 0 60px #ff7a1a33}
.tier h3{letter-spacing:.3em;font-size:15px;color:var(--o2)}
.tier .p{font-size:40px;font-weight:900;margin:12px 0 4px}
.tier .p small{font-size:14px;color:var(--dim);font-weight:500}
.tier ul{list-style:none;margin-top:14px}
.tier li{padding:7px 0;border-top:1px solid #ffffff10;color:var(--dim);font-size:14px}
.tier li::before{content:"◆ ";color:var(--o)}
.quote{font-size:clamp(24px,3vw,40px);font-weight:300;max-width:900px;margin:40px 0;border-left:3px solid var(--o);padding-left:24px}
.quote b{font-weight:800;color:var(--o2)}
form{display:flex;gap:12px;flex-wrap:wrap;max-width:720px}
input,select,textarea{flex:1 1 220px;padding:16px 20px;border-radius:999px;border:1px solid #ffffff2a;background:#0008;color:var(--txt);font-size:16px;outline:none;font-family:inherit}
textarea{border-radius:18px;flex-basis:100%;min-height:90px}
input:focus,select:focus,textarea:focus{border-color:var(--o)}
#msg{margin-top:16px;color:var(--o2);min-height:24px;letter-spacing:.06em}
.count{margin-top:6px;color:var(--dim);font-size:13px;letter-spacing:.2em}
footer{position:relative;z-index:3;padding:50px 7vw;border-top:1px solid #ffffff12;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;color:var(--dim);font-size:13px;letter-spacing:.12em;background:#05030ad0}
footer a{color:var(--dim);text-decoration:none;margin-right:18px}
footer a:hover{color:var(--o2)}
.reveal{opacity:0;transform:translateY(40px) rotateX(8deg);transition:opacity 1s,transform 1s}
.reveal.in{opacity:1;transform:none}
.mathsec{justify-content:flex-start}
.eq{color:var(--o2);font-weight:700;white-space:nowrap}
.feedwrap{position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;border-radius:26px;overflow:hidden;border:1px solid #ff7a1a66;box-shadow:0 0 80px #ff7a1a40,0 0 160px #ff4fa322,inset 0 0 0 1px #fff1;background:#000}
#feed{width:100%;height:100%;display:block}
#vid{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.hud{position:absolute;font-size:12px;letter-spacing:.22em;color:#fff;text-shadow:0 0 10px #000;padding:8px 12px;border-radius:10px;background:#0006;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid #ffffff1a}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.tl{top:16px;left:16px}.tr{top:16px;right:16px;color:var(--o2);font-weight:800}.bl{bottom:16px;left:16px}.br{bottom:16px;right:16px}
.live{color:#666}.live.on{color:#ff2d55;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}
.camgo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 30px;border-radius:999px;border:1px solid var(--o);background:#0b0610cc;color:#fff;font-weight:900;letter-spacing:.2em;font-size:14px;cursor:pointer;box-shadow:0 0 50px #ff7a1a88;animation:pulse2 2.4s ease-in-out infinite}
.camgo:hover{background:var(--o);color:#170800}
@keyframes pulse2{50%{box-shadow:0 0 90px #ff7a1acc}}
.ctrls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:20px}
.modes{display:flex;flex-wrap:wrap;gap:8px}
.ctrls button{padding:10px 16px;border-radius:999px;border:1px solid #ffffff2a;background:#0008;color:var(--dim);font-size:11px;letter-spacing:.2em;cursor:pointer;font-weight:700}
.ctrls button.on{border-color:var(--o);color:#fff;background:#ff7a1a33;box-shadow:0 0 20px #ff7a1a44}
.ctrls label{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;color:var(--dim)}
.ctrls input[type=range]{flex:none;width:150px;padding:0;accent-color:var(--o);background:none;border:0}
.dev{display:inline-block;font-size:11px;letter-spacing:.28em;color:#fff;background:#ff7a1a2a;border:1px solid #ff7a1a88;padding:6px 12px;border-radius:999px;margin-bottom:22px}