/* ================================================================
   ADMEXA glass.css — Liquid Glass Morphism Design System
================================================================ */

/* ── Glass variables ── */
:root {
  --glass-white:    rgba(255,255,255,0.08);
  --glass-white-2:  rgba(255,255,255,0.12);
  --glass-white-3:  rgba(255,255,255,0.18);
  --glass-border:   rgba(255,255,255,0.15);
  --glass-border-2: rgba(255,255,255,0.25);
  --glass-blur:     blur(20px) saturate(1.8);
  --glass-blur-lg:  blur(40px) saturate(2);
  --red:    #c0392b;
  --orange: #e05a2a;
  --glow:   rgba(192,57,43,0.35);
}

/* ── NAV — frosted glass ── */
nav {
  background: rgba(4,6,15,0.6) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.3) !important;
}

/* ── HERO STAT CARDS — deep liquid glass ── */
.hero-stat-card {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.07) 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg) !important;
  backdrop-filter: var(--glass-blur-lg) !important;
  -webkit-backdrop-filter: var(--glass-blur-lg) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 24px !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
  pointer-events: none;
}
.hero-stat-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(192,57,43,0.3),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.hero-stat-card.accent {
  background: linear-gradient(135deg,
    rgba(192,57,43,0.2) 0%,
    rgba(192,57,43,0.08) 50%,
    rgba(224,90,42,0.12) 100%) !important;
  border-color: rgba(192,57,43,0.35) !important;
  box-shadow:
    0 8px 32px rgba(192,57,43,0.15),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 0 60px rgba(192,57,43,0.08) !important;
}

/* ── WEB DO / SRV / WHY CARDS — liquid glass ── */
.wwd-card, .srv-card, .why-card, .gp-card, .chaos-card {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.03) 60%,
    rgba(255,255,255,0.06) 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s !important;
  position: relative !important;
  overflow: hidden !important;
}
.wwd-card::before, .srv-card::before, .why-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
}
.wwd-card:hover, .srv-card:hover, .why-card:hover, .gp-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(192,57,43,0.4) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(192,57,43,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ── GLASS TILES (services page) ── */
.glass-tile {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.02) 50%,
    rgba(255,255,255,0.05) 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 22px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s !important;
  overflow: hidden !important;
  position: relative !important;
}
.glass-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
  pointer-events: none; border-radius: 22px 22px 0 0;
}
.glass-tile:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.5),
    0 0 0 1px rgba(192,57,43,0.3),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ── DIVISION / GEO / COMP CARDS ── */
.division-card, .geo-card, .comp-card, .principle-card {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.03) 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  transition: transform .3s, box-shadow .3s !important;
}
.division-card:hover, .geo-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(192,57,43,0.3) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* ── CTA ROW ── */
.srv-cta-row {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ── GAIN STEPS ── */
.gain-step {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: transform .3s, border-color .3s !important;
}
.gain-step:hover {
  transform: translateX(6px) !important;
  border-color: rgba(192,57,43,0.3) !important;
}

/* ── BUTTONS — glass + glow ── */
.btn-primary, .cta-btn {
  background: linear-gradient(135deg, #d44030 0%, #c0392b 50%, #a83020 100%) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 20px rgba(192,57,43,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.btn-primary:hover, .cta-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 12px 40px rgba(192,57,43,0.6),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.btn-outline {
  background: rgba(255,255,255,0.06) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-2) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* ── CONTACT FORM ── */
.contact-form input, .contact-form textarea,
.cta-form input, .cta-form textarea {
  background: rgba(255,255,255,0.05) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.contact-form input:focus, .contact-form textarea:focus,
.cta-form input:focus, .cta-form textarea:focus {
  border-color: rgba(192,57,43,0.5) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.2),
    0 0 0 3px rgba(192,57,43,0.12),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
  outline: none !important;
}

/* ── STATS BAR ── */
.stats-bar {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.02) 100%) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 -1px 0 rgba(255,255,255,0.04) !important;
}

/* ── PAGE HERO ── */
.page-hero {
  background:
    radial-gradient(ellipse 80% 70% at 80% 50%, rgba(192,57,43,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 80%, rgba(40,80,200,0.08) 0%, transparent 55%),
    linear-gradient(160deg, #04060f 0%, #0a0e20 55%, #120818 100%) !important;
  position: relative !important; overflow: hidden !important;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 68px 68px;
}

/* ── HERO GRID ── */
.hero::after {
  background-size: 68px 68px !important;
  opacity: 0.7 !important;
}

/* ── SECTION DARK ORBS ── */
.dark-sec::before, .darkest-sec::before {
  background: radial-gradient(circle, rgba(192,57,43,0.08) 0%, transparent 65%) !important;
  width: 500px !important; height: 500px !important;
  animation: orbDrift 18s ease-in-out infinite alternate !important;
}
@keyframes orbDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-60px, 40px) scale(1.2); }
}

/* ── MODEL NODES ── */
.model-node {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.model-node.active {
  background: linear-gradient(135deg, rgba(192,57,43,0.18) 0%, rgba(192,57,43,0.06) 100%) !important;
  border-color: rgba(192,57,43,0.4) !important;
  box-shadow: 0 4px 24px rgba(192,57,43,0.2), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ── ME STEPS ── */
.me-step {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ── GLASS SHIMMER on hover (all cards) ── */
@keyframes glassShimmer {
  0%   { left: -80%; }
  100% { left: 130%; }
}
.wwd-card:hover::after, .srv-card:hover::after,
.why-card:hover::after, .glass-tile:hover::after,
.hero-stat-card:hover::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: -80% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(105deg,
    transparent 20%, rgba(255,255,255,0.07) 50%, transparent 80%) !important;
  animation: glassShimmer .6s ease forwards !important;
  pointer-events: none !important;
}

/* ================================================================
   HERO VIDEO BACKGROUND
================================================================ */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero-video.loaded { opacity: 1; }

/* Multi-layer overlay for depth */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(4,6,15,0.92) 0%, rgba(4,6,15,0.75) 40%, rgba(4,6,15,0.45) 70%, rgba(4,6,15,0.55) 100%),
    linear-gradient(to bottom, rgba(4,6,15,0.3) 0%, transparent 30%, transparent 70%, rgba(4,6,15,0.7) 100%),
    radial-gradient(ellipse 70% 60% at 70% 45%, rgba(192,57,43,0.15) 0%, transparent 60%);
}

/* Ensure hero content stays above video */
.hero-grid,
.hero-content,
.hero-visual,
.hero-tag,
.hero-btns,
.hero-visual-block {
  position: relative;
  z-index: 10 !important;
}

/* ── YouTube iframe video background ── */
.hero-yt-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* 16:9 ratio, oversized to cover all aspect ratios */
  width: 177.78vh;  /* 100vh * 16/9 */
  height: 56.25vw;  /* 100vw * 9/16 */
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-yt-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0.5;
}