@import url('./fonts/fonts.css');

:root{
  --bg:        oklch(0.135 0.012 160);
  --bg-raised: oklch(0.175 0.014 160);
  --bg-inset:  oklch(0.205 0.014 160);
  --terminal:  oklch(0.115 0.012 162);
  --line:      oklch(0.300 0.012 160);
  --line-soft: oklch(0.240 0.010 160);
  --ink:       oklch(0.945 0.012 165);
  --ink-2:     oklch(0.800 0.018 165);
  --ink-3:     oklch(0.680 0.020 165);
  --amber:     oklch(0.810 0.150 158);
  --amber-dim: oklch(0.720 0.130 158);
  --clay:      oklch(0.660 0.110 195);
  --amber-wash:oklch(0.810 0.150 158 / 0.10);
  --green:     oklch(0.80 0.14 158);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

  --display:'Inter', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:'Spline Sans Mono', ui-monospace, monospace;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; font-size:16px}
::selection{background:var(--amber); color:var(--bg)}
a{color:inherit}
img{max-width:100%}

.wrap{max-width:1180px; margin:0 auto; padding:0 var(--space-8)}
.idx{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; color:var(--amber-dim); text-transform:uppercase; font-weight:500}

nav{position:sticky; top:0; z-index:50; background:color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:64px}
.mark{display:flex; align-items:baseline; gap:10px; font-family:var(--display); font-weight:800; font-size:1.18rem; letter-spacing:-0.02em; text-decoration:none; color:var(--ink)}
.mark .dot{width:9px; height:9px; background:var(--amber); border-radius:1px; transform:translateY(-1px)}
.nav-links{display:flex; align-items:center; gap:var(--space-8)}
.nav-links a{color:var(--ink-2); text-decoration:none; font-size:0.92rem; font-weight:500; transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.cta{color:var(--bg); background:var(--amber); padding:8px 18px; border-radius:2px; font-weight:600}
.nav-links a.cta:hover{color:var(--bg)}
@media(max-width:680px){ .nav-links a.plain{display:none} }

.hero{padding:var(--space-24) 0 var(--space-16); border-bottom:1px solid var(--line-soft)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:var(--space-12)}
@media(min-width:880px){ .hero-grid{grid-template-columns:1.35fr 1fr; align-items:end} }
.eyebrow{display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6)}
.eyebrow .rule{height:1px; width:46px; background:var(--amber)}
h1{font-family:var(--display); font-weight:760; letter-spacing:-0.035em; line-height:0.98; font-size:clamp(3rem,8vw,6.2rem); color:var(--ink)}
h1 em{font-style:italic; font-weight:500; color:var(--amber)}
.lede{margin-top:var(--space-8); max-width:48ch; color:var(--ink-2); font-size:1.12rem; line-height:1.62}
.hero-actions{margin-top:var(--space-12); display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap}

.btn{font-family:var(--body); font-weight:600; font-size:0.95rem; border-radius:2px; cursor:pointer; padding:13px 26px; border:1px solid transparent; transition:transform .15s, border-color .15s; text-decoration:none; display:inline-block}
.btn-primary{background:var(--amber); color:var(--bg)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-text{background:none; border:none; color:var(--ink-2); font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line)}
.btn-text:hover{color:var(--amber); text-decoration-color:var(--amber)}

.term{background:var(--terminal); border:1px solid var(--line); border-radius:4px; overflow:hidden; font-family:var(--mono); font-size:0.84rem; box-shadow:0 24px 60px -30px oklch(0 0 0 / 0.7)}
.term-bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line-soft)}
.term-bar i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.term-bar i:first-child{background:var(--clay)}
.term-bar span{margin-left:8px; color:var(--ink-3); font-size:0.74rem; letter-spacing:0.04em}
.term-body{padding:18px; line-height:1.85}
.term-body .c{color:var(--ink-3)}
.term-body .k{color:var(--amber)}
.term-body .s{color:var(--green)}
.term-body .o{color:var(--ink); display:block; margin-top:6px; padding-top:8px; border-top:1px dashed var(--line-soft)}

section{padding:var(--space-24) 0; border-bottom:1px solid var(--line-soft)}
.sec-head{display:flex; align-items:baseline; gap:var(--space-4); margin-bottom:var(--space-12)}
.sec-head h2{font-family:var(--display); font-weight:720; letter-spacing:-0.025em; font-size:clamp(1.9rem,3.5vw,2.8rem)}

.pillars{display:grid; grid-template-columns:1fr; gap:0}
@media(min-width:760px){ .pillars{grid-template-columns:repeat(3,1fr)} }
.pillar{padding:var(--space-8) var(--space-8) var(--space-8) 0; border-top:1px solid var(--line)}
.pillar .n{font-family:var(--mono); color:var(--amber-dim); font-size:0.8rem; letter-spacing:0.1em}
.pillar h3{font-family:var(--display); font-weight:700; font-size:1.3rem; margin:var(--space-3) 0 var(--space-3); letter-spacing:-0.015em}
.pillar p{color:var(--ink-3); font-size:0.95rem; max-width:34ch}

.track{display:flex; flex-direction:column}
.track .row{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-8); align-items:center; padding:var(--space-8) 0; border-top:1px solid var(--line-soft); transition:padding .2s}
.track .row:hover{padding-left:var(--space-3)}
.track .row:last-child{border-bottom:1px solid var(--line-soft)}
.track .n{font-family:var(--mono); font-size:0.92rem; color:var(--ink-3); width:2.4em}
.track .row:hover .n{color:var(--amber)}
.track .t{font-family:var(--display); font-weight:700; font-size:1.22rem; letter-spacing:-0.01em}
.track .d{color:var(--ink-3); font-size:0.92rem; margin-top:3px; max-width:60ch}
.track .badge{font-family:var(--mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-2); border:1px solid var(--line); padding:4px 10px; border-radius:2px; white-space:nowrap}
.track .badge.java{color:var(--clay); border-color:color-mix(in oklch, var(--clay) 40%, var(--line))}

.dl{display:grid; grid-template-columns:1fr; gap:var(--space-6)}
@media(min-width:720px){ .dl{grid-template-columns:1fr 1fr} }
.dl-card{background:var(--bg-raised); border:1px solid var(--line); border-radius:5px; padding:var(--space-12)}
.dl-card .os{font-family:var(--display); font-weight:760; font-size:1.5rem; letter-spacing:-0.02em; margin-bottom:var(--space-2)}
.dl-card .meta{color:var(--ink-3); font-size:0.86rem; font-family:var(--mono); margin-bottom:var(--space-8)}
.dl-card .btn{width:100%; text-align:center}
.dl-note{margin-top:var(--space-8); color:var(--ink-3); font-size:0.86rem}
.dl-note a{color:var(--amber)}

.about-grid{display:grid; grid-template-columns:1fr; gap:var(--space-12)}
@media(min-width:880px){ .about-grid{grid-template-columns:1fr 1fr} }
.about p{color:var(--ink-2); font-size:1.05rem; line-height:1.7; margin-bottom:var(--space-6); max-width:60ch}
.about p b{color:var(--ink); font-weight:600}
.about .stat{border-top:1px solid var(--line); padding-top:var(--space-4); margin-top:var(--space-4)}
.about .stat .big{font-family:var(--display); font-weight:780; font-size:2.4rem; color:var(--amber); letter-spacing:-0.03em; line-height:1}
.about .stat .cap{color:var(--ink-3); font-size:0.86rem; font-family:var(--mono); margin-top:6px}

footer{padding:var(--space-16) 0 var(--space-24)}
.foot{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--space-8)}
.foot p{color:var(--ink-3); font-size:0.86rem; max-width:42ch; margin-top:var(--space-3)}
.foot-col a{color:var(--ink-2); text-decoration:none; font-size:0.9rem; display:block; margin-bottom:8px}
.foot-col a:hover{color:var(--amber)}
.foot-base{margin-top:var(--space-16); padding-top:var(--space-6); border-top:1px solid var(--line-soft); color:var(--ink-3); font-size:0.8rem; font-family:var(--mono)}

@media(prefers-reduced-motion:no-preference){
  .rise{opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}
  @keyframes rise{to{opacity:1; transform:none}}
}