/* Parentime — glass dark theme, mobile-first. Palette mirrors the Android app. */
:root {
  --bg-0:#080D12; --bg-1:#102532; --bg-2:#132B29; --bg-3:#0B1118;
  --primary:#82D7B2; --primary-deep:#2E7D5B; --primary-ink:#0B2018;
  --secondary:#9FC7FF; --tertiary:#FFC27A; --purple:#9B82C9; --danger:#E1675F;
  --ink:#F2F5F7; --ink-dim:#C2CDD4; --ink-faint:#8FA0AB;
  --glass:rgba(71,88,101,.34); --glass-2:rgba(79,98,112,.26);
  --glass-border:rgba(255,255,255,.14); --glass-strong:rgba(255,255,255,.22);
  --radius:22px; --radius-sm:14px; --shadow:0 18px 48px rgba(0,0,0,.45);
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(130,215,178,.10), transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, rgba(159,199,255,.08), transparent 55%),
    linear-gradient(160deg,var(--bg-0),var(--bg-1) 35%,var(--bg-2) 65%,var(--bg-3));
  background-attachment:fixed; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px}
.glass{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:var(--shadow);
}
/* Header / nav */
header.site{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(8,13,18,.82),rgba(8,13,18,.45)); border-bottom:1px solid var(--glass-border)}
.nav{display:flex; align-items:center; gap:14px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--ink)}
.brand .dot{width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--secondary)); box-shadow:0 4px 14px rgba(130,215,178,.4)}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--primary);letter-spacing:.4px}
.nav .spacer{flex:1}
.nav-links{display:flex; gap:6px; align-items:center}
.nav-links a{color:var(--ink-dim); padding:9px 13px; border-radius:11px; font-weight:600; font-size:14.5px}
.nav-links a:hover{color:var(--ink); background:var(--glass-2); text-decoration:none}
.nav-toggle{display:none; background:var(--glass); border:1px solid var(--glass-border); color:var(--ink);
  width:44px;height:44px;border-radius:12px;font-size:20px;cursor:pointer}
/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  padding:14px 22px; border-radius:16px; font-weight:700; font-size:15px; border:1px solid var(--glass-border);
  background:var(--glass); color:var(--ink); transition:transform .12s ease, box-shadow .2s ease, background .2s}
.btn:hover{text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-deep)); color:var(--primary-ink); border-color:transparent}
.btn-primary:hover{box-shadow:0 12px 30px rgba(130,215,178,.4)}
.btn-block{display:flex; width:100%}
.btn-lg{padding:16px 28px; font-size:16px}
/* Layout helpers */
.section{padding:70px 0}
.section h2{font-size:clamp(24px,4vw,34px); margin:0 0 10px}
.eyebrow{color:var(--primary); font-weight:700; letter-spacing:1.4px; text-transform:uppercase; font-size:12.5px; margin:0 0 10px}
.lead{color:var(--ink-dim); font-size:18px; max-width:62ch}
.grid{display:grid; gap:18px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
/* Hero */
.hero{padding:72px 0 40px; text-align:center}
.hero h1{font-size:clamp(34px,6.4vw,60px); line-height:1.05; margin:14px 0 6px; letter-spacing:-.5px}
.hero .tag{display:inline-block; color:var(--primary); font-weight:800; letter-spacing:.6px; font-size:18px}
.hero .lead{margin:18px auto 0}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.badge{display:inline-flex; gap:8px; align-items:center; padding:7px 14px; border-radius:999px;
  background:var(--glass-2); border:1px solid var(--glass-border); color:var(--ink-dim); font-size:13px; font-weight:600}
/* Cards */
.card{padding:24px}
.card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;
  background:var(--glass-2); border:1px solid var(--glass-border)}
.card h3{margin:0 0 7px; font-size:18px}
.card p{margin:0; color:var(--ink-dim); font-size:14.5px}
.tone-green .ic{box-shadow:inset 0 0 0 1px rgba(130,215,178,.5)}
/* Forms */
.field{margin-bottom:16px; text-align:left}
.field label{display:block; font-weight:600; font-size:14px; margin-bottom:7px; color:var(--ink-dim)}
.field input{width:100%; padding:14px 15px; border-radius:13px; font-size:15px; color:var(--ink);
  background:rgba(8,13,18,.5); border:1px solid var(--glass-border)}
.field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(130,215,178,.18)}
.note{font-size:13px; color:var(--ink-faint)}
.divider{height:1px;background:var(--glass-border);margin:22px 0}
/* Footer */
footer.site{margin-top:40px; padding:48px 0 60px; border-top:1px solid var(--glass-border);
  background:linear-gradient(180deg,transparent,rgba(8,13,18,.6))}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer .col h4{font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--ink-faint); margin:0 0 12px}
footer .col a{display:block; color:var(--ink-dim); padding:5px 0; font-size:14.5px}
.foot-bottom{margin-top:34px; color:var(--ink-faint); font-size:13px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
/* Notice banner */
.banner{padding:13px 16px; border-radius:14px; background:rgba(255,194,122,.12); border:1px solid rgba(255,194,122,.35);
  color:var(--tertiary); font-size:14px; font-weight:600}
/* Responsive */
@media(max-width:820px){
  .nav-links{position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:4px; padding:14px 20px 22px;
    background:rgba(8,13,18,.96); border-bottom:1px solid var(--glass-border); display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 12px; font-size:16px}
  .nav-toggle{display:block}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .section{padding:52px 0}
}
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr} }