/* ============================================================
   HERO BACKGROUND — CLEAN, SHARP, HIGH-CONTRAST (NO BLUR)
============================================================ */

.hero-premium {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0;
  background-size: cover;  /* Ensure it's responsive */
  background-position: center center;  /* Make sure the background stays centered */
}

.hero-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/panel bg.webp') center/cover no-repeat;
  z-index: -2;
  background-size: cover;
}


/* Slight contrast boost — without blurring or washing out */
.hero-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25); /* subtle darkening to make cards pop */
  pointer-events: none;
  z-index: -1;
}


/* ============================================================
   PREMIUM 100vh PUZZLE LAYOUT (10/10 asymmetric)
============================================================ */

.puzzle-premium {
  width: min(92%, 1500px);
  height: calc(100vh - 6vh);
  padding: 2rem;
  display: grid;
  gap: 1.6rem;

  grid-template-columns: 1.3fr 0.85fr 1.4fr;
  grid-template-rows: 1.15fr 0.9fr 1fr;

  grid-template-areas:
    "brand  fun      booster"
    "brand  idiom    booster"
    "nav    image    booster";

  border-radius: 34px;
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(6px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);

  box-shadow:
    0 35px 95px rgba(0,0,0,0.55),
    inset 0 0 45px rgba(255,255,255,0.03);

  transform: scale(0.91);
  transform-origin: center top;
}


/* ============================================================
   GLASS HIERARCHY (Level 3 → Level 1)
============================================================ */

/* Level 3 — Hero Card */
.block-brand {
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow:
    0 25px 80px rgba(0,0,0,0.55),
    inset 0 0 30px rgba(255,255,255,0.15);
}

/* Level 2 — Booster Pillar */
.block-booster {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.16);
}

/* English Booster only */
.block-booster h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  margin: 0.1rem auto 0;
}

/* Booster phrase only */
.block-booster p strong:first-child {
  color: var(--color-secondary);
}

/* Level 1 — Supporting Cards */
.block-fun,
.block-idiom,
.block-nav,
.block-image {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.11);
  backdrop-filter: blur(10px);
}

/* Idiom phrase only */
.block-idiom p strong:first-child {
  color: var(--color-primary);
}


/* Prevent Idiom block from breaking puzzle layout */
.block-idiom p {
  display: -webkit-box;
  -webkit-line-clamp: 3;        /* max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-idiom .example {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* example max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.idiom-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}


/* ============================================================
   MODULE BASE STYLE
============================================================ */

.module {
  border-radius: 22px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  box-shadow:
    inset 0 0 14px rgba(255,255,255,0.06),
    0 14px 30px rgba(0,0,0,0.42);

  transition: 0.3s ease;
}

.module:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.09),
    0 24px 55px rgba(0,0,0,0.60);
}


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

.block-brand   { grid-area: brand; }
.block-fun     { grid-area: fun; }
.block-idiom   { grid-area: idiom; }
.block-nav     { grid-area: nav; }
.block-image   { grid-area: image; }
.block-booster { grid-area: booster; }


/* ============================================================
   IMAGE CARD — Premium tile
============================================================ */

.block-image .image-frame {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.block-image .image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-frame img {
  display: block;
}



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

.nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.nav-grid .tile {
  padding: 0.8rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
  transition: 0.25s;
}

.nav-grid .tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}


/* ============================================================
   INTRO SECTION
============================================================ */

section.intro {
  margin-top: 4rem;
  padding-top: 2rem;
  padding-bottom: 5rem;
}


.intro ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.intro li {
  list-style: none;
  margin-bottom: 1rem;
}

.intro li::marker,
.intro li::before {
  content: none !important;
}


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

/* Fullscreen hero background */
.hero-landing{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-landing-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ ONE PLACE for placement + angle (matches board borders) */
.hero-panel-wrapper{
  position: absolute;
  top: 8%;
  left: 15%;
  z-index: 60;

  /* tweak ONLY these 3 if needed */
  --board-ry: 11deg;     /* tilt depth */
  --board-rz: 1.6deg;    /* match the border slope */
  --board-p: 1200px;     /* perspective strength */

  transform: perspective(var(--board-p)) rotateY(var(--board-ry)) rotateZ(var(--board-rz));
  transform-origin: left top;
  transform-style: preserve-3d;
}

/* NAV GRID (no transform here anymore) */
.hero-nav-panel{
  position: static;
  display: grid;

  /* button sizing */
  --btnw: 190px;
  --gap: 16px;

  grid-template-columns: repeat(2, var(--btnw));
  gap: var(--gap);
  z-index: 50;
}

/* SEARCH sits UNDER the grid and matches its total width */
.hero-search{
  position: static;
  margin-top: 18px;

  display: flex;
  gap: 10px;
  align-items: center;

  width: calc((var(--btnw) * 2) + var(--gap));
  z-index: 60;
}

/* keep your search design; only ensure sizing is consistent */
.hero-search input{
  flex: 1;
  height: 52px;
  border-radius: 999px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  outline: none;
}
.hero-search input::placeholder{ color: rgba(255,255,255,.65); }

.hero-search-btn{
  height: 52px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  transition: .2s ease;
}
.hero-search-btn:hover{ background: rgba(255,255,255,.22); }

/* BUTTONS: keep your design, ONLY normalize sizing + hover depth direction */
.hero-nav-panel a{
  display: block;
  width: var(--btnw);
  padding: 0.38rem 1.0rem;

  /* keep your existing typography/colors */
  font-size: 1.22rem;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;

  border-radius: 28px;
  position: relative;
  overflow: hidden;

  /* ✅ keep your existing background/blur/border from your current CSS
     (leave your gradient + blur + border exactly as-is below if you want)
  */
  background: linear-gradient(
    180deg,
    rgba(140, 205, 255, 0.78) 0%,
    rgba(180, 210, 250, 0.22) 24%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(255, 185, 125, 0.42) 100%
  );

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.3px solid rgba(255, 255, 255, 0.45);

  transform: translateZ(0);
  transform-style: preserve-3d;
  will-change: transform, box-shadow, filter, background;

  transition:
    transform .22s cubic-bezier(.2,.9,.2,1),
    box-shadow .22s ease,
    filter .22s ease,
    background .22s ease;
}

/* keep your highlights */
.hero-nav-panel a::after{
  content: "";
  position: absolute;
  left: -20%;
  top: 0;
  width: 60%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at left center,
    rgba(255, 190, 140, 0.55) 0%,
    rgba(255, 190, 140, 0.22) 40%,
    rgba(255, 190, 140, 0) 100%
  );
  mix-blend-mode: screen;
}
.hero-nav-panel a::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.12) 28%,
    rgba(0, 0, 0, 0.12) 100%
  );
  mix-blend-mode: soft-light;
}

/* ✅ “coming OUT from the LEFT” feeling */
.hero-nav-panel a:hover{
  background: linear-gradient(
    180deg,
    rgba(0, 255, 255, 0.28) 0%,
    rgba(0, 180, 255, 0.16) 35%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 190, 140, 0.22) 100%
  );

  box-shadow:
    0 0 12px rgba(0, 255, 255, 0.32),
    0 0 18px rgba(255, 190, 140, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.32);

  /* left side pops toward camera */
  transform: translateX(-10px) translateZ(42px);
  filter: brightness(1.05);
}



/* ============================================
   Title on landing
============================================ */
.hero-title {
  position: absolute;
  top: 15%;
  left: 60%;
  z-index: 50;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  /* Base = SMALLER line (Like a Gym) */
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;

  color: rgba(255, 255, 255, 0.92);

  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 10px rgba(150,200,255,0.32);

  transform: perspective(900px) rotateY(14deg);
  transform-origin: left center;
}

/* FIRST LINE ONLY → Train Real English */
.hero-title::first-line {
  font-size: clamp(2.2rem, 3.6vw, 2.8rem);
}

/* Tagline */
.hero-title .tagline {
  font-size: 0.95rem;
  font-weight: 300;
  margin-top: 0.35rem;

  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.6px;

  text-shadow:
    0 1px 4px rgba(0,0,0,0.35),
    0 0 6px rgba(150,200,255,0.22);
}


.plans-explainer .final-cta {
  margin-top: 3rem;
}

/* ==============================
   HERO WHISPER TAGLINE — FINAL
============================== */

.hero-title .whisper {
  display: block;
  margin-top: 10px;

  font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;

  font-weight: 600;
  line-height: 1.4;

  color: rgba(200, 230, 255, 0.78);

  text-shadow:
    0 0 10px rgba(120, 180, 255, 0.25),
    0 0 22px rgba(90, 140, 255, 0.15);

  pointer-events: none;
}



/* ============================================================
   ENGLISH BOOSTER — INTERNAL GRID (TEXT + YT)
============================================================ */

.block-booster {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Two cards stacked */
.booster-grid {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Booster cards */
.booster-card {
  border-radius: 20px;
  padding: 0.9rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.booster-card.booster-text {
  padding: 0.3rem 0.9rem; /* ↓ was too fat */
}

.booster-text .footer {
  color: #FFD600; /* strong yellow text */
  font-weight: 700;
  font-size: 0.85rem;
}

/* ===============================
   YOUTUBE CARD (TOP, CLEAN)
================================ */

.booster-video {
  padding: 0;
  position: relative;
  overflow: hidden;

  aspect-ratio: 16 / 9;   /* ← FIXED */
  width: 100%;
  max-width: 100%;
}

/* Thumbnail */
.booster-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills the card */
  display: block;
}


/* Play overlay */
.booster-video .play-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;

  width: 28px;
  height: 28px;
  border-radius: 50%;

  background: #ff0000; /* YouTube red */
  display: grid;
  place-items: center;

  pointer-events: none;
}

/* white triangle */
.booster-video .play-btn::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px; /* optical centering */

  border-left: 9px solid #ffffff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Force YouTube card to top inside booster */
.booster-video {
  order: -1;
}

/* ===============================
   TRAIN WITH IDIOTOON — PILL TILES
================================ */

.block-nav .nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Pill tile */
.block-nav .tile {
  padding: 0.3rem 0.9rem;
  min-height: auto;

  border-radius: 999px; /* TRUE pill */
  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.06)
  );

  border: 1px solid rgba(255,255,255,0.22);

  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.08),
    0 8px 18px rgba(0,0,0,0.35);

  font-size: 1rem;
  font-weight: 600;
  color: #7fe7ff;

  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover — minimal */
.block-nav .tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,0.12),
    0 14px 26px rgba(0,0,0,0.5);
}

/* Subtitle — compact */
.block-nav .tile small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  opacity: 0.7;
}

.front-desktop{ display:block; }
.front-page-mobile{ display:none; }




/*=========brand divider==========*/
.brand-divider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  /* ZERO wasted space */
  padding: 0;
  margin: 0;
  height: 140px; /* tight but intentional */
}

/* soft premium glow */
.brand-divider::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(160,120,255,0.35) 0%,
    rgba(90,220,200,0.25) 35%,
    rgba(20,30,60,0.0) 65%
  );

  filter: blur(30px);
  pointer-events: none;
}

/* logo */
.brand-divider img {
  position: relative;
  width: 180px;       /* BIGGER */
  height: auto;
  margin: 0;
}



/* ====================================
   SYSTEM REVEAL 
==================================== */

.system-reveal{
  padding: 20vh 1rem 16vh;
  text-align: center;
}

/* Kicker */
.system-reveal p{
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.42;
  margin-bottom: 2.4rem;
}


/* Main line */
.reflex-static{
  font-size: clamp(4.6rem, 8.5vw, 6.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.03;
  margin: 0;
}

/* WORD */
.reflex-word{
  position: relative;
  color: #b7bbff;
  font-weight: 1000;
  padding-bottom: 0.22em;
}

/* NEURAL / REFLEX UNDERLINE — LOCKED */
.reflex-word::after{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:-0.18em;
  height:20px;

  background: linear-gradient(
    90deg,
    transparent 0%,
    #7efcff 20%,
    #9b7cff 38%,
    #7efcff 56%,
    transparent 78%
  );

  clip-path: polygon(
    0% 64%,
    7% 64%,
    13% 22%,
    18% 88%,
    26% 40%,
    34% 72%,
    42% 26%,
    50% 84%,
    58% 48%,
    70% 64%,
    100% 64%
  );

  opacity: 0.95;
}

/* SUBTLE DEPTH (STATIC, NOT DECORATIVE) */
.reflex-word::before{
  content: attr(data-word);
  position: absolute;
  left: 1px;
  top: 1px;
  color: #7efcff;
  opacity: 0.08;
  z-index: -1;
}




/* START HERE block */
.intro{
  width:100%;
  padding: 18px 16px 6px;
}
.intro-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 80px rgba(0,0,0,.33);
  position: relative;
  overflow: hidden;
}
.intro-inner:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(800px 240px at 50% 0%, rgba(120,170,255,.18), transparent 60%);
  pointer-events:none;
}
.intro-title{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}
.intro-sub{
  margin: 8px 0 0;
  opacity: .86;
  font-size: 14px;
}
.intro-grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.intro-tile{
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.intro-tile:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.10);
  border-color: rgba(140,200,255,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}
.intro-emoji{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 18px;
  line-height: 1;
}
.intro-txt strong{
  display:block;
  font-size: 15px;
  font-weight: 800;
}
.intro-txt small{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  opacity: .85;
}

/* FAQ uses your intro system, just tuned */
.home-faq .faq-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-faq .faq-tile{
  align-items: flex-start;
}

.home-faq .faq-tile .intro-txt small{
  line-height: 1.55;
}

/* mobile */
@media (max-width: 860px){
  .home-faq .faq-grid{
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   HOME INTRO TEXT — SAFE (ONLY <section class="intro">)
   - Will NOT affect booster (because booster uses p.intro)
   - Will NOT affect puzzle
   - Will NOT affect FAQ tiles (home-faq)
============================================================ */

body.home section.intro:not(.home-faq) .container{
  max-width: 980px;
  margin: 0 auto;
}

body.home section.intro:not(.home-faq) .container.text-center{
  text-align: left;
}

body.home section.intro:not(.home-faq){
  padding: 4.8rem 1.25rem 4.0rem;
  margin: 0;
}

body.home section.intro:not(.home-faq) h2{
  margin: 0 0 1.1rem;
  font-size: clamp(1.85rem, 2.3vw, 2.45rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

body.home section.intro:not(.home-faq) p{
  margin: 0 0 1.05rem;
  max-width: 76ch;
  font-size: 1.06rem;
  line-height: 1.75;
  opacity: 0.92;
}

body.home section.intro:not(.home-faq) p a{
  text-decoration: none;
  border-bottom: 1px solid rgba(126,252,255,0.35);
}
body.home section.intro:not(.home-faq) p a:hover{
  border-bottom-color: rgba(126,252,255,0.8);
}

body.home section.intro:not(.home-faq) ul{
  margin: 1.35rem 0 1.2rem;
  padding: 0;
  max-width: 78ch;
}

body.home section.intro:not(.home-faq) li{
  margin: 0 0 0.95rem;
  font-size: 1.06rem;
  line-height: 1.65;
  opacity: 0.92;
}

body.home section.intro:not(.home-faq) li strong{
  font-weight: 850;
  opacity: 1;
}

body.home section.intro.plans-explainer .final-cta{
  margin-top: 2.4rem;
}

@media (max-width: 860px){
  body.home section.intro:not(.home-faq){
    padding: 4.0rem 1.1rem 3.2rem;
  }
}