/* Sola's Home Childcare – Dark Glass (Redesigned) */

:root{
  --bg0:#04070c;
  --bg1:#061321;
  --bg2:#06182b;

  --text:#eaf2ff;
  --muted: rgba(234,242,255,.72);

  --accent:#22c55e; /* green */
  --accent2:#60a5fa; /* blue */
  --accent3:#14b8a6; /* teal */

  --glass: rgba(18, 34, 54, .58);
  --glass2: rgba(255,255,255,.06);
  --border: rgba(255,255,255,.14);

  --shadow: 0 30px 120px rgba(0,0,0,.55);
  --shadow2: 0 16px 40px rgba(0,0,0,.42);
  --radius: 24px;
}

*{ box-sizing:border-box; }
html,body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(96,165,250,.20), transparent 60%),
    radial-gradient(850px 520px at 90% 20%, rgba(20,184,166,.18), transparent 62%),
    radial-gradient(900px 600px at 55% 95%, rgba(34,197,94,.14), transparent 62%),
    linear-gradient(160deg, var(--bg1), var(--bg0) 55%, var(--bg2));
  overflow-x:hidden;
}

/* animated aurora */
.bg-aurora{
  position: fixed;
  inset: -20vh -20vw;
  z-index:-3;
  pointer-events:none;
  filter: blur(30px);
  opacity:.95;
}
.bg-aurora::before,
.bg-aurora::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 340px at 20% 25%, rgba(96,165,250,.34), transparent 62%),
    radial-gradient(540px 360px at 78% 18%, rgba(20,184,166,.28), transparent 62%),
    radial-gradient(520px 380px at 55% 84%, rgba(34,197,94,.18), transparent 62%);
  animation: aurora 18s ease-in-out infinite alternate;
}
.bg-aurora::after{ opacity:.65; animation-duration: 26s; filter: blur(44px); }
@keyframes aurora{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02); }
  50%{ transform: translate3d( 2%,  1%, 0) scale(1.06); }
  100%{ transform: translate3d(-1%,  2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .bg-aurora::before, .bg-aurora::after{ animation:none !important; }
}

/* NAV */
nav{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .7rem 1.2rem;
  flex-wrap: wrap;
  padding: .9rem 1.1rem;
  background: rgba(8, 18, 30, .55);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
nav a{
  color: rgba(234,242,255,.88);
  text-decoration:none;
  font-weight: 850;
  padding: .35rem .15rem;
  position:relative;
}
nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  transition: width .22s ease;
}
nav a:hover::after,
nav a.active::after{ width:100%; }

.nav-license{
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 950;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(234,242,255,.92);
}

.theme-toggle{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.92);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-weight: 950;
  cursor:pointer;
}

/* Layout */
.container{
  width: min(1120px, 92vw);
  margin: 0 auto;
}

/* HERO */
.hero{
  padding: 3.2rem 0 1.6rem;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1.25rem;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
}
.hero-card{
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow:hidden;
}
.hero-copy{
  padding: 2rem;
}
.hero h1{
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.03em;
}
.hero p{ margin: 0 0 1rem; color: var(--muted); font-weight: 650; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 900;
}
.hero-actions{ display:flex; gap:.65rem; flex-wrap: wrap; margin-top: 1rem; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .9rem 1.15rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.14);
  cursor:pointer;
  transition: transform .15s ease, filter .2s ease, opacity .2s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-primary{
  color: #04110a;
  background: linear-gradient(135deg, rgba(34,197,94,1), rgba(20,184,166,1));
}
.btn-secondary{
  color: rgba(234,242,255,.92);
  background: rgba(255,255,255,.06);
}
.btn-outline{
  color: rgba(234,242,255,.92);
  background: transparent;
}

/* Hero photos */
.hero-photos{
  display:grid;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
}
.hero-photo{
  border-radius: calc(var(--radius) - 6px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
  position:relative;
}
.hero-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.06) brightness(.92);
  transform: scale(1.02);
  transition: transform .35s ease;
}
.hero-photo:hover img{ transform: scale(1.06); }
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55));
  pointer-events:none;
}

/* Sections */
section{
  width: min(1120px, 92vw);
  margin: 1.25rem auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 1.75rem;
}
h2{ margin:0 0 .75rem; letter-spacing:-.02em; }
.muted{ color: var(--muted); margin:0; }

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.card{
  grid-column: span 4;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 1.2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 26px 70px rgba(0,0,0,.35); }
@media (max-width: 980px){ .card{ grid-column: span 6; } }
@media (max-width: 640px){ .card{ grid-column: span 12; } }

/* Feature list */
.checklist{
  list-style:none;
  padding:0; margin: .75rem 0 0;
}
.checklist li{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin: .55rem 0;
  color: rgba(234,242,255,.86);
  font-weight: 650;
}
.checklist li span{ color: rgba(34,197,94,.95); font-weight: 950; }

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.gcard{
  margin:0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow2);
  cursor: zoom-in;
}
.gcard img{
  width:100%;
  height: 190px;
  object-fit: cover;
  display:block;
  filter: saturate(1.04) contrast(1.06) brightness(.92);
  transform: scale(1.01);
  transition: transform .25s ease, filter .25s ease;
}
.gcard:hover img{ transform: scale(1.06); }
.gcard figcaption{
  padding: .85rem 1rem;
  font-weight: 850;
  color: rgba(234,242,255,.78);
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 999;
  padding: 1.25rem;
}
.lightbox.open{ display:flex; }
.lightbox-img{
  max-width: min(980px, 94vw);
  max-height: 85vh;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
}
.lightbox-close{
  position: absolute;
  top: 18px;
  right: 18px;
  border-radius: 999px;
  padding: .6rem .85rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: white;
  font-weight: 950;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Forms */
form{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 1.25rem;
}
label{ font-weight: 850; color: rgba(234,242,255,.86); display:block; margin-top:.75rem; }
input, textarea, select{
  width:100%;
  padding: .78rem .9rem;
  margin: .35rem 0 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  outline:none;
  color: rgba(234,242,255,.92);
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}
textarea{ min-height: 120px; resize: vertical; }

/* Banner */
.banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}
.banner strong{ font-weight: 950; }
@media (max-width: 840px){ .banner{ flex-direction: column; align-items:flex-start; } }

/* Footer */
footer{
  padding: 2rem 1rem 2.6rem;
  text-align:center;
  color: rgba(234,242,255,.55);
}



/* --- Home hero (no photos) --- */
.hero-solo{
  padding: 3.2rem 0 1.6rem;
}
.hero-panel{
  position: relative;
  overflow:hidden;
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 320px at 15% 25%, rgba(96,165,250,.26), transparent 60%),
    radial-gradient(520px 340px at 85% 20%, rgba(20,184,166,.22), transparent 60%),
    radial-gradient(540px 360px at 55% 85%, rgba(34,197,94,.18), transparent 62%);
  filter: blur(0px);
  opacity:.95;
  pointer-events:none;
}
.hero-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35)),
    radial-gradient(700px 220px at 50% 0%, rgba(255,255,255,.07), transparent 70%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:1;
  padding: 2.25rem;
}
.hero-badges{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin-top: .85rem;
}
.hero-split{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 980px){
  .hero-split{ grid-template-columns: 1fr; }
}
.stat-stack{
  display:grid;
  gap: .85rem;
}
.stat{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 1rem 1.05rem;
}
.stat .k{ font-weight: 950; font-size: 1.05rem; }
.stat .v{ color: var(--muted); font-weight: 750; margin-top:.15rem; }
.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 1.15rem 0 1.05rem;
}
/* Mini gallery preview */
.mini-gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin-top: 1rem;
}
@media (max-width: 760px){
  .mini-gallery{ grid-template-columns: 1fr; }
}
.mini{
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow2);
}
.mini img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
  filter: saturate(1.04) contrast(1.06) brightness(.92);
  transform: scale(1.01);
  transition: transform .25s ease;
}
.mini:hover img{ transform: scale(1.06); }



/* ===== Cartoon Animated Background ===== */
.cartoon-bg{
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  overflow: hidden;
}

/* floating clouds */
.cloud{
  position: absolute;
  top: 10%;
  width: 160px;
  height: 80px;
  background: rgba(255,255,255,.12);
  border-radius: 100px;
  filter: blur(1px);
  animation: cloudMove 60s linear infinite;
}
.cloud::before,.cloud::after{
  content:"";
  position:absolute;
  background: rgba(255,255,255,.14);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top:-40px;
}
.cloud::before{ left:20px; }
.cloud::after{ left:70px; }

@keyframes cloudMove{
  from{ transform: translateX(-220px); }
  to{ transform: translateX(110vw); }
}

/* floating icons (books, stars) */
.float-icon{
  position:absolute;
  font-size: 2.2rem;
  opacity:.55;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-18px); }
  100%{ transform: translateY(0px); }
}

/* ===== Theme toggle fix ===== */
:root[data-theme="light"]{
  --bg0:#f8fafc;
  --bg1:#eef2ff;
  --bg2:#e0f2fe;
  --text:#0f172a;
  --muted: rgba(15,23,42,.65);
  --glass: rgba(255,255,255,.65);
  --glass2: rgba(255,255,255,.45);
  --border: rgba(15,23,42,.12);
}



}



/* --- Kids sticker background (floating) --- */
.kids-stickers{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .78;
}
.kids-stickers .sticker{
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
  overflow:hidden;
  transform: translate3d(0,0,0);
  animation: sticker-float var(--dur, 22s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.kids-stickers .sticker::before{
  content:"";
  position:absolute;
  inset: -6px;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 105% 105%;
  opacity: .95;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.35));
}
@keyframes sticker-float{
  0%   { transform: translate3d(0,0,0) rotate(-2deg) scale(1); }
  50%  { transform: translate3d(10px,-18px,0) rotate(2deg) scale(1.03); }
  100% { transform: translate3d(0,0,0) rotate(-2deg) scale(1); }
}
@media (max-width: 640px){
  .kids-stickers .sticker{ width: 92px; height: 92px; opacity: .7; }
}
@media (prefers-reduced-motion: reduce){
  .kids-stickers .sticker{ animation:none !important; }
}



/* Pricing grid like screenshot */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
}
.price-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  padding: 1.25rem 1.15rem 1.15rem;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  overflow:hidden;
  min-height: 420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.price-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at 20% 10%, rgba(96,165,250,.20), transparent 60%),
    radial-gradient(420px 220px at 80% 20%, rgba(20,184,166,.16), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.price-card > *{ position: relative; z-index: 1; }

.price-card.featured{
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 26px 90px rgba(0,0,0,.52);
  transform: translateY(-4px);
}
.plan-top{ text-align:left; }
.plan-name{ font-size: 1.25rem; font-weight: 950; }
.plan-sub{ color: var(--muted); font-weight: 800; margin-top:.15rem; }

.plan-price{
  text-align:center;
  margin-top: 1.15rem;
  margin-bottom: .9rem;
}
.price-big{
  font-size: 3.8rem;
  font-weight: 1000;
  letter-spacing: -.04em;
  line-height: 1;
}
.price-small{
  color: rgba(234,242,255,.72);
  font-weight: 850;
  margin-top: .2rem;
}
.rule{
  height:1px;
  background: rgba(255,255,255,.14);
  margin: .9rem 0 1rem;
}
.plan-list{
  margin:0 0 1rem;
  padding-left: 1.05rem;
  color: rgba(234,242,255,.86);
  font-weight: 700;
}
.plan-list li{ margin: .45rem 0; }

/* ===== ULTRA PREMIUM DARK GLASS ===== */
body{
  background: radial-gradient(circle at 20% 20%, #0ea5e922, transparent 40%),
              radial-gradient(circle at 80% 30%, #14b8a622, transparent 40%),
              #020617;
  color:white;
}
nav{
  position:sticky;
  top:0;
  backdrop-filter: blur(16px);
  background: rgba(2,6,23,.75);
  border-bottom:1px solid rgba(255,255,255,.08);
  z-index:999;
}
section, .card{
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
button, .btn{
  background: linear-gradient(135deg,#38bdf8,#14b8a6);
  border:none;
  border-radius:999px;
  padding:12px 22px;
  font-weight:700;
  color:#021018;
}
footer{
  margin-top:60px;
  padding:30px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  background:#020617;
}