:root{
  --morado:#4B247E;
  --morado-medio:#7B4FD0;
  --lavanda:#D9BDFA;
  --lavanda-clara:#E5CEFC;
  --crema:#FDF4ED;
  --amarillo:#FED549;
  --menta:#9FDBC8;
  --rosa:#FACDC8;
  --blanco:#F4F1FC;
  --ink:#2b1d5c;
  --font-display:'Nunito',system-ui,sans-serif;
  --font-body:Fredoka,system-ui,sans-serif;
  --app:https://app.belumi.kids;
}
@font-face{font-family:Fredoka;src:url(/fredoka-600.ttf) format("truetype");font-weight:600}
@font-face{font-family:Fredoka;src:url(/fredoka-700.ttf) format("truetype");font-weight:700}
@font-face{font-family:Nunito;src:url(/nunito-900.ttf) format("truetype");font-weight:900}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:18px;line-height:1.45;
  background:
    radial-gradient(ellipse 70% 55% at 85% 8%,var(--lavanda) 0%,transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 30%,var(--lavanda-clara) 0%,transparent 50%),
    linear-gradient(180deg,var(--crema),#fff8f2 40%,var(--lavanda-clara));
  min-height:100vh;
}
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:10px}
img{max-width:100%;height:auto;display:block}
a{color:var(--morado-medio)}

.top{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(16px,4vw,40px);backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--crema) 82%,transparent);border-bottom:1px solid #4B247E14;
}
.brand img{height:44px;width:auto}
.top nav{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap;justify-content:flex-end}
.top nav a{text-decoration:none;color:var(--ink);font-weight:700;font-size:15px}
.cta-nav{
  background:var(--morado);color:#fff!important;padding:10px 16px;border-radius:999px;
  box-shadow:0 4px 0 #2a104f55;
}

.hero{
  min-height:calc(100svh - 72px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(20px,4vw,48px);padding:clamp(24px,5vw,64px) clamp(16px,5vw,56px) clamp(40px,6vw,72px);
  position:relative;overflow:hidden;
}
.hero-copy{max-width:34rem;position:relative;z-index:2}
.tagline{
  margin:0 0 8px;font-family:var(--font-body);font-weight:700;color:var(--morado-medio);letter-spacing:.02em;
  animation:rise .7s ease both;
}
.hero h1{
  margin:0 0 14px;font-family:var(--font-display);font-weight:900;font-size:clamp(64px,12vw,112px);
  line-height:.9;color:var(--morado);letter-spacing:-.02em;animation:rise .75s .05s ease both;
}
.lead{margin:0 0 28px;font-size:clamp(18px,2.2vw,22px);color:#3d2d6b;max-width:32ch;animation:rise .8s .1s ease both}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;animation:rise .85s .15s ease both}

.btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;
  border-radius:22px;padding:14px 24px;min-height:54px;border:0;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:active{transform:translateY(3px)}
.btn.primary{
  background:linear-gradient(180deg,#ffd84d,var(--amarillo));color:var(--ink);
  box-shadow:0 7px 0 #c9a010,0 12px 24px #4B247E33;
}
.btn.primary:active{box-shadow:0 2px 0 #c9a010}
.btn.ghost{
  background:#fff8;color:var(--morado);border:2px solid #4B247E33;
}
.btn.big{font-size:22px;padding:18px 32px;min-height:64px}

.hero-visual{
  position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:420px;
  background:
    radial-gradient(circle at 50% 70%,var(--lavanda) 0%,transparent 62%),
    radial-gradient(circle at 70% 30%,#fff8 0%,transparent 40%);
  border-radius:40% 48% 36% 52% / 48% 40% 52% 44%;
  animation:blob 12s ease-in-out infinite alternate;
}
.hero-belumi{
  width:min(420px,70vw);filter:drop-shadow(0 24px 40px #4B247E44);
  animation:float 4s ease-in-out infinite;position:relative;z-index:2;
}
.star{
  position:absolute;width:18px;height:18px;background:var(--amarillo);z-index:1;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:twinkle 2.4s ease-in-out infinite;
}
.s1{top:12%;left:18%}.s2{top:28%;right:14%;animation-delay:.4s}.s3{bottom:22%;left:22%;animation-delay:.9s}

.band{padding:clamp(48px,8vw,96px) clamp(16px,5vw,56px);text-align:center}
.band.soft{background:linear-gradient(180deg,transparent,#ffffff88 30%,#ffffff66)}
.band h2{
  margin:0 0 10px;font-family:var(--font-display);font-weight:900;font-size:clamp(32px,5vw,48px);color:var(--morado);
}
.sub{margin:0 auto 36px;max-width:40ch;color:#4a3a78}.sub.left{margin-left:0;text-align:left}
.center{margin-top:36px}

.steps{
  list-style:none;margin:0 auto;padding:0;display:grid;gap:18px;max-width:820px;text-align:left;
}
.steps li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:18px 20px;border-radius:24px;background:#fff9;border:1px solid #4B247E14;
}
.steps .n{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--morado);color:#fff;font-weight:900;font-family:var(--font-display);
}
.steps strong{display:block;font-size:20px;margin-bottom:4px}
.steps p{margin:0;color:#4a3a78}

.subjects{
  list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:720px;
}
.subjects li{
  padding:14px 20px;border-radius:999px;background:#fff;border:2px solid var(--lavanda);
  font-weight:700;font-size:18px;color:var(--morado);
}

.split{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;
  max-width:960px;margin:0 auto;text-align:left;
}
.side-belumi{width:min(280px,38vw);filter:drop-shadow(0 16px 28px #4B247E33);animation:float 3.6s ease-in-out infinite}
.checks{margin:0 0 24px;padding:0;list-style:none}
.checks li{margin:0 0 10px;padding-left:28px;position:relative}
.checks li:before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;background:var(--menta);box-shadow:0 0 0 4px #9FDBC844}

.final{padding-bottom:clamp(64px,10vw,120px)}
.foot{
  text-align:center;padding:32px 16px 48px;color:#5a4a88;border-top:1px solid #4B247E14;
}
.foot img{margin:0 auto 10px}
.foot .links{margin-top:8px}
.foot a{font-weight:700;text-decoration:none}

.legal-page{max-width:720px;margin:0 auto;text-align:left}
.legal-page h1{font-family:var(--font-display);font-weight:900;font-size:clamp(36px,6vw,52px);color:var(--morado);margin:0 0 12px}
.legal-page h2{font-family:var(--font-display);font-weight:900;font-size:clamp(22px,3vw,28px);color:var(--morado);margin:28px 0 10px}
.legal-page p,.legal-page li{color:#3d2d6b}
.legal-list{padding-left:1.2em;margin:0 0 16px}
.legal-list li{margin:0 0 8px}
.legal-page .small{font-size:14px;color:#6b6390;margin-top:32px}
.faq-item{background:#fff9;border:1px solid #4B247E14;border-radius:18px;padding:14px 18px;margin:0 0 12px;text-align:left}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--morado);font-size:18px}
.faq-item p{margin:10px 0 4px}
.blog-card{background:#fff9;border:1px solid #4B247E14;border-radius:22px;padding:22px 24px;margin:0 0 16px;text-align:left}
.blog-card h2{margin-top:0}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.85) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(12deg)}}
@keyframes blob{from{border-radius:40% 48% 36% 52% / 48% 40% 52% 44%}to{border-radius:48% 36% 52% 40% / 40% 52% 44% 48%}}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:28px}
  .hero-visual{order:-1;min-height:280px;margin-bottom:8px}
  .hero-belumi{width:min(280px,68vw)}
  .hero h1{font-size:clamp(56px,16vw,84px)}
  .top nav a:not(.cta-nav){display:none}
  .split{grid-template-columns:1fr;text-align:center}
  .side-belumi{margin:0 auto}
  .sub.left,.checks{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.faq-list{max-width:760px;margin:0 auto}
.langs{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:8px 0}
.langs a{color:inherit;text-decoration:underline;padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.langs a[aria-current]{font-weight:700;text-decoration:none}