/* color tokens injected per-request from admin settings */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,sans-serif;overflow-x:hidden}
.wrap{max-width:1020px;margin:0 auto;padding:0 26px;position:relative;z-index:3}
.tag{position:fixed;top:14px;left:16px;z-index:20;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ember);border:1px solid var(--line);background:var(--panel);padding:5px 10px;border-radius:7px}

/* heat that follows the cursor */
#heat{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,18%),rgba(255,107,53,.10),rgba(255,107,53,.04) 40%,transparent 66%);transition:background .12s ease}

/* floating embers canvas */
#embers{position:fixed;inset:0;z-index:2;pointer-events:none}

/* scroll progress — a heating bar */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:20;background:linear-gradient(90deg,var(--heat),var(--ember));box-shadow:0 0 12px rgba(255,107,53,.8)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:15;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.sc{background:rgba(19,17,16,.82);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:14px;text-decoration:none;color:var(--text)}
.brand .sp{width:9px;height:9px;background:var(--ember);border-radius:2px;box-shadow:0 0 12px var(--ember);animation:flick 3s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:1}45%{opacity:.5}55%{opacity:.9}}
.nav .lk{display:flex;gap:4px}
.nav .lk a{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);text-decoration:none;padding:8px 14px;border-radius:8px;border:1px solid transparent;transition:color .18s,border-color .18s}
.nav .lk a:hover{color:var(--heat);border-color:var(--line)}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;left:-20%;right:-20%;bottom:-48%;height:88%;background:radial-gradient(50% 62% at 50% 100%,rgba(255,107,53,.5),rgba(255,179,71,.16) 44%,transparent 74%);filter:blur(26px);animation:breathe 5s ease-in-out infinite;z-index:1}
@keyframes breathe{0%,100%{opacity:.7;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.14)}}
/* forge floor line with travelling spark */
.floor{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,107,53,.5),transparent);z-index:2;overflow:visible}
.floor::after{content:'';position:absolute;top:-2px;left:0;width:60px;height:6px;border-radius:6px;background:radial-gradient(circle,var(--white),var(--ember) 60%,transparent);filter:blur(1px);animation:runSpark 4.5s linear infinite}
@keyframes runSpark{from{left:-8%}to{left:108%}}
.hi{position:relative;z-index:3;padding:120px 26px 100px;width:100%}
.k{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.24em;color:var(--ember);text-transform:uppercase;margin-bottom:22px;display:inline-flex;align-items:center;gap:12px}
.k::before{content:'';width:26px;height:1px;background:var(--ember)}
h1{font-family:'Archivo Black',sans-serif;font-size:clamp(54px,11.5vw,128px);line-height:.9;text-transform:uppercase;letter-spacing:-.015em;perspective:800px}
h1 .ln{display:block;overflow:hidden}
h1 .ln span{display:inline-block;transform:translateY(112%) rotateX(-40deg);opacity:0;animation:drop .9s cubic-bezier(.16,.84,.28,1) forwards}
h1 .ln:nth-child(2) span{animation-delay:.14s}
@keyframes drop{to{transform:none;opacity:1}}
h1 .hot{background:linear-gradient(180deg,var(--white),var(--heat) 45%,var(--ember) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.weld{width:0;height:3px;margin:32px 0;background:linear-gradient(90deg,var(--heat),var(--ember));box-shadow:0 0 18px rgba(255,107,53,.8);animation:growWeld 1s ease .5s forwards,weld 2.4s ease-in-out 1.5s infinite}
@keyframes growWeld{to{width:150px}}
@keyframes weld{0%,100%{box-shadow:0 0 10px rgba(255,107,53,.5)}50%{box-shadow:0 0 30px rgba(255,179,71,.95)}}
.sub{color:var(--mut);font-size:clamp(16px,2vw,20px);max-width:52ch;opacity:0;animation:fade 1s ease .7s forwards}
@keyframes fade{to{opacity:1}}
.cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fade 1s ease .9s forwards}
.btn{position:relative;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.03em;padding:14px 24px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);text-decoration:none;overflow:hidden;transition:transform .16s,border-color .2s,box-shadow .2s;text-transform:uppercase}
.btn::after{content:'';position:absolute;top:-60%;left:-20%;width:40%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,222,180,.22),transparent);transform:translateX(-260%) rotate(18deg);transition:transform .55s cubic-bezier(.16,.84,.28,1);pointer-events:none}
.btn:hover{transform:translateY(-2px);border-color:var(--ember);box-shadow:0 12px 34px -14px rgba(255,107,53,.55)}
.btn:hover::after{transform:translateX(420%) rotate(18deg)}
.btn.pri{background:linear-gradient(180deg,var(--heat),var(--ember));border:none;color:#1a0f06}
.facts{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fade 1s ease 1.05s forwards}
.facts span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);border:1px solid var(--line);background:var(--panel);padding:9px 14px;border-radius:8px}
.facts b{color:var(--heat)}

/* resume button icon */
.resume-btn{cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.resume-btn .ri{width:14px;height:14px;color:var(--text);transition:color .18s,transform .18s}
.resume-btn:hover .ri{color:var(--heat);transform:translate(1px,-1px)}

/* resume modal */
.rmodal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:28px}
.rmodal.open{display:flex}
.rmodal-backdrop{position:absolute;inset:0;background:rgba(6,5,4,.78);backdrop-filter:blur(6px);animation:mfade .25s ease}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.rmodal-window{position:relative;z-index:1;width:auto;max-width:96vw;max-height:92vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(255,107,53,.35),0 20px 60px rgba(0,0,0,.6);animation:mpop .3s cubic-bezier(.16,.84,.28,1)}
@keyframes mpop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.rmodal-bar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));flex:none}
.rmodal-zoom{display:flex;align-items:center;gap:8px;position:relative;z-index:1}
.rm-level{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);min-width:42px;text-align:center}
.rmodal-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--heat);pointer-events:none}
.rm-btn{position:relative;z-index:1;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .18s,background .18s,color .18s}
.rm-btn:hover{border-color:var(--ember);color:var(--heat)}
.rm-close:hover{border-color:var(--ember);background:var(--ember);color:#1a0f06}
.rmodal-body{flex:1;overflow:auto;background:#0d0b0a;display:block;padding:0;min-height:0;text-align:center}
.rmodal-body img{display:block;vertical-align:top}
.rmodal-placeholder{display:none;align-items:center;justify-content:center;min-height:60vh;text-align:center;color:var(--mut);padding:22px}
.rmodal-placeholder .ph-ic{font-size:44px;color:var(--line);margin-bottom:14px}
.rmodal-placeholder p{margin:2px 0}
.rmodal-placeholder .ph-sub{font-size:13px;opacity:.8}
.rmodal-placeholder code{font-family:'JetBrains Mono',monospace;color:var(--heat)}

/* sections */
.sec{padding:90px 0;border-top:1px solid var(--line);position:relative;z-index:3}
.sl{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--ember);text-transform:uppercase;margin-bottom:14px}
.h2{font-family:'Archivo Black',sans-serif;font-size:clamp(28px,5vw,50px);text-transform:uppercase;letter-spacing:-.02em;margin-bottom:44px;line-height:1}
.h2 .hot{background:linear-gradient(180deg,var(--white),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}

/* project cards — tilt + molten sweep + spark burst */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{position:relative;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:14px;padding:28px;overflow:hidden;transform-style:preserve-3d;transition:transform .18s ease,border-color .25s,box-shadow .25s}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%),rgba(255,107,53,.14),transparent 60%);opacity:0;transition:opacity .25s}
.card:hover::before{opacity:1}
.card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--heat),var(--ember));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,.84,.28,1)}
.card:hover{border-color:#3a332a;box-shadow:0 22px 50px -26px rgba(255,107,53,.5)}
.card:hover::after{transform:scaleX(1)}
.card .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--mut);letter-spacing:.14em}
.card:hover .num{color:var(--ember)}
.card h3{font-family:'Archivo Black',sans-serif;font-size:20px;text-transform:uppercase;margin:12px 0 8px}
.card p{color:var(--mut);font-size:14.5px;line-height:1.6;margin-bottom:16px;position:relative}
.chips{display:flex;gap:7px;flex-wrap:wrap;position:relative}
.chips span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--heat);border:1px solid var(--line);background:rgba(255,107,53,.07);padding:3px 9px;border-radius:5px;transition:transform .18s,border-color .18s}
.card:hover .chips span{border-color:rgba(255,107,53,.4)}

/* anvil divider */
.anvil{display:flex;align-items:center;gap:16px;margin:8px 0 44px;color:var(--mut);font-family:'JetBrains Mono',monospace;font-size:12px}
.anvil .l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.anvil .r{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,.84,.28,1),transform .7s cubic-bezier(.16,.84,.28,1)}
.rv.in{opacity:1;transform:none}

.footer{border-top:1px solid var(--line);padding:34px 0 46px;position:relative;z-index:3}
.footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:13px;font-family:'JetBrains Mono',monospace}

@media(max-width:640px){.nav .lk{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#heat,#embers,.floor::after{display:none}h1 .ln span,.sub,.cta,.facts,.rv{opacity:1;transform:none}.weld{width:150px}}