@font-face{font-family:'Space Grotesk';font-weight:400;src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:500;src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:600;src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Space Grotesk';font-weight:700;src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:400;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:500;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:600;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:400;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:500;src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';font-weight:600;src:url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');font-display:swap}
@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}
@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}
:root{--void:#0a0a0a;--iron:#111111;--iron-2:#161616;--line:#2a2a2a;--ember:#ff4d1a;--ember-2:#ff7a45;--ember-soft:rgba(255,77,26,0.12);--teal:#2fdbc4;--ink:#f2f0eb;--ink-dim:#9a9a9a;--grid:rgba(255,255,255,0.04)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ink);font-family:"Inter",sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden}
::selection{background:var(--ember);color:#1a0e06}
a{color:inherit;text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
.grid-bg{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,10,10,.82);border-bottom:1px solid rgba(255,255,255,.06)}
.brand,header .wrap,nav{display:flex;align-items:center}
header .wrap{justify-content:space-between;height:64px}
.brand,nav{gap:10px}
.brand-name{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16px;letter-spacing:.2px}
.brand-name em,nav a{color:var(--ink-dim);font-weight:500}
.brand-name em{font-style:normal}
nav{gap:28px;font-size:14px}
nav a{transition:color .2s;position:relative}
nav a:hover{color:var(--ink)}
nav a:focus-visible{outline:2px solid var(--ember);outline-offset:4px;border-radius:3px}
.nav-cta,h1{font-family:"Space Grotesk",sans-serif}
.nav-cta{font-size:13px;font-weight:600;background:var(--ember);color:#fff;padding:8px 16px;border-radius:100px;transition:filter .2s,transform .15s}
.nav-cta:hover{filter:brightness(1.1)}
.nav-cta:active{transform:scale(.97)}
.forge,.forge .wrap,section{position:relative}
.forge{min-height:92vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:100px 0 80px}
.forge::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 50%at 50% 100%,rgba(255,77,26,.18),transparent 60%),radial-gradient(ellipse 40% 30%at 80% 20%,rgba(255,77,26,.06),transparent)}
.forge .wrap{z-index:2}
.hero-top{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.hero-badge,.hero-status{font-family:"JetBrains Mono",monospace}
.hero-badge{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);border:1px solid rgba(255,77,26,.4);background:var(--ember-soft);padding:6px 12px;border-radius:100px}
.hero-status{font-size:12px;color:var(--ink-dim);display:flex;align-items:center;gap:8px}
.hero-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px 2px rgba(255,77,26,.6);animation:pulse 1.8s ease-in-out infinite}
h1{font-size:clamp(42px,8vw,84px);line-height:.98;letter-spacing:-.03em;max-width:12ch;margin-bottom:24px}
.stat b,.stat span,h1 .hot{color:var(--ember);display:block}
.forge-sub{max-width:42ch;font-size:17px;color:var(--ink-dim);margin-bottom:40px;line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-size:14px;font-weight:600;padding:12px 22px;border-radius:10px;border:0;cursor:pointer;transition:filter .2s,transform .15s,background .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost,.forge-stats{border:1px solid var(--line)}
.btn-ghost{background:0 0;color:var(--ink)}
.btn-ghost:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.03)}
.btn-disabled{color:var(--ink-dim);cursor:default;pointer-events:none;opacity:.6}
.forge-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;max-width:560px}
.stat{background:var(--iron);padding:20px 22px}
.stat b,h1{font-weight:700}
.stat b{font-size:28px;color:var(--ink);letter-spacing:-.02em}
.stat span{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim);margin-top:4px}
.marquee .sep,.stat.ember b{color:var(--ember)}
.stat.teal b{color:var(--teal)}
.deco{position:absolute;pointer-events:none;z-index:1;opacity:.9}
.deco-1{top:12%;right:8%;width:72px;transform:rotate(12deg)}
.deco-2{top:28%;right:22%;width:56px;transform:rotate(-8deg)}
.deco-3{bottom:22%;right:6%;width:64px;transform:rotate(18deg)}
@media (max-width:900px){.deco{display:none}}
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--iron);overflow:hidden;padding:18px 0}
.marquee{display:flex;gap:48px;width:max-content;animation:marquee 28s linear infinite;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;color:var(--ink-dim);letter-spacing:.02em}
.marquee span{display:flex;align-items:center;gap:12px;white-space:nowrap}
.marquee .sep{font-size:10px}
section{padding:96px 0}
.section-head{margin-bottom:48px;max-width:640px}
.section-label{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);margin-bottom:12px;display:block}
.info-card h3,.section-head h2,.stat b{font-family:"Space Grotesk",sans-serif}
.section-head h2{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.section-head p{color:var(--ink-dim);font-size:16px;max-width:48ch}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.info-card{background:var(--iron-2);border:1px solid var(--line);border-radius:16px;padding:20px 18px;position:relative;overflow:hidden;transition:border-color .25s,transform .2s,box-shadow .25s}
.info-card:hover{border-color:rgba(255,77,26,.4);transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(255,77,26,.18)}
.info-card .ic-icon,.info-card .ic-tag.hot{background:var(--ember-soft);color:var(--ember)}
.info-card .ic-icon{width:36px;height:36px;border-radius:10px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;border:1px solid rgba(255,77,26,.22)}
.info-card .ic-label{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
.info-card h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;line-height:1.25}
.info-card p{color:var(--ink-dim);font-size:13.5px;line-height:1.5;margin:0}
.info-card .ic-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.info-card .ic-tag{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.03em;padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.04);color:var(--ink-dim);border:1px solid var(--line)}
.info-card .ic-tag.hot{border-color:rgba(255,77,26,.3)}
.projects{display:flex;flex-direction:column;gap:32px}
.project{display:grid;grid-template-columns:1fr 1.1fr;gap:0;background:var(--iron-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.project:hover{border-color:rgba(255,77,26,.35);box-shadow:0 28px 56px -28px rgba(0,0,0,.5)}
.project:nth-child(even){grid-template-columns:1.1fr 1fr}
.project:nth-child(even) .project-visual{order:2}
.project:nth-child(even) .project-body{order:1}
.project-visual{min-height:280px;position:relative;background:linear-gradient(145deg,rgba(255,77,26,.08),transparent 50%),var(--iron);display:flex;align-items:center;justify-content:center;padding:32px;border-right:1px solid var(--line)}
.project:nth-child(even) .project-visual{border-right:none;border-left:1px solid var(--line)}
.project-mock{width:100%;max-width:320px;background:var(--void);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6)}
.project-mock .chrome{display:flex;gap:5px;margin-bottom:10px}
.project-mock .chrome span{width:8px;height:8px;border-radius:50%;background:#333}
.project-mock .url{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink-dim);background:rgba(255,255,255,.04);border-radius:6px;padding:6px 10px;display:flex;align-items:center;gap:6px}
.project-mock .url::before{content:"●";color:var(--teal);font-size:8px}
.project-mock .preview{margin-top:12px;height:120px;border-radius:8px;background:linear-gradient(160deg,rgba(255,77,26,.15),rgba(47,219,196,.08)),repeating-linear-gradient(90deg,rgba(255,255,255,.03)0 1px,transparent 1px 24px)}
.project-colors{position:absolute;top:32px;right:32px;display:flex;flex-direction:column;gap:8px;z-index:2}
.project:nth-child(even) .project-colors{right:auto;left:32px}
.color-swatch{width:16px;height:16px;border-radius:5px;border:1px solid rgba(255,255,255,.14);display:block}
@media (max-width:800px){.project-colors{top:12px;right:12px}.project:nth-child(even) .project-colors{left:12px}}
.philosophy ul,.project-body{display:flex;flex-direction:column}
.project-body{padding:36px 32px;justify-content:center}
.project-tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ember);margin-bottom:12px}
.philosophy h2,.project h3{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.02em}
.project h3{font-size:28px;margin-bottom:12px}
.philosophy li,.project-body>p{font-size:15px;color:var(--ink-dim)}
.project-body>p{margin-bottom:16px;max-width:36ch}
.philosophy li .num,.project-stack{font-family:"JetBrains Mono",monospace;font-size:12px}
.project-stack{color:var(--ink-dim);margin-bottom:24px}
.project-stack b{color:var(--ember);font-weight:500}
.project .btn{align-self:flex-start}
@media (max-width:800px){.project,.project:nth-child(even){grid-template-columns:1fr}.project:nth-child(even) .project-visual{order:0}.project-visual{border:0!important;border-bottom:1px solid var(--line)!important;min-height:200px}}
.philosophy{background:var(--iron);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.philosophy .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.philosophy h2{font-size:clamp(28px,3.5vw,40px);line-height:1.15}
.philosophy .hot{color:var(--ember)}
.philosophy ul{list-style:none;gap:20px}
.philosophy li{display:grid;grid-template-columns:28px 1fr;gap:14px;line-height:1.5}
.philosophy li .num{color:var(--ember);padding-top:3px}
.philosophy li b{color:var(--ink);font-weight:600;display:block;margin-bottom:2px}
@media (max-width:780px){.philosophy .wrap{grid-template-columns:1fr;gap:32px}}
.toolbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.contact-item{background:var(--iron-2);border:1px solid var(--line);border-radius:14px;padding:22px;transition:border-color .25s,transform .2s}
.contact-item:hover{border-color:rgba(255,77,26,.4);transform:translateY(-2px)}
.contact-icon,.contact-top{display:flex;align-items:center}
.contact-top{gap:12px;margin-bottom:14px}
.contact-icon{width:40px;height:40px;flex:none;border-radius:10px;justify-content:center;background:var(--ember-soft);border:1px solid rgba(255,77,26,.25)}
.contact-icon svg{width:18px;height:18px;stroke:var(--ember);fill:none;stroke-width:1.6}
.contact-label{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:600}
.contact-value,.copy-btn{font-family:"JetBrains Mono",monospace}
.contact-value{display:block;font-size:13.5px;color:var(--ink);word-break:break-word;margin-bottom:14px}
.contact-value a{color:var(--ink);border-bottom:1px solid rgba(255,77,26,.35);transition:color .2s,border-color .2s}
.contact-value a:hover{color:var(--ember);border-color:var(--ember)}
.copy-btn{font-size:11px;letter-spacing:.03em;background:var(--ember-soft);color:var(--ember);border:1px solid rgba(255,77,26,.3);padding:7px 12px;border-radius:7px;cursor:pointer;transition:background .2s,color .2s}
.copy-btn:hover{background:var(--ember);color:#fff}
.copy-btn.copied{background:var(--teal);border-color:var(--teal);color:#04211c}
.copy-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
footer{border-top:1px solid var(--line);padding:36px 0}
footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .mono{font-size:12px;color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-status .dot,.marquee,.status.forging .dot{animation:none}}
[data-reveal]{opacity:0;transform:translateY(20px)}
@media (max-width:640px){nav{gap:14px}nav a{font-size:13px}.nav-cta{display:none}.forge-stats{grid-template-columns:1fr;max-width:100%}h1{font-size:clamp(36px,10vw,52px)}}
.brand-mark{width:28px;height:28px;flex:none;display:block;border-radius:7px}
.brand img.brand-mark{object-fit:contain}
.forge-slogan{margin-bottom:32px;font-size:13px;color:var(--ink-dim);letter-spacing:.04em}
.philosophy-note{margin-top:16px;font-size:13px;color:var(--ink-dim);letter-spacing:.03em}
.preview-teal{background:linear-gradient(160deg,rgba(47,219,196,.12),rgba(255,77,26,.08)),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 24px)}
.preview-ember{background:linear-gradient(160deg,rgba(255,77,26,.1),rgba(47,219,196,.1)),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 24px)}
