/* ============================================
   CONFIDEL — Black & Gold
   Luxury Glassmorphism · Smooth Animations
============================================ */
@keyframes heartbeat-glow {
  0%, 28%, 70%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
  }
  14%, 42% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.9));
  }

}

.heartbeat-glow:hover {
  animation: heartbeat-glow 1.5s ease-in-out infinite;
  display: inline-block;
  color: #d4af37;
}
:root {
  --royal-deep: #0a0a0a;
  --royal: #161616;
  --royal-mid: #1f1f1f;
  --royal-soft: #2e2e2e;
  --gold: #d4af37;
  --gold-bright: #f1c75b;
  --gold-glow: rgba(212, 175, 55, 0.35);
  --ink: #f5f7ff;
  --ink-soft: rgba(245, 247, 255, 0.78);
  --ink-muted: rgba(245, 247, 255, 0.6);
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-border-gold: rgba(212, 175, 55, 0.35);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.3);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: radial-gradient(ellipse at top, #1f1f1f 0%, #0a0a0a 55%, #000000 100%);
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--gold-bright); text-decoration: none; transition: 0.25s var(--ease); }
a:hover { color: var(--gold); }

.gold-text {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.muted { color: var(--ink-muted); }

/* ============ INTRO LOGO REVEAL ============ */
body.intro-lock {
  overflow: hidden;
}

.intro-reveal {
  --frame-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M 0 28 L 0 4 L 32 4 L 32 24 L 8 24 L 8 12 L 24 12 L 24 20 L 16 20 L 16 16 M 0 28 L 40 28' stroke='%23f5c957' stroke-width='2.5' fill='none' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --frame-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M 28 0 L 4 0 L 4 32 L 24 32 L 24 8 L 12 8 L 12 24 L 20 24 L 20 16 L 16 16 M 28 0 L 28 40' stroke='%23f5c957' stroke-width='2.5' fill='none' stroke-linejoin='miter'/%3E%3C/svg%3E");
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 70%, #000000 100%);
  opacity: 1;
  visibility: visible;
  isolation: isolate;
  transition:
    opacity 1400ms cubic-bezier(.65, 0, .35, 1),
    visibility 0ms linear 1400ms;
}

.intro-reveal.is-revealing {
  pointer-events: none;
}

.intro-reveal.is-revealing.is-faded {
  opacity: 0;
}

.intro-reveal.is-hidden {
  display: none;
}

.greek-frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.frame-edge {
  position: absolute;
  overflow: hidden;
  filter: drop-shadow(0 0 5px rgba(245, 201, 87, 0.62));
}

.frame-top,
.frame-bottom {
  left: 46px;
  right: 46px;
  height: 30px;
  background-image: var(--frame-h);
  background-repeat: repeat-x;
  background-size: 40px 30px;
}

.frame-top {
  top: 12px;
  animation: frame-flow-top 2.6s linear infinite;
}

.frame-bottom {
  bottom: 12px;
  transform: scaleY(-1);
  animation: frame-flow-bottom 2.6s linear infinite;
}

.frame-left,
.frame-right {
  top: 46px;
  bottom: 46px;
  width: 30px;
  background-image: var(--frame-v);
  background-repeat: repeat-y;
  background-size: 30px 40px;
}

.frame-left {
  left: 12px;
  animation: frame-flow-left 2.6s linear infinite;
}

.frame-right {
  right: 12px;
  transform: scaleX(-1);
  animation: frame-flow-right 2.6s linear infinite;
}

@keyframes frame-flow-top {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

@keyframes frame-flow-bottom {
  from { background-position: 0 0; }
  to { background-position: -40px 0; }
}

@keyframes frame-flow-left {
  from { background-position: 0 0; }
  to { background-position: 0 -40px; }
}

@keyframes frame-flow-right {
  from { background-position: 0 0; }
  to { background-position: 0 40px; }
}

.frame-corner {
  position: absolute;
  z-index: 6;
  width: 30px;
  height: 30px;
  color: #f5c957;
}

.corner-tl { top: 12px; left: 12px; }
.corner-tr { top: 12px; right: 12px; transform: scaleX(-1); }
.corner-bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.corner-br { bottom: 12px; right: 12px; transform: scale(-1, -1); }

.frame-corner svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(245, 201, 87, 0.62));
}

.frame-corner path {
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linejoin: miter;
}

.intro-fireflies {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro-firefly {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 230, 150, 1) 0%,
    rgba(245, 201, 87, 0.82) 25%,
    rgba(245, 201, 87, 0.3) 52%,
    transparent 76%);
  box-shadow: 0 0 8px rgba(245, 201, 87, 0.58), 0 0 16px rgba(245, 201, 87, 0.28);
  animation: intro-rise linear infinite;
  will-change: transform, opacity;
}

@keyframes intro-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); }
  10% { opacity: 1; transform: translate3d(8px, -10vh, 0) scale(1); }
  50% { opacity: 1; transform: translate3d(-12px, -50vh, 0) scale(1); }
  85% { opacity: .6; transform: translate3d(15px, -85vh, 0) scale(.8); }
  100% { opacity: 0; transform: translate3d(0, -105vh, 0) scale(.2); }
}

.intro-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 720px;
  padding: 20px;
  text-align: center;
  will-change: transform, opacity;
}

.intro-reveal.is-revealing .intro-content {
  animation: intro-content-dissolve 1150ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes intro-content-dissolve {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.025); filter: blur(10px); }
}

.intro-logo-wrap {
  position: relative;
  width: min(420px, 68vw);     /* centered above the tap prompt — large enough that 'Confidence & Fidelity' reads, small enough to fit cleanly inside the Greek frame */
  height: min(420px, 68vw);
  margin: 0 auto;
  border-radius: 50%;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.intro-logo-wrap.floating {
  animation: intro-logo-hover 4.8s ease-in-out infinite;
}

.intro-logo-wrap::before,
.intro-logo-wrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.intro-logo-wrap::before {
  inset: -8%;                  /* tightened so orbiting halo doesn't extend past the Greek frame */
  z-index: 0;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(245, 201, 87, .22) 52deg,
      rgba(255, 215, 125, .26) 112deg,
      transparent 168deg,
      rgba(255, 232, 155, .2) 230deg,
      rgba(212, 175, 55, .30) 302deg,
      transparent 360deg);
  filter: blur(5px);
  opacity: .72;
  animation: intro-orbit-aura 10s linear infinite;
  will-change: transform;
}

.intro-logo-wrap::after {
  inset: -6%;
  z-index: 1;
  border: 1px solid rgba(245, 201, 87, .28);
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 236, 166, .22), transparent 18%),
    radial-gradient(circle at 70% 76%, rgba(245, 201, 87, .20), transparent 24%);
  box-shadow:
    0 0 34px rgba(245, 201, 87, .26),
    inset 0 0 28px rgba(245, 201, 87, .08);
  opacity: .78;
  animation: intro-hover-halo 4.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.intro-logo-glow {
  position: absolute;
  inset: -18%;                /* tightened from -38% so the glow stays inside the Greek frame */
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 228, 139, .32) 0%,
      rgba(245, 201, 87, .18) 28%,
      rgba(212, 175, 55, .08) 55%,
      transparent 75%);
  animation: intro-breathe 5.2s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes intro-orbit-aura {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes intro-hover-halo {
  0%, 100% { opacity: .62; transform: translate3d(0, 3px, 0) scale(.98); }
  50% { opacity: .92; transform: translate3d(0, -5px, 0) scale(1.035); }
}

@keyframes intro-breathe {
  0%, 100% { opacity: .58; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: .86; transform: translate3d(0, 0, 0) scale(1.08); }
}

.intro-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* clip-path removed: the new logo is already its own circular badge with
     transparent background, so we don't want to clip the gold rim off */
  image-rendering: -webkit-optimize-contrast;   /* sharper scaling in WebKit */
  image-rendering: crisp-edges;                  /* fallback for other browsers */
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(.62) rotate(-15deg);
  /* SOFT GOLD HALO ONLY — the previous dark drop-shadow rendered as a
     visible rectangular 'box' around the PNG because chroma-key transparency
     leaves micro-rectangular alpha at the corners, which the dark shadow
     traced. Replaced with stacked symmetric golden glows (no offset, no
     dark layer) so any residual edge alpha just bleeds into warm light. */
  filter:
    drop-shadow(0 0 18px rgba(245, 201, 87, .42))
    drop-shadow(0 0 38px rgba(245, 215, 125, .22))
    drop-shadow(0 0 80px rgba(212, 175, 55, .14));
  animation: intro-logo-in 1.8s cubic-bezier(.34, 1.56, .64, 1) .4s forwards;
  will-change: transform, opacity;
}

.intro-logo-glare {
  position: absolute;
  inset: 5%;
  z-index: 3;
  border-radius: 50%;
  clip-path: circle(49.2% at 50% 50%);
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(115deg,
      transparent 18%,
      rgba(255, 255, 255, .08) 35%,
      rgba(255, 241, 179, .44) 48%,
      rgba(255, 255, 255, .12) 58%,
      transparent 75%),
    radial-gradient(circle at 32% 22%, rgba(255, 243, 191, .36), transparent 24%);
  mix-blend-mode: screen;
  transform: translate3d(-18%, -12%, 0) rotate(-8deg) scale(.88);
}

.intro-logo-wrap.floating .intro-logo {
  opacity: 1;
  animation: intro-logo-pulse 4.8s ease-in-out infinite;
}

.intro-logo-wrap.floating .intro-logo-glare {
  animation: intro-logo-glare-pulse 4.8s ease-in-out infinite;
}

@keyframes intro-logo-in {
  from { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(-15deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}

@keyframes intro-logo-hover {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -16px, 0); }
}

@keyframes intro-logo-pulse {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 0 20px rgba(245, 201, 87, .28)) drop-shadow(0 20px 40px rgba(0, 0, 0, .42));
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.018);
    filter: drop-shadow(0 0 36px rgba(245, 201, 87, .46)) drop-shadow(0 24px 48px rgba(0, 0, 0, .45));
  }
}

@keyframes intro-logo-glare-pulse {
  0%, 100% {
    opacity: 0;
    transform: translate3d(-20%, -12%, 0) rotate(-8deg) scale(.86);
  }
  42% {
    opacity: .18;
  }
  52% {
    opacity: .8;
    transform: translate3d(9%, 7%, 0) rotate(-8deg) scale(1.04);
  }
  64% {
    opacity: .16;
  }
}

.intro-brand {
  margin-top: 24px;
  padding: 0 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: clamp(3px, 1vw, 10px);
  color: #f5c957;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: intro-smooth-fade-up 1.4s cubic-bezier(.16, 1, .3, 1) 1.6s forwards;
  text-shadow: 0 2px 20px rgba(245, 201, 87, .38);
}

.intro-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;  /* extra space now that the redundant CONFIDEL wordmark is gone */
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  animation: intro-smooth-fade-up 1.2s cubic-bezier(.16, 1, .3, 1) 2.1s forwards;
}

.intro-tagline span {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ca9432, transparent);
}

.intro-tagline em {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(.85rem, 2vw, 1.05rem);
  letter-spacing: clamp(2px, .6vw, 4px);
  color: #faf6e9;
}

@keyframes intro-smooth-fade-up {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.tap-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 50px;
}

.tap-letter {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 700;
  letter-spacing: clamp(2px, .5vw, 5px);
  color: #f5c957;
  opacity: 0;
  transform: translate3d(0, -30px, 0);
  text-shadow: 0 0 10px rgba(245, 201, 87, .62);
  will-change: transform, opacity, text-shadow;
}

.tap-letter.bounced {
  animation:
    intro-letter-drop .7s cubic-bezier(.34, 1.56, .64, 1) forwards,
    intro-letter-glow 2.2s ease-in-out .8s infinite;
}

.tap-space {
  width: 12px;
}

@keyframes intro-letter-drop {
  0% { opacity: 0; transform: translate3d(0, -30px, 0); }
  60% { opacity: 1; transform: translate3d(0, 8px, 0); }
  80% { transform: translate3d(0, -3px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes intro-letter-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(245, 201, 87, .62); transform: translate3d(0, 0, 0); }
  50% { text-shadow: 0 0 25px rgba(245, 201, 87, 1), 0 0 40px rgba(245, 201, 87, .62); transform: translate3d(0, -3px, 0); }
}

.intro-hint {
  margin-top: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: .78rem;
  font-style: italic;
  letter-spacing: 2px;
  color: rgba(250, 246, 233, .42);
  opacity: 0;
  animation: intro-fade-in 1.2s ease 4.2s forwards;
}

@keyframes intro-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gold-mist {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
}

.gold-mist.primary {
  z-index: 10002;
  background: radial-gradient(circle at center,
    rgba(255, 235, 180, 1) 0%,
    rgba(245, 201, 87, .95) 20%,
    rgba(202, 148, 50, .8) 40%,
    rgba(139, 105, 20, .5) 60%,
    rgba(0, 0, 0, 0) 85%);
  mix-blend-mode: screen;
}

.gold-mist.secondary {
  z-index: 10001;
  background:
    radial-gradient(circle at 30% 40%, rgba(245, 201, 87, .6) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 230, 150, .5) 0%, transparent 50%);
}

.intro-reveal.is-revealing .gold-mist.primary {
  animation: intro-gold-mist 2s cubic-bezier(.4, 0, .2, 1) forwards;
}

.intro-reveal.is-revealing .gold-mist.secondary {
  animation: intro-gold-mist-secondary 2s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes intro-gold-mist {
  0% { opacity: 0; transform: scale(.2); }
  25% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
  75% { opacity: .85; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(2.4); }
}

@keyframes intro-gold-mist-secondary {
  0% { opacity: 0; transform: scale(.5) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.2) rotate(20deg); }
  100% { opacity: 0; transform: scale(2.5) rotate(60deg); }
}

@media (max-width: 820px) {
  .intro-reveal {
    min-height: 100svh;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }

  .frame-top,
  .frame-bottom {
    left: 38px;
    right: 38px;
  }

  .frame-left,
  .frame-right {
    top: 38px;
    bottom: 38px;
  }

  .intro-logo-wrap {
    width: min(270px, 58vw, 40svh);
    height: min(270px, 58vw, 40svh);
  }
}

@media (max-width: 640px) {
  .intro-content {
    max-width: 360px;
    padding: 16px;
  }

  .intro-logo-wrap {
    width: min(230px, 66vw, 35svh);
    height: min(230px, 66vw, 35svh);
  }

  .intro-brand {
    margin-top: 18px;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: 3px;
  }

  .intro-tagline {
    gap: 10px;
  }

  .intro-tagline span {
    width: 28px;
  }

  .tap-prompt {
    margin-top: 34px;
    gap: 2px;
  }

  .intro-hint {
    margin-top: 12px;
  }
}

@media (max-width: 380px) {
  .intro-logo-wrap {
    width: min(205px, 64vw, 32svh);
    height: min(205px, 64vw, 32svh);
  }

  .intro-brand {
    font-size: 1.72rem;
    letter-spacing: 2px;
  }

  .tap-letter {
    font-size: 0.94rem;
    letter-spacing: 2px;
  }
}

@media (max-height: 700px) and (max-width: 820px) {
  .intro-logo-wrap {
    width: min(210px, 58vw, 32svh);
    height: min(210px, 58vw, 32svh);
  }

  .intro-brand {
    margin-top: 14px;
  }

  .tap-prompt {
    margin-top: 24px;
  }
}

/* ============ ANIMATED BACKGROUND ============ */
.bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  animation: float 18s var(--ease) infinite;
}
/* Ambient orbs — subtle gold-warm glow on black, low opacity so they're felt not seen */
.orb-1 { width: 520px; height: 520px; background: var(--gold); top: -10%; left: -8%; opacity: 0.08; }
.orb-2 { width: 440px; height: 440px; background: var(--gold-bright); top: 40%; right: -10%; animation-delay: -6s; opacity: 0.10; }
.orb-3 { width: 600px; height: 600px; background: var(--gold); bottom: -15%; left: 25%; animation-delay: -12s; opacity: 0.06; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.06); }
  66%      { transform: translate(-40px, 50px) scale(0.95); }
}

/* ============ GLASS ============ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ============ NAV ============ */
.nav-wrap {
  position: sticky;
  top: 16px;
  z-index: 50;
  padding: 0 24px;
  margin-top: 16px;
}
.nav {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-radius: 999px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.brand-mark {
  position: relative;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--royal-deep);
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 0 24px var(--gold-glow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.brand-mark > * { position: relative; z-index: 1; }
.brand-mark::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -120%;
  width: 65%;
  height: 120%;
  background: linear-gradient(105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 75%);
  transform: skewX(-22deg);
  pointer-events: none;
  transition: left 0.75s var(--ease);
  z-index: 2;
}
.brand:hover .brand-mark {
  transform: scale(1.06);
  box-shadow: 0 0 32px var(--gold-glow), 0 0 10px rgba(241, 199, 91, 0.55);
}
.brand:hover .brand-mark::after { left: 130%; }

/* Real logo image — sits next to the CONFIDEL wordmark
   No drop-shadow (was creating a visible 'box' halo around the bounding box).
   border-radius: 50% clips any residual transparent-edge pixels to a perfect circle. */
.brand-mark-img {
  height: 44px;
  width: 44px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
  /* Resting state — invisible glow so the transition has a starting point.
     Because the PNG is chroma-keyed (transparent corners), filter:drop-shadow
     traces the actual gold rim, not a rectangular box. */
  filter: drop-shadow(0 0 0 rgba(245, 201, 87, 0));
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}
.brand:hover .brand-mark-img {
  transform: scale(1.08);
  /* Layered gold halo: tight inner glow + wider warm bloom */
  filter:
    drop-shadow(0 0 12px rgba(245, 201, 87, 0.55))
    drop-shadow(0 0 28px rgba(255, 215, 125, 0.30));
}
/* Footer logo a touch larger */
.footer .brand-mark-img { height: 54px; width: 54px; }
@media (max-width: 720px) {
  .brand-mark-img { height: 38px; width: 38px; }
  .footer .brand-mark-img { height: 46px; width: 46px; }
}

/* Click flash — sharper sweep + radial pulse */
.brand-mark.glare-flash::after { animation: brand-glare-sweep 0.55s var(--ease); }
.brand-mark.glare-flash         { animation: brand-glare-pulse 0.55s var(--ease); }
@keyframes brand-glare-sweep {
  0%   { left: -120%; }
  100% { left: 130%; }
}
@keyframes brand-glare-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 24px var(--gold-glow); }
  40%  { transform: scale(1.14); box-shadow: 0 0 38px rgba(241, 199, 91, 0.9), 0 0 14px #fff; }
  100% { transform: scale(1);    box-shadow: 0 0 24px var(--gold-glow); }
}
/* Premium wordmark — gold gradient, classical caps, engraved letter-spacing */
.brand-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 55%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  filter: drop-shadow(0 0 8px rgba(241, 199, 91, 0.18));
  line-height: 1;
  transition: filter 0.35s var(--ease), letter-spacing 0.35s var(--ease);
}
/* HOVER: brighter gold halo on the wordmark + a hair more letter-spacing
   so it feels lit up alongside the logo's glow. filter:drop-shadow works
   on background-clip:text because it applies to the rendered glyphs. */
.brand:hover .brand-text {
  letter-spacing: 0.24em;
  filter:
    drop-shadow(0 0 10px rgba(245, 201, 87, 0.55))
    drop-shadow(0 0 24px rgba(255, 215, 125, 0.32));
}
.brand-text em { color: var(--gold); font-style: italic; font-weight: 500; }
/* Footer wordmark slightly smaller (subordinate to footer hierarchy) */
.footer .brand-text { font-size: 1.25rem; letter-spacing: 0.20em; }
@media (max-width: 720px) {
  .brand-text { font-size: 1.15rem; letter-spacing: 0.18em; }
  .footer .brand-text { font-size: 1.05rem; }
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.3s var(--ease);
  font-family: inherit;
}
.btn-sm { padding: 10px 18px; font-size: 0.85rem; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--royal-deep);
  box-shadow: 0 8px 24px var(--gold-glow);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px var(--gold-glow);
  color: var(--royal-deep);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--glass-border);
}
.btn-ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ============ HERO ============ */
.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 24px 60px;
  text-align: center;
}
.hero-inner {
  max-width: 880px;
  margin: 0 auto;
  animation: fadeUp 1s var(--ease) both;
}
.hero h1 { margin-bottom: 24px; }
.lede {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  max-width: 640px;
  margin: 0 auto 36px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
/* TRUST ROW — premium glass badge, gold-bordered, stands out */
.trust-row {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 38px auto 0;
  padding: 18px 32px;
  border: 1px solid rgba(241, 199, 91, 0.45);
  border-radius: 999px;
  background: linear-gradient(135deg,
    rgba(241, 199, 91, 0.10),
    rgba(212, 175, 55, 0.04) 50%,
    rgba(241, 199, 91, 0.10));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(241, 199, 91, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.trust-row::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(245, 215, 125, 0.18) 50%, transparent 70%);
  animation: trust-shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes trust-shine {
  0%, 100% { transform: translateX(-100%); }
  50%      { transform: translateX(100%); }
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.trust-icon {
  font-size: 1.1rem;
  color: #f5d77d;
  filter: drop-shadow(0 0 6px rgba(245, 215, 125, 0.55));
}
.trust-item strong {
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.02em;
}
.trust-item .trust-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.trust-divider {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, transparent, rgba(245, 215, 125, 0.55), transparent);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .trust-row { gap: 14px; padding: 14px 18px; border-radius: 22px; }
  .trust-item strong { font-size: 1.15rem; }
  .trust-item .trust-label { font-size: 0.62rem; letter-spacing: 0.15em; }
  .trust-divider { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-row::before { animation: none; }
}

/* ============ SECTIONS ============ */
.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 24px;
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-sub { margin-top: 12px; color: var(--ink-soft); }

/* ============ SERVICES ============ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.card {
  padding: 36px 30px;
  transition: 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, var(--gold-glow));
  opacity: 0;
  transition: 0.4s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--gold-bright);
  /* Layered gold halo: drop shadow + crisp gold edge + tight inner glow
     + wider warm bloom. The two outer layers are what make the card
     read as 'lit from within' on hover. */
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--gold-bright),
    0 0 28px rgba(245, 215, 125, 0.45),
    0 0 64px rgba(245, 215, 125, 0.22);
}
.card:hover::before { opacity: 0.20; }
/* Brighten the title + icon ring on hover so the gold story carries
   through the whole card, not just the perimeter. */
.card:hover h3 {
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(245, 215, 125, 0.35);
}
.card:hover .card-icon {
  background: rgba(245, 215, 125, 0.18);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  box-shadow: 0 0 22px rgba(245, 215, 125, 0.45);
}
.card h3,
.card .card-icon {
  transition: color 0.35s var(--ease), text-shadow 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
.card > * { position: relative; z-index: 1; }
.card-icon {
  display: inline-grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-bright);
  font-size: 1.3rem;
  margin-bottom: 18px;
  border: 1px solid var(--glass-border-gold);
}
.card.featured { border-color: var(--glass-border-gold); }
.card-list {
  list-style: none;
  margin: 16px 0 22px;
  padding: 0;
}
.card-list li {
  padding: 7px 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--glass-border);
}
.card-list li:last-child { border-bottom: 0; }
.card-list li::before { content: '✦ '; color: var(--gold); margin-right: 6px; }
.card-cta {
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-transform: uppercase;
}

/* ============ WHY ============ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .why-grid { grid-template-columns: 1fr; } }

.why-item {
  padding: 28px 26px;
  transition: 0.3s var(--ease);
  position: relative;
}
.why-item:hover { transform: translateY(-3px); border-color: var(--glass-border-gold); }
.why-item .why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(241, 199, 91, 0.18), rgba(212, 175, 55, 0.08));
  border: 1px solid rgba(241, 199, 91, 0.35);
  font-size: 1.3rem;
  filter: drop-shadow(0 4px 10px rgba(241, 199, 91, 0.25));
}
.why-item h4 {
  font-size: 1.15rem;
  color: var(--gold-bright);
  margin-bottom: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: 1.25;
}
.why-item p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* ============ QUOTE FORM ============ */
.quote-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 44px 40px;
}

/* Progress */
.progress { margin-bottom: 36px; }
.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 22px;
}
.progress-fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold));
  border-radius: 999px;
  transition: width 0.5s var(--ease);
  box-shadow: 0 0 14px var(--gold-glow);
}
.progress-steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0; margin: 0;
}
.progress-steps li {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  padding-top: 18px;
  flex: 1;
  text-align: center;
  transition: 0.3s var(--ease);
}
.progress-steps li::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: 0.3s var(--ease);
}
.progress-steps li.active { color: var(--gold-bright); }
.progress-steps li.active::before {
  background: var(--gold);
  box-shadow: 0 0 14px var(--gold-glow);
}
.progress-steps li.done { color: var(--ink-soft); }
.progress-steps li.done::before { background: var(--gold); }

/* Steps */
.step { display: none; animation: fadeUp 0.5s var(--ease); }
.step.active { display: block; }
.step h3 { margin-bottom: 6px; }
.step > p.muted { margin-bottom: 24px; }

.branch { display: none; }
.branch.active { display: block; animation: fadeUp 0.4s var(--ease); }

/* Fields */
.field { display: flex; flex-direction: column; margin-bottom: 18px; }
.field > span {
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: 0.25s var(--ease);
  backdrop-filter: blur(8px);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(245, 247, 255, 0.35); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.field select option { background: var(--royal-deep); color: var(--ink); }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

/* Service choices */
.service-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.choice {
  cursor: pointer;
  padding: 28px 22px;
  text-align: center;
  position: relative;
  transition: 0.3s var(--ease);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-icon {
  font-size: 1.4rem;
  color: var(--gold-bright);
  margin-bottom: 4px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--glass-border-gold);
}
.choice-title { font-weight: 600; font-size: 1rem; }
.choice-sub { font-size: 0.78rem; color: var(--ink-muted); letter-spacing: 1px; text-transform: uppercase; }
.choice:hover { transform: translateY(-3px); border-color: var(--glass-border-gold); }
.choice:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
  box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--gold-glow);
}

/* Checkbox */
.checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.9rem; color: var(--ink-soft);
  margin-top: 8px;
  cursor: pointer;
}
.checkbox input { margin-top: 4px; accent-color: var(--gold); }

/* Controls */
.form-controls {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--glass-border);
}

/* Errors */
.error-text {
  color: #ffb4b4;
  font-size: 0.85rem;
  margin-top: 8px;
  min-height: 1.2em;
}

/* Success */
.success-step { text-align: center; padding: 30px 0; }
.success-mark {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--royal-deep);
  font-size: 2rem; font-weight: 800;
  box-shadow: 0 0 40px var(--gold-glow);
  animation: pop 0.6s var(--ease);
}

/* ============ FOOTER ============ */
.footer {
  max-width: 1180px;
  margin: 60px auto 30px;
  border-radius: var(--radius-lg);
  padding: 40px 30px 20px;
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 22px;
}
.footer h5 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--gold-bright);
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.footer p { font-size: 0.9rem; margin: 0 0 6px; }
.footer-bottom {
  border-top: 1px solid var(--glass-border);
  padding-top: 16px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

/* ============ ANIMATIONS ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .quote-shell { padding: 30px 22px; }
  .progress-steps li { font-size: 0.65rem; letter-spacing: 1px; }
}
@media (max-width: 480px) {
  .hero { padding-top: 60px; }
  .trust-row { gap: 22px; }
  .form-controls { flex-direction: column-reverse; }
  .form-controls .btn { width: 100%; }
}

/* ============================================
   LIVE PRICE ESTIMATOR
============================================ */
.estimate-card {
  margin: 22px 0 28px;
  padding: 20px 24px;
  background: linear-gradient(135deg,
    rgba(241, 199, 91, 0.08),
    rgba(212, 175, 55, 0.04) 60%,
    rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2),
              inset 0 0 0 1px rgba(241, 199, 91, 0.06);
}
.estimate-card[hidden] { display: none; }

.estimate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.estimate-head .eyebrow {
  margin: 0;
  font-size: 0.7rem;
  color: var(--gold);
}
.estimate-toggle {
  background: transparent;
  border: none;
  color: var(--gold-bright);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-decoration-color: rgba(241, 199, 91, 0.4);
  text-underline-offset: 3px;
  transition: 0.2s var(--ease);
}
.estimate-toggle:hover {
  color: var(--gold);
  background: rgba(241, 199, 91, 0.06);
}

.estimate-range {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 4px 0 6px;
}
.estimate-range.is-incomplete {
  background: none;
  -webkit-text-fill-color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 1rem;
  font-style: italic;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

.estimate-note {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}
.estimate-note em { color: var(--ink-soft); font-style: italic; }

.estimate-breakdown {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  font-size: 0.82rem;
}
.estimate-breakdown[hidden] { display: none; }
.estimate-breakdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.estimate-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-soft);
}
.estimate-breakdown li.total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(212, 175, 55, 0.25);
  color: var(--gold-bright);
  font-weight: 600;
}

.success-disclaimer {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 540px;
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}
.success-disclaimer em { color: var(--ink-soft); font-style: italic; }

/* ============================================
   FIELD GROUPS, CHIPS, ECO TOGGLE
============================================ */
.field-group {
  border: none;
  padding: 0;
  margin: 22px 0 6px;
}
.field-group legend {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 0;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.muted-inline {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-left: 8px;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--ink-soft);
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
  transition: 0.22s var(--ease);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:hover {
  border-color: var(--glass-border-gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.chip:has(input:checked) {
  background: linear-gradient(135deg, rgba(241, 199, 91, 0.18), rgba(212, 175, 55, 0.10));
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold-glow), 0 6px 18px rgba(212, 175, 55, 0.18);
}

.toggle-eco {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(241, 199, 91, 0.05);
  border: 1px solid var(--glass-border-gold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 0.22s var(--ease);
}
.toggle-eco:hover {
  background: rgba(241, 199, 91, 0.08);
  border-color: var(--gold);
}
.toggle-eco strong { color: var(--gold-bright); font-weight: 600; }

/* ============================================
   BEEFIER FOOTER
============================================ */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 24px;
}
.footer-col { min-width: 0; }
.footer-brand .brand { margin-bottom: 6px; }
.footer-brand p { font-size: 0.92rem; }

.footer-emoji {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.95em;
  filter: drop-shadow(0 2px 4px rgba(241, 199, 91, 0.35));
  vertical-align: -1px;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.footer .small { font-size: 0.78rem; }

.footer-socials {
  display: flex;
  gap: 10px;
  margin: 14px 0 16px;
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border-gold);
  color: var(--gold-bright);
  transition: 0.22s var(--ease);
}
.footer-socials a:hover {
  background: rgba(241, 199, 91, 0.12);
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.25);
}
.footer-socials svg { width: 18px; height: 18px; }

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.footer-badge {
  font-size: 0.66rem;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--glass-border-gold);
  color: var(--gold-bright);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.footer-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.footer-stars {
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 0 12px var(--gold-glow);
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.newsletter {
  display: flex;
  gap: 8px;
  margin: 12px 0 6px;
}
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  transition: 0.22s var(--ease);
}
.newsletter input::placeholder { color: rgba(245, 247, 255, 0.35); }
.newsletter input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.newsletter-msg {
  font-size: 0.82rem;
  color: var(--gold-bright);
  min-height: 18px;
  margin-bottom: 6px;
}

.footer-mini-links {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 8px 0 0;
  font-size: 0.78rem;
}
.footer-mini-links a {
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: 0.22s var(--ease);
}
.footer-mini-links a:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

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

/* ============================================
   UPGRADED THANK-YOU SCREEN
============================================ */
.success-burst {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
}
.success-burst::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 199, 91, 0.45) 0%, transparent 70%);
  animation: success-pulse 2.4s var(--ease) infinite;
}
.success-burst .success-mark {
  position: relative;
  margin: 0;
}
@keyframes success-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.18); opacity: 1; }
}

.success-lede { max-width: 560px; margin: 0 auto 28px; }

.success-eta {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin: 32px auto;
  max-width: 720px;
}
.eta-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-align: center;
  padding: 0 8px;
}
.eta-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--royal-deep);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: 0 6px 18px var(--gold-glow);
}
.eta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.eta-text strong { color: var(--ink); font-weight: 600; }
.eta-text .muted { font-size: 0.78rem; }
.eta-divider {
  flex: 0 0 40px;
  height: 1px;
  align-self: center;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--gold-glow), rgba(212, 175, 55, 0.05));
}

.success-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 30px auto;
  max-width: 720px;
}
.success-card {
  padding: 26px 22px;
  text-align: center;
  transition: 0.25s var(--ease);
}
.success-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.success-card-icon {
  font-size: 1.8rem;
  margin-bottom: 6px;
  color: var(--gold-bright);
}
.success-card h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: var(--gold-bright);
  margin: 0 0 8px;
}
.success-card p {
  font-size: 0.88rem;
  margin: 0 0 14px;
  color: var(--ink-soft);
}

.success-social {
  text-align: center;
  margin-top: 22px;
}
.success-social .small { margin: 0 0 6px; }
.success-social .footer-socials {
  justify-content: center;
  margin: 6px 0 0;
}

@media (max-width: 600px) {
  .success-cards { grid-template-columns: 1fr; }
  .success-eta { flex-direction: column; align-items: center; gap: 18px; }
  .eta-divider { display: none; }
}

/* ============================================
   SQUEEGEE WIPE TRANSITION
   Tilted gold blade drags a royal-blue panel
   across the screen, then pulls it back.
============================================ */
.squeegee-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.squeegee-overlay.is-active { visibility: visible; }

.squeegee-panel {
  position: absolute;
  top: -10vh;
  left: 0;
  width: 120vw;
  height: 120vh;
  transform: translate3d(-120vw, 0, 0) skewX(-12deg);
  transform-origin: top left;
  background:
    linear-gradient(100deg,
      rgba(241, 199, 91, 0)    0%,
      rgba(241, 199, 91, 0)   55%,
      rgba(241, 199, 91, .14) 72%,
      rgba(241, 199, 91, .32) 82%,
      rgba(241, 199, 91, .10) 92%,
      rgba(241, 199, 91, 0)  100%),
    linear-gradient(135deg,
      #0a0a0a  0%,
      #1a1a1a 42%,
      #1f1f1f 72%,
      #161616 100%);
  box-shadow:
    inset 0 0 140px rgba(10, 20, 72, .65),
    inset 0 0 40px  rgba(241, 199, 91, .08);
  will-change: transform;
}

.squeegee-blade {
  position: absolute;
  top: -10vh;
  left: 0;
  width: 6px;
  height: 120vh;
  transform: translate3d(-4vw, 0, 0) skewX(-12deg);
  background: linear-gradient(180deg,
    rgba(241, 199, 91, 0)    0%,
    rgba(241, 199, 91, .55)  6%,
    #f1c75b  18%,
    #d4af37  50%,
    #f1c75b  82%,
    rgba(241, 199, 91, .55) 94%,
    rgba(241, 199, 91, 0)  100%);
  box-shadow:
    0 0 14px rgba(241, 199, 91, .95),
    0 0 38px rgba(212, 175, 55, .60),
    0 0 90px rgba(212, 175, 55, .30);
  will-change: transform;
}

.squeegee-overlay.is-animating .squeegee-panel,
.squeegee-overlay.is-animating .squeegee-blade {
  transition: transform 640ms cubic-bezier(.65, .04, .35, 1);
}

/* COVER: blade sweeps left → right, panel fills behind */
.squeegee-overlay.is-cover .squeegee-panel {
  transform: translate3d(0, 0, 0) skewX(-12deg);
}
.squeegee-overlay.is-cover .squeegee-blade {
  transform: translate3d(110vw, 0, 0) skewX(-12deg);
}

/* REVEAL: blade pulls back right → left, panel retreats */
.squeegee-overlay.is-reveal .squeegee-panel {
  transform: translate3d(-120vw, 0, 0) skewX(-12deg);
}
.squeegee-overlay.is-reveal .squeegee-blade {
  transform: translate3d(-4vw, 0, 0) skewX(-12deg);
}

@media (prefers-reduced-motion: reduce) {
  .intro-reveal {
    display: none !important;
  }

  body.intro-lock {
    overflow: auto;
  }

  .squeegee-overlay { display: none !important; }
}

/* ============================================
   LANGUAGE PICKER (globe → dropdown)
   Fixed top-right. Always above intro reveal overlay.
============================================ */
.lang-picker {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 10001;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  border-radius: 999px;
  background: rgba(28, 28, 28, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(212, 183, 111, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.lang-trigger:hover { border-color: rgba(245, 215, 125, 0.75); }
.lang-trigger[aria-expanded="true"] {
  border-color: rgba(245, 215, 125, 0.85);
  transform: translateY(-1px);
}

.lang-globe { width: 18px; height: 18px; color: #f5d77d; flex-shrink: 0; }
.lang-current { line-height: 1; }
.lang-caret {
  width: 11px; height: 11px;
  opacity: 0.7;
  transition: transform 0.25s ease;
}
.lang-trigger[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: 16px;
  background: rgba(22, 22, 22, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(212, 183, 111, 0.45);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
  z-index: 10002;
  animation: lang-menu-in 0.18s ease-out;
}
@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-menu li {
  margin: 0;
  padding: 0;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-option:hover {
  background: rgba(245, 215, 125, 0.10);
  color: #fff;
}
.lang-option .flag {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.lang-option .native {
  flex-grow: 1;
}
.lang-option .code {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.40);
}
.lang-option.is-active {
  background: linear-gradient(135deg, rgba(245, 215, 125, 0.18), rgba(212, 183, 111, 0.08));
  color: #f5d77d;
}
.lang-option.is-active .code { color: #f5d77d; }

@media (max-width: 520px) {
  .lang-picker { top: 0.65rem; right: 0.65rem; }
  .lang-trigger { padding: 0.3rem 0.6rem 0.3rem 0.5rem; font-size: 0.7rem; }
  .lang-globe { width: 16px; height: 16px; }
  .lang-menu { min-width: 200px; }
}

/* ============================================
   RTL SUPPORT (Arabic)
   Applied via [dir="rtl"] on <html>.
============================================ */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .lang-picker { right: auto; left: 1.25rem; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-option { text-align: right; }
html[dir="rtl"] .tier-list li { padding: 0.5rem 1.5rem 0.5rem 0; }
html[dir="rtl"] .tier-list li::before { left: auto; right: 0; }
html[dir="rtl"] .ribbon { right: auto; left: 1rem; }
@media (max-width: 520px) {
  html[dir="rtl"] .lang-picker { left: 0.65rem; }
}

/* ============================================
   TIER PICKER (post-submit success step)
   Basic + Essentials = blue glass
   Master Clean = gold + traveling spark
============================================ */
.tier-picker {
  margin: 2.5rem auto 1rem;
  width: 100%;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}
@media (max-width: 920px) {
  .tier-grid { grid-template-columns: 1fr; }
}

.tier-card {
  position: relative;
  border-radius: 22px;
  padding: 2rem 1.6rem 1.8rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid rgba(120, 165, 255, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.55);
}

.tier-name {
  font-family: 'Cormorant Garamond', 'Inter', serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
  color: #fff;
}
.tier-tagline {
  color: rgba(232,239,255,0.62);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.tier-price {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  color: #fff;
}
.tier-price-note {
  font-size: 0.78rem;
  color: rgba(232,239,255,0.6);
  margin-bottom: 1.5rem;
}
.tier-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex-grow: 1;
}
.tier-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.9rem;
  color: rgba(232,239,255,0.86);
  line-height: 1.45;
}
.tier-list li:last-child { border-bottom: 0; }
.tier-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.55rem;
  color: rgba(120,165,255,0.85);
  font-weight: 700;
}

.tier-cta {
  display: inline-block;
  text-align: center;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(120,165,255,0.35);
  color: #fff;
  background: rgba(120,165,255,0.08);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s ease, transform 0.2s ease;
}
.tier-cta:hover {
  background: rgba(120,165,255,0.18);
  transform: translateY(-1px);
}

/* ====== MASTER CLEAN — GOLD ====== */
.tier-card.master {
  background: linear-gradient(160deg, rgba(212,183,111,0.18) 0%, rgba(245,215,125,0.10) 60%, rgba(120,90,30,0.20) 100%);
  border: 1px solid rgba(245,215,125,0.55);
  box-shadow:
    0 0 0 1px rgba(212,183,111,0.20),
    0 30px 70px rgba(80,60,10,0.35),
    0 0 60px rgba(212,183,111,0.15);
  transform: translateY(-12px);
  overflow: hidden;
}
.tier-card.master:hover { transform: translateY(-16px); }

.tier-card.master .tier-tagline { color: #f5d77d; }
.tier-card.master .tier-name {
  background: linear-gradient(135deg, #f5d77d, #efd591);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tier-card.master .tier-price { color: #ffe9a4; }

.tier-card.master .tier-list li::before {
  color: #f5d77d;
  content: '✦';
}
.tier-card.master .tier-list li {
  border-bottom-color: rgba(245,215,125,0.10);
}

.tier-card.master .tier-cta {
  background: linear-gradient(135deg, #f5d77d, #d4b76f);
  color: #07101f;
  border: 1px solid #f5d77d;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(212,183,111,0.35);
}
.tier-card.master .tier-cta:hover {
  background: linear-gradient(135deg, #ffe28a, #f5d77d);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212,183,111,0.50);
}

.tier-card.master .ribbon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, #f5d77d, #d4b76f);
  color: #07101f;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 4;
  box-shadow: 0 4px 12px rgba(212,183,111,0.4);
}

/* ===== TRAVELING GOLD SPARK ===== */
.spark-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.spark {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe5 0%, #ffd966 38%, rgba(255,200,80,0.4) 65%, transparent 80%);
  filter:
    drop-shadow(0 0 6px #ffd966)
    drop-shadow(0 0 14px rgba(255,200,80,0.85))
    drop-shadow(0 0 24px rgba(255,180,40,0.55));
  offset-path: inset(0 round 22px);
  offset-distance: 0%;
  animation: spark-travel 4.5s linear infinite;
}
.spark.spark-2 { width: 8px; height: 8px; opacity: 0.7;  animation-delay: -0.22s; }
.spark.spark-3 { width: 5px; height: 5px; opacity: 0.45; animation-delay: -0.42s; }
@keyframes spark-travel { to { offset-distance: 100%; } }

/* Soft pulsing inner glow */
.tier-card.master::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(255,210,90,0.15);
  pointer-events: none;
  animation: master-pulse 3.5s ease-in-out infinite;
}
@keyframes master-pulse {
  0%, 100% { box-shadow: inset 0 0 40px rgba(255,210,90,0.10); }
  50%      { box-shadow: inset 0 0 70px rgba(255,210,90,0.28); }
}

/* Selected state (after click) */
.tier-card.is-selected {
  outline: 2px solid #f5d77d;
  outline-offset: 4px;
}

.tier-footnote {
  text-align: center;
  color: rgba(232,239,255,0.6);
  font-size: 0.8rem;
  margin-top: 1.25rem;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; opacity: 0.55; }
  .tier-card.master::after { animation: none; }
  .tier-card { transition: none; }
}