:root {
  --bg0: #07090c;
  --bg1: #0b0f16;
  --card: #0f172a;
  --line: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.86);
  --muted: rgba(255,255,255,.62);
  --gold: #c8a86a;
  --gold2: #f0d39b;
  --accent: #4f46e5;
  --ok: #10b981;
  --bad: #ef4444;
  --shadow: 0 30px 80px rgba(0,0,0,.55);
}

* {
  -webkit-tap-highlight-color: transparent;
}

html { 
  scroll-behavior: smooth;
  font-size: 16px;
}

@media (max-width: 640px) {
  html {
    font-size: 14px;
  }
}

body {
  background: radial-gradient(1100px 600px at 70% -10%, rgba(200,168,106,.16), transparent 60%),
              radial-gradient(900px 540px at 10% 10%, rgba(79,70,229,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Luxury grain */
.grain:before {
  content: "";
  position: fixed;
  inset: -20%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="200" height="200" filter="url(%23n)" opacity="0.18"/></svg>');
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .35;
  transform: translate3d(0,0,0);
  animation: grain 14s steps(10) infinite;
  z-index: 0;
}

@keyframes grain {
  0% { transform: translate(0,0); }
  10% { transform: translate(-2%,-4%); }
  20% { transform: translate(-8%,2%); }
  30% { transform: translate(6%,-8%); }
  40% { transform: translate(-6%,10%); }
  50% { transform: translate(-10%,2%); }
  60% { transform: translate(8%,0%); }
  70% { transform: translate(10%,8%); }
  80% { transform: translate(2%,12%); }
  90% { transform: translate(-4%,8%); }
  100% { transform: translate(0,0); }
}

/* Animated gradient border */
.lux-border {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  overflow: hidden;
}

.lux-border:before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 180deg at 50% 50%, rgba(200,168,106,.0), rgba(200,168,106,.6), rgba(79,70,229,.55), rgba(200,168,106,.0));
  filter: blur(14px);
  opacity: .55;
  animation: spin 9s linear infinite;
  z-index: 0;
}

.lux-border > * { position: relative; z-index: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: all 900ms cubic-bezier(.2,.8,.2,1);
}

/* Magnetic button */
.mag { 
  will-change: transform;
  transition: transform 200ms ease-out;
}

/* Underline hover */
.u-line {
  background-image: linear-gradient(90deg, rgba(200,168,106,.9), rgba(240,211,155,.85));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s ease;
}

.u-line:hover { background-size: 100% 2px; }

/* Active nav link */
.u-line.active {
  background-size: 100% 2px;
  color: var(--gold);
}

/* Marquee */
.marquee {
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marq 26s linear infinite;
  white-space: nowrap;
}

@keyframes marq { to { transform: translateX(-50%); } }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* Mobile optimizations */
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  
  .mag:active {
    transform: scale(0.98) !important;
  }
  
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Specific mobile tweaks for layout spacing */
  main {
    padding-top: 5.5rem !important; /* pt-22 approx */
  }

  .lux-border:before {
    animation-duration: 15s; /* Slower spin on mobile for less distraction */
    filter: blur(8px);
    opacity: 0.4;
  }

  /* Make main CTA button stand out more on mobile */
  .mag.flex-col {
    width: 100%;
  }
}

/* Prevent zoom on input focus */
@media (max-width: 768px) {
  input:focus,
  textarea:focus,
  select:focus {
    font-size: 16px;
  }
}

/* Image optimization */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure readable text on mobile */
@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
  }
}

/* Touch-friendly elements */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}