/* ============================================================
   LANDING — Waseela Hero V3 palette + typography, applied site-wide.
   Cream background, tan accent, deep brown text. Editorial.
============================================================ */
:root {
  --wgl-bg: #F4F1EA;          /* page background */
  --wgl-cream: #FAF7F0;       /* secondary surface */
  --wgl-tan: #A0521D;       /* كهرمان داكن */          /* primary accent */
  --wgl-tan-soft: #C8814A;  /* كهرمان متوسط */     /* secondary accent */
  --wgl-tan-pale: #E0B07F;  /* كهرمان فاتح */     /* tertiary accent */
  --wgl-brown: #1F1107;     /* تمر داكن */        /* primary text / dark blocks */
  --wgl-brown-3: #7B4F2A;   /* دبس التمر */      /* secondary text */
  --wgl-ink: #2B1A0E;          /* deepest ink */
  --wgl-line: rgba(31, 17, 7, 0.18);
}

/* Reset for this layout */
.wgl-body {
  margin: 0;
  padding: 0;
  background: var(--wgl-bg);
  color: var(--wgl-ink);
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ═══ PAGE-WIDE BACKGROUND COLUMNS (Hero V3 reference pattern) ═══
   The .wgl-page wrapper has position:relative + overflow:hidden, so the
   bg-cols inside it spread from top:0 to bottom:0 → exactly the full
   landing-page height. JS injects enough 900px bands to cover. */
.wgl-page {
  position: relative;
  width: 100%;
  background: var(--wgl-bg);
  overflow: hidden;
  isolation: isolate;
}
.wgl-bg-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.wgl-bg-col-l {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.wgl-bg-col-r {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.wgl-band {
  position: relative;
  width: 100%;
  height: 900px; /* repeating unit height */
}

/* Every section sits ABOVE the background columns */
.wgl-nav,
.wgl-hero,
.wgl-section,
.wgl-trust,
.wgl-feature,
.wgl-pricing,
.wgl-faq,
.wgl-final-cta,
.wgl-footer {
  position: relative;
  z-index: 2;
}

/* ALL light sections have NO background fill — they let the page background
   (cream + decorative shapes on the sides) show through entirely.
   The mask gradient on the bg-cols already keeps the centre clear of shapes
   so reading copy stays comfortable. */
.wgl-section,
.wgl-pricing,
.wgl-footer,
.wgl-feature,
.wgl-feature-alt,
.wgl-faq {
  background: transparent;
}
/* Dark sections stay solid dark; decoration shapes embedded inside them
   use light/cream colours so they pop visibly against the brown bg. */
.wgl-trust,
.wgl-final-cta {
  background: var(--wgl-brown);
  overflow: hidden;
  position: relative;
}
.wgl-sec-shape {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
}
.wgl-trust .wgl-container,
.wgl-final-cta .wgl-container {
  position: relative;
  z-index: 2;
}
.wgl-sec-shape-cream-fill { background: #FAF7F0; }
.wgl-sec-shape-cream-ring {
  border: 2px solid #FAF7F0;
  background: transparent;
  border-radius: 99px;
}
/* On dark sections the shapes need a brighter blend mode so they read
   against the brown background. Boost opacity of shapes when they fall
   inside a dark zone via a CSS overlay approach. */
.wgl-bg-col .wgl-shape,
.wgl-bg-col .wgl-dotgrid,
.wgl-bg-col .wgl-bar {
  mix-blend-mode: normal;
}

/* Decorations hidden on small screens to keep text readable */
@media (max-width: 720px) {
  .wgl-bg-col { display: none; }
}
.wgl-body *:not(input):not(textarea):not(select):not(.material-icons-round) {
  box-sizing: border-box;
}
.wgl-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ════ NAV ════ */
.wgl-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, #1F1107 0%, #2A1810 100%);  /* dark brown */
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wgl-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 28px;     /* slightly taller than original 14px for a premium feel */
  display: flex;
  align-items: center;
  gap: 36px;
  position: relative;
}
.wgl-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;          /* bumped from 20px for stronger presence */
  font-weight: 900;
  color: #FFFBF3;
  text-decoration: none;
  letter-spacing: -0.3px;
}
.wgl-logo img {
  width: 44px;              /* bumped from 32px so the mark reads clearly */
  height: 44px;
  border-radius: 10px;
  background: #fff;
  padding: 3px;
  /* subtle warm glow so the logo "lifts" off the dark bar */
  box-shadow: 0 4px 12px rgba(255, 213, 107, 0.20),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media (max-width: 720px) {
  .wgl-logo { font-size: 20px; gap: 10px; }
  .wgl-logo img { width: 38px; height: 38px; border-radius: 9px; }
}
.wgl-menu {
  display: flex;
  gap: 28px;
  margin-inline-start: auto;
}
.wgl-menu a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 251, 243, 0.82);   /* cream-light */
  text-decoration: none;
  transition: color 0.15s;
}
.wgl-menu a:hover { color: #FFD56B; }   /* warm gold on hover */
.wgl-nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ═══ Language toggle (AR / EN) — prominent at top of nav ═══ */
.wgl-lang-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);     /* translucent on dark bar */
  border: 1.5px solid rgba(255, 215, 107, 0.45);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}
.wgl-lang-opt {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #FFFBF3;             /* light text on dark */
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.18s, color 0.18s, transform 0.12s;
  letter-spacing: 0.3px;
  min-width: 44px;
}
.wgl-lang-opt:hover {
  background: rgba(255, 215, 107, 0.18);
}
.wgl-lang-opt.is-active {
  background: linear-gradient(135deg, var(--wgl-tan) 0%, #864418 100%);
  color: #fff;
  box-shadow: 0 4px 10px rgba(160, 82, 29, 0.35);
}

/* ════ Buttons ════ */
.wgl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.wgl-btn-lg { padding: 14px 28px; font-size: 16px; }
.wgl-btn-full { width: 100%; }
.wgl-btn-primary {
  background: var(--wgl-brown);
  color: #fff;
  border-color: var(--wgl-brown);
}
.wgl-btn-primary:hover {
  background: var(--wgl-tan);
  border-color: var(--wgl-tan);
  transform: translateY(-1px);
}
.wgl-btn-outline {
  background: transparent;
  color: var(--wgl-brown);
  border-color: rgba(31, 17, 7, 0.25);
}
.wgl-btn-outline:hover {
  border-color: var(--wgl-tan);
  color: var(--wgl-tan);
}
.wgl-btn-ghost {
  background: transparent;
  color: #555;
}
.wgl-btn-ghost:hover { color: var(--wgl-brown); }

/* ─── Inside the dark nav, "login" ghost button needs light text ─── */
.wgl-nav .wgl-btn-ghost {
  color: #FFFBF3;
  border-color: rgba(255, 255, 255, 0.20);
}
.wgl-nav .wgl-btn-ghost:hover {
  color: #FFD56B;
  border-color: rgba(255, 215, 107, 0.55);
  background: rgba(255, 255, 255, 0.05);
}
/* "ابدأ مجاناً" — keep brown but make the gold highlight pop against dark bg */
.wgl-nav .wgl-btn-primary {
  background: linear-gradient(135deg, #FFD56B 0%, #A0521D 100%);
  border-color: transparent;
  color: #1F1107;
  box-shadow: 0 4px 14px rgba(255, 213, 107, 0.30);
}
.wgl-nav .wgl-btn-primary:hover {
  background: linear-gradient(135deg, #FFE49A 0%, #B5621F 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 213, 107, 0.45);
}

/* ════ Common ════ */
.wgl-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.2px;
  color: var(--wgl-tan);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.wgl-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.wgl-section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--wgl-brown);
  letter-spacing: -0.8px;
  line-height: 1.25;
}
/* Force a single-line, auto-shrinking h2 (subject section title) */
.wgl-h2-oneline {
  white-space: nowrap;
  font-size: clamp(18px, 2.6vw, 34px) !important;
  max-width: 100%;
  overflow: visible;
}
@media (max-width: 640px) {
  .wgl-h2-oneline {
    white-space: normal;
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
}
.wgl-section-sub {
  font-size: 17px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

/* ════ HERO (decorative shapes come from page-wide bg-cols now) ════ */
.wgl-hero {
  position: relative;
  padding: 100px 0 80px;
  background: transparent;
  overflow: visible;
}

/* ─── Floating decorative photos that flank the hero text ─── */
.wgl-hero-photo {
  position: absolute;
  width: 120px;     /* 50% smaller (was 240px) */
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 4;
  box-shadow:
    0 14px 32px -8px rgba(31, 17, 7, 0.30),
    0 0 0 4px rgba(250, 247, 240, 0.95),
    0 0 0 5px rgba(160, 82, 29, 0.25);
  animation: wgl-hero-float 5.5s ease-in-out infinite;
  pointer-events: none;
}
.wgl-hero-photo-l {
  left: calc(4% - 38px);  /* shifted 1cm left from origin */
  top: 40px;
}
.wgl-hero-photo-r {
  right: calc(4% + 57px);  /* shifted 0.5cm more left (was +38px; now -1.5cm from origin) */
  top: 250px;
  animation-delay: -2.7s;
}
@keyframes wgl-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Chalkboard "وسيلة" (left photo) ── */
.wgl-photo-chalkboard {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05) 0%, transparent 50%),
    linear-gradient(135deg, #1A2F1A 0%, #0E1B0E 60%, #050A05 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* wooden frame */
.wgl-photo-chalkboard::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 7px solid;
  border-color: #8B5A2B #5C3A18 #3F2810 #6B441E;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 0 0 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
/* subtle chalk dust texture */
.wgl-photo-chalkboard::after {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.04) 0.6px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.03) 0.5px, transparent 1px),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.04) 0.5px, transparent 1px);
  background-size: 5px 5px, 7px 7px, 6px 6px;
  pointer-events: none;
}
.wgl-photo-chalkboard-text {
  position: relative;
  z-index: 2;
  color: #f4ede0;
  font-family: 'Tajawal', 'Cairo', sans-serif;
  font-size: 26px;   /* 50% smaller */
  font-weight: 900;
  letter-spacing: -0.5px;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.18),
    0 0 1px rgba(255, 255, 255, 0.30);
  /* simulate hand-drawn chalk strokes */
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.15);
  transform: rotate(-2deg);
}
/* small chalk piece at bottom-right */
.wgl-photo-chalk {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 10px;
  height: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #e8dfc8 50%, #c8c0a8 100%);
  border-radius: 2px;
  transform: rotate(35deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* ── Exam paper + pencil (right photo) ── */
.wgl-photo-exam {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 70% 35%, rgba(160, 82, 29, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, #FAF7F0 0%, #F4ECDC 60%, #E8D9BA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* bubble-grid pattern (answer sheet) */
.wgl-photo-exam-grid {
  position: absolute;
  inset: 14px;        /* 50% smaller */
  border-radius: 50%;
  background-image:
    radial-gradient(circle, rgba(31, 17, 7, 0.32) 1.5px, transparent 1.8px),
    radial-gradient(circle, rgba(160, 82, 29, 0.10) 1.2px, transparent 1.5px);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 85%);
          mask-image: radial-gradient(circle at center, #000 55%, transparent 85%);
}
/* pencil */
.wgl-photo-pencil {
  position: relative;
  z-index: 2;
  font-size: 48px;    /* 50% smaller */
  filter:
    drop-shadow(0 4px 8px rgba(31, 17, 7, 0.25))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
  transform: rotate(-28deg) translate(-4px, -2px);
}

/* Hide on smaller widths — the hero photos compete with the text */
@media (max-width: 1180px) {
  .wgl-hero-photo { width: 100px; height: 100px; }
  .wgl-hero-photo-l { top: 24px; left: 2%; }
  .wgl-hero-photo-r { top: 220px; right: 2%; }
  .wgl-photo-chalkboard-text { font-size: 22px; }
  .wgl-photo-pencil { font-size: 40px; }
}
@media (max-width: 980px) {
  .wgl-hero-photo { display: none; }
}
.wgl-hero .wgl-container {
  position: relative;
  z-index: 5;
  max-width: 880px;
  text-align: center;
}

/* Side decoration zones — fade out toward center so they never compete with the copy */
.wgl-deco {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.wgl-deco-l {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.wgl-deco-r {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}

/* Abstract shapes */
.wgl-shape { position: absolute; border-radius: 50%; }
.wgl-shape-fill        { background: #C8814A; }
.wgl-shape-dark        { background: #1F1107; }
.wgl-shape-cream       { background: #FAF7F0; border: 1px solid rgba(59,38,21,.18); }
.wgl-shape-ring        { border: 2px solid #1F1107; background: transparent; }
.wgl-shape-ring-thick  { border: 14px solid #C8814A; background: transparent; border-radius: 99px; }
.wgl-shape-ring-dashed { border: 1.5px dashed #7B4F2A; background: transparent; border-radius: 99px; }
.wgl-shape-arc {
  border: 20px solid #C8814A;
  border-radius: 99px;
  border-right-color: transparent;
  border-top-color: transparent;
  background: transparent;
}
.wgl-dotgrid {
  position: absolute;
  background-image: radial-gradient(#A0521D 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}
.wgl-bar { position: absolute; border-radius: 99px; }
.wgl-bar-dark { background: #1F1107; }
.wgl-bar-tan  { background: #A0521D; }

/* Hide decorations on small screens to keep text readable */
@media (max-width: 720px) {
  .wgl-deco { display: none; }
}
.wgl-hero-title {
  font-size: clamp(26px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.8px;
  margin: 0 0 18px;
  color: var(--wgl-brown);
  max-width: 820px;
  margin-inline: auto;
}
.wgl-hero-accent { color: var(--wgl-tan); }

/* Animated tagline — slides right→center→left, fades in/out, BOLD.
   Resting state is CENTERED via parent text-align + inline-block child. */
.wgl-hero-tagline {
  height: auto;
  min-height: 32px;
  overflow: visible;
  margin: 0 auto 22px;
  max-width: 920px;
  text-align: center;
}
.wgl-hero-tagline-text {
  display: inline-block;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 800;
  color: var(--wgl-tan);
  letter-spacing: -0.2px;
  white-space: normal;
  line-height: 1.5;
  animation: wgl-tagline-fade 7s ease-in-out infinite;
}
/* Fade-only animation — no horizontal slide so long English strings don't
   get clipped by the container edges. The text fully fits the visible area
   while still pulsing rhythmically. */
@keyframes wgl-tagline-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  15%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.wgl-hero-sub {
  font-size: 17px;
  color: #555;
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto 32px;
}
.wgl-hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.wgl-hero-trust {
  list-style: none;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #777;
}

/* ════ SUBJECT GRID ════ */
.wgl-section {
  padding: 80px 0;
  background: transparent;  /* let the page bg-cols' shapes show through */
}
.wgl-subjects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.wgl-subject {
  position: relative;
  background: #fff;
  border: 1.5px solid rgba(31, 17, 7, 0.1);
  border-radius: 14px;
  padding: 28px 22px 26px;
  text-align: center;
  /* smooth, multi-property transition — background, border, shadow, lift */
  transition: background-color 0.35s ease,
              border-color 0.25s ease,
              transform 0.25s ease,
              box-shadow 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 240px;
}
.wgl-subject:hover {
  border-color: var(--wgl-tan);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 17, 7, 0.08);
}
/* Cursor-following spotlight halo — uses CSS custom properties updated by
   JS on mousemove. The radial gradient draws a soft tinted glow only
   around the pointer location, leaving the rest of the card neutral. */
.wgl-subject {
  --mx: 50%;
  --my: 50%;
  --halo: rgba(160, 82, 29, 0);
}
.wgl-subject::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    220px circle at var(--mx) var(--my),
    var(--halo) 0%,
    rgba(160, 82, 29, 0) 60%
  );
  transition: background 0.12s ease;
}
/* Ensure content (icon, h3, list) sits ABOVE the halo */
.wgl-subject-mark,
.wgl-subject h3,
.wgl-subject ul,
.wgl-subject .wgl-subject-go { position: relative; z-index: 1; }

/* Each card gets a different soft halo color — tinted but readable */
.wgl-subject:nth-child(1):hover { --halo: rgba(244, 196, 110, 0.45); }   /* amber */
.wgl-subject:nth-child(2):hover { --halo: rgba(159, 146, 232, 0.40); }  /* lavender */
.wgl-subject:nth-child(3):hover { --halo: rgba(124, 201, 147, 0.40); }  /* mint */
.wgl-subject:nth-child(4):hover { --halo: rgba(241, 176, 122, 0.45); }  /* rose */
.wgl-subject:nth-child(5):hover { --halo: rgba(125, 175, 220, 0.40); }  /* sky */
.wgl-subject:nth-child(6):hover { --halo: rgba(212, 152, 69, 0.40); }   /* sand */
.wgl-subject:nth-child(7):hover { --halo: rgba(184, 150, 116, 0.40); }  /* tan */
.wgl-subject:nth-child(8):hover { --halo: rgba(196, 91, 124, 0.35); }   /* blush */
.wgl-subject-mark {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}
.wgl-subject h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--wgl-brown);
  letter-spacing: -0.3px;
}
.wgl-subject ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  width: 100%;
  text-align: center;
}
.wgl-subject li {
  font-size: 13px;
  color: #666;
  padding: 4px 0;
  line-height: 1.7;
}
.wgl-subject li::before { content: ''; }

/* Quick-quizzes card — visually distinct from the subject-bound cards */
.wgl-subject-quick {
  background: linear-gradient(180deg, #FFFBF2 0%, #FFF6E5 100%);
  border-color: rgba(255, 159, 0, 0.35);
  border-width: 2px;
}
.wgl-subject-quick:hover {
  border-color: #FF9F00;
  box-shadow: 0 14px 32px rgba(255, 159, 0, 0.15);
}
.wgl-subject-tag {
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  background: #FF9F00;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(255, 159, 0, 0.30);
}

/* ════ TRUST STRIP ════ */
.wgl-trust {
  padding: 60px 0;
  background: var(--wgl-brown);
  color: #fff;
}
.wgl-trust-content {
  text-align: center;
}
.wgl-trust-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 36px;
  color: #fff;
  letter-spacing: -0.3px;
}
.wgl-trust-row {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}
.wgl-trust-stat strong {
  display: block;
  font-size: 42px;
  font-weight: 900;
  color: var(--wgl-tan);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 6px;
}
.wgl-trust-stat span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* ════ FEATURE ROWS (alternating) ════ */
.wgl-feature {
  padding: 100px 0;
  background: transparent;  /* shapes show through */
}
.wgl-feature-alt { background: transparent; }
.wgl-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.wgl-feature-row-rev > div:first-child { order: 2; }
.wgl-feature-text h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--wgl-brown);
  letter-spacing: -0.6px;
  line-height: 1.25;
}
.wgl-feature-text p {
  font-size: 17px;
  color: #555;
  line-height: 1.75;
  margin: 0 0 24px;
}
.wgl-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.wgl-feature-list li {
  padding: 8px 0 8px 22px;
  font-size: 15px;
  color: #444;
  font-weight: 500;
  position: relative;
  padding-inline-start: 22px;
}
.wgl-feature-list li::before {
  content: '✓';
  position: absolute;
  right: 0;
  color: var(--wgl-tan);
  font-weight: 900;
}

/* ── Feature mockups ── */
.wgl-feature-mock {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wgl-mock-card {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(31, 17, 7, 0.12);
  border: 1.5px solid rgba(31, 17, 7, 0.08);
  overflow: hidden;
}
.wgl-mock-bar {
  height: 8px;
  background: linear-gradient(90deg, var(--wgl-tan), var(--wgl-brown));
}
.wgl-mock-q {
  padding: 28px 24px;
}
.wgl-mock-q strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.wgl-mock-q p {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--wgl-brown);
}
.wgl-mock-opt {
  padding: 12px 16px;
  border: 1.5px solid rgba(31, 17, 7, 0.08);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #555;
}
.wgl-mock-opt-correct {
  background: rgba(160, 82, 29, 0.08);
  border-color: var(--wgl-tan);
  color: var(--wgl-brown);
}
.wgl-mock-opt-correct::after {
  content: ' ✓';
  color: var(--wgl-tan);
  font-weight: 900;
}

.wgl-mock-cert {
  width: 100%;
  max-width: 380px;
  padding: 20px;
}
.wgl-mock-cert-frame {
  background: #fff;
  border: 3px double var(--wgl-tan);
  border-radius: 8px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 14px 36px rgba(31, 17, 7, 0.1);
  position: relative;
}
.wgl-mock-cert-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--wgl-tan);
  margin: 0 0 18px;
}
.wgl-mock-cert-frame h3 {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 14px;
  color: var(--wgl-brown);
}
.wgl-mock-cert-body {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px;
}
.wgl-mock-cert-seal {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wgl-tan);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.wgl-mock-ann {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1.5px solid rgba(31, 17, 7, 0.08);
  border-inline-start: 4px solid var(--wgl-tan);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 14px 32px rgba(31, 17, 7, 0.08);
}
.wgl-mock-ann-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
}
.wgl-mock-ann-tag {
  background: rgba(160, 82, 29, 0.12);
  color: var(--wgl-tan);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
}
.wgl-mock-ann strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--wgl-brown);
}
.wgl-mock-ann p {
  font-size: 13px;
  color: #666;
  margin: 0 0 16px;
}
.wgl-mock-ann-foot {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
  padding-top: 12px;
  border-top: 1px dashed rgba(31, 17, 7, 0.1);
}

/* ════ TESTIMONIALS ════ */
.wgl-testimonials {
  padding: 80px 0;
  background: #fff;
}
.wgl-tcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.wgl-tcard {
  background: var(--wgl-cream);
  border-radius: 14px;
  padding: 28px 26px;
  border: 1.5px solid rgba(31, 17, 7, 0.06);
}
.wgl-tcard > p {
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  margin: 0 0 24px;
  font-weight: 500;
}
.wgl-tcard-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wgl-tcard-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wgl-tan);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}
.wgl-tcard-author strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--wgl-brown);
}
.wgl-tcard-author small {
  font-size: 12px;
  color: #777;
}

/* ════ PRICING ════ */
.wgl-pricing {
  padding: 80px 0;
  background: transparent;  /* shapes show through */
}
.wgl-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.wgl-plan {
  position: relative;
  background: #fff;
  border: 1.5px solid rgba(31, 17, 7, 0.1);
  border-radius: 14px;
  padding: 36px 28px 0;          /* removed bottom padding so art bleeds to edge */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* allow children to span full width */
  overflow: hidden;
  /* Cursor-following halo — same idea as .wgl-subject */
  --mx: 50%;
  --my: 50%;
  --halo: rgba(160, 82, 29, 0);
  transition: background-color 0.35s ease,
              border-color 0.25s ease,
              transform 0.25s ease,
              box-shadow 0.25s ease;
  cursor: pointer;
}
.wgl-plan:hover {
  border-color: var(--wgl-tan, #A0521D);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 17, 7, 0.10);
}
.wgl-plan::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    var(--halo) 0%,
    rgba(160, 82, 29, 0) 60%
  );
  transition: background 0.12s ease;
}
/* Every direct child sits above the halo so it's never washed out */
.wgl-plan > * { position: relative; z-index: 1; }
/* Per-plan halo tints matching each card's art gradient */
.wgl-plan:nth-child(1):hover { --halo: rgba(159, 146, 232, 0.40); }  /* violet (Free / left) */
.wgl-plan:nth-child(2):hover { --halo: rgba(233, 203, 135, 0.55); }  /* gold   (Featured / middle) */
.wgl-plan:nth-child(3):hover { --halo: rgba(124, 201, 147, 0.40); }  /* green  (Full / right) */
.wgl-plan > *:not(.wgl-plan-art) {
  flex-shrink: 0;
  /* content children share the natural width of the card content area */
  align-self: center;
}
.wgl-plan ul { text-align: center; flex: 1; }   /* push CTA + art down */
.wgl-plan li { padding-inline-start: 0 !important; }
.wgl-plan li::before { content: '' !important; }
.wgl-plan .wgl-plan-price { justify-content: center; }
.wgl-plan-icon { margin-inline: auto; }
.wgl-plan .wgl-plan-cta { margin-bottom: 26px; width: 100%; }

/* ─── Decorative SVG art — anchored to the absolute bottom of every card ─── */
.wgl-plan-art {
  width: calc(100% + 56px);       /* bleed to card edges (cancel 28px padding) */
  margin: auto -28px 0;            /* `auto` top pushes art to bottom uniformly */
  height: 120px;
  position: relative;
  overflow: hidden;
  align-self: stretch;             /* span the whole row */
}
.wgl-plan-art svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}
.wgl-plan-art-violet { background: linear-gradient(180deg, #EFE9FA 0%, #DCD0F4 100%); }
.wgl-plan-art-gold   { background: linear-gradient(180deg, #F8EBC9 0%, #E9CB87 100%); }
.wgl-plan-art-green  { background: linear-gradient(180deg, #E0EFE3 0%, #C2DFCC 100%); }
/* Colored plan icons (rounded circles with Material symbol inside) */
.wgl-plan-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 8px 18px rgba(31, 17, 7, 0.10);
}
.wgl-plan-icon .material-icons-round { font-size: 30px; color: #fff; }
.wgl-plan-icon-free {
  background: linear-gradient(135deg, #58D38B 0%, #2EBE6A 100%);
  box-shadow: 0 8px 18px rgba(46, 190, 106, 0.30);
}
.wgl-plan-icon-mid {
  background: linear-gradient(135deg, #FFD56B 0%, var(--wgl-tan) 100%);
  box-shadow: 0 8px 18px rgba(160, 82, 29, 0.35);
}
.wgl-plan-icon-full {
  background: linear-gradient(135deg, #9C8CFF 0%, #5B4DBF 100%);
  box-shadow: 0 8px 18px rgba(91, 77, 191, 0.30);
}
.wgl-plan-featured {
  border: 2.5px solid var(--wgl-brown);
  transform: scale(1.03);
}
.wgl-plan-badge {
  position: absolute;
  top: -12px;
  right: 50%;
  transform: translateX(50%);
  background: var(--wgl-brown);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.wgl-plan h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--wgl-brown);
}
.wgl-plan-tag {
  font-size: 13px;
  color: var(--wgl-tan);
  font-weight: 700;
  margin: 0 0 18px;
}
.wgl-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.wgl-plan-price > span:nth-child(2),
.wgl-plan-price > span:not(.wgl-plan-strike) {
  font-size: 48px;
  font-weight: 900;
  color: var(--wgl-brown);
  line-height: 1;
  letter-spacing: -2px;
}
.wgl-plan-price small {
  font-size: 13px;
  color: #888;
  font-weight: 600;
}
.wgl-plan-strike {
  font-size: 22px !important;
  color: #c0392b !important;
  text-decoration: line-through;
  font-weight: 800 !important;
}
.wgl-plan-promo {
  font-size: 12px;
  font-weight: 800;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin: 0 0 22px;
}
.wgl-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.wgl-plan li {
  padding: 8px 0;
  padding-inline-start: 22px;
  font-size: 14px;
  color: #444;
  position: relative;
}
.wgl-plan li::before {
  content: '✓';
  position: absolute;
  right: 0;
  color: var(--wgl-tan);
  font-weight: 900;
}

/* ════ FAQ ════ */
.wgl-faq {
  padding: 80px 0;
  background: transparent;  /* shapes show through */
}
.wgl-faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.wgl-faq-item {
  border-bottom: 1px solid rgba(31, 17, 7, 0.1);
}
.wgl-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-weight: 700;
  font-size: 17px;
  color: var(--wgl-brown);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.wgl-faq-item summary::-webkit-details-marker { display: none; }
.wgl-faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--wgl-tan);
  transition: transform 0.25s;
}
.wgl-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.wgl-faq-item p {
  padding: 0 0 22px;
  font-size: 15px;
  color: #555;
  line-height: 1.75;
  margin: 0;
}
.wgl-faq-item a { color: var(--wgl-tan); font-weight: 700; }

/* ════ FINAL CTA ════ */
.wgl-final-cta {
  padding: 80px 0;
  background: var(--wgl-brown);
  color: #fff;
  text-align: center;
}
.wgl-final-cta h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -0.6px;
}
.wgl-final-cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 32px;
}
.wgl-final-cta .wgl-btn-primary {
  background: var(--wgl-tan);
  border-color: var(--wgl-tan);
}
.wgl-final-cta .wgl-btn-primary:hover {
  background: #fff;
  color: var(--wgl-brown);
  border-color: #fff;
}

/* ════ FOOTER ════ */
.wgl-footer {
  background: transparent;  /* shapes show through */
  border-top: 1px solid rgba(31, 17, 7, 0.1);
  padding: 44px 0 22px;
  color: #555;
}
.wgl-foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
/* Compact footer variant — 2 columns only (brand + platform), tighter sizes */
.wgl-footer-compact .wgl-foot-grid {
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  margin-bottom: 26px;
  max-width: 820px;
  margin-inline: auto;
}
.wgl-footer-compact .wgl-foot-brand p {
  font-size: 13px;
  line-height: 1.65;
  max-width: 340px;
}
.wgl-footer-compact .wgl-foot-col h4 {
  font-size: 13px;
  margin-bottom: 12px;
}
.wgl-footer-compact .wgl-foot-col a {
  font-size: 13px;
  padding: 5px 0;
}
.wgl-footer-compact .wgl-logo { font-size: 18px; }
.wgl-footer-compact .wgl-logo img { width: 28px; height: 28px; }
.wgl-footer-compact .wgl-foot-bottom {
  justify-content: center;
  text-align: center;
}
.wgl-foot-brand p {
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  margin: 16px 0 0;
  max-width: 320px;
}
.wgl-foot-col h4 {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--wgl-brown);
  letter-spacing: -0.2px;
}
.wgl-foot-col a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.15s;
}
.wgl-foot-col a:hover { color: var(--wgl-tan); }
.wgl-foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(31, 17, 7, 0.1);
  font-size: 13px;
  color: #888;
}
.wgl-foot-social {
  display: flex;
  gap: 14px;
}
.wgl-foot-social a {
  font-size: 20px;
  text-decoration: none;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 1024px) {
  .wgl-subjects { grid-template-columns: repeat(3, 1fr); }
  .wgl-tcards { grid-template-columns: 1fr 1fr; }
  .wgl-plans { grid-template-columns: 1fr; max-width: 480px; }
  .wgl-plan-featured { transform: none; }
}
@media (max-width: 720px) {
  .wgl-container { padding: 0 18px; }
  .wgl-nav-inner { padding: 12px 18px; }
  .wgl-menu { display: none; }
  .wgl-hero { padding: 60px 0 50px; }
  .wgl-hero-trust { flex-direction: column; gap: 8px; }
  .wgl-section, .wgl-feature, .wgl-testimonials, .wgl-pricing, .wgl-faq { padding: 50px 0; }
  .wgl-subjects { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wgl-subject { padding: 20px 18px 60px; min-height: 240px; }
  .wgl-feature-row { grid-template-columns: 1fr; gap: 30px; }
  .wgl-feature-row-rev > div:first-child { order: 0; }
  .wgl-tcards { grid-template-columns: 1fr; }
  .wgl-trust-row { gap: 24px; }
  .wgl-trust-stat strong { font-size: 32px; }
  .wgl-foot-grid { grid-template-columns: 1fr 1fr; }
  .wgl-foot-brand { grid-column: 1 / -1; }
  .wgl-footer-compact .wgl-foot-grid { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .wgl-footer-compact .wgl-foot-brand p { margin-inline: auto; }
}
@media (max-width: 720px) {
  .wgl-lang-opt { padding: 5px 10px; font-size: 11.5px; min-width: 38px; }
}
@media (max-width: 460px) {
  .wgl-subjects { grid-template-columns: 1fr; }
  .wgl-nav-actions .wgl-btn-ghost { display: none; }
  .wgl-nav-actions .wgl-btn-primary { padding: 8px 14px; font-size: 12.5px; }
}