:root {
  --ink: #17191d;
  --muted: #666b73;
  --line: rgba(20, 24, 31, .09);
  --glass: rgba(255, 255, 255, .62);
  --accent: #6e6bd9;
  --accent-soft: #a9c8ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(192, 218, 245, .38), transparent 28rem),
    radial-gradient(circle at 88% 32%, rgba(219, 202, 241, .34), transparent 30rem),
    #f4f4f1;
}
a { color: inherit; text-decoration: none; }
.glass {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, .74);
  box-shadow: 0 18px 50px rgba(41, 47, 59, .09), inset 0 1px 0 rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
}
.site-header {
  position: fixed;
  z-index: 10;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1120px, calc(100% - 32px));
  padding: 10px 12px 10px 16px;
  border-radius: 22px;
  transform: translateX(-50%);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 680; letter-spacing: -.02em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:white; border-radius:10px; background:linear-gradient(145deg,#807ce8,#84afd5); box-shadow:0 6px 16px rgba(90,92,185,.24); }
nav { display: flex; align-items: center; gap: 8px; }
nav a { padding: 9px 12px; color: var(--muted); font-size: .9rem; }
nav .nav-cta { color: white; background: #202329; border-radius: 13px; }
.hero { display:grid; grid-template-columns: 1.02fr .98fr; align-items:center; gap:64px; min-height:100vh; max-width:1180px; margin:auto; padding:130px 30px 70px; overflow:hidden; }
.eyebrow { margin:0 0 20px; color:#6966c9; font-size:.76rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.hero-brandline { display:flex; align-items:center; gap:9px; font-size:.82rem; letter-spacing:.11em; }
.hero-brandline .brand-mark { width:32px; height:32px; color:white; letter-spacing:0; }
h1 { max-width:700px; margin:0; font-size:clamp(3.4rem, 6.2vw, 6.3rem); line-height:.94; letter-spacing:-.065em; }
h1 span { color:transparent; background:linear-gradient(115deg,#7d79d5 5%,#77a9ce 56%,#7d9892); -webkit-background-clip:text; background-clip:text; }
.lede { max-width:620px; margin:28px 0 32px; color:var(--muted); font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.55; letter-spacing:-.015em; }
.app-store-button { display:inline-flex; align-items:center; gap:10px; padding:10px 18px; color:white; border-radius:16px; background:#1d1f23; box-shadow:0 12px 24px rgba(20,24,30,.18); }
.app-store-button .apple { font-size:1.25rem; }
.app-store-button span:last-child { display:flex; flex-direction:column; }
.app-store-button small { font-size:.64rem; line-height:1.1; }
.app-store-button strong { font-size:1.15rem; line-height:1.1; letter-spacing:-.02em; }
.hero-visual { position:relative; display:grid; place-items:center; min-height:650px; }
.phone { position:relative; z-index:2; width:320px; height:650px; padding:9px; border-radius:55px; background:#15171b; box-shadow:0 55px 90px rgba(33,39,53,.25), inset 0 0 0 1px rgba(255,255,255,.22); transform:rotate(2deg); }
.phone-screen { position:relative; height:100%; overflow:hidden; border-radius:46px; background:#eef4fa; }
.app-screenshot { display:block; width:100%; height:100%; object-fit:contain; background:#edf4fa; }
.dynamic-island { position:absolute; z-index:3; top:20px; left:50%; width:94px; height:27px; border-radius:20px; background:#070708; transform:translateX(-50%); }
.preview-top { display:flex; justify-content:space-between; align-items:center; color:#737782; font-size:.74rem; font-weight:650; }
.avatar { width:27px; height:27px; border-radius:50%; background:linear-gradient(145deg,#b8cbe2,#b5a9d7); }
.preview-greeting { margin:34px 0 5px; color:#777b83; font-size:.9rem; }
.phone-screen h2 { margin:0 0 24px; font-size:1.78rem; letter-spacing:-.045em; }
.preview-card { height:106px; border:1px solid rgba(255,255,255,.8); border-radius:22px; background:rgba(255,255,255,.58); box-shadow:0 14px 30px rgba(52,61,75,.08); }
.preview-card.tall { height:154px; }
.preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.shimmer { position:relative; overflow:hidden; }
.shimmer::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.8) 45%,transparent 65%); transform:translateX(-100%); animation:shimmer 3s infinite; }
.placeholder-label { margin-top:22px; color:#9397a0; font-size:.72rem; text-align:center; }
.orb { position:absolute; border-radius:50%; filter:blur(2px); }
.orb-one { width:420px; height:420px; background:rgba(159,192,231,.45); }
.orb-two { right:-30px; bottom:70px; width:250px; height:250px; background:rgba(195,169,225,.38); }
.floating-chip { position:absolute; z-index:3; padding:13px 18px; border-radius:18px; color:#51555e; font-size:.82rem; font-weight:650; }
.chip-left { left:0; top:36%; }
.chip-right { right:0; bottom:29%; }
.section { max-width:1180px; margin:0 auto; padding:120px 30px; }
.section-heading { max-width:720px; margin-bottom:52px; }
.section-heading.centered { margin:0 auto 52px; text-align:center; }
.section-heading h2, .pantry-copy h2, .privacy-card h2, .final-cta h2, .legal-shell h1 { margin:0; font-size:clamp(2.7rem,5vw,5rem); line-height:1; letter-spacing:-.055em; }
.section-heading h2 span, .final-cta h2 span { color:#7773d2; }
.section-heading > p:last-child, .pantry-copy > p, .privacy-card p, .final-cta > p, .legal-intro { color:var(--muted); font-size:1.1rem; line-height:1.65; }
.glass-panel { border:1px solid rgba(255,255,255,.74); border-radius:40px; background:rgba(255,255,255,.5); box-shadow:0 30px 80px rgba(47,55,69,.09), inset 0 1px 0 white; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.assistant-stage { display:grid; grid-template-columns:.82fr 1.18fr; gap:64px; align-items:center; padding:54px 70px; background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(234,237,245,.55)); }
.chat-preview { width:310px; height:672px; padding:8px; overflow:hidden; border:1px solid rgba(255,255,255,.9); border-radius:52px; background:#17191d; box-shadow:0 30px 70px rgba(52,59,76,.2); transform:rotate(-2deg); }
.chat-preview .app-screenshot { border-radius:45px; }
.mini-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:32px; font-size:.9rem; }
.mini-toolbar .brand-mark { width:27px; height:27px; font-size:.75rem; }
.status-dot { width:7px; height:7px; margin-left:auto; border-radius:50%; background:#71b78a; }
.message { max-width:88%; margin:12px 0; padding:15px 17px; border-radius:20px; font-size:.92rem; line-height:1.45; }
.user-message { margin-left:auto; border-bottom-right-radius:6px; background:#24262c; color:white; }
.ai-message { display:flex; gap:12px; border:1px solid var(--line); border-bottom-left-radius:6px; background:white; }
.ai-message p { margin:5px 0 0; color:var(--muted); }
.spark { color:#7773d2; }
.chat-input { display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding:14px 14px 14px 18px; color:#92969d; border:1px solid var(--line); border-radius:18px; background:white; font-size:.85rem; }
.chat-input b { display:grid; place-items:center; width:28px; height:28px; color:white; border-radius:50%; background:#7773d2; }
.placeholder-note { margin:14px 0 0; color:#a0a3a9; font-size:.69rem; text-align:center; }
.prompt-cloud { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.prompt { padding:15px 18px; border-radius:18px; color:#555a62; font-size:.88rem; }
.prompt:nth-child(2), .prompt:nth-child(4) { align-self:flex-end; }
.life-intro { display:grid; grid-template-columns:1fr 390px; gap:80px; align-items:center; margin-bottom:64px; }
.life-intro .section-heading { margin:0; }
.life-phone-shell { width:300px; height:651px; justify-self:center; overflow:hidden; border:8px solid #17191d; border-radius:48px; background:#edf4fa; box-shadow:0 36px 75px rgba(45,52,65,.2); transform:rotate(2deg); }
.area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.area-card { position:relative; min-height:225px; padding:28px; overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:30px; background:rgba(255,255,255,.55); box-shadow:0 18px 45px rgba(43,50,63,.07); }
.area-card::after { content:""; position:absolute; right:-35px; bottom:-55px; width:150px; height:150px; border-radius:50%; background:var(--card-color); opacity:.22; filter:blur(3px); }
.area-card h3 { margin:32px 0 7px; font-size:1.35rem; letter-spacing:-.025em; }
.area-card p { max-width:220px; margin:0; color:var(--muted); line-height:1.5; }
.area-icon { display:grid; place-items:center; width:42px; height:42px; color:#40434a; border:1px solid rgba(255,255,255,.9); border-radius:14px; background:color-mix(in srgb,var(--card-color) 24%,white); font-size:.88rem; font-weight:750; }
.calendar{--card-color:#e58f8c}.money{--card-color:#7fbd99}.pantry{--card-color:#e5af69}.health{--card-color:#dd8da5}.travel{--card-color:#7eb6db}.vehicles{--card-color:#9c9ea7}.home{--card-color:#9a86cf}.pets{--card-color:#cf947e}.education{--card-color:#75a9a6}
.pantry-showcase { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:70px; }
.pantry-copy h2 { max-width:520px; }
.feature-list { display:flex; flex-direction:column; gap:13px; margin:30px 0 0; padding:0; list-style:none; color:#4f545c; }
.feature-list span { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:8px; color:white; border-radius:50%; background:#82a994; font-size:.7rem; }
.pantry-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:580px; overflow:hidden; background:radial-gradient(circle at 70% 30%,rgba(224,194,142,.42),transparent 45%),rgba(255,255,255,.48); }
.receipt-placeholder { position:absolute; left:10%; top:16%; width:190px; padding:25px 22px; border-radius:8px; background:#fffdf7; box-shadow:0 30px 60px rgba(66,56,38,.17); transform:rotate(-8deg); }
.receipt-mark { display:grid; place-items:center; width:30px; height:30px; margin-bottom:12px; color:white; border-radius:9px; background:#d69f57; }
.receipt-placeholder i { display:block; height:7px; margin-top:12px; border-radius:5px; background:#e8e5dd; }
.receipt-placeholder i.short { width:62%; }
.receipt-total { display:flex; justify-content:space-between; margin-top:26px; padding-top:13px; border-top:1px dashed #cbc7bd; font-size:.8rem; }
.pantry-phone { position:relative; z-index:2; width:250px; height:542px; margin-left:150px; overflow:hidden; border:8px solid #181a1e; border-radius:46px; background:#edf4fa; box-shadow:0 40px 70px rgba(47,43,36,.21); transform:rotate(3deg); }
.pantry-phone .app-screenshot { border-radius:37px; }
.mini-phone-top { display:flex; justify-content:space-between; font-weight:700; }
.pantry-summary { display:flex; flex-direction:column; margin-top:40px; padding:22px; border-radius:24px; background:linear-gradient(145deg,#e3c18b,#d9aa6e); color:white; }
.pantry-summary strong { margin:4px 0 25px; font-size:1.4rem; }
.pantry-summary span { font-size:.68rem; opacity:.8; }
.pantry-rows { display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.pantry-rows i { height:54px; border:1px solid rgba(255,255,255,.8); border-radius:18px; background:rgba(255,255,255,.65); }
.scan-pill { position:absolute; z-index:3; right:7%; bottom:17%; padding:13px 16px; border-radius:16px; color:#575b62; font-size:.8rem; font-weight:650; }
.scan-pill span { color:#539069; }
.privacy-section { padding-top:70px; }
.privacy-card { display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:center; padding:50px; }
.privacy-symbol { display:grid; place-items:center; width:72px; height:72px; color:#7370ca; border-radius:24px; background:linear-gradient(145deg,#e4e3f5,#dbe8ef); font-size:2.2rem; }
.privacy-card h2 { font-size:clamp(2.4rem,4vw,4rem); }
.privacy-card p { max-width:650px; margin-bottom:0; }
.text-link { white-space:nowrap; font-weight:650; }
.text-link span { color:#7773d2; }
.final-cta { position:relative; max-width:1100px; margin:80px auto 40px; padding:140px 30px; overflow:hidden; text-align:center; }
.final-cta .cta-glow { position:absolute; z-index:-1; top:50%; left:50%; width:620px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(175,179,234,.46),rgba(181,211,230,.24) 46%,transparent 70%); transform:translate(-50%,-50%); }
.final-cta > p { max-width:600px; margin:24px auto 30px; }
.final-cta .cta-tagline { margin:18px auto 0; color:#7773d2; font-size:clamp(1.35rem,2.4vw,2rem); font-weight:680; letter-spacing:-.035em; line-height:1.2; }
footer { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto; padding:35px 30px 55px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.footer-links { display:flex; gap:24px; }
.legal-page { background:#f4f4f1; }
.legal-header { position:static; margin:18px auto 0; transform:none; }
.legal-shell { max-width:820px; margin:0 auto; padding:110px 30px 130px; }
.legal-shell h1 { margin-bottom:20px; }
.legal-shell .eyebrow { margin-top:50px; }
.legal-shell h2 { margin:44px 0 12px; font-size:1.35rem; letter-spacing:-.025em; }
.legal-shell p, .legal-shell li { color:#5f646c; line-height:1.7; }
.legal-shell a { color:#6662c2; text-decoration:underline; text-underline-offset:3px; }
.legal-callout { margin:32px 0; padding:22px 24px; border-radius:22px; background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.8); }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:38px; }
.support-card { padding:26px; border-radius:26px; background:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.82); }
.support-card h2 { margin:0 0 8px; }
@keyframes shimmer { to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.shimmer::after{animation:none} }
@media (max-width: 800px) {
  nav a:not(.nav-cta) { display:none; }
  .hero { grid-template-columns:1fr; gap:50px; padding:130px 20px 80px; text-align:center; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero-visual { min-height:570px; }
  .phone { width:280px; height:570px; border-radius:48px; }
  .phone-screen { border-radius:40px; }
  .chip-left { left:2%; }
  .chip-right { right:2%; }
  .section { padding:90px 20px; }
  .assistant-stage, .pantry-showcase { grid-template-columns:1fr; padding:26px; }
  .chat-preview { justify-self:center; }
  .prompt-cloud { padding:10px 0; }
  .life-intro { grid-template-columns:1fr; gap:45px; }
  .area-grid { grid-template-columns:1fr 1fr; }
  .pantry-showcase { gap:45px; }
  .pantry-visual { min-height:590px; }
  .pantry-phone { margin-left:100px; transform:rotate(2deg) scale(.9); }
  .receipt-placeholder { left:3%; }
  .privacy-card { grid-template-columns:1fr; padding:35px; }
  footer { flex-direction:column; gap:24px; text-align:center; }
  .support-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) { h1{font-size:3.1rem}.site-header{top:10px}.hero{padding-top:115px}.floating-chip{display:none}.area-grid{grid-template-columns:1fr}.assistant-stage{padding:16px}.pantry-visual{min-height:530px}.receipt-placeholder{width:150px;left:-2%}.pantry-phone{margin-left:62px;transform:scale(.82) rotate(2deg)}.footer-links{gap:16px}.legal-shell{padding-top:80px} }
