/* Shared styles for every page of habitsync.fyi. Same look as the app: dark, rounded, system font. */
*{box-sizing:border-box}
:root{
  --bg:#121212; --card:#1e1e1e; --card2:#252525; --fg:#f2f2f2; --muted:#9a9a9a; --fill:#2c2c2c; --line:rgba(255,255,255,.08);
  --warm:#d1a87c; --orange:#ff9f0a; --cyan:#64d2ff; --green:#30d158;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root{
  --bg:#f2f2f4; --card:#ffffff; --card2:#ffffff; --fg:#111; --muted:#6e6e73; --fill:#e9e9ed; --line:rgba(0,0,0,.08); --warm:#9a6b3c; color-scheme:light}}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* Header */
.nav{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;text-decoration:none;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:8px}
.nav nav{display:flex;gap:18px;margin-left:auto;font-size:15px}
.nav nav a{text-decoration:none;color:var(--muted)}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--fg)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:16px;font-weight:600;font-size:17px;text-decoration:none;background:var(--card2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.btn.primary{background:var(--fg);color:var(--bg);box-shadow:none}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn.small{height:38px;padding:0 16px;font-size:15px;border-radius:12px}

/* Sections */
.hero{padding:80px 0 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
h1{font-size:clamp(40px,6vw,64px);line-height:1.04;letter-spacing:-.025em;margin:0 0 18px}
h2{font-size:clamp(28px,3.6vw,38px);line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.lead{font-size:20px;color:var(--muted);max-width:34ch;margin:0 0 28px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.section{padding:56px 0}
.section>.wrap>p{color:var(--muted);max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border-radius:22px;padding:22px;box-shadow:inset 0 0 0 1px var(--line)}
.card p{margin:0;color:var(--muted);font-size:16px}
.card .ic{width:40px;height:40px;border-radius:12px;background:var(--fill);display:grid;place-items:center;margin-bottom:14px}
.card .ic svg{width:22px;height:22px}
.levels{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.levels span{padding:8px 14px;border-radius:14px;background:var(--card);font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1px var(--line)}
.levels span i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}
.steps{counter-reset:s;display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none;max-width:560px}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:18px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--line)}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-weight:700;font-size:14px}
.prose{max-width:680px}
.prose p,.prose li{color:var(--muted)}

/* Phone mockup in the hero */
.phone{justify-self:center;width:min(300px,80vw);aspect-ratio:9/18.5;border-radius:44px;background:#0b0b0b;padding:12px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 2px #2a2a2a}
.screen{height:100%;border-radius:34px;background:#121212;padding:28px 16px 16px;color:#f2f2f2;overflow:hidden;font-size:12px}
.screen .d{color:#8e8e8e;font-weight:600;letter-spacing:.04em;font-size:10px}
.screen .t{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:2px 0 14px}
.mini{background:linear-gradient(180deg,#252525,#1e1e1e);border-radius:16px;padding:12px;margin-bottom:8px}
.mini b{font-size:13px}.mini small{display:block;color:#8e8e8e;margin-top:2px}
.bars{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.bars i{height:5px;border-radius:3px;background:#2c2c2c}
.bars i.on{background:var(--c)}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 40px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:16px;margin-left:auto}
footer a{text-decoration:none}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:48px;text-align:left}
  .grid{grid-template-columns:1fr}
  .nav nav a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}