:root { color-scheme:light; --ink:#18342e; --muted:#687d76; --mint:#2e8b70; --line:#dce9e4; --paper:#fbfdfc; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC",sans-serif; background:radial-gradient(circle at 12% 8%,#dcf4ea 0,transparent 31%),radial-gradient(circle at 87% 84%,#e9eefc 0,transparent 32%),#f7fbf9; }
.landing-shell { width:min(1180px,100%); min-height:100vh; margin:auto; padding:clamp(20px,4vw,42px); display:flex; flex-direction:column; }
.landing-nav { display:flex; align-items:center; justify-content:space-between; }
.landing-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:22px; }
.landing-brand span { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:white; background:var(--mint); font-size:25px; font-weight:850; box-shadow:0 10px 28px rgba(46,139,112,.23); }
.nav-links { display:flex; align-items:center; gap:clamp(15px,2.5vw,30px); }
.nav-links a { color:var(--muted); text-decoration:none; font-size:12px; font-weight:700; }
.nav-links a:hover { color:var(--mint); }
.site-link { color:var(--muted); text-decoration:none; font-weight:700; }
.hero { flex:1; min-height:430px; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,76px); align-items:center; padding:clamp(36px,6.5vh,70px) 0; }
.eyebrow { margin:0; color:var(--mint); font-size:11px; font-weight:850; letter-spacing:2px; }
h1 { max-width:700px; margin:12px 0 22px; font-size:clamp(44px,6.8vw,82px); line-height:1.03; letter-spacing:-3px; }
h1 em { color:var(--mint); font-style:normal; }
.hero-lead { max-width:590px; margin:0 0 30px; color:var(--muted); font-size:clamp(16px,2vw,19px); }
.primary-action { width:max-content; min-height:56px; display:inline-flex; align-items:center; gap:34px; padding:0 21px; border-radius:16px; color:white; background:var(--mint); box-shadow:0 16px 34px rgba(46,139,112,.2); font-size:16px; font-weight:800; text-decoration:none; }
.hero-copy>small { display:block; margin-top:11px; color:var(--muted); }
.feature-line { display:flex; flex-wrap:wrap; gap:8px 15px; margin-top:23px; color:#54736a; font-size:11px; font-weight:720; }
.feature-line span::before { content:"✓"; margin-right:5px; color:var(--mint); font-weight:900; }
.conversation-card { min-height:370px; display:flex; flex-direction:column; padding:clamp(23px,3.5vw,36px); border:1px solid rgba(255,255,255,.95); border-radius:34px; background:rgba(255,255,255,.82); box-shadow:0 30px 90px rgba(40,77,67,.13); backdrop-filter:blur(20px); transform:rotate(.7deg); }
.scene-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.scene-head small,.scene-head strong { display:block; }
.scene-head small { color:var(--mint); font-size:9px; font-weight:850; letter-spacing:1.5px; }
.scene-head strong { margin-top:3px; font:600 clamp(19px,2.4vw,27px)/1.25 Georgia,serif; }
.scene-context { margin:18px 0 15px; color:var(--muted); font-size:12px; line-height:1.65; }
.dialogue-preview { display:grid; gap:9px; }
.dialogue-preview p { max-width:88%; margin:0; padding:10px 13px; border-radius:15px; font-size:12px; line-height:1.5; }
.dialogue-preview b { display:block; margin-bottom:2px; font-size:9px; letter-spacing:.5px; }
.native-bubble { justify-self:start; color:#25483f; background:#edf6f2; border-bottom-left-radius:5px!important; }
.native-bubble b { color:var(--mint); }
.you-bubble { justify-self:end; color:white; background:var(--mint); border-bottom-right-radius:5px!important; }
.you-bubble b { color:#d9f2e9; }
.conversation-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:17px; color:var(--muted); font-size:9px; }
.conversation-card footer span:first-child { color:#326b5a; font-weight:800; }
.live-pill { flex:0 0 auto; width:max-content; padding:7px 10px; border-radius:999px; color:#326b5a; background:#e5f5ee; font-size:9px; font-weight:850; }
.live-pill i { width:7px; height:7px; display:inline-block; margin-right:6px; border-radius:50%; background:#45a781; box-shadow:0 0 0 4px rgba(69,167,129,.13); }
.journey { display:grid; grid-template-columns:1.35fr repeat(3,1fr); gap:10px; align-items:stretch; }
.journey-title,.journey article { padding:16px 15px; border-top:1px solid var(--line); }
.journey h2 { max-width:300px; margin:5px 0 0; font-size:18px; line-height:1.35; }
.journey article { display:flex; gap:11px; }
.journey article b { color:#9db1aa; font-size:9px; }
.journey article strong { display:block; margin:-2px 0 3px; font-size:13px; }
.journey article p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.section-block { padding:clamp(76px,10vw,132px) 0; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:clamp(30px,7vw,90px); align-items:end; margin-bottom:35px; }
.section-heading h2,.adaptive-section h2,.final-cta h2 { max-width:720px; margin:8px 0 0; font-size:clamp(31px,4.8vw,58px); line-height:1.08; letter-spacing:-2px; }
.section-heading>p { max-width:520px; margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.section-heading.compact { margin-bottom:26px; }
.scene-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.scene-tile { position:relative; min-height:360px; overflow:hidden; display:flex; flex-direction:column; padding:clamp(24px,3vw,38px); border:1px solid rgba(255,255,255,.68); border-radius:30px; color:#17342d; box-shadow:0 18px 55px rgba(40,77,67,.08); }
.scene-tile::after { content:""; position:absolute; right:-55px; bottom:-65px; width:210px; height:210px; border:1px solid rgba(255,255,255,.52); border-radius:50%; box-shadow:0 0 0 30px rgba(255,255,255,.12),0 0 0 60px rgba(255,255,255,.08); }
.scene-tile>span { margin-top:36px; font-size:9px; font-weight:850; letter-spacing:1.6px; opacity:.62; }
.scene-tile h3 { position:relative; z-index:1; max-width:390px; margin:8px 0 12px; font:600 clamp(24px,3.2vw,38px)/1.16 Georgia,serif; }
.scene-tile>p { position:relative; z-index:1; max-width:390px; margin:0; color:rgba(23,52,45,.7); font-size:13px; line-height:1.75; }
.scene-tile footer { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:15px; margin-top:auto; padding-top:35px; border-top:1px solid rgba(23,52,45,.1); }
.scene-tile footer b { font-size:12px; }
.scene-tile footer small { color:rgba(23,52,45,.6); text-align:right; }
.scene-number { position:absolute; top:24px; right:27px; font:italic 500 18px Georgia,serif; opacity:.35; }
.scene-night { background:linear-gradient(145deg,#dce9f3,#d8e3f5 52%,#ecf2f6); }
.scene-market { background:linear-gradient(145deg,#f8edd5,#e5f1d7 54%,#f7f3df); }
.scene-museum { background:linear-gradient(145deg,#e6e0f4,#e8eafa 55%,#f2edf8); }
.scene-road { background:linear-gradient(145deg,#d7eee7,#e0f2ea 52%,#edf7ee); }
.bento-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:14px; }
.bento-card { min-height:300px; overflow:hidden; padding:clamp(25px,3vw,38px); border:1px solid var(--line); border-radius:30px; background:rgba(255,255,255,.75); box-shadow:0 18px 55px rgba(40,77,67,.06); }
.bento-card h3 { max-width:510px; margin:8px 0 10px; font-size:clamp(24px,3vw,37px); line-height:1.15; letter-spacing:-1.3px; }
.bento-card p { max-width:540px; margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.card-kicker { color:var(--mint); font-size:9px; font-weight:850; letter-spacing:1.5px; }
.rhythm-card { min-height:410px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#173b33,#245b4c); color:white; }
.rhythm-card p { color:#bdd8cf; }
.rhythm-visual { height:115px; display:flex; align-items:center; gap:16px; margin-top:35px; }
.rhythm-visual .wave { height:52px; border-radius:50%; }
.user-wave { width:45%; background:repeating-linear-gradient(90deg,#77d8b6 0 3px,transparent 3px 8px); mask:linear-gradient(0deg,transparent 5%,#000 48%,transparent 95%); }
.ai-wave { flex:1; background:repeating-linear-gradient(90deg,#c8ece0 0 2px,transparent 2px 7px); mask:linear-gradient(0deg,transparent 20%,#000 50%,transparent 80%); }
.rhythm-visual i { flex:0 0 auto; padding:6px 9px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#bcd9d0; font-size:9px; font-style:normal; }
.help-card { background:linear-gradient(145deg,#fafcfb,#edf7f3); }
.help-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.help-chips span { padding:10px 12px; border:1px solid #cfe4dc; border-radius:12px; color:#356c5c; background:white; font-size:11px; font-weight:750; box-shadow:0 8px 22px rgba(40,77,67,.06); }
.review-card { background:linear-gradient(145deg,#f7f4fb,#f1f5fb); }
.review-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:28px; }
.review-stats span { padding:13px 9px; border:1px solid rgba(120,105,160,.13); border-radius:14px; color:#62597a; background:rgba(255,255,255,.68); font-size:10px; text-align:center; }
.review-stats b { display:block; margin-bottom:5px; color:#756a96; font-size:18px; }
.memory-card { background:linear-gradient(145deg,#fbf6e9,#f4eee1); }
.memory-thread { display:flex; align-items:center; gap:7px; margin-top:40px; color:#7c6a49; font-size:9px; font-weight:800; }
.memory-thread i { flex:1; height:1px; background:#d8c9aa; }
.adaptive-section { display:grid; grid-template-columns:1fr .85fr; gap:clamp(45px,9vw,110px); align-items:center; }
.adaptive-copy>p:not(.eyebrow) { max-width:620px; margin:22px 0; color:var(--muted); font-size:14px; line-height:1.85; }
.adaptive-copy ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; color:#48685f; font-size:12px; }
.adaptive-copy li::before { content:""; width:7px; height:7px; display:inline-block; margin-right:9px; border-radius:50%; background:var(--mint); }
.age-world { display:grid; justify-items:center; }
.age-orbit { position:relative; width:min(390px,78vw); aspect-ratio:1; border:1px solid #cfdfd9; border-radius:50%; box-shadow:inset 0 0 0 42px rgba(232,244,239,.35),0 30px 90px rgba(40,77,67,.1); }
.age-orbit::before { content:""; position:absolute; inset:17%; border:1px dashed #bdd5cc; border-radius:50%; }
.age-orbit strong { position:absolute; inset:31%; display:grid; place-content:center; border-radius:50%; color:white; background:var(--mint); box-shadow:0 18px 45px rgba(46,139,112,.26); font-size:28px; text-align:center; }
.age-orbit strong small { display:block; margin-top:4px; color:#d6eee6; font-size:8px; font-weight:650; line-height:1.35; letter-spacing:.5px; }
.age-orbit>span { position:absolute; z-index:1; min-width:50px; padding:7px 9px; border:1px solid white; border-radius:999px; color:#42675c; background:#f8fcfa; box-shadow:0 8px 24px rgba(40,77,67,.1); font-size:10px; font-weight:800; text-align:center; }
.age-orbit>span:nth-child(1) { top:6%; left:45%; }
.age-orbit>span:nth-child(2) { top:45%; right:-5%; }
.age-orbit>span:nth-child(3) { bottom:6%; left:42%; }
.age-orbit>span:nth-child(4) { top:44%; left:-4%; }
.age-world>p { color:var(--muted); font-size:11px; }
.experience-track { display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; border-top:1px solid var(--line); list-style:none; }
.experience-track li { position:relative; min-height:220px; display:flex; gap:15px; padding:28px 25px; border-right:1px solid var(--line); }
.experience-track li:last-child { border-right:0; }
.experience-track b { flex:0 0 auto; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:var(--mint); background:#e2f3ec; font-size:10px; }
.experience-track strong { display:block; margin:3px 0 11px; font-size:15px; }
.experience-track p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
.final-cta { min-height:450px; display:flex; align-items:center; justify-content:space-between; gap:50px; margin:30px 0 0; padding:clamp(40px,7vw,82px); border-radius:38px; color:white; background:radial-gradient(circle at 82% 25%,rgba(139,213,188,.24),transparent 28%),linear-gradient(145deg,#163a31,#245c4d); box-shadow:0 35px 100px rgba(34,75,63,.2); }
.final-cta .eyebrow { color:#8bd3ba; }
.final-cta h2 { margin-top:12px; }
.final-cta p:not(.eyebrow) { color:#bcd9d0; }
.primary-action.inverse { flex:0 0 auto; color:#214b40; background:#f4fbf8; box-shadow:none; }
.landing-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:35px 4px 15px; color:var(--muted); font-size:10px; }
.footer-brand { font-size:16px; }
.footer-brand span { width:32px; height:32px; border-radius:10px; font-size:18px; }
.landing-footer p { margin:0; }
.landing-footer>div { display:flex; gap:18px; }
.landing-footer>div a { color:var(--muted); text-decoration:none; font-weight:750; }
@media(max-width:900px){.nav-links>a:not(.site-link){display:none}.hero{grid-template-columns:1fr;padding:45px 0}.conversation-card{min-height:340px;transform:none}.journey{grid-template-columns:1fr 1fr}.journey-title{grid-column:1/-1}h1{letter-spacing:-2px}.section-heading,.adaptive-section{grid-template-columns:1fr}.scene-grid,.bento-grid{grid-template-columns:1fr}.experience-track{grid-template-columns:1fr 1fr}.experience-track li:nth-child(2){border-right:0}.experience-track li{border-bottom:1px solid var(--line)}.final-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.landing-shell{padding:18px}.hero{gap:30px}.journey{grid-template-columns:1fr}.journey-title{grid-column:auto}.primary-action{width:100%;justify-content:space-between}.feature-line{display:grid}.conversation-card footer{align-items:flex-start;flex-direction:column}.section-block{padding:70px 0}.section-heading h2,.adaptive-section h2,.final-cta h2{letter-spacing:-1.2px}.scene-tile{min-height:330px}.review-stats{grid-template-columns:1fr}.memory-thread{align-items:flex-start;flex-direction:column}.memory-thread i{width:1px;height:13px;flex:none;margin-left:18px}.experience-track{grid-template-columns:1fr}.experience-track li{min-height:150px;border-right:0}.final-cta{min-height:420px;margin-inline:-4px;padding:33px 25px;border-radius:28px}.landing-footer{align-items:flex-start;flex-direction:column}.landing-footer>p{display:none}}
@media(pointer:coarse){.primary-action,.site-link{min-height:52px;display:flex;align-items:center}}