/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100%;
}

:root {
  --bg: #0a0606;
  --bg-2: #110909;
  --bg-3: #1a0d08;
  --orange: #FF6B1A;
  --orange-light: #FF8A4C;
  --orange-deep: #E04518;
  --orange-glow: rgba(255, 107, 26, 0.4);
  --cream: #f5ede0;
  --muted: rgba(245, 237, 224, 0.6);
  --line: rgba(245, 237, 224, 0.12);
  --line-orange: rgba(255, 107, 26, 0.3);
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'Inter Tight', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  cursor: auto;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; cursor: pointer; font: inherit; }
em { font-style: italic; font-family: var(--font-display); font-weight: 400; }

/* ============ CUSTOM CURSOR (disabled - using normal cursor) ============ */
.cursor-dot, .cursor-ring {
  display: none !important;
}

/* ============ LOADER ============ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; }
.loader-mark {
  width: 200px;
  height: 200px;
  margin: 0 auto 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Orbiting ring fills the whole .loader-mark box, positioned behind logo */
.loader-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.loader-ring {
  transform-origin: center;
  animation: loaderSpin 2s linear infinite;
  stroke-dasharray: 100 502;
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}
/* Actual brand logo image, centred inside the ring */
.loader-logo-img {
  width: 130px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  animation: loaderPulse 2.2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.05); opacity: 1; }
}
.loader-text {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 12px;
  color: var(--orange);
  margin-bottom: 30px;
}
.loader-text span {
  display: inline-block;
  animation: loadLetter 1.6s var(--ease) infinite;
}
.loader-text span:nth-child(2) { animation-delay: 0.1s; }
.loader-text span:nth-child(3) { animation-delay: 0.2s; }
.loader-text span:nth-child(4) { animation-delay: 0.3s; }
@keyframes loadLetter {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}
.loader-bar {
  width: 200px;
  height: 1px;
  margin: 0 auto;
  background: rgba(255, 107, 26, 0.2);
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  background: var(--orange);
  width: 0%;
  animation: loadFill 2s var(--ease) forwards;
}
@keyframes loadFill {
  to { width: 100%; }
}

/* ============ NAVIGATION ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 40px;
  /* Smooth background-only transition. Padding stays fixed so the page
     doesn't shift up/down when the visitor starts scrolling. */
  transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 6, 6, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
}
.nav-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.logo {
  display: flex; align-items: center;
  color: var(--orange);
  transition: opacity 0.3s;
}
.logo:hover { opacity: 0.85; }
.logo-img {
  height: 56px;
  width: auto;
  display: block;
  /* Logo size stays the same on scroll — no transition needed */
}
.logo.big .logo-img {
  height: 72px;
}
/* legacy svg logo (no longer used but kept for safety) */
.logo svg { width: 32px; height: 32px; }
.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 2px;
  color: var(--cream);
}
.logo-text em {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: 1px;
  margin-left: 4px;
  font-weight: 400;
}
.nav-links {
  display: flex;
  gap: 36px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--orange); }

.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-search {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, color 0.3s;
}
.nav-search:hover { border-color: var(--orange); color: var(--orange); }
.nav-cta {
  display: flex; align-items: center; gap: 8px;
  background: var(--orange);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background 0.3s, transform 0.3s;
}
.nav-cta:hover { background: var(--orange-light); transform: translateY(-2px); }
.nav-cta svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .nav { padding: 16px 20px; }
  .nav.scrolled { padding: 12px 20px; }
  /* .nav-links visibility is handled by enhanced.css mobile rules
     (slide-in panel with transform). Do NOT set display:none here. */
  .nav-cta span { display: none; }
  .nav-cta { padding: 10px 12px; }
}

/* ============ SECTION COMMON ============ */
section { position: relative; }
.section-head {
  max-width: 1400px;
  margin: 0 auto;
  padding: 140px 40px 60px;
}
.section-head.center {
  text-align: center;
}
.section-head.center .section-tag {
  justify-content: center;
}
.section-tag {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
  color: var(--orange);
}
.tag-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
}
.tag-line {
  width: 60px; height: 1px;
  background: var(--orange);
}
.tag-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.section-title.big {
  font-size: clamp(44px, 7vw, 104px);
}
.section-title em {
  font-style: italic;
  font-weight: 300;
}
.section-lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.6;
}
.section-head.center .section-lede {
  margin-left: auto;
  margin-right: auto;
}
.hero-accent { color: var(--orange); }

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ HERO ============ */
.hero {
  /* Floor + ceiling instead of a hard height: at least a full screen
     (clamped 640–900px) but free to grow taller when the content needs
     more vertical room — e.g. at higher browser-zoom levels — so the
     bottom stats row is never clipped. */
  min-height: clamp(640px, 100vh, 900px);
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  padding: 140px 40px 60px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-grain {
  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 baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.42  0 0 0 0 0.1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: orbFloat 14s ease-in-out infinite;
}
.hero-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--orange-deep), transparent 70%);
  top: -200px; right: -100px;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--orange), transparent 70%);
  bottom: -100px; left: -100px;
  animation-delay: -7s;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.hero-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  margin-bottom: 40px;
  color: var(--muted);
  backdrop-filter: blur(10px);
  animation: fadeUp 1s var(--ease-out) 0.4s both;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--orange-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7.5vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin-bottom: 50px;
  max-width: 1200px;
}
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-word, .hero-italic {
  display: inline-block;
  transform: translateY(110%);
  animation: heroReveal 1.2s var(--ease-out) forwards;
}
.hero-line:nth-child(1) .hero-word { animation-delay: 0.6s; }
.hero-line:nth-child(2) .hero-word { animation-delay: 0.75s; }
.hero-line:nth-child(2) .hero-italic { animation-delay: 0.85s; }
.hero-line:nth-child(3) .hero-word:nth-child(1) { animation-delay: 0.95s; }
.hero-line:nth-child(3) .hero-word:nth-child(2) { animation-delay: 1.05s; }
.hero-italic {
  font-style: italic;
  font-weight: 300;
  color: var(--orange);
}
@keyframes heroReveal {
  to { transform: translateY(0); }
}

.hero-bottom {
  margin-bottom: 40px;
  animation: fadeUp 1s var(--ease-out) 1.4s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  animation: fadeUp 1s var(--ease-out) 1.3s both;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  color: var(--bg);
  padding: 18px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.btn-primary.big {
  padding: 24px 40px;
  font-size: 16px;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange-light);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px var(--orange-glow);
}
.btn-primary:hover::before { transform: translateY(0); }
.btn-text, .btn-icon { position: relative; z-index: 1; }
.btn-icon {
  width: 18px; height: 18px;
  transition: transform 0.4s var(--ease);
}
.btn-icon svg { width: 100%; height: 100%; }
.btn-primary:hover .btn-icon { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.btn-ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.06);
}
.play-icon {
  width: 28px; height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.play-icon svg { width: 11px; height: 11px; margin-left: 2px; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 800px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  animation: fadeUp 1s var(--ease-out) 1.6s both;
}
.meta-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 8px;
}
.meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  line-height: 1.5;
  text-transform: uppercase;
}

/* ============ HERO CAROUSEL ============ */
.hero-carousel {
  position: relative;
  width: 100%;
  height: auto;
}
/* DESKTOP: the active slide goes into normal flow so it drives the
   carousel/hero height (inactive slides stay absolutely positioned and
   stacked underneath for the crossfade). This lets the hero grow to fit
   tall content at higher zoom levels without clipping the bottom row. */
@media (min-width: 901px) {
  .hero-slide.active {
    position: relative;
    inset: auto;
    height: auto;
  }
}
/* Every slide fills the hero. Inactive slides sit on top, invisible.
   The active slide fades in (opacity + slight zoom). Each slide can
   carry its own background image via --slide-bg. */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 40px;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 1.2s;
  pointer-events: none;
  overflow: hidden;
}
/* Per-slide background image (set via data attribute or inline style) */
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg, none);
  background-size: cover;
  background-position: var(--slide-bg-pos, center);
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}
/* Dark gradient overlay so text stays legible over the image */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 6, 6, 0.95) 0%, rgba(10, 6, 6, 0.7) 45%, rgba(10, 6, 6, 0.3) 100%),
    linear-gradient(180deg, rgba(10, 6, 6, 0.4) 0%, transparent 30%, transparent 70%, rgba(10, 6, 6, 0.6) 100%);
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: 1;
  pointer-events: none;
}
.hero-slide > * { position: relative; z-index: 2; }
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.hero-slide.active::before { opacity: 0.55; }
.hero-slide.active::after { opacity: 1; }

/* Override the existing per-element entrance animations inside slides
   so they don't fight the carousel's slide-level fade. Reset transform
   too (hero-word originally has translateY(110%)). */
.hero-slide .hero-eyebrow { animation: none; opacity: 1; }
.hero-slide .hero-word,
.hero-slide .hero-italic {
  animation: none;
  opacity: 1;
  transform: translateY(0);
}
.hero-slide .hero-bottom { animation: none; opacity: 1; }
.hero-slide .hero-actions { animation: none; opacity: 1; }
.hero-slide .hero-meta { animation: none; opacity: 1; }

/* Special eid eyebrow styling */
.hero-eyebrow.eid-eyebrow {
  color: var(--orange);
  border-color: var(--line-orange);
  background: rgba(255, 107, 26, 0.05);
}

/* ===== Carousel Controls ===== */
.carousel-controls {
  position: absolute;
  /* Sit at the bottom-right of the hero, away from the left-aligned
     title/paragraph/meta content so they never overlap. */
  bottom: 40px;
  right: 40px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  z-index: 5;
  animation: fadeUp 1s var(--ease-out) 1.5s both;
}
.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.02);
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(255, 107, 26, 0.08);
  transform: translateY(-2px);
}
.carousel-dots {
  display: flex;
  gap: 10px;
  align-items: center;
}
.carousel-dot {
  position: relative;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  transition: width 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.carousel-dot.active {
  width: 64px;
  background: rgba(255, 107, 26, 0.2);
}
.carousel-dot .dot-progress {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--orange);
  border-radius: 3px;
}
.carousel-dot.active .dot-progress {
  width: 100%;
  transition: width 6s linear;
}
.carousel-dot.paused .dot-progress {
  transition: none;
}

.hero-visual {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 480px;        /* Tall enough to fit both cards comfortably */
  z-index: 1;
  pointer-events: none;
}
.hero-visual-set {
  position: absolute;
  inset: 0;             /* Each set fills the visual area */
  pointer-events: none;
}
.hero-visual-set.is-active { pointer-events: auto; }

.float-card {
  position: absolute;
  width: 270px;
  background: rgba(26, 13, 8, 0.7);
  border: 1px solid var(--line-orange);
  border-radius: 22px;
  padding: 16px;
  backdrop-filter: blur(20px);
  animation: cardFloat 6s ease-in-out infinite;
  z-index: 1;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.float-card:hover {
  border-color: var(--orange);
  box-shadow: 0 30px 60px -20px var(--orange-glow), 0 0 0 1px rgba(255, 107, 26, 0.15);
}
/* Top card — anchored near the top of the visual area */
.float-card-1 {
  top: 30px;
  right: 0;
  animation-delay: 0s;
  transform: rotate(-4deg);
  z-index: 2;
}
/* Bottom card — positioned just below and to the left of the top card so
   it overlaps slightly, giving a layered/stacked feel. */
.float-card-2 {
  top: 290px;
  right: 180px;
  animation-delay: -3s;
  transform: rotate(5deg);
}
@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r, -4deg)); }
  50% { transform: translateY(-12px) rotate(var(--r, -4deg)); }
}
.float-card-2 { --r: 5deg; }
.float-card-img {
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-3);
  margin-bottom: 12px;
  aspect-ratio: 1.35;
  position: relative;
}
.float-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.float-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4));
  pointer-events: none;
}
.float-card:hover .float-card-img img {
  transform: scale(1.08);
}
.float-card-img svg { width: 100%; height: auto; }
.float-card-label {
  padding: 2px 4px 4px;
  display: grid;
  gap: 3px;
}
.lbl-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--orange);
}
.lbl-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  transition: color 0.3s;
}
.float-card:hover .lbl-name { color: var(--orange); }
.lbl-price {
  font-size: 15px;
  color: var(--muted);
}
.lbl-price em { font-size: 12px; opacity: 0.7; }

.hero-scroll {
  position: absolute;
  bottom: 30px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  animation: fadeUp 1s var(--ease-out) 2s both;
}
.scroll-line {
  width: 50px; height: 1px;
  background: var(--muted);
  position: relative;
  overflow: hidden;
}
.scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  animation: scrollLine 2s ease infinite;
}
@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 1200px) {
  .hero-visual { display: none; }
}
@media (max-width: 900px) {
  .hero {
    padding: 120px 20px 40px;
    min-height: auto;
    align-items: flex-start;
  }
  .hero-content { width: 100%; max-width: 100%; }
  .hero-title { font-size: clamp(40px, 9vw, 64px); margin-bottom: 30px; }
  .hero-bottom { margin-bottom: 30px; }
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 20px;
    max-width: 100%;
  }
  .meta-num { font-size: 44px; }
  .hero-scroll { display: none; }
  .hero-actions { gap: 10px; }
  .btn-primary, .btn-ghost { padding: 14px 22px; font-size: 13px; }
  .hero-eyebrow { margin-bottom: 24px; font-size: 10px; }

  /* Carousel mobile — dots only (arrows removed) */
  .carousel-controls {
    position: relative;
    bottom: auto;
    margin-top: 28px;
    justify-content: center;
    gap: 0;
    width: 100%;
  }
  .carousel-dot { width: 24px; }
  .carousel-dot.active { width: 40px; }
}
@media (max-width: 600px) {
  .hero { padding: 110px 16px 32px; }
  .hero-title { font-size: clamp(34px, 8.5vw, 52px); }
  .hero-sub { font-size: 15px; }
  .hero-sub br { display: none; } /* allow natural wrap */
  .meta-num { font-size: 38px; }
  .meta-label { font-size: 10px; }
}

/* ============ MARQUEE ============ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 16px 0;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
}
.m-item {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  color: var(--cream);
}
.m-star {
  color: var(--orange);
  font-size: 18px;
}
@keyframes marqueeScroll {
  to { transform: translateX(-50%); }
}

/* ============ SHOP / CATEGORIES ============ */
.shop {
  padding-bottom: 120px;
}
.cat-grid {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cat-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 36px;
  min-height: 360px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), border-color 0.6s;
  display: block;
}
.cat-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-orange);
}
.cat-glow {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--orange-glow), transparent 65%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  top: -100px;
  right: -100px;
}
.cat-card:hover .cat-glow { opacity: 1; }

.cat-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.cat-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 28px;
}
.cat-illu {
  width: 110px;
  height: 110px;
  margin-bottom: 32px;
  transition: transform 0.6s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cat-illu svg {
  width: 100%;
  height: 100%;
}
.cat-card:hover .cat-illu {
  transform: rotate(-6deg) scale(1.08);
}
.cat-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.cat-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
}
.cat-arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s, border-color 0.4s, transform 0.4s, color 0.4s;
}
.cat-arrow svg { width: 16px; height: 16px; }
.cat-card:hover .cat-arrow {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--bg);
  transform: rotate(-45deg);
}

@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; padding: 0 20px; }
  .section-head { padding: 100px 20px 40px; }
}

/* ============ STORY ============ */
.story {
  padding: 80px 40px 60px;
  background: linear-gradient(to bottom, var(--bg), var(--bg-2));
}
.story-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-visual {
  position: relative;
  height: 600px;
}
.story-stack {
  position: relative;
  height: 100%;
}
.story-img {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
}
.story-img-back {
  width: 70%;
  height: 70%;
  top: 0;
  right: 0;
}
.story-img-front {
  width: 65%;
  height: 65%;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.img-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-3);
  overflow: hidden;
}
.img-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  filter: brightness(0.85) contrast(1.1);
}
.story-img:hover .img-bg img {
  transform: scale(1.05);
}
.img-bg svg {
  width: 100%; height: 100%;
  object-fit: cover;
}
.img-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 6, 6, 0.7));
  pointer-events: none;
}
.img-label {
  position: absolute;
  top: 24px; right: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  padding: 6px 12px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  z-index: 2;
  background: rgba(10, 6, 6, 0.7);
  backdrop-filter: blur(10px);
}
.img-tag {
  position: absolute;
  bottom: 24px; left: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
}
.tag-dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}
.story-badge {
  position: absolute;
  top: 50%; right: 0;
  width: 130px; height: 130px;
  z-index: 3;
  transform: translate(20px, -50%);
}
.badge-circle {
  width: 100%; height: 100%;
  animation: spin 20s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge-circle svg { width: 100%; height: 100%; }

.story-text {
  padding: 20px 0;
}
.story-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
}
.story-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
}
.story-lead {
  font-size: 19px !important;
  color: var(--cream) !important;
}
.story-signature {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.story-signature svg { width: 100px; height: auto; }
.story-signature span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .story { padding: 60px 20px 80px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-visual { height: 400px; }
}

/* ============ CRAFT TIMELINE ============ */
.craft {
  padding-bottom: 140px;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.craft::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/craft-bg.png') center / cover no-repeat;
  opacity: 0.35;
  z-index: -2;
  /* gentle parallax-style scale */
  transform: scale(1.05);
}
.craft::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, var(--bg-2) 85%),
    linear-gradient(to bottom, var(--bg-2) 0%, transparent 20%, transparent 80%, var(--bg-2) 100%);
  z-index: -1;
}
.craft-timeline {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.craft-line {
  position: absolute;
  top: 88px;
  left: 90px;
  right: 90px;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.craft-line-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--orange), var(--orange-light));
  transition: width 1.5s var(--ease-out);
}
.craft-step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.craft-circle {
  width: 80px; height: 80px;
  margin: 0 auto 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.5s, background 0.5s, transform 0.5s var(--ease);
}
.craft-step.active .craft-circle {
  border-color: var(--orange);
  background: rgba(255, 107, 26, 0.1);
  transform: scale(1.1);
}
.craft-num {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: 1px;
}
.craft-card {
  padding: 0 16px;
}
.craft-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 18px;
  color: var(--orange);
}
.craft-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 12px;
}
.craft-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
}
.craft-time {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  padding: 4px 10px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  display: inline-block;
}

@media (max-width: 900px) {
  .craft-timeline { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; }
  .craft-line { display: none; }
}

/* ============ FEATURED ============ */
.featured {
  position: relative;
  padding: 80px 40px;
  overflow: hidden;
  background: var(--bg);
}
.featured-bg-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(120px, 18vw, 280px);
  color: var(--bg-2);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  letter-spacing: -0.05em;
  animation: bgTextScroll 60s linear infinite;
}
@keyframes bgTextScroll {
  from { transform: translate(0, -50%); }
  to { transform: translate(-50%, -50%); }
}
.featured-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.featured-image {
  position: relative;
  aspect-ratio: 1;
}
.featured-disc {
  position: relative;
  width: 100%;
  height: 100%;
}
.disc-image {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(255, 107, 26, 0.35),
    0 0 0 1px rgba(255, 107, 26, 0.4),
    inset 0 0 60px rgba(0, 0, 0, 0.4);
}
.disc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.95) contrast(1.1) saturate(1.1);
  animation: discZoom 20s ease-in-out infinite alternate;
}
@keyframes discZoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.disc-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 107, 26, 0.2), transparent 60%),
    linear-gradient(180deg, transparent 40%, rgba(10, 6, 6, 0.4));
  pointer-events: none;
}
.disc-rotate {
  position: absolute;
  inset: 0;
  animation: spin 30s linear infinite;
}
.disc-rotate svg { width: 100%; height: 100%; }
.disc-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 107, 26, 0.3);
  animation: spin 60s linear infinite reverse;
}

.featured-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(50px, 7vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.featured-title em {
  font-style: italic;
  font-weight: 300;
}
.featured-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 40px;
  max-width: 480px;
}
.featured-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
  margin-bottom: 40px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.spec { display: flex; justify-content: space-between; align-items: baseline; }
.spec-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}
.featured-cta {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.featured-price { display: flex; flex-direction: column; gap: 4px; }
.price-old {
  font-size: 14px;
  color: var(--muted);
  text-decoration: line-through;
}
.price-new {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1;
}
.price-new em {
  font-size: 16px;
  color: var(--muted);
  font-weight: 400;
}

@media (max-width: 900px) {
  .featured { padding: 80px 20px; }
  .featured-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============ DELIVERY ============ */
.delivery {
  padding: 0 40px 80px;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.delivery::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/delivery-bg.png') center / cover no-repeat;
  opacity: 0.45;
  z-index: -2;
  transform: scale(1.05);
}
.delivery::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(17, 9, 9, 0.7) 70%, var(--bg-2) 100%),
    linear-gradient(to bottom, var(--bg-2) 0%, transparent 15%, transparent 85%, var(--bg-2) 100%);
  z-index: -1;
}
.delivery-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.delivery-left .section-tag { margin-top: 80px; }
.delivery-zones {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.zone {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.4s, transform 0.4s;
}
.zone:hover {
  border-color: var(--line-orange);
  transform: translateX(8px);
}
.zone-icon {
  width: 44px; height: 44px;
  background: rgba(255, 107, 26, 0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  flex-shrink: 0;
}
.zone-icon svg { width: 20px; height: 20px; }
.zone-info { flex: 1; }
.zone-info h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 2px;
}
.zone-info p {
  font-size: 13px;
  color: var(--muted);
}
.zone-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--orange);
  padding: 6px 12px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
}

.delivery-map { padding-top: 80px; }
.map-container {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
}
.map-container svg { width: 100%; height: auto; }
.map-pulse { transform-origin: center; }
.map-pulse-1 { animation: dotPulse 2s ease-in-out infinite; }
.map-pulse-2 { animation: dotPulse 2s ease-in-out infinite 0.5s; }
.map-pulse-3 { animation: dotPulse 2s ease-in-out infinite 1s; }
@keyframes dotPulse {
  0%, 100% { opacity: 1; r: 5; }
  50% { opacity: 0.5; r: 8; }
}
.line-anim {
  stroke-dasharray: 3 4;
  animation: dashFlow 8s linear infinite;
}
@keyframes dashFlow {
  to { stroke-dashoffset: -100; }
}

@media (max-width: 900px) {
  .delivery { padding: 0 20px 80px; }
  .delivery-inner { grid-template-columns: 1fr; gap: 40px; }
  .delivery-map { padding-top: 0; }
  .delivery-left .section-tag { margin-top: 0; }
}

/* ============ TESTIMONIALS ============ */
/* ============ TESTIMONIALS ============ */
.testi {
  position: relative;
  padding: 140px 40px;
}
.testi-head {
  max-width: 1400px;
  margin: 0 auto 60px;
}
.testi-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 24px;
}
.testi-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px 36px;
  transition: transform 0.6s var(--ease-out), border-color 0.6s, background 0.6s;
}
.testi-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-orange);
}
.featured-card {
  background: linear-gradient(150deg, rgba(255, 107, 26, 0.08), rgba(26, 13, 8, 0));
  border-color: var(--line-orange);
}
.testi-quote {
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 0.5;
  color: var(--orange);
  margin-bottom: 8px;
  font-weight: 600;
}
.testi-card p {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 32px;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 700;
  font-size: 14px;
}
.testi-author strong {
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.testi-author span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.5px;
}
.testi-rating {
  color: var(--orange);
  letter-spacing: 4px;
  font-size: 14px;
}

/* Trust badges strip below the cards */
.testi-trust {
  margin: 60px auto 0;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 40px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.testi-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
}
.testi-trust-icon {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
}
.testi-trust-icon svg { width: 22px; height: 22px; }
.testi-trust-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testi-trust-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1;
}
.testi-trust-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.testi-trust-divider {
  width: 1px;
  height: 36px;
  background: var(--line);
}

@media (max-width: 1000px) {
  .testi { padding: 80px 20px; }
  .testi-grid { grid-template-columns: 1fr; }
  .testi-trust {
    border-radius: 24px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .testi-trust-divider { display: none; }
}

/* ============ CTA BAND ============ */
.cta-band {
  position: relative;
  padding: 140px 40px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--orange-deep), var(--orange));
  text-align: center;
}
.cta-band::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 baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.4;
}
.cta-band-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--bg);
  margin-bottom: 50px;
}
.cta-title em {
  font-style: italic;
  color: var(--cream);
}
.cta-title .line { display: block; }
.cta-band .btn-primary {
  background: var(--bg);
  color: var(--orange);
}
.cta-band .btn-primary::before { background: #2a0a05; }
.cta-band .btn-primary:hover { color: var(--orange-light); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); }
.cta-fine {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--bg);
  opacity: 0.7;
  text-transform: uppercase;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--bg);
  padding: 100px 40px 40px;
  position: relative;
  overflow: hidden;
}
.footer-top {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 60px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .logo { margin-bottom: 24px; }
.footer-brand .logo.big svg { width: 40px; height: 40px; }
.footer-brand .logo.big .logo-text { font-size: 22px; }
.footer-brand p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 320px;
  margin-bottom: 28px;
}
.footer-social {
  display: flex;
  gap: 12px;
}
.footer-social a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.4s, color 0.4s, background 0.4s;
}
.footer-social a:hover {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--bg);
}
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.footer-col a, .footer-col address, .footer-col p {
  display: block;
  font-size: 14px;
  line-height: 1.9;
  color: var(--cream);
  font-style: normal;
  transition: color 0.3s;
}
.footer-col a:hover { color: var(--orange); }
.footer-col strong {
  display: block;
  color: var(--orange);
  margin-bottom: 4px;
}
.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  margin-top: 18px;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.phone-link {
  margin-top: 16px;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: var(--orange) !important;
  font-weight: 500;
}

.footer-mega {
  padding: 60px 0 20px;
  text-align: center;
  overflow: hidden;
}
.mega-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(120px, 22vw, 380px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--orange), transparent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { transition: color 0.3s; }
.footer-links a:hover { color: var(--orange); }
.footer-cert { display: flex; align-items: center; gap: 8px; }
.cert-dot {
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@media (max-width: 1000px) {
  .footer { padding: 60px 20px 30px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 50px; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============ section-tag light variant ============ */
.section-tag.light { color: var(--cream); }
.section-tag.light .tag-line { background: var(--cream); }

/* ============================================================
   QURBANI 2026 SECTION  (#06)
   ============================================================ */
.qurbani {
  position: relative;
  padding: 140px 40px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.qb-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
}
.qb-glow-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--orange-deep), transparent 70%);
  top: 5%; left: -150px;
  opacity: 0.3;
  animation: orbFloat 16s ease-in-out infinite;
}
.qb-glow-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--orange), transparent 70%);
  bottom: 0; right: -200px;
  opacity: 0.25;
  animation: orbFloat 20s ease-in-out infinite reverse;
}
.qb-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* Top banner ribbon */
.qb-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: max-content;
  margin: 0 auto 50px;
  padding: 10px 22px;
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.qb-banner-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--orange);
}
.qb-banner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 107, 26, 0.4);
  animation: pulse 2s ease infinite;
}

.qb-head {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.qb-head .section-lede { margin-left: auto; margin-right: auto; }
.qb-title em { font-style: italic; font-weight: 300; }

/* Countdown */
.qb-countdown {
  max-width: 720px;
  margin: 0 auto 80px;
  padding: 32px 40px;
  background:
    linear-gradient(135deg, rgba(255, 107, 26, 0.08), transparent 70%),
    var(--bg-2);
  border: 1px solid var(--line-orange);
  border-radius: 24px;
  position: relative;
  z-index: 1;
  text-align: center;
}
.qb-cd-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.qb-cd-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
}
.qb-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
}
.qb-cd-num {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.qb-cd-suffix {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}
.qb-cd-sep {
  font-family: var(--font-display);
  font-size: 50px;
  color: var(--orange);
  opacity: 0.3;
  font-weight: 300;
  margin-top: -6px;
}

/* Selection grid */
.qb-grid {
  max-width: 1400px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}
.qb-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), border-color 0.6s, box-shadow 0.6s;
  display: flex;
  flex-direction: column;
}
.qb-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-orange);
  box-shadow: 0 30px 60px -20px rgba(255, 107, 26, 0.25);
}
.qb-card.popular {
  border-color: var(--orange);
  background: linear-gradient(160deg, rgba(255, 107, 26, 0.06), var(--bg-2) 50%);
}
.qb-card.popular:hover {
  box-shadow: 0 30px 80px -15px rgba(255, 107, 26, 0.4);
}
.qb-flag {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  padding: 6px 14px;
  background: var(--orange);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
}
.qb-card-top {
  position: relative;
  padding: 40px 28px 24px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 107, 26, 0.12), transparent 70%);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.qb-illustration {
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease-out);
}
.qb-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.qb-card:hover .qb-illustration {
  transform: scale(1.1) rotate(-4deg);
}
.qb-share {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--orange);
  padding: 4px 12px;
  border: 1px solid var(--line-orange);
  border-radius: 999px;
  background: rgba(255, 107, 26, 0.06);
}
.qb-card-body {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.qb-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.qb-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.qb-feat {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex: 1;
}
.qb-feat li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--cream);
  line-height: 1.4;
}
.qb-feat li svg {
  width: 16px; height: 16px;
  color: var(--orange);
  flex-shrink: 0;
  margin-top: 2px;
}
.qb-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.qb-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qb-price-from {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.qb-price-val {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1;
}
.qb-card.popular .qb-price-val { color: var(--orange); }
.qb-reserve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bg);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s;
}
.qb-reserve svg {
  width: 14px; height: 14px;
  transition: transform 0.4s;
}
.qb-reserve:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--bg);
  transform: translateY(-2px);
}
.qb-reserve:hover svg { transform: translateX(3px); }
.qb-card.popular .qb-reserve {
  background: var(--orange);
  color: var(--bg);
  border-color: var(--orange);
}
.qb-card.popular .qb-reserve:hover {
  background: var(--orange-light);
  border-color: var(--orange-light);
}

/* Process strip */
.qb-process {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  padding: 40px 50px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  position: relative;
  z-index: 1;
}
.qb-process-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.qb-process-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.qb-process-step h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.qb-process-step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.qb-process-arrow {
  width: 28px;
  height: 28px;
  color: var(--orange);
  opacity: 0.5;
}
.qb-process-arrow svg { width: 100%; height: 100%; }

/* Responsive */
@media (max-width: 1200px) {
  .qb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .qurbani { padding: 80px 20px; }
  .qb-cd-num { font-size: 44px; }
  .qb-cd-unit { min-width: 64px; }
  .qb-cd-row { gap: 10px; }
  .qb-cd-sep { font-size: 34px; }
  .qb-countdown { padding: 24px 20px; }
  .qb-process {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 24px;
  }
  .qb-process-arrow { transform: rotate(90deg); margin: 0 auto; }
}
@media (max-width: 600px) {
  .qb-grid { grid-template-columns: 1fr; }
  .qb-banner { padding: 8px 14px; }
  .qb-banner-text { font-size: 10px; letter-spacing: 1px; }
}

/* ============================================================
   CONTACT SECTION  (#08)
   ============================================================ */
.contact {
  position: relative;
  padding: 140px 40px;
  background: linear-gradient(to bottom, var(--bg), var(--bg-2));
  overflow: hidden;
  isolation: isolate;
}
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 107, 26, 0.12), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(224, 69, 24, 0.10), transparent 40%);
  z-index: -1;
}

.contact-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: stretch;
}

.contact-info .section-title {
  margin-bottom: 28px;
}
.contact-info .section-lede {
  margin-bottom: 50px;
}

.contact-channels {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.channel {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color 0.4s, transform 0.4s, background 0.4s;
}
.channel:hover {
  border-color: var(--line-orange);
  background: var(--bg-3);
  transform: translateX(6px);
}
.channel-icon {
  width: 48px; height: 48px;
  background: rgba(255, 107, 26, 0.08);
  color: var(--orange);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s;
}
.channel:hover .channel-icon {
  background: rgba(255, 107, 26, 0.18);
}
.channel-icon svg { width: 22px; height: 22px; }
.channel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.channel-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.channel-val {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--cream);
  transition: color 0.3s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.channel:hover .channel-val { color: var(--orange); }
.channel-arrow {
  width: 24px; height: 24px;
  color: var(--muted);
  transition: transform 0.4s, color 0.4s;
}
.channel:hover .channel-arrow {
  color: var(--orange);
  transform: rotate(-45deg);
}
.channel-arrow svg { width: 100%; height: 100%; }

.contact-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  background: rgba(74, 222, 128, 0.05);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 14px;
  font-size: 13px;
  color: var(--cream);
}
.contact-hours strong { color: #4ade80; font-weight: 600; }
.hours-dot {
  width: 8px; height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
  animation: pulse 2s ease infinite;
  flex-shrink: 0;
}

/* FORM */
.contact-form-wrap {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 107, 26, 0.04), transparent 60%),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 44px;
  display: flex;
  flex-direction: column;
}
.form-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--orange);
  pointer-events: none;
}
.form-corner-tl {
  top: -1px; left: -1px;
  border-top: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  border-top-left-radius: 28px;
}
.form-corner-tr {
  top: -1px; right: -1px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  border-top-right-radius: 28px;
}
.form-corner-bl {
  bottom: -1px; left: -1px;
  border-bottom: 2px solid var(--orange);
  border-left: 2px solid var(--orange);
  border-bottom-left-radius: 28px;
}
.form-corner-br {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  border-bottom-right-radius: 28px;
}

.contact-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}
.form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.form-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
}
.form-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.2);
  animation: pulse 2s ease infinite;
}
.form-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

.form-row {
  margin-bottom: 26px;
}
.form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.form-field {
  position: relative;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 0 10px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color 0.4s;
  font-weight: 400;
}
.form-field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: var(--cream);
}
.form-field select option {
  background: var(--bg-2);
  color: var(--cream);
}
.form-field label {
  position: absolute;
  left: 0;
  top: 14px;
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
  transition: transform 0.35s var(--ease), font-size 0.35s var(--ease), color 0.35s, letter-spacing 0.35s;
  transform-origin: left top;
}
/* Default state: label is floated (small + up). It only drops back to placeholder
   position when the field is empty AND not focused. */
.form-field input:placeholder-shown:not(:focus) ~ label,
.form-field textarea:placeholder-shown:not(:focus) ~ label {
  transform: translateY(0) scale(1);
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
/* Floated label styling - applies to everything else (focus or has content) */
.form-field label {
  transform: translateY(-22px) scale(0.78);
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Select-specific: float when value is set OR focused; otherwise show placeholder */
.select-field .select-label {
  transform: translateY(0) scale(1);
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.select-field select:focus ~ .select-label,
.select-field select:valid ~ .select-label {
  transform: translateY(-22px) scale(0.78);
  color: var(--orange);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.field-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.form-field input:focus ~ .field-line,
.form-field textarea:focus ~ .field-line,
.form-field select:focus ~ .field-line {
  transform: scaleX(1);
}
.select-caret {
  position: absolute;
  right: 0;
  top: 14px;
  color: var(--muted);
  pointer-events: none;
  transition: transform 0.3s, color 0.3s;
}
.select-caret svg { width: 18px; height: 18px; }
.select-field select:focus ~ .select-caret {
  color: var(--orange);
  transform: rotate(180deg);
}

.form-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 12px;
  margin-top: auto;
}
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.form-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check-box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s;
  margin-top: 1px;
}
.check-box svg {
  width: 14px; height: 14px;
  color: var(--bg);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.form-check input:checked ~ .check-box {
  background: var(--orange);
  border-color: var(--orange);
}
.form-check input:checked ~ .check-box svg {
  opacity: 1;
  transform: scale(1);
}
.check-lbl {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  padding-top: 2px;
}
.form-check:hover .check-box {
  border-color: var(--orange);
}
.contact-form .btn-primary {
  justify-content: center;
  width: 100%;
}

/* Success state */
.form-sent {
  position: absolute;
  inset: 0;
  background: var(--bg-2);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.contact-form.sent .form-sent {
  opacity: 1;
  pointer-events: auto;
}
.sent-icon {
  width: 80px; height: 80px;
  background: var(--orange);
  color: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: sentPop 0.7s var(--ease-out);
}
@keyframes sentPop {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.sent-icon svg { width: 38px; height: 38px; }
.form-sent h4 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 10px;
}
.form-sent p {
  font-size: 15px;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .contact { padding: 80px 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
  .contact-form-wrap { padding: 30px 24px; }
  .form-row.two { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 600px) {
  .channel { grid-template-columns: 40px 1fr 20px; padding: 16px 18px; gap: 14px; }
  .channel-val { font-size: 16px; }
  .form-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}