* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:#09090c; color:#eae7e9; font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:#ffad7e; } a:focus-visible,summary:focus-visible { outline:2px solid #ff9b65; outline-offset:4px; } .site-header { max-width:1220px; margin:auto; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #302126; } .logo { display:flex; align-items:center; gap:12px; color:white; font-weight:900; letter-spacing:.1em; text-decoration:none; } .logo small { display:block; font-size:10px; color:#9b8d93; letter-spacing:.15em; } .logo-mark { display:grid; place-items:center; width:42px; height:42px; background:#a82024; border-radius:10px; font-size:24px; } nav { display:flex; flex-wrap:wrap; gap:20px; } nav a { text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.08em; } main { max-width:1172px; margin:auto; padding:0 24px 90px; } .intro { padding:90px 0 62px; } .eyebrow { margin:0 0 14px; color:#f47d49; font-size:12px; font-weight:800; letter-spacing:.17em; } h1,h2,h3 { line-height:1.16; } h1 { font-size:clamp(38px,6vw,76px); letter-spacing:-.04em; margin:0 0 22px; } h1 span { color:#e3482c; } .intro>p:not(.eyebrow) { max-width:750px; font-size:19px; color:#bcb2b7; } .notice { max-width:960px; margin-top:34px; padding:20px 24px; border-left:3px solid #e65c37; background:#1c1216; color:#d5c5c6; } .section { padding:54px 0; border-top:1px solid #2d2328; } h2 { margin:0 0 18px; font-size:clamp(28px,4vw,44px); letter-spacing:-.02em; } .lead { max-width:850px; margin:0 0 28px; color:#b6aeb2; } .levels { display:grid; gap:12px; } .level { display:flex; gap:24px; align-items:start; padding:22px; border:1px solid #35232a; border-radius:14px; background:linear-gradient(100deg,#1a1115,#0f0e11); } .number { font-size:30px; font-weight:900; color:#f1703c; line-height:1; min-width:48px; } .level h3 { margin:0 0 6px; font-size:19px; } .level h3 span { font-size:12px; font-weight:600; color:#eea17d; margin-left:10px; } .level p { margin:0; color:#bfb3b8; } .hardware-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .hardware-grid article { padding:25px; border:1px solid #3b292f; border-radius:14px; background:#151115; } .pill { font-size:11px; font-weight:800; letter-spacing:.1em; color:#f4a17d; } .hardware-grid h3 { margin:12px 0; } .hardware-grid p { color:#b9afb4; margin:0; } .steps { padding-left:24px; max-width:950px; } .steps li { padding:7px 0 7px 8px; color:#c1b8bc; } .steps strong { color:#fff; } code { color:#ffc09d; background:#24171b; padding:2px 5px; border-radius:4px; } .metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0 12px; } .metrics div { padding:20px; border:1px solid #43262c; border-radius:12px; background:#171014; } .metrics b { display:block; font-size:25px; color:#ff8b5d; } .metrics span,.fineprint { color:#a99ca3; font-size:13px; } .questions { display:grid; gap:10px; } details { border:1px solid #35272c; border-radius:12px; background:#141014; } summary { cursor:pointer; padding:18px 22px; font-weight:750; } summary:hover { color:#ffab7a; } details[open] { border-color:#75412e; } details p { padding:0 22px 20px; margin:0; color:#bfb4ba; } .next { padding:35px; border:1px solid #803d2b; border-radius:18px; background:radial-gradient(ellipse at 100% 0%,#4b1b16,#160f13 60%); } .next p:not(.eyebrow) { color:#cbbcc0; max-width:700px; } .next a { display:inline-block; margin-top:12px; font-size:13px; font-weight:800; letter-spacing:.08em; } footer { padding:25px; text-align:center; border-top:1px solid #302329; color:#95858c; font-size:11px; letter-spacing:.13em; } footer span { color:#d64c2d; } @media(max-width:750px) { .site-header { align-items:flex-start; flex-direction:column; } .intro { padding-top:56px; } .hardware-grid,.metrics { grid-template-columns:1fr; } .level { gap:14px; padding:18px; } .level h3 span { display:block; margin:6px 0 0; } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }