/* ==========================================================================
   DIGITAL JUNGLE COMPUTERS — MAIN STYLESHEET (light theme, logo-matched)
   --------------------------------------------------------------------------
   Palette sampled directly from the client's logo: leaf greens, a bright
   circuit blue, and warm coral/orange used sparingly as an accent. Kept
   deliberately calmer than a v1 dark theme — fewer simultaneous animations,
   solid fills instead of gradients/glows, plain dividers instead of
   animated SVGs — while keeping the same section structure and class names
   so this drops in without reworking the HTML.

   Structure (unchanged from v1, values updated throughout):
   1.  Design Tokens
   2.  Reset & Base
   3.  Utilities
   4.  Loader
   5.  Section dividers
   6.  Navigation
   7.  Buttons
   8.  Hero
   9.  How It Works
   10. Services
   11. Pricing
   12. About
   13. Testimonials
   14. FAQ
   15. Contact
   16. Footer
   17. Modal (Booking)
   18. Toast notifications
   19. Floating action buttons
   20. Scroll-reveal animation classes
   20b. Confirmation page (thank-you.html)
   21. Responsive
   22. Reduced motion / accessibility
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* --- Core palette: sampled from the logo -------------------------------
     Greens: #1f7d44 (deep leaf) up through #2ecc71 (brand green).
     Blue:   #0d6ecf, the logo's circuit-blue accent.
     Coral:  #f48b45 / #fd5f57, the logo's warm leaf accents — used sparingly.
  ------------------------------------------------------------------------ */
  --bg-void: #f3f7f4;
  --bg-primary: #ffffff;
  --bg-secondary: #f6f9f7;
  --bg-elevated: #ffffff;

  --grey-card: #ffffff;
  --grey-card-light: #f4f8f5;
  --border-glass: #e3e9e5;
  --border-glass-strong: #d3ddd6;

  --surface-glass: rgba(46, 204, 113, 0.045);
  --surface-glass-strong: rgba(46, 204, 113, 0.08);

  --green: #2ecc71;
  --green-dark: #1f7d44;
  --green-darker: #143a24;
  --green-bright: #137a46;
  --green-glow: rgba(46, 204, 113, 0.22);

  --blue: #0d6ecf;
  --blue-dark: #123a63;
  --blue-bg: #eaf4fc;

  --text-primary: #10201a;
  --text-secondary: #4b5c54;
  --text-muted: #66766e;

  --danger: #e0453f;
  --warning: #f48b45;

  /* --- Typography ---------------------------------------------------------
     Same pairing as before: Space Grotesk for display, Inter for body,
     JetBrains Mono for small technical/status labels.
  ------------------------------------------------------------------------ */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* --- Layout --------------------------------------------------------- */
  --max-width: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(16, 32, 26, 0.06);
  --shadow-md: 0 10px 26px rgba(16, 32, 26, 0.08);
  --shadow-lg: 0 20px 46px rgba(16, 32, 26, 0.10);
  --shadow-glow: 0 0 0 1px rgba(46, 204, 113, 0.28), 0 10px 26px rgba(46, 204, 113, 0.14);

  --transition-fast: 0.18s ease;
  --transition-med: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);

  --nav-height: 76px;

  /* --- Home page hero background image (optional) -------------------------
     By default the hero has a plain white background (just the faint logo
     watermark). To use your own photo/image behind it instead:
       1. Add your image file to the images/ folder, e.g. images/hero-bg.jpg
       2. Replace the line below with (swap in your filename):
          --hero-bg-image: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)), url('../images/hero-bg.jpg');
     The white gradient layered on top keeps the hero text easy to read over
     any photo — raise or lower that 0.85 opacity for less/more of the image
     to show through. Set back to `none` at any time to remove it again.
  ------------------------------------------------------------------------ */
  --hero-bg-image: none;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

button, input, textarea, select {
  font-family: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h2.section-title { font-size: clamp(1.9rem, 4vw, 2.75rem); }

p { color: var(--text-secondary); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--green-dark);
  color: #ffffff;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 10000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   3. UTILITIES
   ========================================================================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding: clamp(4rem, 7vw, 6.5rem) 0; position: relative; }
.section--alt { background: var(--bg-secondary); }

.section-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--blue-bg);
  border: 1px solid var(--border-glass-strong);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px 1px var(--green-glow);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}

.section-head p { margin-top: 0.85rem; font-size: 1.05rem; }

.text-gradient {
  background: linear-gradient(100deg, var(--blue), var(--green) 55%, var(--green-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: var(--bg-elevated);
  border: 1px solid var(--border-glass);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.inline-link { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.inline-link:hover { color: var(--green-darker); }

.pricing-note {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ==========================================================================
   4. LOADER
   Simplified: the logo mark with a single spinning ring — no custom path
   animation to maintain.
   ========================================================================== */
#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: var(--bg-primary);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-mark {
  width: 72px; height: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-mark img {
  width: 46px; height: 46px;
  border-radius: 50%;
}
.loader-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--border-glass);
  border-top-color: var(--green);
  animation: loaderSpin 0.9s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
.loader-text {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.loader-text span { color: var(--green-dark); }

/* ==========================================================================
   5. SECTION DIVIDERS
   A single plain gradient rule replaces the old animated SVG vine dividers.
   ========================================================================== */
.section-divider {
  width: min(560px, 70%);
  height: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--green) 50%, transparent);
  opacity: 0.6;
}

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow var(--transition-med), height var(--transition-med);
}
.navbar.scrolled {
  height: 66px;
  box-shadow: var(--shadow-sm);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
}
.brand-mark {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-name .accent { color: var(--green-dark); }
.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.nav-links a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 0.4rem 0.1rem;
  transition: color var(--transition-fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--green);
  border-radius: 2px;
  transition: width var(--transition-med);
}
.nav-links a:hover,
.nav-links a.active { color: var(--text-primary); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 0.9rem; }

.desktop-only { }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  z-index: 1100;
}
.nav-toggle span {
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   7. BUTTONS
   Solid fills, simple shadows — no gradients or glow rings.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--green-dark);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--green-darker);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-ghost {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-glass-strong);
}
.btn-ghost:hover {
  border-color: var(--green);
  background: var(--surface-glass);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: #ffffff;
  color: var(--green-dark);
  border: 1px solid var(--border-glass-strong);
}
.btn-whatsapp:hover { background: var(--surface-glass); border-color: var(--green); transform: translateY(-2px); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.88rem; }

/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + 2rem);
  overflow: hidden;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* A single faint watermark of the real logo replaces the old animated
   circuit-vine SVG background — same "jungle circuit" idea, far simpler. */
.hero-watermark {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--green-dark);
  margin-bottom: 1.4rem;
}
.hero-eyebrow .flag { font-size: 1.1rem; }

.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  margin-bottom: 1.3rem;
}

.hero-typing-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  min-height: 1.8em;
  margin-bottom: 1.8rem;
}
.hero-typing-wrap .prefix { color: var(--green-dark); }
#typing-target { color: var(--text-primary); font-weight: 600; }
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--green);
  animation: blinkCursor 0.85s steps(1) infinite;
}
@keyframes blinkCursor { 50% { opacity: 0; } }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.6rem;
}

.hero-stats {
  display: flex;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  flex-wrap: wrap;
}
.hero-stat { min-width: 90px; }
.hero-stat .num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--green-dark);
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}
.hero-stat .label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Hero visual: a simple, static "diagnostics" panel — no floating or
   pulsing animation, just a clean card. */
.hero-visual { position: relative; }
.device-panel {
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.device-panel .panel-topbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.device-panel .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-glass-strong); }
.device-panel .dot.green { background: var(--green); }
.device-panel .panel-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.device-panel .panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.2rem;
  border-bottom: 1px dashed var(--border-glass);
  font-size: 0.88rem;
}
.device-panel .panel-row:last-of-type { border-bottom: none; }
.device-panel .panel-row .status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface-glass-strong);
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.device-panel .panel-row .status::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
}
.device-panel .panel-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.connection-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.connection-bars span { width: 4px; background: var(--green); border-radius: 2px; opacity: 0.9; }
.connection-bars span:nth-child(1) { height: 40%; }
.connection-bars span:nth-child(2) { height: 70%; }
.connection-bars span:nth-child(3) { height: 100%; }
.connection-bars span:nth-child(4) { height: 60%; }

.badge-float {
  position: absolute;
  bottom: -1.2rem;
  right: 1.6rem;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: var(--shadow-md);
}
.badge-float i { color: var(--green-dark); font-size: 1.3rem; }
.badge-float .badge-num { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.badge-float .badge-label { font-size: 0.72rem; color: var(--text-muted); }

.scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  z-index: 1;
}
.scroll-cue .mouse {
  width: 22px; height: 34px;
  border: 2px solid var(--border-glass-strong);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-cue .mouse::before {
  content: "";
  width: 3px; height: 7px;
  background: var(--green);
  border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  100% { opacity: 0; }
}

/* ==========================================================================
   9. HOW IT WORKS
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.step-card {
  padding: 2rem 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
  transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}
.step-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: var(--shadow-md); }
.step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--green);
  margin-bottom: 0.8rem;
  display: block;
}
.step-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step-card p { font-size: 0.92rem; }

/* ==========================================================================
   10. SERVICES
   ========================================================================== */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.service-card {
  flex: 1 1 calc(33.333% - 1rem);
  max-width: calc(33.333% - 1rem);
  padding: 2rem 1.7rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--green);
  box-shadow: var(--shadow-md);
}
.service-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass-strong);
  margin-bottom: 1.3rem;
  transition: background var(--transition-med);
}
.service-card:hover .service-icon { background: var(--blue-bg); }
.service-icon i { font-size: 1.4rem; color: var(--green-dark); }
.service-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.service-card p { font-size: 0.92rem; }
.service-tag {
  margin-top: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.service-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* ==========================================================================
   11. PRICING
   ========================================================================== */
.pricing-group { margin-bottom: 3.5rem; }
.pricing-group:last-child { margin-bottom: 0; }
.pricing-group-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.8rem;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2.4rem 2rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
  transition: transform var(--transition-med), box-shadow var(--transition-med);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price-card--highlight {
  border-color: rgba(46, 204, 113, 0.4);
  box-shadow: var(--shadow-glow);
  position: relative;
}
.price-card--highlight::before {
  content: "Most Popular";
  position: absolute;
  top: -13px;
  right: 1.6rem;
  background: var(--green-dark);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}
.price-plan { font-family: var(--font-mono); font-size: 0.78rem; color: var(--green-dark); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; }
.price-card h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.price-value { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.3rem; }
.price-value .amount { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; }
.price-value .period { color: var(--text-muted); font-size: 0.95rem; }
.price-desc { font-size: 0.9rem; margin-bottom: 1.6rem; }
.price-features { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; flex-grow: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; color: var(--text-secondary); }
.price-features i { color: var(--green-dark); margin-top: 0.2rem; flex-shrink: 0; }

/* ==========================================================================
   11b. THREE-PILLAR OVERVIEW (below the hero) + shared group/section helpers
   ========================================================================== */
.pillar-card { position: relative; }
.pillar-card .inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Generic centered sub-heading used inside both the Services and Pricing
   sections to label each of the three pillars — same look, reused so the
   two sections read as one consistent system. */
.pricing-group-title, .group-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.8rem;
}
.services-group { margin-bottom: 3.5rem; }
.services-group:last-child { margin-bottom: 0; }

/* A pricing group with only one card (Remote IT Support) centers it
   instead of letting a lone auto-fit card stretch to fill the row. */
.pricing-grid--single { display: flex; justify-content: center; }
.pricing-grid--single .price-card { max-width: 420px; width: 100%; }

/* ==========================================================================
   HERO BROWSER MOCKUP — replaces the IT-diagnostics panel used when the
   site's primary offer was remote support; this one echoes a live
   website + hosting status instead, to match the new core business.
   ========================================================================== */
.browser-mockup {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.browser-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border-glass);
}
.browser-topbar .browser-url {
  margin-left: 0.6rem;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.browser-body { padding: 1.4rem 1.1rem; }
.wf-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
.wf-logo { width: 26px; height: 26px; border-radius: 6px; background: var(--green-dark); flex-shrink: 0; }
.wf-nav-dot { width: 34px; height: 8px; border-radius: var(--radius-pill); background: var(--border-glass-strong); margin-left: auto; }
.wf-nav-dot:first-of-type { margin-left: auto; }
.wf-hero { margin-bottom: 1.3rem; }
.wf-line { display: block; height: 10px; border-radius: 5px; background: var(--border-glass-strong); margin-bottom: 0.55rem; }
.wf-line-lg { width: 78%; height: 16px; background: var(--text-primary); opacity: 0.85; }
.wf-line-md { width: 55%; }
.wf-button { display: block; width: 96px; height: 26px; border-radius: var(--radius-pill); background: var(--green-dark); margin-top: 0.9rem; }
.wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.wf-card { display: block; height: 46px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border-glass); }
.browser-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--border-glass);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--green-dark);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-glass-strong);
}
.status-pill i { font-size: 0.6rem; }

/* ==========================================================================
   12. ABOUT
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
}
.about-visual { position: relative; }
.about-illustration {
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.about-illustration svg { width: 100%; height: auto; }
.about-copy .eyebrow { margin-bottom: 1rem; }
.about-copy h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 1.1rem; }
.about-copy p { margin-bottom: 1.1rem; font-size: 1rem; }
.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.8rem;
}
.about-value {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
}
.about-value i { color: var(--green-dark); font-size: 1.2rem; margin-top: 0.15rem; }
.about-value h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.about-value p { font-size: 0.82rem; margin: 0; }

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.testimonial-card {
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
  transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med);
}
.testimonial-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: var(--shadow-md); }
.stars { color: var(--green-dark); font-size: 0.85rem; margin-bottom: 0.9rem; letter-spacing: 0.15em; }
.testimonial-card blockquote { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1.3rem; font-style: normal; }
.testimonial-person { display: flex; align-items: center; gap: 0.8rem; }
.avatar-ring {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
  background: var(--green-dark);
  flex-shrink: 0;
}
.testimonial-person .p-name { font-weight: 600; font-size: 0.92rem; }
.testimonial-person .p-loc { font-size: 0.76rem; color: var(--text-muted); }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.9rem; }
.faq-item {
  border-radius: var(--radius-md);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
  overflow: hidden;
  transition: border-color var(--transition-med);
}
.faq-item.open { border-color: var(--green); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.98rem;
}
.faq-question .icon-toggle {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-med), background var(--transition-med);
  color: var(--green-dark);
}
.faq-item.open .icon-toggle { transform: rotate(45deg); background: var(--green-dark); color: #ffffff; }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-med), padding var(--transition-med);
  padding: 0 1.5rem;
}
.faq-answer p { font-size: 0.92rem; padding-bottom: 1.4rem; }
.faq-item.open .faq-answer { max-height: 320px; }

/* ==========================================================================
   15. CONTACT
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
.contact-form-card, .contact-info-card {
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: var(--text-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border-glass-strong);
  color: var(--text-primary);
  font-size: 0.94rem;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--green);
  background: var(--surface-glass);
  outline: none;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; }

.info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-glass);
}
.info-row:last-of-type { border-bottom: none; }
.info-row i { color: var(--green-dark); font-size: 1.2rem; margin-top: 0.15rem; width: 24px; }
.info-row h4 { font-size: 0.92rem; margin-bottom: 0.2rem; }
.info-row p { font-size: 0.88rem; margin: 0; }
.info-row a:hover { color: var(--green-dark); }

.map-placeholder {
  margin-top: 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-glass);
  aspect-ratio: 16 / 9;
  position: relative;
}
.map-placeholder iframe { width: 100%; height: 100%; border: 0; }
.map-placeholder .map-tag {
  position: absolute;
  bottom: 0.8rem; left: 0.8rem;
  background: #ffffff;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--green-dark);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-glass);
  padding: 3.5rem 0 1.6rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.footer-brand .brand { margin-bottom: 0.9rem; }
.footer-brand p { font-size: 0.9rem; max-width: 320px; }
.footer-col h4 { font-size: 0.9rem; margin-bottom: 1.1rem; letter-spacing: 0.03em; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a { font-size: 0.88rem; color: var(--text-secondary); transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--green-dark); }
.footer-bottom {
  padding-top: 1.6rem;
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.footer-bottom-links { display: flex; gap: 1.4rem; }
.footer-bottom-links a { color: var(--text-muted); }
.footer-bottom-links a:hover { color: var(--green-dark); }

/* ==========================================================================
   17. TOGGLE OPTIONS
   Reusable "radio styled as a card" pattern — used for device type on the
   booking page. (Previously also powered a payment-method choice; the
   flow now goes straight to PayFast, but the pattern is kept generic.)
   ========================================================================== */
.toggle-options { display: flex; gap: 0.9rem; margin-bottom: 1.3rem; }
.toggle-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass-strong);
  background: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.toggle-option input { accent-color: var(--green-dark); }
.toggle-option:has(input:checked) { border-color: var(--green); background: var(--surface-glass); }
.toggle-option i { color: var(--green-dark); }

/* ==========================================================================
   18. TOAST
   ========================================================================== */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: min(92vw, 420px);
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border-glass-strong);
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
  transform: translateY(20px);
  opacity: 0;
  animation: toastIn 0.3s ease forwards;
}
.toast.success i { color: var(--green-dark); }
.toast.error i { color: var(--danger); }
@keyframes toastIn { to { transform: translateY(0); opacity: 1; } }
.toast.leaving { animation: toastOut 0.25s ease forwards; }
@keyframes toastOut { to { transform: translateY(20px); opacity: 0; } }

/* ==========================================================================
   19. FLOATING ACTION BUTTONS
   ========================================================================== */
.fab-stack {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-med);
}
.fab-whatsapp {
  background: var(--green-dark);
  color: #fff;
  font-size: 1.5rem;
}
.fab-top {
  background: #ffffff;
  border: 1px solid var(--border-glass-strong);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
}
.fab-top.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab:hover { transform: translateY(-4px) scale(1.05); }
.fab.fab-hidden { display: none; }

/* ==========================================================================
   20. SCROLL-REVEAL ANIMATION CLASSES
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.in-view > *:nth-child(1) { transition-delay: 0.04s; }
.stagger.in-view > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
.stagger.in-view > *:nth-child(4) { transition-delay: 0.22s; }
.stagger.in-view > *:nth-child(5) { transition-delay: 0.28s; }
.stagger.in-view > *:nth-child(6) { transition-delay: 0.34s; }
.stagger.in-view > *:nth-child(7) { transition-delay: 0.4s; }
.stagger.in-view > *:nth-child(8) { transition-delay: 0.46s; }
.stagger.in-view > *:nth-child(9) { transition-delay: 0.52s; }
.stagger.in-view > * { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   20b. CONFIRMATION PAGE (thank-you.html)
   ========================================================================== */
.member-hero {
  padding: calc(var(--nav-height) + 3rem) 0 1rem;
}
.member-hero .eyebrow { margin-bottom: 1rem; }
.member-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.6rem; }
.member-hero p { font-size: 1rem; max-width: 620px; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass-strong);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}
.status-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.locked-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 3.2rem 2.4rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
}
.locked-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.4rem;
}
.locked-icon i { font-size: 1.6rem; color: var(--green-dark); }
.locked-icon.icon-danger { background: #fdeceb; }
.locked-icon.icon-danger i { color: var(--danger); }
.locked-card h2 { font-size: 1.5rem; margin-bottom: 0.9rem; }
.locked-card p { font-size: 0.96rem; max-width: 460px; margin: 0 auto 1.7rem; }
.locked-reminder {
  max-width: 380px;
  margin: 0 auto 1.7rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  text-align: left;
}
.locked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.8rem;
}
.locked-note { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

.session-card {
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
  background: var(--grey-card);
  border: 1px solid var(--border-glass-strong);
  box-shadow: var(--shadow-glow);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: center;
}
.session-card .sc-plan-name { font-size: 1.5rem; margin-bottom: 0.3rem; }
.session-card .sc-note { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1.2rem; }
.sc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.6rem;
}
.sc-detail dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.sc-detail dd { font-size: 0.98rem; font-weight: 600; }
.sc-actions { display: flex; flex-direction: column; gap: 0.8rem; }

.support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.support-item {
  padding: 1.6rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
  text-align: center;
  transition: transform var(--transition-med), border-color var(--transition-med);
}
.support-item:hover { transform: translateY(-5px); border-color: var(--green); }
.support-item i { font-size: 1.6rem; color: var(--green-dark); margin-bottom: 0.9rem; }
.support-item h4 { font-size: 0.98rem; margin-bottom: 0.4rem; }
.support-item p { font-size: 0.85rem; margin: 0; }
.support-item a { color: var(--text-secondary); }
.support-item a:hover { color: var(--green-dark); }

.rustdesk-panel {
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
}
.rustdesk-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.rustdesk-header .rd-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  background: var(--surface-glass-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rustdesk-header .rd-icon i { font-size: 1.4rem; color: var(--green-dark); }
.rustdesk-header h3 { font-size: 1.3rem; }

.rustdesk-download-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.6rem 0;
}
.rustdesk-download {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-md);
  background: #ffffff;
  border: 1px solid var(--border-glass-strong);
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.rustdesk-download:hover { border-color: var(--green); background: var(--surface-glass); transform: translateY(-3px); }
.rustdesk-download i.os-icon { font-size: 1.5rem; color: var(--green-dark); }
.rustdesk-download .rd-os-name { font-weight: 600; font-size: 0.92rem; }
.rustdesk-download .rd-os-sub { font-size: 0.75rem; color: var(--text-muted); }
.rustdesk-download .fa-arrow-up-right-from-square { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }

.rustdesk-steps { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.6rem; }
.rustdesk-step { display: flex; gap: 1rem; align-items: flex-start; }
.rustdesk-step .rd-step-num {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  border: 1px solid var(--border-glass-strong);
  color: var(--green-dark);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.rustdesk-step h4 { font-size: 0.96rem; margin-bottom: 0.2rem; }
.rustdesk-step p { font-size: 0.88rem; margin: 0; }

.security-callout {
  margin-top: 1.8rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--radius-md);
  background: #fdf1e9;
  border: 1px solid #f6d9bf;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.security-callout i { color: var(--warning); margin-top: 0.15rem; }
.security-callout p { font-size: 0.86rem; margin: 0; }

/* ==========================================================================
   20c. BOOKING · PAYMENT · CONFIRMATION FLOW (booking.html / payment.html)
   ========================================================================== */

/* Progress indicator: Home → Booking → Payment → Confirmation.
   Static per page — each page hardcodes which steps are "done"/"current". */
.flow-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 auto 2.2rem;
}
.flow-step { display: flex; align-items: center; gap: 0.55rem; }
.flow-step-num {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-glass-strong);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}
.flow-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.flow-step.done .flow-step-num { background: var(--green-dark); border-color: var(--green-dark); color: #ffffff; }
.flow-step.done .flow-step-label { color: var(--text-secondary); }
.flow-step.current .flow-step-num { border-color: var(--green); color: var(--green-dark); background: var(--surface-glass-strong); }
.flow-step.current .flow-step-label { color: var(--text-primary); }
.flow-step-connector { width: 26px; height: 1px; background: var(--border-glass-strong); }

/* Two-column booking layout: form + a sticky live summary */
.booking-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.2rem;
  align-items: start;
}
.booking-form-card, .payment-summary-card {
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  background: var(--grey-card);
  border: 1px solid var(--border-glass);
}
.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.8rem 0 1rem;
}
.form-section-title:first-child { margin-top: 0; }
.form-section-title .step-chip {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface-glass-strong);
  color: var(--green-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Date navigation: big bold date heading + prev/day-picker/next row.
   The eyebrow above switches text between "Next Available Appointment"
   (auto-detected on load) and "Selected Date" (once the customer picks
   a different date themselves) — see initBookingPage() in script.js. */
.date-nav-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text-primary);
  margin: 0.3rem 0 1rem;
}
.date-nav {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.date-nav-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-glass-strong);
  background: #ffffff;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.date-nav-btn:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--surface-glass);
  transform: translateY(-2px);
}
.date-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.date-nav-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass-strong);
  background: #ffffff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.date-nav-input:hover, .date-nav-input:focus {
  border-color: var(--green);
  background: var(--surface-glass);
  outline: none;
}

/* Time slot picker — responsive auto-fill grid (no manual breakpoints
   needed: columns reflow naturally from a wide desktop card down to a
   single-hand phone width), rounded "pill card" buttons with a premium
   hover lift and a clear selected state using the site's primary green. */
.time-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.time-slot {
  padding: 0.85rem 0.6rem;
  min-height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass-strong);
  background: #ffffff;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.time-slot:hover:not(.selected) {
  border-color: var(--green);
  background: var(--surface-glass);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.time-slot.selected {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}
.time-slot-note {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 0.6rem 0;
}
.time-slot-note .btn { margin-top: 0.7rem; }
.field-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.field-error {
  font-size: 0.78rem;
  color: var(--danger);
  margin-top: 0.4rem;
  display: none;
}
.form-group.invalid .field-error { display: block; }
.form-group.invalid input,
.form-group.invalid textarea,
.form-group.invalid select { border-color: var(--danger); }

/* Live booking summary (booking.html) and payment summary (payment.html) */
.booking-summary-card {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
}
.booking-summary-card h3, .payment-summary-card h3 { font-size: 1.05rem; margin-bottom: 1.2rem; }
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--border-glass);
  font-size: 0.9rem;
}
.summary-row:last-of-type { border-bottom: none; }
.summary-row .s-label { color: var(--text-muted); }
.summary-row .s-value { font-weight: 600; text-align: right; }
.summary-total {
  display: flex;
  justify-content: space-between;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-glass-strong);
  font-size: 1.1rem;
  font-weight: 700;
}
.summary-total .s-value { color: var(--green-dark); font-family: var(--font-display); }
.summary-empty-note { font-size: 0.85rem; color: var(--text-muted); }

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 420px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-summary-card { position: static; }
}

@media (max-width: 900px) {
  .service-card { flex-basis: calc(50% - 0.75rem); max-width: calc(50% - 0.75rem); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .session-card { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .rustdesk-download-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .desktop-only { display: none; }

  .navbar.mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0;
    background: #ffffff;
    padding: 1.6rem 1.5rem 2.2rem;
    gap: 1.4rem;
    border-bottom: 1px solid var(--border-glass);
    box-shadow: var(--shadow-md);
    animation: mobileMenuIn 0.3s ease;
  }
  @keyframes mobileMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

  .service-card { flex-basis: 100%; max-width: 100%; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .toggle-options { flex-direction: column; }
  .sc-detail-grid { grid-template-columns: 1fr; }
  .rustdesk-download-grid { grid-template-columns: 1fr; }
  .hero-watermark { opacity: 0.05; width: 70vw; right: -20%; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 1.4rem; }
  .support-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   22. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}