/* ==========================================================================
   EXITO — premium technology consulting brand system
   Palette: black / white / electric blue.
   The blue is used as a focused accent, while the rest of the interface stays
   refined, corporate and trust-first.
   ========================================================================== */

:root{
  /* --- EXITO brand tokens --- */
  --brand-blue: #0081ED;
  --brand-blue-hover: #006FD1;
  --brand-blue-active: #005FB8;
  --brand-blue-light: #E8F4FF;
  --brand-blue-very-light: #F3F9FF;

  --dark: #050505;
  --dark-surface: #111111;
  --dark-elevated: #181818;
  --dark-border: #2A2A2A;

  --body-bg: #F7F9FC;
  --surface: #FFFFFF;
  --primary-text: #0A0A0A;
  --secondary-text: #000;
  --light-border: #E5E7EB;

  --white: #FFFFFF;
  --off-white: #F7F9FC;
  --dark-body-text: #A1A1AA;

  /* --- compatibility aliases --- */
  --ink: var(--primary-text);
  --ink-2: var(--brand-blue-very-light);
  --paper: var(--body-bg);
  --paper-2: var(--surface);
  --signal: var(--brand-blue);
  --frequency: var(--brand-blue-hover);
  --line: rgba(229, 231, 235, 0.96);
  --line-dark: rgba(42, 42, 42, 0.75);
  --muted: var(--secondary-text);
  --muted-dark: var(--dark-body-text);

  /* --- type tokens --- */
  --font-display: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Poppins", -apple-system, "Segoe UI", sans-serif;

  --radius: 6px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family: var(--font-display); font-weight:700; letter-spacing:-0.01em; text-transform: none; line-height:1.1; }
h1,h2{ font-weight:600; }
p{ margin:0; }
button{ font-family:inherit; }

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

:focus-visible{ outline: 3px solid var(--signal); outline-offset: 2px; }

.container{ width:100%; max-width:1220px; margin:0 auto; padding:0 24px; }
.section{ padding: 30px 0; }
.section--tight{ padding: 64px 0; }
.section--dark{
  background: radial-gradient(circle at center, rgba(0,129,237,0.12) 0%, rgba(0,129,237,0) 60%), linear-gradient(135deg, var(--dark) 0%, var(--dark-surface) 100%);
  color: var(--white);
}
.section--dark h1, .section--dark h2, .section--dark h3{ color: var(--white); }
.section--dark .muted{ color: var(--dark-body-text); }
.growth-approach-section{
  position:relative; overflow:hidden; isolation:isolate;
}
.growth-approach-section::before{
  content:""; position:absolute; inset:0;
  background-image: url('../img/our-growth-approach-section-bakground-img.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0.12; z-index:-1;
}
.growth-approach-section > *{ position:relative; z-index:1; }
.muted { 
  color: #ffffff ; 
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--signal); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--signal); display:inline-block; }

h1{ font-size: clamp(2.6rem, 6vw, 5rem); }
h2{ font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.5rem); }

.lede{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 640px; }
.section--dark .lede{ color: var(--dark-body-text); }

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 26px; font-weight:600; font-size:0.95rem;
  border:2px solid transparent; border-radius: var(--radius);
  cursor:pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--brand-blue); color: var(--white); box-shadow: 0 10px 24px rgba(0, 129, 237, 0.18); }
.btn-primary:hover{ background: var(--brand-blue-hover); }
.btn-primary:active{ background: var(--brand-blue-active); }
.btn-outline{ border-color: var(--brand-blue); background:transparent; color: var(--brand-blue); }
.section--dark .btn-outline{ border-color: var(--dark-border); color: var(--white); }
.btn-outline:hover{ background: var(--brand-blue); color: var(--white); }
.section--dark .btn-outline:hover{ background: var(--dark-surface); color: var(--white); }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }

/* ==========================================================================
   PHOTO — brand-safe treatment with subtle blue glow
   ========================================================================== */
.photo{ position:relative; overflow:hidden; background: linear-gradient(135deg, #F3F9FF 0%, #E8F4FF 100%); border-radius: var(--radius); box-shadow: 0 18px 38px rgba(5, 5, 5, 0.08); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(0,129,237,0.12), rgba(5,5,5,0.08));
  mix-blend-mode: multiply;
}
.photo--light::after{ background: linear-gradient(160deg, rgba(0,129,237,0.08), rgba(17,17,17,0.04)); }
.photo--16-9{ aspect-ratio: 16/9; }
.photo--4-3{ aspect-ratio: 4/3; }
.photo--3-4{ aspect-ratio: 3/4; }
.photo--square{ aspect-ratio: 1/1; }
.photo:hover img{ transform: scale(1.05); }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.03);
}
.topbar{
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(248,249,251,0.9);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 36px; gap:16px;
  font-size: 0.76rem; color: var(--secondary-text);
}
.topbar-text{ white-space:nowrap; font-weight:600; }
.topbar-actions{
  display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px;
  color: var(--primary-text);
}
.topbar-item{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.topbar-mail::before, .topbar-phone::before{ font-size:0.9em; }
.topbar-mail::before{ content:"✉"; }
.topbar-phone::before{ content:"☎"; }
.social-icons{
  display:flex; align-items:center; gap:8px; margin-left: 4px;
}
.social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width: 22px; height: 22px; border-radius:50%;
  background: rgba(5,5,5,0.06); color: var(--primary-text); font-size:0.7rem; font-weight:700;
  text-decoration:none;
}
.nav{
     display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0px 24px;
    min-height: 25px;
    gap: 3px;
}
.nav-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width: clamp(120px, 12vw, 170px);
  min-width: 120px;
  flex-shrink: 0;
  text-decoration:none;
}
.nav-logo img{
      display: block;
    width: 90px;
    height: auto;
    filter: drop-shadow(0 2px 10px rgba(0, 129, 237, 0.06));
}
.nav-links{
  display:flex; align-items:center; justify-content:center;
  flex: 1; gap: 4px; margin: 0 auto;
}
.nav-links > li{ position:relative; }
.nav-links a{
  display:block; padding: 10px 12px; color: var(--primary-text);
  font-size:0.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.11em; opacity:0.82; transition:color .15s ease, opacity .15s ease;
}
.nav-links a:hover, .nav-links a.is-active{ color: var(--primary-text); opacity:1; }
.nav-links a.is-active{ color: var(--brand-blue); }

.has-dropdown > a::after{ content:"▾"; margin-left:6px; font-size:0.7em; }
.dropdown{
  position:absolute; top:100%; left:10px; min-width:230px;
  background: rgba(255,255,255,0.98); border:1px solid var(--light-border);
  border-top:2px solid var(--brand-blue); border-radius: 0 0 16px 16px;
  padding:8px; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .18s ease; box-shadow: 0 18px 40px rgba(10, 16, 26, 0.08);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a{
  padding:10px 14px; font-size:0.8rem; text-transform:none; letter-spacing:0.02em; font-weight:500; opacity:1;
  border-radius: 10px;
}
.dropdown a:hover{ background: rgba(0,129,237,0.04); color: var(--brand-blue); }

.nav-actions{
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.nav-search{
  width: 40px; height: 40px; border-radius:50%; border:1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.8); color: var(--primary-text); font-size:1.3rem; cursor:pointer;
}
.nav-cta{
      padding: 3px 22px;
    border-radius: 14px;
    font-size: 1rem;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(0, 129, 237, 0.2);
}
.nav-cta span{ font-size: 1.2rem; display:inline-block; margin-left: 8px; }
@media (min-width: 992px){ .nav-cta{ display:inline-flex; } }

.nav-toggle{
  position:relative; z-index:120;
  display:flex; flex-direction:column; gap:5px; background:none; border:none; padding:8px; cursor:pointer;
  border-radius:10px; transition: background .2s ease;
}
.nav-toggle:hover{ background: rgba(0,129,237,0.05); }
.nav-toggle span{ width:24px; height:2px; background: var(--primary-text); display:block; border-radius:50px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 992px){ .nav-toggle{ display:none; } }

.nav-mobile-shell{
  display:none;
}

@media (max-width: 991px){
  .site-header{
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  .nav{
    padding: 12px 18px;
    min-height: 62px;
  }
  .nav-logo{
    width: 110px;
    min-width: 110px;
  }
  .nav-links{
    position:fixed; inset: 0 0 0 auto; width: min(88vw, 420px); height:100vh;
    background: rgba(255,255,255,0.98); backdrop-filter: blur(14px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding: 82px 22px 28px; gap:0; transform: translateX(100%); opacity:0;
    transition: transform .28s ease, opacity .2s ease; overflow-y:auto; box-shadow:none;
    border-left: 1px solid rgba(15, 23, 42, 0.08); margin:0; z-index: 120;
    display:flex;
  }
  .nav-links.is-open{ transform: translateX(0); opacity:1; }
  .nav-links > li{ width:100%; border-bottom: 1px solid rgba(15, 23, 42, 0.06); }
  .nav-links a{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 8px; font-size: 0.77rem; letter-spacing: 0.12em;
    border-radius: 12px; min-height:54px;
  }
  .nav-links a:hover{ background: rgba(0,129,237,0.04); }
  .has-dropdown > a::after{ content:"▾"; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; border:none; background:rgba(0,129,237,0.03);
    margin: 0 0 12px; border-radius:12px; padding:8px 8px 10px; box-shadow:none;
  }
  .has-dropdown.is-open .dropdown{ display:block; }
  .dropdown a{ padding:12px 12px; font-size: 0.75rem; letter-spacing:0.02em; }
  .nav-mobile-shell{
    position:fixed; inset:0; display:block; pointer-events:none; opacity:0; transition: opacity .25s ease;
    background: rgba(7, 12, 18, 0.18); z-index:110;
  }
  .nav-mobile-shell.is-open{ opacity:1; pointer-events:auto; }
  .nav-close{
    position:absolute; top: 18px; right: 18px; z-index:130;
    display:flex; align-items:center; justify-content:center;
    width: 42px; height:42px; border:none; background: rgba(17,17,17,0.04);
    border-radius:50%; font-size: 2rem; line-height:1; color: var(--primary-text); cursor:pointer;
  }
}

/* ==========================================================================
   TICKER — premium motion detail
   ========================================================================== */
.ticker{
  border-top:1px solid rgba(15,23,42,0.08); border-bottom:1px solid rgba(15,23,42,0.08);
  overflow:hidden; background: linear-gradient(90deg, rgba(232,244,255,0.95) 0%, rgba(255,255,255,0.9) 50%, rgba(232,244,255,0.95) 100%);
  padding: 10px 0;
}
.ticker-inner{ overflow:hidden; }
.ticker-track{
  display:flex; width:max-content; gap:36px;
  animation: ticker-scroll 26s linear infinite;
  white-space:nowrap;
}
.ticker:hover .ticker-track{ animation-play-state: paused; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-item{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color: rgba(15,23,42,0.8); font-weight:700;
}
.ticker-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 18px; height: 18px; border-radius: 6px; font-size: 0.58rem; font-weight: 800;
  color: var(--white); background: var(--brand-blue); box-shadow: 0 6px 14px rgba(0,129,237,0.18);
}
.ticker-google .ticker-icon{ background: linear-gradient(135deg, #4285F4, #1A73E8); }
.ticker-tv .ticker-icon{ background: linear-gradient(135deg, #1D4ED8, #2563EB); }
.ticker-sports .ticker-icon{ background: linear-gradient(135deg, #0EA5E9, #0284C7); }
.ticker-news .ticker-icon{ background: linear-gradient(135deg, #0F172A, #334155); }
.ticker-radio .ticker-icon{ background: linear-gradient(135deg, #10B981, #059669); }
.ticker-influencers .ticker-icon{ background: linear-gradient(135deg, #F97316, #EA580C); }
.ticker-meta .ticker-icon{ background: linear-gradient(135deg, #3B82F6, #1D4ED8); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background: linear-gradient(135deg, rgba(247,249,252,0.88) 0%, rgba(255,255,255,0.78) 35%, rgba(232,244,255,0.8) 100%);
  color: var(--primary-text); padding: 5px 0 0; position:relative; overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('../img/banener-section-bg-img.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 0;
}
.hero > *{ position:relative; z-index:1; }
.hero-slider-section{ padding-top: 34px; }
.hero-slider-wrap{ padding: 10px 0 24px; }
.hero-slider-header{ text-align:center; margin-bottom: 18px; }
.hero-slider-header h1{ color: var(--primary-text); font-size: 35px; max-width: 1400px; margin: 0 auto 14px; }
.hero-fixed-text{ display:inline-block; }
.hero-typed-wrap{
  display:inline-block; position:relative; white-space:nowrap;
  color: var(--primary-text);
}
.hero-typed-text{ display:inline-block; min-width: 2ch; white-space:nowrap; }
.hero-typed-cursor{
  display:inline-block; margin-left: 2px; color: var(--brand-blue);
  animation: hero-cursor-blink 1s step-end infinite;
  vertical-align: baseline;
}
@keyframes hero-cursor-blink{
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.hero-slider-tags{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px;
  font-size: clamp(0.95rem, 1.6vw, 1.8rem); font-weight:700; letter-spacing:-0.03em;
  color: var(--primary-text); padding: 16px 0 14px; border-top: 1px solid rgba(17,17,17,0.06); border-bottom: 1px solid rgba(17,17,17,0.06);
}
.hero-slider-tags span{ display:inline-flex; align-items:center; gap:10px; }
.hero-slider-tags span:nth-child(even){ color: var(--secondary-text); }
.hero-slider-tags span:not(:nth-child(even))::before{
  content:"•"; color: var(--brand-blue); font-size: 0.8em; line-height:1;
}

.solution-carousel{
  position:relative; display:grid; grid-template-columns: 54px 1fr 54px; align-items:center; gap:18px; margin-top: 18px;
}
.solution-carousel-viewport{ overflow:hidden; }
.solution-carousel-track{
  display:flex; gap:20px; transition: transform .45s ease;
  will-change: transform;
}
.solution-card{
  flex: 0 0 calc((100% - 60px) / 4);
  background: rgba(255,255,255,0.8); border:1px solid var(--light-border); border-radius:18px;
  overflow:hidden; box-shadow: 0 16px 30px rgba(5, 5, 5, 0.05);
}
.solution-card-media{
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(0,129,237,0.04));
  border-bottom: 1px solid var(--light-border);
}
.solution-card-placeholder{
  min-height: 140px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 0px; background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,129,237,0.04)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2) 1px, transparent 1px, transparent 18px),
    linear-gradient(135deg, #edf3fa, #f7f9fc);
}
.solution-card-placeholder span{
  display:block; font-size: 1.05rem; font-weight:800; margin-bottom: 8px; color: var(--primary-text);
}
.solution-card-placeholder small{
  display:block; max-width: 220px; margin-top: 6px; line-height:1.5; color: var(--secondary-text); font-size: 0.72rem;
}
.solution-card-copy{ padding: 18px 16px 22px; }
.solution-card-copy h3{
  font-size: 16px; font-weight:800; text-align:center; line-height:1.2;
  color: var(--primary-text);
}
.solution-carousel-arrow{
  width: 46px; height: 46px; border-radius: 50%; border:1px solid var(--light-border); background: rgba(255,255,255,0.8);
  color: var(--primary-text); font-size: 2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .2s ease; box-shadow: 0 10px 20px rgba(5, 5, 5, 0.05);
}
.solution-carousel-arrow:hover{ background: var(--brand-blue); color: var(--white); border-color: var(--brand-blue); }
.hero-slider-dots{
  display:flex; justify-content:center; align-items:center; gap:10px; margin-top: 18px;
  display:none;
}
.hero-dot{
  width: 12px; height: 12px; padding:0; border-radius: 50%; border:none; background: rgba(5,5,5,0.25); cursor:pointer;
}
.hero-dot.is-active{ background: var(--brand-blue); transform: scale(1.15); }

@media (max-width: 1100px){
  .solution-card{ flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 700px){
  .solution-carousel{ grid-template-columns: 1fr; }
  .solution-carousel-arrow{ display:none; }
  .solution-card{ flex-basis: 100%; }
}

/* ==========================================================================
   SOLUTIONS GRID
   ========================================================================== */
.solutions-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:20px; margin-top:56px;
}
.channel-card{
  grid-column: span 3; background: var(--surface); border:1px solid var(--light-border);
  padding:0; position:relative; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; overflow:hidden;
  box-shadow: 0 10px 24px rgba(5, 5, 5, 0.03);
}
.channel-card .channel-card-body{ padding:28px 28px 32px; }
.channel-card .photo{ border-radius:0; }
.channel-card:hover{ border-color: var(--brand-blue); transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0, 129, 237, 0.10); }
.channel-card--lead{
  grid-column: span 6; background: radial-gradient(circle at top left, rgba(0,129,237,0.18) 0%, rgba(0,129,237,0) 38%), linear-gradient(135deg, var(--dark) 0%, var(--dark-surface) 100%); color: var(--white); border-color: var(--dark-border);
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap:32px; align-items:center;
}
.channel-card--lead .channel-tag{ color: var(--brand-blue); }
.channel-card--lead:hover{ transform:none; }
.channel-card--lead .photo{ height:100%; min-height:220px; }
@media (max-width: 700px){ .channel-card--lead{ grid-template-columns:1fr; } .channel-card--lead .photo{ order:-1; min-height:180px; } }
.channel-tag{
  display:block; font-family: var(--font-mono); font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--secondary-text); margin-bottom:14px;
}
.channel-card h3{ text-transform:none; font-family:var(--font-body); font-weight:800; font-size:1.4rem; margin-bottom:6px; }
.channel-card--lead h3{ font-size: clamp(1.6rem,3vw,2.2rem); }
.channel-card p.muted{
   margin-bottom:0px; 
  font-size:0.95rem;
  color: #ffffff;
 }
.channel-list{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.channel-list li{
  font-size:0.82rem; padding:6px 12px; border:1px solid var(--light-border); border-radius:999px;
}
.channel-card--lead .channel-list li{ border-color: var(--dark-border); }
.channel-list--split{ columns:2; gap:0 24px; }
.channel-list--split li{ border:none; padding:6px 0; border-radius:0; display:flex; align-items:center; gap:8px; break-inside: avoid; }
.channel-list--split li::before{ content:"—"; color: var(--brand-blue); }

@media (max-width: 860px){
  .channel-card{ grid-column: span 6; }
  .channel-list--split{ columns:1; }
}

/* ==========================================================================
   SIGNAL CHAIN — growth approach
   ========================================================================== */
.signal-chain{ display:flex; flex-wrap:wrap; gap:0; margin-top:56px; counter-reset: chain; }
.chain-step{
  flex:1 1 150px; position:relative; padding:26px 20px 20px; border-top:3px solid var(--brand-blue);
  counter-increment: chain;
}
.chain-step::before{
  content: counter(chain, decimal-leading-zero);
  font-family: var(--font-mono); font-size:0.78rem; color: var(--brand-blue); display:block; margin-bottom:10px;
}
.chain-step h4{ font-family:var(--font-body); text-transform:none; font-weight:800; font-size:1.02rem; margin-bottom:6px; }
.chain-step p{ font-size:0.88rem; color: var(--secondary-text); }
.section--dark .chain-step p{ color: var(--dark-body-text); }
.chain-arrow{ display:flex; align-items:flex-start; padding-top:20px; color: var(--dark-border); font-size:1.2rem; }
@media (max-width: 860px){ .chain-arrow{ display:none; } .signal-chain{ flex-direction:column; } .chain-step{ border-left:3px solid var(--brand-blue); border-top:none; padding-left:20px; } }

/* ==========================================================================
   INDUSTRY CARDS
   ========================================================================== */
.industry-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; margin-top:56px; }
.industry-card{ background: var(--surface); border:1px solid var(--light-border); transition: transform .2s ease, border-color .2s ease; overflow:hidden; }
.industry-card:hover{ transform: translateY(-4px); border-color: var(--brand-blue); }
.industry-card-body{ padding:22px 22px 26px; position:relative; }
.industry-icon{
  position:absolute; top:-22px; left:22px; font-size:1.4rem; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; background: var(--white); border-radius:50%;
  box-shadow: 0 6px 16px rgba(5, 5, 5, 0.08);
}
.industry-card-body h4{ margin-top:14px; font-weight:800; font-size:1.02rem; }
@media (max-width: 900px){ .industry-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .industry-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   CASE STUDIES
   ========================================================================== */
.case-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:24px; margin-top:56px; }
.case-card{ border:1px solid var(--light-border); position:relative; overflow:hidden; }
.case-card .case-card-body{ padding:28px 32px 32px; }
.case-card .channel-tag{ color: var(--brand-blue); }
.case-card h3{ font-family:var(--font-body); text-transform:none; font-weight:800; font-size:1.25rem; margin:10px 0 14px; }
.case-card blockquote{ margin:0; font-size:0.95rem; color: var(--secondary-text); border-left:2px solid var(--brand-blue); padding-left:16px; }
@media (max-width: 760px){ .case-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   REACH / STATS STRIP
   ========================================================================== */
.reach-strip{ display:grid; grid-template-columns: repeat(5,1fr); border-top:1px solid var(--light-border); border-bottom:1px solid var(--light-border); margin-top:56px; }
.reach-item{ padding:28px 18px; text-align:center; border-left:1px solid var(--light-border); }
.reach-item:first-child{ border-left:none; }
.reach-item strong{ display:block; font-family:var(--font-mono); font-size:0.95rem; letter-spacing:0.02em; color: var(--brand-blue-hover); margin-bottom:6px; }
.reach-item span{ font-size:0.82rem; color: var(--secondary-text); }
@media (max-width: 900px){ .reach-strip{ grid-template-columns: repeat(2,1fr); } .reach-item{ border-left:none; border-top:1px solid var(--light-border); } }

/* ==========================================================================
   AI / AUTOMATION
   ========================================================================== */
.ai-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; margin-top:56px; }
.ai-card{ border:1px solid var(--light-border); padding:24px 18px; text-align:left; background:var(--surface); }
.ai-card .channel-tag{ margin-bottom:10px; }
.ai-card h4{ font-family:var(--font-body); text-transform:none; font-weight:800; font-size:0.98rem; }
@media (max-width: 900px){ .ai-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .ai-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   DIAGONAL WIPE DIVIDER — between dark/light sections (channel-switch cue)
   ========================================================================== */
.wipe-top{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px)); }
.wipe-bottom{ clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   PAGE HERO (interior pages)
   ========================================================================== */
.page-hero{ background: linear-gradient(135deg, var(--off-white) 0%, #FFFFFF 35%, var(--brand-blue-very-light) 100%); color: var(--primary-text); padding: 150px 0 70px; position:relative; overflow:hidden; }
.page-hero .eyebrow{ color: var(--brand-blue); }
.page-hero .eyebrow::before{ background: var(--brand-blue); }
.breadcrumb{ font-family: var(--font-mono); font-size:0.78rem; color: var(--secondary-text); margin-bottom:18px; text-transform:uppercase; letter-spacing:0.08em; }
.breadcrumb a:hover{ color: var(--brand-blue); }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.1) brightness(0.8); }
.page-hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, rgba(255,255,255,0.82) 30%, rgba(0,129,237,0.12)); }
.page-hero .container{ position:relative; z-index:1; }

/* ==========================================================================
   SOLUTIONS PAGE — pillar sections
   ========================================================================== */
.pillar{ padding: 72px 0; border-bottom:1px solid var(--light-border); scroll-margin-top: 90px; }
.pillar:nth-child(even){ background: var(--surface); }
.pillar-head{ display:grid; grid-template-columns: 90px 1fr 160px; gap:24px; align-items:center; margin-bottom:32px; }
.pillar-photo{ width:160px; height:120px; }
@media (max-width: 760px){ .pillar-head{ grid-template-columns:1fr; } .pillar-photo{ width:100%; height:160px; order:-1; } }
.pillar-num{ font-family: var(--font-mono); font-size:1.3rem; color: var(--brand-blue); }
.pillar-items{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px 24px; margin-top:24px; }
.pillar-items li{ padding:12px 0; border-top:1px solid var(--light-border); font-size:0.95rem; }
@media (max-width: 760px){ .pillar-head{ grid-template-columns:1fr; } .pillar-items{ grid-template-columns:1fr 1fr; } }
@media (max-width: 480px){ .pillar-items{ grid-template-columns:1fr; } }

/* ==========================================================================
   INDUSTRIES PAGE — detail sections
   ========================================================================== */
.industry-detail{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; padding:64px 0; border-bottom:1px solid var(--light-border); }
.industry-detail:nth-child(even) .industry-detail-media{ order:-1; }
.industry-detail-media{ position:relative; min-height:280px; border-radius: var(--radius); }
.industry-detail-icon{
  position:absolute; top:20px; left:20px; font-size:1.6rem; width:56px; height:56px; z-index:2;
  display:flex; align-items:center; justify-content:center; background: var(--white); border-radius:50%;
  box-shadow: 0 8px 20px rgba(5, 5, 5, 0.08);
}
@media (max-width: 820px){ .industry-detail{ grid-template-columns:1fr; } .industry-detail:nth-child(even) .industry-detail-media{ order:0; } }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:56px; }
.value-card{ padding:28px; border:1px solid var(--light-border); }
@media (max-width: 760px){ .value-grid{ grid-template-columns:1fr; } }

.about-intro{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
.about-intro .photo{ min-height:320px; }
@media (max-width: 860px){ .about-intro{ grid-template-columns:1fr; } .about-intro .photo{ order:-1; min-height:220px; } }

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:56px; margin-top:48px; }
.contact-photo{ min-height:260px; margin-bottom:32px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.form-control{
  width:100%; padding:14px 16px; border:2px solid var(--light-border); background: var(--surface);
  font-family:inherit; font-size:0.95rem; border-radius: var(--radius); transition:border-color .15s ease;
}
.form-control:focus{ border-color: var(--brand-blue); outline:none; box-shadow: 0 0 0 4px rgba(0,129,237,0.15); }
textarea.form-control{ resize:vertical; min-height:130px; }
.contact-info-item{ padding:20px 0; border-top:1px solid var(--light-border); }
.contact-info-item:first-child{ border-top:none; }
.form-status{ margin-top:16px; font-size:0.9rem; display:none; }
.form-status.is-visible{ display:block; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: linear-gradient(180deg, var(--dark) 0%, var(--dark-surface) 100%); color: rgba(255,255,255,0.76); padding: 64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:32px; }
.footer-logo{ font-family: var(--font-display); font-size:1.6rem; color: var(--white); margin-bottom:14px; }
.footer-logo span{ color: var(--brand-blue); }
.footer-col h5{ color: var(--white); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-family: var(--font-mono); margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; font-size:0.88rem; }
.footer-col a:hover{ color: var(--brand-blue); }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--dark-border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.8rem; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }