:root{
--ink:#0A0E1A; --panel:#101828; --panel-2:#0D1422; --line:rgba(232,236,243,.09); --line-2:rgba(232,236,243,.18);
--bone:#E8ECF3; --fog:#8A96AD; --teal:#2DD4BF; --ember:#F5A524; --peri:#8B9CFF;
--display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
--body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
--mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
--max:1160px; --pad:clamp(20px, 4vw, 40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--ink); color:var(--bone); font-family:var(--body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(60rem 36rem at 85% -8%, rgba(45,212,191,.10), transparent 60%),
radial-gradient(40rem 30rem at -10% 30%, rgba(139,156,255,.06), transparent 60%),
radial-gradient(circle at 1px 1px, rgba(232,236,243,.06) 1px, transparent 0) 0 0/28px 28px;}
a{color:inherit}
img,svg{display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--teal); color:var(--ink); padding:8px 14px; border-radius:8px; font-weight:600; z-index:100}
.skip:focus{left:12px}
/* Nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(10,14,26,.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:28px; height:68px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{height:26px; width:auto}
.brand .cursor{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.links{display:flex; gap:26px; margin-left:auto}
.links a{text-decoration:none; color:var(--fog); font-size:.95rem; transition:color .15s}
.links a:hover{color:var(--bone)}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:600; font-size:.98rem; text-decoration:none; border-radius:999px; padding:12px 22px; border:1px solid transparent; transition:transform .15s, background .15s, border-color .15s; cursor:pointer}
.btn svg{width:17px; height:17px}
.btn-primary{background:var(--teal); color:#04201C}
.btn-primary:hover{background:#5EEAD4; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2); color:var(--bone); background:rgba(232,236,243,.03)}
.btn-ghost:hover{border-color:var(--bone)}
.btn-sm{padding:9px 16px; font-size:.9rem}
.menu{display:none; margin-left:auto; background:none; border:1px solid var(--line-2); color:var(--bone); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center}
.menu svg{width:20px; height:20px}
/* Hero */
.hero{padding:clamp(56px, 9vw, 112px) 0 clamp(48px, 7vw, 88px)}
.hero .wrap{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(32px, 5vw, 64px); align-items:center}
.hello{color:var(--fog); margin:0 0 16px; font-size:1.05rem; display:flex; align-items:center; gap:12px}
.me{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--teal); flex:none}
h1{font-family:var(--display); font-weight:800; font-size:clamp(2.55rem, 5.6vw, 4.5rem); line-height:1.02; letter-spacing:-.025em; margin:0; font-variation-settings:"opsz" 96}
.typeline{font-family:var(--display); font-weight:700; font-size:clamp(1.35rem, 2.6vw, 2rem); letter-spacing:-.01em; margin:22px 0 0; min-height:1.3em}
.typeline .lead{color:var(--fog); font-weight:500}
.typed{color:var(--teal); transition:color .2s}
.caret{display:inline-block; width:.5em; height:.95em; margin-left:4px; vertical-align:-.1em; background:currentColor; animation:blink 1s steps(1) infinite}
.lede{max-width:56ch; color:#C3CBDA; margin:22px 0 0; font-size:1.1rem}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.social{display:flex; gap:10px; margin-top:28px}
.social a{width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:12px; color:var(--fog); transition:color .15s, border-color .15s}
.social a:hover{color:var(--bone); border-color:var(--bone)}
.social svg{width:19px; height:19px}
.term{background:linear-gradient(180deg, #0F1729, #0B111F); border:1px solid var(--line-2); border-radius:16px; box-shadow:0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(45,212,191,.05); overflow:hidden}
.term-bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line)}
.term-bar i{width:11px; height:11px; border-radius:50%; background:#2A3550; display:block}
.term-bar span{margin-left:auto; font-family:var(--mono); font-size:.75rem; color:var(--fog)}
.term pre{margin:0; padding:20px 20px 24px; font-family:var(--mono); font-size:clamp(.78rem, 1.15vw, .9rem); line-height:1.75; white-space:pre-wrap; color:#C3CBDA; min-height:19.5em}
.term .p{color:var(--teal)} .term .c{color:var(--bone)} .term .k-off{color:var(--ember)} .term .k-def{color:var(--teal)} .term .k-grc{color:var(--peri)} .term .k-ai{color:var(--bone)} .term .ok{color:var(--teal)}
.facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.fact{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid var(--line-2); border-radius:999px; font-size:.88rem; color:#C3CBDA; background:rgba(16,24,40,.6)}
.fact b{font-weight:600; color:var(--bone)}
.fact i{width:8px; height:8px; border-radius:50%; display:block}
/* Hero load sequence: the page's one orchestrated moment */
.rise{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}
@keyframes rise{to{opacity:1; transform:none}}
/* Sections */
section.block{padding:clamp(64px, 9vw, 112px) 0; border-top:1px solid var(--line)}
h2{font-family:var(--display); font-weight:800; font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.08; letter-spacing:-.02em; margin:0; max-width:22ch}
.intro{color:#C3CBDA; max-width:62ch; margin:18px 0 0}
.head{margin-bottom:clamp(32px, 5vw, 52px)}
/* Expertise */
.domains{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.domain{background:var(--panel-2); border:1px solid var(--line); border-radius:18px; padding:28px 26px 26px; position:relative; overflow:hidden}
.domain::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c)}
.domain .tag{display:inline-flex; align-items:center; gap:8px; font-size:.85rem; color:var(--c); font-weight:600}
.domain .tag i{width:8px; height:8px; border-radius:50%; background:var(--c); display:block}
.domain h3{font-family:var(--display); font-weight:700; font-size:1.55rem; letter-spacing:-.01em; margin:12px 0 8px; line-height:1.15}
.domain p{margin:0 0 16px; color:#C3CBDA; font-size:1rem}
.domain ul{list-style:none; margin:0 0 18px; padding:0}
.domain li{padding:9px 0; border-top:1px solid var(--line); font-size:.97rem}
.tools{font-size:.86rem; color:var(--fog)}
.tools b{color:var(--bone); font-weight:500}
.off{--c:var(--ember)} .def{--c:var(--teal)} .grc{--c:var(--peri)}
.ai{margin-top:20px; display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center; border:1px solid var(--line-2); border-radius:18px; padding:30px 28px; background:linear-gradient(120deg, rgba(45,212,191,.07), rgba(139,156,255,.05) 55%, transparent)}
.ai h3{font-family:var(--display); font-weight:800; font-size:clamp(1.5rem, 2.6vw, 2rem); margin:0; letter-spacing:-.015em; line-height:1.12}
.ai ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 24px}
.ai li{font-size:.98rem; color:#C3CBDA; padding-left:18px; position:relative}
.ai li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--teal)}
/* Services */
.services{display:grid; grid-template-columns:1fr 1fr; gap:0 48px}
.svc{padding:24px 0; border-top:1px solid var(--line)}
.svc h3{font-family:var(--display); font-weight:700; font-size:1.3rem; margin:0 0 6px; letter-spacing:-.01em}
.svc p{margin:0; color:#C3CBDA; font-size:1rem}
/* Projects */
.sub{font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--fog); margin:0 0 14px; letter-spacing:0}
.projects{list-style:none; margin:0 0 44px; padding:0; border-bottom:1px solid var(--line)}
.proj{display:grid; grid-template-columns:minmax(180px, .9fr) 2fr auto; gap:24px; align-items:baseline; padding:22px 0; border-top:1px solid var(--line)}
.proj h3{font-family:var(--display); font-weight:700; font-size:1.3rem; margin:0; letter-spacing:-.01em}
.proj p{margin:0; color:#C3CBDA; font-size:1rem}
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.pill{font-size:.78rem; padding:3px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--fog)}
.pill.live{color:var(--teal); border-color:rgba(45,212,191,.4)}
.pill.off{color:var(--ember); border-color:rgba(245,165,36,.4)} .pill.def{color:var(--teal); border-color:rgba(45,212,191,.4)} .pill.grc{color:var(--peri); border-color:rgba(139,156,255,.4)}
.more{display:inline-flex; align-items:center; gap:6px; color:var(--bone); text-decoration:none; font-size:.92rem; font-weight:500; white-space:nowrap; border-bottom:1px solid var(--line-2); padding-bottom:2px}
.more:hover{border-color:var(--teal); color:var(--teal)}
.more svg{width:15px; height:15px}
.featured{position:relative; padding:28px 24px; margin:0 -24px; border-radius:16px; background:var(--panel-2); border-top:1px solid transparent}
.featured h3{font-size:1.65rem}
.featured + .proj{border-top-color:transparent}
/* Writing + store */
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 64px)}
.topics{list-style:none; margin:24px 0 28px; padding:0}
.topics li{padding:16px 0; border-top:1px solid var(--line)}
.topics b{display:block; font-family:var(--display); font-weight:700; font-size:1.15rem; margin-bottom:2px}
.topics span{color:#C3CBDA; font-size:.98rem}
.products{list-style:none; margin:24px 0 28px; padding:0}
.products a{display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:18px 18px; margin:0 -18px; border-radius:14px; text-decoration:none; transition:background .15s}
.products a:hover{background:var(--panel-2)}
.products b{font-family:var(--display); font-weight:700; font-size:1.15rem}
.products span{color:#C3CBDA; font-size:.95rem; grid-column:1}
.products em{font-style:normal; font-weight:600; color:var(--teal); grid-row:1; grid-column:2; align-self:center}
.products li + li a{border-top:1px solid var(--line); border-radius:0 0 14px 14px}
/* Background */
.timeline{list-style:none; margin:0; padding:0}
.timeline li{display:grid; grid-template-columns:150px 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--line)}
.when{font-family:var(--mono); font-size:.85rem; color:var(--fog); padding-top:3px}
.timeline b{font-family:var(--display); font-weight:700; font-size:1.15rem; display:block}
.timeline span{color:#C3CBDA; font-size:.98rem}
.certs{margin-top:28px; color:var(--fog); font-size:.95rem}
.certs b{color:var(--bone); font-weight:500}
/* FAQ */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; padding:22px 0; font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--body); font-weight:400; font-size:1.5rem; line-height:1; color:var(--teal); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px; color:#C3CBDA; max-width:68ch}
/* Contact */
.contact{text-align:left}
.contact h2{max-width:20ch}
.mail{display:inline-flex; align-items:center; gap:14px; margin-top:28px; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem, 4.4vw, 3rem); letter-spacing:-.02em; text-decoration:none; color:var(--bone); border-bottom:2px solid var(--teal); padding-bottom:4px; word-break:break-all}
.mail:hover{color:var(--teal)}
.mail svg{width:.8em; height:.8em; flex:none}
footer{border-top:1px solid var(--line); padding:32px 0 48px; color:var(--fog); font-size:.9rem}
footer .wrap{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center}
footer img{height:20px; width:auto}
footer nav{display:flex; gap:20px; margin-left:auto}
footer a{text-decoration:none} footer a:hover{color:var(--bone)}
/* Responsive */
@media (max-width: 960px){
.hero .wrap{grid-template-columns:1fr}
.domains{grid-template-columns:1fr}
.ai{grid-template-columns:1fr}
.two{grid-template-columns:1fr}
.proj{grid-template-columns:1fr; gap:8px}
.featured{margin:0 -16px; padding:22px 16px}
}
@media (max-width: 760px){
.links{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0; background:rgba(10,14,26,.97); border-bottom:1px solid var(--line); padding:8px var(--pad) 16px}
.links a{padding:12px 0; border-top:1px solid var(--line); font-size:1.05rem}
.nav.open .links{display:flex}
.menu{display:inline-flex}
.nav .btn{display:none}
.services{grid-template-columns:1fr}
.ai ul{grid-template-columns:1fr}
.timeline li{grid-template-columns:1fr; gap:4px}
footer nav{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
*{animation:none !important; transition:none !important; scroll-behavior:auto !important}
.rise{opacity:1; transform:none}
}