/* =========================
   YALUMY VISUAL IDENTITY
   ========================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Fredoka:wght@500;600;700&display=swap');


:root {

  /* Main colors */
  --bg: #fffdf3;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;

  --text: #17181d;
  --muted: #72727d;

  --primary: #202a8f;
  --primary-hover: #161e72;

  --primary-soft: #ecebff;

  --yellow: #fff4c7;
  --lavender: #e9e5ff;

  --border: rgba(28, 31, 55, 0.08);

  --shadow:
    0 16px 45px rgba(32, 42, 143, 0.08);

  --dot-color:
    rgba(90, 90, 100, 0.16);
}


/* =========================
   DARK MODE
   ========================= */

body.dark {

  --bg: #10121d;

  --surface:
    rgba(27, 29, 44, 0.93);

  --surface-solid: #1a1c29;

  --text: #f8f7f2;

  --muted: #a9a9b5;

  --primary: #7e87ff;

  --primary-hover: #969dff;

  --primary-soft:
    rgba(126, 135, 255, 0.14);

  --yellow:
    rgba(255, 232, 130, 0.12);

  --lavender:
    rgba(174, 165, 255, 0.12);

  --border:
    rgba(255, 255, 255, 0.08);

  --shadow:
    0 18px 50px rgba(0,0,0,0.35);

  --dot-color:
    rgba(255,255,255,0.08);
}


/* =========================
   RESET
   ========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {

  font-family:
    "DM Sans",
    sans-serif;

  color: var(--text);

  min-height: 100vh;

  background-color: var(--bg);

  background-image:
    radial-gradient(
      circle,
      var(--dot-color) 5px,
      transparent 5.5px
    );

  background-size:
    40px 40px;

  transition:
    background-color .35s ease,
    color .35s ease;

}


/* subtle creamy glow */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 15% 15%,
      rgba(255, 239, 175, 0.22),
      transparent 30%
    ),

    radial-gradient(
      circle at 85% 20%,
      rgba(205, 200, 255, 0.18),
      transparent 30%
    );

  z-index: -1;
}


/* =========================
   CONTAINER
   ========================= */

.container {

  width:
    min(1180px, 92%);

  margin: auto;

}


/* =========================
   NAVBAR
   ========================= */

.navbar {

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding:
    28px 0;

}


.logo {

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    1.45rem;

  font-weight:
    700;

  letter-spacing:
    0.02em;

}


.logo span {
  color: var(--primary);
}


.nav-links {

  display: flex;

  align-items: center;

  gap: 28px;

}


.nav-links a {

  color:
    var(--muted);

  text-decoration:
    none;

  font-weight:
    700;

  transition:
    .2s;

}


.nav-links a:hover {

  color:
    var(--primary);

}


/* =========================
   THEME BUTTON
   ========================= */

.theme-toggle {

  border:
    1px solid var(--border);

  background:
    var(--primary);

  color:
    white;

  width:
    44px;

  height:
    44px;

  border-radius:
    50%;

  cursor:
    pointer;

  box-shadow:
    var(--shadow);

  transition:
    .25s;

}


.theme-toggle:hover {

  transform:
    translateY(-2px)
    rotate(5deg);

}


/* =========================
   HERO
   ========================= */

.hero {

  position:
    relative;

  margin-top:
    25px;

  padding:
    75px 55px;

  text-align:
    left;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    34px;

  box-shadow:
    var(--shadow);

  overflow:
    hidden;

}


.hero::after {

  content: "";

  position:
    absolute;

  width:
    300px;

  height:
    300px;

  right:
    -80px;

  top:
    -80px;

  border-radius:
    50%;

  background:
    var(--yellow);

  opacity:
    .65;

  z-index:
    0;

}


.hero > * {

  position:
    relative;

  z-index:
    1;

}


.hero-badge {

  display:
    inline-block;

  padding:
    8px 14px;

  margin-bottom:
    22px;

  border-radius:
    999px;

  background:
    var(--yellow);

  color:
    var(--primary);

  font-size:
    .78rem;

  font-weight:
    800;

  letter-spacing:
    .08em;

}


.hero h1 {

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    clamp(
      2.7rem,
      7vw,
      5.8rem
    );

  line-height:
    1;

  letter-spacing:
    -0.035em;

  max-width:
    850px;

}


.hero h1 span {

  color:
    var(--primary);

}


.hero p {

  max-width:
    620px;

  margin-top:
    25px;

  color:
    var(--muted);

  font-size:
    1.08rem;

  line-height:
    1.8;

}


/* =========================
   SECTIONS
   ========================= */

.section {

  padding:
    55px 0;

}


.section-title {

  margin-bottom:
    28px;

}


.section-title h2 {

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    2rem;

  letter-spacing:
    -0.02em;

}


.section-title p {

  margin-top:
    8px;

  color:
    var(--muted);

}


/* =========================
   GRID
   ========================= */

.grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(230px, 1fr)
    );

  gap:
    18px;

}


/* =========================
   CARDS
   ========================= */

.card {

  position:
    relative;

  display:
    block;

  padding:
    25px;

  min-height:
    190px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    24px;

  box-shadow:
    var(--shadow);

  text-decoration:
    none;

  color:
    var(--text);

  overflow:
    hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.card::before {

  content: "";

  position:
    absolute;

  width:
    90px;

  height:
    90px;

  right:
    -28px;

  top:
    -30px;

  border-radius:
    50%;

  background:
    var(--lavender);

  opacity:
    .75;

}


.card:nth-child(even)::before {

  background:
    var(--yellow);

}


.card:hover {

  transform:
    translateY(-7px);

  box-shadow:
    0 22px 55px
    rgba(32,42,143,.13);

}


.card-icon {

  position:
    relative;

  z-index:
    1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    52px;

  height:
    52px;

  border-radius:
    16px;

  background:
    var(--yellow);

  font-size:
    1.65rem;

  margin-bottom:
    24px;

}


.card:nth-child(even)
.card-icon {

  background:
    var(--lavender);

}


.card h3 {

  position:
    relative;

  z-index:
    1;

  font-family:
    "Fredoka",
    sans-serif;

  font-size:
    1.25rem;

  margin-bottom:
    8px;

}


.card p {

  position:
    relative;

  z-index:
    1;

  color:
    var(--muted);

  line-height:
    1.6;

  font-size:
    .94rem;

}


/* =========================
   BUTTONS
   ========================= */

.btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    14px 22px;

  border-radius:
    15px;

  font-weight:
    800;

  text-decoration:
    none;

  transition:
    .25s;

}


.btn-primary {

  background:
    var(--primary);

  color:
    white;

}


.btn-primary:hover {

  transform:
    translateY(-3px);

  background:
    var(--primary-hover);

}


/* =========================
   PDF RESOURCE
   ========================= */

.resource-card {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    22px 24px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    22px;

  box-shadow:
    var(--shadow);

}


.resource-info {

  display:
    flex;

  align-items:
    center;

  gap:
    16px;

}


.resource-icon {

  width:
    55px;

  height:
    55px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    16px;

  background:
    var(--lavender);

  font-size:
    1.6rem;

}


.resource-text h3 {

  font-family:
    "Fredoka",
    sans-serif;

}


.resource-text p {

  margin-top:
    4px;

  color:
    var(--muted);

}


.resource-tag {

  display:
    inline-block;

  margin-top:
    8px;

  padding:
    5px 9px;

  border-radius:
    999px;

  background:
    var(--yellow);

  color:
    var(--primary);

  font-size:
    .72rem;

  font-weight:
    800;

}


.resource-open {

  text-decoration:
    none;

  padding:
    11px 16px;

  border-radius:
    13px;

  background:
    var(--primary);

  color:
    white;

  font-weight:
    800;

}


/* =========================
   FOOTER
   ========================= */

footer {

  padding:
    65px 0 35px;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    .9rem;

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

  body {

    background-size:
      32px 32px;

  }


  .nav-links a {

    display:
      none;

  }


  .hero {

    padding:
      50px 28px;

    border-radius:
      26px;

  }


  .hero h1 {

    font-size:
      3rem;

  }


  .resource-card {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .resource-open {

    width:
      100%;

    text-align:
      center;

  }

}