@import "tailwindcss";

:root { --navy:#04182b; --navy-deep:#020d18; --ink:#0a2639; --muted:#587080; --cyan:#78d6ef; --cyan-bright:#a7efff; --mist:#eef6f7; --mist-deep:#dcebed; --line:rgba(6,35,52,.16); --ui-font:"Meiryo UI", Meiryo, "Yu Gothic UI", "Hiragino Sans", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f7f6f2; color:var(--ink); font-family:var(--ui-font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1280px, calc(100% - 80px)); margin-inline:auto; }
.hero { min-height:810px; position:relative; overflow:hidden; color:var(--navy); background:#f7f6f2; }
.hero::before { content:""; position:absolute; width:85vw; height:50vw; right:-30vw; bottom:-31vw; border-radius:50% 50% 0 0; border:1px solid rgba(43,196,195,.28); background:linear-gradient(165deg,rgba(166,242,241,.42),rgba(43,196,195,.06)); box-shadow:0 0 0 62px rgba(43,196,195,.045),0 0 0 124px rgba(43,196,195,.035); transform:rotate(-7deg); }
.hero::after { content:""; position:absolute; inset:0; opacity:.42; background-image:linear-gradient(rgba(7,35,57,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(7,35,57,.12) 1px,transparent 1px); background-size:190px 190px; -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 39%,#000 64%,#000 100%),linear-gradient(180deg,transparent 0,#000 46%,#000 100%); mask-image:linear-gradient(90deg,transparent 0,transparent 39%,#000 64%,#000 100%),linear-gradient(180deg,transparent 0,#000 46%,#000 100%); }
.hero-noise { position:absolute; inset:0; pointer-events:none; opacity:.12; background-image:radial-gradient(rgba(7,35,57,.55) .45px, transparent .75px); background-size:5px 5px; }
.nav { height:88px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; border-bottom:1px solid rgba(7,35,57,.18); }
.brand-lockup { display:block; width:144px; height:80px; overflow:hidden; background:#f7f6f2; flex:0 0 auto; }.brand-lockup img { display:block; width:100%; height:100%; object-fit:contain; }
.nav-center { display:flex; gap:28px; margin-left:140px; color:rgba(7,35,57,.66); font-size:11px; letter-spacing:.07em; }
.nav-center a { transition:color .2s ease; }.nav-center a:hover { color:var(--navy); }
.nav-status { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(7,35,57,.35); border-radius:99px; font-size:11px; letter-spacing:.08em; }
.status-light { width:6px; height:6px; display:block; background:var(--cyan); border-radius:50%; box-shadow:0 0 13px var(--cyan); }
.hero-content { min-height:638px; display:grid; grid-template-columns:minmax(350px,.92fr) minmax(370px,.7fr); align-items:center; gap:clamp(44px,8vw,160px); position:relative; z-index:1; }
.eyebrow { margin:0; color:#168f99; font-size:10px; letter-spacing:.21em; font-weight:700; }.eyebrow span { margin-left:13px; color:rgba(7,35,57,.46); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--ui-font); }
.hero h1 { margin:23px 0 0; font-size:clamp(49px,5.45vw,86px); line-height:1.12; font-weight:700; letter-spacing:-.07em; }.hero h1 em { font-style:normal; color:#168f99; }.closing h2 em { font-style:normal; color:var(--cyan-bright); }
.hero-description { margin:27px 0 0; color:rgba(7,35,57,.7); font-size:16px; letter-spacing:.03em; line-height:2; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:37px; }.button { display:inline-flex; align-items:center; gap:12px; padding:14px 17px; border:1px solid transparent; font-size:12px; font-weight:700; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-3px); }.button-primary { color:#fff; background:var(--navy); }.button-quiet { border-color:rgba(7,35,57,.35); color:var(--navy); }
.hero-device-stack { width:min(100%,470px); height:670px; justify-self:center; position:relative; }.hero-visual { width:308px; aspect-ratio:1206 / 2622; position:absolute; right:0; bottom:0; overflow:hidden; border:8px solid #071b2d; border-radius:42px; background:#071b2d; box-shadow:20px 25px 0 rgba(43,196,195,.16),0 23px 55px rgba(4,24,43,.18); }.hero-visual img { display:block; width:100%; height:100%; object-fit:cover; }.watch-visual { width:157px; position:absolute; left:16px; bottom:72px; z-index:2; overflow:hidden; padding:7px; border:4px solid #071b2d; border-radius:40px; background:#071b2d; box-shadow:0 16px 34px rgba(4,24,43,.18); }.watch-visual img { display:block; width:100%; border-radius:27px; }
.hero-bottom { display:flex; align-items:center; gap:17px; position:relative; z-index:1; padding-bottom:25px; color:rgba(7,35,57,.5); font-size:9px; letter-spacing:.18em; }.hero-bottom p { margin:0; }.bottom-rule { flex:1; height:1px; background:rgba(7,35,57,.25); }
.introduction { padding:145px 0 137px; }.section-label { display:flex; align-items:center; gap:13px; color:#4b94a9; font-size:10px; font-weight:700; letter-spacing:.16em; }.section-label span { color:var(--ink); }.section-label p { margin:0; }.introduction-grid { display:grid; grid-template-columns:1.2fr .68fr; gap:clamp(50px,9vw,190px); align-items:end; margin-top:54px; }.introduction h2,.flow-heading h2,.principles h2,.closing h2 { margin:0; font-weight:700; letter-spacing:-.065em; }.introduction h2 { max-width:810px; font-size:clamp(32px,3.6vw,56px); line-height:1.38; text-wrap:balance; }.introduction-body { color:var(--muted); font-size:14px; line-height:2; }.introduction-body p { margin:0 0 20px; }.text-link { display:inline-flex; gap:12px; align-items:center; margin-top:21px; padding-bottom:5px; border-bottom:1px solid var(--ink); color:var(--ink); font-size:12px; font-weight:700; }
.feature-band { overflow:hidden; background:var(--mist-deep); }.feature-band-inner { height:125px; display:flex; align-items:center; justify-content:space-between; }.feature-band p { margin:0; font-size:clamp(14px,1.8vw,24px); font-weight:700; letter-spacing:.045em; }.orbital-mark { position:relative; width:104px; height:72px; }.orbital-mark span { position:absolute; left:0; top:50%; width:100%; height:1px; background:var(--ink); transform:rotate(25deg); }.orbital-mark span:nth-child(2) { transform:rotate(-25deg); }.orbital-mark span:nth-child(3) { left:50%; top:0; width:1px; height:100%; transform:none; }
.flow-section { padding:139px 0 146px; }.flow-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-top:46px; }.flow-heading h2 { font-size:clamp(40px,4.45vw,68px); line-height:1.22; }.flow-heading p { margin:0 0 6px; color:var(--muted); font-size:14px; line-height:1.9; }.flow-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:63px; }.flow-card { min-height:345px; padding:21px 22px 19px; display:flex; flex-direction:column; border:1px solid var(--line); background:#fbfdfd; transition:transform .2s ease,box-shadow .2s ease; }.flow-card:hover { transform:translateY(-7px); box-shadow:0 20px 40px rgba(4,38,54,.1); }.card-top { display:flex; justify-content:space-between; color:#4b94a9; font-size:10px; letter-spacing:.13em; }.card-top span:last-child { color:#8298a2; }.card-art { height:82px; margin:28px 0 15px; position:relative; overflow:hidden; border-top:1px solid rgba(7,35,57,.16); border-bottom:1px solid rgba(7,35,57,.12); }.card-art i,.card-art i::after,.card-art i::before { content:""; position:absolute; display:block; }.flow-card-01 .card-art { background:linear-gradient(128deg,rgba(43,196,195,.21),transparent 65%); }.flow-card-01 .card-art i { width:122%; height:108px; left:-12%; bottom:-76px; border-radius:50% 50% 0 0; border-top:2px solid #2bc4c3; transform:rotate(-8deg); }.flow-card-01 .card-art i::after { width:135%; height:90px; left:-2%; top:9px; border-radius:50% 50% 0 0; border-top:1px solid rgba(7,35,57,.42); }.flow-card-02 .card-art { background:repeating-linear-gradient(120deg,#092b44 0 14px,#113d58 15px 28px); }.flow-card-02 .card-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(43,196,195,.07),rgba(43,196,195,.42),rgba(43,196,195,.07)); }.flow-card-02 .card-art i { width:36px; height:36px; right:22px; top:23px; border:1px solid #a7efff; border-radius:50%; box-shadow:0 0 0 8px rgba(167,239,255,.15); }.flow-card-03 .card-art { display:flex; align-items:end; gap:8px; padding:16px 15px; background:#e9f5f4; }.flow-card-03 .card-art i,.flow-card-03 .card-art i::before,.flow-card-03 .card-art i::after { position:relative; content:""; display:block; width:28px; background:#2bc4c3; }.flow-card-03 .card-art i { height:22px; }.flow-card-03 .card-art i::before { height:43px; left:36px; top:-21px; background:#168f99; }.flow-card-03 .card-art i::after { height:60px; left:72px; top:-60px; background:#092b44; }.card-content { margin-top:auto; }.flow-card h3 { margin:0; font-size:38px; letter-spacing:-.07em; }.flow-card p { min-height:49px; margin:15px 0 0; color:var(--muted); font-size:13px; line-height:1.75; }.card-arrow { display:flex; justify-content:flex-end; margin-top:21px; color:#3684a0; font-size:22px; }
.card-art { height:auto; aspect-ratio:1 / 1; border:1px solid rgba(7,35,57,.14); background:#e6eef0; }
.card-art img { display:block; width:100%; height:100%; object-fit:cover; }
.card-art::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(247,246,242,.08),transparent 44%,rgba(4,24,43,.08)); }
.flow-card-01 .card-art { background:#102f4a; }.flow-card-01 .card-art img,.flow-card-02 .card-art img,.flow-card-03 .card-art img { width:100%; height:100%; object-fit:cover; }.flow-card-01 .card-art img { object-position:center 36%; }.flow-card-02 .card-art { background:#031421; }.flow-card-02 .card-art img { object-fit:contain; object-position:center top; }.flow-card-02 .card-art::after { background:linear-gradient(90deg,rgba(43,196,195,.12),transparent 50%,rgba(43,196,195,.08)); }.flow-card-03 .card-art { background:#e6edf0; }.flow-card-03 .card-art img { object-position:center 10%; }.flow-card-03 .card-art::after { background:transparent; }
.principles { padding:129px 0 132px; color:#fff; background:var(--navy); }.principles-grid { display:grid; grid-template-columns:.83fr 1.17fr; gap:clamp(52px,13vw,215px); }.section-label.light { color:var(--cyan-bright); }.section-label.light span { color:rgba(255,255,255,.72); }.principles h2 { margin-top:46px; font-size:clamp(43px,4.5vw,68px); line-height:1.25; }.principle-list { border-top:1px solid rgba(255,255,255,.28); }.principle-list article { display:grid; grid-template-columns:45px 1fr; gap:13px; padding:26px 0 30px; border-bottom:1px solid rgba(255,255,255,.22); }.principle-list article>span { color:var(--cyan-bright); font-size:10px; letter-spacing:.12em; }.principle-list h3 { margin:0; font-size:19px; letter-spacing:-.035em; }.principle-list p { max-width:440px; margin:10px 0 0; color:rgba(255,255,255,.65); font-size:13px; line-height:1.85; }
.closing { position:relative; overflow:hidden; padding:147px 0 154px; color:#fff; text-align:center; background:linear-gradient(135deg,#052a4c,#064a72); }.closing::before { content:""; position:absolute; inset:0; opacity:.5; background:linear-gradient(180deg,rgba(0,19,43,.13),rgba(0,9,22,.48)),url('/pool-hero.png') center/cover; mix-blend-mode:luminosity; }.closing-rings { position:absolute; top:50%; left:50%; width:790px; height:790px; border:1px solid rgba(169,238,253,.22); border-radius:50%; transform:translate(-50%,-45%); }.closing-rings i { position:absolute; inset:63px; display:block; border:1px solid rgba(169,238,253,.14); border-radius:50%; }.closing-rings i:nth-child(2) { inset:160px; }.closing-rings i:nth-child(3) { inset:257px; }.closing-content { position:relative; }.closing h2 { margin-top:20px; font-size:clamp(39px,4.5vw,68px); line-height:1.28; }.closing-description { margin:26px 0 0; color:rgba(255,255,255,.74); font-size:14px; line-height:1.9; }.waitlist-button { display:inline-flex; align-items:center; gap:22px; margin-top:34px; padding:17px 25px; border:1px solid var(--cyan-bright); color:var(--navy); background:var(--cyan-bright); font-size:13px; font-weight:700; transition:transform .2s ease,background .2s ease; }.waitlist-button:hover { transform:translateY(-3px); background:#fff; }.waitlist-note { max-width:520px; margin:12px auto 0; color:rgba(255,255,255,.6); font-size:10px; line-height:1.7; }.social-links { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:750px; margin:42px auto 0; text-align:left; }.social-links a { display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; padding:17px 18px; border:1px solid rgba(255,255,255,.38); background:rgba(2,19,34,.18); transition:background .2s ease,transform .2s ease; }.social-links a:hover { background:rgba(255,255,255,.13); transform:translateY(-4px); }.social-links span { font-size:13px; font-weight:700; }.social-links small { grid-column:1; margin-top:4px; color:rgba(255,255,255,.58); font-size:9px; letter-spacing:.04em; }.social-links b { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:16px; color:var(--cyan-bright); }
footer { width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:27px; padding-bottom:27px; color:rgba(7,35,57,.64); background:#f7f6f2; border-top:1px solid rgba(7,35,57,.15); font-size:10px; letter-spacing:.04em; } footer .brand-lockup { width:108px; height:60px; } footer a { text-decoration:underline; text-underline-offset:3px; }.footer-links { display:flex; align-items:center; gap:18px; }
.policy-page { min-height:100vh; background:#f7f6f2; color:var(--ink); }.policy-header { height:112px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:12px; }.policy-header .brand-lockup { width:110px; height:66px; }.policy-header>a:last-child { padding-bottom:4px; border-bottom:1px solid var(--ink); }.policy-content { width:min(100% - 40px,820px); padding:96px 0 130px; }.policy-content h1 { margin:20px 0 62px; font-size:clamp(38px,4vw,58px); letter-spacing:-.06em; }.policy-content h2 { margin:48px 0 12px; font-size:20px; letter-spacing:-.03em; }.policy-content p { margin:0; color:var(--muted); font-size:14px; line-height:2; }.policy-content a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }.policy-content .policy-updated { margin-top:58px; font-size:12px; }
@media (max-width:760px) { .wrap { width:min(100% - 40px, 1280px); }.hero { min-height:0; }.nav { height:68px; }.nav-center { display:none; }.nav-status { font-size:10px; }.hero-content { min-height:0; grid-template-columns:1fr; gap:28px; padding:78px 0 60px; }.hero h1 { font-size:clamp(47px,13vw,65px); }.desktop-break { display:none; }.hero-visual { width:min(100%,390px); min-height:280px; margin-left:auto; }.hero-bottom { padding-bottom:19px; }.introduction { padding:83px 0; }.introduction-grid,.principles-grid { grid-template-columns:1fr; gap:32px; margin-top:33px; }.introduction h2 { font-size:35px; }.feature-band-inner { height:103px; }.feature-band p { max-width:230px; line-height:1.45; }.orbital-mark { transform:scale(.7); transform-origin:right center; }.flow-section { padding:80px 0; }.flow-heading { display:block; margin-top:31px; }.flow-heading p { margin-top:24px; }.flow-cards { grid-template-columns:1fr; margin-top:39px; }.flow-card { min-height:275px; }.principles { padding:80px 0; }.principles h2 { margin-top:32px; }.closing { padding:94px 0; }.social-links { grid-template-columns:1fr; margin-top:34px; } footer { flex-direction:column; align-items:flex-start; gap:11px; } }
@media (max-width:760px) { .hero-device-stack { width:min(100%,390px); height:590px; margin-left:auto; }.hero-visual { width:270px; min-height:0; }.watch-visual { width:133px; left:0; bottom:67px; } }