/* style.css */
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
section, h2, h3, [id] { scroll-margin-top: 20px; }

:root {
  --turquoise: #3fd5c8;
  --pink: #ffd6e7;
  --white: #ffffff;
  --ink: #101828;
  --muted: #475467;
  --bg: #0b0f14;
  --card: #11161d;
  --neon: #00ffe0;
  --radius: 16px;
  --shadow: 0 0 12px rgba(0,255,224,.25);
}

body {
  margin: 0;
  font-family: "Inter", "Noto Sans Georgian", sans-serif;
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
}

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,15,20,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,255,224,.15);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0; /* moved lower for centering */
}

.brand {
  font-weight: 800;
  color: var(--neon);
  text-shadow: 0 0 8px rgba(0,255,224,.5);
}

nav a {
  color: var(--white);
  text-decoration: none;
  margin-left: 1rem;
  font-weight: 600;
}

.hero {
  background: linear-gradient(180deg, rgba(0,255,224,.1) 0%, transparent 100%);
  padding: 72px 0 48px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 48px);
  color: var(--neon);
  text-shadow: 0 0 12px rgba(0,255,224,.5);
}

section { padding: 56px 0; }

.card {
  background: #fffbe6;             /* very light yellow */
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  padding: 22px;
  border: 1px solid rgba(0,0,0,.08);
  color: #333;                     /* dark text for readability */
}

.btn-primary {
  background: var(--neon);
  color: #000;
  border-radius: 999px;
  padding: .8rem 1.2rem;
  font-weight: 600;
  box-shadow: 0 0 16px rgba(0,255,224,.4);
}

.btn-primary:hover { filter: brightness(0.9); }

footer {
  padding: 20px 0;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid rgba(0,255,224,.15);
}

.grid-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch !important; /* beats inline 'start' */
}

.grid-cards .card {
  display: flex;
  flex-direction: column; /* so button section stays at bottom */
}

.grid-author {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch !important; /* force equal heights */
}

.grid-author .card {
  display: flex;
  flex-direction: column;
}

.grid-author > div {
  display: flex;
}

.grid-author > div > .card {
  flex: 1;
  display: flex;
  flex-direction: column; /* keep inner layout vertical */
}

/* Pricing: equal heights + bottom-aligned CTA buttons */
#pricing .grid.grid-3 {
  align-items: stretch;                 /* make columns equal height */
}

#pricing .grid.grid-3 > .card {
  display: flex;
  flex-direction: column;               /* vertical layout inside card */
}

#pricing .grid.grid-3 > .card > ul.clean {
  flex: 1 1 auto;                       /* fills remaining space above CTA */
  list-style: none;                     /* already used, repeat is ok */
  padding: 0;
  /* keep your existing margin from inline style; flex works regardless */
}

/* The buy button sits at the bottom now */
#pricing .grid.grid-3 > .card > a.btn {
  margin-top: auto;                     /* key line */
  align-self: flex-start;               /* keep button left-aligned */
}

/* Courses section: equal height cards with bottom-aligned CTA */
#courses .grid-cards {
  align-items: stretch !important; /* override inline start */
}

#courses .grid-cards .card {
  display: flex;
  flex-direction: column;
}

/* make the UL flexible so it fills space */
#courses .grid-cards .card > ul.clean {
  flex: 1 1 auto;
  margin: 12px 0 16px; /* keep spacing */
}

/* push CTA container to bottom */
#courses .grid-cards .card > div:last-child {
  margin-top: auto !important;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.text-link {
  color: blue;
  text-decoration: underline;
}

/* Reviews layout */
#reviews { padding: 56px 0; }
.reviews-wrapper { position: relative; overflow: hidden; }
.reviews-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.review-card {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 10px;
  border-radius: 12px;
  background: #fffbe6;             /* light yellow */
  color: #333;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);

  display: flex;
  flex-direction: column;
}

.review-card p {
  font-style: italic;
  margin: 0 0 8px;
}
.review-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;           /* push footer to the bottom */
}

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #eee; }

/* Arrow buttons */
.reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;              /* was 38px */
  height: 48px;             /* was 38px */
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #333;
  font-size: 26px;          /* was 22px */
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease;
  z-index: 2;
}
.reviews-arrow:hover { transform: translateY(-50%) scale(1.05); box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.reviews-arrow:active { transform: translateY(-50%) scale(0.98); }
.reviews-arrow.prev { left: 0; }
.reviews-arrow.next { right: 0; }

/* Mobile: still slightly smaller */
@media (max-width: 768px) {
  .reviews-arrow {
    width: 40px; 
    height: 40px;
    font-size: 22px;
  }
}

/* =========================
   MOBILE LAYOUT (<= 860px)
   ========================= */
@media (max-width: 860px) {
  /* Global rhythm */
  section { padding: 32px 0; }
  .container { width: min(720px, 92%); }

  /* Typography scale-down */
  h1 { font-size: clamp(24px, 6vw, 30px); line-height: 1.2; }
  h2 { font-size: 22px; }
  .price { font-size: 28px; }

  /* Buttons: easier taps */
  .btn, .btn-primary { width: 100%; justify-content: center; padding: 0.9rem 1rem; }

  /* Hero grid stacks */
  .hero .grid, .grid.grid-2, .grid-cards, .grid-author { 
    display: grid;
    grid-template-columns: 1fr !important; /* force single column */
    gap: 16px;
  }

  /* Pricing grid stacks */
  #pricing .grid.grid-3 {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
    align-items: stretch;
  }

  /* Card spacing */
  .card { padding: 18px; }

  /* Header: turn into hamburger layout */
  header .nav {
    position: relative;
    padding: 0.9rem 0;
  }


  .nav-links a {
    padding: 10px 6px;
    margin: 0;
    border-radius: 8px;
  }
  .nav-links a:active { background: rgba(255,255,255,.06); }

  /* Open state */
  .nav-links.open { display: flex; }

  /* Keep author/support cards nice */
  .grid-author > div { display: block; }
  .grid-author > div > .card { display: flex; }

  /* Courses CTA alignment on mobile stays intact */
  #courses .grid-cards .card > div:last-child { margin-top: auto !important; }
}

/* === DESKTOP DEFAULTS (must appear BEFORE the mobile block) === */
.nav-toggle { 
  display: none;                 /* hide hamburger on desktop */
}

.nav-links { 
  display: flex;                 /* show full nav on desktop */
  gap: 1rem;
  align-items: center;
}

/* ... your other desktop styles ... */


@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 20px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 8px;
    background: #fff;              /* bright background */
    color: #333;                   /* dark icon/text */
    margin-left: auto;
    z-index: 5;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    right: 16px;
    left: auto;
    background: #ffffff;           /* bright card background */
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    display: none !important;
    flex-direction: column;
    padding: 10px 14px;
    width: 220px;
    max-width: 80%;
  }
  .nav-links.open {
    display: flex !important;
  }

  .nav-links a {
    padding: 10px;
    margin: 0;
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    color: #333;                  /* normal link color */
    text-decoration: none;
    transition: background 0.2s;
  }
  .nav-links a:hover {
    background: #f5f5f5;          /* light hover */
  }
}

/* default: light yellow for all cards */
.card {
  background: #fffbe6;
  color: #333;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* exception: keep white background for specific cards */
.card-diff {
  background: #f2ffe0 !important;
}

/* Pricing cards dark blue theme */
#pricing .card {
  background: #0a1a3a !important;   /* dark navy blue */
  color: #fff !important;           /* white text */
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

#pricing .card h3,
#pricing .card p,
#pricing .card .sub,
#pricing .card .save,
#pricing .card li span {
  color: #fff !important;
}

#pricing .card .badge {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 13px;
}

#pricing .card .price {
  color: #00ffe0 !important;  /* accent turquoise on dark */
  font-weight: 700;
}

#pricing .card .was {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: line-through;
}

#pricing .card .tick {
  color: #00ffe0;             /* turquoise ticks */
}

/* Video embed responsive wrapper */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  margin-top: 18px;
}
.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
}