/* ============================================================
   MY KIDIZMS — Landing page · warm scrapbook system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Figtree:wght@400;500;600;700;800&family=Baloo+2:wght@500;600;700;800&display=swap');

:root{
  --purple:#92278F; --purple-deep:#7A1F77;
  --orange:#F7931E; --orange-light:#FBB040; --orange-deep:#E07E0A;
  --date-teal:#5BC8DE;
  --a-orange:#F7941E; --a-lime:#8DC63F; --a-magenta:#A3439A;
  --a-blue:#2E8FBF; --a-pink:#E0529C; --a-teal:#3FB7C4;
  --ink:#2A2230; --ink-2:#6c6472; --hairline:rgba(42,34,48,.10);
  --paper:#F4EADB; --paper-2:#FBF6EE; --cream:#FCEBD6;
  --tape:rgba(247,201,120,.55);
  --font-ui:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-display:"Baloo 2","Figtree",sans-serif;
  --font-hand:"Comic Neue","Chalkboard SE","Comic Sans MS",cursive;
  --sh:0 1px 2px rgba(42,34,48,.05),0 16px 40px rgba(42,34,48,.10);
  --sh-sm:0 1px 2px rgba(42,34,48,.06),0 8px 20px rgba(42,34,48,.08);
  --sh-lift:0 24px 60px rgba(42,34,48,.18);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }
body{
  font-family:var(--font-ui); color:var(--ink);
  background:
    radial-gradient(1100px 560px at 8% -6%, var(--cream) 0%, rgba(252,235,214,0) 56%),
    radial-gradient(980px 520px at 102% 2%, #EFE0EE 0%, rgba(239,224,238,0) 52%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:10px; font:700 17px var(--font-ui);
  padding:15px 26px; border-radius:999px; border:0; cursor:pointer; transition:transform .12s ease, filter .15s ease, box-shadow .15s ease; }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 8px 18px rgba(247,147,30,.34); }
.btn-primary:hover{ filter:brightness(1.04); box-shadow:0 10px 22px rgba(247,147,30,.42); }
.btn-primary:active{ transform:translateY(1px); filter:brightness(.96); }
.btn-ghost{ background:#fff; color:var(--purple); box-shadow:var(--sh-sm); }
.btn-ghost:hover{ filter:brightness(.99); }
.btn-lg{ font-size:18px; padding:17px 30px; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(244,234,219,.82); border-bottom:1px solid var(--hairline); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav .logo{ height:34px; }
.nav .links{ display:flex; align-items:center; gap:30px; }
.nav .links a.l{ font:600 15px var(--font-ui); color:var(--ink-2); }
.nav .links a.l:hover{ color:var(--ink); }

/* ---------- scrapbook primitives ---------- */
.polaroid{ background:#fff; padding:10px 10px 34px; border-radius:6px; box-shadow:var(--sh-sm);
  transform:rotate(var(--r,0deg)); position:relative; }
.polaroid img{ width:100%; height:var(--ph,180px); object-fit:cover; border-radius:3px; }
.polaroid .cap{ font:700 16px var(--font-hand); text-align:center; margin:11px 4px 0; color:var(--ink); }
.tape{ position:absolute; width:92px; height:26px; background:var(--tape); border-radius:2px;
  box-shadow:0 1px 2px rgba(42,34,48,.12); left:50%; top:-12px; transform:translateX(-50%) rotate(var(--tr,-3deg));
  backdrop-filter:saturate(1.1); }
.tape.alt{ background:rgba(163,67,154,.32); }

.bubble{ background:#fff; border-radius:20px; padding:18px 22px; box-shadow:var(--sh); position:relative; }
.bubble::after{ content:""; position:absolute; left:30px; bottom:-13px; width:26px; height:26px; background:#fff;
  border-bottom-left-radius:6px; transform:rotate(45deg); box-shadow:-3px 3px 7px rgba(42,34,48,.05); }
.bubble.tail-r::after{ left:auto; right:30px; border-bottom-left-radius:0; border-bottom-right-radius:6px; }
.bubble .q{ font:700 19px/1.32 var(--font-hand); margin:0; color:var(--ink); }
.bubble .by{ font:600 12px var(--font-ui); color:var(--ink-2); margin:9px 0 0; }
.bubble .by b{ color:var(--c,var(--a-magenta)); }

/* ---------- email capture ---------- */
.capture{ display:flex; gap:10px; flex-wrap:wrap; max-width:480px; }
.capture input{ flex:1 1 230px; min-width:0; font:500 16px var(--font-ui); color:var(--ink);
  padding:15px 20px; border-radius:999px; border:1.5px solid var(--hairline); background:#fff; box-shadow:var(--sh-sm); outline:none; }
.capture input:focus{ border-color:var(--orange); box-shadow:0 0 0 4px rgba(247,147,30,.16); }
.capture input::placeholder{ color:#a59ca8; }
.capture-note{ font:500 13px var(--font-ui); color:var(--ink-2); margin:13px 0 0; display:flex; align-items:center; gap:7px; }
.capture-note svg{ width:15px; height:15px; flex:0 0 auto; }
.thanks{ font:700 16px var(--font-ui); color:var(--purple); margin:0; padding:6px 0; }

/* ---------- section scaffolding ---------- */
section{ position:relative; }
.eyebrow{ font:700 13px var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin:0 0 16px; display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange); border-radius:2px; }
h2.big{ font:800 46px/1.04 var(--font-display); letter-spacing:-.01em; margin:0 0 18px; color:var(--ink); }
h2.big em{ font-style:normal; color:var(--purple); }
.lead{ font:400 20px/1.55 var(--font-ui); color:var(--ink-2); margin:0; max-width:60ch; }

/* ---------- HERO shared ---------- */
.hero{ padding:64px 0 40px; }
.hero[hidden]{ display:none; }
.hero h1{ font:800 var(--h1,66px)/1.08 var(--font-display); letter-spacing:-.015em; margin:0 0 26px; color:var(--ink); }
.hero h1 .pop{ color:var(--purple); }
.hero h1 .pop-o{ color:var(--orange); }
.hero .sub{ font:400 21px/1.5 var(--font-ui); color:var(--ink-2); margin:0 0 28px; max-width:46ch; }

/* hero A — collage */
.heroA .wrap{ display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; }
.collage{ position:relative; height:520px; }
.collage .polaroid{ position:absolute; width:230px; --ph:208px; }
.collage .p1{ left:6%; top:8%; --r:-5deg; }
.collage .p2{ right:2%; top:0; --r:4deg; width:210px; --ph:190px; z-index:3; }
.collage .p3{ left:20%; bottom:0; --r:3deg; z-index:4; }
.collage .b1{ position:absolute; right:-2%; bottom:14%; width:250px; z-index:5; }
.collage .b2{ position:absolute; left:-3%; top:46%; width:200px; z-index:5; }

/* hero B — phone led */
.heroB .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; }
.heroB .stage{ position:relative; display:flex; justify-content:center; }
.heroB .float{ position:absolute; z-index:6; width:230px; }
.heroB .f1{ top:-5%; left:-15%; width:208px; }
.heroB .f2{ bottom:4%; right:-12%; width:208px; }

/* hero C — centered bubble */
.heroC{ text-align:center; padding-top:54px; }
.heroC .wrap{ display:flex; flex-direction:column; align-items:center; }
.heroC .megabubble{ background:#fff; border-radius:34px; padding:48px 56px 52px; box-shadow:var(--sh-lift); position:relative; max-width:880px; }
.heroC .megabubble::after{ content:""; position:absolute; left:90px; bottom:-22px; width:46px; height:46px; background:#fff;
  border-bottom-left-radius:10px; transform:rotate(45deg); box-shadow:-4px 4px 10px rgba(42,34,48,.06); }
.heroC h1{ margin-bottom:18px; }
.heroC .sub{ margin-left:auto; margin-right:auto; max-width:52ch; }
.heroC .capture{ margin:0 auto; justify-content:center; }
.heroC .capture-note{ justify-content:center; }
.heroC .strip{ display:flex; gap:18px; justify-content:center; margin-top:46px; flex-wrap:wrap; }
.heroC .strip .polaroid{ width:168px; --ph:150px; }

/* ---------- PHONE mockup ---------- */
.phone{ width:300px; border-radius:46px; background:#1c1620; padding:11px; box-shadow:var(--sh-lift); position:relative; flex:0 0 auto; }
.phone .screen{ border-radius:36px; overflow:hidden; background:var(--paper-2); position:relative; height:592px; display:flex; flex-direction:column; }
.app{ display:flex; flex-direction:column; flex:1; min-height:0; }
.app-feed{ flex:1 1 auto; min-height:0; overflow:hidden; }
.phone .island{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px; height:26px; background:#1c1620; border-radius:14px; z-index:20; }
.app{ font-family:var(--font-ui); color:var(--ink); }
.app-top{ padding:42px 18px 12px; background:#fff; border-bottom:1px solid var(--hairline); }
.app-top .row{ display:flex; align-items:center; justify-content:space-between; }
.app-top .ttl{ font:800 23px var(--font-display); letter-spacing:-.01em; }
.app-top .lg{ height:18px; }
.app-search{ margin-top:12px; background:#F1F3F5; border-radius:999px; padding:10px 16px; display:flex; align-items:center; gap:9px; color:#9aa0a6; font:500 14px var(--font-ui); }
.app-search svg{ width:15px; height:15px; }
.app-priv{ display:flex; align-items:center; justify-content:center; gap:7px; margin:11px auto 0; font:600 12px var(--font-ui); color:var(--purple);
  background:#EFE0EE; padding:6px 14px; border-radius:999px; width:max-content; }
.app-priv svg{ width:12px; height:12px; }
.app-feed{ padding:14px 16px 22px; display:grid; gap:14px; align-content:start; background:linear-gradient(180deg,#fff, #FBF6EE 30%); }
.app-month{ font:700 12px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:2px 2px -2px; }
.mcard{ background:#fff; border-radius:18px; padding:13px; box-shadow:var(--sh-sm); position:relative; }
.mcard::after{ content:""; position:absolute; left:22px; bottom:-9px; width:18px; height:18px; background:#fff; border-bottom-left-radius:5px; transform:rotate(45deg); box-shadow:-2px 2px 5px rgba(42,34,48,.05); }
.mcard .head{ display:flex; align-items:center; gap:10px; }
.mcard .ava{ width:42px; height:42px; border-radius:11px; border:3px solid var(--c); object-fit:cover; flex:0 0 auto; background:#eee; }
.mcard .nm{ font:700 16px var(--font-hand); color:var(--c); line-height:1.05; }
.mcard .dt{ font:700 12px var(--font-hand); color:var(--date-teal); }
.mcard .meta{ margin-left:auto; display:flex; align-items:center; gap:5px; color:var(--ink-2); }
.mcard .meta svg{ width:13px; height:13px; }
.mcard .q{ font:700 15px/1.26 var(--font-hand); color:var(--ink); margin:9px 2px 0; }
.mcard .thumb{ width:100%; height:118px; object-fit:cover; border-radius:11px; margin-top:9px; }
.mcard .react{ display:inline-flex; align-items:center; gap:5px; margin-top:9px; background:#F1F3F5; border-radius:999px; padding:4px 11px; font:700 12px var(--font-ui); color:var(--ink-2); }
.app-tab{ display:flex; justify-content:space-around; align-items:center; padding:11px 0 16px; background:#fff; border-top:1px solid var(--hairline); }
.app-tab .t{ display:flex; flex-direction:column; align-items:center; gap:3px; font:600 10px var(--font-ui); color:#b3aab8; }
.app-tab .t.on{ color:var(--orange); }
.app-tab .t svg{ width:21px; height:21px; }

/* ---------- PROBLEM band ---------- */
.band{ padding:96px 0; }
.band-tint{ background:linear-gradient(180deg, rgba(252,235,214,0), #FCEBD6 50%, rgba(252,235,214,0)); }
.problem .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.qlist{ display:grid; gap:16px; }
.qrow{ display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:16px; padding:18px 20px; box-shadow:var(--sh-sm); }
.qrow .mk{ font:800 22px var(--font-display); color:var(--orange); line-height:1; flex:0 0 auto; }
.qrow p{ margin:0; font:600 17px/1.4 var(--font-ui); color:var(--ink); }
.problem .answer{ margin-top:24px; font:700 19px/1.45 var(--font-hand); color:var(--purple); }

/* ---------- WHAT IS IT ---------- */
.what .wrap{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.what .phone-wrap{ display:flex; justify-content:center; position:relative; }
.what .deco-bubble{ position:absolute; z-index:6; width:210px; right:-4%; top:8%; }

/* ---------- FEATURES ---------- */
.features{ text-align:center; }
.features .head{ max-width:62ch; margin:0 auto 48px; }
.fgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.fcard{ background:#fff; border-radius:20px; padding:26px 22px; box-shadow:var(--sh-sm); text-align:left; transition:transform .15s ease, box-shadow .15s ease; }
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.fcard .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; }
.fcard .ic svg{ width:25px; height:25px; }
.fcard h3{ font:800 19px var(--font-display); margin:0 0 7px; }
.fcard p{ font:400 14px/1.5 var(--font-ui); color:var(--ink-2); margin:0; }

/* ---------- PRIVACY ---------- */
.privacy .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.priv-card{ background:#fff; border-radius:24px; padding:34px; box-shadow:var(--sh); display:grid; gap:18px; }
.priv-item{ display:flex; gap:16px; align-items:flex-start; }
.priv-item .ic{ width:48px; height:48px; border-radius:14px; background:#EFE0EE; display:grid; place-items:center; flex:0 0 auto; }
.priv-item .ic svg{ width:24px; height:24px; color:var(--purple); }
.priv-item h4{ font:800 18px var(--font-display); margin:0 0 5px; }
.priv-item p{ font:400 14px/1.5 var(--font-ui); color:var(--ink-2); margin:0; }
.exclude{ margin-top:22px; font:500 14px/1.6 var(--font-ui); color:var(--ink-2); }
.exclude b{ color:var(--ink); }

/* ---------- CTA ---------- */
.cta{ padding:30px 0 110px; }
.cta-card{ position:relative; background:linear-gradient(150deg,#92278F,#7A1F77); border-radius:34px; padding:64px 56px; color:#fff; overflow:hidden; box-shadow:var(--sh-lift); }
.cta-card .blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.9; }
.cta-card .b-o{ width:260px; height:260px; background:radial-gradient(circle at 35% 35%, var(--orange-light), var(--orange)); right:-60px; top:-70px; opacity:.55; filter:blur(6px); }
.cta-inner{ position:relative; z-index:2; max-width:660px; }
.cta h2{ font:800 44px/1.05 var(--font-display); margin:0 0 16px; letter-spacing:-.01em; }
.cta p{ font:400 19px/1.5 var(--font-ui); color:rgba(255,255,255,.86); margin:0 0 28px; max-width:50ch; }
.cta .capture input{ border-color:transparent; }
.cta .capture-note{ color:rgba(255,255,255,.8); }
.cta .thanks{ color:#fff; }
.cta-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.cta-tags span{ font:600 13px var(--font-ui); color:#fff; background:rgba(255,255,255,.16); padding:7px 14px; border-radius:999px; }
.cta-photos{ position:absolute; right:40px; bottom:-30px; z-index:1; display:flex; gap:16px; }
.cta-photos .polaroid{ width:128px; --ph:108px; }

/* ---------- FOOTER ---------- */
.foot{ border-top:1px solid var(--hairline); padding:46px 0 70px; }
.foot .wrap{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; }
.foot .logo{ height:30px; margin-bottom:12px; }
.foot .tag{ font:700 16px var(--font-hand); color:var(--purple); margin:0; }
.foot .cols{ display:flex; gap:54px; flex-wrap:wrap; }
.foot .col h5{ font:700 12px var(--font-ui); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin:0 0 12px; }
.foot .col a{ display:block; font:500 15px/1.3 var(--font-ui); color:var(--ink); margin-bottom:11px; white-space:nowrap; }
.foot .col a:hover{ color:var(--purple); }
.foot .legal{ width:100%; border-top:1px solid var(--hairline); margin-top:14px; padding-top:22px; font:500 13px var(--font-ui); color:var(--ink-2); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---------- hero switcher ---------- */
.switcher{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:90;
  background:rgba(42,34,48,.92); backdrop-filter:blur(8px); border-radius:999px; padding:6px;
  display:flex; align-items:center; gap:3px; box-shadow:0 10px 30px rgba(42,34,48,.3); }
.switcher .lbl{ font:700 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); padding:0 12px 0 14px; }
.switcher button{ font:700 13px var(--font-ui); color:rgba(255,255,255,.7); background:transparent; border:0; cursor:pointer;
  padding:9px 18px; border-radius:999px; transition:.15s; }
.switcher button:hover{ color:#fff; }
.switcher button.on{ background:var(--orange); color:#fff; }

/* reveal — only hide when JS is active, so no-JS/print still shows content */
.reveal{ transition:opacity .7s ease, transform .7s ease; }
.js .reveal{ opacity:0; transform:translateY(22px); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .heroA .wrap,.heroB .wrap,.what .wrap,.problem .wrap,.privacy .wrap{ grid-template-columns:1fr; gap:40px; }
  .collage{ height:440px; max-width:480px; margin:0 auto; }
  .fgrid{ grid-template-columns:1fr 1fr; }
  .hero h1{ --h1:52px; }
  h2.big{ font-size:38px; }
  .heroB .stage{ order:-1; }
  .cta-photos{ display:none; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .nav .links a.l{ display:none; }
  .hero h1{ --h1:42px; }
  .hero .sub,.lead{ font-size:18px; }
  .fgrid{ grid-template-columns:1fr; }
  .heroC .megabubble{ padding:34px 26px 36px; }
  .cta-card{ padding:44px 28px; }
  .cta h2{ font-size:34px; }
  h2.big{ font-size:32px; }
}