/*
 * Inferwise — Intelligent Automation Platform
 * style.css  v3.0
 * ─────────────────────────────────────────────────────────────

/* ═══════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  /* Brand */
  --red:         #D50000;
  --red-dk:      #AA0000;
  --red-tint:    #FDEAEA;    /* only used for icon bg & label bg */

  /* Neutrals — pure white / clean greys, zero colour cast */
  --white:       #FFFFFF;
  --surface:     #F7F8FA;    /* section alternating bg  */
  --border:      #E8EAEE;    /* card & divider borders  */
  --border-lt:   #F0F1F4;    /* very light dividers     */
  --muted:       #9199A8;    /* placeholder, label text */
  --body:        #4B5263;    /* body copy               */
  --heading:     #0C0F18;    /* headings & ink          */

  /* Layout */
  --nav-h:       68px;
  --sp:          88px;       /* section padding         */
  --sp-sm:       56px;
  --r:           12px;       /* card border-radius      */
  --r-lg:        20px;

  /* Elevation */
  --sh-xs:  0 1px 4px rgba(0,0,0,.05);
  --sh-sm:  0 2px 10px rgba(0,0,0,.07);
  --sh-md:  0 6px 24px rgba(0,0,0,.09);
  --sh-lg:  0 16px 48px rgba(0,0,0,.12);
  --sh-red: 0 6px 20px rgba(213,0,0,.24);
}

/* ═══════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; }
html                  { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  font-size:1rem; line-height:1.72;
  color:var(--body); background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Instrument Sans',sans-serif;
  font-weight:700; line-height:1.18; color:var(--heading);
  margin-bottom:.5rem;
}
p        { margin-bottom:1rem; }
a        { text-decoration:none; color:inherit; }
img      { max-width:100%; height:auto; display:block; }
ul,ol    { padding:0; margin:0; list-style:none; }
address  { font-style:normal; }

/* ═══════════════════════════════════════════════════
   3. TYPOGRAPHY SCALE
═══════════════════════════════════════════════════ */
.display-hero {
  font-family:'Instrument Sans',sans-serif;
  font-size:clamp(1.75rem,3.8vw,3.1rem);
  font-weight:800; letter-spacing:-.022em; line-height:1.15;
}
.section-title {
  font-size:clamp(1.65rem,3.2vw,2.5rem);
  font-weight:800; letter-spacing:-.018em; margin-bottom:.65rem;
}
.section-sub { font-size:1.02rem; line-height:1.78; color:var(--body); }

.label-tag {
  display:inline-block;
  font-family:'Instrument Sans',sans-serif;
  font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--red); background:var(--red-tint);
  border-radius:100px; padding:4px 13px; margin-bottom:14px;
}

/* ═══════════════════════════════════════════════════
   4. LAYOUT HELPERS
═══════════════════════════════════════════════════ */
.sp    { padding:var(--sp) 0; }
.sp-sm { padding:var(--sp-sm) 0; }
.bg-surface { background:var(--surface); }
.text-red   { color:var(--red) !important; }
.text-body  { color:var(--body); }
.text-muted { color:var(--muted); }

/* ═══════════════════════════════════════════════════
   5. BUTTONS
═══════════════════════════════════════════════════ */
/* Solid red */
.btn-red {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--red); color:#fff !important;
  font-family:'Instrument Sans',sans-serif;
  font-weight:700; font-size:.88rem; letter-spacing:.02em;
  padding:12px 26px; border-radius:100px;
  border:2px solid var(--red); cursor:pointer;
  transition:background .2s,border-color .2s,transform .18s,box-shadow .2s;
  box-shadow:var(--sh-red);
  white-space:nowrap;
}
.btn-red:hover {
  background:var(--red-dk); border-color:var(--red-dk);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(213,0,0,.32);
}

/* Outlined → fills on hover  (navbar CTA + secondary CTAs) */
.btn-outline-red {
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; color:var(--red) !important;
  font-family:'Instrument Sans',sans-serif;
  font-weight:700; font-size:.88rem;
  padding:10px 24px; border-radius:100px;
  border:2px solid var(--red); cursor:pointer;
  transition:background .2s,color .18s,transform .18s,box-shadow .2s;
  white-space:nowrap;
}
.btn-outline-red:hover {
  background:var(--red); color:#fff !important;
  transform:translateY(-2px); box-shadow:var(--sh-red);
}

/* Outlined dark (secondary on light hero) */
.btn-outline-dk {
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; color:var(--heading) !important;
  font-family:'Instrument Sans',sans-serif;
  font-weight:700; font-size:.88rem;
  padding:10px 24px; border-radius:100px;
  border:2px solid var(--border); cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.btn-outline-dk:hover {
  background:var(--heading); color:#fff !important;
  border-color:var(--heading); transform:translateY(-2px);
}

/* White (for dark/red CTA banners) */
.btn-white {
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; color:var(--red) !important;
  font-family:'Instrument Sans',sans-serif;
  font-weight:700; font-size:.88rem;
  padding:12px 26px; border-radius:100px;
  border:2px solid #fff; cursor:pointer;
  transition:all .2s; box-shadow:0 4px 16px rgba(0,0,0,.14);
  white-space:nowrap;
}
.btn-white:hover {
  background:var(--red); color:#fff !important;
  border-color:var(--red); transform:translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   6. NAVBAR  ← Mobile-first, fully tested
═══════════════════════════════════════════════════ */
#mainNav {
  height:var(--nav-h);
  background:#fff;
  border-bottom:1px solid var(--border-lt);
  box-shadow:var(--sh-xs);
  transition:box-shadow .25s, border-color .25s;
  z-index:1040;
}
#mainNav.scrolled {
  border-color:var(--border);
  box-shadow:var(--sh-sm);
}

/* Logo image */
.navbar-logo {
  height:36px; width:auto; max-width:190px;
  object-fit:contain; display:block;
}

/* Nav links */
.navbar-nav .nav-link {
  font-family:'Instrument Sans',sans-serif;
  font-size:.87rem; font-weight:600;
  color:var(--body) !important;
  padding:.55rem 1rem !important;
  border-radius:8px;
  transition:color .18s,background .18s;
  position:relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active-page {
  color:var(--heading) !important;
  background:var(--surface);
}

/* Dropdown */
.navbar-nav .dropdown-menu {
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--sh-md);
  padding:.5rem;
  min-width:200px;
}
.navbar-nav .dropdown-item {
  font-family:'Instrument Sans',sans-serif;
  font-size:.86rem; font-weight:500;
  color:var(--body); border-radius:8px;
  padding:.55rem .9rem;
  transition:background .15s, color .15s;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background:var(--red-tint); color:var(--red);
}
.navbar-nav .dropdown-divider { border-color:var(--border-lt); margin:.3rem 0; }

/* Hamburger */
.navbar-toggler {
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  transition:background .2s;
}
.navbar-toggler:focus { box-shadow:0 0 0 3px rgba(213,0,0,.18); }
.navbar-toggler:hover { background:var(--surface); }
.navbar-toggler-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230C0F18' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width:22px; height:22px;
}

/* ── Mobile expanded nav ────────────────────────────
  
──────────────────────────────────────────────────── */
@media (max-width:991.98px) {
  .navbar-collapse {
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--r);
    margin-top:8px;
    padding:.75rem;
    box-shadow:var(--sh-md);
    position:relative; z-index:100;
  }
  .navbar-nav .nav-link {
    padding:.75rem 1rem !important;
    border-radius:8px;
    font-size:.94rem;
  }

  /* ── Dropdown on mobile — inline, not floating overlay ── */
  .navbar-nav .dropdown-menu {
    /* Override Bootstrap's absolute positioning on mobile */
    position:static !important;
    float:none;
    box-shadow:none;
    border:none;
    background:var(--surface);
    border-radius:var(--r);
    margin:.25rem 0 .25rem 1rem;
    padding:.25rem;
    /* Animate open/close smoothly */
    display:block;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .navbar-nav .dropdown-menu.show {
    max-height:400px;   /* large enough for any submenu */
    opacity:1;
  }

  /* Dropdown toggle — make tap target generous */
  .navbar-nav .dropdown-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
  /* Rotate chevron when open */
  .navbar-nav .dropdown-toggle::after {
    transition:transform .25s ease;
  }
  .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
    transform:rotate(180deg);
  }

  /* Dropdown items — generous tap targets */
  .navbar-nav .dropdown-item {
    padding:.65rem .9rem;
    font-size:.92rem;
    border-radius:7px;
    min-height:44px;
    display:flex;
    align-items:center;
  }

  .nav-cta-wrap {
    border-top:1px solid var(--border-lt);
    margin-top:.5rem;
    padding-top:.75rem;
  }
  .nav-cta-wrap .btn-outline-red {
    width:100%;
    justify-content:center;
  }
}

/* ═══════════════════════════════════════════════════
   7. HERO 
═══════════════════════════════════════════════════ */
.hero-section {
  min-height:100vh;
  padding-top:var(--nav-h);
  position:relative; display:flex; align-items:center;
  overflow:hidden;
  /*
   * BACKGROUND IMAGE SLOT:
   * Uncomment and set your image path below.
   * Add a light overlay div if image is busy.
   *
   * background:
   *   linear-gradient(rgba(247,248,250,.92),rgba(247,248,250,.92)),
   *   url('../images/hero-bg.jpg') center/cover no-repeat;
   */
  background:var(--white);
}

/* Geometric dot grid — pure grey, no red */
.hero-dot-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(12,15,24,.07) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:1;
}

/* Subtle grey gradient blobs — no red tint */
.hero-blob {
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(145,153,168,.08) 0%, transparent 70%);
  animation:blob-drift 12s ease-in-out infinite alternate;
}
.hero-blob.b1 { width:560px; height:560px; top:-15%; right:-10%; }
.hero-blob.b2 { width:380px; height:380px; bottom:-10%; left:-8%;
                animation-duration:16s; animation-direction:alternate-reverse; }
@keyframes blob-drift {
  from { transform:scale(1) translateY(0); }
  to   { transform:scale(1.08) translateY(-18px); }
}

/* Decorative corner accent bar — thin red top-right */
.hero-accent-bar {
  position:absolute; top:0; right:0;
  width:220px; height:3px;
  background:linear-gradient(90deg, transparent, var(--red));
  pointer-events:none;
}

/* Hero text */
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:100px;
  padding:6px 16px;
  font-family:'Instrument Sans',sans-serif;
  font-size:.72rem; font-weight:700;
  color:var(--body); letter-spacing:.07em; text-transform:uppercase;
  margin-bottom:24px; box-shadow:var(--sh-xs);
}
.hero-badge .live-dot {
  width:7px; height:7px; background:var(--red);
  border-radius:50%; animation:blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-headline { color:var(--heading); margin-bottom:20px; }
.hero-headline .accent { color:var(--red); }
.hero-sub {
  font-size:1.06rem; line-height:1.8; color:var(--body);
  margin:0 auto 36px;
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ═══════════════════════════════════════════════════
   8. MARQUEE STRIP
═══════════════════════════════════════════════════ */
.marquee-strip {
  background:var(--surface);
  border-top:1px solid var(--border-lt);
  border-bottom:1px solid var(--border-lt);
  padding:15px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track { display:inline-flex; animation:marquee 30s linear infinite; }
.marquee-item {
  display:inline-flex; align-items:center; gap:9px;
  padding:0 32px;
  font-family:'Instrument Sans',sans-serif;
  font-size:.77rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.marquee-item i { color:var(--red); font-size:.9rem; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════════════
   9. STATS ROW
═══════════════════════════════════════════════════ */
.stats-row {
  display:flex; background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
}
.stat-cell {
  flex:1; padding:28px 16px; text-align:center;
  border-right:1px solid var(--border-lt);
  transition:background .2s;
}
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:var(--surface); }
.stat-num {
  font-family:'Instrument Sans',sans-serif;
  font-size:2rem; font-weight:800; color:var(--heading); line-height:1; margin-bottom:5px;
}
.stat-num em { color:var(--red); font-style:normal; }
.stat-label { font-size:.73rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

/* ═══════════════════════════════════════════════════
   10. FEATURE / PRODUCT CARDS
═══════════════════════════════════════════════════ */
.f-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:32px 28px; height:100%;
  position:relative; overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.f-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.f-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--border); }
.f-card:hover::before { transform:scaleX(1); }

.card-icon {
  width:48px; height:48px; background:var(--red-tint); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:var(--red); margin-bottom:18px;
  transition:background .22s, color .22s;
}
.f-card:hover .card-icon { background:var(--red); color:#fff; }
.f-card h3,.f-card h4 { font-size:1.02rem; font-weight:700; margin-bottom:8px; }
.f-card p { font-size:.9rem; line-height:1.72; color:var(--body); margin-bottom:16px; }
.card-link {
  font-family:'Instrument Sans',sans-serif; font-size:.82rem; font-weight:700;
  color:var(--red); display:inline-flex; align-items:center; gap:5px;
  transition:gap .18s;
}
.f-card:hover .card-link { gap:9px; }

/* ═══════════════════════════════════════════════════
   11. PILLAR CARDS (services)
═══════════════════════════════════════════════════ */
.pillar-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r); padding:24px 22px;
  display:flex; gap:16px; align-items:flex-start;
  transition:box-shadow .22s, transform .22s;
}
.pillar-card:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.pillar-icon {
  width:42px; height:42px; min-width:42px; border-radius:11px;
  background:var(--red-tint);
  display:flex; align-items:center; justify-content:center;
  color:var(--red); font-size:1.05rem;
}
.pillar-title { font-family:'Instrument Sans',sans-serif; font-size:.93rem; font-weight:700; color:var(--heading); margin-bottom:4px; }
.pillar-text  { font-size:.86rem; color:var(--body); line-height:1.65; margin:0; }

/* ═══════════════════════════════════════════════════
   12. CTA BANNERS (interior — keep dark/red contrast)
═══════════════════════════════════════════════════ */
.cta-dark {
  background:linear-gradient(120deg, var(--heading) 0%, #1a0505 100%);
  border-radius:var(--r-lg); padding:48px 44px;
  position:relative; overflow:hidden;
}
.cta-dark::after {
  content:''; position:absolute; top:-50px; right:-50px;
  width:260px; height:260px; border-radius:50%;
  background:rgba(213,0,0,.12); pointer-events:none;
}
.cta-dark h2,.cta-dark h3 { color:#fff; font-weight:800; margin-bottom:8px; }
.cta-dark p { color:rgba(255,255,255,.6); margin-bottom:0; }

.cta-red {
  background:linear-gradient(120deg, var(--red) 0%, var(--red-dk) 100%);
  border-radius:var(--r-lg); padding:48px 44px;
  position:relative; overflow:hidden;
}
.cta-red::before {
  content:''; position:absolute; top:-60px; right:-60px;
  width:250px; height:250px; border-radius:50%;
  background:rgba(255,255,255,.08); pointer-events:none;
}
.cta-red h2,.cta-red h3 { color:#fff; font-weight:800; margin-bottom:8px; }
.cta-red p { color:rgba(255,255,255,.72); margin-bottom:0; }

/* ═══════════════════════════════════════════════════
   13. PAGE HERO (inner pages) — white/light grey
═══════════════════════════════════════════════════ */
.page-hero {
  padding:calc(var(--nav-h) + 52px) 0 52px;
  position:relative; overflow:hidden;
  /*
   * BACKGROUND IMAGE SLOT:
   * background:
   *   linear-gradient(rgba(247,248,250,.95),rgba(247,248,250,.95)),
   *   url('../images/page-hero-bg.jpg') center/cover no-repeat;
   */
  background:var(--surface);
  border-bottom:1px solid var(--border-lt);
}
.page-hero::before {
  content:''; position:absolute; top:0; right:0;
  width:300px; height:100%;
  background:linear-gradient(90deg, transparent, rgba(213,0,0,.03));
  pointer-events:none;
}
/* Thin red accent line top-right — matches hero */
.page-hero::after {
  content:''; position:absolute; top:0; right:0;
  width:180px; height:3px;
  background:linear-gradient(90deg, transparent, var(--red));
  pointer-events:none;
}
.page-hero h1 { color:var(--heading); }
.page-hero .section-sub { color:var(--body); }

/* Breadcrumb */
.breadcrumb-nav { margin-bottom:12px; }
.breadcrumb-nav a { color:var(--muted); font-size:.8rem; transition:color .18s; }
.breadcrumb-nav a:hover { color:var(--red); }
.breadcrumb-nav .sep { margin:0 7px; color:var(--border); font-size:.72rem; }
.breadcrumb-nav .cur { color:var(--body); font-size:.8rem; }

/* ═══════════════════════════════════════════════════
   14. CONTACT FORM
═══════════════════════════════════════════════════ */
.contact-form-wrap {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:44px 40px;
  box-shadow:var(--sh-sm);
}
.form-label {
  font-family:'Instrument Sans',sans-serif;
  font-size:.8rem; font-weight:700; color:var(--heading); margin-bottom:5px;
}
.form-control,.form-select {
  border:1.5px solid var(--border); border-radius:9px;
  padding:11px 15px; font-size:.91rem; color:var(--heading);
  background:var(--surface); font-family:'DM Sans',sans-serif;
  transition:border-color .18s, box-shadow .18s;
}
.form-control:focus,.form-select:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(213,0,0,.1);
  background:var(--white); outline:none;
}
textarea.form-control { resize:none; }

/* Contact info panel — light */
.contact-info-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 32px; height:100%;
}
.contact-info-card h4 { font-size:1.35rem; color:var(--heading); font-weight:800; margin-bottom:6px; }
.contact-info-card > p { color:var(--body); margin-bottom:28px; font-size:.91rem; }
.c-row { display:flex; gap:13px; margin-bottom:18px; }
.c-icon {
  width:38px; height:38px; min-width:38px; border-radius:10px;
  background:var(--red-tint);
  display:flex; align-items:center; justify-content:center;
  color:var(--red); font-size:.95rem;
}
.c-label { font-family:'Instrument Sans',sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:2px; }
.c-val   { color:var(--heading); font-size:.9rem; line-height:1.5; }

/* ═══════════════════════════════════════════════════
   15. IMAGE PLACEHOLDER
   Replace .img-ph with a real <img> when ready.
═══════════════════════════════════════════════════ */
.img-ph {
  width:100%; border-radius:var(--r-lg);
  /*
   * BACKGROUND IMAGE SLOT:
   * background:url('../images/your-image.jpg') center/cover no-repeat;
   */
  background:var(--surface);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.img-ph .ph-icon-wrap {
  width:80px; height:80px; background:var(--red); border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:2.2rem; color:#fff;
  box-shadow:0 12px 32px rgba(213,0,0,.3);
}
.img-ph .ph-label { font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:.95rem; color:var(--heading); text-align:center; }
.img-ph .ph-sub   { font-size:.78rem; color:var(--muted); text-align:center; margin-top:4px; }
.deco-ring { position:absolute; border-radius:50%; border:2px solid rgba(213,0,0,.09); }

.float-badge {
  position:absolute; bottom:-16px; right:-14px;
  background:var(--white); border-radius:var(--r); padding:16px 20px;
  box-shadow:var(--sh-lg); border:1px solid var(--border); text-align:center;
}
.float-badge .fb-big { font-family:'Instrument Sans',sans-serif; font-size:1.75rem; font-weight:800; color:var(--red); line-height:1; }
.float-badge .fb-sm  { font-size:.72rem; color:var(--muted); margin-top:3px; }

/* ═══════════════════════════════════════════════════
   16. VALUE CHIPS
═══════════════════════════════════════════════════ */
.value-chip {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--white); border:1px solid var(--border);
  border-radius:100px; padding:7px 14px;
  font-size:.83rem; font-weight:500; color:var(--heading); margin:3px;
}
.value-chip i { color:var(--red); }

/* ═══════════════════════════════════════════════════
   17. SOCIAL ICONS  ── update href="" in HTML
═══════════════════════════════════════════════════ */
.social-row { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.soc-icon {
  width:36px; height:36px; border-radius:9px;
  background:var(--white); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--body); font-size:.92rem;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.soc-icon:hover {
  background:var(--red); border-color:var(--red);
  color:#fff !important; transform:translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   18. FOOTER
═══════════════════════════════════════════════════ */
footer {
  background:var(--surface);
  border-top:1px solid var(--border);
}
.footer-top { padding:60px 0 44px; }

.footer-logo-img {
  height:32px; width:auto; max-width:170px;
  object-fit:contain; display:block; margin-bottom:14px;
}
.footer-desc { color:var(--body); font-size:.86rem; line-height:1.75; max-width:290px; }

.footer-col-title {
  font-family:'Instrument Sans',sans-serif; font-weight:700;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.11em;
  color:var(--muted); margin-bottom:14px;
}
.footer-links li { margin-bottom:8px; }
.footer-links a  { color:var(--body); font-size:.86rem; transition:color .18s; }
.footer-links a:hover { color:var(--red); }

.footer-bottom {
  border-top:1px solid var(--border-lt); padding:18px 0;
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px;
}
.footer-bottom p   { color:var(--muted); font-size:.8rem; margin:0; }
.footer-bottom a   { color:var(--muted); font-size:.8rem; transition:color .18s; }
.footer-bottom a:hover { color:var(--red); }
.footer-legal { display:flex; gap:18px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════
   19. TSC BOX
═══════════════════════════════════════════════════ */
.tsc-box {
  /*
   * BACKGROUND IMAGE SLOT:
   * background: url('../images/tsc-bg.jpg') center/cover no-repeat;
   * Add overlay div if needed.
   */
  background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:48px 44px; position:relative; overflow:hidden;
}
.tsc-box::after {
  content:'TSC'; position:absolute; right:-6px; bottom:-24px;
  font-family:'Instrument Sans',sans-serif; font-size:8rem; font-weight:900;
  color:rgba(213,0,0,.04); line-height:1; pointer-events:none;
}

/* ═══════════════════════════════════════════════════
   20. LEGAL PAGES
═══════════════════════════════════════════════════ */
.legal-content h2 { font-size:1.25rem; margin-top:2.2rem; margin-bottom:.5rem; }
.legal-content p,.legal-content li { font-size:.93rem; line-height:1.8; color:var(--body); }
.legal-content ul { list-style:disc; padding-left:1.3rem; }
.legal-content ul li { margin-bottom:.4rem; }

/* EULA notice box */
.eula-notice {
  background:var(--red-tint); border:1px solid var(--red-mid,#F5C0C0);
  border-radius:var(--r); padding:16px 20px;
  display:flex; gap:12px; align-items:flex-start; margin-bottom:2rem;
}
.eula-notice i { color:var(--red); font-size:1.2rem; margin-top:2px; }
.eula-notice p { margin:0; font-size:.9rem; color:var(--heading); }

/* ═══════════════════════════════════════════════════
   21. SCROLL ANIMATIONS
═══════════════════════════════════════════════════ */
.fade-up    { opacity:0; transform:translateY(24px); transition:opacity .55s ease,transform .55s ease; }
.fade-left  { opacity:0; transform:translateX(-24px); transition:opacity .55s ease,transform .55s ease; }
.fade-right { opacity:0; transform:translateX(24px);  transition:opacity .55s ease,transform .55s ease; }
.fade-up.visible,.fade-left.visible,.fade-right.visible { opacity:1; transform:translate(0); }
.d1 { transition-delay:.1s !important; }
.d2 { transition-delay:.2s !important; }
.d3 { transition-delay:.3s !important; }

/* ═══════════════════════════════════════════════════
   22. RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width:1199.98px) { :root{ --sp:72px; } }
@media (max-width:991.98px)  {
  :root{ --sp:60px; --sp-sm:44px; }
  .contact-form-wrap { padding:32px 22px; }
  .cta-dark,.cta-red,.tsc-box { padding:32px 26px; }
}
@media (max-width:767.98px) {
  :root{ --sp:48px; --sp-sm:36px; }
  .stats-row { flex-direction:column; }
  .stat-cell { border-right:none; border-bottom:1px solid var(--border-lt); }
  .stat-cell:last-child { border-bottom:none; }
  .float-badge { position:static; display:inline-block; margin-top:16px; }
  .hero-actions { flex-direction:column; align-items:center; }
  .hero-actions .btn-red,
  .hero-actions .btn-outline-dk { width:100%; max-width:320px; justify-content:center; }
  .footer-top { padding:44px 0 28px; }
  /* Stack CTA banners vertically */
  .cta-dark .row,.cta-red .row { flex-direction:column; }
  .cta-dark .text-lg-end,.cta-red .text-lg-end { text-align:left !important; margin-top:16px; }
}
@media (max-width:479.98px) {
  .navbar-logo { max-width:150px; }
}

/* ═══════════════════════════════════════════════════
   23. PRINT
═══════════════════════════════════════════════════ */
@media print {
  #mainNav,footer,.marquee-strip,.hero-dot-grid,.hero-blob { display:none !important; }
  .hero-section { min-height:auto; padding:20px 0; background:none; }
}

/* ═══════════════════════════════════════════════════
   24. RETINA
═══════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
  body { -webkit-font-smoothing:antialiased; }
  .navbar-logo,.footer-logo-img { image-rendering:-webkit-optimize-contrast; }
}