:root{
  --bg:#0d0f12;
}

:root,html[data-theme="dark"]{
  --bg:#0D0F12;
  --surface:rgba(255,255,255,0.04);
  --surface-hover:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);

  --text-primary:#F2F3F5;
  --text-secondary:#C8CDD2;
  --text-muted:#98A2AE;

  --brand-1:#7C4DFF;
  --brand-2:#FF7A1A;

  --grad:
    radial-gradient(1200px 800px at 15% 20%, rgba(124,77,255,.28) 0%, rgba(124,77,255,0) 55%),
    radial-gradient(1200px 800px at 90% 70%, rgba(255,122,26,.30) 0%, rgba(255,122,26,0) 60%);

  --radius:12px;
  --radius-lg:16px;

  --h1:clamp(28px,4vw,40px);
  --h2:clamp(18px,2.5vw,20px);
  --lead:clamp(14px,2vw,16px);

  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:20px;
  --space-5:24px;
}

html[data-theme="light"]{
  --bg:#F7F8FA;
  --surface:rgba(0,0,0,0.04);
  --surface-hover:rgba(0,0,0,0.06);
  --border:rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.14);
  --text-primary:#101114;
  --text-secondary:#3A3F45;
  --text-muted:#5B6168;
  --grad:
    radial-gradient(1200px 800px at 15% 20%, rgba(124,77,255,.16) 0%, rgba(124,77,255,0) 55%),
    radial-gradient(1200px 800px at 90% 70%, rgba(255,122,26,.18) 0%, rgba(255,122,26,0) 60%);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]){color-scheme:light;}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){color-scheme:dark;}
}

*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',system-ui,sans-serif;}
body{background:var(--bg);color:var(--text-primary);min-height:100vh;position:relative;}
.page-bg{position:fixed;inset:0;background:var(--grad);z-index:-1;}
.container{max-width:880px;margin:0 auto;padding:0 var(--space-5);}
@media(max-width:640px){.container{padding:0 var(--space-3);}}

h1{
  font-weight:800;
  font-size:var(--h1);
  line-height:1.15;
  margin:var(--space-5) 0 var(--space-2);
  letter-spacing:-0.01em;
}
.subtitle{
  color:var(--text-secondary);
  font-size:var(--lead);
  margin-bottom:calc(var(--space-5) + 10px);
}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;}

.tabs{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4);}
.tab{
  height:44px;padding:0 var(--space-4);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-secondary);
  text-decoration:none;
  transition:.2s;
}
.tab:hover{background:var(--surface-hover);color:var(--text-primary);}
.tab.active{background:linear-gradient(90deg,var(--brand-1),var(--brand-2));color:#0E0F12;border-color:transparent;font-weight:700;}

.page{display:none;}
.page.active{display:block;}
.desc{color:var(--text-secondary);max-width:70ch;margin:0 auto var(--space-3);}
.section{margin:var(--space-5) 0;}
.section h2{font-size:var(--h2);font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-2);margin:var(--space-4) 0 var(--space-3);}
.list{display:flex;flex-direction:column;gap:var(--space-2);list-style:none;}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-4);
  display:flex;align-items:center;justify-content:space-between;
  color:var(--text-primary);
  text-decoration:none;
  transition:background .2s,border-color .2s,transform .2s;
}
.card:hover{background:var(--surface-hover);border-color:var(--border-strong);}
.card .left{display:flex;align-items:center;gap:var(--space-3);}
.card .icon{display:flex;align-items:center;justify-content:center;}
.card .chevron{opacity:0;transition:opacity .2s ease;}
.card:hover .chevron{opacity:1;}

.card.cta{
  height:56px;
  border-radius:var(--radius-lg);
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#0E0F12;font-weight:800;
  justify-content:center;gap:var(--space-2);
  border:none;box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:.2s;
}
.card.cta .chevron{display:none;}
.card.cta:hover{filter:brightness(1.05);transform:translateY(-1px);}
.card.cta:active{transform:translateY(0);}

@media(max-width:640px){
  .card.cta{height:48px;}
}

.avatar{
  width:240px;height:240px;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
@media(max-width:640px){
  .avatar{width:160px;height:160px;}
}

footer{margin:var(--space-5) 0;color:var(--text-muted);text-align:center;font-size:.9rem;}

:focus-visible{outline:2px solid rgba(255,255,255,.55);outline-offset:2px;}
html[data-theme="light"] :focus-visible{outline:2px solid rgba(0,0,0,.55);}

#themeToggle{
  position:fixed;top:var(--space-3);right:var(--space-3);
  padding:var(--space-2);border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--text-primary);
  cursor:pointer;transition:background .2s,border-color .2s;
}
#themeToggle:hover{background:var(--surface-hover);border-color:var(--border-strong);}