/* ==========================================================================
   Two Bullies Towing — Industrial Cyberpunk / Night Tech
   Portfolio/Demo Concept · Austin, TX
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ==============================
   DESIGN TOKENS
   ============================== */
:root {
  /* Backgrounds — deep space black */
  --c-bg:        #020407;
  --c-bg2:       #05070d;
  --c-surface:   #090c14;
  --c-surface2:  #0c1020;
  --c-border:    rgba(200,255,0,0.09);
  --c-border-alt:rgba(200,255,0,0.18);

  /* Cyberpunk palette */
  --c-yellow:    #c8ff00;   /* Radioactive chartreuse — PRIMARY */
  --c-yellow2:   #d9ff44;
  --c-cyan:      #00d4f5;   /* Electric blue — SECONDARY */
  --c-cyan2:     #40e0ff;
  --c-orange:    #ff5500;   /* Safety orange — EMERGENCY ONLY */
  --c-red:       #ff1a1a;
  --c-purple:    #7c00ff;

  --c-text:      #cce0ff;
  --c-text-muted:#4a6585;
  --c-text-dim:  #253045;

  --font-head: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --glow-yellow: 0 0 14px rgba(200,255,0,0.75), 0 0 50px rgba(200,255,0,0.2);
  --glow-cyan:   0 0 14px rgba(0,212,245,0.75), 0 0 50px rgba(0,212,245,0.2);
  --glow-orange: 0 0 14px rgba(255,85,0,0.7),   0 0 50px rgba(255,85,0,0.18);

  --t-fast:  0.15s ease;
  --t-base:  0.3s ease;
  --t-slow:  0.6s cubic-bezier(0.23,1,0.32,1);

  --container: 1200px;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  6rem;

  --radius:    0.4rem;
  --radius-lg: 0.75rem;
}

/* ==============================
   RESET
   ============================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; border:none; background:none; }

/* ==============================
   FILM GRAIN (fixed overlay)
   ============================== */
body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ==============================
   TYPOGRAPHY
   ============================== */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.1;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
p { color:var(--c-text-muted); }

/* ==============================
   LAYOUT
   ============================== */
.container { max-width:var(--container); margin:0 auto; padding:0 1.5rem; }
.section { padding:var(--sp-xl) 0; }
.section--dark    { background:var(--c-bg); }
.section--alt     { background:var(--c-bg2); }
.section--surface { background:var(--c-surface); }

/* Grid dot pattern */
.grid-bg {
  background-image:
    radial-gradient(circle, rgba(200,255,0,0.06) 1px, transparent 1px);
  background-size:44px 44px;
}

/* Diagonal breaks */
.section--diagonal-top {
  clip-path:polygon(0 3rem, 100% 0, 100% 100%, 0 100%);
  margin-top:-3rem;
  padding-top:calc(var(--sp-xl) + 3rem);
}

/* Neon divider */
.neon-line {
  height:1px;
  border:none;
  background:linear-gradient(90deg, transparent, rgba(200,255,0,0.35), rgba(0,212,245,0.35), transparent);
  margin:0;
}

/* ==============================
   BUTTONS
   ============================== */
.btn {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.85rem 2rem;
  border-radius:var(--radius);
  font-family:var(--font-head);
  font-size:1rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.07); opacity:0; transition:opacity var(--t-fast); }
.btn:hover::after { opacity:1; }

/* Primary — radioactive yellow */
.btn--primary {
  background:var(--c-yellow);
  color:#020407;
  font-weight:700;
  box-shadow:0 4px 20px rgba(200,255,0,0.3);
}
.btn--primary:hover {
  background:var(--c-yellow2);
  box-shadow:var(--glow-yellow);
  transform:translateY(-2px);
}

/* Emergency — orange (used only for 911-level CTAs) */
.btn--emergency {
  background:var(--c-orange);
  color:#fff;
  font-weight:700;
  box-shadow:0 4px 20px rgba(255,85,0,0.35);
}
.btn--emergency:hover {
  box-shadow:var(--glow-orange);
  transform:translateY(-2px);
}

/* Cyan outline */
.btn--outline {
  background:transparent;
  color:var(--c-cyan);
  border:1px solid rgba(0,212,245,0.35);
}
.btn--outline:hover {
  border-color:var(--c-cyan);
  box-shadow:var(--glow-cyan);
  transform:translateY(-2px);
}

/* Ghost */
.btn--ghost {
  background:rgba(200,255,0,0.05);
  color:var(--c-text);
  border:1px solid rgba(200,255,0,0.18);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover {
  background:rgba(200,255,0,0.1);
  border-color:rgba(200,255,0,0.35);
  transform:translateY(-2px);
}

.btn--lg { padding:1.05rem 2.4rem; font-size:1.05rem; }
.btn--sm { padding:0.6rem 1.4rem; font-size:0.8rem; }
.btn--full { width:100%; justify-content:center; }

/* Pulse on emergency CTA */
.btn--pulse { animation:pulse-cta 2.5s ease-in-out infinite; }
@keyframes pulse-cta {
  0%,100% { box-shadow:0 4px 20px rgba(255,85,0,0.35); }
  50%     { box-shadow:0 4px 50px rgba(255,85,0,0.8), 0 0 100px rgba(255,85,0,0.2); }
}

/* Cyber pulse on primary */
.btn--cyber-pulse { animation:cyber-pulse 3s ease-in-out infinite; }
@keyframes cyber-pulse {
  0%,100% { box-shadow:0 4px 20px rgba(200,255,0,0.3); }
  50%     { box-shadow:0 4px 50px rgba(200,255,0,0.8), 0 0 80px rgba(200,255,0,0.2); }
}

/* ==============================
   BADGES / PILLS
   ============================== */
.badge {
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.3rem 0.8rem;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.badge--yellow {
  background:rgba(200,255,0,0.1);
  color:var(--c-yellow);
  border:1px solid rgba(200,255,0,0.3);
}
.badge--cyan {
  background:rgba(0,212,245,0.1);
  color:var(--c-cyan);
  border:1px solid rgba(0,212,245,0.25);
}
.badge--red {
  background:rgba(255,26,26,0.12);
  color:#ff6666;
  border:1px solid rgba(255,26,26,0.3);
}
.badge--orange {
  background:rgba(255,85,0,0.12);
  color:var(--c-orange);
  border:1px solid rgba(255,85,0,0.3);
}
.badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; animation:dot-blink 1.4s ease-in-out infinite; }
@keyframes dot-blink { 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* ==============================
   HUD / CYBER ELEMENTS
   ============================== */
.hud-label {
  font-family:var(--font-mono);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--c-yellow);
  opacity:0.75;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.hud-label::before {
  content:'';
  display:inline-block;
  width:1rem;
  height:1px;
  background:var(--c-yellow);
}

/* HUD corner bracket frame */
.hud-frame {
  position:relative;
  padding:2rem;
}
.hud-frame::before, .hud-frame::after,
.hud-frame > .hud-corner-tr, .hud-frame > .hud-corner-bl {
  content:'';
  position:absolute;
  width:18px; height:18px;
  border-color:rgba(200,255,0,0.5);
  border-style:solid;
  pointer-events:none;
}
.hud-frame::before { top:0; left:0; border-width:2px 0 0 2px; }
.hud-frame::after  { bottom:0; right:0; border-width:0 2px 2px 0; }

/* Section label */
.section-label {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--font-mono);
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--c-yellow);
  margin-bottom:0.85rem;
}
.section-label::before { content:''; width:1.25rem; height:1px; background:var(--c-yellow); }

.section-title {
  font-size:clamp(2rem,4vw,3rem);
  color:var(--c-text);
  margin-bottom:1rem;
}
.section-title .accent { color:var(--c-yellow); }
.section-title .accent-cyan { color:var(--c-cyan); }

.section-sub {
  font-size:1.05rem;
  color:var(--c-text-muted);
  max-width:56ch;
  line-height:1.75;
}

.section-header--center { text-align:center; }
.section-header--center .section-label { justify-content:center; }
.section-header--center .section-label::before { display:none; }
.section-header--center .section-sub { margin:0 auto; }

/* ==============================
   NAVIGATION
   ============================== */
.site-header {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:1.1rem 0;
  transition:all var(--t-base);
}
.site-header.scrolled {
  background:rgba(2,4,7,0.94);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(200,255,0,0.1);
  box-shadow:0 4px 30px rgba(0,0,0,0.7), 0 0 30px rgba(200,255,0,0.03);
  padding:0.7rem 0;
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.nav-logo { display:flex; align-items:center; gap:0.65rem; flex-shrink:0; }
.nav-logo__icon {
  width:38px; height:38px;
  background:var(--c-yellow);
  border-radius:0.35rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem;
  box-shadow:0 0 20px rgba(200,255,0,0.3);
}
.nav-logo__name {
  font-family:var(--font-head);
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--c-text);
}
.nav-logo__tagline {
  font-family:var(--font-mono);
  font-size:0.55rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--c-yellow);
  opacity:0.8;
}
.nav-logo__text { display:flex; flex-direction:column; line-height:1; gap:0.25rem; }

.nav-links { display:flex; align-items:center; gap:0.15rem; }
.nav-links a {
  padding:0.5rem 0.9rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--c-text-muted);
  border-radius:var(--radius);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover, .nav-links a.active { color:var(--c-yellow); background:rgba(200,255,0,0.06); }

.nav-cta-group { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.nav-phone {
  font-family:var(--font-mono);
  font-size:0.85rem;
  font-weight:700;
  color:var(--c-cyan);
  display:flex; align-items:center; gap:0.4rem;
  transition:color var(--t-fast);
}
.nav-phone:hover { color:var(--c-cyan2); text-shadow:var(--glow-cyan); }

.nav-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px; height:36px;
  padding:4px;
  border-radius:var(--radius);
  background:rgba(200,255,0,0.07);
  border:1px solid rgba(200,255,0,0.15);
}
.nav-toggle span { display:block; height:2px; background:var(--c-text); border-radius:2px; transition:all var(--t-base); transform-origin:center; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position:fixed; inset:0; z-index:999;
  background:rgba(2,4,7,0.97);
  backdrop-filter:blur(24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  opacity:0; pointer-events:none; transition:opacity var(--t-base);
}
.nav-overlay.open { opacity:1; pointer-events:all; }
.nav-overlay a {
  font-family:var(--font-head);
  font-size:2rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--c-text-muted);
  transition:color var(--t-fast), text-shadow var(--t-fast);
}
.nav-overlay a:hover { color:var(--c-yellow); text-shadow:var(--glow-yellow); }
.nav-overlay .overlay-phone { margin-top:2rem; font-size:1.4rem; color:var(--c-cyan); font-family:var(--font-mono); }
.overlay-close { position:absolute; top:1.5rem; right:1.5rem; font-size:2rem; color:var(--c-text-muted); cursor:pointer; }

/* ==============================
   HERO — CINEMATIC VIDEO
   ============================== */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top:80px;
}

/* Video background */
.hero-video-wrap {
  position:absolute; inset:0;
  overflow:hidden; z-index:0; pointer-events:none;
}
.hero-video-wrap video {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  min-width:100%; min-height:100%;
  width:auto; height:auto;
  object-fit:cover;
  opacity:0.45;
}
.hero-video-wrap iframe {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;
  min-width:177.78vh; min-height:100vh;
  opacity:0.45; pointer-events:none;
}

/* Gradient overlay */
.hero-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(2,4,7,0.6) 0%, rgba(2,4,7,0.35) 50%, rgba(2,4,7,0.9) 100%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(200,255,0,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 0% 60%, rgba(0,212,245,0.06) 0%, transparent 60%);
}

/* Scanlines */
.hero-scanlines {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px);
}

/* Emergency cyber lights */
.hero-lights {
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.hero-lights::before, .hero-lights::after {
  content:''; position:absolute;
  border-radius:50%; filter:blur(90px);
}
.hero-lights::before {
  width:600px; height:400px; top:25%; left:-15%;
  background:rgba(0,212,245,0.1);
  animation:cyber-light-l 6s ease-in-out infinite;
}
.hero-lights::after {
  width:600px; height:400px; top:25%; right:-15%;
  background:rgba(200,255,0,0.08);
  animation:cyber-light-r 6s ease-in-out infinite;
}
@keyframes cyber-light-l {
  0%,100%{opacity:0.5; transform:translateY(0);}
  50%{opacity:1; transform:translateY(-20px);}
}
@keyframes cyber-light-r {
  0%,100%{opacity:0.5; transform:translateY(-20px);}
  50%{opacity:1; transform:translateY(0);}
}

/* Hero HUD corner decorations */
.hero-hud-tl, .hero-hud-br {
  position:absolute; z-index:3; pointer-events:none;
}
.hero-hud-tl { top:100px; left:2rem; }
.hero-hud-br { bottom:5rem; right:2rem; }
.hero-hud-line {
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.15em;
  color:rgba(200,255,0,0.4);
  line-height:2;
  text-transform:uppercase;
}

/* Hero content */
.hero .container { position:relative; z-index:4; }
.hero__content { max-width:820px; padding:var(--sp-lg) 0; }

.hero__title {
  font-size:clamp(3.5rem,8vw,7rem);
  line-height:0.95;
  color:var(--c-text);
  margin-bottom:1.5rem;
  text-shadow:0 2px 60px rgba(0,0,0,0.9);
}

/* Glitch effect on headline accent */
.glitch-text {
  position:relative;
  display:inline-block;
  color:var(--c-yellow);
}
.glitch-text::before, .glitch-text::after {
  content:attr(data-text);
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  font-family:inherit; font-size:inherit;
  font-weight:inherit; line-height:inherit;
  letter-spacing:inherit; text-transform:inherit;
}
.glitch-text::before {
  color:var(--c-cyan);
  animation:glitch-1 5s infinite;
  clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
}
.glitch-text::after {
  color:var(--c-orange);
  animation:glitch-2 5s infinite;
  clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
}
@keyframes glitch-1 {
  0%,89%,100%  { transform:none; opacity:0; }
  90%          { transform:translate(-3px,0); opacity:0.65; }
  91%          { transform:translate(3px,0);  opacity:0.65; }
  92%,99%      { transform:none; opacity:0; }
}
@keyframes glitch-2 {
  0%,92%,100%  { transform:none; opacity:0; }
  93%          { transform:translate(4px,0);  opacity:0.5; }
  94%          { transform:translate(-4px,0); opacity:0.5; }
  95%,99%      { transform:none; opacity:0; }
}

/* Animated gradient text */
.gradient-text {
  background:linear-gradient(135deg, var(--c-yellow) 0%, var(--c-cyan) 50%, var(--c-yellow) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradient-shift 4s linear infinite;
}
@keyframes gradient-shift { from{background-position:0% center;} to{background-position:200% center;} }

.hero__sub {
  font-size:clamp(1rem,2vw,1.15rem);
  color:var(--c-text-muted);
  max-width:54ch;
  margin-bottom:2.5rem;
  line-height:1.75;
}
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }

.hero__trust {
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
}
.hero__trust-item {
  display:flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono);
  font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--c-text-muted);
}
.hero__trust-item svg { color:var(--c-cyan); flex-shrink:0; }
.hero__trust-item .val { color:var(--c-yellow); }

.hero__scroll {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--c-text-dim);
}
.hero__scroll-line {
  width:1px; height:50px;
  background:linear-gradient(to bottom, var(--c-yellow), transparent);
  animation:scroll-hint 2s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%{opacity:0;transform:scaleY(0);transform-origin:top;}
  50%{opacity:1;transform:scaleY(1);}
  100%{opacity:0;transform:scaleY(1);}
}

/* ==============================
   MARQUEE STATUS BAR
   ============================== */
.marquee-wrap {
  overflow:hidden; position:relative;
  background:rgba(200,255,0,0.04);
  border-top:1px solid rgba(200,255,0,0.1);
  border-bottom:1px solid rgba(200,255,0,0.1);
  padding:0.75rem 0;
}
.marquee-wrap::before, .marquee-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2;
}
.marquee-wrap::before { left:0; background:linear-gradient(to right, var(--c-bg), transparent); }
.marquee-wrap::after  { right:0; background:linear-gradient(to left, var(--c-bg), transparent); }
.marquee-track {
  display:flex; gap:0; width:max-content;
  animation:marquee-scroll 32s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-item {
  display:flex; align-items:center; gap:0.5rem;
  padding:0 2rem;
  font-family:var(--font-mono);
  font-size:0.65rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--c-text-muted); white-space:nowrap;
}
.marquee-item .m-icon { color:var(--c-yellow); font-size:0.7rem; }
.marquee-item .sep { color:rgba(200,255,0,0.25); margin:0 0.75rem; }

/* ==============================
   CYBER CARDS (glassmorphism)
   ============================== */
.cyber-card {
  background:rgba(9,12,20,0.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(200,255,0,0.1);
  border-radius:var(--radius-lg);
  position:relative;
  overflow:hidden;
  transition:border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.cyber-card:hover {
  border-color:rgba(200,255,0,0.3);
  box-shadow:0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,255,0,0.08), inset 0 1px 0 rgba(200,255,0,0.06);
  transform:translateY(-3px);
}
/* Top accent bar */
.cyber-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--c-yellow), var(--c-cyan));
  opacity:0; transition:opacity var(--t-base);
}
.cyber-card:hover::after { opacity:1; }

/* ==============================
   SERVICE IMAGE CARDS
   ============================== */
.img-service-card {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3; cursor:default;
  border:1px solid rgba(200,255,0,0.08);
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.img-service-card:hover {
  border-color:rgba(200,255,0,0.3);
  box-shadow:0 0 30px rgba(200,255,0,0.08);
}
.img-service-card__photo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 0.9s cubic-bezier(0.23,1,0.32,1);
}
.img-service-card:hover .img-service-card__photo { transform:scale(1.07); }
.img-service-card__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(2,4,7,0.97) 0%, rgba(2,4,7,0.6) 50%, rgba(2,4,7,0.2) 100%);
  transition:background 0.5s ease;
}
.img-service-card:hover .img-service-card__overlay {
  background:linear-gradient(to top, rgba(2,4,7,0.98) 0%, rgba(2,4,7,0.7) 60%, rgba(2,4,7,0.25) 100%);
}
.img-service-card__content {
  position:absolute; bottom:0; left:0; right:0; padding:1.75rem; z-index:2;
}
.img-service-card__icon { font-size:1.5rem; margin-bottom:0.5rem; display:block; }
.img-service-card__title {
  font-family:var(--font-head); font-size:1.1rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--c-text); margin-bottom:0.5rem;
}
.img-service-card__desc {
  font-size:0.82rem; color:var(--c-text-muted); line-height:1.6;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 0.5s ease, opacity 0.4s ease;
}
.img-service-card:hover .img-service-card__desc { max-height:80px; opacity:1; }
.img-service-card__bar {
  height:2px;
  background:linear-gradient(to right, var(--c-yellow), var(--c-cyan));
  margin-top:0.85rem;
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.5s ease;
}
.img-service-card:hover .img-service-card__bar { transform:scaleX(1); }

/* ==============================
   SPLIT SCREEN
   ============================== */
.split-section {
  display:grid; grid-template-columns:1fr 1fr; min-height:88vh;
}
.split-section__media { position:relative; overflow:hidden; }
.split-section__media img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform 8s ease;
}
.split-section__media:hover img { transform:scale(1.04); }
.split-section__media-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(2,4,7,0) 50%, rgba(2,4,7,0.95) 100%);
}
.split-section__content {
  background:var(--c-bg2); display:flex; align-items:center; padding:5rem 4rem;
}

/* ==============================
   BIG STATS
   ============================== */
.big-stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:rgba(200,255,0,0.08);
  border:1px solid rgba(200,255,0,0.08); border-radius:var(--radius-lg); overflow:hidden;
}
.big-stat {
  background:var(--c-surface); padding:2rem 1.5rem;
  display:flex; flex-direction:column; align-items:flex-start;
}
.big-stat__num {
  font-family:var(--font-head); font-size:clamp(2.5rem,5vw,4.5rem);
  font-weight:700; line-height:1; color:var(--c-yellow);
  text-shadow:0 0 30px rgba(200,255,0,0.4);
}
.big-stat__label {
  font-family:var(--font-mono); font-size:0.62rem; font-weight:700;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--c-text-muted); margin-top:0.35rem;
}

/* ==============================
   FEATURES GRID
   ============================== */
.features-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1.5rem;
}
.feature-item { display:flex; gap:1rem; align-items:flex-start; }
.feature-item__icon {
  width:48px; height:48px; flex-shrink:0;
  background:rgba(200,255,0,0.08);
  border:1px solid rgba(200,255,0,0.15);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-top:0.1rem;
}
.feature-item__body h4 {
  font-family:var(--font-head); font-size:0.95rem; font-weight:600;
  letter-spacing:0.06em; color:var(--c-text); margin-bottom:0.4rem;
}
.feature-item__body p { font-size:0.875rem; color:var(--c-text-muted); line-height:1.65; }

/* ==============================
   TESTIMONIALS CINEMATIC
   ============================== */
.testimonials-cinematic { position:relative; overflow:hidden; }
.testimonials-cinematic__bg {
  position:absolute; inset:0; background-size:cover; background-position:center 60%;
  animation:ken-burns 22s ease-out infinite alternate;
}
.testimonials-cinematic__overlay {
  position:absolute; inset:0; background:rgba(2,4,7,0.89);
}
.testimonials-cinematic__content { position:relative; z-index:2; }

.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.testimonial-card {
  border-radius:var(--radius-lg); padding:2rem;
  background:rgba(9,12,20,0.85);
  backdrop-filter:blur(16px);
  border:1px solid rgba(200,255,0,0.1);
}
.testimonial-card__stars { color:var(--c-yellow); font-size:0.9rem; letter-spacing:0.1em; margin-bottom:1rem; text-shadow:0 0 10px rgba(200,255,0,0.4); }
.testimonial-card__text { font-size:0.92rem; color:var(--c-text-muted); line-height:1.75; margin-bottom:1.5rem; font-style:italic; }
.testimonial-card__author { display:flex; align-items:center; gap:0.75rem; }
.testimonial-card__avatar {
  width:42px; height:42px; border-radius:50%;
  background:var(--c-surface2);
  border:1px solid rgba(200,255,0,0.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:0.95rem; color:var(--c-yellow); flex-shrink:0;
}
.testimonial-card__name { font-family:var(--font-head); font-size:0.875rem; font-weight:600; letter-spacing:0.05em; color:var(--c-text); }
.testimonial-card__meta { font-family:var(--font-mono); font-size:0.65rem; color:var(--c-text-dim); margin-top:0.2rem; }

/* ==============================
   CTA BANNER
   ============================== */
.cta-banner {
  position:relative; overflow:hidden;
  padding:var(--sp-xl) 0;
  background:var(--c-bg);
}
.cta-banner__inner { position:relative; z-index:2; text-align:center; }
.cta-banner__title { font-size:clamp(2rem,4vw,3.5rem); color:var(--c-text); margin-bottom:1rem; }
.cta-banner__sub { font-size:1.05rem; color:var(--c-text-muted); max-width:50ch; margin:0 auto 2.5rem; }
.cta-banner__actions { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.cta-banner--img .cta-img-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:ken-burns 20s ease-out infinite alternate;
}
.cta-banner--img .cta-img-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(2,4,7,0.85) 0%, rgba(2,4,7,0.8) 100%),
    radial-gradient(ellipse 80% 100% at 50% 120%, rgba(200,255,0,0.1) 0%, transparent 70%);
}

/* Ken Burns */
@keyframes ken-burns { from{transform:scale(1);} to{transform:scale(1.07);} }

/* ==============================
   PARALLAX / FULL-BLEED SECTIONS
   ============================== */
.parallax-section {
  position:relative; overflow:hidden;
  background-attachment:fixed; background-size:cover; background-position:center;
}
@media (max-width:768px) { .parallax-section { background-attachment:scroll; } }

.img-section { position:relative; overflow:hidden; }
.img-section__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.img-section__overlay { position:absolute; inset:0; }
.img-section__content { position:relative; z-index:2; }

/* About cinematic image strip */
.about-img-section { position:relative; min-height:460px; display:flex; align-items:flex-end; overflow:hidden; }
.about-img-section__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:ken-burns 20s ease-out infinite alternate; }
.about-img-section__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(2,4,7,1) 0%, rgba(2,4,7,0.5) 50%, rgba(2,4,7,0.1) 100%);
}
.about-img-section__content { position:relative; z-index:2; padding:3rem 0; width:100%; }

/* ==============================
   PAGE HERO — INNER PAGES
   ============================== */
.page-hero {
  position:relative; padding:9rem 0 4.5rem; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 110%, rgba(200,255,0,0.06) 0%, transparent 70%),
             linear-gradient(to bottom, var(--c-bg) 0%, var(--c-bg2) 100%);
}
.page-hero__content { position:relative; z-index:1; }
.page-hero__label {
  font-family:var(--font-mono); font-size:0.65rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--c-yellow);
  display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; opacity:0.85;
}
.page-hero__label::before { content:''; display:inline-block; width:1.5rem; height:1px; background:var(--c-yellow); }
.page-hero__title { font-size:clamp(2.5rem,5vw,4.5rem); color:var(--c-text); margin-bottom:1.25rem; }
.page-hero__sub { font-size:1.1rem; color:var(--c-text-muted); max-width:58ch; line-height:1.75; }

.page-hero--img { min-height:68vh; display:flex; align-items:flex-end; padding-bottom:4rem; padding-top:0; }
.page-hero__bg-photo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%;
  animation:ken-burns 20s ease-out infinite alternate;
}
.page-hero__bg-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(2,4,7,0.95) 0%, rgba(2,4,7,0.65) 70%, rgba(2,4,7,0.4) 100%),
    linear-gradient(to top,   rgba(2,4,7,0.95) 0%, rgba(2,4,7,0.2) 60%),
    rgba(200,255,0,0.02);
}

/* ==============================
   AREA GRID
   ============================== */
.area-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:0.75rem; }
.area-card {
  background:var(--c-surface);
  border:1px solid rgba(200,255,0,0.08);
  border-radius:var(--radius); padding:0.9rem 1.2rem;
  display:flex; align-items:center; gap:0.6rem;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.area-card:hover {
  border-color:rgba(200,255,0,0.3);
  background:rgba(200,255,0,0.04);
  box-shadow:0 0 15px rgba(200,255,0,0.06);
}
.area-card__dot { width:6px; height:6px; border-radius:50%; background:var(--c-yellow); flex-shrink:0; box-shadow:0 0 6px rgba(200,255,0,0.6); }
.area-card__name { font-family:var(--font-mono); font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-text); }

/* ==============================
   EMERGENCY STRIP
   ============================== */
.emergency-strip {
  background:linear-gradient(90deg, rgba(255,85,0,0.1) 0%, rgba(255,26,26,0.08) 50%, rgba(255,85,0,0.1) 100%);
  border:1px solid rgba(255,85,0,0.2);
  border-radius:var(--radius-lg); padding:1.75rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.emergency-strip__text strong { display:block; font-family:var(--font-head); font-size:1.25rem; font-weight:700; letter-spacing:0.06em; color:var(--c-text); margin-bottom:0.2rem; }
.emergency-strip__text p { font-size:0.875rem; color:var(--c-text-muted); }

/* ==============================
   CONTACT
   ============================== */
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:3.5rem; align-items:start; }
.contact-card {
  display:flex; gap:1rem; align-items:flex-start; padding:1.5rem;
  background:var(--c-surface); border:1px solid rgba(200,255,0,0.08);
  border-radius:var(--radius-lg); margin-bottom:1rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-card:hover { border-color:rgba(200,255,0,0.25); box-shadow:0 0 20px rgba(200,255,0,0.04); }
.contact-card__icon {
  width:44px; height:44px; flex-shrink:0;
  background:rgba(200,255,0,0.08); border:1px solid rgba(200,255,0,0.15);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.contact-card__label { font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--c-text-dim); margin-bottom:0.3rem; }
.contact-card__value { font-size:0.95rem; font-weight:500; color:var(--c-text); }
.contact-card__value a { transition:color var(--t-fast); }
.contact-card__value a:hover { color:var(--c-yellow); }

.contact-form-wrap {
  background:var(--c-surface); border:1px solid rgba(200,255,0,0.1); border-radius:var(--radius-lg); padding:2.5rem;
}
.form-title { font-family:var(--font-head); font-size:1.35rem; font-weight:700; letter-spacing:0.06em; color:var(--c-text); margin-bottom:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--c-text-muted); margin-bottom:0.5rem; }
.form-control {
  width:100%; padding:0.85rem 1rem;
  background:var(--c-surface2); border:1px solid rgba(200,255,0,0.12);
  border-radius:var(--radius); color:var(--c-text); font-family:var(--font-body); font-size:0.95rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast); outline:none; -webkit-appearance:none;
}
.form-control::placeholder { color:var(--c-text-dim); }
.form-control:focus { border-color:var(--c-yellow); box-shadow:0 0 0 3px rgba(200,255,0,0.1); }
textarea.form-control { resize:vertical; min-height:130px; }
select.form-control option { background:var(--c-surface); }

/* ==============================
   SERVICES PAGE — DETAIL
   ============================== */
.service-detail {
  display:grid; grid-template-columns:auto 1fr; gap:2.5rem; padding:2.5rem;
  background:var(--c-surface); border:1px solid rgba(200,255,0,0.08); border-radius:var(--radius-lg);
  margin-bottom:1.25rem; transition:border-color var(--t-base), box-shadow var(--t-base);
}
.service-detail:hover { border-color:rgba(200,255,0,0.25); box-shadow:0 4px 30px rgba(0,0,0,0.4); }
.service-detail__icon {
  width:70px; height:70px;
  background:rgba(200,255,0,0.07); border:1px solid rgba(200,255,0,0.18);
  border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:2rem; flex-shrink:0; align-self:flex-start;
}
.service-detail__title { font-family:var(--font-head); font-size:1.35rem; font-weight:700; letter-spacing:0.06em; color:var(--c-text); margin-bottom:0.75rem; }
.service-detail__desc { font-size:0.93rem; color:var(--c-text-muted); line-height:1.75; margin-bottom:1.25rem; }
.service-detail__features { display:flex; flex-wrap:wrap; gap:0.5rem; }
.service-tag {
  padding:0.3rem 0.8rem; background:rgba(200,255,0,0.05); border:1px solid rgba(200,255,0,0.12);
  border-radius:999px; font-family:var(--font-mono); font-size:0.62rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--c-text-muted);
}

/* ==============================
   MAP PLACEHOLDER
   ============================== */
.map-placeholder {
  position:relative; aspect-ratio:16/7; background:var(--c-surface);
  border:1px solid rgba(200,255,0,0.1); border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; text-align:center;
}
.map-placeholder::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 60%, rgba(0,212,245,0.06) 0%, transparent 100%);
}
.map-placeholder__icon { font-size:4rem; opacity:0.25; }
.map-placeholder__text { font-family:var(--font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--c-text-dim); }

/* ==============================
   FOOTER
   ============================== */
.site-footer { background:var(--c-bg2); border-top:1px solid rgba(200,255,0,0.08); padding-top:var(--sp-xl); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; padding-bottom:var(--sp-lg); border-bottom:1px solid rgba(200,255,0,0.06); }
.footer-logo-wrap { display:flex; align-items:center; gap:0.6rem; margin-bottom:1rem; }
.footer-logo-icon { width:36px; height:36px; background:var(--c-yellow); border-radius:0.35rem; display:flex; align-items:center; justify-content:center; font-size:1.05rem; box-shadow:0 0 15px rgba(200,255,0,0.3); }
.footer-logo-name { font-family:var(--font-head); font-size:1rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--c-text); }
.footer-desc { font-size:0.875rem; color:var(--c-text-muted); line-height:1.7; margin-bottom:1.5rem; max-width:28ch; }
.footer-phone-link { font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--c-cyan); display:flex; align-items:center; gap:0.5rem; transition:color var(--t-fast), text-shadow var(--t-fast); }
.footer-phone-link:hover { color:var(--c-cyan2); text-shadow:var(--glow-cyan); }
.footer-col-title { font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--c-yellow); margin-bottom:1.25rem; opacity:0.8; }
.footer-col ul li { margin-bottom:0.6rem; }
.footer-col ul li a { font-size:0.875rem; color:var(--c-text-muted); transition:color var(--t-fast); }
.footer-col ul li a:hover { color:var(--c-yellow); }
.footer-bottom { padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copyright { font-family:var(--font-mono); font-size:0.65rem; color:var(--c-text-dim); letter-spacing:0.1em; }
.footer-disclaimer { font-size:0.72rem; color:var(--c-text-dim); font-style:italic; text-align:right; max-width:55ch; }

/* ==============================
   SCROLL REVEAL
   ============================== */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.65s cubic-bezier(0.23,1,0.32,1), transform 0.65s cubic-bezier(0.23,1,0.32,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }
.reveal-delay-5 { transition-delay:0.5s; }

/* ==============================
   UTILITY
   ============================== */
.text-yellow  { color:var(--c-yellow); }
.text-cyan    { color:var(--c-cyan); }
.text-orange  { color:var(--c-orange); }
.text-muted   { color:var(--c-text-muted); }
.text-center  { text-align:center; }
.mt-sm { margin-top:var(--sp-sm); }
.mt-md { margin-top:var(--sp-md); }
.mt-lg { margin-top:var(--sp-lg); }
.mb-md { margin-bottom:var(--sp-md); }
.font-mono { font-family:var(--font-mono); }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width:1024px) {
  .testimonials-grid  { grid-template-columns:1fr 1fr; }
  .footer-grid        { grid-template-columns:1fr 1fr; }
  .big-stats-grid     { grid-template-columns:1fr 1fr; }
  .split-section      { grid-template-columns:1fr; min-height:auto; }
  .split-section__media { height:55vw; min-height:280px; }
  .split-section__media-overlay { background:linear-gradient(to bottom, rgba(2,4,7,0) 40%, rgba(2,4,7,0.95) 100%); }
  .split-section__content { padding:3rem 2rem; }
  .contact-layout     { grid-template-columns:1fr; }
  .service-detail     { grid-template-columns:1fr; gap:1.5rem; }
}

@media (max-width:768px) {
  :root { --sp-xl:4rem; --sp-lg:3rem; }
  .nav-links, .nav-phone { display:none; }
  .nav-toggle { display:flex; }
  .testimonials-grid  { grid-template-columns:1fr; }
  .footer-grid        { grid-template-columns:1fr; gap:2rem; }
  .footer-disclaimer  { text-align:left; }
  .footer-bottom      { flex-direction:column; gap:0.75rem; }
  .form-row           { grid-template-columns:1fr; }
  .emergency-strip    { flex-direction:column; text-align:center; }
  .hero__title        { font-size:clamp(2.8rem,10vw,4rem); }
  .cta-banner__actions { flex-direction:column; align-items:center; }
}

@media (max-width:480px) {
  .hero__actions { flex-direction:column; }
  .hero__actions .btn { width:100%; justify-content:center; }
  .big-stats-grid { grid-template-columns:1fr 1fr; }
}