/* layout.css — Nav, overlay menu, layout shared, hero, marquee */

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:700;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(16px,5vw,60px);transition:background .4s,backdrop-filter .4s,border-color .4s}
#nav.sol{background:var(--glass);backdrop-filter:blur(22px);border-bottom:1px solid var(--bd)}
.nav-logo{font-size:15px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px;color:var(--tx)}
.ldot{width:8px;height:8px;background:var(--a);border-radius:50%;animation:pls 2.5s ease-in-out infinite;box-shadow:0 0 8px var(--glow);flex-shrink:0}
@keyframes pls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.3}}
.nl{display:flex;gap:clamp(20px,3vw,40px);list-style:none}
.nl a{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);transition:color .25s;position:relative}
.nl a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--a);transform:scaleX(0);transition:transform .3s cubic-bezier(.19,1,.22,1)}
.nl a:hover{color:var(--tx)}
.nl a:hover::after{transform:scaleX(1)}
.nr{display:flex;align-items:center;gap:12px}
.btn-nm{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--a);color:#000;padding:11px 24px;border-radius:40px;border:none;cursor:none;transition:transform .25s,box-shadow .25s}
.btn-nm:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow)}
.ham{background:none;border:none;cursor:none;display:flex;flex-direction:column;gap:5px;width:28px;padding:4px 0}
.ham span{height:1.5px;background:var(--tx);display:block;transition:transform .4s cubic-bezier(.76,0,.24,1),opacity .3s,width .3s;transform-origin:center}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.ham.open span:nth-child(2){opacity:0;width:0}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ══════════════════════════════════════
   OVERLAY MENU
══════════════════════════════════════ */
#ov{position:fixed;inset:0;z-index:650;background:var(--a);clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1);pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding:80px clamp(20px,8vw,100px) 60px;overflow:hidden}
#ov.open{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);pointer-events:all}
.ov-list{list-style:none;margin-bottom:clamp(30px,5vh,52px)}
.ov-list li{overflow:hidden;border-bottom:1px solid rgba(0,0,0,.1)}
.ov-list li:first-child{border-top:1px solid rgba(0,0,0,.1)}
.ov-list a{display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,2vh,20px) 0;font-size:clamp(28px,8vw,90px);font-weight:900;color:#000;letter-spacing:-.05em;line-height:1;transform:translateY(115%);transition:transform .7s cubic-bezier(.76,0,.24,1),letter-spacing .3s}
#ov.open .ov-list a{transform:translateY(0)}
.ov-list li:nth-child(1) a{transition-delay:.05s}
.ov-list li:nth-child(2) a{transition-delay:.11s}
.ov-list li:nth-child(3) a{transition-delay:.17s}
.ov-list li:nth-child(4) a{transition-delay:.23s}
.ov-list li:nth-child(5) a{transition-delay:.29s}
.ov-list a:hover{letter-spacing:.01em}
.ov-n{font-size:clamp(10px,1.2vw,13px);font-weight:400;opacity:.3}
.ov-ar{font-size:clamp(18px,3vw,36px);transition:transform .3s}
.ov-list a:hover .ov-ar{transform:rotate(-45deg)}
.ov-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;opacity:0;transform:translateY(18px);transition:all .6s .52s}
#ov.open .ov-foot{opacity:1;transform:translateY(0)}
.ov-soc{display:flex;gap:clamp(14px,3vw,30px);flex-wrap:wrap}
.ov-soc a{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.4);transition:color .25s}
.ov-soc a:hover{color:#000}

/* ══════════════════════════════════════
   LAYOUT SHARED
══════════════════════════════════════ */
section{position:relative;z-index:10}
.wrap{max-width:1440px;margin:0 auto;padding:clamp(60px,10vh,120px) clamp(16px,5.5vw,68px)}
.s-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--a);display:flex;align-items:center;gap:8px;margin-bottom:18px}
.s-tag::before{content:'//';opacity:.45}
.s-h{font-size:clamp(34px,5.5vw,80px);font-weight:900;letter-spacing:-.045em;line-height:.93;color:var(--tx)}

/* BUTTONS */
.ba{display:inline-flex;align-items:center;gap:9px;background:var(--a);color:#000;font-weight:700;font-size:14px;letter-spacing:.04em;padding:13px 28px;border-radius:40px;border:none;cursor:none;font-family:'Outfit',sans-serif;white-space:nowrap;transition:transform .3s cubic-bezier(.19,1,.22,1),box-shadow .3s}
.ba:hover{transform:translateY(-3px);box-shadow:0 14px 40px var(--glow)}
.bb{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--bd);color:var(--tx);font-size:14px;letter-spacing:.04em;padding:13px 28px;border-radius:40px;cursor:none;white-space:nowrap;transition:border-color .3s,background .3s}
.bb:hover{border-color:var(--a);background:var(--card-h)}

/* REVEAL animation */
.rev{opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .85s cubic-bezier(.19,1,.22,1)}
.rev.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}.d5{transition-delay:.5s}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
#hero{min-height:100svh;display:flex;align-items:center;z-index:10}
.hi{max-width:1440px;margin:0 auto;width:100%;padding:clamp(110px,15vh,148px) clamp(16px,5.5vw,68px) clamp(60px,9vh,110px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,70px);align-items:center}
.hbadge{display:inline-flex;align-items:center;gap:8px;background:var(--glow2);border:1px solid rgba(var(--ar),.14);border-radius:40px;padding:7px 16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin-bottom:26px;width:fit-content}
.bdot{width:6px;height:6px;background:#4ade80;border-radius:50%;animation:pls 2s ease-in-out infinite;flex-shrink:0}
.hname{font-size:clamp(48px,9vw,126px);font-weight:900;letter-spacing:-.05em;line-height:.88;color:var(--tx);margin-bottom:22px}
.hname .acc{color:var(--a)}
.hrole{font-size:clamp(14px,1.5vw,18px);color:var(--mu);line-height:1.75;margin-bottom:36px}
.hrole strong{color:var(--tx);font-weight:500}
#typed-c{color:var(--a);animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.hstats{display:flex;gap:clamp(18px,4vw,50px);padding-top:24px;border-top:1px solid var(--bd);flex-wrap:wrap}
.hsn{font-size:clamp(22px,3.5vw,44px);font-weight:900;letter-spacing:-.04em;color:var(--a);line-height:1}
.hsl{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--mu);margin-top:4px}

/* ── CODE EDITOR ── */
.ed-scene{position:relative;padding:20px 0 20px 20px}
.ed{background:var(--bg2);border:1px solid var(--bd);border-radius:clamp(12px,2vw,20px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.04);transition:box-shadow .4s}
.ed:hover{box-shadow:0 20px 60px rgba(0,0,0,.15),0 0 40px rgba(var(--ar),.07),inset 0 1px 0 rgba(255,255,255,.04)}
.et{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--bg3);border-bottom:1px solid var(--bd);flex-wrap:wrap}
.edots{display:flex;gap:6px;flex-shrink:0}
.edt{width:11px;height:11px;border-radius:50%}
.er{background:#FF5F57}.ey{background:#FEBC2E}.eg{background:#28C840}
.etabs{display:flex;flex:1}
.etab{font-family:'JetBrains Mono',monospace;font-size:10px;padding:5px 14px;color:var(--mu);border-right:1px solid var(--bd);white-space:nowrap}
.etab.on{color:var(--tx);background:var(--bg2)}
.ebody{display:flex}
.elns{padding:16px 0;min-width:38px;text-align:right;border-right:1px solid var(--bd);background:var(--bg3);flex-shrink:0}
.elns span{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mu);padding:1px 10px;line-height:1.9;opacity:.3}
.ec{padding:16px 20px;flex:1;min-width:0;overflow:hidden}
.cl{font-family:'JetBrains Mono',monospace;font-size:clamp(9px,1.1vw,12px);line-height:1.9;white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s}
.cl.on{opacity:1;transform:translateX(0)}
.ck{color:#C084FC}.cs{color:#86EFAC}.cn{color:#93C5FD}.cv{color:#FCA5A5}.cm{color:#4a4a5a}.ci{color:#FDE68A}
.ebot{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;background:var(--bg3);border-top:1px solid var(--bd);flex-wrap:wrap;gap:6px}
.eit{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--mu)}
.elang{background:var(--a);color:#000;font-size:9px;font-weight:800;padding:2px 10px;border-radius:4px;font-family:'JetBrains Mono',monospace}
.cblink{display:inline-block;width:2px;height:12px;background:var(--a);margin-left:2px;vertical-align:middle;animation:blink 1s step-end infinite;opacity:0}
/* floating pills */
.fp{position:absolute;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--bd2);backdrop-filter:blur(18px);border-radius:12px;padding:9px 15px;font-size:11px;font-weight:700;color:var(--tx);white-space:nowrap;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.fp1{bottom:-16px;left:-16px;animation:fy 4.2s ease-in-out infinite}
.fp2{top:-14px;right:7%;animation:fy 5s ease-in-out infinite .8s}
.fp3{top:36%;right:-18px;animation:fy 4.7s ease-in-out infinite 1.6s}
@keyframes fy{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ══════════════════════════════════════
   MARQUEE
══════════════════════════════════════ */
.mqw{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:14px 0;overflow:hidden;z-index:10;background:var(--bg2)}
.mqr{display:flex;animation:mqs 28s linear infinite;width:max-content}
.mi{display:inline-flex;align-items:center;gap:14px;padding:0 14px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);white-space:nowrap}
.mi b{color:var(--a)}
.mdot{width:3px;height:3px;background:var(--mu);border-radius:50%;flex-shrink:0;opacity:.4}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}