/* Premium visual layer for landing.html only, matching the dashboard and other
   course pages. Linked AFTER both the page's own <style> block and
   components/premium.css, so these rules win on tied specificity and layer on
   top of the existing layout rather than replacing it. Nothing here changes
   layout (position/width/display), element IDs, copy, or the colour palette —
   only depth (gradients/shadows), typography weight and motion (transitions).

   To revert the page, remove its two <link> lines for premium.css and
   landing-premium.css -- everything below only takes effect while this file's
   link is present. landing.html.bak is a full pre-premium backup of the page. */

/* Wireframe mountain watermark -- a single pointed peak with smooth curved
   sides (white, low opacity), a smaller second peak overlapping its right
   flank, a small fainter secondary bump off to the left for depth, a ground
   line and a few scattered stars above, same white-on-grey palette as the
   rest of the site -- plus a vertically-flipped copy of the whole thing
   mirrored across the ground line, so a second set of peaks points downward
   like a reflection. The pricing cards have solid backgrounds so it never
   shows through them. */
body {
  background-color: #262626;
  background-image:
    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1060'><g id='m'><path d='M60,520 C75,480 100,460 130,460 C150,460 165,480 180,520 Z' fill='white' fill-opacity='0.04'/><path d='M150,520 C250,420 350,250 500,120 C650,250 750,420 850,520 Z' fill='white' fill-opacity='0.1'/><path d='M500,120 L500,520 M500,120 L320,370 M500,120 L680,370 M320,370 Q500,340 680,370' stroke='white' stroke-opacity='0.08' stroke-width='1.1' fill='none'/><path d='M580,520 C580,460 680,380 780,260 C880,380 980,460 980,520 Z' fill='white' fill-opacity='0.09'/><path d='M780,260 L780,520 M780,260 L700,400 M780,260 L860,400' stroke='white' stroke-opacity='0.07' stroke-width='1' fill='none'/><path d='M20,520 L100,516 L200,523 L300,515 L400,522 L500,517 L600,524 L700,516 L800,522 L900,517 L980,520' stroke='white' stroke-opacity='0.07' stroke-width='1.3' fill='none'/><circle cx='120' cy='100' r='1.5' fill='white' fill-opacity='0.25'/><circle cx='220' cy='70' r='1.3' fill='white' fill-opacity='0.2'/><circle cx='400' cy='60' r='1.6' fill='white' fill-opacity='0.22'/><circle cx='620' cy='80' r='1.3' fill='white' fill-opacity='0.18'/><circle cx='720' cy='60' r='1.5' fill='white' fill-opacity='0.2'/><circle cx='850' cy='90' r='1.4' fill='white' fill-opacity='0.18'/><circle cx='920' cy='140' r='1.3' fill='white' fill-opacity='0.16'/><circle cx='60' cy='150' r='1.4' fill='white' fill-opacity='0.18'/></g><use href='%23m' transform='translate(0,1040) scale(1,-1)'/></svg>"),
    radial-gradient(circle at 50% 0%, #3a3a3a 0%, #2b2b2b 70%, #262626 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center 210px, center top;
  background-size: min(900px, 95%) auto, cover;
  background-attachment: fixed, fixed;
}

/* Mobile browsers (iOS Safari and many Android browsers) handle a fixed
   background very poorly: it forces the whole page to repaint on every
   scroll frame instead of compositing normally, which also makes other
   position: fixed elements (the Log in / Our Pledge buttons) visibly lag
   and "float" behind the content while scrolling. Falling back to a
   normal scrolling background on small screens fixes that. */
@media (max-width: 700px) {
  body {
    background-attachment: scroll, scroll;
  }
}

/* Top-right login button: same glow treatment as buttons elsewhere on the site */
.top-login {
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.top-login:hover {
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.14);
}

/* Hero heading: a little more presence, same white colour */
.hero h1 {
  letter-spacing: 0.3px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.section h2 {
  letter-spacing: 0.3px;
}

/* Buttons (anchor-based .button, and the Enroll <button>) */
.button {
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.button:hover {
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.14);
}

.button:active {
  transform: translateY(1px);
}

/* Pricing / tier cards: subtle gradient depth and a resting shadow, so the
   hover lift (already set in the page's own <style>) has something to lift from */
.card {
  background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.tier-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.price-tag {
  text-shadow: 0 0 18px rgba(126, 226, 160, 0.35);
}

/* Enroll form input: same focus glow used on inputs across the rest of the site */
.enroll-input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.enroll-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 138, 138, 0.14);
  background: #1a1a1a;
}