:root { --canvas:#111211; --surface:#191b18; --ink:#f1f0e9; --secondary:#b5b8af; --line:#383c34; --accent:#d0b966; }
body { background:var(--canvas); color:var(--ink); padding-top:76px; }
.top-nav { height:76px; background:var(--canvas); border-bottom:1px solid var(--line); padding:16px 6vw; backdrop-filter:none; justify-content:space-between; gap:20px; }
.top-nav img { height:34px; }
.level-nav { display:flex; gap:6px; align-items:center; }
.level-nav a { color:var(--secondary); text-decoration:none; font-size:14px; padding:9px 12px; border:1px solid transparent; }
.level-nav a[aria-current="page"] { color:var(--ink); border-color:var(--line); }
.hero { height:auto; min-height:360px; padding:64px 6vw; align-items:center; border-bottom:1px solid var(--line); }
.hero-bg { left:58%; opacity:.65; background-position:center; }
.hero-gradient { background:linear-gradient(90deg,var(--canvas) 48%,transparent 100%); }
.roman-watermark { display:none; }
.hero-content { max-width:760px; }
.hero h1 { font-size:clamp(44px,6vw,76px); font-weight:600; letter-spacing:-.045em; line-height:1.08; margin-bottom:20px; }
.hero h1 span { color:inherit; }
.level-badge { font-size:12px; color:var(--accent); letter-spacing:.18em; margin-bottom:24px; }
.hero-subtitle { color:var(--secondary); font-size:18px; font-weight:400; line-height:1.6; max-width:520px; }
.container { max-width:1280px; }
.container section { padding:48px 0; }
.section-label { font-size:13px; letter-spacing:.12em; color:var(--secondary); margin-bottom:24px; }
.section-label::after { max-width:none; background:var(--line); }
.sop-grid { display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.sop-card { display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:24px; padding:24px 0; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; cursor:default; }
.sop-card:hover { transform:none; box-shadow:none; border-color:var(--line); background:var(--surface); }
.sop-number { background:none; border:0; padding:0; font-size:12px; color:var(--secondary); }
.sop-name { font-size:20px; font-weight:500; letter-spacing:-.02em; }
.sop-btn { padding:10px 16px; font-size:14px; border:1px solid var(--line); border-radius:0; color:var(--ink); text-decoration:none; background:transparent; }
.sop-btn:hover { background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.goals-grid { gap:12px; }
.goal-item { font:inherit; text-align:left; color:var(--ink); border-radius:0; background:var(--surface); border:1px solid var(--line); padding:20px; cursor:pointer; }
.goal-text { font-size:16px; line-height:1.5; }
.goal-item.checked { background:var(--surface); border-color:var(--accent); }
.goal-item.checked .goal-text { color:var(--secondary); }
.goal-checkbox { flex-shrink:0; border-radius:0; }
footer { position:static; background:var(--canvas); padding:28px 6vw; border-top:1px solid var(--line); }
.progress-bar-wrap { font-size:14px; }
.progress-note { font-size:13px; color:var(--secondary); margin-top:16px; line-height:1.6; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:650px) { body { padding-top:112px; } .top-nav { height:112px; flex-wrap:wrap; gap:12px; padding:14px 6vw; } .top-nav img { height:28px; } .level-nav { width:100%; justify-content:space-between; } .level-nav a { padding:7px 10px; } .hero { min-height:280px; padding:40px 6vw; } .hero-bg { left:35%; opacity:.3; } .hero-gradient { background:linear-gradient(90deg,var(--canvas),transparent); } .hero-subtitle { font-size:16px; } .sop-card { grid-template-columns:1fr auto; gap:10px 14px; padding:22px 0; } .sop-number { grid-column:1/-1; } .sop-name { font-size:18px; } .sop-btn { padding:9px 12px; } footer { gap:20px; flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; } }