:root { --bg:#060a13; --card:#0e1524; --line:#1d2942; --text:#eef3ff; --muted:#8b98b5; --aqua:#3fe3cb; --blue:#4c8dff; --amber:#ffb547; --green:#5ff093; }
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--text); font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
body { margin:0; line-height:1.6; }
a { color:var(--aqua); }
.wrap { max-width:1040px; margin:0 auto; padding:0 20px; }
header.top { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:600; font-size:20px; color:var(--text); text-decoration:none; }
.brand img { width:38px; height:38px; border-radius:9px; }
nav a { color:var(--muted); text-decoration:none; margin-left:22px; font-size:15px; }
nav a:hover { color:var(--text); }
.hero { display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; padding:40px 0 64px; }
h1 { font-size:clamp(34px,5.4vw,58px); line-height:1.08; font-weight:600; margin:0 0 18px; letter-spacing:-0.02em; text-wrap:balance; }
h1 em { font-style:normal; background:linear-gradient(90deg,var(--blue),var(--aqua)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { font-size:18px; color:var(--muted); max-width:34em; margin:0 0 26px; }
.pill { display:inline-block; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:99px; padding:10px 18px; font-size:14px; }
.pill b { color:var(--amber); font-weight:600; }
.dial { position:relative; width:min(100%,430px); aspect-ratio:1; margin:0 auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.dial img, .dial svg { position:absolute; inset:0; width:100%; height:100%; }
#needle { transform-origin:50% 50%; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
section { padding:56px 0; border-top:1px solid var(--line); }
h2 { font-size:clamp(24px,3.2vw,34px); font-weight:600; margin:0 0 10px; letter-spacing:-0.01em; }
.sub { color:var(--muted); max-width:44em; margin:0 0 30px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; }
.card h3 { margin:0 0 6px; font-size:17px; font-weight:600; }
.card p { margin:0; color:var(--muted); font-size:14.5px; }
.film { margin:0 0 40px; border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.5); aspect-ratio:16/9; background:#000; }
.film video { display:block; width:100%; height:100%; object-fit:cover; }
.story { display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; align-items:center; margin:16px 0 56px; }
.story .shot { margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.story .shot img { display:block; width:100%; height:100%; object-fit:cover; }
.story h2 { margin:0 0 10px; }
.story p { color:var(--muted); margin:0; }
.plans { grid-template-columns:1fr 1fr; max-width:820px; margin:0 auto; }
.plans .price { font-size:34px; font-weight:600; color:var(--text); margin:4px 0 10px; }
.plans .price span { font-size:15px; color:var(--muted); font-weight:400; }
.plans .pro { border-color:#3DF08A; }
.plates { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.plates figure { margin:0; text-align:center; }
.plates img { width:100%; display:block; }
.plates figcaption { color:var(--muted); font-size:13px; margin-top:8px; }
.note { border:1px solid rgba(255,181,71,.4); background:rgba(255,181,71,.07); border-radius:16px; padding:18px 20px; color:var(--text); font-size:15px; }
.note b { color:var(--amber); }
footer { border-top:1px solid var(--line); padding:28px 0 44px; color:var(--muted); font-size:13.5px; }
footer a { color:var(--muted); margin-right:18px; }
.doc { max-width:760px; padding:20px 0 60px; }
.doc h1 { font-size:clamp(30px,4.4vw,42px); }
.doc h2 { font-size:21px; margin-top:34px; }
.doc p, .doc li { color:#c9d3e8; }
form { display:grid; gap:14px; max-width:560px; }
label { font-size:14px; color:var(--muted); display:grid; gap:6px; }
input, textarea { font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
textarea { min-height:150px; resize:vertical; }
button { font:inherit; font-weight:600; color:#06100f; background:var(--aqua); border:0; border-radius:12px; padding:13px 18px; cursor:pointer; }
button:disabled { opacity:.6; cursor:default; }
.hp { position:absolute; left:-9999px; }
#sent { color:var(--green); }
#failed { color:var(--amber); }
details { border-top:1px solid var(--line); padding:14px 0; }
summary { cursor:pointer; font-weight:600; }
details p { color:var(--muted); margin:8px 0 0; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; padding-top:16px; } .grid, .plans, .story { grid-template-columns:1fr; } .story .story-text:nth-of-type(3) { order:1; } .story .shot:last-child { order:2; } .plates { grid-template-columns:repeat(3,1fr); } nav a { margin-left:14px; } }