:root {
  --paper: oklch(0.97 0.012 75);
  --paper-2: oklch(0.988 0.008 80);
  --ink: oklch(0.265 0.018 55);
  --ink-soft: oklch(0.48 0.014 58);
  --rule: oklch(0.88 0.014 65);
  --green: oklch(0.62 0.115 164);
  --blue: oklch(0.61 0.13 246);
  --shadow: oklch(0.28 0.02 55 / .12);
  --apple-ease: cubic-bezier(.4,0,.6,1);
  --apple-gallery: 800ms;
  --apple-copy: 600ms;
  --scroll: 0;
  --parallax: 0px;
  --font: "Avenir Next", "PingFang SC", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.progress { position:fixed; z-index:40; inset:0 auto auto 0; width:calc(var(--scroll) * 100%); height:2px; background:linear-gradient(90deg,var(--blue),var(--green)); box-shadow:0 0 18px color-mix(in oklch,var(--green) 70%,transparent); transition:width .08s linear; }
.nav { position: fixed; z-index: 20; inset: 0 0 auto; height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px,4vw,64px); border-bottom: 1px solid color-mix(in oklch,var(--rule) 50%,transparent); background: color-mix(in oklch,var(--paper) 78%,transparent); backdrop-filter: blur(22px) saturate(1.2); }
.mark,.login-mark { font-size: 18px; font-weight: 650; letter-spacing: -.055em; }
.nav-owner { font-size: 10px; letter-spacing: .18em; color: var(--ink-soft); }
.nav-access { justify-self: end; font-size: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.panel { min-height: 100svh; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.hero { display: grid; place-items: center; background: radial-gradient(1000px 600px at 50% 70%,color-mix(in oklch,var(--paper-2) 88%,transparent),transparent 68%),var(--paper); }
.hero:after { content:""; position:absolute; inset:0; opacity:.23; pointer-events:none; background-image:radial-gradient(oklch(.8 .014 65) .55px,transparent .55px); background-size:5px 5px; }
.hero-copy { position: relative; z-index: 2; text-align: center; transform:translateY(calc(var(--parallax) * -.35)); }
.eyebrow { margin: 0 0 22px; font-size: 10px; font-weight: 600; letter-spacing: .22em; color: var(--ink-soft); }
.hero h1 { margin: 0; font-size: clamp(118px,28vw,430px); line-height: .74; letter-spacing: -.095em; font-weight: 620; background:linear-gradient(105deg,var(--ink) 20%,color-mix(in oklch,var(--blue) 42%,var(--ink)) 48%,color-mix(in oklch,var(--green) 55%,var(--ink)) 70%,var(--ink) 88%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:word-in 1.35s cubic-bezier(.16,1,.3,1) both, sheen 9s 1.4s ease-in-out infinite; }
.hero-line { margin: clamp(38px,6vw,76px) 0 0; font-size: clamp(22px,3vw,40px); letter-spacing: -.035em; }
.scroll-note { position:absolute; bottom:calc(env(safe-area-inset-bottom, 0px) + 76px); left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.18em; color:var(--ink-soft); white-space:nowrap; }
.halo { position:absolute; width:min(70vw,840px); aspect-ratio:1; border-radius:50%; filter:blur(38px); opacity:.42; transform:translateY(calc(var(--parallax) * .4)); animation:breathe 7s ease-in-out infinite alternate; }
.halo i { position:absolute; inset:16%; border-radius:50%; background:radial-gradient(circle at 32% 30%,var(--green),transparent 55%); animation:drift 16s ease-in-out infinite alternate; }
.halo i:nth-child(2){ background:radial-gradient(circle at 68% 65%,var(--blue),transparent 54%); animation-delay:-7s; }
.halo i:nth-child(3){ inset:30%; background:var(--paper-2); filter:blur(50px); }
@keyframes drift { to { transform:translate(5%,-4%) scale(1.08); } }
@keyframes breathe { to { opacity:.62; scale:1.08; rotate:5deg; } }
@keyframes word-in { from { opacity:0; transform:translateY(70px) scale(.92); filter:blur(14px); } to { opacity:1; transform:none; filter:none; } }
@keyframes sheen { 0%,62%,100%{background-position:100% 0} 78%{background-position:0 0} }
.statement { display:flex; align-items:center; padding:clamp(90px,12vw,180px) clamp(24px,10vw,160px); background:var(--paper-2); }
.statement-inner { position:relative; z-index:2; }
.statement h2,.closing h2 { margin:0; max-width:1100px; font-size:clamp(52px,9.5vw,150px); line-height:.94; letter-spacing:-.065em; font-weight:580; }
.zh { margin:30px 0 0; color:var(--ink-soft); font-size:clamp(16px,2vw,24px); letter-spacing:.04em; }
.statement-dark { color:#f6f3eb; background:#101210; }
.statement-dark .eyebrow,.statement-dark .zh { color:#a9aea8; }
.orbit { position:absolute; width:min(76vw,980px); aspect-ratio:1; right:-24%; border-radius:50%; border:1px solid #3d443f; box-shadow:inset 100px -80px 180px #0d2019, inset -100px 80px 180px #17212a; opacity:.8; }
.ghost-word { position:absolute; right:-.06em; bottom:-.23em; font-size:clamp(220px,42vw,680px); line-height:1; font-weight:620; letter-spacing:-.1em; color:color-mix(in oklch,var(--ink) 4%,transparent); transform:translateX(calc(var(--scroll) * -9vw)); transition:transform .1s linear; }
.features { min-height:auto; padding:clamp(110px,13vw,190px) clamp(18px,6vw,96px); background:#f5f5f7; }
.features-head { width:min(1100px,100%); margin:0 auto clamp(55px,8vw,105px); }
.features h2 { margin:0; font-size:clamp(60px,9vw,145px); line-height:.91; letter-spacing:-.07em; font-weight:580; }
.feature-grid { width:min(1200px,100%); margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feature { min-height:520px; position:relative; overflow:hidden; display:flex; flex-direction:column; padding:clamp(28px,4vw,52px); border-radius:34px; background:#fff; color:#1d1d1f; box-shadow:0 8px 30px rgb(0 0 0/.045); transition:transform var(--apple-copy) var(--apple-ease),box-shadow var(--apple-copy) var(--apple-ease); }
.feature-wide { grid-column:1/-1; min-height:620px; }
.feature:hover { transform:scale(1.012); box-shadow:0 24px 70px rgb(0 0 0/.09); }
.feature-no { color:#6e6e73; font-size:11px; font-weight:600; letter-spacing:.15em; }
.feature h3 { position:relative; z-index:2; margin:auto 0 18px; font-size:clamp(43px,6vw,86px); line-height:.96; letter-spacing:-.058em; font-weight:600; }
.feature p { position:relative; z-index:2; margin:0; max-width:32em; color:#6e6e73; font-size:clamp(14px,1.7vw,19px); line-height:1.55; }
.feature-accent { color:#f5f5f7; background:radial-gradient(600px 420px at 78% 18%,#1f5a4d,transparent 70%),#101311; }
.feature-accent .feature-no,.feature-accent p { color:#a9b1ac; }
.lock-visual { position:absolute; width:min(58vw,520px); aspect-ratio:1; right:-5%; top:50%; translate:0 -50%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#d9f3e3 0,#93c8b7 20%,#4b7393 52%,#172126 70%); box-shadow:inset 30px -35px 90px #0c1217,0 40px 100px rgb(24 71 63/.28); transition:transform var(--apple-gallery) var(--apple-ease); }
.feature:hover .lock-visual { transform:scale(1.035) rotate(2deg); }
.lock-visual:before { content:""; position:absolute; width:30%; height:25%; left:35%; top:34%; border:clamp(8px,1.2vw,15px) solid rgb(255 255 255/.76); border-bottom:0; border-radius:999px 999px 0 0; }
.lock-visual i { position:absolute; width:36%; aspect-ratio:1; left:32%; top:48%; border-radius:30%; background:rgb(255 255 255/.82); box-shadow:0 12px 35px rgb(0 0 0/.15); }
.closing { display:flex; flex-direction:column; justify-content:center; padding:100px clamp(24px,10vw,160px) 72px; }
.closing-copy { margin:auto 0; }
.door { display:flex; justify-content:space-between; align-items:center; width:min(100%,470px); margin-top:54px; padding:18px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-size:14px; }
.door b,.login-card button b { font-size:18px; font-weight:400; transition:transform .25s; }
.door:hover b,.login-card button:hover b { transform:translate(4px,-4px); }
footer { display:flex; justify-content:space-between; gap:20px; color:var(--ink-soft); font-size:9px; letter-spacing:.16em; }
.reveal { opacity:0; transform:translateY(44px) scale(.985); filter:blur(7px); transition:opacity var(--apple-copy) ease-in-out,transform var(--apple-gallery) var(--apple-ease),filter var(--apple-copy) ease-in-out; }
.reveal.is-visible { opacity:1; transform:none; filter:none; }
.login-page { min-height:100svh; background:radial-gradient(900px 560px at 75% 15%,color-mix(in oklch,var(--green) 15%,transparent),transparent 65%),radial-gradient(800px 600px at 10% 100%,color-mix(in oklch,var(--blue) 13%,transparent),transparent 62%),var(--paper); }
.login-page:after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(oklch(.8 .014 65) .55px,transparent .55px); background-size:5px 5px; }
.login-mark { position:fixed; z-index:2; top:25px; left:clamp(24px,5vw,72px); }
.login-shell { min-height:100svh; display:grid; place-items:center; padding:90px 24px 40px; }
.login-card { position:relative; z-index:1; width:min(100%,520px); padding:clamp(30px,5vw,58px); border:1px solid color-mix(in oklch,var(--rule) 75%,transparent); border-radius:30px; background:color-mix(in oklch,var(--paper-2) 76%,transparent); box-shadow:0 35px 90px oklch(.28 .02 55/.12); backdrop-filter:blur(24px); }
.login-card h1 { margin:0; font-size:clamp(45px,8vw,72px); line-height:1; letter-spacing:-.06em; font-weight:570; }
.login-note { margin:22px 0 44px; color:var(--ink-soft); font-size:14px; }
.login-card form { display:grid; gap:20px; }
.login-card label { display:grid; gap:8px; }
.login-card label span { font-size:10px; letter-spacing:.16em; color:var(--ink-soft); }
.login-card input { width:100%; border:0; border-bottom:1px solid var(--rule); border-radius:0; padding:12px 0; background:transparent; color:var(--ink); font:500 17px var(--font); outline:none; }
.login-card input:focus { border-color:var(--ink); }
.login-card button { display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding:17px 20px; border:0; border-radius:999px; color:var(--paper-2); background:var(--ink); font:500 14px var(--font); cursor:pointer; }
.login-error { display:none; margin:0; color:#a43d31; font-size:12px; }
@media (max-width:640px) {
  .nav { grid-template-columns:1fr 1fr; }
  .nav-owner { display:none; }
  .hero h1 { font-size:36vw; }
  .statement h2,.closing h2 { font-size:15vw; }
  .statement { padding-inline:24px; }
  footer { flex-direction:column; }
  .orbit { width:120vw; right:-62%; }
  .features { padding-inline:12px; }
  .feature-grid { grid-template-columns:1fr; gap:12px; }
  .feature-wide { grid-column:auto; }
  .feature,.feature-wide { min-height:510px; border-radius:28px; }
  .feature h3 { font-size:13vw; }
  .lock-visual { width:72vw; right:-30%; top:35%; }
}
@media (prefers-color-scheme:dark) {
  :root { --paper:oklch(.17 .012 95); --paper-2:oklch(.215 .012 90); --ink:oklch(.94 .009 82); --ink-soft:oklch(.7 .012 78); --rule:oklch(.34 .012 82); --shadow:oklch(.05 .01 90/.35); --green:oklch(.7 .13 164); --blue:oklch(.7 .12 246); }
  .hero { background:radial-gradient(1000px 650px at 50% 65%,oklch(.26 .025 180),transparent 68%),var(--paper); }
  .hero:after,.login-page:after { opacity:.12; }
  .statement-dark { background:#080a09; }
  .features { background:#000; }
  .login-card { background:color-mix(in oklch,var(--paper-2) 82%,transparent); }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto;scroll-snap-type:y proximity}.halo,.halo i,.hero h1{animation:none}.reveal{opacity:1;transform:none;filter:none;transition:none} }