/* ============================================================
   WAKEEL WEB, CYBERSPACE NOIR
   Fonts: Orbitron (display) · Rajdhani (body)
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  color-scheme: dark;    /* Tells browsers (especially Chrome/Safari) that
                            the page is dark, eliminates white flash and
                            ensures dark scrollbars + form-control defaults. */
  --bg:        #020510;
  --bg-2:      #05091a;
  --bg-3:      #080d22;
  --card:      rgba(8, 14, 32, 0.85);
  --card-s:    rgba(10, 17, 38, 0.92);

  --cyan:      #00d4ff;
  --cyan-2:    #06b6d4;
  --cyan-dim:  rgba(0, 212, 255, 0.10);
  --cyan-glow: rgba(0, 212, 255, 0.18);
  --blue:      #2563eb;
  --violet:    #7c3aed;
  --gold:      #f59e0b;

  /* Theme-factory tokens, Tech Innovation electric punch + Midnight Galaxy lavender */
  --electric:  #0066ff;
  --neon:      #00ffff;
  --lavender:  #a490c2;
  --cosmic:    #4a4e8f;
  --neon-glow: rgba(0, 255, 255, 0.22);

  --white:     #eef4ff;
  --muted:     #9ab0ce;
  --border:    rgba(0, 212, 255, 0.10);
  --border-hi: rgba(0, 212, 255, 0.35);

  --g-btn:     linear-gradient(135deg, #00ffff 0%, #0066ff 100%);
  --g-violet:  linear-gradient(135deg, #a490c2 0%, #4a4e8f 100%);
  --g-text:    linear-gradient(135deg, #00ffff 0%, #00d4ff 40%, #0066ff 100%);

  --sh-cyan:   0 0 40px rgba(0, 212, 255, 0.18);
  --sh-card:   0 8px 40px rgba(0, 0, 0, 0.55);

  --font-display: 'Orbitron', sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;

  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --ease:      cubic-bezier(.25, .46, .45, .94);
  --t:         all .3s var(--ease);

  /* Legacy aliases for inline styles */
  --dark:       var(--bg);
  --dark-2:     var(--bg-2);
  --dark-3:     var(--bg-3);
  --card-bg:    rgba(8, 14, 32, 0.85);
  --gray:       var(--muted);
  --gray-2:     #4a5a7a;
  --gray-light: #8899bb;
  --border-cyan:    rgba(0, 212, 255, 0.35);
  --border-mid:     rgba(0, 212, 255, 0.15);
  --transition:     var(--t);
  --grad-btn:       var(--g-btn);
  --grad-hero:      transparent;
  --shadow-cyan:    var(--sh-cyan);
  --sh-cyan:        0 0 40px rgba(0, 212, 255, 0.18);
  --cyan-glow-old:  rgba(0, 212, 255, 0.18);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; scroll-snap-type: y mandatory; background: var(--bg); overscroll-behavior: none; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}
/* Atmospheric aurora, fixed, sits behind the 3D canvas, gives the page depth
   (intentionally not flat-black like MALeads). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 10%, rgba(0, 102, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 80%, rgba(0, 212, 255, 0.12), transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 100%, rgba(164, 144, 194, 0.10), transparent 70%);
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Three.js canvas ──────────────────────────────────────────
   Explicit dark background prevents a white "block" flash during
   WebGL context creation, browsers paint the canvas white by
   default until the first frame is drawn.                       */
#three-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background: #020510;
}

/* ── Utility ────────────────────────────────────────────────── */
.container { width: min(1180px, 100% - 3rem); margin-inline: auto; }
.section    { padding: 6rem 0; position: relative; z-index: 1; }
.section-sm { padding: 4rem 0; position: relative; z-index: 1; }

.gradient-text {
  background: var(--g-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.2rem;
  padding: .35rem .75rem;
  border: 1px solid var(--border-hi);
  background: rgba(0, 212, 255, 0.04);
  border-radius: var(--radius-pill);
}
.section-label::before { display: none; }

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.005em;
  margin-bottom: 1rem;
}
.section-sub {
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.8;
}
.section-header          { margin-bottom: 3.5rem; }
.section-header.center   { text-align: center; }
.section-header.center .section-sub { margin-inline: auto; }

/* ── Section backgrounds (semi-transparent over 3D) ─────────── */
.bg-panel {
  background: rgba(2, 5, 16, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bg-panel-2 {
  background: rgba(5, 9, 26, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Tech grid micro-pattern ─────────────────────────────────── */
.tech-grid::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255, .025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none; z-index: 0;
}
.tech-grid > * { position: relative; z-index: 1; }

/* ── Buttons ────────────────────────────────────────────────── */
/* ── No-movement-on-hover lockdown ──
   Buttons and cards never translate or scale on hover, regardless of which
   page-specific rule tried to add a lift. Visual feedback is glow-only. */
.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-lg:hover,
.btn-sm:hover,
.nav-cta:hover,
.carousel-btn:hover,
.social-btn:hover,
.back-to-top:hover,
.pricing-peek-curtain:hover,
.pricing-card:hover,
.pricing-card.featured:hover,
.pricing-card.premium:hover,
.pricing-card.starter:hover,
.service-card:hover,
.neon-card:hover,
.belief-card:hover,
.plan-anchor:hover,
.pkg-card:hover,
.addon-card:hover,
.feature-card:hover,
.portfolio-showcase-card:hover .lr-img,
.hero-ctas-row2 .btn:hover,
.portfolio-showcase-card:hover .lr-visit {
  transform: none !important;
}

.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: .55rem;
  padding: 1rem 2.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: capitalize;
  text-align: center;
  border-radius: var(--radius-pill);
  transition: var(--t);
  position: relative; overflow: hidden;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;     /* kill the iOS grey tap flash */
  touch-action: manipulation;                    /* no double-tap zoom delay */
}

/* ── Touch / no-hover devices: lock buttons in place ──
   On mobile the :hover state fires on tap and stays stuck until the user
   taps elsewhere — and box-shadow expansion can make a button look like
   it "jumped." Disable every kind of state-driven motion on touch devices. */
@media (hover: none), (pointer: coarse) {
  .btn,
  .btn-primary,
  .btn-outline,
  .pricing-card .btn,
  .pricing-peek-curtain,
  .back-to-top,
  .carousel-btn,
  .social-btn,
  .nav-cta {
    transform: none !important;
  }
  .btn:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .pricing-card .btn:hover,
  .pricing-peek-curtain:hover,
  .back-to-top:hover,
  .carousel-btn:hover,
  .social-btn:hover,
  .nav-cta:hover,
  .hero-ctas-row2 .btn:hover {
    transform: none !important;
  }
  /* Kill the sweeping highlight on primary buttons too — it can read as
     movement out of the corner of the eye when triggered by a tap. */
  .btn-primary:hover::after { animation: none !important; }
}

.btn-primary {
  background: var(--g-btn);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow:
    0 0 14px rgba(0, 255, 255, 0.17),
    0 0 32px rgba(0, 102, 255, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary::after {
  content: '';
  position: absolute; top: -50%; left: -60%;
  width: 28%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255, .22), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover {
  box-shadow:
    0 0 32px rgba(0, 255, 255, 0.42),
    0 0 64px rgba(0, 102, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover::after { animation: shimmer .55s ease-out; }
@keyframes shimmer { to { left: 130%; } }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-hi);
  color: var(--cyan);
  border-radius: var(--radius-pill);
}
.btn-outline:hover {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: 0 0 32px rgba(0, 212, 255, 0.4), 0 0 60px rgba(0, 212, 255, 0.18);
}

.btn-lg  { padding: 1.15rem 2.7rem; font-size: 1.05rem; }
.btn-sm  { padding: .5rem 1.1rem; font-size: .65rem; }

/* ── Scroll reveal, progressive enhancement.
   Default: content is visible.
   Only after JS confirms the page is foregrounded does it scope opacity:0
   onto reveals; the IntersectionObserver then fades them in. If JS never
   runs or the tab stays hidden, content stays visible.
   ──────────────────────────────────────────────────────────── */
.js-ready .reveal:not(.visible) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js-ready .reveal.visible { opacity: 1; transform: translateY(0); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-delay-1          { transition-delay: .1s; }
.reveal-delay-2          { transition-delay: .2s; }
.reveal-delay-3          { transition-delay: .3s; }
.reveal-delay-4          { transition-delay: .4s; }

/* ── Neon card base ─────────────────────────────────────────── */
.neon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--t);
}
.neon-card:hover {
  border-color: var(--border-hi);
  box-shadow: 0 0 36px rgba(0,212,255, .22), inset 0 0 20px rgba(0,212,255, .04);
}

/* ─────────────────────────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────────────────────────── */
.nav-wrapper {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(2,5,16,0);
  /* The border and box-shadow are present in the layout from the start,
     just transparent, so the .scrolled class only animates their colors. */
  border-bottom: 1px solid transparent;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0);
  /* backdrop-filter always on so the GPU compositing layer is ready before
     any scroll/state change, no flash on first paint. */
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  /* No transitions on initial paint, JS adds .js-ready when ready. */
}
/* Transitions only enable after JS has had a chance to set the initial
   .scrolled state, so the nav never animates on first paint. */
.js-ready .nav-wrapper {
  transition:
    background   .3s var(--ease),
    box-shadow   .3s var(--ease),
    border-color .3s var(--ease);
}
.nav-wrapper.scrolled {
  background: rgba(2, 5, 16, 0.92);
  border-bottom-color: var(--border);            /* only the color changes, animates cleanly */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);     /* fades from transparent to dark, no pop-in */
}
.nav {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  gap: 1.2rem;                  /* trimmed from 2rem so the nav-links row has room to fit */
  flex-wrap: nowrap;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; gap: .7rem;
  flex-shrink: 0; line-height: 1;
}
.logo-mark {
  width: 42px; height: 42px;
  /* The wakeel-logo-circle PNG is the full-color brand mark — no background
     or mask, just the cyan rim + glow around it. */
  background: transparent;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(0, 212, 255, .45),
    0 0 18px rgba(0, 102, 255, .35);
  flex-shrink: 0;
  transition: var(--t);
}
.logo-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--white);
  white-space: nowrap;
  transition: var(--t);
}
/* "Web" picks up the site's cyan→blue gradient, pulled tight to "Wakeel" */
.logo-accent {
  background: var(--g-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: -.18em;
}

/* Hover: ring brightens, gradient glows, mark lifts */
.nav-logo:hover .logo-mark {
  box-shadow:
    0 0 0 2px rgba(0, 212, 255, .9),
    0 0 28px rgba(0, 102, 255, .5),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: scale(1.08);
}

.footer-logo .logo-mark { width: 38px; height: 38px; }
.footer-logo .logo-text { font-size: 1rem; }

.nav-links {
  display: flex; align-items: center;
  gap: 0; margin: 0 auto;
  flex-wrap: nowrap;          /* never break onto two lines */
  white-space: nowrap;
}
.nav-links a {
  /* inline-flex + align-items:center on EVERY link (not just dropdown triggers)
     so regular items and dropdown triggers sit on the exact same baseline. */
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  padding: .5rem .65rem; border-radius: 4px;
  transition: var(--t); position: relative;
  white-space: nowrap;
  line-height: 1;          /* prevent leading from offsetting against the caret SVG */
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  /* Anchor at the visual centre of the link and grow outward, so the
     underline always sits dead-centre under the page name. */
  left: 50%;
  width: calc(100% - 1.3rem);  /* link width minus the side padding */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  height: 1.5px;
  background: var(--cyan);
  border-radius: 1px;
  box-shadow: 0 0 6px var(--cyan);
  /* No transition on initial paint — JS adds .js-ready when it is safe
     for animations to play; this prevents the underline from animating
     in every time you load a new page (which looked like a flicker). */
}
.js-ready .nav-links a::after { transition: transform .3s var(--ease); }
.nav-links a:hover,
.nav-links a.active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-cta { flex-shrink: 0; }

/* ── Hamburger toggle, animates to an X when menu is open ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 1100;        /* above the open menu so it stays tappable */
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .18s ease;
  transform-origin: center;
}
/* Hamburger → X animation, driven by aria-expanded which JS already sets. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  /* Hide both nav-links and the CTA button by default on mobile, the
     hamburger toggle re-opens the menu and brings the CTA back. */
  .nav-links,
  .nav-cta { display: none; }

  /* ── Full-screen menu panel ── */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Fully opaque base so nothing bleeds through on iOS even when
       backdrop-filter is disabled or partially supported. */
    background: #020510;
    /* Then add a subtle gradient + blur on top for premium feel. */
    background-image:
      radial-gradient(ellipse 60% 50% at 100% 0%, rgba(0, 212, 255, .12), transparent 60%),
      radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0, 102, 255, .10), transparent 60%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter:         blur(24px) saturate(140%);
    /* Use both 100vh and 100dvh so iOS Safari's dynamic toolbar doesn't
       leave an uncovered strip at the bottom of the menu. */
    height: 100vh;
    height: 100dvh;
    padding: 5rem 1.25rem 6.5rem;   /* top: nav clearance · bottom: pinned CTA clearance */
    gap: 0;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1050;
    animation: menu-in .24s var(--ease);
  }
  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Each top-level nav link, big tappable row ── */
  .nav-links.open > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links.open > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.1rem .6rem !important;
    font-size: .82rem !important;
    letter-spacing: .14em;
    color: var(--white) !important;
    border-radius: 0 !important;
  }
  /* Suppress the desktop cyan underline inside the open menu */
  .nav-links.open > li > a::after { display: none !important; }
  /* Highlight the active page with a left accent + background tint */
  .nav-links.open > li > a.active {
    background: rgba(0, 212, 255, 0.06);
    box-shadow: inset 3px 0 0 var(--cyan);
  }

  /* ── Nested dropdown menu inside the panel ── */
  .nav-links.open .nav-dropdown {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 0;
    padding: 0 !important;
  }
  .nav-links.open .nav-dropdown ul {
    list-style: none; margin: 0; padding: 0;
  }
  .nav-links.open .nav-dropdown-item {
    padding: .85rem .9rem .85rem 1.6rem !important;
    font-size: .76rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0 !important;
  }
  .nav-links.open .nav-dropdown-item::before { display: none !important; }
  .nav-links.open .nav-dropdown-item.active {
    background: rgba(0, 212, 255, 0.07);
    color: var(--cyan) !important;
  }

  /* ── CTA pinned to bottom-left of viewport, easy thumb-reach ──
     Use body.menu-open instead of the adjacent-sibling selector so the
     rule wins even if JS or other CSS messes with display order. */
  body.menu-open .nav-cta {
    display: inline-flex !important;
    position: fixed !important;
    left: 1.25rem;
    right: auto;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    width: auto;
    margin: 0;
    justify-content: center;
    align-items: center;
    min-height: 46px !important;
    padding: .7rem 1.25rem !important;
    font-size: .72rem;
    letter-spacing: .12em;
    z-index: 1060;
    box-shadow:
      0 10px 28px rgba(0, 102, 255, .4),
      0 0 18px rgba(0, 212, 255, .22);
  }

  /* Bigger, more visible hamburger → X (target was only 22px wide before) */
  .nav-toggle { width: 44px; height: 44px }
  .nav-toggle span { width: 24px; height: 2.5px }
  .nav-toggle[aria-expanded="true"] {
    background: rgba(0, 212, 255, .08);
    border-radius: 50%;
  }

  /* Lock body scroll while the menu is open */
  body.menu-open { overflow: hidden; position: relative; }
  /* Also hide the navbar background so the menu's own bg is the only chrome.
     CRITICAL: removing backdrop-filter is required — when it's set on
     .nav-wrapper it makes the wrapper a containing block for its
     position:fixed descendants, which traps the bottom-pinned .nav-cta
     inside the navbar header instead of letting it position to the viewport. */
  body.menu-open .nav-wrapper {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   NAV DROPDOWN, Services + About menus
───────────────────────────────────────────────────────────── */
.nav-item-dropdown { position: relative; }

.nav-dropdown-trigger {
  /* display + align-items inherited from .nav-links a (now inline-flex);
     all we need here is the spacing for the caret. */
  gap: .28rem;
}
.nav-caret {
  display: inline-block;
  opacity: .6;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-item-dropdown:hover > .nav-dropdown-trigger .nav-caret,
.nav-item-dropdown:focus-within > .nav-dropdown-trigger .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown {
  /* desktop: floating panel under the trigger */
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 280px;
  background: rgba(2, 5, 16, 0.96);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter:         blur(24px) saturate(160%);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  padding: .55rem;
  box-shadow:
    0 0 32px rgba(0, 212, 255, 0.12),
    0 16px 48px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    visibility 0s linear .22s;
  z-index: 1001;
}
/* Invisible bridge so the cursor doesn't escape the hover area */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.nav-dropdown ul {
  display: flex; flex-direction: column;
  gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-item-dropdown:hover > .nav-dropdown,
.nav-item-dropdown:focus-within > .nav-dropdown,
.nav-item-dropdown.is-open > .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    visibility 0s;
}

/* Narrow variant for the small About dropdown */
.nav-dropdown--narrow { min-width: 220px; }

.nav-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: .8rem !important;
  padding: .7rem .85rem !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  font-family: var(--font-display);
  font-size: .62rem !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition:
    background .2s var(--ease),
    color      .2s var(--ease),
    padding-left .25s var(--ease) !important;
}
.nav-dropdown-item::after { display: none !important; }   /* kill inherited underline */
.nav-dropdown-item::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 2px; height: 0;
  background: var(--cyan);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 8px var(--cyan), 0 0 14px rgba(0,212,255, .45);
  transition: height .22s var(--ease);
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible,
.nav-dropdown-item.active {
  background: rgba(0, 212, 255, 0.06);
  color: var(--white) !important;
  padding-left: 1.1rem !important;
}
.nav-dropdown-item:hover::before,
.nav-dropdown-item:focus-visible::before,
.nav-dropdown-item.active::before {
  height: 60%;
}

.nav-dropdown-icon {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(0,255,255, .10), rgba(0,102,255, .10));
  border: 1px solid rgba(0,212,255, .18);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
  flex-shrink: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nav-dropdown-item:hover .nav-dropdown-icon,
.nav-dropdown-item.active .nav-dropdown-icon {
  border-color: rgba(0,212,255, .5);
  background: linear-gradient(135deg, rgba(0,255,255, .20), rgba(0,102,255, .20));
}

/* Mobile (≤900 px): collapse the floating panel into the open menu inline */
@media (max-width: 900px) {
  .nav-dropdown,
  .nav-item-dropdown.is-open > .nav-dropdown {
    /* Override BOTH the base styles and the desktop ":is-open" rule that sets
       transform:translateX(-50%) — leaving that transform in place on mobile
       was shifting the dropdown items off the left edge of the screen. */
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0 0 .4rem 1.2rem;
    /* collapsed by default on mobile, show only when .is-open */
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav-item-dropdown.is-open > .nav-dropdown {
    max-height: 600px;
  }
  .nav-item-dropdown > .nav-dropdown-trigger .nav-caret {
    transition: transform .25s var(--ease);
  }
  .nav-item-dropdown.is-open > .nav-dropdown-trigger .nav-caret {
    transform: rotate(180deg);
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown-item {
    font-size: .7rem !important;
    padding: .55rem .65rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   INNER-PAGE TYPOGRAPHY
   All H1s and H2s inside .snap-section now share the same Orbitron
   display treatment used on the homepage hero.  Without these rules,
   non-hero pages fell back to browser defaults (Times-like serif),
   which is why headings looked inconsistent between pages.
───────────────────────────────────────────────────────────── */
.snap-section h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 60px rgba(0, 212, 255, .08);
}
.snap-section h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin-bottom: 1rem;
}
@media (max-width: 760px) {
  .snap-section h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .snap-section h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
}

/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center;
  padding: 5rem 0 2.5rem;
  overflow: hidden;
  z-index: 1;
}

/* Fine grid overlay on hero only */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255, .03) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, black 30%, transparent 100%);
  mask-image:         radial-gradient(ellipse 80% 90% at 50% 0%, black 30%, transparent 100%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  position: relative; z-index: 1;
}

/* Entrance stagger */
/* Hero entrance, progressive enhancement.
   Default: content is visible. The .js-ready class (added once the page is
   foregrounded) enables the fade-in animation. */
.js-ready .hero-badge, .js-ready .hero h1, .js-ready .hero-sub, .js-ready .hero-ctas, .js-ready .hero-stats {
  animation: hero-in .75s var(--ease) both;
}
.js-ready .hero h1   { animation-delay: .1s; }
.js-ready .hero-sub  { animation-delay: .2s; }
.js-ready .hero-ctas { animation-delay: .3s; }
.js-ready .hero-stats{ animation-delay: .4s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  max-width: 100%;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid var(--border-hi);
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .45rem 1.1rem;
  margin-bottom: 1.8rem;
  border-radius: 14px;
  white-space: nowrap;
}
/* Shrink the badge on phones so the wide letter-spacing doesn't overflow. */
@media (max-width: 480px) {
  .hero-badge {
    font-size: .56rem;
    letter-spacing: .14em;
    padding: .42rem .9rem;
    gap: .5rem;
  }
  /* Extra clearance on small phones so the .section-label pill at the
     top of every page's hero (About, Services, Packages, etc.) never
     sits under the fixed navbar / its backdrop-blur halo. */
  .snap-section {
    padding-top: calc(5.5rem + 70px) !important;  /* ~158px total */
  }
}
@media (max-width: 380px) {
  .hero-badge {
    font-size: .52rem;
    letter-spacing: .12em;
    padding: .4rem .8rem;
  }
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.6); }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.1vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.005em;
  margin-bottom: 1.2rem;
  text-shadow: 0 0 60px rgba(0,212,255, .10);
}
.hero h1 em {
  font-style: normal;
  background: var(--g-btn);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 16px rgba(0,212,255, .35));
}

.hero-sub {
  font-size: 1.04rem; font-weight: 400;
  color: var(--muted); max-width: 460px;
  margin-bottom: 1.8rem; line-height: 1.7;
}
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
  justify-content: center;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }

.promise-row {
  display: flex; flex-wrap: nowrap; gap: .5rem .75rem;
  font-size: .88rem; color: var(--white);
}
.promise-row li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .9rem .35rem .7rem;
  background: rgba(0, 212, 255, .05);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.promise-icon { font-size: 1rem; line-height: 1; }

.hero-quote {
  margin: 0;
  padding: 1.2rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  position: relative;
}
.hero-quote::before {
  content: '"';
  position: absolute;
  top: -.5rem; left: 1.1rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0, 212, 255, .5);
}
.hero-quote blockquote {
  font-size: .95rem; line-height: 1.55;
  color: var(--white); margin: 0 0 .7rem;
  font-style: italic;
}
.hero-quote figcaption { display: flex; flex-direction: column; gap: .1rem; }
.quote-author { font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--white); }
.quote-role { font-size: .78rem; color: var(--muted); }

.hero-checklist {
  padding: 1.2rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
}
.hero-checklist-label {
  font-family: var(--font-display);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .8rem;
}
.hero-checklist ul {
  list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem;
}
.hero-checklist li {
  display: flex; align-items: baseline; gap: .55rem;
  font-size: 1rem; color: var(--white);
}
.hero-checklist li .hc-check { color: var(--cyan); font-weight: 700; flex-shrink: 0; }
.hero-checklist-note {
  font-size: .88rem; color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: .6rem; margin-top: 0;
}

.industries-strip {
  display: flex; align-items: center;
  margin-top: 1.8rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.industries-label {
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--cyan); flex-shrink: 0;
  padding-right: 1.4rem; margin-right: 1.4rem;
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.marquee-outer {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.marquee-track {
  display: flex; align-items: center;
  width: max-content;
  /* Slower base duration so the strip feels cinematic, not flying. */
  animation: marquee-scroll 60s linear infinite;
  font-size: .82rem; color: var(--muted);
  letter-spacing: .02em;
}
.marquee-track span { white-space: nowrap; }
.marquee-track .mq-dot {
  color: var(--border-hi); margin: 0 1rem;
  font-size: .65rem; flex-shrink: 0;
}
/* On mobile the viewport is narrower, so items pass through visibly faster
   at the same px/sec.  Lengthen the duration substantially so each industry
   lingers long enough to be read, and tighten the item spacing so more
   words fit in the visible window at any moment.
   These rules come AFTER the base .mq-dot rule so they win on source order. */
@media (max-width: 760px) {
  .marquee-track { animation-duration: 180s; }
  .marquee-track .mq-dot { margin: 0 .55rem; }
  /* Mobile: text starts FULLY opaque right at the divider line on the left
     (no left-side fade) and only fades out softly on the right edge so
     words exit gracefully. Maximizes readable text on a narrow screen. */
  .marquee-outer {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
    mask-image:         linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
  }
  /* Kill the gap between the divider line and the marquee start so text
     truly extends to the line. Original padding-right (1.4rem) keeps the
     line off the label text, but margin-right pushes the marquee away. */
  .industries-label {
    margin-right: .6rem;
    padding-right: .6rem;
  }
}
@media (max-width: 420px) {
  .marquee-track { animation-duration: 220s; }
  .marquee-track .mq-dot { margin: 0 .45rem; }
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-card), 0 0 40px rgba(0, 212, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.hero-stats .stat-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.6rem 1rem;
  border-right: 1px solid var(--border);
  gap: .4rem;
}
.hero-stats .stat-item:last-child { border-right: none; }

.stat-item { display: flex; flex-direction: column; }
.stat-number {
  font-family: var(--font-display);
  font-size: 2.8rem; font-weight: 800; line-height: 1;
  background: var(--g-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: -.02em;
}
.stat-suffix {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 800;
  background: var(--g-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-left: .05rem;
}
.stat-label {
  font-family: var(--font-display);
  font-size: .6rem; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  text-align: center;
  line-height: 1.4; margin-top: .25rem;
}
.stat-divider { display: none; }

@media (max-width: 1024px) {
  .hero-inner { gap: 2rem; }
  .hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
}
@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-right { align-items: stretch; }
  .hero-ctas { justify-content: flex-start; }
  .hero { padding: 7.5rem 0 2.5rem; min-height: auto; }
  .industries-strip { gap: .6rem .9rem; margin-top: 1.8rem; padding-top: 1rem; }
}
/* Extra top breathing room on small phones so the eyebrow pill clears the fixed nav */
@media (max-width: 480px) {
  .hero { padding-top: 8rem; }
  .hero-badge { margin-top: .25rem; }
}



/* ─────────────────────────────────────────────────────────────
   TRUST BAR
───────────────────────────────────────────────────────────── */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 1;
}
.trust-items {
  display: flex; align-items: center;
  justify-content: center; gap: 3rem;
  flex-wrap: wrap; padding: 1.5rem 0;
}
.trust-item {
  display: flex; align-items: center; gap: .75rem;
  font-size: .9rem; color: var(--muted);
  white-space: nowrap;
}
.trust-icon { font-size: 1.2rem; flex-shrink: 0; }
.trust-item strong { color: var(--white); font-weight: 600; }

@media (max-width: 600px) { .trust-items { gap: 1.4rem; justify-content: flex-start; } }

/* ─────────────────────────────────────────────────────────────
   SERVICES
───────────────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  position: relative;
  backdrop-filter: blur(12px);
  transition: var(--t);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card .service-link { margin-top: auto; padding-top: .75rem; }
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-btn);
  opacity: 0; transition: opacity .3s var(--ease);
}
.service-card:hover {
  border-color: var(--border-hi);
  box-shadow: 0 8px 40px rgba(0,212,255, .1);
}
.service-card:hover::before { opacity: 1; }
.service-icon {
  width: 48px; height: 48px;
  background: rgba(0,212,255, .08);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 1.2rem;
  transition: var(--t);
}
.service-card:hover .service-icon {
  border-color: var(--border-hi);
  background: rgba(0,212,255, .14);
  box-shadow: 0 0 18px rgba(0,212,255, .2);
}
.service-card h3 {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .55rem; color: var(--white);
}
.service-card p { font-size: 1rem; color: var(--muted); line-height: 1.7; }
.service-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan); margin-top: 1.2rem;
  transition: gap .25s var(--ease);
}
.service-link:hover { gap: .75rem; }

@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .services-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   ABOUT
───────────────────────────────────────────────────────────── */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
}
.about-img-box {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden; aspect-ratio: 4/3;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px);
}
.about-img-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem; padding: 2rem;
  text-align: center;
}
.about-img-placeholder .about-emoji { font-size: 5rem; }
.about-img-placeholder span:last-child {
  font-family: var(--font-display);
  font-size: .7rem; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
}
.about-badge {
  position: absolute; bottom: 1.5rem; right: 1.5rem;
  background: var(--g-btn); color: #fff;
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem 1.2rem; border-radius: var(--radius-pill);
  box-shadow: 0 0 30px rgba(0,212,255, .4);
}

/* ── About visual panel (replaces plain placeholder) ──── */
.about-visual {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-xl);
  background: var(--card);
  backdrop-filter: blur(14px);
  overflow: hidden;
  padding: 2rem;
  gap: 1rem;
  height: 100%;
}
.about-visual::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 10% 10%, rgba(0,102,255, .1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(0,212,255, .06), transparent 60%);
}
.about-stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; position: relative;
}
.about-stat {
  padding: 1.1rem 1rem;
  background: rgba(0,212,255, .04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: .3rem;
  transition: var(--t);
}
.about-stat:hover { border-color: var(--border-hi); background: rgba(0,212,255, .07); }
.about-stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem; font-weight: 800; line-height: 1;
  background: var(--g-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.about-stat-sfx {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700;
  background: var(--g-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.about-stat-lbl {
  font-family: var(--font-display);
  font-size: .6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); line-height: 1.3;
}
.about-mini-quote {
  position: relative;
  padding: 1.1rem 1.2rem;
  background: rgba(0,212,255, .04);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.about-mini-quote::before {
  content: '"';
  position: absolute; top: -.3rem; left: 1rem;
  font-size: 2rem; color: var(--cyan); line-height: 1;
  text-shadow: 0 0 12px rgba(0,212,255, .4);
}
.about-mini-quote p {
  font-size: .92rem; line-height: 1.5;
  color: var(--white); font-style: italic;
  margin-bottom: .5rem;
}
.about-mini-quote cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 600;
  color: var(--cyan); letter-spacing: .06em;
}
.about-checks { display: flex; flex-direction: column; gap: .85rem; margin: 2rem 0; }
.about-check { display: flex; align-items: flex-start; gap: .85rem; }
.about-check-icon {
  color: var(--cyan);
  font-size: .95rem; font-weight: 700;
  flex-shrink: 0; margin-top: .18rem;
  line-height: 1;
}
.about-check-text { font-size: .95rem; color: var(--muted); line-height: 1.55; }
.about-check-text strong { color: var(--white); font-weight: 600; }

@media (max-width: 900px) { .about-inner { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 600px) { .about-inner { gap: 2rem; } }

/* ─────────────────────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.process-card {
  background: var(--card); padding: 2.5rem 2rem;
  position: relative; backdrop-filter: blur(12px);
  transition: var(--t);
}
.process-card:hover { background: var(--card-s); }
.process-number {
  font-family: var(--font-display);
  font-size: 3.5rem; font-weight: 800;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0,212,255, .5);
  margin-bottom: 1rem;
  letter-spacing: -.02em;
}
.process-card h3 {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .65rem; color: var(--white);
}
.process-card p { font-size: .92rem; color: var(--muted); line-height: 1.65; }

@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .process-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────────────────────────── */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.testimonial-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
  position: relative; backdrop-filter: blur(12px);
  transition: var(--t);
}
.testimonial-card:hover { border-color: var(--border-hi); }
.testimonial-card::before { display: none; }
.stars { color: var(--gold); font-size: .85rem; margin-bottom: 1rem; letter-spacing: .06em; }
.testimonial-card blockquote { font-size: 1.05rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.6rem; }
.testimonial-author { display: flex; align-items: center; gap: .85rem; }
.author-avatar {
  width: 42px; height: 42px;
  border-radius: 14px;
  background: var(--g-btn);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  flex-shrink: 0;
}
.author-name  { font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .06em; }
.author-role  { font-size: .9rem; color: var(--muted); }

@media (max-width: 800px) { .testimonials-grid { grid-template-columns: 1fr; } }
@media (min-width: 501px) and (max-width: 800px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }

/* ─────────────────────────────────────────────────────────────
   CTA BANNER
───────────────────────────────────────────────────────────── */
.cta-banner {
  padding: 6rem 0; text-align: center;
  position: relative; z-index: 1; overflow: hidden;
  background: rgba(4, 8, 28, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-hi);
  border-bottom: 1px solid var(--border-hi);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 120% at 50% 50%, rgba(0,212,255, .05), transparent 65%);
  pointer-events: none;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 1rem; position: relative;
  text-shadow: 0 0 40px rgba(0,212,255, .1);
}
.cta-banner p { font-size: 1rem; color: var(--muted); margin-bottom: 2.5rem; position: relative; }
.cta-banner-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
.footer {
  background: rgba(2, 5, 16, 0.82);
  border-top: 1px solid var(--border);
  padding: 5rem 0 2rem;
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Compact one-row footer used by the homepage */
.footer-compact { padding: 1.1rem 0; }
.footer-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-links a {
  font-size: .9rem; color: var(--muted); transition: var(--t);
}
.footer-links a:hover { color: var(--cyan); }
.footer-copy {
  font-family: var(--font-display);
  font-size: .72rem; color: var(--muted);
  letter-spacing: .08em;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3.5rem;
}
.footer-logo { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; }
.footer-brand p { font-size: .92rem; color: var(--muted); max-width: 270px; line-height: 1.75; margin-bottom: 1.5rem; }
.footer-socials { display: flex; gap: .65rem; }
.social-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.15rem; transition: var(--t);
  font-family: var(--font-body);
  line-height: 1;
}
.social-btn:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(0,212,255, .2); }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.3rem; color: var(--white);
}
.footer-col ul { display: flex; flex-direction: column; gap: .7rem; }
.footer-col a { font-size: .97rem; color: var(--muted); transition: var(--t); }
.footer-col a:hover { color: var(--cyan); }

.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 2rem;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: .82rem; color: var(--muted); font-family: var(--font-display); letter-spacing: .05em; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: .82rem; color: var(--muted); transition: var(--t); }
.footer-bottom-links a:hover { color: var(--white); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   PAGE HERO (inner pages)
───────────────────────────────────────────────────────────── */
.page-hero {
  padding: 9rem 0 5rem;
  position: relative; text-align: center; overflow: hidden; z-index: 1;
}
.page-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255, .03) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%);
  mask-image:         radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%);
  pointer-events: none;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1rem; position: relative; line-height: 1.15;
}
.page-hero p { font-size: 1.05rem; color: var(--muted); position: relative; max-width: 520px; margin: 0 auto; }

/* ─────────────────────────────────────────────────────────────
   PORTFOLIO PAGE
───────────────────────────────────────────────────────────── */
.portfolio-filter {
  display: flex; gap: .5rem;
  justify-content: center; flex-wrap: wrap; margin-bottom: 3rem;
}
.filter-btn {
  padding: .52rem 1.3rem;
  font-family: var(--font-display);
  font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted); transition: var(--t);
  border-radius: 14px;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--g-btn); border-color: transparent; color: #fff;
  box-shadow: 0 0 20px rgba(0,212,255, .25);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--border);
}
.portfolio-card {
  background: var(--card); transition: var(--t);
  backdrop-filter: blur(12px);
}
.portfolio-card:hover {
  background: var(--card-s);
  box-shadow: inset 0 0 30px rgba(0,212,255, .06);
}
.portfolio-card.hidden { display: none; }

.portfolio-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; }
.portfolio-thumb-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem; transition: transform .45s var(--ease);
}
.portfolio-card:hover .portfolio-thumb-bg { transform: scale(1.06); }
.portfolio-thumb-overlay {
  position: absolute; inset: 0;
  background: rgba(2,5,16, .6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--t);
}
.portfolio-card:hover .portfolio-thumb-overlay { opacity: 1; }
.portfolio-thumb-overlay a {
  font-family: var(--font-display);
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  background: var(--g-btn); color: #fff;
  padding: .65rem 1.4rem;
  border-radius: 14px;
  transition: var(--t);
}
.portfolio-info { padding: 1.5rem; }
.portfolio-tag {
  font-family: var(--font-display);
  font-size: .6rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: .5rem;
}
.portfolio-info h3 {
  font-family: var(--font-display);
  font-size: .9rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .4rem;
}
.portfolio-info p { font-size: .92rem; color: var(--muted); }

.portfolio-stats {
  display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap;
  padding: 3rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 3rem 0;
}
.portfolio-stat { text-align: center; }
.portfolio-stat .num {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1;
  background: var(--g-btn); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.portfolio-stat .lbl {
  font-family: var(--font-display); font-size: .6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-top: .35rem;
}

/* ─────────────────────────────────────────────────────────────
   PORTFOLIO SHOWCASE CAROUSEL
───────────────────────────────────────────────────────────── */
.portfolio-showcase-carousel .carousel-slide { padding: 0 .5rem; }

/* ── Under-construction badge ── */
.portfolio-under-construction {
  position: absolute; inset: 0;
  background: rgba(3, 6, 16, 0.55);
  backdrop-filter: blur(2px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .6rem; pointer-events: none; z-index: 2;
}
.uc-badge {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(10, 18, 40, 0.82);
  border: 1.5px solid rgba(255, 180, 0, 0.6);
  border-radius: var(--radius-pill);
  padding: .55rem 1.3rem;
  box-shadow: 0 0 24px rgba(255,180,0, .18), 0 2px 12px rgba(0,0,0, .5);
}
.uc-icon { font-size: 1.1rem; }
.uc-text {
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 200, 60, 0.95);
}

/* ── Logo-redesign showcase (full-cover hero) ──
   The IDEA website screenshot lives behind the overlay as a subtle
   backdrop.  We inset it horizontally, dark side-strips fill the
   leftover space, so the screenshot can never peek out from under
   the overlay box during the carousel's opacity fade-in (when the whole
   slide goes briefly translucent, those side-strips stay solid dark).
   The wrap's background colour matches the overlay base for seamless
   continuation.                                                       */
.portfolio-showcase-img-wrap:has(.portfolio-logo-redesign) {
  background: #06091a;                            /* match overlay base */
}
.portfolio-showcase-img-wrap:has(.portfolio-logo-redesign) .portfolio-showcase-img {
  width: calc(100% - 6rem);                       /* leave 3rem of dark on each side */
  margin-inline: auto;
}

@media (max-width: 760px) {
  .portfolio-showcase-img-wrap:has(.portfolio-logo-redesign) .portfolio-showcase-img {
    width: calc(100% - 3rem);                     /* tighter inset on small screens */
  }
}

.portfolio-logo-redesign {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  z-index: 3;

  /* Solid dark base GUARANTEES full coverage of the screenshot underneath,
     even when backdrop-filter briefly drops out during the carousel
     transform animation.  The gradient on top supplies the subtle navy
     "haze" look, and backdrop-filter adds the soft blur where supported. */
  background-color: #06091a;
  background-image: linear-gradient(
    180deg,
    rgba(8, 14, 34, 0.94) 0%,
    rgba(4, 8, 22, 1.00) 100%
  );
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  transition:
    background-image .3s var(--ease),
    backdrop-filter  .3s var(--ease);
}

.portfolio-showcase-card:hover .portfolio-logo-redesign {
  background-image: linear-gradient(
    180deg,
    rgba(10, 18, 42, 0.97) 0%,
    rgba(4, 8, 22, 1.00) 100%
  );
}

.lr-label {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.95);
  text-shadow: 0 0 22px rgba(96, 165, 250, 0.45);
  position: relative;
  padding-bottom: .55rem;
}
/* Hairline accent under the label */
.lr-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 36px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(96, 165, 250, 0.7),
    transparent
  );
}

.lr-compare {
  display: flex;
  align-items: center;
  gap: 1.8rem;
}

.lr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}

.lr-stamp {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(180, 198, 230, 0.7);
}

.lr-img {
  height: 130px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  border-radius: 12px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* The "before" mark is a black sketch on a transparent bg, so it needs
   a clean white plate to stay legible against the dark overlay.       */
.lr-card-before .lr-img {
  background: rgba(255, 255, 255, 0.97);
  padding: 14px 22px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
}

/* The "after" mark already ships with its own navy background, so we
   just give it an ambient glow that picks up the gold accent.         */
.lr-card-after .lr-img {
  box-shadow:
    0 6px 28px rgba(0, 50, 120, 0.5),
    0 0 24px rgba(255, 200, 60, 0.15);
}

.portfolio-showcase-card:hover .lr-card-before .lr-img {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.portfolio-showcase-card:hover .lr-card-after .lr-img {
  transform: translateY(-2px);
  box-shadow:
    0 10px 34px rgba(0, 70, 160, 0.55),
    0 0 30px rgba(255, 200, 60, 0.25);
}

.lr-arrow {
  color: rgba(147, 197, 253, 0.9);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 1.4rem; /* aligns visually with the logo, accounting for the BEFORE/AFTER stamps */
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.4);
}

.lr-visit {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  padding: .65rem 1.6rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(96, 165, 250, 0.45);
  background: rgba(10, 18, 40, 0.55);
  transition:
    background .25s var(--ease),
    color      .25s var(--ease),
    border-color .25s var(--ease),
    transform  .25s var(--ease);
}

.portfolio-showcase-card:hover .lr-visit {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
  box-shadow: 0 0 24px rgba(0,212,255, .55);
}

@media (max-width: 760px) {
  .portfolio-logo-redesign { gap: 1.1rem; padding: 1.4rem 1rem; }
  .lr-label { font-size: .66rem; letter-spacing: .18em; padding-bottom: .45rem; }
  .lr-label::after { width: 28px; }
  .lr-compare { gap: 1.1rem; }
  .lr-img { height: 84px; max-width: 180px; }
  .lr-card-before .lr-img { padding: 10px 16px; }
  .lr-arrow { font-size: 1.3rem; margin-top: 1.1rem; }
  .lr-visit { font-size: .68rem; padding: .55rem 1.2rem; }
  .lr-stamp { font-size: .55rem; }
}

@media (max-width: 480px) {
  .lr-img { height: 64px; max-width: 144px; }
  .lr-compare { gap: .7rem; }
  .lr-card-before .lr-img { padding: 8px 12px; }
  .lr-arrow { font-size: 1.1rem; margin-top: .9rem; }
}

.portfolio-showcase-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 860px;
  margin: 0 auto;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.portfolio-showcase-card:hover {
  border-color: rgba(0,212,255, .35);
  box-shadow: 0 0 40px rgba(0,212,255, .08);
}

.portfolio-showcase-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 8.5;
  background: #0b1220;
}
.portfolio-showcase-img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  transition: transform .5s var(--ease);
}
.portfolio-showcase-card:hover .portfolio-showcase-img { transform: scale(1.03); }

.portfolio-showcase-overlay {
  position: absolute; inset: 0;
  background: rgba(3,6,16, .6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
  text-decoration: none;
}
.portfolio-showcase-card:hover .portfolio-showcase-overlay { opacity: 1; }

.portfolio-showcase-visit {
  color: var(--white);
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius-pill);
  padding: .55rem 1.4rem;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.portfolio-showcase-overlay:hover .portfolio-showcase-visit {
  background: var(--cyan);
  color: var(--bg);
}

.portfolio-showcase-info {
  padding: 1.2rem 1.6rem;
  display: flex; align-items: center; gap: 1rem;
  border-top: 1px solid var(--border);
}
.portfolio-showcase-info h3 {
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700;
  color: var(--white); margin: 0;
  flex: 1;
}
.portfolio-showcase-url {
  font-size: .78rem; color: var(--cyan);
  text-decoration: none; font-family: var(--font-display);
  letter-spacing: .04em; opacity: .85;
  transition: opacity .2s;
  white-space: nowrap;
}
.portfolio-showcase-url:hover { opacity: 1; }

.portfolio-showcase-carousel .carousel-nav { margin-top: 1.6rem; }

@media (max-width: 760px) {
  .portfolio-showcase-img-wrap { aspect-ratio: 16/9; }
  .portfolio-showcase-info { padding: .9rem 1.1rem; flex-wrap: wrap; gap: .5rem; }
  .portfolio-showcase-info h3 { font-size: .85rem; }
}
@media (max-width: 480px) {
  .portfolio-showcase-img-wrap { aspect-ratio: 4/3; }
  .portfolio-showcase-url { font-size: .72rem; }
}

/* ─────────────────────────────────────────────────────────────
   PACKAGES PAGE
───────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; align-items: stretch;
}
.pricing-card {
  background: rgba(5,10,26, .88);
  border: 1px solid rgba(255,255,255, .09);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2rem;
  position: relative;
  display: flex; flex-direction: column;
  transition: var(--t);
}
/* Card hover keeps its glow but no longer lifts — buttons inside felt
   like they "jumped" when you put a pointer on them. */
.pricing-card:hover { box-shadow: 0 0 0 1px rgba(0,212,255, .14), 0 0 60px rgba(0,212,255, .18); }

.pricing-card.starter {
  border-color: rgba(180,200,225, .28);
  box-shadow: 0 0 0 1px rgba(180,200,225, .05), 0 10px 48px rgba(180,200,225, .06);
}
.pricing-card.starter .pricing-name { color: #b8cce0; }
.pricing-card.starter:hover {
  border-color: rgba(200,220,245, .6);
  box-shadow: 0 0 0 1px rgba(200,220,245, .1), 0 10px 60px rgba(200,220,245, .22);
}
.pricing-card.featured {
  background: rgba(0,12,32, .92);
  border-color: rgba(0,212,255, .42);
  box-shadow: 0 0 0 1px rgba(0,212,255, .08), 0 10px 48px rgba(0,212,255, .13);
  overflow: visible;
}
.pricing-card.featured:hover {
  border-color: rgba(0,212,255, .75);
  box-shadow: 0 0 0 1px rgba(0,212,255, .25), 0 0 80px rgba(0,212,255, .35);
}
.pricing-card.premium {
  border-color: rgba(255,185,0, .38);
  box-shadow: 0 0 0 1px rgba(255,185,0, .07), 0 10px 48px rgba(255,185,0, .12);
}
.pricing-card.premium:hover {
  border-color: rgba(255,185,0, .7);
  box-shadow: 0 0 0 1px rgba(255,185,0, .18), 0 0 80px rgba(255,185,0, .32);
}
.pricing-card.premium .pricing-name { color: #f5c842; }

/* STARTER tier: silver gradient button (filled, premium metallic look) */
.pricing-card.starter .btn {
  background: linear-gradient(135deg, #e8edf2 0%, #b8c2cc 50%, #8e98a4 100%);
  color: #0b1a2e;
  border: 0;
  box-shadow:
    0 0 16px rgba(200, 215, 235, .35),
    0 6px 18px rgba(150, 165, 185, .35),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
.pricing-card.starter .btn:hover {
  background: linear-gradient(135deg, #f3f6fa 0%, #d0d8e2 50%, #a0acbc 100%);
  box-shadow:
    0 0 32px rgba(220, 230, 245, .7),
    0 0 64px rgba(190, 210, 235, .35),
    inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* PREMIUM tier: gold gradient button (filled, premium metallic look) */
.pricing-card.premium .btn {
  background: linear-gradient(135deg, #ffe488 0%, #f5c842 50%, #c98e1c 100%);
  color: #2d1b00;
  border: 0;
  box-shadow:
    0 0 18px rgba(245, 200, 66, .45),
    0 6px 20px rgba(200, 150, 30, .4),
    inset 0 1px 0 rgba(255, 245, 200, .6);
}
.pricing-card.premium .btn:hover {
  background: linear-gradient(135deg, #fff0a8 0%, #ffd85a 50%, #d99c20 100%);
  box-shadow:
    0 0 36px rgba(255, 215, 90, .8),
    0 0 72px rgba(220, 170, 40, .4),
    inset 0 1px 0 rgba(255, 250, 210, .8);
}

.pricing-badge {
  position: absolute;
  top: 1.8rem; right: -1px;
  background: var(--g-btn); color: #fff;
  font-family: var(--font-display);
  font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem 1.1rem .34rem .95rem;
  border-radius: 20px 0 0 20px;
  white-space: nowrap; z-index: 10;
}
.pricing-name {
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: .8rem;
}
.pricing-price .amount {
  font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1;
}
.pricing-price .period { font-size: .88rem; color: var(--muted); font-weight: 400; }
.pricing-tagline { font-size: .92rem; color: var(--muted); margin-bottom: 2rem; margin-top: .4rem; }
.pricing-divider { height: 1px; background: var(--border); margin-bottom: 1.8rem; }
.pricing-features { display: flex; flex-direction: column; gap: .88rem; margin-bottom: 2rem; }
.pricing-feature { display: flex; align-items: flex-start; gap: .75rem; font-size: .95rem; }
.pricing-feature .check { color: var(--cyan); flex-shrink: 0; margin-top: .05rem; }
.pricing-feature .cross { color: var(--muted); flex-shrink: 0; margin-top: .05rem; opacity: .4; }
.pricing-feature.disabled { color: var(--muted); opacity: .5; }
.pricing-card .btn { width: 100%; justify-content: center; }

.pricing-backdrop {
  position: relative;
  background: rgba(3, 12, 32, 0.75);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem 1.6rem;
}

@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; border-radius: var(--radius-lg); } }

/* Guarantee strip */
.guarantee-strip {
  background: rgba(0,212,255, .05);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 2.5rem; display: flex; align-items: center;
  gap: 2rem; margin-bottom: 3.5rem; flex-wrap: wrap;
  backdrop-filter: blur(12px);
}
.guarantee-icon { font-size: 3rem; flex-shrink: 0; }
.guarantee-text h3 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .4rem;
}
.guarantee-text p { font-size: .97rem; color: var(--muted); }

/* Add-ons */
.addons-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem; margin-top: 2.5rem;
}
.addon-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
  backdrop-filter: blur(12px); transition: var(--t);
}
.addon-card:hover { border-color: var(--border-hi); box-shadow: 0 0 20px rgba(0,212,255, .1); }
.addon-icon { font-size: 1.6rem; margin-bottom: .85rem; }
.addon-card h4 { font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; }
.addon-card p  { font-size: .92rem; color: var(--muted); }
.addon-price   { font-family: var(--font-display); font-size: .72rem; font-weight: 600; color: var(--cyan); margin-top: .85rem; letter-spacing: .06em; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); }
.faq-item { background: var(--card); backdrop-filter: blur(12px); transition: var(--t); }
.faq-item.open { background: var(--card-s); border-color: var(--border-hi); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.5rem;
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; text-align: left;
  color: var(--white); transition: var(--t); cursor: pointer;
}
.faq-question:hover { color: var(--cyan); }
.faq-icon { font-size: 1.2rem; color: var(--cyan); transition: transform .35s var(--ease); flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-item.open .faq-answer { max-height: 200px; }
.faq-answer p { padding: 0 1.5rem 1.4rem; font-size: .97rem; color: var(--muted); line-height: 1.75; }

/* ─────────────────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }

.contact-form-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.5rem;
  backdrop-filter: blur(14px);
}
.contact-form-card h2 {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem;
}
.contact-form-card .sub { font-size: .97rem; color: var(--muted); margin-bottom: 2rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block; font-family: var(--font-display);
  font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .5rem; color: var(--muted);
}
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  background: rgba(0,212,255, .04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .78rem 1rem;
  color: var(--white); font-size: .97rem; transition: var(--t); outline: none;
  border-radius: 14px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--cyan);
  background: rgba(0,212,255, .07);
  box-shadow: 0 0 0 2px rgba(0,212,255, .08), 0 0 20px rgba(0,212,255, .08);
}
.form-group select option { background: var(--bg-3); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-submit { width: 100%; justify-content: center; font-size: .78rem; padding: 1rem; }
.form-success { display: none; text-align: center; padding: 2rem; color: var(--cyan); font-weight: 600; }

.services-checkboxes { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .5rem; }
.checkbox-label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; color: var(--muted); cursor: pointer;
  padding: .52rem .8rem;
  border: 1px solid var(--border); border-radius: 4px; transition: var(--t);
}
.checkbox-label:hover { border-color: var(--border-hi); color: var(--white); }
.checkbox-label input[type="checkbox"] { width: auto; accent-color: var(--cyan); cursor: pointer; }
.checkbox-label:has(input:checked) { border-color: var(--cyan); background: rgba(0,212,255, .07); color: var(--white); }

.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-info-header h2 {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .75rem; line-height: 1.2;
}
.contact-info-header p { font-size: .97rem; color: var(--muted); line-height: 1.75; }

.contact-detail-cards { display: flex; flex-direction: column; gap: .9rem; }
.contact-detail-card {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  backdrop-filter: blur(12px); transition: var(--t);
}
.contact-detail-card:hover { border-color: var(--border-hi); }
.contact-detail-icon {
  width: 42px; height: 42px;
  background: rgba(0,212,255, .08); border: 1px solid var(--border-hi);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.contact-detail-card h4 {
  font-family: var(--font-display); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .2rem;
}
.contact-detail-card p.contact-detail-card a { font-size: .97rem; font-weight: 500; color: var(--white); }
.contact-detail-card a:hover { color: var(--cyan); }

.mini-process { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1rem; }
.mini-step { display: flex; align-items: flex-start; gap: 1rem; }
.mini-step-num {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--g-btn); color: #fff;
  font-family: var(--font-display); font-size: .65rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mini-step-text h4 { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .15rem; }
.mini-step-text p  { font-size: .92rem; color: var(--muted); }

.trust-signal-items { display: flex; flex-direction: column; gap: .6rem; }
.trust-signal-item { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--muted); }
.trust-signal-item .ts-icon { color: var(--cyan); }

.client-logos {
  display: flex; gap: 2.5rem; align-items: center;
  justify-content: center; flex-wrap: wrap;
  padding: 2.5rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 3rem 0;
}
.client-logo-item {
  font-family: var(--font-display); font-size: .65rem; font-weight: 600;
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
  opacity: .45; transition: var(--t);
}
.client-logo-item:hover { opacity: 1; color: var(--cyan); }

.contact-page-hero {
  padding: 9rem 0 5.5rem; position: relative; overflow: hidden; z-index: 1;
}

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   SNAP SECTIONS, each fills one viewport
───────────────────────────────────────────────────────────── */
.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* top padding offsets the fixed nav (~70px) so content centres
     in the visible viewport, not the full 100vh */
  padding: calc(3rem + 70px) 0 3rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Tighten internal spacing so content fits in 100 vh */
.snap-section .section-header         { margin-bottom: 2rem; }
.snap-section .section-heading        { font-size: clamp(1.4rem, 2.5vw, 2.1rem); }
.snap-section .section-sub            { font-size: .95rem; }
.snap-section .services-grid          { gap: .85rem; }
.snap-section .process-grid           { margin-top: 0; }
.snap-section .testimonials-grid      { gap: .85rem; }
.snap-section .service-card           { padding: 1.5rem 1.4rem; }
.snap-section .service-card p         { font-size: .88rem; }
.snap-section .process-card           { padding: 2rem 1.6rem; }
.snap-section .process-number         { font-size: 2.8rem; margin-bottom: .7rem; }
.snap-section .testimonial-card       { padding: 1.6rem; }
.snap-section .testimonial-card blockquote { font-size: .9rem; margin-bottom: 1rem; }
.snap-section .about-inner            { gap: 3.5rem; }
.snap-section .about-checks           { gap: .65rem; margin: 1.4rem 0; }
.snap-section .about-img-box          { aspect-ratio: 5/4; }
.snap-section .about-badge            { font-size: .58rem; padding: .45rem .9rem; }

/* Disable snap on small screens, let sections scroll freely */
@media (max-width: 760px) {
  html { scroll-snap-type: none; }
  .snap-section {
    min-height: auto;
    overflow: visible;
    padding: 4rem 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   CAROUSEL
───────────────────────────────────────────────────────────── */
.carousel { position: relative; width: 100%; }
.carousel-track { overflow: hidden; }
.carousel-slide { display: none; }
.carousel-slide.active {
  display: block;
  animation: carousel-in .38s var(--ease) both;
}
.carousel-slide.prev-out {
  display: block;
  animation: carousel-out .38s var(--ease) both;
}
@keyframes carousel-in {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes carousel-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-22px); }
}
.carousel-nav {
  display: flex; align-items: center;
  justify-content: center; gap: 1.2rem;
  margin-top: 1.6rem;
}
.carousel-btn {
  /* No circle/border — just the bare chevron glyph */
  width: auto; height: auto;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  padding: .15rem .25rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--t); cursor: pointer;
  flex-shrink: 0;
}
.carousel-btn:hover {
  color: #fff;
  text-shadow:
    0 0 18px rgba(0,212,255,.85),
    0 0 36px rgba(0,212,255,.5);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.carousel-dots { display: flex; gap: .6rem; align-items: center; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--border-hi);
  border: none; cursor: pointer;
  transition: all .3s var(--ease); padding: 0;
}
.carousel-dot.active {
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0,212,255, .6);
  width: 26px;
}
.carousel-label {
  font-family: var(--font-display);
  font-size: .6rem; color: var(--muted);
  letter-spacing: .12em; text-transform: uppercase;
  min-width: 3.5rem; text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   CONTACT EMBED (homepage last section)
───────────────────────────────────────────────────────────── */
.contact-embed-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem; align-items: center;
}
.contact-embed-info .section-heading { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.contact-embed-details {
  display: flex; flex-direction: column;
  gap: .9rem; margin-top: 2rem;
}
.contact-embed-item {
  display: flex; align-items: center; gap: .9rem;
}
.contact-embed-icon {
  width: 44px; height: 44px;
  background: rgba(0,212,255, .08);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.contact-embed-meta { display: flex; flex-direction: column; }
.contact-embed-lbl {
  font-family: var(--font-display);
  font-size: .58rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: .1rem;
}
.contact-embed-item a.contact-embed-val {
  font-size: .95rem; color: var(--white); font-weight: 500;
}
.contact-embed-item a:hover { color: var(--cyan); }

.contact-embed-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
  backdrop-filter: blur(14px);
}
.contact-embed-form-card .contact-form textarea { min-height: 90px; resize: none; }

@media (max-width: 900px) {
  .contact-embed-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─────────────────────────────────────────────────────────────
   BACK TO TOP
───────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 1.8rem; right: 1.6rem;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(0,212,255, .3);
  color: rgba(0,212,255, .6);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;                    /* hide the literal '^' in the HTML */
  font-weight: 700;
  line-height: 1;
  padding: 0;
  opacity: 0; pointer-events: none; transition: var(--t); z-index: 900;
}
/* Use an inline SVG chevron so it centres precisely (no font-glyph baseline
   quirks like the literal '^' character has). */
.back-to-top::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>") center/contain no-repeat;
}
.back-to-top.show { opacity: 1; pointer-events: all; }
.back-to-top:hover {
  border-color: rgba(0,212,255, .85);
  color: rgba(0,212,255, 1);
  box-shadow: 0 0 18px rgba(0,212,255, .4), 0 0 32px rgba(0,212,255, .2);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .container { width: min(1180px, 100% - 2rem); }
  .section { padding: 3.5rem 0; }
  .section-heading { font-size: 1.5rem; }
  .hero { padding: 5.5rem 0 2rem; }
  .hero h1 { font-size: 1.9rem; line-height: 1.1; }
  .hero-sub { font-size: 1rem; margin-bottom: 1.6rem; }
  .hero-ctas { flex-direction: column; gap: .7rem; }
  .btn.btn-lg { width: 100%; justify-content: center; }
  .promise-row { gap: .45rem; }
  .promise-row li { font-size: .82rem; padding: .3rem .75rem .3rem .6rem; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stats .stat-item { padding: 1.2rem .6rem; }
  .stat-number { font-size: 2rem; }
  .stat-suffix { font-size: 1rem; }
  .stat-label { font-size: .58rem; letter-spacing: .1em; }
  .hero-quote { padding: 1rem 1.2rem; }
  .hero-quote blockquote { font-size: .88rem; }
  .industries-strip { font-size: .76rem; }
  .industries-strip .dot-sep { display: none; }
  .cta-banner-btns { flex-direction: column; align-items: center; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: .8rem; text-align: left; }
  .nav-toggle { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS
   Desktop styles are untouched above. Everything below only fires
   on viewports ≤ 760 px (snap already disabled at this width).
═══════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {

  /* ── General sections, ensure content clears 70 px fixed nav ──
     The header eyebrow pill (.section-label) sits at the very top of
     each page's hero — give it generous breathing room so it never
     gets clipped by the navbar or its backdrop-blur halo. */
  .snap-section {
    padding-top: calc(4.5rem + 70px);  /* ~142px total clear from nav */
    padding-bottom: 2.5rem;
  }

  /* ── Hero ── */
  .promise-row { flex-wrap: wrap; gap: .45rem; }
  .hero-right  { gap: 1.2rem; }

  /* ── Testimonials, single column ── */
  .testimonials-grid { grid-template-columns: 1fr !important; }

  /* ── Contact section ── */
  .contact-embed-grid    { gap: 2rem; }
  .contact-embed-details { margin-top: 1rem; gap: .7rem; }
  .contact-embed-form-card { padding: 1.6rem 1.4rem; }

  /* ── Footer, remove full-viewport-height lock ── */
  .footer { min-height: auto; padding: 3.5rem 0 2rem; }

  /* ── CTA banner ── */
  .cta-banner { padding: 4rem 0; }
  .cta-banner-btns {
    flex-direction: column;
    align-items: center;
  }
  .cta-banner-btns .btn {
    width: 100%; max-width: 320px;
    justify-content: center;
  }

  /* ── Process grid, keep 2 col a bit longer ── */
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Small phones ≤ 480 px ── */
@media (max-width: 480px) {

  /* Slightly tighter container */
  .container { width: min(1180px, 100% - 1.5rem); }

  /* ── Hero ── */
  .hero-inner { gap: 1.2rem; }
  .hero-right  { gap: .9rem; }
  .hero-stats .stat-item { padding: .9rem .4rem; }
  .stat-number { font-size: 1.6rem; }
  .stat-suffix { font-size: .85rem; }
  .stat-label  { font-size: .5rem; letter-spacing: .06em; }
  .hero-quote  { padding: .9rem 1rem; }
  .hero-quote blockquote { font-size: .85rem; }

  /* ── Services, single column ── */
  .services-grid { grid-template-columns: 1fr !important; }

  /* ── About ── */
  .about-stat-num { font-size: 1.8rem; }
  .about-stat-sfx { font-size: .9rem; }

  /* ── Process, single column ── */
  .process-grid { grid-template-columns: 1fr !important; }

  /* ── Pricing (shared) ── */
  .pricing-price .amount { font-size: 2.2rem; }
  .guarantee-strip { flex-direction: column; padding: 1.5rem; gap: .75rem; }

  /* ── Contact form ── */
  .contact-embed-form-card { padding: 1.2rem 1rem; }

  /* ── Footer ── */
  .footer-grid { gap: 2rem; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }
  .footer-bottom-links { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION  (appended last so it cascades on top of everything)

   Goals:
     • No dead space, drop every section's `min-height: 100vh` lock
     • Even, uniform vertical rhythm, every section uses the same padding
     • Tight horizontal margins on small phones
     • Kill the WebGL canvas on phones (Three.js library also doesn't load,
       see the conditional <script> swap in every HTML <body>)
     • Reduce the reveal animation distance so the page doesn't feel shifty
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Kill the WebGL canvas entirely on phones ── */
  #three-canvas { display: none !important; }

  /* ── Universal section spacing, every section reads the same ── */
  .snap-section,
  section.bg-panel,
  section.bg-panel-2,
  section.tech-grid {
    min-height: 0 !important;
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
    overflow: visible !important;
  }
  /* But the FIRST snap-section on every interior page needs to clear the
     70 px fixed nav AND give the .section-label pill breathing room above. */
  main > .snap-section:first-of-type,
  main > section.snap-section:first-child {
    padding-top: 6.5rem !important;
  }

  /* ── Hero (homepage), needs enough top padding to clear the fixed nav
     AND give the .hero-badge pill breathing room above. ── */
  .hero {
    min-height: 0 !important;
    padding: 6.5rem 0 2.25rem !important;
  }

  /* ── First section after the fixed nav (on non-home pages) needs nav clearance ── */
  main > section:first-child:not(.hero) {
    padding-top: 6.5rem !important;
  }

  /* ── CTA banner ── */
  .cta-banner {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  /* ── Footer, uniform with section padding, no min-height lock ── */
  .footer {
    min-height: 0 !important;
    padding: 2.75rem 0 1.4rem !important;
  }

  /* ── Container, slimmer horizontal padding so content reaches edges ── */
  .container {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }

  /* ── Section header, tighter margin below ── */
  .section-header, .section-header.center {
    margin-bottom: 1.4rem !important;
  }

  /* ── Reveal entrance, shorter translate so the page never looks "drifty" ── */
  .js-ready .reveal:not(.visible) {
    transform: translateY(14px);
  }

  /* ── Tame oversized H1/H2 with consistent fluid scaling ── */
  .snap-section h1.hero h1 {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
    line-height: 1.12 !important;
  }
  .snap-section h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.7rem) !important;
    line-height: 1.18 !important;
  }
  .section-heading {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
  }

  /* ── Buttons, bigger tap targets (Apple's 44 px minimum) ── */
  .btn { min-height: 44px; padding: .7rem 1.1rem; }
  .btn-lg { padding: .85rem 1.3rem; }

  /* ── Inline gaps inside cards/grids, uniform 1rem ── */
  .feature-grid.process-steps.services-grid.belief-grid {
    gap: 1rem !important;
  }

  /* ── Carousel slide padding, reclaim the 0.5 rem gutter on each side ── */
  .portfolio-showcase-carousel .carousel-slide { padding: 0 .2rem !important; }
}

/* ── Very small phones (≤ 420 px), final tightening pass ──────────────── */
@media (max-width: 420px) {
  .snap-section,
  section.bg-panel,
  section.bg-panel-2 {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  /* First-section override still needs to clear nav + pill */
  main > .snap-section:first-of-type,
  main > section.snap-section:first-child {
    padding-top: 6.5rem !important;
  }
  .hero { padding: 6.5rem 0 2rem !important; }
  main > section:first-child:not(.hero) { padding-top: 6.5rem !important; }
  .container { padding-left: .9rem; padding-right: .9rem; }

  .snap-section h1.hero h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .snap-section h2          { font-size: clamp(1.2rem, 6vw, 1.6rem) !important; }
}