/*
  FrontRow Events — Main Stylesheet
  Version: 2.0 | FRONTROW-WEB-ZERO ELITE-MAX
  ─────────────────────────────────────────
  Premium dark theme. Glassmorphism surfaces, signature
  purple→blue gradient, cinematic glows. All motion lives
  in animations.css — this file is structure and skin.

  TABLE OF CONTENTS:
  1.  DESIGN TOKENS (CSS CUSTOM PROPERTIES)
  2.  RESET & BASE
  3.  TYPOGRAPHY UTILITIES
  4.  LAYOUT UTILITIES
  5.  BUTTON SYSTEM
  6.  PAGE LOADER
  7.  NAVBAR
  8.  MOBILE MENU
  9.  HERO SECTION
  10. ABOUT SECTION
  11. SERVICES SECTION
  12. EVENTS SECTION
  13. BOOKING SECTION
  14. CONTACT SECTION
  15. FOOTER
  16. RESPONSIVE BREAKPOINTS
*/


/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* Primary Brand */
  --fr-purple:        #8B2FC9;
  --fr-deep-purple:   #5B1A9A;
  --fr-violet:        #A855F7;
  --fr-blue:          #3B82F6;
  --fr-indigo:        #4F46E5;

  /* Neutrals — LIGHT THEME (off-white surfaces, dark ink).
     Token names kept for stability; values inverted. The dark
     "chrome" (hero, navbar, mobile menu, footer, loader) keeps
     explicit light text where it sits on its own dark background. */
  --fr-black:         #FAF9F6;   /* off-white — page + services/booking bg */
  --fr-dark:          #F1EFE9;   /* warm off-white — about/events/contact bg */
  --fr-charcoal:      #FFFFFF;   /* white chips — about badge, select options */
  --fr-white:         #15151B;   /* primary dark ink (body text + headings) */
  --fr-gray:          #5A5A66;   /* secondary ink — readable on off-white */
  --fr-light-gray:    #6B6B77;   /* tertiary ink */

  /* Signature Gradients */
  --fr-gradient:      linear-gradient(135deg, #8B2FC9 0%, #4F46E5 50%, #3B82F6 100%);
  --fr-gradient-soft: linear-gradient(135deg, rgba(139,47,201,0.15), rgba(59,130,246,0.15));
  --fr-gradient-text: linear-gradient(135deg, #A855F7 0%, #6366F1 50%, #60A5FA 100%);
  /* Pearlescent treatment for the hero headline — reads white, glows lavender */
  --fr-gradient-pearl: linear-gradient(180deg, #FFFFFF 0%, #F1E8FF 55%, #C9B4F2 100%);

  /* Glassmorphism surfaces */
  --glass-bg:         rgba(255, 255, 255, 0.66);
  --glass-bg-hover:   rgba(255, 255, 255, 0.85);
  --glass-border:     rgba(0, 0, 0, 0.08);
  --glass-blur:       14px;

  /* Functional */
  --fr-success:       #10B981;
  --fr-error:         #EF4444;
  --fr-glow:          0 0 40px rgba(139, 47, 201, 0.4);
  --fr-glow-sm:       0 0 20px rgba(139, 47, 201, 0.3);

  /* Spacing */
  --section-padding:  clamp(5rem, 10vw, 8rem);
  --container-max:    1200px;
  --container-pad:    clamp(1.5rem, 5vw, 3rem);
  --card-radius:      16px;
  --btn-radius:       50px;

  /* Typography */
  --font-display:     'Archivo', sans-serif;
  --font-body:        'Inter', sans-serif;

  /* Premium easing — buttery deceleration everywhere */
  --ease-out-expo:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-elastic:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --transition-base:  0.35s var(--ease-out-expo);
  --transition-slow:  0.6s var(--ease-out-expo);
}

/* Registered custom property — lets the conic-gradient
   border angle animate smoothly (rotating border effect) */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--fr-black);
  color: var(--fr-white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

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

/* Brand-colored text selection */
::selection {
  background: rgba(139, 47, 201, 0.55);
  color: #FFFFFF;
}

/* Slim branded scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #4A2580 var(--fr-black);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--fr-black);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5B1A9A, #4F46E5);
  border-radius: 8px;
  border: 2px solid var(--fr-black);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8B2FC9, #3B82F6);
}

/* Visible keyboard focus — accessibility */
:focus-visible {
  outline: 2px solid var(--fr-violet);
  outline-offset: 3px;
  border-radius: 4px;
}

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


/* ═══════════════════════════════════════════════════
   3. TYPOGRAPHY UTILITIES
═══════════════════════════════════════════════════ */
.gradient-text {
  background: var(--fr-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fr-violet);
  margin-block-end: 0.75rem;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--fr-white);
  margin-block-end: 1.25rem;
}

/* Section slogans — the big statement lines. animations.js wraps each
   word in a span for the cascading word-by-word reveal; the ::after bar
   is a gradient underline that sweeps in once the words have landed. */
.slogan-title {
  perspective: 700px;
}

.slogan-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin-block-start: 1.1rem;
  border-radius: 4px;
  background: var(--fr-gradient);
  box-shadow: 0 0 18px rgba(139, 47, 201, 0.55);
}

/* Centered headers get a centered bar; left-aligned sections keep it at the start */
.section-header .slogan-title::after {
  margin-inline: auto;
}

.slogan-word {
  display: inline-block;
}

/* Words inside a gradient span carry their own gradient — a transformed
   child of a background-clip:text parent would otherwise lose its fill */
.slogan-title .gradient-text .slogan-word {
  background: var(--fr-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--fr-gray);
  max-width: 55ch;
  line-height: 1.7;
}

.body-text {
  font-size: 1.1rem;
  color: var(--fr-gray);
  line-height: 1.75;
  margin-block-end: 1.25rem;
}

.section-header {
  text-align: center;
  margin-block-end: clamp(3rem, 6vw, 4.5rem);
}

.section-header .section-subtitle {
  margin-inline: auto;
}

.centered {
  text-align: center;
  margin-inline: auto;
  display: block;
}


/* ═══════════════════════════════════════════════════
   4. LAYOUT UTILITIES
═══════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section-padding {
  padding-block: var(--section-padding);
}

/* Alternating dark backgrounds + faint ambient color washes.
   The radial accents give the glass cards something to diffuse
   and keep long scrolls from feeling flat. */
.about {
  background-color: var(--fr-dark);
  background-image:
    radial-gradient(900px 480px at -10% 10%, rgba(139, 47, 201, 0.07), transparent 60%),
    radial-gradient(700px 420px at 110% 90%, rgba(59, 130, 246, 0.05), transparent 60%);
}

.services {
  background-color: var(--fr-black);
  background-image:
    radial-gradient(820px 460px at 110% -5%, rgba(139, 47, 201, 0.08), transparent 62%),
    radial-gradient(700px 420px at -10% 110%, rgba(59, 130, 246, 0.06), transparent 60%);
}

.events {
  background-color: var(--fr-dark);
  background-image:
    radial-gradient(900px 500px at 50% -10%, rgba(99, 102, 241, 0.07), transparent 65%);
}

.booking {
  background-color: var(--fr-black);
}

.contact {
  background-color: var(--fr-dark);
  background-image:
    radial-gradient(800px 460px at 90% 100%, rgba(139, 47, 201, 0.06), transparent 62%);
}


/* ═══════════════════════════════════════════════════
   5. BUTTON SYSTEM
═══════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--btn-radius);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-expo),
              opacity 0.3s var(--ease-out-expo);
}

/* Shine sweep — a band of light crosses the button on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.25) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ease-out-expo);
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(130%);
}

.btn:active {
  transform: scale(0.97) !important;
}

/* Gradient CTA — the background position drifts on hover */
.btn-gradient {
  background: linear-gradient(135deg, #8B2FC9 0%, #4F46E5 38%, #3B82F6 70%, #8B2FC9 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  color: #FFFFFF;
  box-shadow: 0 4px 24px rgba(139, 47, 201, 0.35);
  transition: background-position 0.9s var(--ease-out-expo),
              transform 0.35s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-expo);
}

.btn-gradient:hover {
  background-position: 95% 50%;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 40px rgba(139, 47, 201, 0.55);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-ghost:hover {
  background: var(--fr-gradient);
  border-color: transparent;
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--fr-glow-sm);
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 1.1rem 2rem;
  font-size: 1.05rem;
}

.btn[disabled] {
  opacity: 0.65;
  cursor: wait;
}

.btn-icon {
  transition: transform 0.35s var(--ease-out-expo);
}

.btn:hover .btn-icon {
  transform: translateY(3px);
}

/* Required field star */
.required-star {
  color: var(--fr-violet);
}


/* ═══════════════════════════════════════════════════
   6. PAGE LOADER
   Motion (fill bar, brand fade, exit) in animations.css
═══════════════════════════════════════════════════ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #07070C;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease-out-expo), visibility 0.6s;
}

.page-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.loader-brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  background: var(--fr-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.loader-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.loader-bar {
  width: 180px;
  height: 3px;
  margin-block-start: 1rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.loader-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: var(--fr-gradient);
  transform-origin: left;
  transform: scaleX(0);
}

/* No JS → no loader, no orchestration */
.no-js .page-loader {
  display: none;
}


/* ═══════════════════════════════════════════════════
   7. NAVBAR
═══════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  padding-block: 1.1rem;
  border-block-end: 1px solid transparent;
  transition: background 0.4s var(--ease-out-expo),
              padding 0.4s var(--ease-out-expo),
              border-color 0.4s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo),
              backdrop-filter 0.4s var(--ease-out-expo);
}

/* Glassmorphism state once the page is scrolled */
.navbar.scrolled {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding-block: 0.65rem;
  border-block-end-color: rgba(139, 47, 201, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Logo: white script wordmark sits directly on the dark
   nav — no pill needed, transparent PNG reads cleanly */
.navbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-out-expo), filter 0.35s var(--ease-out-expo);
}

.navbar-logo:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 18px rgba(139, 47, 201, 0.45));
}

.navbar-logo-img {
  display: block;
  max-height: 66px;
  width: auto;
  transition: max-height 0.4s var(--ease-out-expo);
}

.navbar.scrolled .navbar-logo-img {
  max-height: 52px;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  transition: color 0.3s var(--ease-out-expo);
  position: relative;
}

/* Gradient underline slides in from the inline start */
.nav-link::after {
  content: '';
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 0.75rem;
  inset-inline-end: 0.75rem;
  height: 2px;
  background: var(--fr-gradient);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(139, 47, 201, 0.6);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.4s var(--ease-out-expo);
}

.nav-link:hover,
.nav-link.active {
  color: #FFFFFF;
}

/* Active section keeps its underline permanently */
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.navbar-cta {
  margin-inline-start: 1rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
}

/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 8px;
  margin-inline-start: auto;
  transition: background 0.25s var(--ease-out-expo);
}

.hamburger:hover {
  background: rgba(255, 255, 255, 0.06);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out-expo),
              opacity 0.35s var(--ease-out-expo),
              width 0.35s var(--ease-out-expo);
}

.hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ═══════════════════════════════════════════════════
   8. MOBILE MENU
   Opens as a circle expanding from the hamburger button.
   JS sets --menu-x / --menu-y to the button's position.
═══════════════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  clip-path: circle(0px at var(--menu-x, calc(100% - 3rem)) var(--menu-y, 2.5rem));
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 0.6s var(--ease-out-expo),
              visibility 0s linear 0.6s;
}

.mobile-menu.open {
  clip-path: circle(150% at var(--menu-x, calc(100% - 3rem)) var(--menu-y, 2.5rem));
  visibility: visible;
  pointer-events: all;
  transition: clip-path 0.75s var(--ease-out-expo);
}

/* Ambient glow inside the menu */
.mobile-menu-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 420px at 80% 15%, rgba(139, 47, 201, 0.18), transparent 70%),
    radial-gradient(380px 380px at 15% 85%, rgba(59, 130, 246, 0.14), transparent 70%);
}

/* Brand logo pinned top-left of the menu — absolute so it
   never shifts the vertically-centred nav links/animation */
.mobile-menu-logo {
  position: absolute;
  inset-block-start: 1.4rem;
  inset-inline-start: 1.5rem;
  display: inline-flex;
  align-items: center;
}

.mobile-menu-logo-img {
  display: block;
  max-height: 40px;
  width: auto;
}

.mobile-menu-close {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.5rem;
  border-radius: 8px;
  transition: color 0.25s var(--ease-out-expo),
              background 0.25s var(--ease-out-expo),
              transform 0.4s var(--ease-out-expo);
}

.mobile-menu-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
  transform: rotate(90deg);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Links stagger in one by one — 0.08s apart */
.mobile-nav-link {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  padding: 0.4rem 1rem;
  transform: translateY(26px);
  opacity: 0;
  transition: color 0.3s var(--ease-out-expo),
              transform 0.55s var(--ease-out-expo),
              opacity 0.45s var(--ease-out-expo);
}

.mobile-menu.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open .mobile-nav-links li:nth-child(1) .mobile-nav-link { transition-delay: 0.10s; }
.mobile-menu.open .mobile-nav-links li:nth-child(2) .mobile-nav-link { transition-delay: 0.18s; }
.mobile-menu.open .mobile-nav-links li:nth-child(3) .mobile-nav-link { transition-delay: 0.26s; }
.mobile-menu.open .mobile-nav-links li:nth-child(4) .mobile-nav-link { transition-delay: 0.34s; }
.mobile-menu.open .mobile-nav-links li:nth-child(5) .mobile-nav-link { transition-delay: 0.42s; }
.mobile-menu.open .mobile-nav-links li:nth-child(6) .mobile-nav-link { transition-delay: 0.50s; }
.mobile-menu.open .mobile-nav-links li:nth-child(7) .mobile-nav-link { transition-delay: 0.58s; }

.mobile-nav-link:hover {
  color: #FFFFFF;
  transform: scale(1.05);
}

.mobile-menu-cta {
  opacity: 0;
  transform: translateY(26px);
  transition: transform 0.55s var(--ease-out-expo),
              opacity 0.45s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-expo),
              background-position 0.9s var(--ease-out-expo);
}

.mobile-menu.open .mobile-menu-cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.66s;
}


/* ═══════════════════════════════════════════════════
   9. HERO SECTION
   Entrance choreography lives in animations.css.
═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #07070C; /* the black the image fades in from */
}

/* Parallax wrapper — JS translates this slower than scroll */
.hero-bg-parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

/* The image itself — bleeds past the edges so the
   parallax shift and slow drift never expose a border */
.hero-bg {
  position: absolute;
  inset: -10% 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark gradient overlay — protects white text while letting
   the stage, string lights and pastel sky glow through */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 72% 52% at 50% 44%, rgba(8, 6, 18, 0.42) 0%, transparent 72%),
    linear-gradient(
      to bottom,
      rgba(8, 8, 16, 0.68) 0%,
      rgba(22, 12, 44, 0.38) 30%,
      rgba(22, 12, 44, 0.44) 62%,
      rgba(10, 10, 15, 0.95) 100%
    );
}

/* Floating gradient orbs */
.hero-orbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.32;
  transform: translateZ(0);
}

.orb-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, var(--fr-purple) 0%, transparent 70%);
  top: -12%;
  inset-inline-start: -6%;
}

.orb-2 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--fr-blue) 0%, transparent 70%);
  top: 18%;
  inset-inline-end: -6%;
}

.orb-3 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, var(--fr-indigo) 0%, transparent 70%);
  bottom: 8%;
  inset-inline-start: 28%;
}

.orb-4 {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--fr-violet) 0%, transparent 70%);
  top: 58%;
  inset-inline-start: 4%;
  opacity: 0.2;
}

.orb-5 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--fr-blue) 0%, transparent 70%);
  top: 28%;
  inset-inline-start: 52%;
  opacity: 0.2;
}

/* Giant translucent brand watermark — depth layer behind content */
.hero-watermark {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

.watermark-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(7rem, 19vw, 24rem);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.045);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  user-select: none;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-block-start: 110px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

/* The headline — letters revealed one by one (animations.css) */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9.5vw, 7.6rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: 0.012em;
  display: flex;
  justify-content: center;
  perspective: 700px;
  /* drop-shadow (not text-shadow) so the glow hugs the gradient glyphs */
  filter: drop-shadow(0 8px 42px rgba(139, 47, 201, 0.45))
          drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.hl-letter {
  display: inline-block;
  background: var(--fr-gradient-pearl);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* CHANGE 1 — tagline stays on ONE unbroken line at ≥1024px.
   vw-based clamp scales it with the viewport; nowrap enforces it. */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1024px) {
  .hero-tagline {
    white-space: nowrap;
    font-size: clamp(1.9rem, 2.6vw, 2.85rem);
  }
}

.tagline-accent {
  background: var(--fr-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-block-start: 0.5rem;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  inset-block-end: 2.5rem;
  inset-inline-start: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-block-start: 6px;
}

.scroll-wheel {
  width: 4px;
  height: 8px;
  background: var(--fr-violet);
  border-radius: 2px;
}

.scroll-label {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.35);
}


/* ═══════════════════════════════════════════════════
   10. ABOUT SECTION
═══════════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  margin-block-end: clamp(4rem, 8vw, 6rem);
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-text .section-title {
  margin-block-end: 1.5rem;
}

.about-text .btn {
  align-self: flex-start;
  margin-block-start: 0.5rem;
}

/* CHANGE 3 — About image: soft radius, purple glow,
   gentle scale + glow intensify on hover */
.about-img-wrap {
  position: relative;
}

.about-img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: 0 8px 40px rgba(139, 47, 201, 0.25);
  transition: transform 0.6s var(--ease-out-expo),
              box-shadow 0.6s var(--ease-out-expo);
}

.about-img-wrap:hover .about-img {
  transform: scale(1.02);
  box-shadow: 0 12px 64px rgba(139, 47, 201, 0.45),
              0 0 90px rgba(139, 47, 201, 0.18);
}

.about-img-badge {
  position: absolute;
  inset-block-end: 1.5rem;
  inset-inline-end: -1.5rem;
  background: var(--fr-charcoal);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: var(--card-radius);
  padding: 1rem 1.5rem;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

.about-img-wrap:hover .about-img-badge {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), var(--fr-glow-sm);
}

.badge-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.badge-label {
  display: block;
  font-size: 0.75rem;
  color: var(--fr-gray);
  margin-block-start: 0.25rem;
  white-space: nowrap;
}

/* Stats row */
.stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 2.5rem 2rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
}

.stat-item {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1;
  display: block;
}

.stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fr-gray);
}

.stat-divider {
  width: 1px;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.35), transparent);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════
   11. SERVICES SECTION
═══════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Glass card with an animated conic-gradient border ring.
   The ring (::before) spins continuously and fades in on hover. */
.service-card {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: default;
  transition: transform 0.5s var(--ease-out-expo),
              background 0.5s var(--ease-out-expo),
              border-color 0.5s var(--ease-out-expo),
              box-shadow 0.5s var(--ease-out-expo);
}

.service-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    rgba(139, 47, 201, 0.95) 16%,
    rgba(99, 102, 241, 0.95) 32%,
    rgba(59, 130, 246, 0.95) 48%,
    transparent 66%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out-expo);
  animation: spinAngle 3.5s linear infinite;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-12px);
  background: var(--glass-bg-hover);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 24px 64px rgba(139, 47, 201, 0.25), var(--fr-glow);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  width: 60px;
  height: 60px;
  background: var(--fr-gradient-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

/* Icon glow pulses once when the card is hovered (keyframes in animations.css) */
.service-card:hover .service-icon {
  transform: scale(1.1);
  animation: iconPulse 0.9s var(--ease-out-expo) 1;
  box-shadow: 0 0 24px rgba(139, 47, 201, 0.35);
}

.service-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fr-white);
}

.service-desc {
  font-size: 0.95rem;
  color: var(--fr-gray);
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════
   12. EVENTS SECTION
═══════════════════════════════════════════════════ */
/* Coming soon state */
.events-coming-soon {
  display: flex;
  justify-content: center;
}

/* Card with a continuously rotating conic-gradient border */
.coming-soon-card {
  max-width: 560px;
  width: 100%;
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 20px 70px rgba(139, 47, 201, 0.16);
}

.coming-soon-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: conic-gradient(
    from var(--angle),
    #8B2FC9, #4F46E5, #3B82F6, #A855F7, #8B2FC9
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  animation: spinAngle 5s linear infinite;
  pointer-events: none;
}

/* Soft rotating halo behind the card */
.coming-soon-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: var(--fr-gradient);
  z-index: -1;
  opacity: 0.18;
  filter: blur(28px);
  animation: gradientBorderPulse 4s ease-in-out infinite;
  pointer-events: none;
}

.sparkle-icon {
  animation: sparkleSpin 10s linear infinite;
  filter: drop-shadow(0 0 18px rgba(139, 47, 201, 0.45));
}

/* Shimmer — a chrome-like shine slides across the text on a loop */
.coming-soon-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(
    110deg,
    #A855F7 0%,
    #6366F1 32%,
    #E9D5FF 47%,
    #FFFFFF 50%,
    #E9D5FF 53%,
    #6366F1 68%,
    #A855F7 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 3.8s linear infinite;
}

.coming-soon-text {
  color: var(--fr-gray);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 38ch;
}

/* Notify form */
.notify-form {
  width: 100%;
}

.notify-input-wrap {
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--btn-radius);
  padding: 5px;
  transition: border-color 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
}

.notify-input-wrap:focus-within {
  border-color: var(--fr-violet);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16),
              0 0 28px rgba(139, 47, 201, 0.22);
}

.notify-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fr-white);
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  min-width: 0;
}

.notify-input::placeholder {
  color: var(--fr-gray);
}

.notify-btn {
  padding: 0.65rem 1.4rem;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.notify-success {
  margin-block-start: 1rem;
  color: var(--fr-success);
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.notify-success[hidden] {
  display: none;
}

.notify-check {
  flex-shrink: 0;
}

/* Event cards grid (future use — CSS fully written) */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.event-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 50px rgba(139, 47, 201, 0.25);
}

.event-card-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-expo);
}

.event-card:hover .event-card-image img {
  transform: scale(1.05);
}

.event-date-badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  background: var(--fr-gradient);
  color: white;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
}

.event-category-badge {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.event-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fr-white);
}

.event-artist {
  font-size: 0.9rem;
  color: var(--fr-violet);
  font-weight: 500;
}

.event-location {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--fr-gray);
}

.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 0.5rem;
}

.event-price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--fr-white);
}


/* ═══════════════════════════════════════════════════
   14. BOOKING SECTION
═══════════════════════════════════════════════════ */
.booking {
  position: relative;
  overflow: hidden;
}

.booking::before {
  content: '';
  position: absolute;
  inset-block-start: -200px;
  inset-inline-end: -200px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(139, 47, 201, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.booking::after {
  content: '';
  position: absolute;
  inset-block-end: -240px;
  inset-inline-start: -200px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.booking-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

.booking-copy .section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-block-end: 1.25rem;
}

.booking-perks {
  margin-block-start: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.booking-perk {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--fr-gray);
}

.perk-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Form panel — glass */
.booking-form-wrap {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

.booking-form {
  display: flex;
  flex-direction: column;
}

/* Wrapper that collapses smoothly on successful submit */
.form-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-height: 1400px;
  overflow: hidden;
  transition: max-height 0.7s var(--ease-out-expo),
              opacity 0.45s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.booking-form.submitted .form-main {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row-2 {
  flex-direction: row;
  gap: 1rem;
}

.form-row-2 .form-group {
  flex: 1;
  min-width: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* ── Floating label fields ─────────────────────────
   The label sits inside the field like a placeholder,
   then floats up when the field is focused or filled. */
.form-field {
  position: relative;
}

.form-input {
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  color: var(--fr-white);
  padding: 1.45rem 1rem 0.55rem;
  font-size: 0.95rem;
  width: 100%;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.35s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-expo),
              background 0.35s var(--ease-out-expo);
}

.form-label {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.95rem;
  font-weight: 400;
  pointer-events: none;
  white-space: nowrap;
  transition: inset-block-start 0.3s var(--ease-out-expo),
              transform 0.3s var(--ease-out-expo),
              font-size 0.3s var(--ease-out-expo),
              letter-spacing 0.3s var(--ease-out-expo),
              color 0.3s var(--ease-out-expo);
}

/* Floated state — focus, JS .has-value, or any typed content */
.form-field:focus-within .form-label,
.form-field.has-value .form-label,
.form-field .form-input:not(:placeholder-shown) ~ .form-label {
  inset-block-start: 0.8rem;
  transform: translateY(0);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-violet);
}

.form-optional {
  font-weight: inherit;
  opacity: 0.7;
}

.form-input::placeholder {
  color: transparent; /* the floating label plays the placeholder role */
}

/* Focus — purple border with a spreading glow */
.form-input:focus {
  border-color: var(--fr-violet);
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16),
              0 0 28px rgba(139, 47, 201, 0.25);
}

.form-input.error {
  border-color: var(--fr-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form-field:focus-within .form-label .required-star {
  color: var(--fr-violet);
}

/* Select */
.form-field-select .form-select {
  padding-inline-end: 2.5rem;
  cursor: pointer;
  background-image: none;
  min-height: 3.6rem;
}

.select-arrow {
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--fr-gray);
  pointer-events: none;
  transition: transform 0.35s var(--ease-out-expo), color 0.35s var(--ease-out-expo);
}

.form-field-select:focus-within .select-arrow {
  transform: translateY(-50%) rotate(180deg);
  color: var(--fr-violet);
}

.form-select option {
  background: var(--fr-charcoal);
  color: var(--fr-white);
}

/* Textarea — label anchors to the top instead of center */
.form-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
  padding-block-start: 1.7rem;
}

.form-field-textarea .form-label {
  inset-block-start: 1.15rem;
  transform: none;
}

.form-field-textarea:focus-within .form-label,
.form-field-textarea.has-value .form-label,
.form-field-textarea .form-input:not(:placeholder-shown) ~ .form-label {
  inset-block-start: 0.55rem;
  transform: none;
}

/* Error message */
.field-error {
  font-size: 0.8rem;
  color: var(--fr-error);
  min-height: 1.1em;
  transition: opacity 0.25s var(--ease-out-expo);
}

/* ── International phone field (intl-tel-input v29) ────
   The library wraps #bookPhone in a .iti container with a
   flag/country button on the left. We preserve the floating-
   label look: make the wrapper full-width, leave room for the
   flag, and let the label sit beside it (focus/.has-value drive
   the float since the input is no longer a label sibling). */
.form-field-phone .iti {
  display: block;
  width: 100%;
}

/* Room for the flag button; top/bottom padding stays for the floating label */
.form-field-phone .form-input {
  padding-inline-start: 52px;
}

/* Label clears the flag at rest and stays aligned with the number when floated */
.form-field-phone .form-label {
  inset-inline-start: 52px;
}

/* Flag/country button — transparent so it blends into the field */
.form-field-phone .iti__selected-country {
  background: transparent;
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
}
.form-field-phone .iti__selected-country:hover,
.form-field-phone .iti__selected-country:focus {
  background: rgba(0, 0, 0, 0.04);
}

/* Country dropdown — match the form's soft, rounded look */
.iti__dropdown-content {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  background: #FFFFFF;
  font-family: inherit;
}
.iti__search-input {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.85rem;
}
.iti__country {
  font-size: 0.9rem;
  color: #15151B;
}
.iti__country:hover,
.iti__country.iti__highlight {
  background-color: rgba(139, 47, 201, 0.10);
}
.iti__dial-code {
  color: #6B6B77;
}

/* ── Form banner (submit-level error state) ──────────
   Shown when the whole submission fails; the user's input is kept. */
.form-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.form-banner[hidden] {
  display: none;
}
.form-banner-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #B91C1C;
}
.form-banner-error svg {
  flex-shrink: 0;
  color: var(--fr-error);
}

/* ── Honeypot — visually gone and out of the a11y tree ── */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ── Success state — checkmark draws itself ──────── */
.form-success {
  text-align: center;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.form-success[hidden] {
  display: none;
}

.success-check {
  width: 76px;
  height: 76px;
  margin-block-end: 0.5rem;
  filter: drop-shadow(0 6px 24px rgba(139, 47, 201, 0.4));
}

.check-circle {
  fill: none;
  stroke: url(#checkGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 183;
  stroke-dashoffset: 183;
  transform: rotate(-90deg);
  transform-origin: center;
}

.check-path {
  fill: none;
  stroke: url(#checkGrad);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 37;
  stroke-dashoffset: 37;
}

/* Stroke-draw animations fire when JS adds .show (keyframes in animations.css) */
.form-success.show .check-circle {
  animation: drawStroke 0.9s var(--ease-out-expo) 0.15s forwards;
}

.form-success.show .check-path {
  animation: drawStroke 0.5s var(--ease-out-expo) 0.85s forwards;
}

.form-success.show .success-check {
  animation: successPop 0.7s var(--ease-elastic) 1.15s;
}

.form-success h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--fr-white);
}

.form-success p {
  color: var(--fr-gray);
  font-size: 0.95rem;
}


/* ═══════════════════════════════════════════════════
   15. CONTACT SECTION
═══════════════════════════════════════════════════ */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Cards tilt toward the cursor (JS sets the transform);
   transition handles the smooth return on leave */
.contact-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 2rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.55s var(--ease-out-expo),
              border-color 0.4s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo);
}

/* While the pointer is steering the card, JS owns the transform */
.contact-card.is-tilting {
  transition: border-color 0.4s var(--ease-out-expo),
              box-shadow 0.4s var(--ease-out-expo);
}

.contact-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 18px 56px rgba(139, 47, 201, 0.22), var(--fr-glow-sm);
}

.contact-icon {
  width: 56px;
  height: 56px;
  background: var(--fr-gradient-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.contact-card:hover .contact-icon {
  transform: scale(1.08);
  box-shadow: 0 0 22px rgba(139, 47, 201, 0.3);
}

.contact-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fr-gray);
}

.contact-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--fr-white);
  transition: color 0.3s var(--ease-out-expo);
}

a.contact-value:hover {
  color: var(--fr-violet);
}

/* ═══════════════════════════════════════════════════
   16. FOOTER
═══════════════════════════════════════════════════ */
.footer {
  position: relative;
  background: #08080D;
  padding-block-start: 4.5rem;
  padding-block-end: 2rem;
}

/* Animated gradient divider at the top of the footer */
.footer::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #8B2FC9 25%,
    #6366F1 50%,
    #3B82F6 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: dividerSlide 7s linear infinite;
  opacity: 0.85;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-block-end: 3rem;
}

/* Footer logo — white wordmark directly on the dark footer */
.footer-logo {
  display: inline-flex;
  align-items: center;
  margin-block-end: 1rem;
  transition: transform 0.35s var(--ease-out-expo), filter 0.35s var(--ease-out-expo);
}

.footer-logo:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 22px rgba(139, 47, 201, 0.45));
}

.footer-logo-img {
  display: block;
  max-height: 60px;
  width: auto;
}

.footer-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-block-end: 1.5rem;
  max-width: 34ch;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.social-link {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.35s var(--ease-out-expo),
              background 0.35s var(--ease-out-expo),
              transform 0.35s var(--ease-elastic),
              border-color 0.35s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-expo);
}

.social-link:hover {
  color: #FFFFFF;
  background: var(--fr-gradient);
  border-color: transparent;
  transform: scale(1.2);
  box-shadow: 0 8px 28px rgba(139, 47, 201, 0.45);
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-block-end: 1.25rem;
}

.footer-links-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-link {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s var(--ease-out-expo), padding-inline-start 0.3s var(--ease-out-expo);
  display: inline-block;
}

a.footer-link:hover {
  color: #FFFFFF;
  padding-inline-start: 4px;
}

.footer-bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.06);
  padding-block-start: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-copy,
.footer-credit {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.3);
}


/* ═══════════════════════════════════════════════════
   17. RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════ */

/* Tablet — 1024px */
@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-img-badge {
    inset-inline-end: 0;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .booking-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-desc {
    max-width: 100%;
  }
}

/* Mobile — 768px */
@media (max-width: 768px) {
  .navbar-links,
  .navbar-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .navbar-logo-img {
    max-height: 56px;
  }

  .navbar.scrolled .navbar-logo-img {
    max-height: 46px;
  }

  .hero-headline {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  .watermark-text {
    font-size: clamp(5rem, 24vw, 9rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .btn-lg {
    width: 100%;
    justify-content: center;
    max-width: 300px;
  }

  .about-img {
    height: 380px;
  }

  .stats-row {
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.75rem 1.25rem;
  }

  .stat-item {
    flex: 0 1 calc(50% - 1rem);
    min-width: 120px;
  }

  .stat-divider {
    display: none;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .contact-cards {
    grid-template-columns: 1fr;
  }

  .form-row-2 {
    flex-direction: column;
    gap: 1.25rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
}

/* Small mobile — 480px */
@media (max-width: 480px) {
  :root {
    --section-padding: clamp(3.5rem, 8vw, 5rem);
  }

  .section-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .hero-tagline {
    font-size: 1.1rem;
  }

  .watermark-text {
    display: none;
  }

  .notify-input-wrap {
    flex-direction: column;
    border-radius: 14px;
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .notify-btn {
    width: 100%;
    border-radius: var(--btn-radius);
    justify-content: center;
  }

  .booking-form-wrap {
    padding: 1.5rem 1.25rem;
  }

  .stat-item {
    flex: 0 1 100%;
  }

  .coming-soon-card {
    padding: 2rem 1.5rem;
  }
}

/* Minimum width safety net — 320px */
@media (max-width: 320px) {
  :root {
    --container-pad: 1rem;
  }

  .hero-headline {
    font-size: 2.8rem;
  }
}