/* ==========================================================================
   Projukti Team — UK Driving Theory Test landing page
   Design tokens derived from Figma "UK-D-Landingpage" (file r8d630y4jwoxSw7eAccZI7).
   The file defines no Figma variables, so raw hex values are lifted into
   custom properties here and referenced by every component below.
   ========================================================================== */

:root {
  /* ---- surfaces ---- */
  --bg-page:        #111113;
  --bg-dark:        #0d0d0d;
  --bg-card:        #1d1f20;
  --bg-icon:        #27364a;
  --bg-footer:      #020617;
  --bg-pill:        #151a1e;
  --bg-carousel-btn:#1b2532;

  /* ---- borders ---- */
  --line:           #333333;
  --line-soft:      #2f2f2f;
  --line-module:    #373c42;
  --line-blue:      #284c98;
  --line-blue-open: #2c4e83;
  --line-green:     #67b32f;
  --line-card-blue: #0b344c;
  --line-header:    #4b4b4b;
  --line-social:    #303030;

  /* ---- brand ---- */
  --blue:           #1350ff;
  --blue-light:     #6b91ff;
  --blue-accent:    #88baff;
  --blue-link:      #5da6fd;
  --blue-solid:     #2263ee;
  --blue-ring:      #2c65ff;
  --green:          #2ccb8a;
  --green-tag:      #2bd8aa;
  --green-tag-bg:   #022b22;
  --green-tag-line: #064739;
  --red:            #f87171;
  --amber:          #ffe16c;
  --orange:         #ff7916;

  /* ---- text ---- */
  --text:           #ffffff;
  --text-nav:       #eeeef2;
  --text-nav-dim:   #9e9e9f;
  --text-muted:     #808a8f;
  --text-footer:    #49537e;
  --text-heading-2: #d9d9d9;

  /* ---- type ---- */
  --font: 'Anek Bangla', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- layout ---- */
  --container: 1140px;
  --gutter: 24px;
  --section-gap: 45px;      /* two adjacent sections => 90px, per Figma */
  --radius-card: 21px;
  --radius-pill: 55px;

  --grad-primary: linear-gradient(180deg, var(--blue-light) 0%, var(--blue) 97.321%);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--blue-accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--blue);
  color: #fff;
}
.skip-link:focus { left: 12px; top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }

.section--dark {
  background: var(--bg-dark);
  padding-block: 90px;
  margin-block: var(--section-gap);
}

/* ==========================================================================
   Shared components
   ========================================================================== */

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn img { flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  height: 56px;
  padding-inline: 24px;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  color: #fff;
  font-size: 16px;
}
.btn--primary:hover { box-shadow: 0 10px 28px rgba(19, 80, 255, .45); }
.btn--block { width: 100%; }

.btn--order {
  height: 77px;
  min-width: 242px;
  padding-inline: 23px;
  border-radius: 47px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 28.8px;
}
.btn--order:hover { box-shadow: 0 12px 30px rgba(19, 80, 255, .4); }

/* ---- pills / eyebrows ---- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--blue-accent);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--green {
  height: 53px;
  padding-inline: 25px;
  border: 1px solid var(--line-green);
  border-radius: 43px;
  background: var(--bg-pill);
}
.pill--blue {
  padding: 5px 12px;
  border: 1px solid var(--line-blue);
  border-radius: 22px;
}

/* ---- section headings ---- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  max-width: 684px;
  margin-inline: auto;
  text-align: center;
}
.section-head--wide { max-width: 709px; }

.section-title {
  font-size: 45px;
  line-height: 58px;
  font-weight: 700;
}
.section-title--sm { font-size: 35px; line-height: 46px; font-weight: 600; }

.section-sub { font-size: 18px; line-height: 24px; }
.section-sub--narrow { max-width: 407px; font-size: 16px; line-height: 27px; }

.stars { display: inline-flex; align-items: center; gap: 3.467px; }

/* <picture> wrappers (webp + fallback) are left at their default display.
   Measured at every breakpoint: the wrapper changes no geometry, while
   display:contents promotes each <img> to a flex item and adds 36px on
   mobile. The two selectors that named an image by position rather than by
   class — .review-video > img:first-child and .social-card > img — became
   .review-video__shot and .social-card__icon, since neither could match
   through a wrapper. */

/* ==========================================================================
   Offer bar
   ========================================================================== */

.offer-bar {
  position: relative;
  height: 128px;
  background: linear-gradient(180deg, #0e0602 4.688%, #cd5314 74.709%, #fcba5a 100.39%);
}
.offer-bar[hidden] { display: none; }

.offer-bar__inner {
  height: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
}

.offer-bar__title { font-size: 24.8px; line-height: 33.7px; font-weight: 500; }
.offer-bar__sub   { font-size: 17.4px; line-height: 20.7px; font-weight: 600; }
.offer-bar__sub s { font-size: 13px; }
.offer-bar__sub strong { color: var(--orange); font-weight: 600; }

.countdown { display: flex; align-items: flex-start; gap: 6.5px; }
.countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.countdown__box {
  width: 34.9px;
  height: 34.9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.088px solid var(--amber);
  border-radius: 6.34px;
  background: rgba(0, 0, 0, .22);
  color: var(--amber);
  font-size: 22.2px;
  line-height: 22.2px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.countdown__label { color: var(--amber); font-size: 11.96px; line-height: 18.1px; font-weight: 500; }
.countdown__sep {
  color: var(--amber);
  font-size: 22.2px;
  line-height: 34.9px;
  font-weight: 600;
}

.offer-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.3px;
  width: 144.65px;
  height: 50px;
  border-radius: 8.7px;
  background: var(--amber);
  color: #3f3202;
  font-size: 17.4px;
  font-weight: 500;
  transition: filter .18s ease;
}
.offer-bar__cta:hover { filter: brightness(1.06); }
.offer-bar__cta img { width: 26px; height: 26px; }

.offer-bar__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  opacity: .85;
}
.offer-bar__close:hover { opacity: 1; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 110;  /* above the mobile menu overlay (100) so the logo and the burger stay visible while it is open */
  height: 85px;
  background: rgba(51, 51, 53, .7);
  backdrop-filter: blur(19px);
  -webkit-backdrop-filter: blur(19px);
  border-bottom: 1px solid var(--line-header);
}

.site-header__inner {
  height: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header__logo img { width: 140px; height: 44px; object-fit: contain; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-inline: auto;
  font-size: 16px;
  font-weight: 600;
}
.site-nav a {
  position: relative;
  color: var(--text-nav-dim);
  padding-block: 8px;
  transition: color .18s ease;
}
.site-nav a:hover { color: var(--text-nav); }
.site-nav a.is-active { color: var(--text-nav); }
.site-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  width: 46px;
  height: 1px;
  background: #fff;
}

.site-header__cta {
  height: 40px;
  width: 174px;
  padding-inline: 13px;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  color: #fff;
  font-size: 14px;
}
.site-header__cta img { width: 26px; height: 26px; }

/* ---- burger / close toggle ----
   Three CSS bars instead of a 30px icon: smaller and quieter at rest, and it
   rotates into an X when the menu opens. It sits above the overlay (z 130 vs
   100) so one button drives both directions. */
.burger {
  display: none;                 /* switched on in the <=1024px block */
  margin-left: auto;
  position: relative;
  z-index: 130;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.burger:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-header); }
.burger:active { transform: scale(.93); }

.burger__box { position: relative; width: 20px; height: 14px; }
.burger__bar {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--text-nav);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .18s ease, width .25s ease;
}
.burger__bar:nth-child(1) { top: 0;   width: 20px; }
.burger__bar:nth-child(2) { top: 6px; width: 13px; }
.burger__bar:nth-child(3) { top: 12px; width: 20px; }
/* the short middle bar runs out to full width on hover */
.burger:hover .burger__bar:nth-child(2) { width: 20px; }

/* open: the outer bars meet in the middle and cross, the middle one slides out */
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.burger[aria-expanded="true"]:hover .burger__bar:nth-child(2) { width: 13px; }

/* ==========================================================================
   Mobile menu
   ========================================================================== */

.mobile-menu {
  position: fixed;
  /* The panel hangs off the bottom of the header rather than covering the
     screen, so the logo, the burger and the offer-bar countdown all stay put.
     main.js measures the header live, because its bottom edge moves with the
     offer bar and with scroll position. */
  inset: var(--menu-top, 85px) 0 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 16px 28px 107px;
  background: var(--bg-page);
  animation: menu-in .22s ease;
}
.mobile-menu[hidden] { display: none; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mobile-menu__nav { margin-top: 24px; }
.mobile-menu__nav a {
  display: block;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  font-size: 20px;
  font-weight: 500;
}
.mobile-menu__nav a:last-child { border-bottom: 0; }

.mobile-menu__cta { margin-top: auto; height: 70px; font-size: 18px; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: #04123c url('../assets/img/hero-bg.jpg') center / cover no-repeat;
  background-image: image-set(url('../assets/img/hero-bg.webp') type('image/webp'),
                              url('../assets/img/hero-bg.jpg') type('image/jpeg'));
}

.hero__inner {
  max-width: 1005px;
  min-height: 560px;
  margin-inline: auto;
  padding: 54px var(--gutter) 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hero__copy { padding-top: 81px; max-width: 684px; }

.hero__title {
  margin-top: 15px;
  font-size: 45px;
  line-height: 58px;
  font-weight: 700;
}

.hero__lead {
  margin-top: 10px;
  max-width: 446px;
  font-size: 16px;
  line-height: 24px;
}

.hero__actions { margin-top: 23px; display: flex; align-items: center; gap: 12px; }

.rating-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 77px;
  padding: 10px;
  border: 1px solid #5e78af;
  border-radius: 66px;
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.rating-pill__badges { display: flex; align-items: center; }
.rating-pill__badges img { width: 39px; height: 39px; }
.rating-pill__badges img:not(:last-child) { margin-right: -9px; }
.rating-pill__meta { display: flex; flex-direction: column; gap: 2px; }
.rating-pill__score { display: flex; align-items: center; gap: 6px; font-size: 18px; line-height: 15px; }
.rating-pill__count { font-size: 18px; line-height: 23px; }
.rating-pill__count strong { font-weight: 600; }

.hero__video {
  position: relative;
  flex: none;
  width: 257.6px;
  aspect-ratio: 9 / 16;
  border: 6px solid rgba(255, 255, 255, .28);
  border-radius: 23px;
  overflow: hidden;
  background: #000 url('../assets/img/hero-card.jpg') center / cover no-repeat;
  background-image: image-set(url('../assets/img/hero-card.webp') type('image/webp'),
                              url('../assets/img/hero-card.jpg') type('image/jpeg'));
}
.hero__video-frame { display: block; width: 100%; height: 100%; border: 0; }

/* sound toggle overlay — sits clear of YouTube's own control bar */
.sound-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 11px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
.sound-toggle:hover { background: rgba(0, 0, 0, .8); border-color: rgba(255, 255, 255, .5); }
.sound-toggle__icon { display: inline-flex; }
/* muted state shows the cross; unmuted swaps it for the waves */
.sound-toggle__waves { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__muted { display: none; }
.sound-toggle[aria-pressed="true"] .sound-toggle__waves { display: inline; }

/* ==========================================================================
   Benefits ("একটি ড্রাইভিং লাইসেন্স …")
   ========================================================================== */

.benefits__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 683fr 427fr;
  gap: 30px;
  align-items: start;
}

/* gradient-edged card shell */
.gcard { position: relative; }
.gcard::before {
  content: '';
  position: absolute;
  inset: 1px 1px -5px;
  border-radius: 22px;
  background: linear-gradient(90deg, #3748a3 0%, #14a8f6 100%);
}
.gcard__inner {
  position: relative;
  border: 1px solid var(--line-card-blue);
  border-radius: 22px;
  background: linear-gradient(180deg, #000 70.192%, rgba(0, 0, 0, .76) 100%);
  backdrop-filter: blur(21px);
  -webkit-backdrop-filter: blur(21px);
}

.benefits__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 11px; }

.benefit { display: flex; flex-direction: column; }
.benefit__img {
  width: 100%;
  height: 181px;
  object-fit: cover;
  border: 1px solid var(--line-card-blue);
  border-radius: 11px 11px 0 0;
}
.benefit__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 16px;
  border: 1px solid var(--line-card-blue);
  border-top: 0;
  border-radius: 0 0 11px 11px;
}
.benefit__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  line-height: 23px;
  font-weight: 600;
}
.benefit__title--bad  { color: var(--red); }
.benefit__title--good { color: var(--green); }
.benefit__title img { width: 28px; height: 28px; flex: none; }
.benefit__body p { font-size: 16px; line-height: 24px; }
.benefit__body p + p { margin-top: -1px; }

.requirements { padding: 20px; text-align: center; }
.requirements__devices { position: relative; padding-top: 7px; }
.requirements__laptop { width: 100%; max-width: 378.6px; height: auto; margin-inline: auto; }
.requirements__phone {
  position: absolute;
  right: 4%;
  top: 14px;
  width: 60.5px;
  height: 125.2px;
}
.requirements__title { margin-top: 23px; font-size: 22px; line-height: 23px; font-weight: 600; }
.requirements__text { margin-top: 17px; font-size: 16px; line-height: 24px; }

/* ==========================================================================
   Money-back guarantee
   ========================================================================== */

.guarantee {
  padding: 46px 24px 54px;
  border: 1px solid #06582f;
  border-radius: 38px;
  background: #063 url('../assets/img/guarantee-bg.jpg') center / cover no-repeat;
  background-image: image-set(url('../assets/img/guarantee-bg.webp') type('image/webp'),
                              url('../assets/img/guarantee-bg.jpg') type('image/jpeg'));
  text-align: center;
}
.guarantee__badge { width: 170px; height: 170px; margin-inline: auto; }
.guarantee__title { margin-top: 10px; font-size: 45px; line-height: 58px; font-weight: 700; }
.guarantee__text { max-width: 535px; margin: 12px auto 0; font-size: 18px; line-height: 24px; }

/* ==========================================================================
   Why us — feature grid
   ========================================================================== */

.feature-grid {
  margin-top: 102px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  padding: 25px 29px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-card);
  transition: border-color .2s ease, transform .2s ease;
}
.feature:hover { border-color: var(--line-blue); transform: translateY(-3px); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 14px;
  background: var(--bg-icon);
}
.feature__icon img { width: 42px; height: 42px; }
.feature h3 { font-size: 22px; font-weight: 600; }
.feature p { font-size: 16px; line-height: 24px; }

/* ==========================================================================
   Problem / solution + demo video
   ========================================================================== */

.solution__grid {
  display: grid;
  grid-template-columns: 653fr 428fr;
  gap: 56px;
  align-items: start;
}

.solution__title { font-size: 35px; line-height: 46px; font-weight: 600; }

.problem-list { margin-top: 25px; display: flex; flex-direction: column; gap: 16px; }
.problem-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-card);
  font-size: 18px;
  line-height: 27px;
}
.problem-list img { width: 36px; height: 36px; flex: none; }

.solution__answer { margin-top: 29px; }
.solution__answer h3 { color: var(--green); font-size: 29px; line-height: 34px; font-weight: 600; }
.solution__answer p { margin-top: 15px; max-width: 407px; font-size: 16px; line-height: 27px; }

/* the three chips sit on one line in the Figma frame */
.tag-row { margin-top: 15px; display: flex; flex-wrap: nowrap; gap: 10px; }
.tag {
  padding: 8px 14.5px;
  border: 1px solid var(--green-tag-line);
  border-radius: 25px;
  background: var(--green-tag-bg);
  color: var(--green-tag);
  font-size: 16px;
  font-weight: 500;
}

.solution .btn--primary { margin-top: 30px; }

.solution__media { position: relative; padding-top: 26.8px; align-self: center; }
.solution__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 53.4px;
  padding-inline: 29.9px;
  border: 4.216px solid var(--bg-page);
  border-radius: 42.2px;
  background: var(--blue-solid);
  font-size: 22.5px;
  font-weight: 600;
  white-space: nowrap;
}

.video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 35px;
  overflow: hidden;
  background: #000;
}
.video-card__facade {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
.video-card__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video-card__facade:hover .video-card__thumb { transform: scale(1.03); }
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96.3px;
  height: 96.3px;
  transition: transform .2s ease;
}
.video-card__facade:hover .video-card__play { transform: translate(-50%, -50%) scale(1.08); }
.video-card__frame { display: block; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Curriculum
   ========================================================================== */

.curriculum__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 653fr 457fr;
  gap: 30px;
  align-items: start;
}

.mock-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 53px;
  padding: 8px 16px;
  border: 1px solid var(--line-module);
  border-radius: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.mock-banner:hover { border-color: var(--blue-link); background: rgba(93, 166, 253, .06); }
.mock-banner__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-link);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
/* the mock-test glyph ships as two vector groups; both are positioned to the
   insets Figma reports inside its 31px box */
.mock-banner__icon { position: relative; flex: none; width: 31px; height: 31px; }
.mock-banner__icon img { position: absolute; }
.mock-banner__icon img:first-child { left: 4.42%; top: 1.21%;  width: 71.25%; height: 91.21%; }
.mock-banner__icon img:last-child  { left: 50.17%; top: 53.38%; width: 45.41%; height: 45.41%; }
.mock-banner > img { width: 24px; height: 24px; flex: none; }

.accordion { margin-top: 18px; display: flex; flex-direction: column; gap: 15px; }

/* mobile-only progressive disclosure for the 18-module list */
.see-more { display: none; }

.module { border: 1px solid var(--line-module); border-radius: 10px; }
.module__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 53px;
  padding: 8px 16px;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.module__chevron { width: 24px; height: 24px; flex: none; transition: transform .25s ease; }
.module.is-open .module__chevron { transform: rotate(180deg); }

.module__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.module.is-open .module__body { grid-template-rows: 1fr; }
.module__body > .module__list { overflow: hidden; min-height: 0; }

.lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 53px;
  padding: 8px 16px;
  border-top: 1px solid var(--line-module);
}
.lesson__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.lesson__label img { width: 24px; height: 24px; flex: none; }
.lesson > img { width: 24px; height: 24px; flex: none; }
.lesson.is-locked > img { opacity: .55; }

/* ---- sidebar ---- */
/* the module list runs ~3.6k px, so the sidebar (which carries the primary CTA)
   tracks the scroll instead of stranding at the top. The grid item must be able
   to stretch for that, hence the inner wrapper doing the sticking. */
.curriculum__aside { align-self: stretch; }
.curriculum__aside-inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.course-card {
  padding: 15px;
  border: 1px solid var(--line-module);
  border-radius: 10px;
}
.course-card__thumb { width: 100%; height: auto; border-radius: 5px; }

.course-meta { margin: 37px 9px 0; display: flex; flex-direction: column; gap: 13px; }
.course-meta li { display: flex; align-items: center; gap: 13px; font-size: 18px; }
.course-meta__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 5.444px;
  background: #daeaff;
}
.course-meta__icon img { width: 19px; height: 19px; }
.course-meta__value { margin-left: 6px; }

.course-card .btn--primary { margin: 34px 9px 6px; width: calc(100% - 18px); }

.social-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 136px;
  padding: 25px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-dark);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.social-card:hover { transform: translateY(-3px); }
.social-card::before,
.social-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.social-card::before { left: -110px; top: -55px; width: 220px; height: 220px; }
.social-card::after  { right: -60px; top: -140px; width: 280px; height: 280px; }
.social-card--yt::before { background: radial-gradient(circle, rgba(173, 49, 46, .55) 0%, transparent 70%); }
.social-card--yt::after  { background: radial-gradient(circle, rgba(173, 49, 46, .38) 0%, transparent 70%); }
.social-card--wa::before { background: radial-gradient(circle, rgba(53, 195, 61, .45) 0%, transparent 70%); }
.social-card--wa::after  { background: radial-gradient(circle, rgba(53, 195, 61, .32) 0%, transparent 70%); }

.social-card__text { position: relative; z-index: 1; }
.social-card h3 { color: var(--text-heading-2); font-size: 24px; line-height: 27px; font-weight: 600; }
.social-card__btn {
  margin-top: 17px;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding-inline: 16px;
  border-radius: 42px;
  font-size: 18px;
  font-weight: 500;
}
.social-card--yt .social-card__btn { background: #ad312e; }
.social-card--wa .social-card__btn { background: #35c33d; }
.social-card__icon { position: relative; z-index: 1; width: 95px; height: auto; flex: none; }

/* ==========================================================================
   How to start
   ========================================================================== */

.steps {
  /* the connector below is derived from both of these, so they live here
     rather than being repeated as literals in each rule */
  --step-gap: 24px;
  --step-size: 89px;
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--step-gap);
}
.step { position: relative; text-align: center; padding-top: 0; }
/* Connector stroke: #5F8AFD @ 2px, per the exported Line 4 / Line 5 assets.
   It spans this circle's right edge to the next circle's left edge. The
   right offset has to give back the column gap as well as the radius —
   without it the stroke stopped a full gap short of the next circle while
   touching this one, which read as the row being unevenly spaced. */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--step-size) / 2 - 1px);
  left: calc(50% + var(--step-size) / 2);
  right: calc(-50% + var(--step-size) / 2 - var(--step-gap));
  height: 2px;
  background: #5f8afd;
}
/* ring + inner disc are the exported Ellipse 239 / Ellipse 242 assets */
.step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--step-size);
  height: var(--step-size);
  margin-inline: auto;
  background:
    url('../assets/icons/step-circle.svg') center / 78.78px 78.78px no-repeat,
    url('../assets/icons/step-ring.svg')   center / var(--step-size) var(--step-size) no-repeat;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.step h3 { margin-top: 16px; font-size: 18px; line-height: 34px; font-weight: 600; }
.step p { max-width: 332px; margin-inline: auto; font-size: 16px; line-height: 27px; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.reviews__headtext { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; max-width: 810px; }
.reviews__headtext .section-title { text-align: left; }

.reviews__arrows { display: flex; gap: 17.8px; flex: none; }
.carousel-btn {
  display: grid;
  place-items: center;
  width: 49px;
  height: 49px;
  border: 1.114px solid var(--blue-ring);
  border-radius: 50%;
  background: var(--bg-carousel-btn);
  transition: background .2s ease;
}
.carousel-btn:hover { background: #24334a; }
.carousel-btn img { width: 26.7px; height: 26.7px; }
.carousel-btn--prev img { transform: rotate(180deg); }

.reviews__track {
  margin-top: 45px;
  display: flex;
  gap: 30px;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  /* keep snapping from swallowing the leading inset so the first card lines up
     with the container edge, as in the Figma frame */
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track > * { scroll-snap-align: start; }

.review-video {
  position: relative;
  flex: none;
  width: 209px;
  height: 379px;
  border: 1px solid var(--line-social);
  border-radius: 17.6px;
  overflow: hidden;
}
.review-video__shot { width: 100%; height: 100%; object-fit: cover; }
.review-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 57px;
  height: 57px;
  transition: transform .2s ease;
}
.review-video:hover .review-video__play { transform: translate(-50%, -50%) scale(1.1); }

.review-card {
  flex: none;
  display: flex;
  gap: 29px;
  width: 555px;
  height: 379px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}
.review-card__shot {
  flex: none;
  width: 150.2px;
  height: 308px;
  object-fit: cover;
  border: 3.863px solid rgba(255, 255, 255, .1);
  border-radius: 8.8px;
}
/* Where an <img> sits in a flex container behind its <picture> wrapper, the
   wrapper is the flex item — so it has to carry the flex:none the image
   declares. Without it the wrapper shrinks and the global
   img { max-width: 100% } squeezes the image down to match it. */
.review-card > picture,
.social-card > picture,
.instructor__grid > picture { flex: none; }
.review-card__body { display: flex; flex-direction: column; }
.review-card__quote { width: 53.4px; height: 53.4px; }
.review-card__rating { margin-top: 17px; display: flex; align-items: center; gap: 12px; font-size: 18px; line-height: 15px; }
.review-card__body p { margin-top: 16px; font-size: 16px; line-height: 24px; }

.reviews__more { margin-top: 44px; display: flex; justify-content: center; }

/* swipe affordance — mobile only, fades out once the row has been swiped */
.swipe-hint { display: none; }

/* ==========================================================================
   E-book preview

   The reader is carried over from the previous landing page: a contained
   snap-scrolling row of pages, a visible slim scrollbar so the row reads as
   scrollable at a glance, and a ramp on each side that dissolves the pages
   into the background instead of slicing them off.
   ========================================================================== */

.ebook__reader { position: relative; margin-top: 45px; }

.ebook__track {
  display: flex;
  align-items: center;
  gap: 24px;
  /* the row keeps its own inset so the ramps have something to dissolve into,
     and the bottom padding is the gutter the scrollbar sits in */
  padding: 0 48px 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.ebook__track > * { scroll-snap-align: center; }

/* The scrollbar is part of the design here, not something to hide. Chromium
   ignores ::-webkit-scrollbar entirely once scrollbar-width is set, so the
   standard properties are fenced off for the engines that need them. */
@supports not selector(::-webkit-scrollbar) {
  .ebook__track { scrollbar-width: thin; scrollbar-color: rgba(16, 185, 129, .45) rgba(30, 41, 59, .5); }
}
.ebook__track::-webkit-scrollbar { height: 6px; }
.ebook__track::-webkit-scrollbar-track { border-radius: 10px; background: rgba(30, 41, 59, .5); }
.ebook__track::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(16, 185, 129, .3); }
.ebook__track::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, .5); }

.ebook-page { flex: none; width: 30%; }
.ebook-page__mount {
  position: relative;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  transition: transform .3s ease;
}
.ebook-page:hover .ebook-page__mount { transform: translateY(-8px); }
.ebook-page img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}
.ebook-page__num {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #10b981;
  color: #0f172a;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .3);
}

.ebook__reader::before,
.ebook__reader::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 96px;
  pointer-events: none;
}
.ebook__reader::before { left: 0;  background: linear-gradient( 90deg, var(--bg-page), transparent); }
.ebook__reader::after  { right: 0; background: linear-gradient(270deg, var(--bg-page), transparent); }

.ebook__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  color: #34d399;
  font-size: 18px;
  font-weight: 500;
}
.ebook__hint img { flex: none; }

/* ==========================================================================
   Instructor
   ========================================================================== */

.instructor__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 27px;
}
.instructor__photo { flex: none; width: 400px; height: 400px; object-fit: cover; border-radius: 25px; }
.instructor__body { padding-top: 27px; max-width: 428px; }

.instructor__name { margin-top: 8px; font-size: 35px; line-height: 47px; font-weight: 600; text-transform: uppercase; }
.instructor__role { font-size: 22px; line-height: 27px; }
.instructor__bio { margin-top: 25px; font-size: 16px; line-height: 27px; white-space: pre-wrap; }

.instructor__stats { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 28px; }
.instructor__stats span { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; line-height: 27px; }
.instructor__stats img { width: 24px; height: 24px; }

.instructor__socials { margin-top: 30px; display: flex; gap: 22px; }
.instructor__socials a {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid var(--line-social);
  border-radius: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.instructor__socials a:hover { border-color: var(--blue-accent); background: rgba(136, 186, 255, .08); }
.instructor__socials img { width: 20px; height: 20px; }

.pill--sm { font-size: 16px; }

/* ==========================================================================
   App download
   ========================================================================== */

.app__card {
  position: relative;
  min-height: 542px;
  border: 1px solid #b8c9df;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 4px 47px rgba(41, 143, 203, .06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.app__blob {
  position: absolute;
  left: 45%;
  top: -87%;
  width: 717px;
  max-width: none;
  pointer-events: none;
}
.app__copy { position: relative; z-index: 1; padding: 66px 20px 41px 62px; color: #000; }
.app__pill {
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding-inline: 15.9px;
  border: .86px solid #06a6ff;
  border-radius: 38.7px;
  background: #d5f0ff;
  color: #007dc7;
  font-size: 15.5px;
  font-weight: 500;
  text-transform: uppercase;
}
.app__title { margin-top: 19px; max-width: 488px; font-size: 52px; line-height: 55px; font-weight: 600; }
.app__text { margin-top: 25px; max-width: 372px; font-size: 16px; line-height: 27px; }
.app__badges { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.app__badges img { height: 63px; width: auto; transition: transform .2s ease; }
.app__badges a:hover img { transform: translateY(-3px); }

.app__phones { position: relative; z-index: 1; align-self: end; height: 500px; }
/* Figma frames: phone 3 = 275x416, phone 2 = 274x500, both bottom-aligned and
   clipped from the top of a taller render */
.app__phone { position: absolute; bottom: 0; display: block; overflow: hidden; }
.app__phone img { width: 100%; height: auto; }
.app__phone--back  { left: 102px; width: 275px; height: 416px; }
.app__phone--front { left: 229px; width: 274px; height: 500px; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__list {
  max-width: 750px;
  margin: 60px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.is-open {
  border-color: var(--line-blue-open);
  box-shadow: 0 4px 11px rgba(5, 69, 255, .42);
}

.faq-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 74px;
  padding: 11px 19px;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

/* the plus / close glyphs are the exported Figma icons, cross-faded on toggle */
.faq-item__icon { position: relative; flex: none; width: 35px; height: 35px; }
/* the icon fills its wrapper rather than restating 35px — the wrapper shrinks
   to 30px on phones, and a fixed width there met img { max-width: 100% } and
   left the circle 30 wide but still 35 tall */
.faq-item__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease;
}
.faq-item__minus { opacity: 0; }
.faq-item.is-open .faq-item__plus  { opacity: 0; }
.faq-item.is-open .faq-item__minus { opacity: 1; }

.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__body > p {
  overflow: hidden;
  margin: 0 19px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 27px;
}
.faq-item.is-open .faq-item__body > p {
  padding: 10px 0 20px;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { padding: 46px 0 41px; background: var(--bg-footer); }

.site-footer__payments-label { font-size: 16px; line-height: 20px; font-weight: 600; text-align: center; }

/* Desktop: the label sits centred on its own row above the payment marks, with
   the logo left and socials right beneath it. Placement is by grid area so the
   source order can stay in the mobile sequence. */
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ".    label  ."
    "logo pay    social";
  align-items: center;
  column-gap: 24px;
  row-gap: 25px;
}
.site-footer__logo           { grid-area: logo; }
.site-footer__payments-label { grid-area: label; }
.site-footer__pay            { grid-area: pay; }
.site-footer__socials        { grid-area: social; }
.site-footer__logo img { width: 140px; height: 44px; object-fit: contain; }

.site-footer__pay { display: flex; align-items: center; justify-content: center; gap: 26px; }
.site-footer__pay img { height: 32px; width: auto; object-fit: contain; }
.site-footer__pay img:nth-child(2) { height: 20px; }
.site-footer__bank { display: inline-flex; align-items: center; gap: 8px; font-family: Inter, var(--font); font-size: 16px; font-weight: 700; }
.site-footer__bank img { width: 24px; height: 24px; }

.site-footer__socials { display: flex; justify-content: flex-end; gap: 6px; }
.site-footer__socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  opacity: .85;
  transition: opacity .2s ease, background .2s ease;
}
.site-footer__socials a:hover { opacity: 1; background: rgba(255, 255, 255, .06); }
.site-footer__socials img { width: 20px; height: 20px; }

.site-footer__bottom {
  margin-top: 40px;
  padding-top: 29px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--text-footer);
  font-size: 16px;
  line-height: 20px;
}
.site-footer__legal { display: flex; gap: 25px; }
.site-footer__legal a { transition: color .2s ease; }
.site-footer__legal a:hover { color: #fff; }

/* ==========================================================================
   Sticky checkout bar — phones only

   Fixed, so it costs the page no height. It sits under the mobile menu (100)
   and the lightbox (120) but over everything else, and is only switched on in
   the <=820px block near the bottom of this file.
   ========================================================================== */

.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px var(--gutter);
  /* keep clear of the iOS home indicator */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(17, 17, 19, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-header);
  transform: translateY(130%);
  transition: transform .28s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
/* same price idiom as the offer bar: struck-through was, orange now */
.sticky-cta__price {
  margin-bottom: 6px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--text-nav);
}
.sticky-cta__price s { font-size: 12px; color: var(--text-muted); }
.sticky-cta__price strong { color: var(--orange); font-weight: 700; }
.sticky-cta__btn { height: 56px; gap: 10px; font-size: 20px; }
/* the parent already translates, so the button's own hover lift is dropped
   rather than fighting it */
.sticky-cta__btn:hover { transform: none; }

/* a slow nudge toward the checkout, not a loop that demands attention */
.sticky-cta__arrow { animation: cta-nudge 1.8s ease-in-out infinite; }
@keyframes cta-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  27%           { transform: translateX(6px); }
}

/* ==========================================================================
   Floating contact buttons — every viewport

   Bottom-right on desktop. On phones the sticky checkout bar owns the bottom
   edge, so these lift above it; main.js puts .has-sticky-cta on <body> while
   that bar is up and the offset below follows it.
   ========================================================================== */

.float-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: bottom .28s ease;
}
.float-actions__btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.float-actions__btn img { width: 26px; height: 26px; }
.float-actions__btn:hover { transform: translateY(-3px); }
/* WhatsApp keeps its own green — recognisability beats palette consistency
   here; the call button takes the page's blue */
.float-actions__btn--wa   { background: #25d366; }
.float-actions__btn--wa:hover   { box-shadow: 0 12px 26px rgba(37, 211, 102, .45); }
.float-actions__btn--call { background: var(--grad-primary); }
.float-actions__btn--call:hover { box-shadow: 0 12px 26px rgba(19, 80, 255, .45); }

/* ==========================================================================
   Video lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .88);
  animation: fade-in .2s ease;
}
.lightbox[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Every video on the page is presented 9:16. Width drives the box and is clamped
   so the derived height always fits the viewport. Opt a single video back into
   16:9 with data-orientation="landscape" on its trigger. */
.lightbox__frame {
  aspect-ratio: 9 / 16;
  width: min(420px, 100%, calc((100vh - 48px) * 9 / 16));
}
.lightbox--landscape .lightbox__frame {
  aspect-ratio: 16 / 9;
  width: min(960px, 100%, calc((100vh - 48px) * 16 / 9));
}
.lightbox__frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; }

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }

/* ==========================================================================
   Responsive — ≤1200px
   ========================================================================== */

@media (max-width: 1200px) {
  .section-title { font-size: 38px; line-height: 50px; }
  .hero__title { font-size: 38px; line-height: 50px; }
  .app__title { font-size: 42px; line-height: 48px; }
  .app__phone--back  { left: 60px; }
  .app__phone--front { left: 187px; }
  .site-nav { gap: 24px; }
}

/* ==========================================================================
   Responsive — ≤1024px (tablet)
   ========================================================================== */

@media (max-width: 1024px) {
  .site-nav, .site-header__cta { display: none; }
  .burger { display: grid; }

  .hero__inner { flex-direction: column; align-items: center; text-align: center; padding-block: 48px; min-height: 0; }
  .hero__copy { padding-top: 0; }
  .hero__lead { margin-inline: auto; }
  .hero__actions { justify-content: center; flex-wrap: wrap; }

  .benefits__grid,
  .solution__grid,
  .curriculum__grid { grid-template-columns: 1fr; }

  .solution__media { max-width: 428px; margin-inline: auto; width: 100%; }
  .curriculum__aside { max-width: 653px; }
  .curriculum__aside-inner { position: static; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); margin-top: 60px; }

  .instructor__grid { flex-direction: column; align-items: center; text-align: center; }
  .instructor__body { padding-top: 0; }
  .instructor__stats, .instructor__socials { justify-content: center; }
  .instructor__body .pill { align-self: center; }

  .app__card { grid-template-columns: 1fr; }
  .app__copy { padding: 48px 32px 0; text-align: center; }
  .app__title, .app__text { margin-inline: auto; }
  .app__badges { justify-content: center; }
  .app__phones { height: 420px; margin-top: 24px; }
  /* The desktop frame overlaps the two renders by 54% of the back phone's
     width. Keeping that proportion here — rather than standing them side by
     side — is what makes the pair read as one stacked composition on a phone,
     and it keeps the whole group centred on the card. */
  .app__phone--back  { left: 50%; margin-left: -168px; width: 230px; height: 348px; }
  .app__phone--front { left: 50%; margin-left: -62px;  width: 230px; height: 420px; }
  .app__blob { left: 20%; top: -60%; }

  .reviews__head { flex-direction: column; align-items: flex-start; }
  .reviews__arrows { align-self: flex-end; }

  /* the pages grow as the row narrows, matching the old page's step-down */
  .ebook-page { width: 45%; }
}

/* ==========================================================================
   Responsive — ≤820px
   ========================================================================== */

@media (max-width: 820px) {
  /* the header CTA is already gone by here, so the sticky bar is the only
     checkout button on screen rather than a second one */
  .sticky-cta { display: block; }

  .float-actions { right: 16px; gap: 10px; }
  .float-actions__btn { width: 48px; height: 48px; }
  .float-actions__btn img { width: 23px; height: 23px; }
  /* --sticky-cta-h is measured by main.js, so the lift tracks the bar's real
     height instead of a magic number that drifts when its copy changes.
     The bar's own padding already absorbs the safe-area inset. */
  .has-sticky-cta .float-actions { bottom: calc(var(--sticky-cta-h, 96px) + 14px); }

  /* the mobile frame uses a rendered gradient plate rather than the desktop ramp */
  .offer-bar {
    height: auto;
    padding: 12px 0 14px;
    background: #cd5314 url('../assets/img/offer-bar-mobile-bg.png') center / cover no-repeat;
    background-image: image-set(url('../assets/img/offer-bar-mobile-bg.webp') type('image/webp'),
                                url('../assets/img/offer-bar-mobile-bg.png') type('image/png'));
  }
  /* copy on its own row, countdown + CTA side by side beneath it */
  .offer-bar__inner { flex-flow: row wrap; justify-content: center; gap: 15px 30px; padding-inline: 20px; }
  .offer-bar__copy { flex: 0 0 100%; text-align: center; }
  .offer-bar__title { font-size: 14px; line-height: 19px; }
  .offer-bar__sub { font-size: 16px; line-height: 19px; }
  .offer-bar__sub s { font-size: 12px; }
  .offer-bar__row { display: flex; align-items: center; gap: 40px; }
  .countdown__box { width: 32px; height: 32px; font-size: 20.4px; border-width: 1px; border-radius: 5.8px; }
  .countdown__label { color: #fffefd; font-size: 11px; line-height: 16.7px; }
  .countdown__sep { font-size: 20.4px; line-height: 32px; }
  .offer-bar__cta { width: auto; height: 46px; padding-inline: 10px; border-radius: 8px; font-size: 16px; }
  .offer-bar__cta img { width: 24px; height: 24px; }
  .offer-bar__close { top: 19px; right: 16px; }

  .site-header { height: 71px; }
  .site-header__logo img { width: 101px; height: 32px; }

  .steps { grid-template-columns: 1fr; --step-gap: 40px; }
  .step:not(:last-child)::after { display: none; }

  .ebook-page { width: 60%; }
  .ebook__track { padding-inline: 24px; }
  /* a 96px ramp on each side would swallow most of the row from here down */
  .ebook__reader::before,
  .ebook__reader::after { display: none; }

  /* logo, then the label, then the marks it labels, then socials —
     the order the mobile frame (176:3597) uses */
  .site-footer__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .site-footer__logo { margin-bottom: 33px; }
  .site-footer__payments-label { margin-bottom: 10px; }
  .site-footer__pay { margin-bottom: 24px; }
  .site-footer__socials { justify-content: center; }
  /* legal links sit above the copyright line on mobile */
  .site-footer__bottom { flex-direction: column-reverse; text-align: center; }
}

/* ==========================================================================
   Responsive — ≤640px (mobile, per Figma "Landing Page_Mobile")
   ========================================================================== */

@media (max-width: 640px) {
  :root { --gutter: 16px; --section-gap: 30px; }

  .section--dark { padding-block: 60px; margin-block: 30px; }

  .section-title { font-size: 30px; line-height: 42px; }
  .section-title--sm { font-size: 26px; line-height: 36px; }
  .section-sub { font-size: 16px; line-height: 24px; }
  .section-head { gap: 20px; }

  .pill--green { height: 44px; padding-inline: 18px; font-size: 14px; }

  /* hero */
  .hero__inner { padding-block: 40px 32px; gap: 28px; }
  .hero__title { font-size: 30px; line-height: 45px; margin-top: 20px; }
  .hero__lead { margin-top: 14px; font-size: 16px; line-height: 24px; }
  .hero__actions { margin-top: 22px; flex-direction: column; gap: 14px; width: 100%; }
  .rating-pill { width: 100%; justify-content: center; height: 78px; }
  .btn--order { width: 100%; height: 82px; font-size: 30px; }
  .hero__video { width: 100%; max-width: 320px; }

  /* benefits */
  .benefits__grid { margin-top: 40px; gap: 24px; }
  .benefits__pair { grid-template-columns: 1fr; gap: 16px; padding: 12px; }
  .benefit__img { height: 200px; }
  .requirements { padding: 16px 16px 28px; }
  .requirements__phone { right: 0; width: 46px; height: 96px; }

  /* guarantee */
  .guarantee { padding: 36px 20px 42px; border-radius: 24px; }
  .guarantee__badge { width: 130px; height: 130px; }
  .guarantee__title { font-size: 30px; line-height: 42px; }
  .guarantee__text { font-size: 16px; line-height: 24px; }

  /* features — swipeable row of 280x353 cards, 16px gap, per the mobile frame.
     Bleeds to the right viewport edge so the next card peeks in. */
  .feature-grid {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    margin-top: 40px;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .feature-grid::-webkit-scrollbar { display: none; }
  .feature {
    flex: 0 0 280px;
    min-height: 353px;
    padding: 22px 20px;
    scroll-snap-align: start;
  }

  /* curriculum: show 5 modules, reveal the rest behind "See More" */
  .accordion > .module:nth-child(n+6) { display: none; }
  .accordion.is-expanded > .module { display: block; }
  .see-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    margin: 20px auto 0;
    padding: 6px 14px;
    border: 1px solid var(--line-module);
    border-radius: 21px;
    color: #5c5c5c;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
  }
  .see-more img { transition: transform .25s ease; }
  .see-more[aria-expanded="true"] img { transform: rotate(180deg); }

  /* solution */
  .solution__grid { gap: 40px; }
  .solution__title { font-size: 28px; line-height: 38px; }
  .problem-list li { font-size: 16px; line-height: 24px; padding: 12px 14px; }
  .problem-list img { width: 30px; height: 30px; }
  .solution__answer h3 { font-size: 26px; line-height: 32px; }
  /* the "আমাদের সমাধান" block centres on phones — heading, paragraph, chips
     and the checkout button below them */
  .solution__answer { text-align: center; }
  .solution__answer p { margin-inline: auto; }
  .tag-row { justify-content: center; }
  /* the button is inline-flex, which auto margins cannot centre — so it goes
     block-level at its own content width instead of stretching full bleed */
  .solution .btn--primary {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
  .solution__badge { font-size: 18px; height: 46px; padding-inline: 22px; }
  .tag-row { flex-wrap: wrap; }

  /* curriculum */
  .curriculum__grid { margin-top: 40px; }
  .mock-banner__label { font-size: 15px; line-height: 21px; }
  .mock-banner__label img { width: 26px; height: 26px; }
  .module__head { font-size: 16px; padding: 10px 14px; }
  .lesson { padding: 10px 14px; }
  .lesson__label { font-size: 14px; line-height: 21px; gap: 10px; }
  .course-meta li { font-size: 16px; gap: 10px; }
  .social-card { padding: 20px 18px; }
  .social-card h3 { font-size: 20px; line-height: 24px; }
  .social-card__icon { width: 78px; }

  /* reviews — video and screenshot keep their designed sizes (209x379 and
     150x308); only the quote card reflows to the viewport so the text is
     readable without swiping sideways inside a card. */
  /* the whole section centres on mobile — heading, arrows, hint and CTA all
     sit on the same axis instead of hugging the left gutter */
  .reviews__headtext { gap: 20px; align-items: center; text-align: center; }
  .reviews__headtext .section-title { text-align: center; }
  .reviews__head { align-items: center; }
  .reviews__arrows { align-self: center; margin-top: 4px; }
  .reviews__track {
    margin-top: 32px;
    gap: 28px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .reviews__track > * { scroll-snap-align: start; }
  /* A real phone gives the card ~330px. The designed 150px screenshot would
     leave the quote ~120px and blow the card past 500px tall, so on phones the
     screenshot steps down and the card is pinned to the video's 379px — the row
     stays visually even, which is what the design shows. */
  .reviews__track { align-items: flex-start; }
  .review-card {
    /* One source of truth for the screenshot's box, so the quote can line its
       top edge up with it. The width is written in vw rather than the 38% it
       resolves to, because a percentage in --shot-h would resolve against the
       height axis instead. Below 459px viewport the two are identical; above
       it both clamp to the designed 150px. */
    --card-pad: 16px;
    --shot-w: clamp(84px, calc((100vw - 64px) * .38), 150px);
    --shot-h: calc(var(--shot-w) * 308 / 150);
    --shot-top: calc((379px - var(--card-pad) * 2 - var(--shot-h)) / 2);
    width: calc(100vw - var(--gutter) * 2);
    max-width: 555px;
    height: 379px;
    min-height: 0;
    gap: 12px;
    padding: var(--card-pad);
  }
  /* 28% left the screenshot 161px short of the card floor — dead space, and it
     read as an afterthought next to the quote. The longest quote only needs 9
     of its 12 lines, so that width can go to the screenshot instead. 38% is
     close to an even split without squeezing the text into a column. */
  .review-card__shot {
    width: var(--shot-w);
    height: var(--shot-h);
  }
  /* align-self belongs on the flex item, which is the <picture> wrapper */
  .review-card > picture { align-self: center; }
  /* the screenshot is centred, so the quote starts at its top edge rather than
     at the card's — a shared top line reads as deliberate, a staggered one does
     not. Long quotes simply run past the screenshot's bottom. */
  .review-card__body {
    min-width: 0;
    align-self: flex-start;
    margin-top: var(--shot-top);
  }
  /* starting the quote lower down costs it ~46px of run, so the block above the
     text is tightened to pay for it — otherwise the longest review runs past
     the card's fixed floor */
  .review-card__quote { width: 30px; height: 30px; }
  .review-card__rating { margin-top: 8px; }
  .review-card__body p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 21px;
    /* safety net: the longest quote must not spill past the fixed height */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
    overflow: hidden;
  }
  .reviews__more { margin-top: 28px; }

  .ebook__reader { margin-top: 28px; }
  .ebook-page { width: 85%; }
  .ebook__track {
    padding: 0 16px 28px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ebook__hint { margin-top: 24px; font-size: 16px; }

  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 18px auto 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    transition: opacity .35s ease;
  }
  .swipe-hint.is-done { opacity: 0; pointer-events: none; }
  .swipe-hint__arrows { display: inline-flex; animation: swipe-nudge 1.6s ease-in-out infinite; }
  /* the exported double-chevron points down; turn it to point along the swipe */
  .swipe-hint__arrows img { width: 20px; height: 20px; transform: rotate(-90deg); opacity: .75; }
  @keyframes swipe-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }

  /* instructor */
  .instructor__photo { width: 100%; max-width: 340px; height: auto; aspect-ratio: 1; }
  .instructor__name { font-size: 28px; line-height: 38px; }
  .instructor__role { font-size: 18px; }
  .instructor__stats { gap: 18px; }

  /* app */
  .app__card { border-radius: 24px; }
  .app__copy { padding: 36px 20px 0; }
  .app__title { font-size: 32px; line-height: 40px; }
  .app__badges { gap: 12px; }
  .app__badges img { height: 52px; }
  .app__phones { height: 292px; }
  .app__phone--back  { margin-left: -117px; width: 160px; height: 242px; }
  .app__phone--front { margin-left: -43px;  width: 160px; height: 292px; }

  /* faq */
  /* how-to steps: circle beside the copy rather than stacked above it,
     which roughly halves the section on mobile */
  .steps { gap: 22px; }
  .step { display: flex; align-items: flex-start; gap: 16px; text-align: left; }
  .step__num {
    width: 64px;
    height: 64px;
    flex: none;
    margin-inline: 0;
    background-size: 56.6px 56.6px, 64px 64px;
    font-size: 24px;
  }
  .step__body { flex: 1; }
  .step h3 { margin-top: 0; font-size: 18px; line-height: 26px; }
  .step p { margin-inline: 0; max-width: none; font-size: 15px; line-height: 24px; }

  .faq__list { margin-top: 36px; gap: 12px; }
  .faq-item__head { font-size: 16px; line-height: 22px; gap: 14px; padding: 12px 16px; }
  .faq-item__icon { width: 30px; height: 30px; }

  /* footer */
  .site-footer__pay { flex-wrap: wrap; gap: 18px; }
  .site-footer__bottom { margin-top: 30px; font-size: 14px; }
  .site-footer__legal { flex-wrap: wrap; justify-content: center; gap: 16px; }

  .mobile-menu { padding: 16px 20px 40px; }
}

/* ==========================================================================
   Responsive — <=360px (small phones)
   ========================================================================== */

@media (max-width: 360px) {
  /* the longest review needs one more line of room at this width */
  .review-card__body p { font-size: 13px; line-height: 20px; -webkit-line-clamp: 13; }
  .review-card { gap: 10px; }
}

/* ==========================================================================
   Responsive — <=340px (iPhone SE 1st gen and similar)
   ========================================================================== */

@media (max-width: 340px) {
  /* The quote column is down to ~147px here, so the longest review wants 13
     lines while the top-aligned start leaves room for about 10. One more step
     down the type scale is what keeps it whole rather than clamped. */
  .review-card__body p { font-size: 12px; line-height: 17px; -webkit-line-clamp: 12; }
  .review-card__quote { width: 26px; height: 26px; }
  .review-card__rating { margin-top: 6px; font-size: 15px; }
  /* backstop: if the review copy is ever rewritten longer, it gets cut inside
     the card rather than spilling past its rounded edge */
  .review-card { overflow: hidden; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}