/* ============================================================
   Kidosia — shared styles for landing-page variations
   ============================================================ */
:root {
  --navy: #14305a;
  --navy-2: #0f2546;
  --navy-soft: #2b446e;
  --red: #f25e6b;
  --yellow: #f7c233;
  --teal: #2bc4a2;
  --blue: #5cc4f5;
  --violet: #a07cf0;
  --cream: #fff7e6;
  --cream-2: #f4eee2;
  --cream-3: #efe7d6;
  --paper: #faf6ec;
  --ink: #1b1b22;
  --muted: #6b7388;
  --line: #e6dfcd;
  --shadow: 0 14px 40px -22px rgba(20,48,90,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Quicksand', system-ui, sans-serif;
  color: var(--navy);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

h1, h2, h3, h4 { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--navy); margin: 0; line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: 64px; }
h2 { font-size: 44px; }
h3 { font-size: 26px; }
.eyebrow {
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.36em; text-transform: uppercase; color: var(--navy-soft);
}
.lead { font-size: 18px; color: var(--navy-soft); max-width: 56ch; }

/* ===== Logo mark (CSS only — Fredoka 'Kidosia' inside navy circle) ===== */
.logo-mark {
  display: inline-flex; align-items: center; gap: 14px;
}
.logo-mark .circle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy);
  position: relative; flex: 0 0 auto;
}
.logo-mark .circle::before {
  content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 6px; border-radius: 3px;
  background:
    radial-gradient(circle at 12% 50%, var(--red) 0 3px, transparent 3.5px),
    radial-gradient(circle at 38% 50%, var(--yellow) 0 3px, transparent 3.5px),
    radial-gradient(circle at 62% 50%, var(--blue) 0 3px, transparent 3.5px),
    radial-gradient(circle at 88% 50%, var(--violet) 0 3px, transparent 3.5px);
  background-color: transparent;
}
.logo-mark .circle::after {
  content: 'K'; position: absolute; inset: 0; display:flex; align-items:center; justify-content:center;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 34px;
  color: var(--cream); padding-bottom: 3px;
}
.logo-mark .name {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 26px; color: var(--navy);
  letter-spacing: -0.005em; line-height: 1;
}
.logo-mark .name small {
  display: block; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 9px;
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--navy-soft); margin-top: 4px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: var(--cream); box-shadow: 0 8px 0 -2px var(--navy-2); }
.btn-primary:hover { box-shadow: 0 10px 0 -2px var(--navy-2); }
.btn-ghost { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-cream { background: var(--cream); color: var(--navy); }
.btn-wa { background: #25d366; color: white; }
.btn-arrow::after { content: '→'; font-weight: 600; transition: transform 0.2s; }
.btn:hover .btn-arrow::after { transform: translateX(2px); }

/* ===== Bead row helper ===== */
.bead-row { display: inline-flex; gap: 8px; }
.bead-row span { width: 12px; height: 12px; border-radius: 50%; }

/* ===== Sections ===== */
section { padding: 96px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head .eyebrow { display: block; margin-bottom: 14px; }
.section-head h2 { margin-bottom: 14px; }

/* ===== Cards ===== */
.card {
  background: white; border-radius: 24px; padding: 28px;
  border: 1px solid var(--line); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* ===== Pills/chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--cream-2); color: var(--navy);
}
.chip.coming { background: #f6efde; color: var(--navy-soft); }
.chip.live { background: var(--navy); color: var(--cream); }

/* ===== Forms ===== */
input, select, textarea {
  font-family: inherit; font-size: 15px; color: var(--navy);
  background: white; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px 16px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); border-color: var(--navy); }
label { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--navy); display:block; margin-bottom: 6px; }

/* ===== Top bar (lang + announce) ===== */
.topbar {
  background: var(--navy); color: var(--cream);
  font-size: 13px; padding: 10px 0; font-weight: 600;
  position: sticky; top: 0; z-index: 51;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar .announce { display: flex; align-items: center; gap: 10px; }
.topbar .announce .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.lang-toggle { display: inline-flex; background: rgba(255,247,230,0.12); border-radius: 999px; padding: 3px; }
.lang-toggle button { padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 12px; color: var(--cream); opacity: 0.6; }
.lang-toggle button.active { background: var(--cream); color: var(--navy); opacity: 1; }

/* ===== Nav ===== */
.nav { padding: 18px 0; background: var(--paper); border-bottom: 1px solid var(--line); position: relative; }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav ul { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: 15px; }
.nav ul a:hover { color: var(--red); }

/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px; flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block; width: 22px; height: 2.5px;
  background: var(--navy); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile-only CTA inside dropdown */
.nav-cta-mobile { display: none; }

@media (max-width: 860px) {
  .nav { padding: 10px 0; }
  .nav .logo-img { height: 64px; }
  .nav-toggle { display: flex; }

  /* Hide desktop links + button */
  .nav ul { display: none; }
  .nav .container > .btn { display: none; }

  /* Dropdown panel */
  .nav ul.nav-open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--paper); border-bottom: 2px solid var(--line);
    padding: 8px 0 16px;
    box-shadow: 0 12px 32px -8px rgba(20,48,90,.18);
    animation: navDrop .2s ease;
  }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

  .nav ul li a {
    display: block; padding: 14px 28px;
    font-size: 16px; font-weight: 600; color: var(--navy);
    border-bottom: 1px solid var(--line);
  }
  .nav ul li:last-child a { border-bottom: none; }
  .nav ul li a:hover { background: var(--cream); color: var(--red); }

  /* Show Apply Now inside dropdown */
  .nav-cta-mobile {
    display: block; margin: 12px 28px 0;
    text-align: center; padding: 14px 20px; border-radius: 999px;
    background: var(--navy); color: var(--cream) !important;
    font-family: 'Fredoka', sans-serif; font-size: 17px; font-weight: 600;
    border-bottom: none !important;
  }
  .nav-cta-mobile:hover { background: var(--navy-2) !important; color: var(--cream) !important; }
}

/* ===== Topbar responsive ===== */
@media (max-width: 560px) {
  .topbar { font-size: 11.5px; padding: 8px 0; }
  .topbar .container { gap: 10px; }
  .topbar .announce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lang-toggle button { padding: 4px 9px; font-size: 11px; }
}
@media (max-width: 400px) {
  .topbar .announce .dot { display: none; }
}

/* ===== Footer responsive ===== */
@media (max-width: 720px) {
  footer.foot .grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }
}
@media (max-width: 560px) {
  /* Logo + tagline full width on top, link sections in a 2-col grid below */
  footer.foot .grid { grid-template-columns: 1fr 1fr !important; gap: 30px 20px; }
  footer.foot .grid > div:first-child { grid-column: 1 / -1; }
  footer.foot { padding: 48px 0 28px; }
  footer.foot .bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* Follow section: full width, centered, small icon-only social links */
  footer.foot .grid > .foot-follow { grid-column: 1 / -1; text-align: center; margin-top: 4px; }
  footer.foot .foot-follow ul { flex-direction: row; justify-content: center; gap: 24px; margin-top: 10px; }
  footer.foot .foot-follow li a { display: inline-flex; opacity: 0.85; }
  footer.foot .foot-follow li a:hover { opacity: 1; color: var(--yellow); }
  footer.foot .foot-follow .soc-icon { display: inline-flex; width: 20px; height: 20px; }
  footer.foot .foot-follow .soc-label { display: none; }
}

/* Social icons hidden on desktop (text labels show instead) */
.foot-follow .soc-icon { display: none; }

/* ===== Footer ===== */
footer.foot { background: var(--navy); color: var(--cream); padding: 64px 0 32px; }
footer.foot a { opacity: 0.85; }
footer.foot a:hover { opacity: 1; color: var(--yellow); }
footer.foot .grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
footer.foot h4 { color: var(--cream); font-size: 14px; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 18px; font-family: 'Quicksand', sans-serif; font-weight: 700; }
footer.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
footer.foot .bottom { border-top: 1px solid rgba(255,247,230,0.15); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 13px; opacity: 0.7; }

/* utility */
.flex { display: flex; }
.center { display: flex; align-items: center; justify-content: center; }
.col { display: flex; flex-direction: column; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-40 { gap: 40px; }
[hidden] { display: none !important; }