/* =========================================================
   Soul Digital — AI-Powered Growth & CRM Agency
   Tokens
   Background:  #0a0a0a / #131210 (surface, warm charcoal)
   Yellow (CTA): #f5d800
   Electric blue accent: #3e7afe (sampled from logo gradient line)
   Display: Fraunces (serif, premium) | Body: Inter | Mono: JetBrains Mono
   ========================================================= */

:root{
  --bg: #0a0a0a;
  --surface: #131210;
  --surface-2: #1a1815;
  --border: #29271f;
  --border-soft: rgba(245,216,0,.14);
  --yellow: #f5d800;
  --blue: #3e7afe;
  --blue-light: #6b9bff;
  --text: #f3f1ea;
  --text-muted: #a3a095;
  --text-faint: #67645a;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --wrap: 1200px;
  --radius: 4px;
  --radius-lg: 6px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Offset anchor targets so the fixed header doesn't cover them */
section[id]{ scroll-margin-top: 108px; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Subtle film-grain texture for a premium tactile finish */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

.wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 em, h2 em, .btn em{ font-style: italic; font-weight: 500; color: var(--yellow); }

p{ margin: 0 0 1em; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===== Buttons ===== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

.btn-primary{
  background: var(--yellow);
  color: #0a0a0a;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(245,216,0,.5);
}

.btn-outline{
  background: transparent;
  border-color: rgba(163,160,149,.35);
  color: var(--text);
}
.btn-outline:hover{
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

.btn-dark{
  background: #0a0a0a;
  color: var(--yellow);
  border-color: #0a0a0a;
}
.btn-dark:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(0,0,0,.6); }

.btn-small{ padding: 10px 20px; font-size: .82rem; display:none; }

/* ===== Header ===== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245,216,0,.08);
  transition: border-color .3s ease;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 96px;
  gap: 20px;
}
.logo{
  display:flex;
  align-items:center;
  height: 100%;
}
.logo img{
  height: 62px;
  width: auto;
  display: block;
}
.footer-brand .logo img{ height: 82px; }
.main-nav{
  display:flex;
  gap: 34px;
  margin-left: auto;
  margin-right: 34px;
}
.main-nav a{
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--text-muted);
  transition: color .15s ease;
}
.main-nav a:hover{ color: var(--blue); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.nav-toggle span{
  width: 22px; height: 1.5px; background: var(--text);
}

/* ===== Hero ===== */
.hero{
  position: relative;
  padding-top: 190px;
  overflow: hidden;
  min-height: 92vh;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  /* Fallback tone so the hero still reads if the photo fails to load */
  background:
    radial-gradient(70% 60% at 70% 10%, rgba(62,122,254,.16) 0%, transparent 60%),
    radial-gradient(60% 50% at 15% 90%, rgba(245,216,0,.08) 0%, transparent 55%),
    #0a0a0a;
}
.hero-media img{
  width:100%; height:100%; object-fit: cover;
  filter: grayscale(25%) brightness(.45) contrast(1.05);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(10,10,10,.25) 0%, rgba(10,10,10,.9) 60%, rgba(10,10,10,1) 100%),
    linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.7) 40%, rgba(10,10,10,1) 100%);
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(62,122,254,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,122,254,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 20%, black 0%, transparent 75%);
}

/* Signature element: animated signal / data pulse line */
.signal-line{
  position: absolute;
  top: 152px;
  left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62,122,254,.3), transparent);
  z-index: 1;
  overflow: hidden;
}
.signal-line span{
  position:absolute;
  top:-1.5px;
  left:-15%;
  width: 15%;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--yellow), transparent);
  filter: blur(.5px);
  border-radius: 4px;
  animation: pulse-sweep 5.5s linear infinite;
}
@keyframes pulse-sweep{
  0%{ left: -15%; }
  100%{ left: 105%; }
}

.hero-inner{
  position: relative;
  z-index: 2;
  padding-top: 44px;
  padding-bottom: 84px;
  max-width: 860px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--blue);
  background: rgba(62,122,254,.07);
  border: 1px solid rgba(62,122,254,.22);
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  margin-bottom: 30px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--yellow);
  box-shadow: 0 0 8px 1px rgba(245,216,0,.8);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1;} 50%{ opacity:.25;} }

.hero h1{
  font-size: clamp(2.6rem, 5.6vw, 4.7rem);
  font-weight: 500;
  color: var(--text);
  margin-bottom: .42em;
}

.hero-sub{
  font-size: 1.15rem;
  max-width: 580px;
  color: var(--text-muted);
  margin-bottom: 2.1em;
}
.hero-cta{
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-bar{
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(245,216,0,.1);
  margin-top: auto;
}
.stat{
  padding: 28px 24px;
  border-right: 1px solid rgba(245,216,0,.1);
}
.stat:last-child{ border-right:none; }
.stat-num{
  display:block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  font-style: italic;
  color: var(--text);
}
.stat-label{
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--text-faint);
  letter-spacing: .02em;
}

/* ===== Logo strip ===== */
.logo-strip{
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
  background: var(--bg);
}
.logo-strip-label{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-faint);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.logo-row{
  display:flex;
  flex-wrap: wrap;
  gap: 38px;
}
.logo-row span{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-faint);
}

/* ===== Section shared ===== */
section{ padding: 116px 0; }
.section-eyebrow{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 16px;
}
.section-title{
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 500;
  max-width: 720px;
  color: var(--text);
  margin-bottom: 64px;
}

/* ===== Featured: Lead Gen & CRM ===== */
.feature{
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feature-top{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 84px;
}
.feature-copy{ max-width: 480px; }
.feature-title{
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: var(--text);
  margin-bottom: .55em;
}
.feature-lede{
  font-size: 1.06rem;
  margin-bottom: 1.8em;
}

/* No outer frame — the visual sits directly on the section background */
.feature-media{
  position: relative;
}
.feature-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
/* Sits under the visual so it never covers the chart */
.feature-media-badge{
  margin-top: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  background: var(--surface-2);
  border: 1px solid rgba(245,216,0,.3);
  border-radius: var(--radius);
  padding: 13px 18px;
}
.badge-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--yellow);
}
.badge-label{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
}

/* Icon point grid */
.feature-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-point{
  background: var(--surface-2);
  padding: 34px 28px;
  transition: background .2s ease, transform .2s ease;
}
.feature-point:hover{ background: #201d17; }
.feature-icon{
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid rgba(245,216,0,.28);
  background: rgba(245,216,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  margin-bottom: 22px;
}
.feature-point:nth-child(2n) .feature-icon{
  border-color: rgba(62,122,254,.3);
  background: rgba(62,122,254,.06);
  color: var(--blue);
}
.feature-icon svg{ width: 22px; height: 22px; }
.feature-point h3{
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .5em;
}
.feature-point p{
  font-size: .88rem;
  margin: 0;
}

/* ===== Services ===== */
.services{ background: var(--bg); }
.service-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-card{
  background: var(--surface);
  padding: 40px 34px;
  transition: background .2s ease;
}
.service-card:hover{ background: var(--surface-2); }
.service-icon{
  width: 42px; height:42px;
  color: var(--yellow);
  margin-bottom: 24px;
}
.service-icon svg{ width:100%; height:100%; }
.service-card h3{
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .5em;
}
.service-card p{ font-size: .92rem; margin:0; }

/* ===== Process ===== */
.process{ background: var(--surface); border-top:1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 42px;
}
.process-step{
  position: relative;
  padding-top: 32px;
  border-top: 1px solid rgba(245,216,0,.25);
}
.step-num{
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--yellow);
  display:block;
  margin-bottom: 16px;
}
.process-step h3{ color: var(--text); font-size: 1.2rem; font-weight: 500; margin-bottom: .4em; }
.process-step p{ font-size: .92rem; }

/* ===== Portfolio / carousel ===== */
.portfolio{ background: var(--bg); padding-bottom: 136px; }
.portfolio .wrap{ margin-bottom: 10px; }

.carousel{
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}
.carousel-viewport{
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.carousel-track{
  display: flex;
  gap: 20px;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.client-slide{
  flex: 0 0 calc((100% - 20px) / 2);
  min-width: 0;
}

.client-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
/* Thin accent rule that draws across on hover */
.client-card::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  transition: width .35s ease;
}
.client-card:hover{
  border-color: rgba(62,122,254,.4);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.client-card:hover::after{ width: 100%; }

.client-index{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--yellow);
  margin-bottom: 26px;
}
.client-body{
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.client-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--text);
}
.client-services{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.client-services li{
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.4;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 11px;
}
.client-visit{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-light);
  transition: gap .25s ease;
}
.client-visit svg{ width: 14px; height: 14px; }
.client-card:hover .client-visit{ gap: 11px; }


/* Controls sit above the track so they never cover a client card */
.carousel-arrow{
  position: absolute;
  top: -70px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  z-index: 3;
}
.carousel-arrow svg{ width: 20px; height:20px; }
.carousel-arrow:hover{ background: var(--yellow); color:#0a0a0a; border-color: var(--yellow); }
.carousel-arrow.prev{ right: 84px; }
.carousel-arrow.next{ right: 28px; }

.carousel-dots{
  display:flex;
  justify-content:center;
  gap: 10px;
  margin-top: 30px;
}
.carousel-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor:pointer;
  padding:0;
  transition: background .2s ease, transform .2s ease;
}
.carousel-dots button.is-active{
  background: var(--yellow);
  transform: scale(1.3);
}

/* ===== Testimonials ===== */
.testimonials{ background: var(--surface); border-top: 1px solid var(--border); }
.testimonial-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.testimonial-grid-4{
  grid-template-columns: repeat(2, 1fr);
}
.testimonial{
  margin:0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
}
.testimonial-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--blue-light);
  border: 1px solid rgba(62,122,254,.4);
  background: rgba(62,122,254,.06);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.testimonial p{
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: 26px;
}
.testimonial footer{ display:flex; flex-direction:column; gap: 2px; }
.testimonial .who{ font-weight: 600; color: var(--text); font-size: .92rem; }
.testimonial .role{ font-family: var(--font-mono); font-size: .76rem; color: var(--text-faint); }

/* ===== CTA banner ===== */
.cta-banner{
  background: var(--yellow);
  color: #0a0a0a;
  position: relative;
  overflow: hidden;
}
.cta-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(10,10,10,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.cta-inner{
  position: relative;
  text-align:center;
  max-width: 720px;
}
.cta-banner h2{
  color: #0a0a0a;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.1rem);
}
.cta-banner h2 em{ color: #0a0a0a; }
.cta-banner p{
  color: rgba(10,10,10,.72);
  font-size: 1.1rem;
  margin-bottom: 2em;
}

/* ===== Contact form ===== */
.contact{
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.contact-inner{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.contact-title{
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: var(--text);
  margin-bottom: .5em;
}
.contact-lede{
  font-size: 1.02rem;
  margin-bottom: 2.2em;
}
.contact-details{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-details li{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.contact-detail-label{
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
}
.contact-details a{
  font-size: 1rem;
  color: var(--text);
  transition: color .15s ease;
}
.contact-details a:hover{ color: var(--blue-light); }

.contact-form-wrap{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px;
}
.contact-form{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.field{
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.field label{
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.field label span{ color: var(--yellow); }

.field input,
.field textarea,
.field select{
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: #0e0d0b;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea{ resize: vertical; min-height: 120px; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder{ color: var(--text-faint); }

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(62,122,254,.18);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{
  border-color: #ff6b6b;
}

/* Custom select caret, since native appearance is stripped */
.select-wrap{ position: relative; }
.select-wrap select{ padding-right: 44px; cursor: pointer; }
.select-wrap svg{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.select-wrap select option{ background: #14120f; color: var(--text); }

.field-error{
  font-family: var(--font-mono);
  font-size: .7rem;
  color: #ff8080;
  line-height: 1.4;
}
.field-error:empty{ display: none; }

/* Honeypot stays out of sight and out of the tab order */
.gotcha{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-submit{
  align-self: flex-start;
  margin-top: 4px;
}
.form-submit:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.form-note{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-faint);
  margin: 0;
}

.form-status{
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: .9rem;
  margin-bottom: 22px;
  line-height: 1.5;
}
.form-status:empty{ display: none; }
.form-status-success{
  background: rgba(62,122,254,.1);
  border: 1px solid rgba(62,122,254,.4);
  color: var(--text);
}
.form-status-error{
  background: rgba(255,107,107,.09);
  border: 1px solid rgba(255,107,107,.4);
  color: #ffb3b3;
}

/* ===== Footer ===== */
.site-footer{ background: var(--bg); padding-top: 84px; border-top: 1px solid var(--border); }
.footer-inner{
  display:grid;
  grid-template-columns: 1.7fr 1fr 1.15fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--border);
}
.footer-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-brand .logo{ margin-bottom: 18px; }
.footer-brand p{
  font-size: .9rem;
  line-height: 1.6;
  margin: 0;
  max-width: 260px;
}
.footer-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-col h4{
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin: 0 0 18px;
  line-height: 1.4;
}
.footer-col a{
  display: block;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.5;
  margin: 0 0 12px;
  transition: color .15s ease;
}
.footer-col a:last-child{ margin-bottom: 0; }
.footer-col a:hover{ color: var(--blue-light); }
.social-link{
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.social-link svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.footer-bottom{
  padding-top: 26px;
  padding-bottom: 34px;
}
.footer-bottom p{
  margin: 0;
  font-size: .8rem;
  color: var(--text-faint);
}
/* ===== Responsive ===== */
@media (max-width: 980px){
  .feature-top{ grid-template-columns: 1fr; gap: 44px; margin-bottom: 56px; }
  .feature-copy{ max-width: none; }
  .feature-media{ order: -1; }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-grid{ grid-template-columns: repeat(2,1fr); }
  .process-list{ grid-template-columns: repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .testimonial-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .contact-inner{ grid-template-columns: 1fr; gap: 46px; }
  .footer-inner{ grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .stat-bar{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
}

@media (max-width: 760px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .btn-small{ display: inline-flex; }
  .hero{ padding-top: 150px; }
  .signal-line{ top: 116px; }
  section{ padding: 78px 0; }
  .feature-grid{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .process-list{ grid-template-columns: 1fr; }
  .process-step{ padding-top: 26px; }
  .testimonial-grid-4{ grid-template-columns: 1fr; }

  /* Carousel: one client per view on phones */
  .client-slide{ flex: 0 0 100%; }
  .carousel-track{ gap: 16px; }
  .client-card{ padding: 24px; min-height: 220px; }
  .carousel-arrow{ width: 40px; height:40px; top: -62px; }
  .carousel-arrow.prev{ right: 76px; left: auto; }
  .carousel-arrow.next{ right: 28px; }

  .contact-form-wrap{ padding: 26px 22px; }
  .field-row{ grid-template-columns: 1fr; gap: 22px; }
  .form-submit{ align-self: stretch; }

  .footer-inner{ grid-template-columns: 1fr; row-gap: 38px; }
  .footer-brand p{ max-width: none; }
}