:root{
 --bg: #0b1220;
 --panel: rgba(255,255,255,.06);
 --panel2: rgba(255,255,255,.10);
 --text: rgba(255,255,255,.92);
 --muted: rgba(255,255,255,.72);
 --subtle: rgba(255,255,255,.55);
 --brand1: #00C2FF;
 --brand2: #2D6BFF;
 --accent: #43ffd2;
 --border: rgba(255,255,255,.12);
 --shadow: 0 20px 60px rgba(0,0,0,.35);
 --radius: 18px;
 --max: 1100px;
 --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{
 margin:0;
 font-family:var(--font);
 color:var(--text);
 background: #070b14; /* solid base so scroll never shows seams */
 overflow-x:hidden;
 position: relative;
}

/* Fixed background layer so gradients look consistent while scrolling */
body::before{
 content:"";
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background:
 radial-gradient(900px 520px at 15% 12%, rgba(45,107,255,.18), transparent 60%),
 radial-gradient(800px 520px at 85% 18%, rgba(0,194,255,.14), transparent 58%),
 radial-gradient(700px 520px at 50% 105%, rgba(67,255,210,.08), transparent 62%),
 linear-gradient(180deg, #070b14 0%, #0b1220 55%, #060812 100%);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; height:auto}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;}

.nav{
 position:sticky; top:0; z-index:50;
 backdrop-filter: blur(14px);
 background: rgba(10,14,26,.55);
 border-bottom:1px solid var(--border);
}
.nav-inner{
 display:flex; align-items:center; justify-content:space-between;
 padding:14px 0;
 gap:14px;
}
.brand{
 display:flex; align-items:center; gap:12px;
}
.brand img{width:44px; height:44px; object-fit:contain}
.brand .name{
 display:flex; flex-direction:column; line-height:1.1;
}
.brand .name strong{font-size:14px; letter-spacing:.3px}
.brand .name span{font-size:12px; color:var(--subtle)}
.menu{
 display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.menu a{
 padding:10px 12px;
 border-radius:12px;
 color:var(--muted);
 border:1px solid transparent;
 transition: all .15s ease;
 font-size:14px;
}
.menu a:hover{border-color:var(--border); background:rgba(255,255,255,.04); color:var(--text)}
.menu a.active{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:var(--text)}

.hero{
 padding:72px 0 26px;
}
.hero-grid{
 display:grid;
 grid-template-columns: 1.25fr .75fr;
 gap:24px;
 align-items:stretch;
}
@media (max-width: 900px){
 .hero{padding-top:46px}
 .hero-grid{grid-template-columns:1fr}
}

.card{
 background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
 border:1px solid var(--border);
 box-shadow: var(--shadow);
 border-radius: var(--radius);
 padding:22px;
}
.card.soft{
 background: rgba(255,255,255,.05);
 box-shadow: none;
}
.kicker{
 display:inline-flex; align-items:center; gap:10px;
 padding:7px 12px;
 border-radius: 999px;
 background: rgba(0,194,255,.12);
 border:1px solid rgba(0,194,255,.25);
 color: rgba(255,255,255,.9);
 font-size:13px;
}
.kicker .dot{
 width:8px; height:8px; border-radius:50%;
 background: var(--brand1);
 box-shadow: 0 0 0 5px rgba(0,194,255,.12);
}
.h1{
 margin:14px 0 10px;
 font-size:44px;
 line-height:1.05;
 letter-spacing:-.6px;
}
@media(max-width:520px){ .h1{font-size:36px} }
.lead{
 margin:0;
 color:var(--muted);
 font-size:16px;
 line-height:1.55;
 max-width: 65ch;
}
.actions{
 margin-top:18px;
 display:flex; gap:12px; flex-wrap:wrap;
}
.btn{
 display:inline-flex; align-items:center; justify-content:center; gap:10px;
 padding:11px 14px;
 border-radius: 14px;
 border:1px solid var(--border);
 background: rgba(255,255,255,.06);
 color: var(--text);
 font-weight: 600;
 font-size:14px;
 transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22)}
.btn:active{transform: translateY(1px)}
.btn.primary{
 background: linear-gradient(135deg, rgba(0,194,255,.95), rgba(45,107,255,.95));
 border-color: rgba(255,255,255,.22);
 color: #071022;
}
.btn.primary:hover{filter:brightness(1.04)}
.btn.ghost{
 background: transparent;
}

.grid{
 display:grid;
 grid-template-columns: repeat(12, 1fr);
 gap:16px;
}
.col-4{grid-column: span 4}
.col-6{grid-column: span 6}
.col-8{grid-column: span 8}
.col-12{grid-column: span 12}
@media(max-width:900px){
 .col-4,.col-6,.col-8{grid-column: span 12}
}

.section{
 padding: 26px 0 10px;
}
.section h2{
 font-size:22px;
 margin:0 0 10px;
 letter-spacing:-.2px;
}
.section p{margin:0; color:var(--muted); line-height:1.6}

.feature{
 padding:18px;
 border-radius: var(--radius);
 border:1px solid var(--border);
 background: rgba(255,255,255,.04);
 height:100%;
}
.feature h3{
 margin:10px 0 8px;
 font-size:16px;
}
.feature p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
.icon{
 width:38px; height:38px;
 border-radius: 14px;
 display:grid; place-items:center;
 background: rgba(67,255,210,.10);
 border:1px solid rgba(67,255,210,.22);
}

.split{
 display:grid;
 grid-template-columns: 1fr 1fr;
 gap:16px;
}
@media(max-width:900px){ .split{grid-template-columns:1fr} }

.project{
 display:flex; gap:14px; align-items:flex-start;
}
.project img{width:64px; height:64px; object-fit:contain; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--border); padding:10px}
.project .meta{flex:1}
.project .meta h3{margin:2px 0 6px; font-size:18px}
.project .meta p{margin:0; color:var(--muted); line-height:1.55; font-size:14px}
.project .links{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
.pill{
 display:inline-flex; align-items:center; gap:8px;
 padding:8px 10px;
 border-radius: 999px;
 border:1px solid var(--border);
 background: rgba(255,255,255,.04);
 color: var(--muted);
 font-size:13px;
}
.pill:hover{color:var(--text); border-color:rgba(255,255,255,.22)}
.pill .ext{
 width:18px; height:18px; border-radius:7px;
 display:grid; place-items:center;
 background: rgba(0,194,255,.12);
 border:1px solid rgba(0,194,255,.22);
 color: rgba(255,255,255,.9);
 font-weight:700;
 font-size:12px;
}

.footer{
 margin-top:40px;
 padding: 26px 0 34px;
 border-top:1px solid var(--border);
 color: var(--subtle);
}
.footer-inner{
 display:flex; align-items:flex-start; justify-content:space-between;
 gap:14px; flex-wrap:wrap;
}
.footer a{color:var(--muted)}
.small{font-size:12px; line-height:1.5}

.form{
 display:grid; gap:12px;
}
.input, textarea{
 width:100%;
 border-radius: 14px;
 border:1px solid var(--border);
 background: rgba(255,255,255,.04);
 padding:12px 12px;
 color: var(--text);
 outline:none;
 font-size:14px;
}
textarea{min-height:140px; resize:vertical}
.label{font-size:13px; color:var(--muted)}
.notice{
 padding:12px 14px;
 border-radius: 16px;
 border:1px dashed rgba(255,255,255,.22);
 background: rgba(255,255,255,.03);
 color: var(--muted);
 font-size:14px;
}
.badge{
 display:inline-flex; align-items:center; gap:8px;
 padding:6px 10px;
 border-radius: 999px;
 border:1px solid rgba(255,255,255,.16);
 background: rgba(255,255,255,.04);
 color: var(--muted);
 font-size:12px;
}

/* v4 refinements: cleaner, more Apple-like spacing and typography */
:root{
 --shadow: 0 18px 50px rgba(0,0,0,.32);
 --radius: 20px;
}

.h1{
 letter-spacing: -0.8px;
}

.card{
 padding:26px;
}

.feature{
 padding:20px;
 border-radius: 20px;
}

.kicker{
 background: rgba(0,194,255,.10);
 border:1px solid rgba(0,194,255,.22);
}

.btn{
 padding:12px 16px;
 border-radius: 16px;
}

.btn.primary{
 box-shadow: 0 10px 30px rgba(0,194,255,.18);
}

/* Projects: larger logos */
.project img{
 width: 92px;
 height: 92px;
 padding:12px;
 border-radius: 22px;
}

@media (max-width: 520px){
 .project img{
 width: 78px;
 height: 78px;
 }
}

/* Footer: slightly more refined */
.footer{
 background: rgba(255,255,255,.02);
}


/* v5 refinements: nicer scrolling and more playful, modern vibe */
.section{
 padding: 34px 0 18px;
}
.hero{
 padding: 78px 0 34px;
}
@media (max-width: 900px){
 .hero{padding:52px 0 26px}
}

/* Subtle separators between stacked sections */
.section + .section{
 border-top: 1px solid rgba(255,255,255,.06);
}

/* Make long code blocks look better and avoid weird scroll visuals */
pre{
 margin:0;
}

/* Scrollbar styling (best effort) */
*{
 scrollbar-width: thin;
 scrollbar-color: rgba(255,255,255,.22) rgba(255,255,255,.06);
}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px;border:2px solid rgba(255,255,255,.05)}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}


/* v7 refinements: more studio, less corporate */
.h1{
 font-size: 54px;
 line-height: 1.0;
 letter-spacing: -1.1px;
}
@media(max-width:520px){ .h1{font-size:40px} }

/* Big stacked hero lines */
.hero-lines{
 display:grid;
 gap:6px;
 margin:14px 0 12px;
}
.hero-lines .line{
 font-size: 33px;
 line-height: 0.98;
 letter-spacing: -1.2px;
 font-weight: 800;
}
@media(max-width:900px){ .hero-lines .line{font-size:46px} }
@media(max-width:520px){ .hero-lines .line{font-size:36px} }

/* Add a bit of life */
.card, .feature{
 transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover, .feature:hover{
 transform: translateY(-2px);
 border-color: rgba(255,255,255,.20);
 background: rgba(255,255,255,.055);
}

/* Fun "chip" badges */
.chips{
 display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;
}
.chip{
 display:inline-flex; align-items:center; gap:8px;
 padding:8px 12px;
 border-radius:999px;
 border:1px solid rgba(255,255,255,.14);
 background: rgba(255,255,255,.035);
 color: var(--muted);
 font-size:13px;
}
.chip b{color:rgba(255,255,255,.9); font-weight:700}
.chip .spark{
 width:18px; height:18px; border-radius:8px;
 display:grid; place-items:center;
 background: rgba(67,255,210,.12);
 border:1px solid rgba(67,255,210,.22);
}

/* Manifesto list */
.manifesto{
 display:grid; gap:10px; margin-top:14px;
}
.manifesto .item{
 padding:14px 16px;
 border-radius: 18px;
 border:1px solid rgba(255,255,255,.10);
 background: rgba(255,255,255,.03);
 color: var(--muted);
 line-height:1.55;
}
.manifesto .item strong{color:rgba(255,255,255,.9)}

/* Make the kicker feel less "corporate label" */
.kicker{
 font-weight: 600;
}