:root {
  --red: #c8102e;
  --red-h: #e01030;
  --red-10: rgba(200,16,46,.10);
  --red-20: rgba(200,16,46,.20);
  --red-30: rgba(200,16,46,.30);

  /* Light theme */
  --bg:     #f9f8fd;
  --bg2:    #ffffff;
  --bg3:    #f1eef9;
  --bg4:    #e8e3f5;
  --card:   #ffffff;
  --bdr:    rgba(0,0,0,.08);
  --bdr2:   rgba(0,0,0,.05);
  --txt:    #0d0920;
  --txt2:   #3c2f60;
  --txt3:   #7a6a99;
  --txt4:   #b8a8d0;
  --nav-bg: rgba(255,255,255,.94);
  --hero-ov:rgba(5,2,14,.72);
  --sh1: 0 1px 8px rgba(0,0,0,.06);
  --sh2: 0 4px 24px rgba(0,0,0,.09);
  --sh3: 0 12px 48px rgba(0,0,0,.13);
  --shr: 0 6px 28px rgba(200,16,46,.28);

  --H: 'Syne', sans-serif;
  --B: 'Inter', sans-serif;
  --S: 'Playfair Display', serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --r1: 8px; --r2: 14px; --r3: 20px; --r4: 28px;
  --nav-h: 70px;
}

[data-theme="dark"] {
  --bg:     #070410;
  --bg2:    #0f0c1e;
  --bg3:    #151028;
  --bg4:    #1c1835;
  --card:   #151028;
  --bdr:    rgba(255,255,255,.08);
  --bdr2:   rgba(255,255,255,.04);
  --txt:    #f0ecff;
  --txt2:   #c0b5e0;
  --txt3:   #7a6ea0;
  --txt4:   #3a3060;
  --nav-bg: rgba(7,4,16,.94);
  --hero-ov:rgba(5,2,14,.78);
  --sh1: 0 1px 8px rgba(0,0,0,.35);
  --sh2: 0 4px 24px rgba(0,0,0,.45);
  --sh3: 0 12px 48px rgba(0,0,0,.55);
}
body.menu-open{
  overflow:hidden;
}

/* ============================================================
   RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
  
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background .35s, color .35s;
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }
::selection { background: var(--red); color: #fff; }

/* ============================================================
   CURSOR  (desktop only)
============================================================ */
.c-dot, .c-ring {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%,-50%);
}
.c-dot  { width: 7px; height: 7px; background: var(--red); }
.c-ring {
  width: 36px; height: 36px;
  border: 1.5px solid rgba(200,16,46,.4);
  transition: width .28s var(--spring), height .28s var(--spring), border-color .2s;
}
.c-ring.big { width: 56px; height: 56px; border-color: var(--red); background: rgba(200,16,46,.05); }
@media (pointer: coarse) { .c-dot, .c-ring { display: none; } }

/* ============================================================
   LOADER
============================================================ */
#loader {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  transition: opacity .6s, visibility .6s;
}
#loader.gone { opacity: 0; visibility: hidden; }
.ld-row { display: flex; align-items: center; gap: .9rem; }
.ld-img { width: 44px; height: 51px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(200,16,46,.5)); }
.ld-name { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 21px; font-weight: 800; letter-spacing: 3px; color: var(--txt); }
.ld-name span { color: var(--red); }
.ld-bar-wrap { width: 160px; height: 2px; background: var(--bdr); border-radius: 1px; overflow: hidden; }
.ld-bar { height: 100%; width: 0; background: var(--red); animation: ld 1.4s var(--ease) forwards; }
@keyframes ld { to { width: 100%; } }

/* ============================================================
   ★★★  NAVBAR — FIXED, MOBILE-FIRST  ★★★
============================================================ */
*{
  box-sizing:border-box;
}

html,body{
  overflow-x:hidden;
  width:100%;
}
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdr2);
  transition: box-shadow .3s, height .3s;
}
#nav.scrolled { box-shadow: 0 4px 24px rgba(200,16,46,.08); }

/* inner row: logo | links | actions */
.nav-row{
  max-width:1280px;
  margin:0 auto;
  height:100%;
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  width:100%;
}

/* Logo */
.nav-logo{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  min-width:0;
  flex:1;
}
.nav-logo img {
  width: 36px; height: 82px; object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(200,16,46,.4));
  transition: filter .3s, transform .3s;
}
.nav-logo:hover img { filter: drop-shadow(0 0 16px rgba(200,16,46,.65)); transform: scale(1.06); }
.nav-logo-text{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--txt);
  white-space:nowrap;
}
/* Mobile navbar logo center */
@media (max-width:768px){

  .nav-row{
    position:relative;
  }

/* Mobile navbar logo center */
@media (max-width:768px){

  .nav-row{
    position:relative;
  }


  .nav-logo-text{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    flex:none;
    justify-content:center;
    font-size:15px;
    text-align:center;
  }

}

  .nav-logo-text{
    font-size:15px;
    text-align:center;
  }

}
.nav-logo-text span { color: var(--red); }

/* Desktop links — hidden on mobile */
.nav-links {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 100px;
  padding: 4px;
}
.nav-links a {
  display: block;
  font-size: 13px; font-weight: 500; color: var(--txt3);
  padding: .4rem .85rem; border-radius: 100px; cursor: pointer;
  transition: all .2s; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--red); background: var(--bg2); font-weight: 600;
}

/* Desktop right actions */
.nav-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
}
/* Theme toggle */
.theme-btn {
  width: 42px; height: 22px;
  background: var(--bg4); border: 1px solid var(--bdr);
  border-radius: 11px; position: relative; cursor: pointer;
  transition: background .3s; flex-shrink: 0;
}
.theme-btn::after {
  content: '☀️';
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg2); font-size: 10px; line-height: 16px; text-align: center;
  transition: transform .32s var(--spring);
}
[data-theme="dark"] .theme-btn::after { transform: translateX(20px); content: '🌙'; }

/* CTA button */
.nav-cta {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 13px; font-weight: 600;
  color: #fff; background: var(--red);
  padding: .5rem 1.25rem; border-radius: 100px;
  box-shadow: var(--shr); transition: all .22s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--red-h); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(200,16,46,.4); }

/* Hamburger — visible on mobile only */
.ham-btn {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 8px; flex-shrink: 0;
}
.ham-btn span {
  display: block; width: 22px; height: 2px;
  background: var(--txt); border-radius: 2px; transition: all .3s;
}
.ham-btn.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ham-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile drawer ── */
.mob-drawer{
  position:fixed;
  top:var(--nav-h);
  left:0;
  width:100%;
  height:calc(100vh - var(--nav-h));
  background:var(--nav-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  z-index:999;
  overflow-y:auto;

  display:flex;
  flex-direction:column;

  padding:1rem;
  gap:.4rem;

  transform:translateX(100%);
  transition:transform .35s ease;
}

.mob-drawer.open{
  transform:translateX(0);
}
@media (max-width:768px){

  #nav{
    height:72px;
  }

  .nav-row{
    padding:0 .9rem;
  }

  .nav-logo img{
    width:32px;
    height:38px;
  }

  .nav-logo-text{
    font-size:15px;
  }

  .theme-btn{
    width:40px;
    height:22px;
  }

  .ham-btn{
    width:42px;
    height:42px;
  }

}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

.mob-drawer a {
  font-size: 16px; font-weight: 600;
  color: var(--txt2); padding: .9rem 1rem;
  border-radius: var(--r2); cursor: pointer;
  transition: all .2s; border: 1px solid transparent;
  display: block;
}
.mob-drawer a:hover { color: var(--red); background: var(--red-10); border-color: var(--red-20); }
.mob-drawer .mob-sep { height: 1px; background: var(--bdr2); margin: .5rem 0; }
.mob-drawer .mob-cta {
  margin-top: .5rem; text-align: center;
  background: var(--red); color: #fff; font-weight: 700;
  padding: 1rem; border-radius: var(--r2);
}
.mob-drawer .mob-cta:hover { background: var(--red-h); border-color: transparent; }

/* Mobile theme toggle inside drawer */
.mob-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem;
  border: 1px solid var(--bdr2); border-radius: var(--r2);
  margin-bottom: .25rem;
}
.mob-theme-label { font-size: 15px; font-weight: 600; color: var(--txt2); }

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .ham-btn   { display: flex; }
}
@media (min-width: 1025px) {
  .mob-drawer { display: none !important; }
  .ham-btn    { display: none; }
}

/* ============================================================
   PAGE SYSTEM
============================================================ */
.pg { display: none; }
.pg.on { display: block; animation: pgIn .45s var(--ease); }
@keyframes pgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   LAYOUT HELPERS
============================================================ */
.wrap {
  max-width: 1280px; margin: 0 auto;
  padding-left: clamp(1.1rem, 4vw, 2.5rem);
  padding-right: clamp(1.1rem, 4vw, 2.5rem);
}
.sec { padding-top: clamp(4rem, 7vw, 8rem); padding-bottom: clamp(4rem, 7vw, 8rem); }
.center { text-align: center; }

/* Typography */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--red); margin-bottom: 1.1rem;
}
.eyebrow::before, .eyebrow::after { content: ''; display: block; width: 16px; height: 1px; background: var(--red); opacity: .6; }
.center .eyebrow { justify-content: center; }

.h1 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(46px, 8vw, 116px); font-weight: 800; line-height: .91; letter-spacing: -1.5px; }
.h2 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(32px, 4.5vw, 66px); font-weight: 800; line-height: .95; letter-spacing: -.5px; }
.h3 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(20px, 2.5vw, 32px); font-weight: 700; line-height: 1.1; }
.sub { font-size: clamp(14.5px, 1.8vw, 17px); color: var(--txt3); line-height: 1.85; max-width: 560px; }
.center .sub { margin-left: auto; margin-right: auto; }
.red { color: var(--red); }
.italic { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; }

/* Dividers */
.div-red  { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,16,46,.3), transparent); }
.div-line { height: 1px; background: var(--bdr2); }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: 600; font-size: 14px;
  border-radius: 100px; padding: .85rem 1.9rem;
  cursor: pointer; transition: all .24s var(--spring);
  text-decoration: none; border: none; white-space: nowrap; line-height: 1;
}
.btn-red  { background: var(--red); color: #fff; box-shadow: var(--shr); }
.btn-red:hover  { background: var(--red-h); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(200,16,46,.42); }
.btn-out  { background: transparent; color: var(--red); border: 1.5px solid var(--red); }
.btn-out:hover  { background: var(--red); color: #fff; transform: translateY(-2px); box-shadow: var(--shr); }
.btn-wht  { background: #fff; color: var(--red); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.btn-wht:hover  { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.2); }
.btn-gho  { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.btn-gho:hover  { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.6); }
.btn-lg   { padding: .95rem 2.2rem; font-size: 15px; }
.btn-sm   { padding: .5rem 1.25rem; font-size: 13px; }
.btn-full { width: 100%; }

/* Chip / tag */
.chip {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  padding: .25rem .72rem; border-radius: 100px;
  background: var(--red-10); color: var(--red); border: 1px solid var(--red-20);
}

/* ============================================================
   REVEAL ANIMATIONS
============================================================ */
.rv   { opacity: 0; transform: translateY(36px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.rv-l { opacity: 0; transform: translateX(-40px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.rv-r { opacity: 0; transform: translateX(40px);  transition: opacity .65s var(--ease), transform .65s var(--ease); }
.rv.in, .rv-l.in, .rv-r.in { opacity: 1; transform: none; }
.d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}
.d4{transition-delay:.28s} .d5{transition-delay:.35s} .d6{transition-delay:.42s}

/* ============================================================
   TICKER
============================================================ */
.ticker { background: var(--red); overflow: hidden; white-space: nowrap; padding: .62rem 0; }
.ticker-tr { display: inline-flex; animation: tick 30s linear infinite; }
.ti { display: inline-flex; align-items: center; gap: 2.5rem; padding: 0 2rem; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.88); }
.ti::after { content: '✦'; font-size: 8px; opacity: .5; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   HERO
============================================================ */
#hero{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  padding:
    calc(var(--nav-h) + 30px)
    1rem
    3rem;
}
.hero-bg{
  position:absolute;
  inset:0;

  background:
    url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80')
    center center/cover no-repeat;

  transform:scale(1.05);
  will-change:transform;
}
.hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(5,2,14,.88) 0%, rgba(5,2,14,.62) 55%, rgba(200,16,46,.12) 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(200,16,46,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(200,16,46,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 25%, transparent 72%);
}
#cvs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-inner{
  position:relative;
  z-index:2;

  width:100%;
  max-width:900px;

  margin:auto;
}

.hero-pill {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: 11.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.14);
  padding: .5rem 1.3rem; border-radius: 100px;
  background: rgba(255,255,255,.05); backdrop-filter: blur(10px);
  margin-bottom: 1.75rem;
  opacity: 0; animation: fadeUp .8s .3s forwards;
}
.hero-pill .dot {
  width: 6px; height: 6px; background: var(--red); border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.65)}60%{box-shadow:0 0 0 7px rgba(200,16,46,0)} }

.hero-h1{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  font-size:clamp(42px,12vw,124px);

  font-weight:800;
  line-height:.95;

  letter-spacing:-1.5px;

  color:#fff;

  margin-bottom:.7rem;

  word-break:break-word;

  opacity:0;
  animation:fadeUp .9s .44s forwards;
}
.hero-h1 .red    { color: var(--red); }
.hero-h1 .it     { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 400; font-size: .72em; letter-spacing: 0; }
.hero-sub{
  font-size:clamp(14px,4vw,18px);

  color:rgba(255,255,255,.68);

  max-width:640px;

  margin:1.2rem auto;

  line-height:1.7;

  padding:0 .3rem;

  opacity:0;
  animation:fadeUp .9s .58s forwards;
}
.hero-btns{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:.8rem;

  flex-wrap:wrap;

  width:100%;

  opacity:0;
  animation:fadeUp .9s .72s forwards;
}
.hero-stats{
  display:flex;
  justify-content:center;
  align-items:center;

  flex-wrap:wrap;

  gap:1.2rem;

  width:100%;

  border-top:1px solid rgba(255,255,255,.1);

  margin-top:2.5rem;
  padding-top:1.5rem;

  position:relative;
  z-index:2;

  opacity:0;
  animation:fadeUp .9s .88s forwards;
}
.hstat{
  text-align:center;

  padding:0 1rem;

  min-width:110px;

  border-right:1px solid rgba(255,255,255,.08);
}

.hstat:last-child{
  border-right:none;
}
@media (max-width:768px){

  #hero{
    padding:
      calc(var(--nav-h) + 20px)
      1rem
      2.5rem;
  }

  .hero-pill{
    font-size:10px;
    letter-spacing:1.5px;

    padding:.45rem 1rem;

    margin-bottom:1.2rem;
  }

  .hero-h1{
    font-size:clamp(40px,14vw,72px);

    line-height:1;

    letter-spacing:-1px;
  }

  .hero-sub{
    font-size:14px;

    line-height:1.65;

    margin-top:1rem;
  }

  .hero-btns{
    flex-direction:column;

    width:100%;

    margin-top:1.4rem;
  }

  .hero-btns a,
  .hero-btns button{
    width:100%;
    max-width:320px;
  }

  .hero-stats{
    gap:1rem;

    margin-top:2rem;
  }

  .hstat{
    width:45%;

    border-right:none;

    padding:.5rem;
  }

  .hstat-n{
    font-size:30px;
  }

  .hstat-l{
    font-size:10px;
    letter-spacing:1px;
  }

  .scroll-cue{
    bottom:1rem;
  }

  .scroll-line{
    height:34px;
  }

}
@media (max-width:480px){

  .hero-h1{
    font-size:36px;
  }

  .hero-sub{
    font-size:13.5px;
  }

  .hstat{
    width:100%;
  }

}
.hstat-n { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(30px,5vw,56px); font-weight: 800; color: #fff; line-height: 1; }
.hstat-n span { color: var(--red); }
.hstat-l { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.38); margin-top: .3rem; }
.scroll-cue {
  position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  cursor: pointer; opacity: 0; animation: fadeUp .8s 1.1s forwards;
}
.scroll-line { width: 1px; height: 46px; background: linear-gradient(to bottom, var(--red), transparent); animation: sb 2s ease infinite; }
.scroll-txt  { font-size: 9.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.3); }
@keyframes sb { 0%{transform:scaleY(0);transform-origin:top;opacity:0}50%{opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0} }
@keyframes fadeUp { from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none} }

/* ============================================================
   CLIENTS BAR
============================================================ */
#clients { padding: 3.5rem 0; background: var(--bg2); border-bottom: 1px solid var(--bdr2); }
.clients-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--txt4); margin-bottom: 1.75rem; }
.clients-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.cl { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(14px,1.8vw,18px); font-weight: 800; letter-spacing: 1.5px; color: var(--txt4); transition: color .25s; cursor: default; }
.cl:hover { color: var(--red); }

/* ============================================================
   SERVICES
============================================================ */
#services { background: var(--bg); }
.svc-head { margin-bottom: clamp(2rem,4vw,3.5rem); }
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.svc-card {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  overflow: hidden; transition: transform .38s var(--ease), box-shadow .38s, border-color .38s;
  box-shadow: var(--sh1); cursor: default; position: relative;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 22px 56px rgba(200,16,46,.11), var(--sh3); border-color: rgba(200,16,46,.22); }
.svc-img  { width: 100%; height: 185px; object-fit: cover; transition: transform .55s var(--ease); }
.svc-card:hover .svc-img { transform: scale(1.06); }
.svc-body { padding: 1.65rem; text-align: center; }
.svc-icon {
  width: 50px; height: 50px; background: var(--red-10); border-radius: var(--r2);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 1.1rem;
  border: 1px solid var(--red-20); transition: all .32s var(--spring);
}
.svc-card:hover .svc-icon { background: var(--red); transform: rotate(8deg) scale(1.1); }
.svc-name { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 21px; font-weight: 700; color: var(--txt); margin-bottom: .55rem; }
.svc-desc { font-size: 13.5px; color: var(--txt3); line-height: 1.82; margin-bottom: 1.25rem; }
.svc-chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.svc-num  { position: absolute; top: .85rem; right: 1.1rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 46px; font-weight: 800; color: var(--red); opacity: .07; line-height: 1; transition: opacity .3s; }
.svc-card:hover .svc-num { opacity: .13; }

/* ============================================================
   ABOUT
============================================================ */
#about { background: var(--bg2); }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.about-imgs { position: relative; height: clamp(340px,48vw,540px); }
.ab-main { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r4); box-shadow: var(--sh3); }
.ab-fl {
  position: absolute; border-radius: var(--r3);
  border: 4px solid var(--bg2); box-shadow: 0 14px 44px rgba(200,16,46,.2);
  object-fit: cover; transition: transform .4s var(--spring);
}
.ab-fl:hover { transform: scale(1.04) rotate(-1.5deg); }
.ab-fl.a { width: clamp(130px,20%,200px); height: clamp(150px,24%,240px); top: -22px; left: -18px; }
.ab-fl.b { width: clamp(110px,17%,172px); height: clamp(132px,20%,208px); bottom: -18px; right: -18px; }
.ab-badge {
  position: absolute; bottom: 52px; left: -16px;
  background: var(--red); border-radius: var(--r2);
  padding: 1.3rem 1.5rem; text-align: center;
  box-shadow: 0 12px 36px rgba(200,16,46,.42); z-index: 2;
}
.ab-num   { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(32px,5vw,48px); font-weight: 800; color: #fff; line-height: 1; }
.ab-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.75); }
.about-txt .eyebrow { justify-content: flex-start; }
.about-txt .eyebrow::before { display: none; }
.about-txt h2 { margin-bottom: 1.3rem; }
.about-txt p  { font-size: 15px; color: var(--txt3); line-height: 1.96; margin-bottom: 1.1rem; }
.af-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.65rem 0; }
.af {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .95rem 1.1rem; background: var(--bg3);
  border: 1px solid var(--bdr); border-radius: var(--r2); transition: all .28s;
}
.af:hover { background: var(--red-10); border-color: var(--red-20); transform: translateX(4px); }
.af-ic { width: 36px; height: 36px; border-radius: 9px; background: var(--red-10); border: 1px solid var(--red-20); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.af-t { font-weight: 700; font-size: 13px; color: var(--txt); margin-bottom: .12rem; }
.af-s { font-size: 12px; color: var(--txt3); line-height: 1.5; }
.metrics {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 1px;
  background: var(--bdr); border-radius: var(--r3); overflow: hidden;
  margin-top: clamp(3rem,5vw,5rem); box-shadow: var(--sh2);
}
.met { background: var(--card); padding: clamp(1.25rem,2.5vw,2.25rem) 1rem; text-align: center; transition: background .28s; }
.met:hover { background: var(--red-10); }
.met-v { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(38px,5vw,62px); font-weight: 800; color: var(--red); line-height: 1; margin-bottom: .3rem; }
.met-l { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); }

/* ============================================================
   PROCESS
============================================================ */
#process { background: var(--bg3); }
.proc-vis { position: relative; border-radius: var(--r4); overflow: hidden; margin-bottom: clamp(2rem,4vw,4rem); box-shadow: var(--sh3); }
.proc-img { width: 100%; height: clamp(240px,38vw,440px); object-fit: cover; display: block; filter: brightness(.48); }
.proc-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem,5vw,4rem); max-width: 540px; }
.proc-txt h2 { color: #fff; margin-bottom: .9rem; }
.proc-txt p  { color: rgba(255,255,255,.7); font-size: clamp(13.5px,1.6vw,16.5px); line-height: 1.82; }
.steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.25rem; position: relative; }
.steps::before { content: ''; position: absolute; top: 42px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,var(--red-20),rgba(200,16,46,.5),var(--red-20),transparent); z-index: 0; }
.step { text-align: center; position: relative; z-index: 1; }
.step-dot {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--bdr);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0 auto 1.3rem; font-size: 22px; box-shadow: var(--sh1);
  transition: all .4s var(--spring); position: relative;
}
.step-n { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 10px; font-weight: 800; color: var(--red); letter-spacing: 1px; margin-top: 2px; }
.step:hover .step-dot { background: var(--red); border-color: var(--red); transform: scale(1.18); box-shadow: 0 12px 38px rgba(200,16,46,.44); }
.step:hover .step-n { color: #fff; }
.step-t { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(14px,1.5vw,17px); font-weight: 700; color: var(--txt); margin-bottom: .45rem; }
.step-d { font-size: 12.5px; color: var(--txt3); line-height: 1.72; }

/* ============================================================
   WORK
============================================================ */
#work { background: var(--bg2); }
.wf-row { display: flex; gap: .45rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.wf { font-size: 13px; font-weight: 600; padding: .48rem 1.1rem; border-radius: 100px; border: 1.5px solid var(--bdr); background: transparent; color: var(--txt3); cursor: pointer; transition: all .2s; }
.wf:hover, .wf.on { background: var(--red); border-color: var(--red); color: #fff; }
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.wi { border-radius: var(--r3); overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--sh1); }
.wi.span2 { grid-column: span 2; }
.wi-img { width: 100%; height: 300px; object-fit: cover; display: block; transition: transform .65s var(--ease), filter .4s; }
.wi.span2 .wi-img { height: 400px; }
.wi:hover .wi-img { transform: scale(1.06); filter: brightness(.65); }
.wi-lay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,2,14,.94) 0%, rgba(5,2,14,.18) 55%, transparent 100%); opacity: .65; transition: opacity .3s; }
.wi:hover .wi-lay { opacity: 1; }
.wi-inf { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.65rem; transform: translateY(4px); transition: transform .28s; }
.wi:hover .wi-inf { transform: translateY(0); }
.wi-cat  { font-size: 10px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); margin-bottom: .4rem; }
.wi-title{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: clamp(16px,2vw,23px); font-weight: 700; color: #fff; margin-bottom: .6rem; line-height: 1.1; }
.wi-link { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.6); transition: all .2s; }
.wi:hover .wi-link { color: #fff; gap: .65rem; }

/* ============================================================
   TECH
============================================================ */
#tech-h { background: var(--bg3); }
.tech-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: .9rem; }
.tc {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r2);
  padding: 1.55rem .9rem; text-align: center;
  transition: all .33s var(--spring); box-shadow: var(--sh1); cursor: default;
  position: relative; overflow: hidden;
}
.tc::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at center,var(--red-10),transparent); opacity:0; transition:opacity .3s; }
.tc:hover { transform: translateY(-7px) scale(1.04); border-color: rgba(200,16,46,.28); box-shadow: 0 14px 38px rgba(200,16,46,.12); }
.tc:hover::before { opacity: 1; }
.te { font-size: 28px; display: block; margin-bottom: .5rem; transition: transform .38s var(--spring); }
.tc:hover .te { transform: scale(1.3) rotate(5deg); }
.tl { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--txt3); transition: color .2s; }
.tc:hover .tl { color: var(--red); }

/* ============================================================
   TESTIMONIALS
============================================================ */
#testimonials { background: var(--bg2); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.tcard {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  padding: 2.1rem; position: relative; transition: all .38s; box-shadow: var(--sh1);
}
.tcard::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--red),var(--red-h)); border-radius:var(--r3) var(--r3) 0 0; opacity:0; transition:opacity .3s; }
.tcard:hover { transform: translateY(-7px); box-shadow: 0 22px 56px rgba(200,16,46,.1); }
.tcard:hover::before { opacity: 1; }
.t-stars { color: var(--red); font-size: 14px; letter-spacing: 2px; margin-bottom: 1.1rem; }
.t-q { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 72px; font-weight: 800; color: var(--red); opacity: .1; line-height: .6; margin-bottom: .8rem; }
.t-text { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-style: italic; font-size: 15px; color: var(--txt3); line-height: 1.9; margin-bottom: 1.65rem; }
.t-auth { display: flex; align-items: center; gap: .9rem; }
.t-av { width: 46px; height: 46px; border-radius: 50%; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; border: 2px solid var(--red-20); }
.t-name { font-weight: 700; font-size: 14.5px; color: var(--txt); }
.t-role { font-size: 12px; color: var(--txt4); margin-top: .1rem; }

/* ============================================================
   INDUSTRIES
============================================================ */
#industries { background: var(--bg); }
.ind-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; }
.ic {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r2);
  padding: 1.75rem 1.3rem; text-align: center;
  transition: all .38s var(--ease); box-shadow: var(--sh1);
}
.ic:hover { transform: translateY(-7px); border-color: rgba(200,16,46,.22); box-shadow: 0 18px 48px rgba(200,16,46,.1); }
.ic-e  { font-size: 34px; display: block; margin-bottom: .85rem; transition: transform .48s var(--spring); }
.ic:hover .ic-e { transform: scale(1.28) rotate(-5deg); }
.ic-n  { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 18px; font-weight: 700; color: var(--txt); margin-bottom: .4rem; }
.ic-d  { font-size: 12.5px; color: var(--txt3); line-height: 1.68; }

/* ============================================================
   PRICING
============================================================ */
#pricing { background: var(--bg3); }
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; align-items: start; }
.pc {
  background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r4);
  padding: 2.25rem 2rem; position: relative; transition: all .38s; box-shadow: var(--sh1);
}
.pc:hover:not(.feat) { transform: translateY(-7px); box-shadow: var(--sh3); }
.pc.feat { background: var(--red); border-color: var(--red); box-shadow: 0 18px 56px rgba(200,16,46,.38); }
.pc-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #fff; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: .3rem 1rem; border-radius: 100px; box-shadow: var(--sh2); white-space: nowrap; }
.pc-plan { font-size: 10.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 1.1rem; }
.pc:not(.feat) .pc-plan { color: var(--txt3); }
.pc.feat .pc-plan  { color: rgba(255,255,255,.7); }
.pc-amt { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(42px,5vw,60px); font-weight: 800; line-height: 1; margin-bottom: .2rem; }
.pc:not(.feat) .pc-amt { color: var(--txt); }
.pc.feat .pc-amt   { color: #fff; }
.pc-amt sup { font-size: 24px; vertical-align: top; margin-top: 9px; display: inline-block; }
.pc-per { font-size: 12.5px; margin-bottom: 1.75rem; }
.pc:not(.feat) .pc-per { color: var(--txt4); }
.pc.feat .pc-per   { color: rgba(255,255,255,.6); }
.pc-feats { list-style: none; display: flex; flex-direction: column; gap: .78rem; margin-bottom: 2rem; }
.pc-feats li { font-size: 13.5px; display: flex; align-items: flex-start; gap: .7rem; line-height: 1.5; }
.pc:not(.feat) .pc-feats li { color: var(--txt3); }
.pc.feat .pc-feats li { color: rgba(255,255,255,.88); }
.pc-feats li::before { content: '✓'; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; margin-top: 1px; }
.pc:not(.feat) .pc-feats li::before { background: var(--red-10); color: var(--red); }
.pc.feat .pc-feats li::before { background: rgba(255,255,255,.18); color: #fff; }

/* ============================================================
   CTA BAND
============================================================ */
#cta-band { position: relative; overflow: hidden; }
.cta-bg  { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80') center/cover; }
.cta-ov  { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,16,46,.94), rgba(110,5,18,.97)); }
.cta-in  { position: relative; z-index: 2; }
.cta-h   { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(36px,6vw,78px); font-weight: 800; color: #fff; line-height: .92; letter-spacing: -1px; margin-bottom: 1.3rem; }
.cta-sub { font-size: clamp(14.5px,1.7vw,17px); color: rgba(255,255,255,.72); max-width: 500px; margin: 0 auto 2.25rem; line-height: 1.85; }
.cta-btns{ display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   BLOG
============================================================ */
#blog-h  { background: var(--bg); }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.bc {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  overflow: hidden; transition: all .38s; box-shadow: var(--sh1); cursor: pointer;
}
.bc:hover { transform: translateY(-9px); box-shadow: 0 22px 56px rgba(200,16,46,.1); border-color: rgba(200,16,46,.18); }
.bc-img { width: 100%; height: 208px; object-fit: cover; transition: transform .55s var(--ease); display: block; }
.bc:hover .bc-img { transform: scale(1.06); }
.bc-body { padding: 1.6rem; }
.bc-meta { display: flex; align-items: center; gap: .65rem; margin-bottom: .72rem; }
.bc-cat  { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--red); }
.bc-date { font-size: 11.5px; color: var(--txt4); }
.bc-title{ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 20px; font-weight: 700; color: var(--txt); line-height: 1.2; margin-bottom: .65rem; transition: color .2s; }
.bc:hover .bc-title { color: var(--red); }
.bc-exc  { font-size: 13px; color: var(--txt3); line-height: 1.78; }
.bc-link { display: inline-flex; align-items: center; gap: .38rem; font-size: 12.5px; font-weight: 700; color: var(--red); margin-top: 1.1rem; transition: gap .2s; }
.bc:hover .bc-link { gap: .65rem; }

/* ============================================================
   FAQ
============================================================ */
#faq-sec { background: var(--bg2); }
.faq-wrap { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.fq {
  background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r2);
  overflow: hidden; transition: all .28s; box-shadow: var(--sh1);
}
.fq.open { border-color: rgba(200,16,46,.32); box-shadow: 0 7px 28px rgba(200,16,46,.09); }
.fq-head { padding: 1.35rem 1.55rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; }
.fq-txt  { font-weight: 700; font-size: 15px; color: var(--txt); transition: color .2s; }
.fq.open .fq-txt { color: var(--red); }
.fq-ic {
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--red-10); border: 1px solid var(--red-20);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--red); flex-shrink: 0;
  transition: all .38s var(--spring);
}
.fq.open .fq-ic { transform: rotate(45deg); background: var(--red); color: #fff; border-color: var(--red); }
.fq-ans { font-size: 14px; color: var(--txt3); line-height: 1.88; max-height: 0; overflow: hidden; padding: 0 1.55rem; transition: max-height .42s var(--ease), padding .28s; }
.fq.open .fq-ans { max-height: 280px; padding: 0 1.55rem 1.35rem; }

/* ============================================================
   CONTACT
============================================================ */
#contact-sec { background: var(--bg3); }
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.contact-img { width: 100%; height: 268px; object-fit: cover; border-radius: var(--r4); box-shadow: var(--sh3); margin-bottom: 1.75rem; }
.ci-list { display: flex; flex-direction: column; gap: .85rem; }
.ci {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.2rem; background: var(--bg2);
  border: 1px solid var(--bdr); border-radius: var(--r2); transition: all .24s;
}
.ci:hover { border-color: rgba(200,16,46,.22); background: var(--red-10); transform: translateX(4px); }
.ci-icon { width: 42px; height: 42px; border-radius: var(--r1); background: var(--red); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ci-lbl  { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt4); margin-bottom: .18rem; }
.ci-val  { font-weight: 600; font-size: 14.5px; color: var(--txt); }
.cf {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r4); padding: clamp(1.75rem,4vw,2.75rem); box-shadow: var(--sh2);
}
.cf h3 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(28px,3.5vw,40px); font-weight: 800; line-height: 1; margin-bottom: 1.65rem; color: var(--txt); }
.cf h3 span { color: var(--red); }
.fg { display: flex; flex-direction: column; gap: .42rem; margin-bottom: .85rem; }
.fl { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); }
.fi,.fs,.ft {
  background: var(--bg3); border: 1.5px solid var(--bdr); color: var(--txt);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 14px; padding: .84rem 1rem;
  border-radius: var(--r1); outline: none; transition: all .2s; width: 100%; resize: none;
}
.fi:focus,.fs:focus,.ft:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.08); background: var(--bg2); }
.fs option { background: var(--bg); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }

/* ============================================================
   FOOTER
============================================================ */
footer { background: var(--bg2); border-top: 1px solid var(--bdr2); }
.foot-top {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(3rem,5vw,5rem) clamp(1.1rem,4vw,2.5rem) 3rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(1.5rem,3vw,3.5rem);
}
.foot-logo { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; cursor: pointer; }
.foot-logo img { width: 34px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(200,16,46,.28)); }
/* Center footer logo */
/* Footer logo text below image */
.foot-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.15rem;
  width:100%;
}

.foot-logo img{
  width: 100%;
  height:70px;
  object-fit:contain;
}

.foot-logo-t{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
              'Helvetica Neue', sans-serif;
  font-size:14px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--txt);
}
@media (max-width:768px){

  .foot-logo-t{
    font-size:12px;
    letter-spacing:.5px;
  }

}
.foot-logo-t span { color: var(--red); }
.foot-desc { font-size: 13.5px; color: var(--txt3); line-height: 1.88; max-width: 265px; margin-bottom: 1.55rem; }
.foot-soc { display: flex; gap: .55rem; }
.fsb {
  width: 36px; height: 36px; border-radius: 9px; background: var(--bg3);
  border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: var(--txt3); cursor: pointer; transition: all .24s var(--spring);
}
.fsb:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.foot-nl { margin-top: 1.55rem; }
.foot-nl h6 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt); margin-bottom: .7rem; }
.nl-row { display: flex; border-radius: var(--r1); overflow: hidden; border: 1.5px solid var(--bdr); background: var(--card); }
.nl-in  { flex: 1; background: transparent; border: none; color: var(--txt); font-size: 13px; padding: .72rem 1rem; outline: none; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; min-width: 0; }
.nl-btn { background: var(--red); color: #fff; border: none; padding: 0 1rem; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.nl-btn:hover { background: var(--red-h); }
.foot-col h6 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt); margin-bottom: 1.3rem; }
.flinks { display: flex; flex-direction: column; gap: .62rem; }
.flinks a { font-size: 13.5px; color: var(--txt3); cursor: pointer; transition: color .2s; }
.flinks a:hover { color: var(--red); }
.foot-bot {
  border-top: 1px solid var(--bdr2); max-width: 1280px; margin: 0 auto;
  padding: 1.55rem clamp(1.1rem,4vw,2.5rem);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
}
.fcopy { font-size: 12.5px; color: var(--txt4); }
.fcopy b { color: var(--red); }
.fmini { display: flex; gap: 1.5rem; }
.fmini a { font-size: 12px; color: var(--txt4); cursor: pointer; transition: color .2s; }
.fmini a:hover { color: var(--red); }

/* ============================================================
   PAGE HERO (shared across extra pages)
============================================================ */
.ph {
  min-height: clamp(55vh, 60vh, 70vh);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; text-align: center;
  padding: calc(var(--nav-h) + clamp(2rem,5vw,4rem)) clamp(1.1rem,4vw,2.5rem) clamp(3rem,5vw,4.5rem);
}
.ph-bg  { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ph-ov  { position: absolute; inset: 0; background: var(--hero-ov); }
.ph-in  { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.ph-ey  { display: inline-flex; align-items: center; gap: .55rem; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1rem; }
.ph-ey::before,.ph-ey::after { content:''; display:block; width:14px; height:1px; background:rgba(255,255,255,.3); }
.ph-h { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(40px,8vw,90px); font-weight: 800; line-height: .91; color: #fff; margin-bottom: 1.1rem; letter-spacing: -1.5px; }
.ph-h .r { color: var(--red); }
.ph-s { font-size: clamp(13.5px,1.8vw,17px); color: rgba(255,255,255,.6); line-height: 1.86; max-width: 540px; margin: 0 auto; }

/* ============================================================
   CASE STUDIES EXTRA PAGE
============================================================ */
.case-list { display: flex; flex-direction: column; gap: 2.25rem; }
.ccase {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r4);
  overflow: hidden; box-shadow: var(--sh2); transition: all .38s;
}
.ccase:hover { transform: translateY(-4px); box-shadow: 0 26px 64px rgba(200,16,46,.1); border-color: rgba(200,16,46,.18); }
.ccase-g { display: grid; grid-template-columns: 400px 1fr; align-items: stretch; }
.cimg-w  { position: relative; overflow: hidden; }
.c-img   { width: 100%; height: 100%; min-height: 320px; object-fit: cover; transition: transform .55s var(--ease); display: block; }
.ccase:hover .c-img { transform: scale(1.05); }
.c-tag   { position: absolute; top: 1.25rem; left: 1.25rem; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: .35rem .82rem; border-radius: 100px; }
.c-body  { padding: clamp(1.75rem,3.5vw,2.75rem); }
.c-client{ font-size: 10.5px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--red); margin-bottom: .65rem; }
.c-title { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(21px,2.8vw,34px); font-weight: 800; color: var(--txt); margin-bottom: 1rem; line-height: 1.05; letter-spacing: -.3px; }
.c-desc  { font-size: 14.5px; color: var(--txt3); line-height: 1.92; margin-bottom: 1.75rem; }
.c-res   { display: flex; gap: 2rem; flex-wrap: wrap; border-top: 1px solid var(--bdr); padding-top: 1.55rem; }
.cr-n    { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(28px,4vw,38px); font-weight: 800; color: var(--red); line-height: 1; }
.cr-l    { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt3); }

/* ============================================================
   TECH PAGE — feature cards + stack box
============================================================ */
.tf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 3.5rem; }
.tfc {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  padding: 2.1rem; box-shadow: var(--sh1); transition: all .38s; position: relative; overflow: hidden;
}
.tfc::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--red),var(--red-h)); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease); }
.tfc:hover::after { transform: scaleX(1); }
.tfc:hover { transform: translateY(-5px); box-shadow: 0 18px 46px rgba(200,16,46,.1); }
.tf-ic { font-size: 40px; margin-bottom: 1.1rem; display: block; }
.tf-t  { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(20px,2.5vw,26px); font-weight: 800; color: var(--txt); margin-bottom: .72rem; }
.tf-d  { font-size: 14px; color: var(--txt3); line-height: 1.88; }
.stk-box { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r4); padding: clamp(1.75rem,3.5vw,3rem); box-shadow: var(--sh2); }
.stk-sec { margin-bottom: 2rem; }
.stk-sec:last-child { margin-bottom: 0; }
.stk-h { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--txt4); margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--bdr); }
.stk-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.st { display: inline-block; font-size: 12.5px; font-weight: 600; padding: .48rem 1.05rem; border-radius: 100px; border: 1.5px solid var(--bdr); color: var(--txt3); transition: all .2s; cursor: default; }
.st:hover { border-color: var(--red); color: var(--red); background: var(--red-10); }

/* ============================================================
   TEAM PAGE
============================================================ */
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.tcard2 {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  overflow: hidden; transition: all .38s; box-shadow: var(--sh1);
}
.tcard2:hover { transform: translateY(-9px); box-shadow: 0 26px 64px rgba(200,16,46,.11); border-color: rgba(200,16,46,.18); }
.t-pic { width: 100%; height: 255px; object-fit: cover; object-position: top; transition: transform .55s var(--ease); display: block; }
.tcard2:hover .t-pic { transform: scale(1.05); }
.t-body { padding: 1.4rem; }
.t-name { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 20px; font-weight: 800; color: var(--txt); margin-bottom: .2rem; }
.t-role { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: .65rem; }
.t-bio  { font-size: 12.5px; color: var(--txt3); line-height: 1.68; }
.t-soc  { display: flex; gap: .45rem; margin-top: .85rem; }
.tsb { width: 28px; height: 28px; border-radius: 7px; background: var(--bg3); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: var(--txt3); cursor: pointer; transition: all .22s; }
.tsb:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* ============================================================
   CAREERS PAGE
============================================================ */
.perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; margin-bottom: 4rem; }
.perk {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  padding: 1.85rem 1.5rem; text-align: center; transition: all .32s; box-shadow: var(--sh1);
}
.perk:hover { border-color: rgba(200,16,46,.2); transform: translateY(-5px); box-shadow: 0 18px 46px rgba(200,16,46,.09); }
.pk-ic { font-size: 36px; display: block; margin-bottom: .75rem; transition: transform .42s var(--spring); }
.perk:hover .pk-ic { transform: scale(1.18) rotate(-5deg); }
.pk-t  { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 16.5px; font-weight: 800; color: var(--txt); margin-bottom: .4rem; }
.pk-d  { font-size: 13px; color: var(--txt3); line-height: 1.68; }
.jobs  { display: flex; flex-direction: column; gap: .78rem; }
.job {
  background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r3);
  padding: 1.55rem 1.75rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; transition: all .28s; box-shadow: var(--sh1); cursor: pointer; flex-wrap: wrap;
}
.job:hover { border-color: rgba(200,16,46,.25); transform: translateX(5px); box-shadow: 0 7px 28px rgba(200,16,46,.09); }
.job-dept  { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: .28rem; }
.job-title { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: clamp(17px,2vw,21px); font-weight: 800; color: var(--txt); margin-bottom: .28rem; }
.job-meta  { font-size: 12.5px; color: var(--txt3); display: flex; gap: 1rem; flex-wrap: wrap; }
.job-side  { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; flex-shrink: 0; }
.job-chips { display: flex; gap: .38rem; flex-wrap: wrap; }

/* ============================================================
   BLOG/INSIGHTS PAGE
============================================================ */
.ins-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.ins-feat {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  overflow: hidden; cursor: pointer; transition: all .32s; box-shadow: var(--sh1);
}
.ins-feat:hover { transform: translateY(-4px); box-shadow: 0 18px 46px rgba(200,16,46,.1); }
.ins-feat-img { width: 100%; height: 285px; object-fit: cover; transition: transform .55s var(--ease); display: block; }
.ins-feat:hover .ins-feat-img { transform: scale(1.05); }
.ins-side {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--bdr); border-radius: var(--r3); overflow: hidden; border: 1px solid var(--bdr);
}
.ins-mini { background: var(--card); padding: 1.3rem; cursor: pointer; transition: all .22s; display: flex; gap: .85rem; align-items: flex-start; }
.ins-mini:hover { background: var(--red-10); }
.ins-mn { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 34px; font-weight: 800; color: var(--red); opacity: .35; line-height: 1; flex-shrink: 0; transition: opacity .2s; }
.ins-mini:hover .ins-mn { opacity: .75; }
.ins-mt { font-weight: 700; font-size: 13.5px; color: var(--txt); margin-bottom: .26rem; line-height: 1.38; }
.ins-mm { font-size: 11.5px; color: var(--txt4); }
.ins-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }

/* ============================================================
   AWARDS PAGE
============================================================ */
.aw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.aw {
  background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r3);
  overflow: hidden; transition: all .38s; box-shadow: var(--sh1);
}
.aw:hover { transform: translateY(-7px); box-shadow: 0 22px 54px rgba(200,16,46,.1); border-color: rgba(200,16,46,.18); }
.aw-img { width: 100%; height: 168px; object-fit: cover; filter: grayscale(.3); transition: all .38s; display: block; }
.aw:hover .aw-img { filter: grayscale(0); }
.aw-body { padding: 1.65rem; }
.aw-yr { font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: .42rem; }
.aw-n  { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 20px; font-weight: 800; color: var(--txt); margin-bottom: .38rem; }
.aw-org{ font-size: 13px; color: var(--txt3); line-height: 1.5; }
.p-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 4.5rem; }
.pc2 { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r2); padding: 1.85rem 1.4rem; text-align: center; transition: all .28s; box-shadow: var(--sh1); }
.pc2:hover { border-color: rgba(200,16,46,.2); transform: translateY(-4px); }
.pc2-logo { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;; font-size: 19px; font-weight: 800; letter-spacing: 2px; color: var(--txt4); margin-bottom: .65rem; transition: color .2s; }
.pc2:hover .pc2-logo { color: var(--red); }
.pc2-desc  { font-size: 12px; color: var(--txt4); line-height: 1.58; }

/* ============================================================
   ★★★  RESPONSIVE BREAKPOINTS — MOBILE FIRST  ★★★
============================================================ */

/* 1200px — 4-col grids → 2-col */
@media (max-width: 1200px) {
  .svc-grid  { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .tech-grid { grid-template-columns: repeat(4,1fr); }
  .foot-top  { grid-template-columns: 1fr 1fr; }
  .ccase-g   { grid-template-columns: 340px 1fr; }
}

/* 1024px — heavy adjustments */
@media (max-width: 1024px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-imgs   { height: clamp(280px,50vw,420px); }
  .ab-fl        { display: none; }
  .ab-badge     { display: none; }
  .contact-layout{ grid-template-columns: 1fr; }
  .faq-wrap     { max-width: 100%; }
  .tf-grid      { grid-template-columns: 1fr; }
  .ins-hero     { grid-template-columns: 1fr; }
  .ins-side     { flex-direction: row; overflow-x: auto; }
  .steps        { grid-template-columns: repeat(3,1fr); }
  .steps::before{ display: none; }
  .metrics      { grid-template-columns: repeat(2,1fr); }
  .price-grid   { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .p-grid       { grid-template-columns: repeat(2,1fr); }
  .ccase-g      { grid-template-columns: 1fr; }
  .c-img        { height: 240px; }
}

/* 768px — single column mobile */
@media (max-width: 768px) {
  :root { --nav-h: 62px; }

  /* NAV: show ham, hide desktop items */
  .nav-links  { display: none !important; }
  .nav-actions{ display: none !important; }
  .ham-btn    { display: flex !important; }

  /* stacks */
  .svc-grid, .work-grid, .testi-grid, .blog-grid,
  .ind-grid,  .perks,    .aw-grid,    .ins-grid,
  .team-grid, .tf-grid   { grid-template-columns: 1fr; }

  .wi.span2  { grid-column: span 1; }

  .tech-grid { grid-template-columns: repeat(3,1fr); }
  .metrics   { grid-template-columns: repeat(2,1fr); }
  .foot-top  { grid-template-columns: 1fr; padding: 2.5rem clamp(1.1rem,4vw,2rem) 2rem; }
  .foot-bot  { flex-direction: column; text-align: center; }
  .fmini     { justify-content: center; }

  /* hero stats vertical on mobile */
  .hero-stats { flex-direction: column; gap: 1.5rem; }
  .hstat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 0 1.5rem; }
  .hstat:last-child { border-bottom: none; padding-bottom: 0; }

  .about-imgs { height: clamp(240px,60vw,360px); }
  .f-row { grid-template-columns: 1fr; }
  .cta-btns { flex-direction: column; align-items: center; }
  .steps { grid-template-columns: 1fr 1fr; }
  .price-grid { max-width: 100%; }
  .ins-side   { flex-direction: column; }

  .job { flex-direction: column; align-items: flex-start; }
  .job-side { width: 100%; }

  .p-grid { grid-template-columns: repeat(2,1fr); }
}

/* 480px — extra small */
@media (max-width: 480px) {
  .tech-grid  { grid-template-columns: repeat(2,1fr); }
  .ind-grid   { grid-template-columns: repeat(2,1fr); }
  .metrics    { grid-template-columns: 1fr 1fr; }
  .p-grid     { grid-template-columns: 1fr; }
  .steps      { grid-template-columns: 1fr; }
  .hero-h1    { letter-spacing: -1px; }
  .wf-row     { gap: .35rem; }
  .wf         { font-size: 12px; padding: .42rem .9rem; }
}




/* ============================================================
   FINAL MOBILE RESPONSIVE FIXES
   Add at END of CSS
============================================================ */

/* Prevent all horizontal overflow */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* Universal media scaling */
img,
video,
iframe{
  max-width:100%;
  height:auto;
}

/* Containers */
.wrap,
.nav-row,
.hero-inner,
.foot-top,
.foot-bot{
  width:100%;
  max-width:100%;
}

/* =========================
   MOBILE — 768px
========================= */
@media (max-width:768px){

  /* Typography */
  .h1{
    font-size:42px;
    line-height:1;
  }

  .h2{
    font-size:32px;
    line-height:1.05;
  }

  .h3{
    font-size:22px;
  }

  .sub{
    font-size:14px;
    line-height:1.7;
  }

  /* Section spacing */
  .sec{
    padding-top:4rem;
    padding-bottom:4rem;
  }

  /* Buttons */
  .btn,
  .btn-lg,
  .btn-sm{
    width:100%;
    justify-content:center;
  }

  /* HERO */
  #hero{
    min-height:auto;
    padding:
      calc(var(--nav-h) + 20px)
      1rem
      3rem;
  }

  .hero-inner{
    width:100%;
  }

  .hero-btns{
    flex-direction:column;
    align-items:center;
  }

  .hero-btns .btn{
    width:100%;
    max-width:320px;
  }

  .hero-stats{
    flex-direction:column;
    gap:1rem;
  }

  .hstat{
    width:100%;
    border:none;
    padding-bottom:1rem;
  }

  /* NAVBAR */
  .nav-row{
    gap:.5rem;
  }

  .nav-logo{
    flex:1;
    min-width:0;
  }

  .nav-logo-text{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mob-drawer{
    padding-bottom:120px;
  }

  /* GRIDS */
  .svc-grid,
  .work-grid,
  .blog-grid,
  .testi-grid,
  .team-grid,
  .price-grid,
  .aw-grid,
  .ind-grid,
  .perks,
  .ins-grid,
  .tech-grid,
  .tf-grid,
  .p-grid{
    grid-template-columns:1fr !important;
  }

  /* Cards */
  .svc-card,
  .tcard,
  .bc,
  .pc,
  .aw,
  .perk,
  .ic{
    width:100%;
  }

  /* Portfolio */
  .wi,
  .wi.span2{
    grid-column:span 1 !important;
  }

  .wi-img,
  .wi.span2 .wi-img{
    height:240px;
  }

  /* About */
  .about-layout{
    gap:2rem;
  }

  .about-imgs{
    height:300px;
  }

  .af-grid{
    grid-template-columns:1fr;
  }

  /* Metrics */
  .metrics{
    grid-template-columns:1fr 1fr;
  }

  /* Process */
  .steps{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .step-dot{
    width:72px;
    height:72px;
  }

  /* Contact */
  .contact-layout{
    gap:2rem;
  }

  .f-row{
    grid-template-columns:1fr;
  }

  /* CTA */
  .cta-btns{
    flex-direction:column;
    align-items:center;
  }

  .cta-btns .btn{
    width:100%;
    max-width:320px;
  }

  /* Footer */
  .foot-top{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .foot-desc{
    max-width:100%;
  }

  .nl-row{
    width:100%;
  }

  .foot-bot{
    flex-direction:column;
    text-align:center;
  }

  .fmini{
    flex-wrap:wrap;
    justify-content:center;
  }

  /* Tables / code blocks */
  table{
    display:block;
    overflow-x:auto;
    width:100%;
  }

  pre{
    overflow-x:auto;
  }

}

/* =========================
   EXTRA SMALL — 480px
========================= */
@media (max-width:480px){

  :root{
    --nav-h:60px;
  }

  body{
    font-size:14px;
  }

  /* Typography */
  .h1{
    font-size:34px;
  }

  .h2{
    font-size:28px;
  }

  .hero-h1{
    font-size:34px;
  }

  .hero-sub{
    font-size:13px;
  }

  /* Navbar */
  .nav-row{
    padding:0 .75rem;
  }

  .nav-logo img{
    width:28px;
    height:34px;
  }

  .nav-logo-text{
    font-size:14px;
  }

  /* Buttons */
  .btn{
    padding:.9rem 1rem;
    font-size:13px;
  }

  /* Cards spacing */
  .svc-body,
  .bc-body,
  .tcard,
  .pc,
  .cf,
  .aw-body{
    padding:1.2rem;
  }

  /* Hero stats */
  .hstat-n{
    font-size:28px;
  }

  /* Metrics */
  .metrics{
    grid-template-columns:1fr;
  }

  /* Industries */
  .ind-grid{
    grid-template-columns:1fr;
  }

  /* Tech */
  .tech-grid{
    grid-template-columns:1fr 1fr !important;
  }

  /* Footer newsletter */
  .nl-row{
    flex-direction:column;
    border:none;
    gap:.6rem;
    background:none;
  }

  .nl-in{
    border:1px solid var(--bdr);
    border-radius:10px;
  }

  .nl-btn{
    border-radius:10px;
    padding:.9rem;
  }

}

/* =========================
   ULTRA SMALL — 360px
========================= */
@media (max-width:360px){

  .hero-h1{
    font-size:30px;
  }

  .h1{
    font-size:30px;
  }

  .h2{
    font-size:24px;
  }

  .nav-logo-text{
    font-size:12px;
  }

  .btn{
    font-size:12px;
  }

  .hero-pill{
    font-size:9px;
    letter-spacing:1px;
  }

}