/* Reset and base styles */

/* --------------------------------------------------------------------
   Base reset and theme variables
   All elements start with zero margin/padding and inherit the box model.
   Colour variables are declared on :root and overridden in .dark mode to
   enable a consistent dark/light theme throughout the site. To add new
   colours simply define additional variables here and reference them
   using the var() function in the styles below.  
--------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Light theme defaults */
:root {
  --bg: #f6f7fb;            /* page background */
  --text: #0f172a;          /* primary text colour */
  --muted-text: #374151;    /* secondary text */
  --card-bg: #ffffff;       /* card backgrounds */
  --card-text: #111827;     /* text on cards */
  --primary: #5d5fef;       /* primary accent colour (indigo) */
  --secondary: #06b6d4;     /* secondary accent colour (cyan) */
  --highlight: #f8fafc;     /* light surfaces */
  --link: #5d5fef;          /* link colour */
  --notice-bg: rgba(0,0,0,0.5); /* modal overlay */
  --modal-bg: #ffffff;      /* modal background */
}

/* Dark theme overrides */
.dark {
  --bg: #0f172a;
  --text: #f5c840;          /* pleasant yellow for primary text */
  --muted-text: #e6d28b;    /* softened yellow for secondary text */
  --card-bg: rgba(255,255,255,0.05);
  --card-text: #f5c840;
  --primary: #f5c840;       /* use the same yellow as primary accent */
  --secondary: #825ef1;     /* violet accent to complement yellow */
  --highlight: rgba(255,255,255,0.08);
  --link: #f5c840;
  --notice-bg: rgba(0,0,0,0.7);
  --modal-bg: rgba(0,0,0,0.6);
}

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
  /* Establish stacking context for ::before overlay */
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;

  /* Prevent unintended horizontal scrolling by hiding overflow */
  overflow-x: hidden;
}

/* -------------------------------------------------------------------
   Copy protection
   -------------------------------------------------------------------
   To discourage casual copying of content, the following rules disable
   text selection across the entire page. Combined with the inline
   script injected into each HTML page, this helps prevent right‑click
   context menus, copy/paste shortcuts and the F12 dev tools key.  Be
   aware that aggressive copy protection may degrade user experience
   and can be circumvented by determined users.  Modify or remove
   these rules if you wish to re-enable text selection in the future.
*/
body,
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Astronaut background overlay: displays the lilmobi astronaut image faintly behind all content */
/*
  Global astronaut background
  ------------------------------------------------------------------
  The original design referenced an image in a non‑existent `assets/lilmobi.jpg` file.
  To ensure the whimsical astronaut shows on every page, we've extracted the
  base64‑encoded image from the FRP page into a standalone `astronaut.png`
  asset. The background is fixed to cover the viewport and has a low
  opacity so that it remains a subtle backdrop without overpowering
  content. The `pointer-events: none` keeps the background from
  interfering with scrolling or clicks.  
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Use the astronaut graphic extracted from FRP instead of the missing lilmobi file */
  background: url('astronaut.png') center/cover no-repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
}

/* Top brand bar */
.top-brand-bar {
  background: #ffffff;
  text-align: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.top-brand-bar img {
  max-height: 50px;
  vertical-align: middle;
}
.top-brand-bar .tagline {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.05rem;
}

/* Header and navigation */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 5%;
  /* Use theme card background so the header adapts to dark/light modes */
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.3rem;
  /* Inherit primary text colour from theme */
  color: var(--text);
}
.logo span {
  margin-left: 0.4rem;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
nav a {
  text-decoration: none;
  font-weight: 500;
  /* Links use muted text colour which adapts per theme */
  color: var(--muted-text);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
nav a:hover {
  background: rgba(93, 95, 239, 0.1);
  /* On hover links use primary accent */
  color: var(--primary);
}

.dropdown {
  position: relative;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: none;
  min-width: 150px;
  overflow: hidden;
  z-index: 1000;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu a {
  display: block;
  padding: 0.6rem 1rem;
  color: var(--muted-text);
}
.dropdown-menu a:hover {
  background: var(--highlight);
  color: var(--primary);
}

/* Hero slider */
.hero-slider {
  position: relative;
  overflow: hidden;
  /* Ensure the hero has visible height so layered slides are displayed */
  min-height: 420px;
}
.hero-slider .slides {
  display: flex;
  transition: transform 0.7s ease;
}
.hero-slider .slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 5%;
  min-height: 420px;
  /* Remove direct gradient on the slide itself. A semi‑transparent overlay via ::before will now supply the gradient. */
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.hero-text {
  max-width: 50%;
}
.hero-text h1 {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.hero-text p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
.btn-group {
  display: flex;
  gap: 1rem;
}
.btn-primary {
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  /* Primary buttons adopt the theme accent colour and invert text */
  background: var(--primary);
  color: var(--bg);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}

/* In dark mode, ensure primary button text is dark for contrast on the yellow background */
.dark .btn-primary {
  color: #0f172a;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 85%, #000000 15%);
}
.btn-secondary {
  padding: 0.8rem 1.4rem;
  border-radius: 10px;
  /* Secondary buttons are outlined and inherit the accent colour */
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover {
  background: color-mix(in srgb, var(--primary) 15%, transparent 85%);
}

/* Theme toggle button sitting in the header */
.theme-toggle {
  font-size: 1.3rem;
  margin-left: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--primary);
  transition: color 0.3s ease;
}
.theme-toggle:hover {
  color: color-mix(in srgb, var(--primary) 80%, var(--secondary) 20%);
}
.hero-image img {
  width: 100%;
  max-width: 460px;
  border-radius: 20px;
}
.hero-slider .controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.hero-slider .controls span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.hero-slider .controls span.active {
  background: #ffffff;
}

/* Hero slider fade and zoom effect */
/* Override positioning to layer slides on top of each other */
.hero-slider {
  position: relative;
  overflow: hidden;
}
.hero-slider .slides {
  position: relative;
  height: 100%;
}
.hero-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 5%;
  color: #ffffff;
  /* Ensure overlay pseudo-element sits behind content and is clipped */
  overflow: hidden;
}
.hero-slider .slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Create a translucent gradient behind each hero slide to let the astronaut background show through */
.hero-slider .slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  /* Lower the opacity so the astronaut background remains visible behind the gradient overlay */
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

/* Modal overlay for offline notice */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--notice-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal {
  background: var(--modal-bg);
  border-radius: 16px;
  padding: 2rem;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.modal h3 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
}
.modal p {
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--muted-text);
}
.modal button {
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}
.modal button:hover {
  background: color-mix(in srgb, var(--primary) 80%, #000000 20%);
}

/* FRP categories row */
.frp-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.frp-categories .cat {
  padding: 0.4rem 0.8rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  background: #f3f4f6;
  transition: background 0.2s, color 0.2s;
}
.frp-categories .cat.active,
.frp-categories .cat:hover {
  background: #5d5fef;
  color: #ffffff;
}

/* FRP table styles */
.frp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.frp-table th,
.frp-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.85rem;
}
.frp-table th {
  text-align: left;
  background: #f3f4f6;
  font-weight: 600;
}
.frp-table td.support-yes {
  color: #10b981;
  font-weight: 600;
}
.frp-table td.support-no {
  color: #ef4444;
  font-weight: 600;
}

/* Search input for FRP table */
.search-input {
  padding: 0.6rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  max-width: 320px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Legal notice styling */
.legal-notice {
  font-size: 0.75rem;
  color: var(--muted-text);
  margin-top: 1rem;
  line-height: 1.4;
}

/* Generic form inputs used on the contact page and elsewhere */
.input {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--card-bg);
  color: var(--card-text);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.input::placeholder {
  color: var(--muted-text);
  opacity: 0.7;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Repair section */
.repair {
  padding: 4rem 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: 2rem;
  background: var(--highlight);
}
.repair-image img {
  width: 100%;
  border-radius: 20px;
}
.repair-list {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.repair-list h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  color: var(--card-text);
}
.repair-list ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.repair-list li {
  display: flex;
  flex-direction: column;
  background: var(--highlight);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 1rem;
  /* Subtle 3D card effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

/* Lift repair cards on hover for 3D feel */
.repair-list li:hover {
  transform: translateY(-6px) perspective(600px) rotateX(0deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.repair-list li h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--card-text);
  margin-bottom: 0.4rem;
}
.repair-list li p {
  font-size: 0.85rem;
  color: var(--muted-text);
}

/* Advertise section */
.advertise {
  padding: 4rem 5%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  align-items: center;
}
.advertise-content h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.advertise-content p {
  font-size: 1rem;
  margin-bottom: 1.2rem;
  max-width: 420px;
}
.advertise .plans ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.advertise-image img {
  width: 100%;
  border-radius: 20px;
}

/* How it works section */
.how {
  padding: 4rem 5%;
  background: var(--highlight);
}
.how h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  text-align: center;
  color: #111827;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.how-steps .step {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.how-steps .step .number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.how-steps .step h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--card-text);
}
.how-steps .step p {
  font-size: 0.85rem;
  color: var(--muted-text);
}

/* CTA section */
.cta {
  padding: 3rem 5%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  text-align: center;
}
.cta h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.cta p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* === LILMOBIMECHANIC PREMIUM FOOTER === */
.lmm-footer {
  background: var(--card-bg);
  color: var(--text);
  padding: 2rem 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* main row (YouTube | Center text | Payments) */
.lmm-bar {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* YouTube link */
.lmm-yt {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  transition: color 0.25s ease;
}
.lmm-yt:hover { color: #ff0000; }

/* center text */
.lmm-copy {
  justify-self: center;
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.95;
}
.lmm-copy .brand {
  font-weight: 800;
  color: var(--accent, #FACC15);
}

/* payment icons */
.lmm-pay {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.lmm-pay img {
  height: 28px;
  width: auto;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.lmm-pay img:hover { transform: scale(1.08); }

/* legal note */
.lmm-legal {
  max-width: 950px;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  opacity: 0.8;
  color: var(--muted-text);
}

/* theme-specific */
html[data-theme="dark"] .lmm-footer {
  color: #FACC15;
}
html[data-theme="light"] .lmm-footer {
  color: #1e293b;
}
html[data-theme="dark"] .lmm-legal,
html[data-theme="dark"] .lmm-copy .brand {
  color: #FACC15;
}
html[data-theme="light"] .lmm-legal,
html[data-theme="light"] .lmm-copy .brand {
  color: #1e293b;
}

/* responsive */
@media (max-width: 780px) {
  .lmm-bar {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 0.6rem;
  }
  .lmm-yt,
  .lmm-pay {
    justify-self: center;
  }
}/* =====================================================
   🔰 LILMOBIMECHANIC UNIVERSAL FOOTER — PERFECT ALIGNMENT
   ===================================================== */
.lmm-footer {
  background: var(--card-bg);
  color: var(--text);
  padding: 2.2rem 5%;
  border-top: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.lmm-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(250,204,21,0.6), rgba(255,0,0,0.5), rgba(250,204,21,0.6));
}

/* ------------- MAIN FLEX ROW ------------- */
.lmm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 1150px;
  flex-wrap: wrap;
}

/* Left (YouTube) */
.lmm-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.lmm-yt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  transition: color 0.3s ease;
}
.lmm-yt:hover { color: #ff0000; }

/* Center (Brand Text) */
.lmm-center {
  flex: 1;
  display: flex;
  justify-content: center;
}
.lmm-copy {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.95;
}
.lmm-copy .brand {
  font-weight: 800;
  color: var(--accent, #FACC15);
}

/* Right (Payments) */
.lmm-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}
.lmm-right img {
  height: 28px;
  width: auto;
  transition: transform 0.3s ease;
}
.lmm-right img:hover { transform: scale(1.1); }

/* Legal line */
.lmm-legal {
  max-width: 900px;
  font-size: 0.85rem;
  opacity: 0.85;
  line-height: 1.6;
  color: var(--muted-text);
}

/* --------- THEME COLORS --------- */
html[data-theme="dark"] .lmm-footer {
  color: #FACC15;
}
html[data-theme="light"] .lmm-footer {
  color: #1e293b;
}
html[data-theme="dark"] .lmm-copy .brand,
html[data-theme="dark"] .lmm-legal { color: #FACC15; }
html[data-theme="light"] .lmm-copy .brand,
html[data-theme="light"] .lmm-legal { color: #1e293b; }

/* --------- RESPONSIVE --------- */
@media (max-width: 780px) {
  .lmm-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
  }
  .lmm-left, .lmm-center, .lmm-right {
    justify-content: center;
  }
}
/* 🌈 HERO CONTACT HEADER FIX */
.contact-hero {
  text-align: center;
  padding: 5rem 1.5rem;
  min-height: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Use theme colours for the gradient so it matches the rest of the site */
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #ffffff;
  transition: background 0.6s ease-in-out, color 0.6s ease-in-out;
  border-bottom: 2px solid rgba(255,255,255,0.15);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}

.contact-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.contact-hero p {
  font-size: 1.1rem;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0.95;
}

/* 🌙 Dark Mode Gradient */
body.dark .contact-hero {
  /* Dark mode gradient also derives from the theme variables */
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

body.dark .contact-hero::after {
  background: radial-gradient(circle at bottom left, rgba(255,255,255,0.08), transparent 70%);
}

/* ✨ Contact Box Adjustment for Balance */
.contact-section {
  padding: 90px 20px;
}

.contact-box {
  max-width: 880px;
  margin-top: -40px;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
  backdrop-filter: blur(18px);
  transition: background .4s ease, box-shadow .4s ease;
}

body:not(.dark) .contact-box {
  background: rgba(255,255,255,0.9);
}

body.dark .contact-box {
  background: rgba(30,41,59,0.75);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}

/* Responsive text */
@media (max-width: 600px) {
  .contact-hero h1 { font-size: 2rem; }
  .contact-hero p { font-size: 0.95rem; }
}

/* ------------------------------------------------------------------
   Global watermark overlay

   A subtle diagonal watermark is rendered across every page to deter
   unauthorised copying of designs.  The text scales with the
   viewport and flips colour in dark mode so that it remains
   discernible without overpowering the content.  Pointer events are
   disabled so it never interferes with interaction.
*/
body::after {
  content: "LILMOBIMECHANIC";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 800;
  /* Increase opacity slightly to ensure the watermark is perceptible on light backgrounds. */
  color: rgba(0, 0, 0, 0.10);
  pointer-events: none;
  z-index: 5000;
  white-space: nowrap;
}
body.dark::after {
  /* In dark mode the watermark uses a light colour with a bit more opacity */
  color: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------
   Legal section styles

   The terms page presents its content within a dedicated legal
   section.  These styles ensure the legal notice visually ties into
   the rest of the site by using theme colours and card surfaces.
*/
.legal-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5rem 1.5rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.legal-card {
  max-width: 950px;
  background: var(--card-bg);
  padding: 3rem;
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  color: var(--card-text);
  line-height: 1.8;
}
.dark .legal-card {
  background: var(--card-bg);
  color: var(--card-text);
}
.legal-section h2 {
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 1.5rem;
  text-align: center;
}
.legal-section h3 {
  color: var(--secondary);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.legal-section ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.legal-section p {
  margin-bottom: 1rem;
}
.legal-section p:last-child {
  margin-bottom: 0;
}

/*
  Italicised legal note with coloured border that appears at the
  bottom of the legal section.
*/
.legal-note {
  font-style: italic;
  color: var(--muted-text);
  border-left: 4px solid var(--primary);
  padding-left: 0.75rem;
  margin-top: 2rem;
}