:root {
  --ink:#061820; --cream:#f8f0d5; --muted:#a6bcba; --mint:#a3e7c0;
  --coral:#e78765; --gold:#f2bd76; --line:#a9cfbf30;
  --serif:Georgia,'Times New Roman',serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:36px }
body { margin:0; background:var(--ink); color:var(--cream); font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer }
a,button,summary { touch-action:manipulation; outline-offset:6px }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--mint) }
img,video { max-width:100%; display:block }
::selection { background:var(--mint); color:var(--ink) }
.wrap { max-width:1240px; margin:0 auto; padding:0 52px }
.eyebrow { font:11px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.eyebrow.dot:before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--mint); margin-right:10px }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.06; letter-spacing:-.045em }
h2 { font-size:clamp(40px,5vw,60px) }
p { color:var(--muted) }
em { font-weight:400; color:var(--mint) }
.skip { position:fixed; z-index:100; top:-100px; left:20px; background:var(--mint); color:var(--ink); padding:12px 20px }
.skip:focus { top:12px }
.site-header { height:104px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10 }
.brand { display:flex; align-items:center; gap:12px; font:26px/1 var(--serif); letter-spacing:-1px; white-space:nowrap }
.brand img { width:42px; height:42px; border-radius:12px; border:1px solid var(--line) }
.site-header nav { display:flex; align-items:center; gap:28px; font-size:13px }
.site-header nav>a:not(.btn) { padding:12px 0; color:var(--muted) }
.site-header nav>a:hover { color:var(--cream) }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:22px; min-height:52px; padding:12px 23px; border:1px solid transparent; border-radius:15px; background:var(--mint); color:var(--ink); font-size:14px; font-weight:600; line-height:1.4; transition:transform .16s,background .16s,box-shadow .16s }
.btn:hover { background:#c3f3d6; box-shadow:0 5px 24px #00111355; transform:translateY(-2px) }
.btn:active { transform:scale(.975) }
.btn.secondary { background:#f8f0d509; border-color:var(--line); color:var(--cream) }
.btn.secondary:hover { background:#f8f0d514; border-color:#a3e7c070 }
.btn.small { min-height:44px; padding:10px 17px; font-size:12px; border-radius:12px }
.btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.hero { position:relative; min-height:650px; isolation:isolate; overflow:hidden }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; z-index:-2 }
.hero:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#061820 0%,#061820ec 20%,#061820a6 40%,transparent 68%),linear-gradient(0deg,#061820,transparent 18%) }
.hero-content { padding-top:76px; padding-bottom:140px; max-width:700px }
.hero h1 { font-size:clamp(65px,7vw,100px); margin:20px 0 25px; line-height:1.02 }
.hero-copy { font-size:17px; line-height:1.8; max-width:390px; color:#bbc9c0 }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:31px 0 16px }
.fine { font-size:11px; line-height:1.7; color:var(--muted) }
.section { padding:80px 0 }
.feel { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center }
.film-stage { position:relative; padding:25px 0; background:radial-gradient(ellipse at 50% 40%,#245a5b 0%,#0b2a32 50%,transparent 72%); display:grid; place-items:center }
.film-stage:before { content:''; position:absolute; inset:0; background-image:radial-gradient(#aaccc814 1.5px,transparent 1.6px); background-size:8px 8px; mask-image:radial-gradient(ellipse,#000 15%,transparent 70%) }
.phone { position:relative; width:min(255px,85%); border:6px solid #183740; border-radius:37px; overflow:hidden; background:#06222c; box-shadow:0 28px 65px #0006,0 0 0 1px #bdd6c536; transform:rotate(-6deg) }
.phone video { width:100%; aspect-ratio:750/1334; object-fit:cover; border-radius:29px }
.feel-copy h2 { margin-bottom:24px }
.feel-copy>p { font-size:17px; max-width:430px }
.skill-list { padding:0; margin:30px 0 0; list-style:none }
.skill-list li { display:grid; grid-template-columns:28px 1fr; gap:16px; padding:20px 0; border-top:1px solid var(--line) }
.skill-list .number { font:11px/1.5 var(--mono); color:var(--gold); padding-top:6px }
.skill-list strong { font-size:15px; font-weight:600; display:block; margin-bottom:4px }
.skill-list p { font-size:14px; max-width:370px }
.modes { background:#0c242b; border-block:1px solid #afcbb91a; background-image:radial-gradient(#aad5c909 1.1px,transparent 1.3px); background-size:8px 8px }
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px }
.mode h2 { font-size:34px; letter-spacing:-.035em; margin-bottom:20px }
.mode p { font-size:15px; max-width:325px }
.mode p+p { margin-top:14px }
.buoy { display:block; width:22px; height:39px; margin-bottom:25px; background:var(--mint); clip-path:polygon(47% 0,53% 0,57% 32%,90% 78%,100% 84%,90% 94%,10% 94%,0 84%,10% 78%,43% 32%) }
.buoy.coral { background:var(--coral) }
.buoy.gold { background:var(--gold) }
.beta-section { padding:65px 0 }
.beta-inner { display:flex; align-items:center; justify-content:space-between; gap:32px }
.beta-section h2 { font-size:46px; margin-bottom:14px }
.beta-section p { font-size:15px }
.beta-section .fine { margin-top:12px; max-width:270px; font-size:11px }
.site-footer { padding:32px 0 }
.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:25px }
.footer-top { padding-top:30px; border-top:1px solid var(--line) }
.site-footer .brand { font-size:23px }
.site-footer .brand img { width:32px; height:32px; border-radius:9px }
.site-footer nav { display:flex; gap:25px; font-size:12px; color:var(--muted) }
.site-footer nav a { display:inline-flex; align-items:center; min-height:44px }
.site-footer nav a:hover { color:var(--mint) }
.footer-bottom { padding-top:25px; font:10px var(--mono); color:var(--muted) }
.motion-toggle { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:10px; padding:10px 13px; min-height:44px; font:10px var(--mono) }
.motion-toggle:hover { border-color:var(--mint); color:var(--cream) }
.legal { max-width:820px; margin:auto; padding:55px 40px 70px }
.legal h1 { font-size:clamp(49px,7vw,75px); margin:17px 0 23px }
.legal .updated { margin-bottom:28px; font:11px/1.6 var(--mono); color:var(--muted) }
.legal .lead { font-size:19px; line-height:1.7; color:var(--cream); padding:20px 0 28px; border-bottom:1px solid var(--line) }
.legal h2 { font-size:29px; letter-spacing:-.025em; margin:40px 0 13px; line-height:1.25 }
.legal p,.legal li { font-size:15px; line-height:1.85; margin-bottom:15px; color:#b8c9c4 }
.legal a { color:var(--mint); text-decoration:underline; text-underline-offset:4px }
.legal a.btn { color:var(--ink); text-decoration:none }
.legal ul { padding-left:22px }
.legal .legal-nav { display:flex; flex-wrap:wrap; gap:4px 24px; padding:15px 0 0; font-size:12px }
.legal .legal-nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none }
.legal .note { padding:18px 22px; border:1px solid var(--line); border-radius:15px; margin-top:25px }
.legal .note p { margin:0 }
.faq { border-top:1px solid var(--line); padding:16px 0 }
.faq summary { cursor:pointer; font-size:17px; color:var(--cream); padding:8px 0 }
.faq p { margin-top:13px }
.draft { background:#53361c; padding:12px; text-align:center; font-size:12px }
@media(min-width:1500px) {
  .hero:after { background:linear-gradient(90deg,#061820 5%,#061820d4 26%,#06182066 44%,transparent 68%),linear-gradient(0deg,#061820,transparent 18%) }
}
@media(max-width:900px) {
  .wrap { padding:0 30px }
  .site-header nav { gap:20px }
  .hero h1 { font-size:76px }
  .hero-content { max-width:570px; padding-top:70px }
  .hero-copy { max-width:340px }
  .hero:after { background:linear-gradient(90deg,#061820f2,#061820d9 30%,#06182050 72%,transparent),linear-gradient(0deg,#061820,transparent 30%) }
  .feel { gap:40px }
  .section { padding:65px 0 }
  .mode-grid { gap:28px }
  .mode h2 { font-size:29px }
}
@media(max-width:620px) {
  .wrap { padding:0 24px }
  .site-header { height:86px }
  .brand { font-size:24px; gap:9px }
  .brand img { width:35px; height:35px; border-radius:10px }
  .site-header nav { gap:0 }
  .site-header nav>a:not(.btn) { display:none }
  .site-header .btn { font-size:11px; padding:10px 13px; gap:8px }
  .hero { min-height:825px }
  .hero-content { padding-top:36px; padding-bottom:350px }
  .hero h1 { font-size:clamp(43px,13.8vw,79px); margin:20px 0 24px }
  .hero-copy { max-width:350px; font-size:15px }
  .hero-actions { gap:9px; margin:26px 0 14px }
  .hero .btn { font-size:12px; gap:12px; padding:13px 17px }
  .hero:after { background:linear-gradient(180deg,#061820 2%,#061820fa 17%,#061820df 38%,#06182000 62%,#06182000 88%,#061820 100%) }
  .section { padding:55px 0 }
  .feel { grid-template-columns:1fr; gap:30px }
  .film-stage { padding:20px 0 }
  .phone { width:230px; transform:rotate(-4deg) }
  .feel-copy h2 { font-size:40px }
  .feel-copy>p { font-size:16px }
  .skill-list p { max-width:none }
  .mode-grid { grid-template-columns:1fr; gap:30px }
  .mode { position:relative; padding-left:44px }
  .mode+.mode { border-top:1px solid var(--line); padding-top:30px }
  .mode .buoy { position:absolute; top:0; left:0 }
  .mode+.mode .buoy { top:30px }
  .mode h2 { font-size:31px; margin-bottom:14px }
  .mode p { max-width:none; font-size:14px }
  .mode p+p { margin-top:10px }
  .beta-section { padding:50px 0 20px }
  .beta-inner { flex-direction:column; align-items:flex-start; gap:24px }
  .beta-section h2 { font-size:39px }
  .footer-top { align-items:flex-start; flex-direction:column; gap:15px }
  .site-footer nav { gap:23px }
  .footer-bottom { gap:15px; font-size:9px }
  .legal { padding:40px 24px 50px }
  .legal .lead { font-size:17px }
  .legal p,.legal li { font-size:14px }
  .legal h2 { font-size:26px }
}
@media(max-width:360px) {
  .site-header .brand { font-size:21px; gap:7px }
  .site-header .brand img { width:31px; height:31px }
  .site-header .btn { padding:10px; gap:6px }
  .hero .eyebrow { font-size:9px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { transition:none!important; animation:none!important }
  .btn:hover,.btn:active { transform:none }
}
html[data-motion=off] { scroll-behavior:auto }
html[data-motion=off] * { transition:none!important }
html[data-motion=off] .btn:hover,html[data-motion=off] .btn:active { transform:none }