:root { --navy:#091533; --ink:#18213b; --muted:#5b6680; --paper:#fffaf4; --line:#e7e1d8; --coral:#ff5c39; --cream:#fff4e5; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 Inter, ui-sans-serif, system-ui, sans-serif; }
a { color:inherit; } .shell { max-width:1120px; margin:auto; padding:0 24px; } header { padding:24px 0; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; gap:10px; align-items:center; text-decoration:none; font-weight:800; font-size:21px; } .brand img { width:38px; height:38px; border-radius:11px; } nav { display:flex; gap:22px; font-size:14px; } nav a { text-decoration:none; color:var(--muted); } nav a:hover, nav a:focus { color:var(--coral); }
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:64px; min-height:570px; align-items:center; padding:64px 0 80px; } .eyebrow { color:var(--coral); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } h1 { font-size:clamp(44px,6vw,76px); line-height:.98; letter-spacing:-.06em; margin:14px 0 26px; } h2 { font-size:clamp(30px,4vw,46px); letter-spacing:-.045em; line-height:1.05; } .lead { font-size:20px; max-width:580px; color:var(--muted); } .button { display:inline-block; background:var(--coral); color:white; padding:14px 19px; border-radius:10px; margin-top:22px; font-weight:750; text-decoration:none; }
.panel { background:var(--navy); color:white; padding:28px; border-radius:28px; box-shadow:16px 18px 0 #ffd5c9; } .video { border-radius:17px; background:linear-gradient(145deg,#ff6b4b,#ed3d53); padding:26px; height:298px; display:flex; align-items:end; } .play { display:grid; place-items:center; width:72px;height:72px;background:white;color:var(--coral);border-radius:50%;font-size:25px; } .clips { display:flex; gap:10px; margin-top:18px; } .clip { flex:1; background:#14234b; border:1px solid #2b3b65; padding:15px 10px; border-radius:10px; font-size:12px; } .clip b { display:block; margin-bottom:8px; color:#ffc8bb; }
section { padding:78px 0; border-top:1px solid var(--line); } .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .card { background:white; border:1px solid var(--line); padding:28px; border-radius:16px; } .number { color:var(--coral); font-weight:800; } .notice { border-left:4px solid var(--coral); padding:4px 0 4px 20px; color:var(--muted); max-width:760px; } footer { border-top:1px solid var(--line); padding:32px 0 44px; display:flex; justify-content:space-between; color:var(--muted); font-size:14px; }
.legal { max-width:760px; padding:60px 0 90px; } .legal h1 { font-size:50px; } .legal h2 { font-size:25px; margin-top:38px; } .legal p, .legal li { color:#38435c; } @media(max-width:720px) { header, footer { gap:18px; align-items:flex-start; flex-direction:column; } nav { flex-wrap:wrap; } .hero,.grid { grid-template-columns:1fr; gap:28px; } .hero { padding-top:35px; min-height:auto; } .panel { box-shadow:8px 10px 0 #ffd5c9; } }