:root{
    color-scheme:light;
    --gutter:24px;

    --navy:#16256B;
    --navy-deep:#0E1846;
    --pink:#ED2E82;
    --pink-deep:#C01A66;
    --yellow:#FFC72C;
    --yellow-soft:#FCEFC4;
    --peri:#8E9BEF;
    --peri-soft:#E3E7FE;
    --sky:#7FB3F5;
    --leaf:#5BBE86;

    --bg:#FAF9FD;
    --bg-blob-a:#EDEBFA;
    --bg-blob-b:#FCF3D8;
    --surface:#FFFFFF;
    --surface-alt:#F2F2FB;
    --ink:#16256B;
    --ink-muted:#5A628E;
    --ink-faint:#9098BC;
    --border:#E8E7F6;
    --border-strong:#D5D4EE;
    --shadow:0 18px 38px -22px rgba(22,37,107,0.38);
    --band-bg:#F1F1FC;

    --money-fg:#C01A66;
    --curious-fg:#5B49C9;
    --school-fg:#3552C4;
    --healthy-fg:#22855B;
    --cup-fg:#1F7FA8;
    --soon-fg:#6C6F9B;
  }

  *{box-sizing:border-box;}
  body{
    margin:0; padding-inline:var(--gutter);
    background:var(--bg); color:var(--ink);
    font-family:'Nunito', ui-rounded, system-ui, sans-serif; font-weight:600;
    -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
  }
  body::before, body::after{
    content:""; position:fixed; z-index:-1; pointer-events:none;
    border-radius:50% 50% 46% 54% / 52% 48% 52% 48%;
  }
  body::before{width:520px; height:480px; left:-190px; top:-120px; background:var(--bg-blob-a);}
  body::after{width:460px; height:420px; right:-170px; bottom:-140px; background:var(--bg-blob-b);}

  h1,h2,h3{font-family:'Poppins', ui-rounded, system-ui, sans-serif; color:var(--navy); margin:0; text-wrap:balance; letter-spacing:-0.015em;}
  .hand{font-family:'Patrick Hand', cursive; font-weight:400;}
  .eyebrow{font-family:'Poppins',sans-serif; font-weight:600; font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);}
  a{color:inherit;}
  button{font:inherit;}
  .wrap{max-width:1180px; margin-inline:auto;}
  img,svg{max-width:100%;}

  /* ---------- Nav ---------- */
    .nav-cta{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none;
    background:var(--navy); color:#fff; border-radius:999px; padding:11px 20px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.92rem;
    box-shadow:0 4px 0 var(--navy-deep); border:0; cursor:pointer;
  }
  .nav-cta:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--navy-deep);}
  .nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav-row{position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:14px;}
  .logo{display:flex; align-items:center; text-decoration:none;}
  .logo-img{display:block; height:58px; width:auto;}
  .footer-logo{height:70px;}
  .nav-links{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.92rem; color:var(--ink-muted);}
  .nav-links a{text-decoration:none; padding:9px 15px; border-radius:999px; display:block;}
  .nav-links a:hover{background:var(--surface-alt); color:var(--navy);}
  .nav-links a[aria-current="page"]{background:var(--navy); color:#fff;}
  .nav-actions{display:flex; align-items:center; gap:10px;}
  .icon-btn{width:42px; height:42px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--navy); cursor:pointer;}
  .icon-btn:hover{border-color:var(--pink); color:var(--pink);}
  .nav-toggle{display:none;}
  #nav-check{display:none;}
  @media (max-width:940px){
    .nav-links{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); border-bottom:1px solid var(--border); border-radius:0 0 22px 22px; padding-inline:14px; max-height:0; overflow:hidden; transition:max-height .25s ease; box-shadow:var(--shadow);}
    #nav-check:checked ~ .nav-links{max-height:380px; padding-block:12px 16px;}
    .nav-toggle{display:flex;}
  }

  /* ---------- Hero ---------- */
  .hero-frame{padding-block:26px 6px;}
  .hero{
    position:relative; overflow:hidden; border-radius:34px; padding:42px 44px;
    background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
    display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:center;
  }
  .hero::before{content:""; position:absolute; width:340px; height:320px; left:-140px; top:-120px; background:var(--peri-soft); border-radius:52% 48% 44% 56% / 48% 52% 48% 52%;}
  .hero::after{content:""; position:absolute; width:260px; height:240px; right:-90px; bottom:-110px; background:var(--yellow-soft); border-radius:48% 52% 56% 44% / 52% 46% 54% 48%;}
  .hero > *{position:relative; z-index:1;}
  .hero-note{display:inline-block; transform:rotate(-2deg); font-size:1.4rem; color:var(--peri); margin-bottom:6px;}
  .hero h1{font-size:clamp(2.3rem, 4.6vw, 3.5rem); font-weight:800; line-height:1.06;}
  .hero h1 .pink{color:var(--pink);}
  .yellow-bar{display:block; width:120px; height:9px; border-radius:999px; background:var(--yellow); margin:18px 0 16px;}
  .hero p{margin:0; max-width:42ch; color:var(--ink-muted); font-size:1.06rem; line-height:1.65; font-weight:700;}
  .hero-chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px;}
  .hero-chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface-alt); border-radius:999px; padding:8px 15px; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.83rem; color:var(--navy);}
  .hero-chip b{color:var(--pink); font-weight:700;}
  .hero-art{position:relative;}
  .hero-photo{
    display:block; width:100%; height:auto; border-radius:26px;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 16%, #000 100%);
    mask-image:linear-gradient(to right, transparent 0%, #000 16%, #000 100%);
  }
  @media (max-width:900px){
    .hero{grid-template-columns:1fr; padding:30px 24px; border-radius:26px;}
    .hero-photo{-webkit-mask-image:none; mask-image:none; border:1px solid var(--border);}
  }

  /* ---------- Filters ---------- */
  .filters{
    margin-top:30px; background:var(--surface); border:1px solid var(--border);
    border-radius:24px; padding:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center;
    box-shadow:var(--shadow);
  }
  .search-field{flex:1 1 230px; display:flex; align-items:center; gap:9px; background:var(--surface-alt); border:2px solid transparent; border-radius:999px; padding:10px 18px; color:var(--navy);}
  .search-field:focus-within{border-color:var(--peri);}
  .search-field input{border:0; outline:0; background:transparent; width:100%; font:inherit; font-weight:700; color:var(--ink);}
  .search-field input::placeholder{color:var(--ink-faint); font-weight:600;}
  .select-field{position:relative;}
  .select-field select{
    appearance:none; -webkit-appearance:none; background:var(--surface-alt);
    border:2px solid transparent; border-radius:999px; padding:11px 36px 11px 18px;
    font-family:'Poppins',sans-serif; font-size:0.9rem; font-weight:600; color:var(--ink);
    cursor:pointer; width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .select-field select:hover{border-color:var(--peri);}
  .select-field svg{position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--peri);}
  #f-age{width:124px;}
  #f-topic{width:250px;}
  #f-lang{width:152px;}
  #f-for{width:212px;}
  .clear-btn{border:0; background:none; color:var(--pink); cursor:pointer; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.9rem; padding:10px 8px; text-decoration:underline; text-underline-offset:4px;}
  .clear-btn:disabled{color:var(--ink-faint); text-decoration:none; cursor:default;}

  .results-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:30px 2px 18px;}
  .results-row .count{font-family:'Poppins',sans-serif; font-weight:600; color:var(--ink-muted); font-size:0.98rem;}
  .results-row .count strong{color:var(--navy); font-weight:700;}
  .results-row .hand{color:var(--pink); font-size:1.3rem;}

  /* ---------- Cards ---------- */
  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:24px; padding-bottom:56px;}
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:26px;
    overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
    transition:transform .2s ease, border-color .2s ease;
  }
  .card:hover{transform:translateY(-5px); border-color:var(--peri);}
  .card[hidden]{display:none;}
  .scene{display:block; width:100%; height:186px;}
  .card-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:7px; flex:1;}
  .cat{font-family:'Poppins',sans-serif; font-weight:600; font-size:0.71rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--topic-fg);}
  .card h3{font-size:1.32rem; font-weight:700; line-height:1.18; margin-top:2px;}
  .tagline{font-family:'Patrick Hand', cursive; font-size:1.22rem; color:var(--pink); line-height:1.25; margin-top:2px;}
  .desc{margin:4px 0 0; font-size:0.93rem; line-height:1.55; color:var(--ink-muted); font-weight:600;}
  .meta-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
  .chip{display:inline-flex; align-items:center; gap:6px; background:var(--surface-alt); border-radius:999px; padding:6px 12px; font-size:0.8rem; font-weight:700; color:var(--ink-muted);}
  .chip svg{color:var(--peri);}
  .card-actions{margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:10px;}
  .card-actions .btn{flex:0 0 auto; width:100%;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem;
    border-radius:999px; padding:11px 18px; border:0; cursor:pointer; flex:1 1 150px;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .btn-pink{background:var(--pink); color:#fff; box-shadow:0 4px 0 var(--pink-deep);}
  .btn-pink:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--pink-deep);}
  .btn-ghost{background:var(--surface); color:var(--navy); border:2px solid var(--border-strong);}
  .btn-ghost:hover{border-color:var(--peri); color:var(--pink);}

  .card.soon{border-style:dashed; border-width:2px; border-color:var(--border-strong); box-shadow:none;}
  .card.soon h3{color:var(--ink-muted);}
  .soon-badge{
    margin-top:auto; padding-top:18px;
    font-family:'Patrick Hand', cursive; font-size:1.3rem; color:var(--peri);
  }

  .empty-state{display:none; text-align:center; padding:56px 20px 70px; color:var(--ink-muted); font-weight:700; font-size:1.05rem;}
  .empty-state.show{display:block;}

  /* ---------- Footer ---------- */
  footer{margin-inline:calc(-1 * var(--gutter)); margin-top:20px;}
  .footer-wave{display:block; width:100%; height:66px;}
  .footer-band{position:relative; overflow:hidden; background:var(--band-bg); padding-inline:var(--gutter);}
  .footer-band::before{content:""; position:absolute; width:300px; height:250px; left:-170px; bottom:-150px; background:var(--yellow-soft); border-radius:50% 50% 44% 56% / 50% 46% 54% 50%;}
  .footer-band::after{content:""; position:absolute; width:300px; height:260px; right:-110px; top:-90px; background:var(--peri-soft); border-radius:48% 52% 52% 48% / 54% 46% 54% 46%;}
  .footer-inner{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:26px; align-items:flex-end; justify-content:space-between; padding-block:6px 30px;}
  .footer-hand{font-size:1.7rem; color:var(--peri); text-align:right; line-height:1.2;}
  .footer-hand b{color:var(--pink); font-weight:400;}
  .footer-links-row{position:relative; z-index:1; background:var(--band-bg); padding-inline:var(--gutter);}
  .footer-links-inner{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; padding-block:18px 26px; border-top:1px solid var(--border-strong);}
  .footer-links{display:flex; flex-wrap:wrap; gap:20px; list-style:none; margin:0; padding:0; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.9rem; color:var(--ink-muted);}
  .footer-links a{text-decoration:none;}
  .footer-links a:hover{color:var(--pink);}
  .footer-copy{font-size:0.82rem; color:var(--ink-faint); font-weight:700;}

    .logo-img{height:32px;}
  .footer-logo{height:40px;}
  
  @media (max-width:640px){
    :root{--gutter:16px;}
    .hero h1{font-size:2.15rem;}
    .grid{grid-template-columns:1fr;}
    .select-field{flex:1 1 100%;}
    .select-field select, #f-age, #f-topic, #f-lang, #f-for{width:100%;}
    .footer-hand{text-align:left;}
    .footer-inner{align-items:flex-start;}
  }
  @media (prefers-reduced-motion: reduce){ *{transition:none !important;} }