:root { --ink:#080808; --paper:#f5f5f5; --cyan:#22d3ee; --pink:#f472b6; --yellow:#facc15; --green:#4ade80; --orange:#fb923c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; }
h1,h2,h3,.brand { font-family:"Space Grotesk",Inter,Arial,sans-serif; }
a { color:inherit; }
.nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px clamp(18px,4vw,50px); color:white; background:#000; border-bottom:4px solid #000; }
.brand { font-weight:900; letter-spacing:.04em; text-decoration:none; }
.links { display:flex; gap:8px; flex-wrap:wrap; }
.links a { padding:8px 11px; color:#000; background:white; border:2px solid #000; font-size:.75rem; font-weight:900; text-decoration:none; }
.links a:nth-child(2n) { background:var(--cyan); }
.page { width:min(1100px,calc(100% - 32px)); margin:0 auto; padding:64px 0 80px; }
.kicker { display:inline-block; margin:0 0 18px; padding:8px 12px; background:var(--yellow); border:3px solid #000; box-shadow:5px 5px 0 #000; font-weight:900; }
.hero h1 { max-width:900px; margin:0 0 20px; font-size:clamp(3rem,9vw,7rem); line-height:.88; letter-spacing:-.065em; }
.hero > p { max-width:720px; font-size:1.15rem; line-height:1.65; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.card { padding:26px; border:4px solid #000; box-shadow:8px 8px 0 #000; background:white; }
.card:nth-child(3n+1) { background:var(--pink); }.card:nth-child(3n+2) { background:var(--cyan); }.card:nth-child(3n) { background:var(--green); }
.card h2,.card h3 { margin:0 0 10px; }
.button { display:inline-block; margin-top:18px; padding:13px 18px; border:3px solid #000; box-shadow:6px 6px 0 #000; background:var(--yellow); font-weight:900; text-decoration:none; cursor:pointer; }
.button:active { transform:translate(4px,4px); box-shadow:2px 2px 0 #000; }
.form { display:grid; gap:16px; max-width:720px; margin-top:42px; }
label { display:grid; gap:7px; font-weight:900; }
input,textarea,select { width:100%; padding:14px; border:3px solid #000; background:white; color:#000; font:inherit; }
textarea { min-height:150px; resize:vertical; }
.notice { padding:16px; border:3px solid #000; background:white; font-weight:700; }
.viewer { position:relative; min-height:560px; margin-top:32px; overflow:hidden; border:4px solid #000; box-shadow:10px 10px 0 #000; background:#131313; }
.viewer canvas { display:block; width:100%; height:560px; }
.viewer-controls { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px; }
.viewer-controls input { width:auto; max-width:100%; background:white; }
.faq { margin-top:40px; display:grid; gap:14px; }
details { padding:18px 20px; border:3px solid #000; background:white; box-shadow:5px 5px 0 #000; }
summary { cursor:pointer; font-weight:900; }
footer { padding:30px; text-align:center; color:white; background:#000; }
@media (max-width:760px) { .nav{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.page{padding-top:42px}.viewer,.viewer canvas{min-height:420px;height:420px} }