@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300&display=swap');

/* ═══════════════════════════════════════════════════════════════
   BASE — reset, variables, typography, accessibility
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #111112;
  --bg2:       #161618;
  --surface:   #1a1a1c;
  --surface2:  #222224;
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.11);
  --accent:    #a08cff;
  --accent-lt: #c4b5ff;
  --accent2:   #6ee7f7;
  --text:      #f0eeff;
  --muted:     rgba(240,238,255,0.5);
  --muted2:    rgba(240,238,255,0.28);
  --grad:      linear-gradient(135deg, #c4b5ff 0%, #6ee7f7 100%);
  --nav-h:     56px;
  /* nav offset from viewport top — grows on notched iPhones so the bar
     clears the status bar / Dynamic Island (env() is 0 elsewhere) */
  --nav-top:   max(24px, calc(env(safe-area-inset-top, 0px) + 8px));
  --r:         14px;
  --r-md:      18px;
  --r-lg:      22px;
  --r-sm:      8px;
}

html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Skip-to-content link — invisible until focused */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent, #9d7dff);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; outline: none; }

:focus-visible {
  outline: 2px solid var(--accent, #9d7dff);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT — page, hero, sections, grid, footer
═══════════════════════════════════════════════════════════════ */

/* ── decorative background layers ── */
.grain {
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px; pointer-events: none; z-index: 0;
}

.glow {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(100,80,220,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(80,200,220,0.08) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* iOS Safari samples any position:fixed layer that covers the screen edges and
   tints the top/bottom bars a solid block from it — that is what made the inner
   pages' bars solid (proven with bartest2). On the inner pages .grain/.glow are
   the only such layers, so make them ABSOLUTE: Safari then treats them as
   ordinary scrolling content and uses its default see-through bars. They still
   cover the whole page (body is the containing block), so the look is unchanged.
   The index keeps them fixed — there the opaque hero photo is the sampled layer,
   so its bars already read correctly. */
body:not(.index-page) { position: relative; }
body:not(.index-page) .grain,
body:not(.index-page) .glow { position: absolute; min-height: 100%; }

/* ── page ── */
.page { position: relative; z-index: 1; min-height: 100vh; }

/* ── hero ── */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  position: relative;
  overflow: hidden; /* clips the Ken Burns zoom */
}
/* photo backdrop — a gentle idle Ken Burns zoom. */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/hero-bg.jpg') center / cover no-repeat;
  animation: hero-zoom 28s ease-in-out infinite alternate;
  z-index: -2;
}
@keyframes hero-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.08); }
}
/* grade + text protection: dark top (calm zone for the nav), lighter
   middle (landscape shows through), dark bottom fading into the page;
   plus a radial scrim behind the headline block */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 34% at 50% 72%, rgba(17,17,18,0.55), transparent 72%),
    linear-gradient(rgba(17,17,18,0.55) 0%, rgba(17,17,18,0.62) 45%, rgba(17,17,18,0.8) 82%, var(--bg) 100%);
  z-index: -1;
}

/* ── index hero: fixed full-viewport backdrop (Loman-style bleed) ───────
   The photo + grade become position:fixed so the wallpaper paints into
   the iOS status-bar / home-indicator safe areas and shows behind
   Safari's translucent bars — top AND bottom — on the index page. Every
   block BELOW the hero gets an opaque page background so the fixed photo
   only shows through the hero and is covered once you scroll past it.
   Requires viewport-fit=cover (set in each page's viewport meta). */
/* ONLY the photo is fixed — it fills the iOS safe areas behind the bars.
   Overscanned top+bottom so the subtle scroll drift can't reveal an edge gap;
   idle Ken Burns zoom dropped. */
.index-page .hero::before {
  position: fixed;
  top: -9vh; left: 0; right: 0; bottom: auto; height: 118vh;
  animation: none; transform: translateY(0);
}
/* The grade STAYS absolute (base position) so it scrolls WITH the hero — it
   never hangs as a fixed dark band over scrolled content, and its dark bottom
   stays glued to the hero's bottom. Readable middle; darkens to the page
   colour well before the bottom so it covers the visible edge no matter how
   tall the iOS toolbar is (no bright photo strip). */
.index-page .hero::after {
  background: linear-gradient(
    rgba(17,17,18,0.5)  0%,
    rgba(17,17,18,0.42) 38%,
    rgba(17,17,18,0.58) 64%,
    rgba(17,17,18,0.88) 85%,
    var(--bg)           97%
  );
}
/* Mobile only: solid #111112 at the very top so it merges with the colour iOS
   paints behind the status bar (no seam) at scroll-top. */
@media (max-width: 720px) {
  .index-page .hero::after {
    background: linear-gradient(
      var(--bg)           0%,
      var(--bg)           5%,   /* solid just covers the status bar */
      rgba(17,17,18,0.38) 10%,  /* then a high, quick fade — less of the photo is darkened */
      rgba(17,17,18,0.34) 30%,
      rgba(17,17,18,0.55) 64%,
      rgba(17,17,18,0.88) 85%,
      var(--bg)           97%
    );
  }
}
/* Bring back the subtle "moves with the text" drift — the photo eases upward
   as you scroll the hero, a touch slower than the content (parallax). This is
   a compositor-run scroll-driven animation: smooth on iOS 17.4+/26 and modern
   desktop; where unsupported it stays a static fixed fill (still bleeds behind
   the bars, just no drift). */
@supports (animation-timeline: scroll()) {
  .index-page .hero::before {
    animation: hero-par linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  @keyframes hero-par {
    from { transform: translateY(0); }
    to   { transform: translateY(-9vh); }
  }
}
/* opaque full-width canvas for everything below the hero (covers the fixed
   photo in the desktop side gutters that the max-width sections don't reach) */
.index-page .page-scroll {
  position: relative;
  z-index: 1;
  background-color: var(--bg);
}

.page-hero {
  min-height: 62vh; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: calc(var(--nav-h) + 2rem) 1.5rem 3.5rem;
  max-width: 1180px; margin: 0 auto;
}

.hero-eyebrow, .eyebrow {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.1rem;
}

.hero-title {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 300;
  letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 1.5rem; max-width: 900px;
  white-space: nowrap;
}

.page-hero-title {
  font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 300;
  letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 1.2rem;
}

.hero-sub, .page-hero-sub {
  font-size: 1.05rem; color: var(--muted); font-weight: 300;
  max-width: 500px; line-height: 1.8; margin-bottom: 2.5rem;
}

/* ── sections ── */
.section { padding: 6rem 1.5rem; max-width: 1180px; margin: 0 auto; }
.section-sm { padding: 4rem 1.5rem; max-width: 1180px; margin: 0 auto; }
.section-full { padding: 6rem 1.5rem; }
.section-center { text-align: center; }
.section-center .section-sub { margin-left: auto; margin-right: auto; }

/* nav-h spacer used on inner pages instead of a full hero */
.nav-spacer { padding-top: calc(var(--nav-h) + var(--nav-top)); }

/* page-header sections */
.section-page-header { padding-bottom: 2rem; }
.section-page-form { padding-top: 0; padding-bottom: 5rem; }
.section-reduced-top { padding-top: 1rem; }
.section-sm-top { padding-top: 1rem; }

/* constrained content widths used on inner pages */
.content-narrow { max-width: 640px; }
.content-medium { max-width: 620px; }
.content-wide   { max-width: 860px; margin: 0 auto; }

/* ── spacing & width helpers ── */
.mb-auto-3  { margin: 0 auto 3rem; }
.mt-2       { margin-top: 2rem; }
.mt-1-5     { margin-top: 1.5rem; }
.mt-1-25    { margin-top: 1.25rem; }
.mb-2-5     { margin-bottom: 2.5rem; }
.mb-2       { margin-bottom: 2rem; }
.mb-1-5     { margin-bottom: 1.5rem; }
.mb-0-4     { margin-bottom: 0.4rem; }
.text-center        { text-align: center; }
.text-small         { font-size: 0.82rem; color: var(--muted2); }
.section-label-spaced { margin-bottom: 0.75rem; }
.max-w-680  { max-width: 680px; }
.max-w-900  { max-width: 900px; margin: 0 auto; }
.max-w-1000 { max-width: 1000px; margin: 0 auto; }

/* ── aspect ratio utilities ── */
.ar-4-3  { aspect-ratio: 4/3; }
.ar-3-2  { aspect-ratio: 3/2; }
.ar-1-1  { aspect-ratio: 1/1; }
.ar-16-9 { aspect-ratio: 16/9; }
.ar-3-4  { aspect-ratio: 3/4; }

/* ── gallery caption label ── */
.gallery-caption {
  font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted2);
}

/* ── section-sub full-width override ── */
.section-sub-full { max-width: none; }

/* ── small button variant ── */
.btn-sm { font-size: 0.82rem; padding: 0.65rem 1.4rem; }

/* ── btn-group with relative positioning ── */
.btn-group-rel { position: relative; }

/* ── services page: custom "Talk to us" card ── */
.service-card-custom {
  border-style: dashed;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 280px; text-align: center; padding: 2rem;
}
.service-card-custom-icon { margin-bottom: 1rem; color: var(--muted2); }
.service-card-custom-tag  { margin-bottom: 0.4rem; }
.service-card-custom-link { margin-top: 0.8rem; }

/* ── services page: step cards ── */
.step-card { text-align: center; }
.step-card .card-icon { margin: 0 auto 1rem; }

/* ── services page: centered section header ── */
.section-header-center {
  text-align: center; max-width: 680px;
  margin: 0 auto 3.5rem;
}

/* ── use-cases: section with 3rem top padding ── */
.section-top-3 { padding-top: 3rem; }

/* ── private-events gallery variants ── */
.thumb-event-1 { background: linear-gradient(135deg,#22103a,#100e28); }
.thumb-event-2 { background: linear-gradient(135deg,#1a0c2e,#0e0c20); }
.thumb-event-3 { background: linear-gradient(135deg,#200e30,#120e26); }
.thumb-event-4 { background: linear-gradient(135deg,#1c0c2c,#0c0a1e); }
.thumb-event-5 { background: linear-gradient(135deg,#180a26,#0a0818); }

/* ── real-estate gallery variants ── */
.thumb-re-1 { background: linear-gradient(135deg,#1a1840,#0e2238); }
.thumb-re-2 { background: linear-gradient(135deg,#0e1e36,#13183a); }
.thumb-re-3 { background: linear-gradient(135deg,#1c183a,#0a1a2c); }
.thumb-re-4 { background: linear-gradient(135deg,#0c1c32,#191535); }
.thumb-re-5 { background: linear-gradient(135deg,#17133a,#0d1e2a); }

/* ── section labels & titles ── */
.section-label {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem;
}
.section-title {
  font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 300;
  letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 1rem;
}
.section-sub {
  font-size: 0.97rem; color: var(--muted); max-width: 520px; line-height: 1.8; margin-bottom: 3rem;
}

.divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ── generic grids ── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }

/* ── stats ── */
.stats-strip { padding: 0 1.5rem; }
.stats-inner {
  max-width: 1180px; margin: 0 auto; padding: 3.5rem 0;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; overflow: hidden;
  transition: box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}
@keyframes stat-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.stat-card:hover {
  animation: stat-float 1.4s ease-in-out infinite;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.stat-card::after {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%;
  height: 2px; background: var(--grad); opacity: 0.8;
  transition: left 0.3s cubic-bezier(0.22,1,0.36,1), right 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
}
.stat-card:hover::after {
  left: 0; right: 0; opacity: 1;
}
.stat-card-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--surface2); display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 1rem; flex-shrink: 0;
}
.stat-card-number {
  font-size: 2.5rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.3rem;
}
.stat-card-title {
  font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.4rem;
}
.stat-card-desc { font-size: 0.775rem; color: var(--muted); line-height: 1.55; }
/* keep old classes for any legacy use */
.stat-number {
  font-size: 2.6rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 0.4rem;
}
.stat-label { font-size: 0.82rem; color: var(--muted); }

/* ── hero bg (service pages) ── */
.hero-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
}

/* ── scroll fade ── */
.fade-up {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ── logo hero float ── */
.logo-float {
  animation: float 6s ease-in-out infinite;
  /* stronger luminous halo so the mark reads as glowing signage over the photo */
  filter: drop-shadow(0 0 30px rgba(160,140,255,0.75)) drop-shadow(0 0 70px rgba(110,231,247,0.35));
  margin-bottom: 1.5rem;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}


/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════════ */

/* ── nav dip-on-hover ──
   The dip is an SVG bezier wave (tangent S-curves, like a mobile
   bottom-nav notch) used as a mask on the frosted surface. The 4000px
   image slides horizontally to follow the hovered link (--dip-x) and
   vertically to appear/retract (--dip-slide). mask-position transitions
   handle all the motion — no @property needed. */
.nav {
  position: fixed; top: var(--nav-top);
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1180px;
  height: var(--nav-h); z-index: 100;
  border-radius: 35px;
  --dip-x: 0px; /* px, not % — mask-position percentages resolve against (element - image) width and would misplace the 4000px mask */
  --dip-slide: -18px; /* wave fully above the edge — no bite */
  /* no outer shadows — they follow the pill rectangle, not the notch,
     so they halo-tint the page around the cutout and break the illusion */
}
.nav.nav-dip { --dip-slide: 0px; } /* wave bites 16px into the top edge */
/* applied for one frame when the dip first appears, so the wave drops
   in at the hovered link instead of sliding over from its last spot */
.nav.nav-dip-snap::before,
.nav.nav-dip-snap::after { transition: none; }
/* frosted surface lives on ::before so the dip can be mask-carved
   without clipping the outer drop shadow (kept on .nav itself) */
.nav::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(17,17,18,0.12); /* barely-there glass at rest — the photo shows through, the edge highlight keeps the pill */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 2px 20px rgba(255,255,255,0.02);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 200'%3E%3Cpath d='M0 0H1926C1968 0 1962 16 2000 16C2038 16 2032 0 2074 0H4000V200H0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 200'%3E%3Cpath d='M0 0H1926C1968 0 1962 16 2000 16C2038 16 2032 0 2074 0H4000V200H0Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 4000px 200px; mask-size: 4000px 200px;
  -webkit-mask-position: calc(var(--dip-x) - 2000px) var(--dip-slide);
  mask-position: calc(var(--dip-x) - 2000px) var(--dip-slide);
  transition: -webkit-mask-position 0.4s cubic-bezier(0.22,1,0.36,1),
              mask-position 0.4s cubic-bezier(0.22,1,0.36,1),
              background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
  z-index: -1;
}
/* rim hairline tracing the wave — same image geometry as the mask,
   drawn as an SVG stroke; border-radius clips it to the pill shape */
.nav::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 200'%3E%3Cpath d='M1926 0C1968 0 1962 16 2000 16C2038 16 2032 0 2074 0' fill='none' stroke='white' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 4000px 200px;
  background-position: calc(var(--dip-x) - 2000px) var(--dip-slide);
  pointer-events: none;
  transition: background-position 0.4s cubic-bezier(0.22,1,0.36,1);
  z-index: -1;
}
.nav.scrolled::before {
  background: rgba(17,17,18,0.05); /* nearly clear — pure blur while scrolling */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: none;
}

.nav-inner {
  padding: 0 1.5rem; height: 100%;
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem;
}

.nav-logo {
  display: flex; align-items: center;
  gap: 0.6rem; text-decoration: none; flex-shrink: 0;
}
.nav-logo svg { display: block; }
.nav-logo-text {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; line-height: 1;
  align-self: center;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.nav-links { display: flex; align-items: center; gap: 0.2rem; list-style: none; }
.nav-links a {
  display: block; padding: 0.45rem 0.85rem;
  font-size: 0.875rem; color: var(--muted);
  text-decoration: none; border-radius: var(--r-sm);
  transition: color 0.25s; letter-spacing: 0.01em;
  position: relative;
}

/* ── nav bubble — elliptical icon chip that rises out of the dip ── */
.nav-bubble {
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
  z-index: 2;
}
/* elliptical ground shadow on the dip floor, detached below the icon —
   the gap is what makes the icon read as floating */
.nav-bubble::before {
  content: '';
  position: absolute;
  left: 50%; top: calc(100% + 3px);
  width: 28px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.5), transparent);
  transform: translateX(-50%);
  z-index: -1;
}
/* while the bar is dipped, every bubble holds its raised position, so
   moving between links crossfades smoothly instead of re-bouncing */
.nav.nav-dip .nav-bubble { transform: translateX(-50%) translateY(0); }
.nav-links a:not(.nav-cta-link):hover .nav-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* the rising icon bubble is a desktop hover/dip effect — hide it in the
   mobile hamburger menu (tap fires :hover and it showed inline) */
@media (max-width: 720px) {
  .nav-bubble { display: none; }
}

/* dropdown items must be flex rows regardless of the .nav-links a rule above */
.nav-dropdown .nav-dropdown-item {
  display: flex;
  align-items: center;
}

.nav-links a:hover { color: var(--text); }

/* Underline animation: left→right sweep on hover and active */
.nav-links a:not(.nav-cta-link) .nav-link-text { position: relative; }
.nav-links a:not(.nav-cta-link) .nav-link-text::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:not(.nav-cta-link):hover .nav-link-text::after { transform: scaleX(1); }

/* Active page: underline stays visible with gradient */
.nav-links a.active { color: var(--text); }
.nav-links a.active:not(.nav-cta-link) .nav-link-text::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, #c4b5ff 0%, #6ee7f7 100%);
}

/* CTA pill — uses higher specificity instead of !important */
.nav-links .nav-cta-link {
  background: rgba(160,140,255,0.1);
  color: var(--accent-lt);
  font-weight: 600;
  border: 1px solid rgba(160,140,255,0.2);
  border-radius: 999px; /* pill-in-pill — matches the nav bar and site buttons */
}
.nav-links .nav-cta-link:hover { background: rgba(160,140,255,0.18); color: #fff; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0.4rem;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ── nav end wrapper ── */
.nav-end { display: flex; align-items: center; gap: 0.75rem; }

/* ── services dropdown ── */
.nav-services-wrap { display: flex; align-items: center; }

.nav-chevron-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 0.45rem 0.5rem 0.45rem 0.15rem;
  border-radius: var(--r-sm); transition: color 0.25s; line-height: 0;
}
.nav-chevron-btn:hover { color: var(--text); }

.nav-chevron { transition: transform 0.2s ease; flex-shrink: 0; pointer-events: none; }

.nav-has-dropdown { position: relative; }

/* Invisible bridge: lets cursor travel from link to panel without triggering mouseleave */
.nav-has-dropdown::after {
  content: ''; position: absolute;
  top: 100%; left: -16px; right: -16px; height: 12px;
}

.nav-has-dropdown:hover .nav-chevron,
.nav-has-dropdown.open  .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 195px;
  background: rgba(17,17,18,0.4); /* lighter frost — the blur keeps text legible */
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--border); border-radius: var(--r); padding: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
.nav-has-dropdown:hover .nav-dropdown {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
  font-size: 0.85rem; line-height: 1;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.nav-dropdown-item:hover { color: var(--text); }
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.nav-dropdown-all { font-weight: 500; }
.nav-dropdown-item.active { color: var(--accent); }
.nav-dropdown-item.active .nav-dropdown-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(160,140,255,0.45));
}

/* Nav top-level link icons */
.nav-links > li > a,
.nav-services-wrap .nav-services-link { display: flex; align-items: center; gap: 6px; }
.nav-link-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--muted2); transition: color 0.2s;
}
.nav-link-icon svg { display: block; }
.nav-links a:hover .nav-link-icon  { color: var(--text); }
.nav-links a.active .nav-link-icon { color: var(--text); }
.nav-links .nav-cta-link .nav-link-icon { color: inherit; }

.nav-dropdown-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--muted); transition: color 0.15s;
}
.nav-dropdown-icon svg { display: block; }
.nav-dropdown-item:hover .nav-dropdown-icon { color: var(--text); filter: brightness(1.4); }

/* Underline animation on service dropdown links */
.nav-dropdown-item > span:last-child { position: relative; }
.nav-dropdown-item > span:last-child::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-dropdown-item:hover > span:last-child::after { transform: scaleX(1); }



/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — buttons, cards, pricing, FAQ, form, gallery, etc.
═══════════════════════════════════════════════════════════════ */

/* ── gradient text utility ── */
.grad {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── 404 ── */
.not-found-code {
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 0.25rem;
}

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.8rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer; border: none;
  transition: opacity 0.2s, transform 0.15s; white-space: nowrap;
}
.btn:hover { opacity: 0.88; transform: scale(0.97); }

.btn-primary { background: var(--grad); color: #0a0a14; }
.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { color: var(--text); background: var(--surface); opacity: 1; }

.btn-group { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-group.center { justify-content: center; }

/* ── generic cards ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.75rem;
  transition: border-color 0.25s, transform 0.25s;
}
.card:hover { border-color: var(--border2); transform: translateY(-3px); }

.card-icon {
  width: 44px; height: 44px;
  background: rgba(160,140,255,0.1); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem; color: var(--accent);
}
.card-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.card-text { font-size: 0.875rem; color: var(--muted); line-height: 1.7; }

/* ── service cards ── */
.service-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  text-decoration: none; display: block;
  transition: border-color 0.25s, transform 0.25s;
}
.service-card:hover { border-color: rgba(160,140,255,0.28); transform: translateY(-4px); }

.service-thumb {
  height: 200px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.service-thumb-icon {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.88); transition: color 0.3s;
}
.service-card:hover .service-thumb-icon { color: #fff; }

.service-body { padding: 1.4rem 1.5rem 1.6rem; }
.service-tag {
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.45rem;
}
.service-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.service-desc { font-size: 0.855rem; color: var(--muted); line-height: 1.65; margin-bottom: 0.9rem; }
.service-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.8rem; font-weight: 500; color: var(--accent);
}

/* ── thumb backgrounds ── */
.thumb-re    { background: linear-gradient(135deg, #181430 0%, #0c1e30 100%); }
.thumb-const { background: linear-gradient(135deg, #1e1508 0%, #291c02 100%); }
.thumb-event { background: linear-gradient(135deg, #1e0c26 0%, #0e0d26 100%); }
.thumb-cars  { background: linear-gradient(135deg, #071c2c 0%, #091a22 100%); }
.thumb-boats { background: linear-gradient(135deg, #051d1e 0%, #061820 100%); }

/* ── gallery placeholder variants (per-page gallery items) ── */
.thumb-boats-1 { background: linear-gradient(135deg,#061e20,#071a1e); }
.thumb-boats-2 { background: linear-gradient(135deg,#051a1c,#061618); }
.thumb-boats-3 { background: linear-gradient(135deg,#071c1e,#081a1c); }
.thumb-boats-4 { background: linear-gradient(135deg,#061a1c,#051618); }
.thumb-boats-5 { background: linear-gradient(135deg,#081e20,#061a1c); }
.thumb-cars-1  { background: linear-gradient(135deg,#091e2e,#0a1c24); }
.thumb-cars-2  { background: linear-gradient(135deg,#061820,#08161e); }
.thumb-cars-3  { background: linear-gradient(135deg,#081a24,#061620); }
.thumb-cars-4  { background: linear-gradient(135deg,#071c28,#091822); }
.thumb-cars-5  { background: linear-gradient(135deg,#061a26,#08141e); }
.thumb-const-1 { background: linear-gradient(135deg,#251a06,#1e1508); }
.thumb-const-2 { background: linear-gradient(135deg,#1e1402,#2a1e08); }
.thumb-const-3 { background: linear-gradient(135deg,#29200a,#1c1204); }
.thumb-const-4 { background: linear-gradient(135deg,#1a1206,#241808); }
.thumb-const-5 { background: linear-gradient(135deg,#221a08,#181004); }

/* ── pricing ── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; align-items: start;
}

.pricing-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 2rem 1.75rem; position: relative;
}
.pricing-card.featured {
  border-color: rgba(160,140,255,0.3); background: var(--surface2);
}

.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #0a0a14;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.25rem 0.9rem; border-radius: 999px; white-space: nowrap;
}

.pricing-tier {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.pricing-price {
  font-size: 2.4rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.3rem;
}
.pricing-price sup { font-size: 1.1rem; vertical-align: top; margin-top: 0.45rem; }
.pricing-note { font-size: 0.78rem; color: var(--muted2); margin-bottom: 1.5rem; }
.pricing-price-custom { font-size: 1.8rem; }

.pricing-divider { border: none; border-top: 1px solid var(--border); margin: 1.4rem 0; }

.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.75rem; }
.pricing-features li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.865rem; color: var(--muted);
}
.pricing-features li::before {
  content: '✓'; color: var(--accent2); font-weight: 600;
  flex-shrink: 0; font-size: 0.8rem; margin-top: 0.12rem;
}
.pricing-card .btn { width: 100%; justify-content: center; }

.pricing-disclaimer {
  text-align: center; font-size: 0.82rem;
  color: var(--muted2); margin-top: 1.5rem;
}
.pricing-disclaimer a { color: var(--accent); }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 760px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; transition: border-color 0.2s;
}
.faq-item.open { border-color: rgba(160,140,255,0.25); }

.faq-q {
  width: 100%; background: none; border: none; color: var(--text);
  font-family: inherit; font-size: 0.95rem; font-weight: 500; text-align: left;
  padding: 1.25rem 1.5rem; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-icon {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: transform 0.3s, background 0.2s; color: var(--accent);
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: rgba(160,140,255,0.12); }

.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a-inner { padding: 0 1.5rem 1.25rem; font-size: 0.9rem; color: var(--muted); line-height: 1.8; }

/* ── contact form ── */
.contact-wrap { max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.76rem; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--r-sm); padding: 0.75rem 1rem;
  color: var(--text); font-family: inherit; font-size: 0.9rem;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none;
}
.field select option { background: var(--surface); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(160,140,255,0.12);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-submit { margin-top: 1rem; }

/* Form submit states */
.form-msg {
  margin-top: 1rem; padding: 0.75rem 1rem;
  border-radius: var(--r-sm); font-size: 0.875rem; display: none;
}
.form-msg.success { background: rgba(110,231,247,0.1); border: 1px solid rgba(110,231,247,0.25); color: var(--accent2); display: block; }
.form-msg.error   { background: rgba(255,100,100,0.08); border: 1px solid rgba(255,100,100,0.2); color: #ff8080; display: block; }

/* ── contact page layout ── */
.contact-page-grid {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 5rem; align-items: start;
  max-width: 1100px; margin: 0 auto;
}
.contact-info-block { display: flex; flex-direction: column; gap: 1.8rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(160,140,255,0.1); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.contact-info-label { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted2); margin-bottom: 0.2rem; }
.contact-info-value { font-size: 0.92rem; color: var(--text); }

/* "What happens next" block on contact page */
.contact-next-block {
  margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.contact-next-list {
  list-style: none; display: flex; flex-direction: column; gap: 0.75rem; padding: 0;
}
.contact-next-item {
  display: flex; gap: 0.75rem; align-items: baseline;
  font-size: 0.86rem; color: var(--muted);
}
.contact-next-num {
  color: var(--accent); font-weight: 600; flex-shrink: 0;
}

/* ── CTA strips & banners ── */
.cta-strip {
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 4.5rem 1.5rem; text-align: center; position: relative; overflow: hidden;
}
.cta-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 90% at 50% 50%, rgba(100,80,220,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-strip-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 300;
  letter-spacing: -0.025em; margin-bottom: 0.75rem; position: relative;
}
.cta-strip-sub {
  font-size: 0.95rem; color: var(--muted); margin-bottom: 1.75rem;
  max-width: 380px; margin-left: auto; margin-right: auto; position: relative;
}

.cta-banner {
  background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 5.5rem 1.5rem; text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(100,80,220,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 300;
  letter-spacing: -0.025em; margin-bottom: 1rem; position: relative;
}
.cta-banner-sub {
  font-size: 1rem; color: var(--muted); margin-bottom: 2rem;
  max-width: 400px; margin-left: auto; margin-right: auto; position: relative;
}

/* ── gallery ── */
.gallery-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.gallery-filter-btn {
  padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: all 0.18s;
}
.gallery-filter-btn:hover, .gallery-filter-btn.active {
  background: rgba(160,140,255,0.12); border-color: rgba(160,140,255,0.3); color: var(--text);
}

.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.gallery-item {
  position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; opacity: 0.35; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.gallery-item:hover { opacity: 0.65; transform: scale(1.01); }

.gallery-item-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(to top, rgba(5,5,20,0.8) 0%, transparent 100%);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); opacity: 0; transition: opacity 0.2s;
}
.gallery-item:hover .gallery-item-label { opacity: 1; }

/* ── testimonials ── */
.testimonial {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.testimonial-stars { display: flex; align-items: center; gap: 3px; color: #f4c430; margin-bottom: 0.85rem; }
.testimonial-text { font-size: 0.88rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.2rem; font-style: italic; }
.testimonial-author { font-size: 0.82rem; font-weight: 600; }
.testimonial-role { font-size: 0.75rem; color: var(--muted2); }

/* ── use cases ── */
.use-case-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
  padding: 3.5rem 0; border-bottom: 1px solid var(--border);
}
.use-case-row:last-child { border-bottom: none; }
.use-case-row.reverse { direction: rtl; }
.use-case-row.reverse > * { direction: ltr; }
.use-case-icon-block {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); aspect-ratio: 4/3; color: var(--accent);
}
.use-case-tag { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.use-case-title { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.9rem; }
.use-case-desc { font-size: 0.9rem; color: var(--muted); line-height: 1.75; margin-bottom: 1.2rem; }
.use-case-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.use-case-bullets li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.use-case-bullets li::before { content: '—'; color: var(--accent); flex-shrink: 0; }

/* ── consultation ── */
.consult-split {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}
.consult-split-info .section-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.consult-split-info {
  position: sticky;
  top: 5.5rem;
}
.consult-split-calendar {
  border-radius: var(--r-md);
  overflow: hidden;
}
.consult-split-info .consult-steps {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .consult-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .consult-split-info {
    position: static;
  }
}
.consult-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.consult-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.75rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.consult-step-num { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.consult-step-title { font-size: 1rem; font-weight: 600; }
.consult-step-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.65; }


/* ═══════════════════════════════════════════════════════════════
   PAGES — index loader, service hero backgrounds
═══════════════════════════════════════════════════════════════ */

/* ── index page loader ── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; transition: opacity 0.7s ease;
}
#loader.hide { opacity: 0; }

#loader::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size: 200px; pointer-events: none;
}

#loader::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,  rgba(100,80,220,0.16) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(80,200,220,0.09) 0%, transparent 60%);
  pointer-events: none;
}

.loader-logo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  opacity: 0; animation: loader-logo-in 0.8s ease 0.2s forwards;
}
.loader-logo svg {
  filter: drop-shadow(0 0 32px rgba(160,140,255,0.5));
  animation: float 6s ease-in-out infinite;
}
.loader-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

@keyframes loader-logo-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── drone in loader ── */
#loader-drone {
  position: absolute; top: 62%; left: 0; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 4px 20px rgba(160,140,255,0.45)) drop-shadow(0 0 8px rgba(110,231,247,0.2));
  opacity: 0; animation: drone-fly 3s cubic-bezier(0.35, 0, 0.25, 1) 0.9s forwards;
}
@keyframes drone-fly {
  0%   { transform: translateX(-180px) translateY(0px);              opacity: 0; }
  5%   { opacity: 1; }
  35%  { transform: translateX(35vw)   translateY(-16px);            opacity: 1; }
  65%  { transform: translateX(65vw)   translateY(-8px);             opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 180px)) translateY(0px); opacity: 0; }
}

/* Nav logo hidden on index — revealed by JS after fly-in animation */
.index-page .nav-logo { opacity: 0; }

/* ── service page hero wrappers ── */
.svc-hero-bg { position: relative; }
.svc-hero-bg .page-hero { position: relative; z-index: 1; min-height: 60vh; }
.svc-hero-fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--bg) 100%);
  pointer-events: none;
}
.svc-hero-bg--re     { background: linear-gradient(135deg, #181430 0%, #0c1e30 60%, #111112 100%); }
.svc-hero-bg--const  { background: linear-gradient(135deg, #1e1508 0%, #291c02 55%, #111112 100%); }
.svc-hero-bg--events { background: linear-gradient(135deg, #1e0c26 0%, #0e0d26 55%, #111112 100%); }
.svc-hero-bg--cars   { background: linear-gradient(135deg, #071c2c 0%, #091a22 55%, #111112 100%); }
.svc-hero-bg--boats  { background: linear-gradient(135deg, #051d1e 0%, #061820 55%, #111112 100%); }


/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */

.footer { padding: 4.5rem 1.5rem 2.5rem; border-top: 1px solid var(--border); }
.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem;
}
.footer-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-bottom: 0.9rem; }
.footer-logo-text {
  font-size: 0.95rem; font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-tagline { font-size: 0.85rem; color: var(--muted); line-height: 1.65; max-width: 230px; margin-bottom: 1.3rem; }
.footer-social { display: flex; gap: 0.6rem; }
.footer-social a {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 0.82rem; color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.footer-social a:hover { color: var(--text); border-color: var(--border2); }
.footer-col-title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text); margin-bottom: 1.1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links li { font-size: 0.85rem; color: var(--muted); }
.footer-links a { font-size: 0.85rem; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1180px; margin: 0 auto; padding-top: 2rem; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.76rem; color: var(--muted2); flex-wrap: wrap; gap: 0.75rem;
}

/* ── lightweight page loader (all pages except index.html first visit) ── */
#page-loader {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); opacity: 1;
  transition: opacity 0.45s ease; pointer-events: all;
}
#page-loader.fade-out { opacity: 0; pointer-events: none; }
#page-loader svg { animation: pl-pulse 1.5s ease-in-out infinite; }
@keyframes pl-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.93); }
  50%       { opacity: 1;    transform: scale(1);    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoints
═══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .stats-inner { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-page-grid { grid-template-columns: 1fr; gap: 3rem; }
  .use-case-row { grid-template-columns: 1fr; gap: 2rem; }
  .use-case-row.reverse { direction: ltr; }
  .use-case-icon-block { aspect-ratio: 3/1; }
  .consult-steps { grid-template-columns: 1fr; }

  .nav-links {
    display: none; position: fixed;
    top: calc(var(--nav-top) + var(--nav-h) + 8px);
    left: 16px; right: 16px;
    background: rgba(17,17,18,0.45); /* frosted glass, like the desktop dropdown */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border2);
    border-radius: 35px; /* matches the nav pill */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 40px rgba(0,0,0,0.5);
    flex-direction: column; align-items: stretch; padding: 1.25rem 1.5rem 1.5rem; gap: 0.2rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.8rem 0.85rem; font-size: 1rem; }
  .nav-links > li > a,
  .nav-services-wrap .nav-services-link { gap: 10px; }
  .nav-link-icon { width: 18px; height: 18px; }
  .nav-dropdown .nav-dropdown-item { padding: 0.85rem 0.85rem; font-size: 0.9rem; }
  .nav-toggle { display: flex; }
  .page-hero { padding-left: 1.25rem; padding-right: 1.25rem; }

  .nav-has-dropdown { position: static; }
  .nav-services-wrap { display: flex; align-items: center; width: 100%; }
  .nav-services-wrap .nav-services-link { flex: 1; }
  .nav-chevron-btn { padding: 0.8rem 0.85rem; }

  .nav-dropdown {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    transition: none;
    background: rgba(160,140,255,0.05); border: 1px solid rgba(160,140,255,0.1);
    border-radius: 12px; box-shadow: none; padding: 4px;
    margin-top: 0.35rem; min-width: unset; display: none;
  }
  .nav-has-dropdown:hover .nav-dropdown { opacity: 1; transform: none; pointer-events: auto; }
  .nav-has-dropdown.open .nav-dropdown { display: flex; flex-direction: column; }
  .nav-dropdown .nav-dropdown-item { padding: 0.85rem 1rem; font-size: 0.95rem; border-radius: 6px; }

}

@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(2.3rem, 11vw, 3.5rem); white-space: normal; }
}