/* ═══════════════════════════════════════════════════
   CHICAGO CODING SYSTEMS — style.css
   Unified design system: all pages, all components
   ═══════════════════════════════════════════════════ */

/* ── GOOGLE FONTS ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ── VARIABLES ────────────────────────────────────── */
:root {
  /* Dark palette */
  --dark:          #0a0a0a;
  --dark-alt:      #111111;
  --dark-surf:     #1a1a1a;

  /* Light palette */
  --light:         #ffffff;
  --light-alt:     #f5f4f2;
  --light-surf:    #eceae6;

  /* Accent */
  --red:           #d91a21;
  --red-bright:    #ff3344;
  --red-glow:      rgba(217,26,33,0.12);
  --red-pale:      rgba(217,26,33,0.06);

  /* Neutrals */
  --white:         #f0f0f0;
  --grey:          #888888;
  --grey-dark:     #2e2e2e;
  --ink:           #111111;
  --ink-mid:       #444444;
  --ink-muted:     #888888;

  /* Borders */
  --border-dark:   rgba(255,255,255,0.07);
  --border-light:  #d8d5d0;

  /* Fonts */
  --font-display:  'Geologica', sans-serif;
  --font-mono:     'Space Mono', monospace;
  --font-body:     'Instrument Sans', sans-serif;

  /* Transitions */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Legacy aliases (for backward compatibility) */
  --clr-bg:           var(--dark);
  --clr-bg-alt:       var(--dark-alt);
  --clr-surface:      var(--dark-surf);
  --clr-accent:       var(--red);
  --clr-accent-dim:   var(--red);
  --clr-accent-glow:  var(--red-glow);
  --clr-white:        var(--white);
  --clr-grey:         var(--grey);
  --clr-grey-dark:    var(--grey-dark);
  --clr-red:          var(--red-bright);
  --grain-opacity:    0.035;
}

/* ── RESET ────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--red) #111; }
body { font-family:var(--font-body); background:var(--dark); color:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
::selection { background:var(--red); color:#fff; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { background:none; border:none; cursor:pointer; }

/* ── GRAIN OVERLAY ────────────────────────────────── */
.grain-overlay {
  position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  pointer-events:none; z-index:9999; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainMove 0.5s steps(4) infinite;
}
@keyframes grainMove {
  0%,100%{transform:translate(0,0)} 25%{transform:translate(-2%,-3%)} 50%{transform:translate(3%,1%)} 75%{transform:translate(-1%,4%)}
}

/* ── SCAN LINES ───────────────────────────────────── */
.scan-lines {
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);
}

/* ── SCROLL PROGRESS ──────────────────────────────── */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--red), var(--red-bright));
  z-index:10001; width:0%; transition:width .05s linear;
  box-shadow:0 0 8px var(--red);
}

/* ── CURSOR ───────────────────────────────────────── */
.cursor-dot {
  width:8px; height:8px; background:var(--red); border-radius:50%;
  position:fixed; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
}
.cursor-ring {
  width:38px; height:38px; border:1.5px solid var(--red); border-radius:50%;
  position:fixed; pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%); transition:width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s, opacity .3s;
}
.cursor-ring.hov,
.cursor-ring.hovering { width:60px; height:60px; border-color:var(--red-bright); }
@media(max-width:768px){.cursor-dot,.cursor-ring{display:none}}

/* ── LOADER ───────────────────────────────────────── */
.loader-screen {
  position:fixed; inset:0; background:var(--dark); z-index:100000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  transition:opacity .7s ease, visibility .7s;
}
.loader-screen.hidden { opacity:0; visibility:hidden; }
.loader-logo { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.4em; text-transform:uppercase; color:var(--grey); }
.loader-track,
.loader-bar-wrapper { width:200px; height:1px; background:rgba(255,255,255,.1); overflow:hidden; position:relative; }
.loader-fill,
.loader-bar { height:100%; background:linear-gradient(90deg,var(--red),var(--red-bright)); width:0%; animation:loaderFill 1.8s var(--ease-out) forwards; }
@keyframes loaderFill { to { width:100%; } }
.loader-pct,
.loader-text { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.3em; color:var(--red); text-transform:uppercase; }

/* ── NAVIGATION ───────────────────────────────────── */
.nav-bar {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:1.4rem 4vw; display:flex; justify-content:space-between; align-items:center;
  transition:background .4s, backdrop-filter .4s, box-shadow .4s, padding .3s;
}
.nav-bar.scrolled {
  background:rgba(10,10,10,0.88); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); box-shadow:0 1px 0 var(--border-dark);
  padding:.9rem 4vw;
}
.nav-logo-wrap { display:flex; align-items:center; gap:.75rem; }
.nav-logo-mark,
.nav-logo .logo-mark {
  width:160px; height:160px; border:1.5px solid var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700; color:var(--red);
  transition:background .3s;
}
.nav-logo-wrap:hover .nav-logo-mark { background:var(--red); color:#fff; }
.nav-logo-text,
.nav-logo {
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--white);
  display:flex; align-items:center; gap:.6rem; height:40px;
}
.nav-links { display:flex; gap:2.5rem; list-style:none; align-items:center; }
.nav-links a {
  font-family:var(--font-mono); font-size:.9rem; letter-spacing:.1em; text-transform:uppercase;
  color: white; transition:color .3s; position:relative;
}
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--red); transition:width .3s; }
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--red); }
.nav-cta {
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.55rem 1.4rem; border:1px solid var(--red); color:var(--red) !important;
  transition:all .3s; white-space:nowrap; cursor:pointer;
}
.nav-cta:hover { background:var(--red); color:#fff !important; box-shadow:0 0 20px var(--red-glow); }
.nav-burger { display:none; flex-direction:column; gap:5px; z-index:1001; }
.nav-burger span { width:24px; height:1.5px; background:var(--white); transition:all .3s; display:block; }
.nav-burger.open span:nth-child(1){ transform:rotate(45deg) translate(4px,5px); }
.nav-burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-burger.open span:nth-child(3){ transform:rotate(-45deg) translate(4px,-5px); }
.mob-nav,
.mobile-nav {
  position:fixed; inset:0; background:var(--dark); z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.77,0,.175,1);
}
.mob-nav.open,
.mobile-nav.open { transform:translateY(0); }
.mob-nav a,
.mobile-nav a { font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--white); letter-spacing:-.02em; transition:color .3s; }
.mob-nav a:hover,
.mobile-nav a:hover { color:var(--red); }
@media(max-width:900px){ .nav-links{display:none} .nav-burger{display:flex} .nav-bar{padding:1.1rem 1.5rem} .nav-bar.scrolled{padding:.8rem 1.5rem} }

/* ── BUTTONS ──────────────────────────────────────── */
.btn-red,
.btn-primary {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  padding:1rem 2.5rem; background:var(--red); color:#fff; display:inline-block;
  position:relative; overflow:hidden; font-weight:700; transition:box-shadow .3s; border:none; cursor:pointer;
}
.btn-red::before,
.btn-primary::before { content:''; position:absolute; inset:0; background:#000; transform:translateX(-101%); transition:transform .35s var(--ease-out); }
.btn-red:hover,
.btn-primary:hover { box-shadow:0 0 28px var(--red-glow); }
.btn-red:hover::before,
.btn-primary:hover::before { transform:translateX(0); }
.btn-red span,
.btn-primary span { position:relative; z-index:1; }

.btn-ghost,
.btn-outline {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  padding:1rem 2.5rem; background:transparent; display:inline-block; transition:all .3s; cursor:pointer;
}
.btn-ghost.dark { color:var(--white); border:1px solid rgba(255,255,255,.3); }
.btn-ghost.dark:hover { border-color:var(--red); color:var(--red); }
.btn-ghost.light { color:var(--ink); border:1.5px solid var(--ink); }
.btn-ghost.light:hover { border-color:var(--red); color:var(--red); }
.btn-outline { color:var(--white); border:1px solid rgba(255,255,255,.3); }
.btn-outline:hover { border-color:var(--red); color:var(--red); }

/* ── SECTION TYPOGRAPHY ───────────────────────────── */
.eyebrow {
  font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red); margin-bottom:1.5rem; display:flex; align-items:center; gap:.8rem;
}
.eyebrow::before { content:'//'; opacity:.5; }

.section-heading {
  font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:800; line-height:1.08; margin-bottom:1.5rem;
}
.section-heading.dark { color:var(--white); }
.section-heading.light { color:var(--ink); }

.section-sub { font-size:1rem; line-height:1.8; max-width:600px; }
.section-sub.dark { color: white; }
.section-sub.light { color:var(--ink-mid); }

/* ── SCROLL REVEAL ────────────────────────────────── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.vis,
.reveal.visible { opacity:1; transform:translateY(0); }
.d1,.reveal-delay-1{transition-delay:.1s} .d2,.reveal-delay-2{transition-delay:.2s} .d3,.reveal-delay-3{transition-delay:.3s} .d4,.reveal-delay-4{transition-delay:.4s} .d5{transition-delay:.5s}

/* ── MARQUEE ──────────────────────────────────────── */
.marquee-strip {
  overflow:hidden; padding:1.8rem 0; background:var(--dark-alt);
  border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark);
}
.marquee-track { display:flex; width:max-content; animation:marquee 30s linear infinite; }
.marquee-track.rev { animation-direction:reverse; }
.marquee-item {
  font-family:var(--font-display); font-size:clamp(.9rem,2vw,1.5rem); font-weight:700;
  white-space:nowrap; padding:0 2.5rem; color:var(--white);
  display:flex; align-items:center; gap:2.5rem; text-transform:uppercase; letter-spacing:.06em;
}
.marquee-dot,
.marquee-item .sep { width:6px; height:8px; background:var(--red); border-radius:50%; flex-shrink:0; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── PARALLAX QUOTE BAND ──────────────────────────── */
.quote-band {
  padding:9rem 6vw; background:var(--light-alt); position:relative; overflow:hidden;
  border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light);
}
.quote-band::before {
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px;
  background:radial-gradient(circle, var(--red-pale) 0%, transparent 70%); border-radius:50%;
}
.quote-inner { max-width:900px; margin:0 auto; text-align:center; position:relative; z-index:1; }
.quote-mark { font-family:var(--font-display); font-size:5rem; line-height:.5; color:var(--red); opacity:.25; margin-bottom:1.5rem; }
.quote-text {
  font-family:var(--font-display); font-size:clamp(1.3rem,2.5vw,2rem);
  font-weight:700; line-height:1.35; color:var(--ink); margin-bottom:1.8rem;
}
.quote-text em { color:var(--red); font-style:normal; }
.quote-attr { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-muted); }

/* ── CTA BAND ─────────────────────────────────────── */
.cta-section {
  padding:9rem 6vw; background:var(--dark-alt); position:relative; overflow:hidden;
  border-top:1px solid var(--border-dark);
}
.cta-glow {
  position:absolute; width:700px; height:700px;
  background:radial-gradient(circle, var(--red-glow) 0%, transparent 70%);
  border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.cta-inner { max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:3rem; position:relative; z-index:1; }
.cta-headline,
.cta-text { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,3rem); font-weight:800; max-width:620px; line-height:1.12; color:var(--white); }
.cta-headline .red,
.cta-text .accent { color:var(--red); }
.cta-btn { flex-shrink:0; }
@media(max-width:768px){ .cta-inner{flex-direction:column;text-align:center} .cta-section{padding:5rem 1.5rem} }

/* ── STAT STRIP ───────────────────────────────────── */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark); }
.stat-item { padding:3rem 2rem; text-align:center; border-right:1px solid var(--border-dark); }
.stat-item:last-child { border-right:none; }
.stat-num { font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3.5rem); font-weight:800; color:var(--red); line-height:1; }
.stat-label { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color: white; margin-top:.5rem; }
@media(max-width:768px){ .stat-strip{grid-template-columns:repeat(2,1fr)} }

/* ── FOOTER ───────────────────────────────────────── */
.site-footer {
  background:var(--light); color:var(--ink);
  padding:7rem 6vw 3rem; border-top:3px solid var(--red);
}
.footer-inner { max-width:1400px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:4rem; padding-bottom:4rem; border-bottom:1px solid var(--border-light); }
.footer-brand-name { font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--ink); margin-bottom:1.2rem; }
.footer-tagline { font-size:.85rem; color:var(--ink-muted); line-height:1.7; max-width:240px; margin-bottom:1.5rem; }
.footer-social { display:flex; gap:1rem; }
.footer-social a {
  width:34px; height:34px; border:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.footer-social a:hover { border-color:var(--red); background:var(--red); }
.footer-social svg { width:14px; height:14px; fill:var(--ink-muted); transition:fill .3s; }
.footer-social a:hover svg { fill:#fff; }
.footer-addr { font-size:.85rem; color:var(--ink-muted); line-height:1.8; font-style:normal; }
.footer-col h4 { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--red); margin-bottom:1.5rem; }
.footer-col a, .footer-col p { display:block; font-size:.88rem; color:var(--ink-muted); margin-bottom:.7rem; transition:color .3s; }
.footer-col a:hover { color:var(--red); }
.footer-phone { font-family:var(--font-mono); font-size:.82rem; color:var(--ink) !important; font-weight:700; }
.footer-bottom { padding:2rem 0 .5rem; display:flex; justify-content:space-between; align-items:center; }
.footer-copy { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-muted); }
.footer-links { display:flex; gap:2rem; }
.footer-links a { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); transition:color .3s; }
.footer-links a:hover { color:var(--red); }
@media(max-width:1100px){ .footer-top{grid-template-columns:1fr 1fr; gap:3rem} }
@media(max-width:700px){ .footer-top{grid-template-columns:1fr; gap:2.5rem} .site-footer{padding:5rem 1.5rem 2rem} .footer-bottom{flex-direction:column;gap:1rem;text-align:center} }

/* ── PAGE INNER HERO (subpages) ───────────────────── */
.page-hero {
  min-height:65vh; display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden; padding:0 6vw 6rem; background:var(--dark);
}
.page-hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 0% 60%, rgba(217,26,33,.12) 0%, transparent 60%);
}
.page-hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--red-pale) 1px,transparent 1px),linear-gradient(90deg,var(--red-pale) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(ellipse 100% 90% at 20% 60%, black 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 20% 60%, black 0%, transparent 70%);
}
.page-hero-accent { position:absolute; right:8vw; top:30%; width:1px; height:160px; background:linear-gradient(to bottom,transparent,var(--red),transparent); opacity:.3; }
.page-hero-content { position:relative; z-index:2; max-width:1550px; margin:0 auto; width:100%; }
.breadcrumb {
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(240,240,240,.35); margin-bottom:2rem; display:flex; align-items:center; gap:.7rem;
  opacity:0; animation:fadeUp .6s .3s ease forwards;
}
.breadcrumb a:hover { color:var(--red); }
.bc-sep { color:var(--red); opacity:.5; }
.page-eyebrow {
  font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red); margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem;
  opacity:0; animation:fadeUp .6s .5s ease forwards;
}
.page-eyebrow::before { content:''; width:30px; height:1px; background:var(--red); }
.page-title {
  font-family:var(--font-display); font-size:clamp(3rem,8vw,8rem);
  font-weight:800; line-height:.93; letter-spacing:-.03em; margin-bottom:2rem;
  opacity:0; animation:fadeUp .8s .7s ease forwards;
}
.page-title .outline { -webkit-text-stroke:2px var(--white); color:transparent; }
.page-title .red { color:var(--red); }
.page-sub {
  font-size:clamp(1rem,1.3vw,1.15rem); color: white; max-width:560px;
  line-height:1.75; margin-bottom:2.5rem;
  opacity:0; animation:fadeUp .8s .9s ease forwards;
}
.page-actions { display:flex; gap:1.5rem; align-items:center; opacity:0; animation:fadeUp .8s 1.1s ease forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@media(max-width:768px){ .page-hero{padding:0 1.5rem 4rem;min-height:55vh} }

/* ── HI-TECH: ANIMATED GRID BACKGROUND ───────────── */
.tech-grid {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  background-image:
    linear-gradient(var(--red-pale) 1px, transparent 1px),
    linear-gradient(90deg, var(--red-pale) 1px, transparent 1px);
  background-size:60px 60px;
}

/* ── HI-TECH: DATA TICKER ─────────────────────────── */
.data-ticker {
  background:var(--dark); border-top:1px solid var(--border-dark); border-bottom:1px solid var(--border-dark);
  padding:.6rem 0; overflow:hidden; position:relative;
}
.data-ticker::before, .data-ticker::after {
  content:''; position:absolute; top:0; width:80px; height:100%; z-index:1;
}
.data-ticker::before { left:0; background:linear-gradient(90deg,var(--dark),transparent); }
.data-ticker::after { right:0; background:linear-gradient(-90deg,var(--dark),transparent); }
.ticker-track { display:flex; width:max-content; animation:ticker 40s linear infinite; gap:0; }
.ticker-item {
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey); padding:0 2rem; white-space:nowrap; display:flex; align-items:center; gap:.8rem;
}
.ticker-item .tick-val { color:var(--red); font-weight:700; }
.ticker-item .tick-up { color:#00ff88; }
.ticker-item .tick-sep { color:var(--border-dark); }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── HI-TECH: GLOWING STAT BOXES ─────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.stat-box {
  padding:3rem 2rem; border:1px solid var(--border-dark); text-align:center;
  position:relative; overflow:hidden; transition:border-color .4s;
}
.stat-box::before { content:''; position:absolute; inset:0; background:var(--red-pale); opacity:0; transition:opacity .4s; }
.stat-box:hover { border-color:var(--red); }
.stat-box:hover::before { opacity:1; }
.stat-box .stat-num { font-family:var(--font-display); font-size:clamp(2.5rem,4vw,4rem); font-weight:800; color:var(--red); line-height:1; position:relative; z-index:1; }
.stat-box .stat-num .unit { font-size:.45em; vertical-align:top; margin-top:.3em; display:inline-block; }
.stat-box .stat-label { font-family:var(--font-mono); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color: white; margin-top:.75rem; position:relative; z-index:1; }
@media(max-width:768px){ .stat-grid{grid-template-columns:repeat(2,1fr)} }

/* ── HI-TECH: GLOWING CARD HOVER ─────────────────── */
.glow-card { position:relative; transition:transform .4s var(--ease-out); }
.glow-card::after {
  content:''; position:absolute; inset:-1px; background:linear-gradient(135deg,var(--red),transparent,transparent);
  opacity:0; transition:opacity .4s; border-radius:inherit; pointer-events:none;
}
.glow-card:hover { transform:translateY(-4px); }
.glow-card:hover::after { opacity:.15; }

/* ── HI-TECH: CIRCUIT LINE DECORATION ────────────── */
.circuit-line { position:absolute; background:var(--red); opacity:.15; }
.circuit-line.h { height:1px; }
.circuit-line.v { width:1px; }
.circuit-dot { width:5px; height:5px; border-radius:50%; background:var(--red); position:absolute; opacity:.3; }

/* ── HI-TECH: TERMINAL TEXT BOX ──────────────────── */
.terminal-box {
  background:var(--dark-alt); border:1px solid var(--border-dark);
  padding:2rem; font-family:var(--font-mono); font-size:.8rem;
  line-height:2; color:rgba(240,240,240,.6); position:relative;
}
.terminal-box::before {
  content:''; display:block; width:100%; margin-bottom:1rem;
  height:1px; background:linear-gradient(90deg,var(--red),transparent);
}
.terminal-line { display:block; }
.terminal-line .prompt { color:var(--red); margin-right:.5rem; }
.terminal-line .cmd { color:var(--white); }
.terminal-line .out { color:#00ff88; }
.terminal-cursor {
  display:inline-block; width:8px; height:1em; background:var(--red);
  vertical-align:text-bottom; animation:blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── HI-TECH: HOVER SCAN LINE ─────────────────────── */
.scan-hover { position:relative; overflow:hidden; }
.scan-hover::after {
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:linear-gradient(to bottom, transparent 0%, rgba(217,26,33,.06) 50%, transparent 100%);
  transition:top .6s var(--ease-out); pointer-events:none;
}
.scan-hover:hover::after { top:100%; }

/* ── IMAGE FALLBACK ───────────────────────────────── */
.img-ph { background:var(--dark-surf); width:100%; height:100%; min-height:200px; display:flex; align-items:center; justify-content:center; }
.img-ph svg { opacity:.15; }

/* ═══════════════════════════════════════════════════
   HOME PAGE — HERO
   ═══════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg-layer {
  position:absolute; inset:0;
  background:url('../images/bg2.png') center/cover;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(217,26,33,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,26,33,0.03) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
}
.hero-content {
  position:relative; z-index:2; padding:0 6vw;
  max-width:1550px; margin:0 auto; width:100%;
}
.hero-eyebrow {
  font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red); margin-bottom:2rem; display:flex; align-items:center; gap:1rem;
  opacity:0; animation:fadeSlideUp .8s .5s ease forwards;
}
.hero-eyebrow::before { content:''; width:40px; height:1px; background:var(--red); }
.hero-title {
  font-family:var(--font-display); font-size:clamp(2.8rem,7vw,7rem);
  font-weight:800; line-height:1.0; letter-spacing:-.02em; margin-bottom:2rem;
  opacity:0; animation:fadeSlideUp .8s .7s ease forwards;
}
.hero-title .line { display:block; overflow:hidden; }
.hero-title .accent { color:var(--red); position:relative; }
.hero-title .outline-text { -webkit-text-stroke:1.5px var(--white); color:transparent; }
.hero-subtitle {
  font-size:clamp(1rem,1.3vw,1.2rem); color: white; max-width:540px;
  line-height:1.7; margin-bottom:3rem;
  opacity:0; animation:fadeSlideUp .8s .9s ease forwards;
}
.hero-actions {
  display:flex; gap:1.5rem; align-items:center;
  opacity:0; animation:fadeSlideUp .8s 1.1s ease forwards;
}
.hero-scroll {
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeSlideUp .8s 1.5s ease forwards;
}
.hero-scroll span { font-family:var(--font-mono); font-size:.9rem; letter-spacing:.3em; text-transform:uppercase; color:var(--white); }
.scroll-line { width:1px; height:40px; background:var(--grey-dark); position:relative; overflow:hidden; }
.scroll-line::after {
  content:''; position:absolute; top:-100%; width:100%; height:100%; background:var(--red);
  animation:scrollPulse 2s ease infinite;
}
@keyframes scrollPulse { 0%{top:-100%} 100%{top:100%} }
.hero-stats {
  position:absolute; right:6vw; bottom:15vh; z-index:2;
  display:flex; flex-direction:column; gap:2rem;
  opacity:0; animation:fadeSlideUp .8s 1.3s ease forwards;
}
.hero-stat { text-align:right; }
.hero-stat-num { font-family:var(--font-display); font-size:2.5rem; font-weight:800; color:var(--red); line-height:1; }
.hero-stat-label { font-family:var(--font-mono); font-size:.9rem; letter-spacing:.2em; text-transform:uppercase; color: white; }
.hero-mouse-gradient {
  position:absolute; width:600px; height:600px;
  background:radial-gradient(circle, rgba(217,26,33,0.06) 0%, transparent 60%);
  border-radius:50%; pointer-events:none; z-index:1;
  transform:translate(-50%,-50%); transition:left .3s ease, top .3s ease;
}
@media(max-width:768px){ .hero-stats{display:none} .hero-content{padding:0 1.5rem} .hero-mouse-gradient{display:none} }

/* ═══════════════════════════════════════════════════
   HOME PAGE — ABOUT SECTION
   ═══════════════════════════════════════════════════ */
.about-section { padding:10rem 6vw; position:relative; overflow:hidden; }
.about-inner { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.about-eyebrow { font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase; color:var(--red); margin-bottom:2rem; }
.about-heading { font-family:var(--font-display); font-size:clamp(2.5rem,5vw,4.5rem); font-weight:800; line-height:1.05; margin-bottom:2.5rem; }
.about-text { font-size:1.05rem; color:var(--grey); line-height:1.8; max-width:480px; }
.about-right { position:relative; display:flex; justify-content:center; }
.about-visual { width:100%; max-width:500px; aspect-ratio:3/4; position:relative; }
.about-visual-frame { position:absolute; inset:0; border:1px solid var(--grey-dark); transform:translate(20px,20px); }
.about-visual-box {
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--dark-surf) 0%, var(--dark-alt) 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.about-visual-box .code-rain { font-family:var(--font-mono); font-size:.6rem; color:rgba(0,255,136,.15); position:absolute; inset:0; padding:1rem; line-height:1.8; word-break:break-all; overflow:hidden; }
.about-visual-box .big-number { font-family:var(--font-display); font-size:12rem; font-weight:800; color:transparent; -webkit-text-stroke:1px rgba(0,255,136,.2); position:relative; z-index:1; }
@media(max-width:900px){ .about-inner{grid-template-columns:1fr;gap:3rem} .about-section{padding:5rem 1.5rem} .about-right{order:-1} }

/* ═══════════════════════════════════════════════════
   HOME PAGE — SOLUTIONS GRID
   ═══════════════════════════════════════════════════ */
.solutions-section { padding:8rem 6vw; background:var(--dark-alt); position:relative; }
.solutions-header { max-width:1400px; margin:0 auto 5rem; }
.solutions-header-eyebrow { font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase; color:var(--red); margin-bottom:1.5rem; }
.solutions-header-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.5rem); font-weight:800; }
.solutions-grid { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--grey-dark); }
.solution-card {
  padding:3rem 2rem; border-right:1px solid var(--grey-dark);
  position:relative; overflow:hidden; cursor:pointer; transition:background .4s;
}
.solution-card:last-child { border-right:none; }
.solution-card::before {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, transparent 0%, var(--red-glow) 100%);
  transition:height .5s ease;
}
.solution-card:hover::before { height:100%; }
.solution-card:hover { background:rgba(217,26,33,.02); }
.solution-number { font-family:var(--font-mono); font-size:.7rem; color:var(--red); letter-spacing:.15em; margin-bottom:2rem; }
.solution-icon { width:48px; height:48px; margin-bottom:2rem; position:relative; }
.solution-icon svg { width:100%; height:100%; stroke:var(--red); fill:none; stroke-width:1.5; }
.solution-title { font-family:var(--font-display); font-size:1.5rem; font-weight:700; margin-bottom:1.5rem; transition:color .3s; }
.solution-card:hover .solution-title { color:var(--red); }
.solution-desc { font-size:.9rem; color:var(--grey); line-height:1.7; position:relative; z-index:1; }
@media(max-width:1100px){ .solutions-grid{grid-template-columns:repeat(2,1fr)} .solution-card:nth-child(2){border-right:none} .solution-card:nth-child(1),.solution-card:nth-child(2){border-bottom:1px solid var(--grey-dark)} }
@media(max-width:600px){ .solutions-grid{grid-template-columns:1fr} .solution-card{border-right:none;border-bottom:1px solid var(--grey-dark)} .solution-card:last-child{border-bottom:none} .solutions-section{padding:5rem 1.5rem} }

/* ═══════════════════════════════════════════════════
   HOME PAGE — PARALLAX BAND
   ═══════════════════════════════════════════════════ */
.parallax-band { height:60vh; min-height:400px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.parallax-bg {
  position:absolute; inset:-20%;
  background:
    linear-gradient(135deg, rgba(217,26,33,.1) 0%, transparent 40%),
    linear-gradient(225deg, rgba(255,51,68,.05) 0%, transparent 40%),
    radial-gradient(circle at 30% 50%, var(--dark-surf) 0%, var(--dark) 70%);
  will-change:transform;
}
.parallax-content { position:relative; z-index:2; text-align:center; padding:0 2rem; }
.parallax-text { font-size:clamp(1.1rem,1.8vw,1.4rem); color:var(--grey); max-width:700px; margin:0 auto; line-height:1.8; }
.parallax-text em { color:var(--red); font-style:normal; font-weight:600; }
.parallax-deco { position:absolute; width:200px; height:1px; background:var(--red); opacity:.2; }
.parallax-deco.top-left { top:20%; left:-50px; transform:rotate(-30deg); }
.parallax-deco.bottom-right { bottom:20%; right:-50px; transform:rotate(-30deg); }

/* ═══════════════════════════════════════════════════
   HOME PAGE — SERVICES PREVIEW
   ═══════════════════════════════════════════════════ */
.services-section { padding:10rem 6vw; position:relative; }
.services-inner { max-width:1400px; margin:0 auto; }
.services-header { margin-bottom:5rem; }
.services-eyebrow { font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase; color:var(--red); margin-bottom:1.5rem; }
.services-title { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.5rem); font-weight:800; max-width:650px; }
.services-row { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.service-block {
  padding:3rem 2.5rem; border:1px solid var(--grey-dark);
  position:relative; transition:border-color .4s, transform .4s; overflow:hidden;
}
.service-block::after { content:''; position:absolute; top:0; left:0; width:0; height:3px; background:var(--red); transition:width .4s ease; }
.service-block:hover::after { width:100%; }
.service-block:hover { border-color:var(--red); transform:translateY(-4px); }
.service-block-label { font-family:var(--font-mono); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); margin-bottom:1.5rem; }
.service-block-title { font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-bottom:1.5rem; }
.service-block-text { font-size:.95rem; color:var(--white); line-height:1.7; }
.service-block-arrow { margin-top:2rem; width:40px; height:40px; border:1px solid var(--grey-dark); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.service-block:hover .service-block-arrow { border-color:var(--red); background:var(--red); }
.service-block-arrow svg { width:16px; height:16px; stroke:var(--grey); fill:none; stroke-width:2; transition:stroke .3s; }
.service-block:hover .service-block-arrow svg { stroke:var(--dark); }
@media(max-width:900px){ .services-row{grid-template-columns:1fr} .services-section{padding:5rem 1.5rem} }

/* ═══════════════════════════════════════════════════
   MISC / UTILITIES
   ═══════════════════════════════════════════════════ */
.section-divider { width:100%; height:1px; background:var(--grey-dark); }
.counter { display:inline-block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── ANIMATIONS ───────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
.glitch-hover { position:relative; }
.glitch-hover:hover { animation:glitchText .3s ease; }
@keyframes glitchText {
  0%   { transform:translate(0); }
  20%  { transform:translate(-2px,2px); }
  40%  { transform:translate(2px,-1px); }
  60%  { transform:translate(-1px,-2px); }
  80%  { transform:translate(1px,1px); }
  100% { transform:translate(0); }
}

/* ── HOME-SPECIFIC STYLES ─────────────────────────── */

/* HERO */
.hero {
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden; background:var(--dark);
}
.hero-video-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, rgba(217,26,33,.1) 0%, transparent 50%), var(--dark);
}
.hero-video-bg video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; }
.hero-grid-overlay {
  position:absolute; inset:0; z-index:1;
  background-image:linear-gradient(rgba(255,0,36,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,36,.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
}
.hero-mouse-gradient {
  position:absolute; width:700px; height:700px;
  background:radial-gradient(circle, rgba(217,26,33,.07) 0%, transparent 60%);
  border-radius:50%; pointer-events:none; z-index:1;
  transform:translate(-50%,-50%); transition:left .3s ease, top .3s ease;
}
/* Animated corner brackets */
.hero-corner-tl, .hero-corner-br {
  position:absolute; width:60px; height:60px; z-index:2; opacity:.4;
}
.hero-corner-tl { top:10vh; left:6vw; border-top:1.5px solid var(--red); border-left:1.5px solid var(--red); }
.hero-corner-br { bottom:15vh; right:6vw; border-bottom:1.5px solid var(--red); border-right:1.5px solid var(--red); }
.hero-content {
  position:relative; z-index:2; padding:0 6vw;
  max-width:1550px; margin:0 auto; width:100%;
}
.hero-eyebrow {
  font-family:var(--font-mono); font-size:1.2rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--red); margin-bottom:2rem; display:flex; align-items:center; gap:1rem;
  opacity:0; animation:fadeUp .6s .4s ease forwards;
}
.hero-eyebrow::before { content:''; width:40px; height:1px; background:var(--red); }
.hero-title {
  font-family:var(--font-display); font-size:clamp(3.5rem,9vw,10rem);
  font-weight:800; line-height:.9; letter-spacing:-.03em; margin-bottom:2.5rem;
  opacity:0; animation:fadeUp .9s .6s ease forwards;
}
.hero-title .line { display:block; overflow:visible; }
.hero-title .outline { -webkit-text-stroke:2px var(--white); color:transparent; }
.hero-title .red { color:var(--red); }
.hero-sub {
  font-size:clamp(1rem,1.4vw,1.2rem); color: white; max-width:520px;
  line-height:1.8; margin-bottom:3rem;
  opacity:0; animation:fadeUp .8s .8s ease forwards;
}
.hero-actions { display:flex; gap:1.5rem; align-items:center; opacity:0; animation:fadeUp .8s 1s ease forwards; }
.hero-stats {
  position:absolute; right:6vw; bottom:20vh; z-index:2;
  display:flex; flex-direction:column; gap:2.5rem; text-align:right;
  opacity:0; animation:fadeUp .8s 1.2s ease forwards;
}
.h-stat-num { font-family:var(--font-display); font-size:3rem; font-weight:800; color:var(--red); line-height:1; }
.h-stat-lbl { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color: white; }
.hero-scroll {
  position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  opacity:0; animation:fadeUp .6s 1.5s ease forwards;
}
.hero-scroll span { font-family:var(--font-mono); font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; color: white; }
.scroll-line { width:1px; height:40px; background:rgba(255,255,255,.1); overflow:hidden; position:relative; }
.scroll-line::after { content:''; position:absolute; top:-100%; width:100%; height:100%; background:var(--red); animation:scrollPulse 2s ease infinite; box-shadow:0 0 8px var(--red); }
@keyframes scrollPulse{0%{top:-100%}100%{top:100%}}
@media(max-width:900px){.hero-stats{display:none}.hero{justify-content:flex-end;padding-bottom:4rem}.hero-content{padding:0 1.5rem}}

/* ── SOLUTIONS TABS SECTION ─── */
.solutions-tabs-section {
  background:var(--light); color:var(--ink); padding:9rem 6vw;
  border-top:3px solid var(--red);
}
.solutions-tabs-inner { max-width:1400px; margin:0 auto; }
.tabs-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; align-items:start; margin-top:4rem; }
.tab-nav { display:flex; flex-direction:column; gap:0; border:1px solid var(--border-light); }
.tab-btn {
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  padding:1.5rem 2rem; text-align:left; color:var(--ink-muted);
  border:none; border-bottom:1px solid var(--border-light); background:transparent;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; transition:all .3s; position:relative;
}
.tab-btn:last-child { border-bottom:none; }
.tab-btn::before { content:''; position:absolute; left:0; top:0; width:0; height:100%; background:var(--red); transition:width .3s; z-index:0; }
.tab-btn.active { color:var(--white); background:var(--ink); }
.tab-btn.active::before { width:4px; }
.tab-btn:hover:not(.active) { background:var(--light-surf); color:var(--ink); }
.tab-num { font-family:var(--font-mono); font-size:.65rem; color:var(--red); position:relative; z-index:1; }
.tab-btn-text { position:relative; z-index:1; }
.tab-arrow { font-size:.8rem; opacity:.4; position:relative; z-index:1; transition:transform .3s; }
.tab-btn.active .tab-arrow { opacity:1; transform:translateX(4px); }
.tab-panels {}
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.tab-panel-img { width:100%; aspect-ratio:4/3; object-fit:cover; margin-bottom:2rem; }
.tab-panel-heading { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--ink); margin-bottom:1rem; }
.tab-panel-text { font-size:.95rem; color:var(--ink-mid); line-height:1.8; margin-bottom:1.8rem; }
@media(max-width:900px){ .tabs-layout{grid-template-columns:1fr;gap:3rem} .solutions-tabs-section{padding:5rem 1.5rem} }

/* ── ABOUT / PROBLEM SOLVING ─── */
.about-section {
  padding:9rem 6vw; position:relative; overflow:hidden; background:var(--dark);
}
/* Full-bleed rain canvas behind everything */
#rainCanvas {
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0; pointer-events:none;
}
/* Dark gradient overlay so text stays readable */
.about-rain-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 90% at 20% 50%, rgba(10,10,10,.82) 0%, rgba(10,10,10,.55) 60%, transparent 100%),
    linear-gradient(to right, rgba(10,10,10,.75) 0%, rgba(10,10,10,.2) 55%, rgba(10,10,10,.65) 100%);
}
.about-inner {
  max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr;
  gap:8rem; align-items:center; position:relative; z-index:2;
}
/* Right side: giant ghost CCS lettering over the rain */
.about-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:480px; }
.about-ccs-ghost {
  font-family:var(--font-display); font-size:clamp(8rem,16vw,18rem); font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(217,26,33,.35);
  user-select:none; letter-spacing:-.04em;
  text-shadow: 0 0 80px rgba(217,26,33,.08);
  animation: ghostPulse 4s ease-in-out infinite;
}
@keyframes ghostPulse {
  0%,100% { -webkit-text-stroke-color: rgba(217,26,33,.35); }
  50%      { -webkit-text-stroke-color: rgba(217,26,33,.65); }
}
@media(max-width:900px){
  .about-inner{grid-template-columns:1fr;gap:1rem}
  .about-section{padding:5rem 1.5rem}
  .about-visual{min-height:200px;order:-1}
  .about-ccs-ghost{font-size:clamp(6rem,24vw,10rem)}
}

/* ── SERVICES PREVIEW ─── */
.services-preview {
  background:var(--light-alt); color:var(--ink); padding:9rem 6vw;
  border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light);
}
.services-preview-inner { max-width:1400px; margin:0 auto; }
.services-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:4rem; }
.service-preview-card {
  position:relative; overflow:hidden; aspect-ratio:3/4; display:block; color:inherit;
}
.service-preview-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s; filter:grayscale(20%); }
.service-preview-card:hover img { transform:scale(1.04); filter:grayscale(0%); }
.sp-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.3) 55%, transparent 80%);
  transition:background .4s;
}
.service-preview-card:hover .sp-overlay { background:linear-gradient(to top, rgba(10,10,10,.97) 0%, rgba(10,10,10,.5) 60%, rgba(217,26,33,.1) 100%); }
.sp-body { position:absolute; bottom:0; left:0; right:0; padding:2.5rem; }
.sp-tag { font-family:var(--font-mono); font-size:.95rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:.6rem; }
.sp-title { font-family:var(--font-display); font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:.8rem; }
.sp-desc { font-size:.82rem; color:rgba(255,255,255,.65); line-height:1.65; max-height:0; overflow:hidden; transition:max-height .4s,opacity .4s; opacity:0; }
.service-preview-card:hover .sp-desc { max-height:100px; opacity:1; }
@media(max-width:900px){ .services-preview-grid{grid-template-columns:1fr;} .service-preview-card{aspect-ratio:16/9;} .services-preview{padding:5rem 1.5rem} }


/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero-standalone {
  position: relative;
  height: 100vh;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5vw 8vh;
  z-index: 10;
  overflow: hidden;
}

.hero-standalone .section-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 14rem);
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-light);
}

.hero-heading span {
  display: block;
}

.hero-heading .accent {
  color: var(--accent);
}

.hero-tagline {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  max-width: 380px;
}

.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  animation: bounce 2.2s ease-in-out infinite;
}

.scroll-indicator svg {
  width: 18px;
  height: 18px;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ─── Hidden video element ──────────────────────────────────────────────────── */
#src-video {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

/* ─── Canvas ────────────────────────────────────────────────────────────────── */
.canvas-wrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
}

#canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Dark Overlay ──────────────────────────────────────────────────────────── */
#dark-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.92);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ─── Marquee ───────────────────────────────────────────────────────────────── */
.marquee-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.marquee-text {
  font-family: var(--font-display);
  font-size: 12vw;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  line-height: 1.1;
  will-change: transform;
}

/* ─── Scroll Container ──────────────────────────────────────────────────────── */
#scroll-container {
  position: relative;
  height: 900vh;
  z-index: 4;
}

/* ─── Scroll Sections (base) ────────────────────────────────────────────────── */
.scroll-section {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.scroll-section.is-visible {
  pointer-events: auto;
}

.section-content {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

.section-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.section-label {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-light);
}

.section-body {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--muted);
  max-width: 28ch;
}

.section-note {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(240, 237, 232, 0.28);
}

/* Side alignment — text occupies outer 40% zones */
.align-left  { padding-left: 5vw;  padding-right: 55vw; }
.align-right { padding-left: 55vw; padding-right: 5vw;  }
.align-left  .section-inner,
.align-right .section-inner { max-width: 40vw; }

/* ─── Stats Section ─────────────────────────────────────────────────────────── */
.section-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 6vw;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.5vw, 5rem);
  line-height: 1;
  color: #fff;
}

.stat-suffix {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.stat-label {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.4);
}

/* ─── CTA Section ───────────────────────────────────────────────────────────── */
.section-cta .section-inner {
  gap: 1.1rem;
}

.cta-button {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.85rem 2rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  width: fit-content;
  transition: opacity 0.2s, transform 0.18s;
}

.cta-button:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}

/* ─── Mobile: ≤ 768px ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  nav { display: none; }

  .site-header { padding: 1rem 1.25rem; }

  /* Hero */
  .hero-standalone { padding: 0 5vw 6vh; }
  .hero-heading    { font-size: clamp(3.5rem, 18vw, 7rem); }

  /* Scroll container shorter on mobile */
  #scroll-container { height: 620vh; }

  /* Collapse side alignment to full-width with dark backdrop */
  .align-left,
  .align-right {
    padding: 0 5vw;
    align-items: flex-end;
    padding-bottom: 12vw;
  }

  .align-left  .section-inner,
  .align-right .section-inner {
    max-width: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem 1.25rem;
    border-left: 2px solid var(--accent);
  }

  .section-body { max-width: 100%; }

  /* Stats: 2-col grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 420px;
  }

  /* Marquee smaller */
  .marquee-text { font-size: 18vw; }
}

@media (max-width: 480px) {
  .hero-heading { font-size: clamp(3rem, 20vw, 5rem); }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .stat-number { font-size: clamp(2.2rem, 10vw, 3.5rem); }
}

.terminal-section {
  position: relative;
}

.terminal-section::before {
  content: '';
  backdrop-filter: blur(4px);
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8); /* dark overlay */
  z-index: 0;
}

.terminal-inner {
  position: relative;
  z-index: 1;
}

.site-footer img[alt="Chicago Coding Systems Logo"] {
  display: block;
  width: 220px;
  height: auto;        /* never clip the bottom */
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast; /* sharper on Chrome */
}

/* === TECHIE CARD HOVER === */
.type-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(180,180,180,0.2);
  border-radius: 4px;
  background: #0a0a0f;
  transition: border-color 0.3s;
}

/* Animated corner brackets */
.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.corner-tl { top: 6px; left: 6px; border-top: 2px solid #d91a21; border-left: 2px solid #d91a21; }
.corner-tr { top: 6px; right: 6px; border-top: 2px solid #d91a21; border-right: 2px solid #d91a21; }
.corner-bl { bottom: 6px; left: 6px; border-bottom: 2px solid #d91a21; border-left: 2px solid #d91a21; }
.corner-br { bottom: 6px; right: 6px; border-bottom: 2px solid #d91a21; border-right: 2px solid #d91a21; }

/* Traveling scanline */
.scanline {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.4), transparent);
  top: -4px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.2s;
}

/* Bottom loading bar */
.data-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: #d91a21;
  width: 0;
  box-shadow: 0 0 6px #d91a21;
}

/* Pulsing status dot */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00ff88;
  margin-right: 6px;
}

/* Hex readout line */
.hex-label {
  font-family: monospace;
  font-size: 9px;
  color: rgba(0,255,136,0.5);
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.3s 0.1s;
}

/* === HOVER STATES === */
.type-card:hover { border-color: rgba(217,26,33,0.5); }
.type-card:hover .type-img img { filter: grayscale(0%) brightness(0.85); transform: scale(1.04); }
.type-card:hover .corner { opacity: 1; }
.type-card:hover .scanline { opacity: 1; animation: scan 1.2s linear 2 forwards; }
.type-card:hover .type-arrow svg { transform: translateX(4px); }
.type-card:hover .status-dot { animation: pulse 1s ease-in-out infinite; }
.type-card:hover .data-bar { animation: barload 0.6s ease-out forwards; }
.type-card:hover .type-num { animation: flicker 0.08s steps(1) 3; }
.type-card:hover .hex-label { opacity: 1; }

@keyframes scan { 0% { top: -4px; } 100% { top: calc(100% + 4px); } }
@keyframes pulse { 0%,100% { opacity:1; box-shadow: 0 0 4px #00ff88; } 50% { opacity:0.3; } }
@keyframes barload { 0% { width: 0; } 100% { width: 100%; } }
@keyframes flicker { 0%,100% { opacity:0.8; } 50% { opacity:0.2; } }