:root{
--bg:#0e0e10; --surface:#18181b; --line:#2c2c30;
--text:#f4f4f5; --muted:#8f8f96; --accent:#d4d4d8;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:inherit}
html,body{height:100%; margin:0}
body{background:var(--bg); color:var(--text); font-family:'IBM Plex Sans',system-ui,sans-serif; line-height:1.6}
h1,h2{font-family:'Space Grotesk',system-ui,sans-serif; margin:0; font-weight:700}
a{color:inherit; text-decoration:none}
.wrap{max-width:720px; margin:0 auto; padding:0 24px}

nav.top{position:sticky; top:0; top:env(safe-area-inset-top,0px); display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line); background:var(--bg); z-index:10}
nav.top .brand{font-family:'Space Grotesk'; font-weight:700}
.burger{background:none; border:1px solid var(--line); border-radius:4px; color:var(--text); font-size:1.1rem; padding:6px 10px; cursor:pointer}

.menu{position:fixed; inset:0; background:var(--bg); z-index:20; display:none; flex-direction:column; padding:24px; padding-top:calc(24px + env(safe-area-inset-top,0px))}
.menu.open{display:flex}
.menu .close{align-self:flex-end; background:none; border:1px solid var(--line); color:var(--text); border-radius:4px; padding:6px 10px; cursor:pointer}
.menu ul{list-style:none; padding:0; margin-top:40px}
.menu li{border-top:1px solid var(--line)}
.menu li:last-child{border-bottom:1px solid var(--line)}
.menu a{display:block; padding:20px 4px; font-family:'Space Grotesk'; font-size:1.3rem}
.menu a:hover{color:var(--muted)}

main{padding:44px 0}
main h2{font-size:1.25rem; margin-bottom:22px}
.hero p.role{color:var(--muted); margin:0 0 10px; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em}
.hero h1{font-size:2.3rem}
.hero p.lede{color:var(--muted); margin-top:16px; max-width:52ch}

.row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.row .desc{color:var(--muted); font-size:.85rem}
.row .left{display:flex; align-items:center; gap:12px}
.badge{width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:.9rem; flex-shrink:0}
.row a.go{border:1px solid var(--line); color:var(--text); border-radius:4px; padding:6px 12px; font-size:.85rem}
.row a.go:hover{border-color:var(--accent)}

.back{color:var(--muted); font-size:.9rem; display:inline-block; margin-bottom:18px}
.box{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:20px}
.box input{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:10px 12px; font-family:inherit; font-size:.9rem; margin-bottom:10px}
.box button.primary{background:var(--accent); color:#0e0e10; border:none; border-radius:6px; padding:10px 16px; font-family:'Space Grotesk'; font-weight:700; cursor:pointer}
.result{margin-top:14px; font-size:.85rem; color:var(--muted); word-break:break-all}
.result a{color:var(--text); text-decoration:underline}

.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.btn-social{width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--text); transition:border-color .15s ease}
.btn-social img{width:22px; height:22px; display:block}
.btn-social:hover{border-color:var(--accent)}

.row-contact{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:4px; padding:10px 16px; font-size:.9rem; background:var(--surface); color:var(--text); transition:border-color .15s ease}
.row-contact img{width:16px; height:16px; display:block; flex-shrink:0}
.row-contact:hover{border-color:var(--accent)}

form.contact{margin-top:28px; display:flex; flex-direction:column; gap:10px; max-width:420px}
form.contact input, form.contact textarea{background:var(--surface); border:1px solid var(--line); color:var(--text); border-radius:4px; padding:10px 12px; font-family:inherit; font-size:.95rem}
form.contact button{background:var(--accent); color:#0e0e10; border:none; border-radius:4px; padding:10px; font-family:'Space Grotesk'; font-weight:700; cursor:pointer}

.assistant{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.assistant .head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--muted)}
.assistant .dot{width:7px; height:7px; border-radius:50%; background:var(--muted)}
.assistant .messages{padding:18px; min-height:70px; max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:12px}
.assistant .msg{max-width:85%; font-size:.92rem; line-height:1.5}
.assistant .msg.user{align-self:flex-end; background:var(--line); color:var(--text); padding:9px 13px; border-radius:10px 10px 2px 10px}
.assistant .msg.reply{align-self:flex-start; color:var(--muted); padding:9px 0}
.assistant .input-row{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line)}
.assistant .input-row input{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:9px 12px; font-family:inherit; font-size:.9rem; outline:none}
.assistant .input-row button{background:var(--accent); color:#0e0e10; border:none; border-radius:6px; padding:0 16px; font-family:'Space Grotesk'; font-weight:700; cursor:pointer; font-size:.85rem}

footer{padding:40px 0 64px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; text-align:center}
@media(max-width:520px){ .hero h1{font-size:1.9rem} }