/* ═══════════════════════════════════════════════════════════════
   NEXA TECH — Unified Stylesheet
   Covers: Home Page + About Page
   Design System: Black & White / Grayscale
   Fonts: Inter (display) + Roboto (body)

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────
   1. BASIC STYLES
      1.1  CSS Custom Properties (Tokens)
      1.2  Reset & Base
      1.3  Grain Overlay
      1.4  Typography Utilities
      1.5  Section Utilities
      1.6  Labels
      1.7  Navigation
      1.8  Buttons & Ripple
      1.9  Scroll Reveal Animations
      1.10 Footer
      1.11 Global Responsive Rules

   2. HOME PAGE STYLES
      2.1  Hero Section
      2.2  Hero Visual (Abstract 3D Composition)
      2.3  Marquee Strip
      2.4  Value Statement
      2.5  Services Section
      2.6  Impact / Stats Section
      2.7  Portfolio Section
      2.8  Tech Stack Section
      2.9  CTA Section (Home)
      2.10 Home-Specific Responsive Rules

   3. ABOUT PAGE STYLES
      3.1  Page Banner
      3.2  Company Overview
      3.3  Vision & Mission
      3.4  Values / Approach
      3.5  Why Nexa Tech
      3.6  Team / Culture
      3.7  Closing CTA Strip (About)
      3.8  About-Specific Responsive Rules
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. BASIC STYLES
   Shared across Home and About pages.
═══════════════════════════════════════════════════════════════ */

/* ─── 1.1  CSS Custom Properties (Tokens) ─────────────────── */
:root {
  /* Dark surfaces */
  --d0: #03080f;
  --d1: #0a0a0a;
  --d2: #111111;
  --d3: #1a1a1a;
  --d-glass: rgba(255,255,255,.04);
  --d-border: rgba(255,255,255,.09);
  --d-border-hi: rgba(255,255,255,.18);

  /* Light surfaces */
  --l0: #ffffff;
  --l1: #f8fafc;
  --l2: #f1f5f9;
  --l-border: rgba(15,23,42,.09);
  --l-border-hi: rgba(15,23,42,.18);

  /* B&W accent tokens */
  --bw-accent:    #ffffff;
  --bw-mid:       rgba(255,255,255,.55);
  --bw-dim:       rgba(255,255,255,.22);
  --bw-dim-lt:    rgba(15,23,42,.22);
  --bw-border:    rgba(255,255,255,.12);
  --bw-border-lt: rgba(15,23,42,.12);

  /* Typography */
  --ff-display: 'Inter', sans-serif;
  --ff-body:    'Roboto', sans-serif;

  /* Spacing & Radii */
  --section-gap: 6rem;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
}


/* ─── 1.2  Reset & Base ────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: 'Roboto', sans-serif;
  background: #03080f;
  color: #fff;
  overflow-x: hidden;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; }
p    { font-family: 'Roboto', sans-serif; }

a.nav-logo { width: 180px;}
a.footer-logo {max-width: 180px;}

/* ─── 1.3  Grain Overlay ───────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: -1; opacity: .022; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* ─── 1.4  Typography Utilities ────────────────────────────── */
.t-serif {
    font-family: var(--ff-display);
    font-weight: 700;
}

/* Text gradient utilities (kept per spec — do not remove) */
.t-tri   { background: linear-gradient(135deg,#10b981,#0ea5e9,#6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-cool  { background: linear-gradient(135deg,#10b981,#0ea5e9);         -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-warm  { background: linear-gradient(135deg,#10b981,#0ea5e9);         -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-brand {font-style: normal; color: rgba(255,255,255,.3); }


/* ─── 1.5  Section Utilities ───────────────────────────────── */
.section-pad { padding: var(--section-gap) 0; }
.s-dark  { background: #03080f; }
.s-dark2 { background: #0a0a0a; }
.s-light { background: #f8fafc; }
.s-white { background: #ffffff; }

.sec-h    { font-size: clamp(2rem, 6vw, 5.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin-bottom: 1rem; }
.sec-p-dk { font-size: 1.25rem; color: rgba(255,255,255,.52); line-height: 1.82; }
.sec-p-lt { font-size: 1.25rem; color: #64748b; line-height: 1.82; }
.h-dk { color: #fff; }
.h-lt { color: #03080f; }


.dark-text-grad {
  background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.light-text-grad {
  background: linear-gradient(90deg,rgba(122, 224, 255, 1) 0%, rgba(5, 181, 235, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ─── 1.6  Labels ──────────────────────────────────────────── */
/* Dark-background variant */
.label-bw {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #37D1FE;
  background: rgba(255,255,255,.06);
  border: 1px solid #37D1FE;
  border-radius: 50px; padding: .32rem .95rem; margin-bottom: 1.1rem;
}
/* Light-background variant */
.label-bw-lt {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #37D1FE;
  background: #fff;
  border: 1px solid #37D1FE;
  border-radius: 50px; padding: .32rem .95rem; margin-bottom: 1.1rem;
}


/* ─── 1.7  Navigation ──────────────────────────────────────── */
#topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  padding: 0;
  background: #03080f;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid var(--d-border);
  transition: background .35s ease, box-shadow .35s ease;
}
#topnav.solid {
  background: rgba(3,8,15,.97);
  box-shadow: 0 2px 32px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.06);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1380px; margin: 0 auto; padding: 0 2.5rem;
  height: 68px;
}
.nav-logo { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -.02em; }
.nav-logo span { color: rgba(255,255,255,.45); }
.nav-links {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; margin-bottom: 0;
  padding-left: 0;
}
.nav-links a {
  font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.55);
  padding: .5rem .75rem; border-radius: 8px;
  display: block; transition: color .22s, background .22s;
  text-transform: uppercase; letter-spacing: .04em;
}
.nav-links a:hover,
.nav-links a.active { color: #fff; }
.nav-links a.active { background: rgba(255,255,255,.07); }
.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: #03080f; font-weight: 700; font-size: .875rem;
  padding: .6rem 1.5rem; border-radius: 50px; border: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s;
  cursor: pointer;
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,255,255,.18); color: #03080f; background: #e8e8e8; }
.nav-burger { display: none; background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; padding: .5rem; }


/* ─── 1.8  Buttons & Ripple ────────────────────────────────── */
.btn-pri {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: #03080f;
  font-family: var(--ff-display); font-weight: 700; font-size: 1rem;
  padding: .9rem 2.1rem; border-radius: 50px; border: 2px solid #03080f;
  box-shadow: 0 6px 22px rgba(255,255,255,.18);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, background .2s ease, border-color .2s ease;
  cursor: pointer; position: relative; overflow: hidden;
}
.btn-pri:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(255,255,255,.28); color: #03080f; border-color: #03080f; }
.btn-pri:active { transform: translateY(0) scale(.97); box-shadow: 0 3px 10px rgba(0,0,0,.15); background: #e8e8e8; border-color: #03080f; color: #03080f; transition: transform .1s ease, box-shadow .1s ease; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: rgba(255,255,255,.8);
  font-family: var(--ff-display); font-weight: 600; font-size: .95rem;
  padding: .9rem 2.1rem; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.18);
  transition: all .28s ease; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--ac); color: #fff; background: rgba(255,255,255,.07); transform: translateY(-2px); }

/* Ripple effect helper */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(0,0,0,.18);
  transform: scale(0); animation: rippleAnim .55s ease-out forwards;
}
@keyframes rippleAnim { to { transform: scale(4.5); opacity: 0; } }


/* ─── 1.9  Scroll Reveal Animations ───────────────────────── */
[data-anim] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  transition-duration: .85s;
  will-change: opacity, transform;
}
[data-anim].is-visible { opacity: 1; transform: none; filter: none; }
[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-down"]  { transform: translateY(-30px); }
[data-anim="fade-left"]  { transform: translateX(50px); }
[data-anim="fade-right"] { transform: translateX(-50px); }
[data-anim="scale-in"]   { transform: scale(.94); }
[data-anim="scale-up"]   { transform: scale(.88); filter: blur(4px); }
[data-anim="blur-in"]    { transform: translateY(20px); filter: blur(8px); }

/* Animation delay modifiers */
[data-delay="100"] { transition-delay: .1s; }
[data-delay="150"] { transition-delay: .15s; }
[data-delay="200"] { transition-delay: .2s; }
[data-delay="250"] { transition-delay: .25s; }
[data-delay="300"] { transition-delay: .3s; }
[data-delay="350"] { transition-delay: .35s; }
[data-delay="400"] { transition-delay: .4s; }
[data-delay="500"] { transition-delay: .5s; }


/* ─── 1.10  Footer ─────────────────────────────────────────── */
.site-footer { background: #0a0a0a; padding: 5.5rem 0 2rem; border-top: 1px solid var(--d-border); }
.footer-logo { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: -.02em; margin-bottom: 1.1rem; display: block; }
.footer-logo span { color: rgba(255,255,255,.3); }
.footer-desc { font-size: .9rem; color: rgba(255,255,255,.38); max-width: 300px; line-height: 1.75; margin-bottom: 1.8rem; }
.footer-heading { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; }
.footer-list { list-style: none; padding: 0; }
.footer-list li { margin-bottom: .6rem; }
.footer-list a { font-size: 1rem; color: rgba(255,255,255,.38); display: inline-block; transition: color .22s, transform .22s; }
.footer-list a:hover { color: #fff; transform: translateX(4px); }
.soc-icon {
  width: 37px; height: 37px; border-radius: 50%;
  background: var(--d-glass); border: 1px solid var(--d-border);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); font-size: .9rem;
  transition: all .28s ease; text-decoration: none;
}
.soc-icon:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); transform: translateY(-3px); }
.footer-bar {
  border-top: 1px solid var(--d-border); margin-top: 4rem; padding-top: 2rem;
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem;
  font-size: .83rem; color: rgba(255,255,255,.28);
}
.footer-bar a { color: rgba(255,255,255,.28); transition: color .22s; }
.footer-bar a:hover { color: rgba(255,255,255,.65); }


/* ─── 1.11  Global Responsive Rules ───────────────────────── */
/* Shared mobile nav breakpoint */
/* Shared reduced-motion override */
/* ═══════════════════════════════════════════════════════════════
   2. HOME PAGE STYLES
   Styles exclusive to index.html / the Home page.
═══════════════════════════════════════════════════════════════ */

/* ─── 2.1  Hero Section ────────────────────────────────────── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 10rem 0 5rem; position: relative; overflow: hidden;
  background: #03080f;
}
/* Top accent line */
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.25) 70%, transparent 100%);
}
/* Dot grid overlay */
.hero-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
/* Ghost BG numeral */
.hero-bg-text {
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(9rem, 18vw, 18rem);
  color: rgba(255,255,255,.018); line-height: 1;
  pointer-events: none; user-select: none; letter-spacing: -.06em;
}
.hero-content { position: relative; z-index: 2; }

/* Hero elements: hidden until fonts are ready */
.hero-eyebrow,
.hero-h1,
.hero-sub,
.hero-actions { opacity: 0; }

.fonts-ready .hero-eyebrow,
.fonts-ready .hero-h1,
.fonts-ready .hero-sub,
.fonts-ready .hero-actions { opacity: 1; }

/* Eyebrow */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 1.5rem;
}
.fonts-ready .hero-eyebrow { animation: fadeUp .65s ease both; }
.hero-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.4); }

/* Hero heading */
.hero-h1 {
  font-size: clamp(3rem, 6.5vw, 3.6rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
  margin-bottom: 1.5rem; color: #fff;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.fonts-ready .hero-h1 { animation: fadeUp .65s ease .1s both; }
/* Italic light-weight sub-word (text gradient kept per spec) */
.hero-h1-serif {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
    background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(3rem, 9vw, 8.75rem);
    display: inline-block;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hero body copy */
.hero-sub {
  font-size: 1.12rem; color: rgba(255,255,255,.45);
  max-width: 500px; line-height: 1.85; margin-bottom: 2.6rem;
}
.fonts-ready .hero-sub { animation: fadeUp .65s ease .2s both; }
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 3.5rem;
}
.fonts-ready .hero-actions { animation: fadeUp .65s ease .3s both; }

/* Trust / stats bar */
.trust-bar {
  display: flex; gap: 0; flex-wrap: wrap;
  animation: fadeUp .65s ease .42s both;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03); backdrop-filter: blur(12px);
  padding: 1.1rem 1.6rem; width: fit-content;
}
.trust-stat { display: flex; flex-direction: column; padding: 0 1.5rem; border-right: 1px solid rgba(255,255,255,.09); }
.trust-stat:first-child { padding-left: 0; }
.trust-stat:last-child  { border-right: none; }
.trust-num { font-size: 1.8rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-bottom: .2rem; color: #fff; }
.trust-lbl { font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.32); }

/* Entry animations */
@keyframes fadeUp    { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: translateX(0); } }


/* ─── 2.2  Hero Visual (Abstract 3D Composition) ──────────── */
.hero-vis {
  position: relative; height: 560px;
  display: flex; align-items: center; justify-content: center;
  animation: fadeRight .85s ease .25s both;
}

/* Floating stage */
.vis-stage {
  position: relative; width: 420px; height: 420px;
  animation: stageFloat 9s ease-in-out infinite;
}
@keyframes stageFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(.5deg); } }

/* Outer rotating rings */
.vis-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  animation: ringRotSlow linear infinite;
}
.vis-ring-1 { inset: 0;   animation-duration: 22s; }
.vis-ring-2 { inset: 30px; border-color: rgba(255,255,255,.07); animation-duration: 16s; animation-direction: reverse; }
.vis-ring-3 { inset: 60px; border-color: rgba(255,255,255,.05); animation-duration: 28s; }
@keyframes ringRotSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Tick marks on outer ring */
.vis-ring-1::before,
.vis-ring-1::after { content: ''; position: absolute; background: rgba(255,255,255,.35); border-radius: 2px; }
.vis-ring-1::before { width: 2px; height: 14px; top: -1px; left: 50%; transform: translateX(-50%); }
.vis-ring-1::after  { width: 14px; height: 2px; top: 50%; right: -1px; transform: translateY(-50%); }

/* Central card */
.vis-card {
  position: absolute; inset: 90px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  backdrop-filter: blur(24px);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem;
}
/* Window chrome dots */
.vis-card-bar { position: absolute; top: 1rem; left: 1.2rem; display: flex; gap: 5px; }
.vis-card-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.15); }
.vis-card-dot:first-child { background: rgba(255,255,255,.35); }

/* Animated code lines */
.vis-code-lines { width: 100%; }
.vis-code-line {
  height: 2px; border-radius: 1px;
  background: rgba(255,255,255,.12);
  margin-bottom: .6rem;
  animation: codeLineGrow 1.8s ease both;
}
@keyframes codeLineGrow { from { width: 0; } to { width: var(--w, 100%); } }
.vis-code-line:nth-child(1) { --w: 85%; animation-delay: .3s; }
.vis-code-line:nth-child(2) { --w: 62%; animation-delay: .5s; }
.vis-code-line:nth-child(3) { --w: 75%; animation-delay: .7s; }
.vis-code-line:nth-child(4) { --w: 40%; animation-delay: .9s; }
.vis-code-line:nth-child(5) { --w: 90%; animation-delay: 1.1s; }
.vis-code-line:nth-child(6) { --w: 55%; animation-delay: 1.3s; }
.vis-code-line.hl  { background: rgba(255,255,255,.32); height: 3px; }
.vis-code-line.hl2 { background: rgba(255,255,255,.22); }

/* Uptime indicator */
.vis-status {
  display: flex; align-items: center; gap: .5rem;
  font-family: 'Roboto', sans-serif; font-size: .7rem; font-weight: 700;
  color: rgba(255,255,255,.45); letter-spacing: .06em; text-transform: uppercase;
}
.vis-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Floating mini metric chips */
.vis-chip {
  position: absolute; z-index: 8;
  background: rgba(0,0,0,.94);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.vis-chip-a { top: 2%;   right: -2%; width: 148px; animation: chipFloatA 7s ease-in-out infinite; }
.vis-chip-b { bottom: 14%; left: -4%; width: 155px; animation: chipFloatB 9s ease-in-out infinite; }
.vis-chip-c { bottom: 1%;  right:  8%; width: 148px; animation: chipFloatC 8s ease-in-out infinite; }
@keyframes chipFloatA { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }
@keyframes chipFloatB { 0%,100% { transform: translateY(0) rotate(1.2deg);  } 50% { transform: translateY(-18px) rotate(1.2deg);  } }
@keyframes chipFloatC { 0%,100% { transform: translateY(0) rotate(-.7deg);  } 50% { transform: translateY(-11px) rotate(-.7deg);  } }

.vis-chip-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: .72rem; margin-bottom: .5rem;
}
.vis-chip-val { font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: .1rem; }
.vis-chip-lbl { font-size: .6rem; color: rgba(255,255,255,.38); margin-bottom: .4rem; }
.vis-chip-bar { height: 3px; border-radius: 1.5px; background: rgba(255,255,255,.08); overflow: hidden; }
.vis-chip-fill { height: 100%; border-radius: 1.5px; background: rgba(255,255,255,.35); animation: chipFill 1.4s ease .5s both; }
@keyframes chipFill { from { width: 0; } to { width: var(--w); } }
.vis-chip-a .vis-chip-fill { --w: 74%; }
.vis-chip-b .vis-chip-fill { --w: 58%; }
.vis-chip-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .56rem; font-weight: 700; border-radius: 50px; padding: .12rem .45rem;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.65);
}


/* ─── 2.3  Marquee Strip ───────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  background: rgba(0,0,0,.94);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0;
}
.marquee-track {
  display: flex; width: max-content;
  animation: marqueeScroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0 2rem; font-size: .82rem; font-weight: 600;
  color: rgba(255,255,255,.55); white-space: nowrap; transition: color .25s;
}
.mq-item:hover { color: rgba(255,255,255,.65); }
.mq-sep { color: rgba(255,255,255,.15); font-size: .55rem; }


/* ─── 2.4  Value Statement ─────────────────────────────────── */
.value-sec {
  padding: 6.5rem 0; background: #03080f; position: relative; text-align: center;padding-top: 0;
}
.value-sec::before {
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12), transparent);
}
.value-quote {
  font-size: clamp(1.25rem, 2.1vw, 1.45rem);
  font-weight: 400; color: rgba(255, 255, 255, 0.6);
  max-width: 800px; margin: 0 auto; line-height: 1.9;
}
/* Text gradient kept per spec */
.value-quote strong {
  font-weight: 700;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.value-quote span { font-family: 'Roboto', sans-serif; font-style: italic; color: #fff; }


/* ─── 2.5  Services Section ────────────────────────────────── */
.services-sec {
  background: #fff; padding: var(--section-gap) 0; position: relative;
}
.services-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
/* Two-column framed grid */
.svc-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,.07);
}
/* Left: stacked feature rows */
.svc-list { background: #ffffff; }
.svc-row {
  display: flex; align-items: flex-start; gap: 1.4rem;
  padding: 2rem 2.4rem; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; position: relative; transition: background .25s;
}
.svc-row:last-child { border-bottom: none; }
/* Monochrome left accent bar */
.svc-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .25s; border-radius: 0 2px 2px 0;
}
.svc-row:hover              { background: #f8fafc; }
.svc-row:hover::before      { background: #03080f; }
.svc-row.active             { background: #f1f5f9; }
.svc-row.active::before     { background: #03080f; }

.svc-num {
  font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: #cbd5e1; min-width: 28px; line-height: 1; padding-top: .2rem; transition: color .25s;
}
.svc-row:hover .svc-num,
.svc-row.active .svc-num { color: #03080f; }

/* Monochrome icon boxes */
.svc-ico-sm {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0; transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  border: 1px solid rgba(15,23,42,.12); background: rgba(15,23,42,.05); color: #334155;
}
.svc-row:hover .svc-ico-sm  { transform: scale(1.1) rotate(6deg); background: #03080f; color: #fff; border-color: #03080f; }
.svc-row.active .svc-ico-sm { background: #03080f; color: #fff; border-color: #03080f; }

.svc-text-wrap  { flex: 1; width: 100%; }
.svc-row-title  {
  font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 600;
  color: #03080f; margin-bottom: .3rem; letter-spacing: .01em; line-height: 1.3; transition: color .25s;
}
.svc-row-desc   { font-family: 'Roboto', sans-serif; font-size: 1rem; color: #64748b; line-height: 1.65; }
.svc-row-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700; color: #334155;
  margin-top: .5rem; opacity: 0; transform: translateX(-6px);
  transition: opacity .25s, transform .25s, gap .25s;
}
.svc-row:hover .svc-row-link,
.svc-row.active .svc-row-link { opacity: 1; transform: translateX(0); }
.svc-row-link:hover { gap: .65rem; color: #03080f; }

/* Right: dark visual panel */
.svc-panel {
  background: #03080f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 2.5rem; min-height: 480px; position: relative; overflow: hidden;
}
/* Dot grid background */
.svc-panel-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}
.svc-panel-icon {
  width: 100px; height: 100px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; margin-bottom: 2rem;
  background: rgba(255,255,255,.06); border: 1px solid rgb(55 209 254 / 30%);
  color: rgba(255,255,255,.7);
  transition: all .4s cubic-bezier(.34,1.56,.64,1); position: relative; z-index: 1;
}
.svc-panel-title {
  font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 600;
  color: #fff; text-align: center; margin-bottom: .8rem;
  position: relative; z-index: 1; letter-spacing: .02em;
}
.svc-panel-desc {
  font-family: 'Roboto', sans-serif; font-size: .97rem;
  color: rgba(255,255,255,.45); text-align: center; line-height: 1.8; max-width: 280px;
  position: relative; z-index: 1;
}


/* ─── 2.6  Impact / Stats Section ─────────────────────────── */
.impact-sec {
  background: #0a0a0a; padding: var(--section-gap) 0; position: relative; overflow: hidden;
}
.impact-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
/* Efficiency pill label */
.eff-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 50px; padding: .65rem 1.4rem;
  font-size: .95rem; font-weight: 700; color: rgba(255,255,255,.75);
}
/* 2×2 stat widget grid */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-widget {
  background: rgba(0, 0, 0, 1); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg); padding: 1.6rem 1.5rem;
  position: relative; overflow: hidden;
  transition: transform .38s ease, box-shadow .38s ease, border-color .38s;
}
.stat-widget:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.25); box-shadow: 0 16px 44px rgba(255,255,255,.06); }
.sw-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }

/* Monochrome icon box */
.sw-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.1);
}
/* Trend badges */
.sw-trend {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: 'Roboto', sans-serif; font-size: .65rem; font-weight: 700;
  border-radius: 50px; padding: .22rem .6rem;
}
.sw-trend-up   { background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); }
.sw-trend-down { background: rgba(255,255,255,.06); color: rgba(255,255,255,.45); }
.sw-trend-flat { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }

/* Stat numbers and labels */
.sw-num   { font-family: 'Inter', sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; margin-bottom: .25rem; color: #fff; }
.sw-label { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; color: #fff; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .18rem; }
.sw-desc  { font-family: 'Roboto', sans-serif; font-size: .78rem; color: rgba(255,255,255,.38); line-height: 1.5; margin-bottom: .9rem; }

/* Progress bars */
.sw-bar-wrap { height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.sw-bar { height: 100%; border-radius: 2px; background: rgba(255,255,255,.35); animation: swBarGrow 1.6s cubic-bezier(.22,1,.36,1) .5s both; }
.stat-widget:nth-child(1) .sw-bar { --p: 72%; }
.stat-widget:nth-child(2) .sw-bar { --p: 98%; }
.stat-widget:nth-child(3) .sw-bar { --p: 60%; }
.stat-widget:nth-child(4) .sw-bar { --p: 85%; }
@keyframes swBarGrow { from { width: 0; } to { width: var(--p, 80%); } }

/* Sparkline micro-chart */
.sw-spark   { display: flex; align-items: flex-end; gap: 2px; height: 20px; margin-top: .8rem; }
.sw-spark-b { flex: 1; border-radius: 1.5px 1.5px 0 0; background: rgba(255,255,255,.2); animation: swSparkGrow .9s ease both; }
@keyframes swSparkGrow { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.sw-spark-b:nth-child(1) { height: 35%; animation-delay: .06s; }
.sw-spark-b:nth-child(2) { height: 55%; animation-delay: .1s; }
.sw-spark-b:nth-child(3) { height: 42%; animation-delay: .14s; }
.sw-spark-b:nth-child(4) { height: 70%; animation-delay: .18s; }
.sw-spark-b:nth-child(5) { height: 52%; animation-delay: .22s; }
.sw-spark-b:nth-child(6) { height: 85%; animation-delay: .26s; }
.sw-spark-b:nth-child(7) { height: 65%; animation-delay: .30s; }
.sw-spark-b:nth-child(8) { height: 95%; animation-delay: .34s; background: rgba(255,255,255,.5); }


/* ─── 2.7  Portfolio Section ───────────────────────────────── */
.portfolio-sec {
  background: #ffffff; padding: var(--section-gap) 0; position: relative;
}
.portfolio-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
.port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.port-item {
  background: #fff; border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  transition: transform .38s ease, box-shadow .38s ease;
  cursor: pointer; display: flex; flex-direction: column;
}
/* Monochrome top-border reveal */
.port-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: #03080f; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 2;
}
.port-item:hover::before { transform: scaleX(1); }
.port-item:hover { transform: translateY(-6px); box-shadow: 0 22px 58px rgba(15,23,42,.12); }

/* Greyscale image panel */
.port-img { position: relative; overflow: hidden; height: 220px; background: #f1f5f9; }
.port-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter .5s ease, transform .5s ease;
}
.port-item:hover .port-img img { filter: grayscale(60%) brightness(.95); transform: scale(1.05); }

/* Category tag overlay */
.port-cat {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.12);
  border-radius: 50px; padding: .3rem 1rem;
  font-family: 'Roboto', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #334155;
  backdrop-filter: blur(8px);
}
.port-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: #334155; }

/* Arrow button (revealed on hover) */
.port-arrow {
  position: absolute; bottom: 1rem; right: 1rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #03080f; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  opacity: 0; transform: translate(6px, 6px) scale(.8);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.port-item:hover .port-arrow { opacity: 1; transform: translate(0,0) scale(1); }

/* Card text content */
.port-content { padding: 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.port-label { display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: .5rem; }
.port-h { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 600; color: #03080f; margin-bottom: .5rem; line-height: 1.25; }
.port-p { font-family: 'Roboto', sans-serif; font-size: 1rem; color: #64748b; line-height: 1.7; flex: 1; }
.port-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.port-tag {
  display: inline-flex; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: .2rem .65rem; color: #475569; transition: all .22s;
}
.port-tag:hover { background: #03080f; border-color: #03080f; color: #fff; }


/* ─── 2.8  Tech Stack Section ──────────────────────────────── */
.tech-sec {
  background: #fff; padding: var(--section-gap) 0;
  text-align: center; position: relative;
}
.tech-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.1), transparent);
}
/* Tech cards */
.tech-card {
  background: #f8fafc; border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r-lg); padding: 2.1rem 1.4rem;
  transition: transform .38s ease, border-color .38s, box-shadow .38s;
  position: relative; overflow: hidden;
  height: 100%;
}
/* Dot grid on hover */
.tech-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 20px 20px; opacity: 0; transition: opacity .4s;
}
.tech-card:hover::after { opacity: 1; }
.tech-card:hover { transform: translateY(-9px); border-color: rgba(14,165,233,.35); box-shadow: 0 0 40px rgba(14,165,233,.1); }

.tech-icon-wrap {
  width: 72px; height: 72px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.95rem; margin: 0 auto 1.25rem;
  background: #e0f2fe; color: #0ea5e9; border: 1px solid rgba(14,165,233,.2);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}
.tech-card:hover .tech-icon-wrap { transform: scale(1.12) rotate(360deg); background: #0ea5e9; color: #fff; }
.tech-card h4 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: .3rem; letter-spacing: -.02em; }
.tech-card p  { font-size: .875rem; color: #64748b; margin: 0; }


/* ─── 2.9  CTA Section (Home) ──────────────────────────────── */
.cta-sec {
  padding: var(--section-gap) 0; background: #03080f;
  text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
}
/* Shared ring elements — used by both .cta-sec and .about-cta-sec */
.cta-ring-a, .cta-ring-b {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px solid; pointer-events: none;
  animation: ringRot linear infinite;
}
.cta-ring-a { width: 560px; height: 560px; margin: -280px 0 0 -280px; border-color: rgba(255,255,255,.04); animation-duration: 14s; }
.cta-ring-b { width: 760px; height: 760px; margin: -380px 0 0 -380px; border-color: rgba(255,255,255,.025); animation-direction: reverse; animation-duration: 20s; }
@keyframes ringRot { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.cta-sec .container,
.about-cta-sec .container { position: relative; z-index: 2; }

.cta-headline {
  font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.18;
  max-width: 700px; margin: 0 auto 2.5rem; letter-spacing: -.03em; color: #fff;
}


/* ─── 2.10  Home-Specific Responsive Rules ─────────────────── */
/* ═══════════════════════════════════════════════════════════════
   3. ABOUT PAGE STYLES
   Styles exclusive to about.html / the About page.
═══════════════════════════════════════════════════════════════ */

/* ─── 3.1  Page Banner ─────────────────────────────────────── */
.about-banner {
  min-height: 82vh; display: flex; align-items: center;
  padding: 10rem 0 5rem; position: relative; overflow: hidden;
  background: #03080f;
}
/* animated gradient orbs */
.about-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 75% 50%, rgba(14,165,233,.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 45% at 20% 30%, rgba(56,189,248,.09) 0%, transparent 65%),
    radial-gradient(ellipse 30% 35% at 55% 85%, rgba(99,102,241,.07) 0%, transparent 60%);
  animation: aboutBannerOrbs 9s ease-in-out infinite alternate;
}
@keyframes aboutBannerOrbs {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: .75; transform: scale(1.05) translateX(10px); }
  100% { opacity: 1;   transform: scale(1.02) translateY(-8px); }
}
/* Top accent line */
.about-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, #0ea5e9 30%, #38bdf8 60%, transparent 100%);
}
/* Dot grid overlay */
.about-banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
/* Ghost BG watermark */
.about-banner-bg-text {
  position: absolute; right: -2rem; top: 50%; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(9rem, 18vw, 18rem);
  color: rgba(255,255,255,.025); line-height: 1;
  pointer-events: none; user-select: none; letter-spacing: -.06em;
}
.about-banner-content { position: relative; z-index: 2; }

/* Eyebrow */
.about-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 1.5rem;
  animation: fadeUp .65s ease both;
}
.about-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.4); }

/* Banner heading */
.about-h1 {
  font-size: clamp(3rem, 6.5vw, 5.6rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
  margin-bottom: 1.5rem; color: #fff;
  animation: fadeUp .65s ease .1s both;
}
.about-h1 span {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: clamp(3rem, 7.5vw, 6.6rem);
}

/* Banner sub-copy */
.about-banner-sub {
  font-size: 1.12rem; color: rgba(255,255,255,.45);
  max-width: 520px; line-height: 1.85; margin-bottom: 2.8rem;
  animation: fadeUp .65s ease .2s both;
}

/* Stat strip */
.about-stat-strip {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03); backdrop-filter: blur(12px);
  padding: 1.1rem 1.6rem; width: fit-content;
  animation: fadeUp .65s ease .32s both;
}
.about-stat { display: flex; flex-direction: column; padding: 0 1.5rem; border-right: 1px solid rgba(255,255,255,.09); }
.about-stat:first-child { padding-left: 0; }
.about-stat:last-child  { border-right: none; }
.about-stat-num { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .2rem; color: #fff; line-height: 1; }
.about-stat-lbl { font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.32); }


/* About hero CTA row */
.about-hero-ctas { margin-bottom: 2.4rem; }

/* Three.js canvas column */
.about-hero-canvas-col { position: relative; z-index: 2; }
#aboutHeroCanvas { display: block; width: 100%; height: 520px; }

/* ─── 3.2  Company Overview ────────────────────────────────── */
.overview-sec {
  padding: var(--section-gap) 0; background: #fff; position: relative;
}
.overview-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
.overview-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 700;
  line-height: 1.45; letter-spacing: -.025em; color: #0f172a; margin-bottom: 2rem;
}
.overview-lead span { color: rgba(15,23,42,.3); font-weight: 400; }
.overview-body { font-size: 1.08rem; color: #475569; line-height: 1.9; }
/* Vertical rule column divider */
.overview-divider { width: 1px; background: rgba(15,23,42,.1); margin: 0 auto; height: 100%; min-height: 220px; }
/* KPI number blocks */
.overview-kpi { padding: 2rem 0; border-bottom: 1px solid rgba(15,23,42,.1); }
.overview-kpi:last-child { border-bottom: none; }
.overview-kpi-num {
  font-family: 'Inter', sans-serif;
  font-size: 3rem; font-weight: 800; letter-spacing: -.04em; color: #0f172a; line-height: 1; margin-bottom: .3rem;
}
.overview-kpi-label { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }


/* ── Overview: mosaic grid ── */
.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: .75rem;
}
/* Cell layout */
.mosaic-cell--a { grid-column: 1; grid-row: 1; }
.mosaic-cell--b { grid-column: 2; grid-row: 1; }
.mosaic-cell--c { grid-column: 1; grid-row: 2; }
.mosaic-cell--d { grid-column: 2; grid-row: 2; }
.mosaic-cell--e { grid-column: 1 / 3; grid-row: 3; }

.mosaic-cell {
  border-radius: var(--r-md);
  padding: 1.4rem 1.3rem;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 140px;
}

/* Themes */
.mosaic-dark {
  background: #03080f;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 30px rgba(15,23,42,.18);
}
.mosaic-light {
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 4px 20px rgba(15,23,42,.06);
  justify-content: center; align-items: center; text-align: center;
}
.mosaic-mid {
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,.08);
  justify-content: center; align-items: center; text-align: center;
}

/* Dot overlay on dark cells */
.mosaic-dark-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Eyebrow */
.mosaic-eyebrow {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color:rgba(255, 255, 255, 0.78);
  position: relative; z-index: 1; margin-bottom: .25rem;
}
.mosaic-eyebrow--dk { color: #94a3b8; }

/* Big number */
.mosaic-big-num {
  font-family: 'Inter', sans-serif;
  font-size: 3.2rem; font-weight: 900; letter-spacing: -.06em;
  color: #fff; line-height: 1; position: relative; z-index: 1;
}
.mosaic-big-num--sm { font-size: 2.4rem; }
.mosaic-sub-lbl {
  font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color:rgba(255, 255, 255, 0.78);
  position: relative; z-index: 1; margin-top: .3rem;
}

/* Progress bar (dark cell) */
.mosaic-progress {
  margin-top: .9rem; height: 3px;
  background: rgba(255,255,255,.1); border-radius: 2px;
  position: relative; z-index: 1; overflow: hidden;
}
.mosaic-progress-fill {
  height: 100%; width: var(--w);
  background: rgba(255,255,255,.5); border-radius: 2px;
}

/* Corner icon */
.mosaic-corner-icon {
  position: absolute; top: 1rem; right: 1rem;
  color: rgba(255,255,255,.12); font-size: 2rem; z-index: 1;
}

/* Cell B — icon circle */
.mosaic-icon-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: #0f172a; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 1.1rem;
  margin-bottom: .7rem;
}
.mosaic-tag-title {
  font-size: .95rem; font-weight: 800; color: #0f172a; letter-spacing: -.02em;
}
.mosaic-tag-sub {
  font-size: .62rem; color: #94a3b8; margin-top: .15rem;
  font-weight: 500;
}

/* Cell D — SVG ring */
.mosaic-ring-wrap {
  position: relative; width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .6rem;
}
.mosaic-ring-svg { width: 60px; height: 60px; }
.mosaic-ring-val {
  position: absolute; font-family: 'Inter', sans-serif;
  font-size: .85rem; font-weight: 800; color: #0f172a;
}
.mosaic-ring-lbl {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #64748b;
}

/* Cell E — industry icons */
.mosaic-cell--e { min-height: auto; padding: 1.2rem 1.4rem; }
.mosaic-cell--e .mosaic-eyebrow--dk { margin-bottom: .8rem; }
.mosaic-icon-row {
  display: flex; gap: .6rem; margin-bottom: .7rem;
}
.mosaic-icon-row span {
  width: 32px; height: 32px; border-radius: 8px;
  background: #f8fafc; border: 1px solid rgba(15,23,42,.08);
  display: flex; align-items: center; justify-content: center;
  color: #475569; font-size: .75rem;
}
.mosaic-industries-num {
  font-size: .85rem; font-weight: 800; color: #0f172a;
  letter-spacing: -.02em;
}

/* ── Story Visual v2 ── */
.sv2-wrap { display: flex; flex-direction: column; gap: 1rem; }

/* Primary card */
.sv2-primary {
  position: relative; overflow: hidden;
  background: #03080f;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 2.4rem 2rem 2rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.6rem;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  min-height: 350px;
}
.sv2-primary-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(14,165,233,.18) 0%, transparent 65%);
}
.sv2-primary-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 80%);
}

/* Live badge */
.sv2-live {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #38bdf8; background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.25);
  border-radius: 50px; padding: .3rem .9rem;
  position: relative; z-index: 1;
}
.sv2-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #0ea5e9;
  animation: sv2Pulse 1.6s ease-in-out infinite;
}
@keyframes sv2Pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* Ring */
.sv2-ring-outer {
  position: relative; width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  animation: sv2RotateSlow 30s linear infinite;
}
@keyframes sv2RotateSlow { to { transform: rotate(360deg); } }
.sv2-ring-inner {
  position: absolute; display: flex; flex-direction: column; align-items: center;
  animation: sv2RotateSlow 30s linear infinite reverse;
}
.sv2-year {
  font-family: 'Inter', sans-serif; font-size: 2.6rem; font-weight: 900;
  color: #fff; line-height: 1; letter-spacing: -.05em;
}
.sv2-year-lbl {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #0ea5e9; margin-top: .15rem;
}

/* Metrics row */
.sv2-primary-row {
  display: flex; align-items: center; gap: 1.2rem;
  width: 100%; justify-content: center;
  position: relative; z-index: 1;
  padding-top: .6rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.sv2-primary-metric { text-align: center; }
.sv2-m-num {
  display: block;
  font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 900;
  color: #fff; line-height: 1; letter-spacing: -.04em;
}
.sv2-m-lbl {
  display: block;
  font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-top: .2rem;
}
.sv2-primary-divider {
  width: 1px; height: 32px; background: rgba(255,255,255,.1); flex-shrink: 0;
}

/* Chip row */
.sv2-chips { display: flex; flex-direction: column; gap: .65rem; }
.sv2-chip {
  display: flex; align-items: center; gap: .9rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.07);
  border-radius: 12px; padding: .85rem 1.1rem;
  box-shadow: 0 2px 12px rgba(15,23,42,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}

.sv2-chip-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  display: flex; align-items: center; justify-content: center;
  color: #0284c7;
  transition: background .25s ease;
}
.sv2-chip-icon .material-symbols-outlined {
  font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.sv2-chip-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem; font-weight: 700; color: #0f172a;
}
.sv2-chip-sub { font-size: .7rem; color: #94a3b8; margin-top: .1rem; }

/* ── Story Visual (left col) ── */
.story-visual-wrap {
  position: relative;
  padding-bottom: 3.5rem;
  padding-right: 2rem;
}
/* Main dark backdrop */
.story-visual-backdrop {
  position: relative;
  background: #03080f;
  border-radius: 20px;
  overflow: hidden;
  min-height: 320px;
  display: flex; align-items: flex-end;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.svb-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.svb-gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 80% 20%, rgba(14,165,233,.18) 0%, transparent 70%),
              radial-gradient(ellipse 50% 50% at 20% 80%, rgba(56,189,248,.1) 0%, transparent 65%);
}
.svb-bg-year {
  position: absolute; right: -1rem; bottom: -2rem;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(6rem, 12vw, 9rem);
  color: rgba(255,255,255,.04); line-height: 1;
  pointer-events: none; user-select: none; letter-spacing: -.06em;
}
.svb-content {
  position: relative; z-index: 2;
  padding: 2rem 2rem 2.2rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.svb-eyebrow {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #0ea5e9;
}
.svb-big {
  font-family: 'Inter', sans-serif; font-size: 3.8rem; font-weight: 900;
  color: #fff; line-height: 1; letter-spacing: -.05em;
}
.svb-loc {
  font-size: .75rem; color: rgba(255,255,255,.45); margin-top: .3rem;
  display: flex; align-items: center; gap: .4rem;
}
.svb-loc i { font-size: .65rem; color: #0ea5e9; }

/* Floating cards */
.story-float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.07);
  display: flex; align-items: center; gap: .9rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.story-float-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(15,23,42,.18);
}

/* Card 1 – AI-First */
.sfc-ai {
  top: -1.2rem; right: -1.8rem;
  padding: .85rem 1.1rem;
  min-width: 185px;
}
.sfc-icon-wrap {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
}
.sfc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem; font-weight: 700; color: #0f172a;
  line-height: 1.2;
}
.sfc-sub {
  font-size: .68rem; color: #94a3b8; margin-top: .15rem; line-height: 1.3;
}

/* Card 2 – 50+ Projects */
.sfc-projects {
  bottom: 1.4rem; right: -1.8rem;
  padding: 1rem 1.3rem;
  flex-direction: column; align-items: flex-start; gap: .25rem;
  min-width: 130px;
}
.sfc-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem; font-weight: 900; color: #0f172a; line-height: 1;
  letter-spacing: -.04em;
}
.sfc-stat-label {
  font-size: .68rem; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: .07em; line-height: 1.3;
}
.sfc-sparkline {
  display: flex; align-items: flex-end; gap: 3px; margin-top: .5rem; height: 22px;
}
.sfc-sparkline span {
  display: block; width: 5px; border-radius: 2px;
  background: linear-gradient(180deg, #0ea5e9, #38bdf8);
}
.sfc-sparkline span:nth-child(1) { height: 10px; }
.sfc-sparkline span:nth-child(2) { height: 16px; }
.sfc-sparkline span:nth-child(3) { height: 12px; }
.sfc-sparkline span:nth-child(4) { height: 20px; }
.sfc-sparkline span:nth-child(5) { height: 14px; }
.sfc-sparkline span:nth-child(6) { height: 22px; }

/* Card 3 – 98% Satisfaction */
.sfc-satisfaction {
  bottom: -1.6rem; left: 1.2rem;
  padding: .85rem 1.1rem;
  min-width: 175px;
}
.sfc-ring-wrap {
  position: relative; width: 50px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sfc-ring-wrap svg { width: 50px; height: 50px; }
.sfc-ring-val {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-size: .7rem; font-weight: 800; color: #0ea5e9;
}
@media (max-width: 991px) {
  .story-visual-wrap { padding-right: 0; padding-bottom: 5rem; }
  .sfc-ai  { right: 0; }
  .sfc-projects { right: 0; }
}

/* ── Overview: story / timeline ── */
.overview-story-col { padding-left: 2.5rem; }
.overview-story-sub {
  font-size: 1rem;
  color: #000;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.overview-timeline { position: relative; padding-left: 0; }
.overview-timeline::before {
  content: ''; position: absolute; left: 4px; top: .5rem; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, #0f172a 0%, rgba(15,23,42,.08) 100%);
  border-radius: 2px;
}
.overview-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  column-gap: 1rem;
  padding-bottom: 2.2rem;
  padding-left: 1.8rem;
}
.overview-tl-item:last-child { padding-bottom: 0; }
.overview-tl-dot {
  position: absolute; left: 0; top: .38rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: #0f172a; border: 2px solid #f1f5f9;
  box-shadow: 0 0 0 2px #0f172a;
}
.overview-tl-year {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #64748b; padding-top: .15rem;
  white-space: nowrap;
}
.overview-tl-text {
  font-size: .97rem; color: #475569; line-height: 1.8; margin: 0;
}

@media (max-width: 991px) {
  .overview-story-col { padding-left: 0; }
  .overview-img { height: 300px; }
}

/* ─── 3.3  Vision & Mission ────────────────────────────────── */
.vm-sec {
  padding: var(--section-gap) 0; background: #03080f; position: relative;
}
.vm-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent 100%);
}
.vm-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: start; }
.vm-divider { background: rgba(255,255,255,.1); width: 1px; }
.vm-col { padding: 0 3.5rem; }
.vm-col:first-child { padding-left: 0; }
.vm-col:last-child  { padding-right: 0; }
.vm-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .6rem;
}
.vm-label::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.vm-title  { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1.2; margin-bottom: 1.2rem; }
.vm-body   { font-size: 1.05rem; color: rgba(255,255,255,.45); line-height: 1.88; }
.vm-frame  {
  margin-top: 2.5rem; padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
}
.vm-frame-line {
  font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.6);
  display: flex; align-items: flex-start; gap: .7rem; line-height: 1.6; margin-bottom: .8rem;
}
.vm-frame-line:last-child { margin-bottom: 0; }
.vm-frame-line::before { content: '—'; color: rgba(255,255,255,.2); flex-shrink: 0; margin-top: .05em; }


/* ─── 3.3a  Story Timeline ─────────────────────────────────── */
.story-tl-sec {
  padding: 3rem 0 4rem;
  background: #fff;
}
.story-tl-track {
  position: relative;
  padding-left: 2.2rem;
  max-width: 680px;
}
.story-tl-track::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, #0f172a 0%, rgba(15,23,42,.12) 100%);
}
.story-tl-item {
  position: relative;
  padding-bottom: 2.4rem;
}
.story-tl-item:last-child { padding-bottom: 0; }
.story-tl-dot {
  position: absolute;
  left: -2.2rem;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0f172a;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 2px #0f172a;
}
.story-tl-text {
  font-size: 1rem;
  color: #1e293b;
  line-height: 1.75;
  margin: 0;
}

/* ─── 3.3b  Our Evolution ──────────────────────────────────── */
.evolution-sec {
  padding: var(--section-gap) 0;
  background: #03080f; position: relative; overflow: hidden;
}
.evolution-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,.4) 40%, rgba(56,189,248,.3) 65%, transparent);
}
.evolution-intro {
  font-size: .95rem; color: rgba(255,255,255,.55); line-height: 1.75; margin: 0;
}

/* Horizontal timeline */
.evo-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 2.5rem;
}
.evo-track {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.08);
}
.evo-track::after {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 60%, rgba(56,189,248,.2) 100%);
}

.evo-item {
  position: relative;
  padding: 0 1.5rem 0 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.evo-dot {
  position: absolute; top: -2.88rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: #334155;
  border: 2px solid rgba(255,255,255,.15);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.evo-item--active .evo-dot,
.evo-item:hover .evo-dot {
  background: #0ea5e9;
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(14,165,233,.2);
}
.evo-year {
  font-family: 'Inter', sans-serif;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #64748b;
  transition: color .3s ease;
}
.evo-item--active .evo-year,
.evo-item:hover .evo-year { color: #38bdf8; }

.evo-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 1.4rem 1.3rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
  height: 100%;
}
.evo-item--active .evo-card,
.evo-item:hover .evo-card {
  background: rgba(14,165,233,.07);
  border-color: rgba(14,165,233,.25);
  transform: translateY(-3px);
}
.evo-card-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  transition: background .3s ease, color .3s ease;
}
.evo-card-icon .material-symbols-outlined {
  font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.evo-item--active .evo-card-icon,
.evo-item:hover .evo-card-icon {
  background: rgba(14,165,233,.15);
  border-color: rgba(14,165,233,.3);
  color: #38bdf8;
}
.evo-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.25;
}
.evo-card-body {
  font-size: .8rem; color: rgba(255,255,255,.45); line-height: 1.65; margin: 0;
}

/* ── What We Do ── */
.what-we-do-wrap {
  margin-top: 4rem;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 3rem;
}
.what-we-do-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .4rem;
}
.what-we-do-lead {
  font-size: .95rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 1.5rem;
}
.what-we-do-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.what-we-do-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .9rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: .9rem 1rem;
}
.what-we-do-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.07);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.what-we-do-icon .material-symbols-outlined {
  font-size: 1.1rem;
  color: rgba(255,255,255,.75);
}

@media (max-width: 991px) {
  .evo-timeline {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    padding-top: 0;
  }
  .evo-track { display: none; }
  .evo-dot { display: none; }
}
@media (max-width: 575px) {
  .evo-timeline { grid-template-columns: 1fr; }
}

/* ─── 3.4  Our Approach ────────────────────────────────────── */
.approach-sec {
  background: #fff; position: relative; overflow: hidden;
  padding: var(--section-gap) 0;
}
/* Home page approach — light bg overrides */
.approach-home .approach-home-sub {
  font-size: .95rem;
  color: #475569;
  line-height: 1.75;
  margin-bottom: 0;
}
.approach-home .apstep-title {
  color: #0f172a;
}
.approach-home .apstep-desc {
  color: #64748b;
}
.approach-home .apstep-num {
  color: #0f172a;
  border-color: rgba(15,23,42,.15);
}
.approach-home .apstep-icon {
  background: #e0f2fe;
  border-color: rgba(14,165,233,.2);
  color: #0ea5e9;
}
.approach-home .approach-line {
  background: rgba(15,23,42,.1);
}

/* Intro strip */
.approach-intro-strip {
  position: relative;
}

.approach-intro-text {
  font-size: .95rem; color: #4b5563; line-height: 1.75; margin: 0;
}

/* Stacked rows */
/* .approach-rows {
  padding: 0 0 var(--section-gap);
} */
.approach-row {
  display: grid;
  grid-template-columns: 64px 56px 1fr 40px;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
  cursor: default;
  transition: background .25s ease;
  position: relative;
}
.approach-row::before {
  content: ''; position: absolute; inset: 0 -24px;
  border-radius: 12px; background: rgba(14,165,233,.0);
  transition: background .3s ease;
  pointer-events: none;
}
.approach-row:hover::before { background: rgba(14,165,233,.05); }
.approach-row:last-child { border-bottom: none; }

/* Ghost number */
.approach-row-num {
  font-family: 'Inter', sans-serif;
  font-size: 2.6rem; font-weight: 900; line-height: 1;
  color: rgba(15,23,42,.08);
  letter-spacing: -.06em;
  transition: color .3s ease;
  user-select: none;
}
.approach-row:hover .approach-row-num { color: rgba(14,165,233,.3); }

/* Icon box */
.approach-row-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.1);
  display: flex; align-items: center; justify-content: center;
  color: #475569;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.approach-row-icon .material-symbols-outlined {
  font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.approach-row:hover .approach-row-icon {
  background: rgba(14,165,233,.15);
  border-color: rgba(14,165,233,.3);
  color: #38bdf8;
}

/* Title + text */
.approach-row-body { position: relative; z-index: 1; }
.approach-row-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; font-weight: 700; color: #0f172a;
  margin-bottom: .35rem; line-height: 1.25;
  transition: color .3s ease;
}
.approach-row:hover .approach-row-title { color: #0ea5e9; }
.approach-row-text {
  font-size: .85rem; color: #64748b; line-height: 1.7; margin: 0;
  transition: color .3s ease;
}
.approach-row:hover .approach-row-text { color: #475569; }

/* Check icon */
.approach-row-check {
  display: flex; align-items: center; justify-content: flex-end;
  color: rgba(15,23,42,.12); transition: color .3s ease;
}
.approach-row-check .material-symbols-outlined {
  font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.approach-row:hover .approach-row-check { color: #0ea5e9; }

@media (max-width: 767px) {
  .approach-row { grid-template-columns: 48px 44px 1fr; }
  .approach-row-check { display: none; }
  .approach-row-num { font-size: 2rem; }
}
@media (max-width: 480px) {
  .approach-row { grid-template-columns: 1fr; gap: .8rem; }
  .approach-row-num { display: none; }
}

/* ─── 3.4a  Why NexaTech ───────────────────────────────────── */
.why-nt-sec {
  background: #03080f;
  padding: var(--section-gap) 0;
  position: relative; overflow: hidden;
}

.why-nt-header {
  text-align: center; margin-bottom: 3.5rem;
}
.why-nt-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin: .6rem 0 1rem;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.why-nt-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.55);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Cards grid */
.why-nt-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 991px) { .why-nt-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 575px)  { .why-nt-cards { grid-template-columns: 1fr; } }

/* Card */
.why-nt-card {
  position: relative;
  border-radius: 18px;
  padding: 1px; /* border trick */
  background: rgba(255,255,255,.07);
  transition: background .35s ease;
  cursor: default;
}
.why-nt-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14,165,233,.5), rgba(56,189,248,.2) 50%, rgba(99,102,241,.3));
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.why-nt-card:hover::before { opacity: 1; }

/* Glow behind card */
.why-nt-card-glow {
  position: absolute; inset: -8px;
  border-radius: 24px;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(14,165,233,.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none; z-index: 0;
}
.why-nt-card:hover .why-nt-card-glow { opacity: 1; }

.why-nt-card-inner {
  position: relative; z-index: 1;
  background: #0a1628;
  border-radius: 17px;
  padding: 2rem 1.6rem 1.8rem;
  display: flex; flex-direction: column; gap: .55rem;
  height: 100%;
  transition: background .35s ease;
}
.why-nt-card:hover .why-nt-card-inner { background: #0c1e35; }

.why-nt-card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(14,165,233,.1);
  border: 1px solid rgba(14,165,233,.2);
  display: flex; align-items: center; justify-content: center;
  color: #38bdf8; margin-bottom: .4rem;
  transition: background .35s ease, border-color .35s ease;
}
.why-nt-card:hover .why-nt-card-icon {
  background: rgba(14,165,233,.2);
  border-color: rgba(14,165,233,.45);
}
.why-nt-card-icon .material-symbols-outlined {
  font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.why-nt-card-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #0ea5e9;
}
.why-nt-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.2;
}
.why-nt-card-body {
  font-size: .8rem; color: rgba(255,255,255,.42); line-height: 1.7; margin: 0;
  transition: color .35s ease;
}
.why-nt-card:hover .why-nt-card-body { color: rgba(255,255,255,.6); }

/* ─── 3.4b  Our Vision ─────────────────────────────────────── */
.vision-sec {
  background: #fff;
  padding: var(--section-gap) 0;
  position: relative; overflow: hidden;
}

.vision-sec::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(14,165,233,.06) 0%, transparent 65%);
}
.vision-wrap {
  max-width: 700px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1;
}
.vision-eyebrow {
  font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(15,23,42,.35); margin-bottom: 2.2rem; display: block;
}
.vision-quote {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 600; color: #0f172a;
  line-height: 1.55; letter-spacing: -.01em;
  margin: 0 0 2.4rem; border: none; padding: 0;
  font-style: italic;
}
.vision-line {
  width: 40px; height: 1px; background: rgba(15,23,42,.15);
  margin: 0 auto 1.2rem;
}
.vision-attribution {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(15,23,42,.3); margin: 0;
}

/* ─── 3.4  Values / Approach ───────────────────────────────── */
.values-sec {
  padding: var(--section-gap) 0; background: #ffffff; position: relative;
}
.values-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid rgba(15,23,42,.1); border-radius: var(--r-xl); overflow: hidden;
}
.value-card {
  padding: 2.5rem 2.2rem;
  border-right: 1px solid rgba(15,23,42,.1);
  border-bottom: 1px solid rgba(15,23,42,.1);
  transition: background .3s ease; position: relative;
}
.value-card:hover { background: #f8fafc; }
.value-card:nth-child(3n)        { border-right: none; }
.value-card:nth-last-child(-n+3) { border-bottom: none; }
/* Top accent line on hover */
.value-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: #0f172a; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.value-card:hover::before  { transform: scaleX(1); }
.value-card-num   { font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 900; color: rgba(15,23,42,.08); line-height: 1; margin-bottom: 1rem; letter-spacing: -.04em; }
.value-card-title { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: .8rem; letter-spacing: -.01em; }
.value-card-body  { font-size: .95rem; color: #64748b; line-height: 1.75; }


/* ─── 3.5  Why Nexa Tech ───────────────────────────────────── */
.why-sec {
  padding: var(--section-gap) 0; background: #03080f; position: relative; overflow: hidden;
}
.why-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent 100%);
}
/* Large BG watermark text */
.why-bg-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(8rem, 20vw, 20rem);
  color: rgba(255,255,255,.015); line-height: 1;
  pointer-events: none; user-select: none; white-space: nowrap; letter-spacing: -.08em;
}
.why-headline { font-size: clamp(2.2rem, 4.5vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #fff; margin-bottom: 1.5rem; }
.why-headline span {
    font-style: normal;
    color: rgba(255,255,255,.25);
    font-weight: 300;
    background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.why-lead  { font-size: 1.15rem; color: rgba(255,255,255,.45); line-height: 1.85; max-width: 520px; margin-bottom: 3.5rem; }
.why-list  { list-style: none; padding: 0; }
.why-list li {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.7;
}
.why-list li:last-child { border-bottom: none; }
.why-list-num {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: .78rem;
  color: rgba(255,255,255,.2); letter-spacing: .06em; min-width: 28px; padding-top: .15em;
}
.why-list-text strong { display: block; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .35rem; }
/* Right framed quote block */
.why-frame {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl);
  padding: 3rem 2.5rem; background: rgba(255,255,255,.025); height: 100%;
}
.why-frame-quote {
  font-family: 'Inter', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700; line-height: 1.55; letter-spacing: -.02em;
  color: rgba(255,255,255,.75); margin-bottom: 2.5rem;
}
.why-frame-quote span { color: #fff; }
.why-frame-divider { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 2rem; }
.why-frame-row  { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.why-frame-row:last-child { margin-bottom: 0; }
.why-frame-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-size: .95rem;
}
.why-frame-row-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; color: #fff; margin-bottom: .15rem; }
.why-frame-row-sub   { font-size: .82rem; color: rgba(255,255,255,.35); }


/* ─── 3.5b  Final Statement ────────────────────────────────── */
.final-statement-sec {
  background: #03080f;
  padding: var(--section-gap) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.final-stmt-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14,165,233,.1) 0%, transparent 65%);
}
.final-stmt-wrap {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.final-stmt-text {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.5;
  letter-spacing: -.02em;
  margin-bottom: 2.6rem;
}
.final-stmt-text span {
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.final-stmt-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 2.2rem;
  border-radius: 50px;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 24px rgba(14,165,233,.35);
}
.final-stmt-btn:hover {
  opacity: .9;
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(14,165,233,.5);
  color: #fff;
}

/* ─── 3.6  Team / Culture ──────────────────────────────────── */
.team-sec {
  padding: var(--section-gap) 0; background: #f1f5f9; position: relative;
}

.culture-statement {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.55; color: #0f172a;
  max-width: 720px; margin: 0 auto 4.5rem; text-align: center;
}
.culture-statement span { font-style: italic; color: rgba(15,23,42,.35); font-weight: 400; }
.culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.culture-card {
  background: #fff; border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-lg); padding: 2rem 1.6rem;
  transition: transform .3s ease, box-shadow .3s ease; text-align: center;
}
.culture-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15,23,42,.1); }
.culture-card-icon {
  width: 50px; height: 50px; border-radius: 14px;
  background: #f1f5f9; border: 1px solid rgba(15,23,42,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #334155; margin: 0 auto 1.2rem;
}
.culture-card-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; color: #0f172a; margin-bottom: .6rem; }
.culture-card-body  { font-size: .9rem; color: #64748b; line-height: 1.7; }


/* ─── 3.7  Closing CTA Strip (About) ──────────────────────── */
.about-cta-sec {
  padding: 6rem 0; background: #03080f;
  text-align: center; border-top: 1px solid rgba(255,255,255,.07);
  position: relative; overflow: hidden;
}
/* .cta-ring-a, .cta-ring-b, @keyframes ringRot, and .cta-headline
   are already declared in section 2.9 and shared with the home CTA. */
.cta-headline span { 
  font-style: normal; 
  color: rgba(255,255,255,.3); 
  background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}


/* ─── 3.8  About-Specific Responsive Rules ─────────────────── */
/* ══════════════════════════════════════════════════════════════
   Additional Services Page Styles (If Needed)
   All rules below are strictly scoped to services.html.
   No shared/global styles are redefined here.
   Sections: Banner · Overview · Service Cards · Process ·
             Why Us · CTA · Responsive
══════════════════════════════════════════════════════════════ */

/* ─── SERVICES INTRO ──────────────────────────────────────── */
.svc-intro-sec {
  background: #fff;
  padding: var(--section-gap) 0;
  position: relative;
}
.svc-intro-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.08);
}
.svc-intro-divider {
  width: 1px;
  height: 160px;
  background: linear-gradient(to bottom, transparent, rgba(15,23,42,.15) 40%, rgba(15,23,42,.15) 60%, transparent);
}
.svc-intro-body {
  font-size: 1rem;
  color: #374151;
  line-height: 1.78;
  margin-bottom: .9rem;
}
.svc-intro-body:last-child { margin-bottom: 0; }

/* ─── SERVICES BANNER ─────────────────────────────────────── */
/* Mirrors .about-banner: dark bg, dot grid, accent line, ghost text */
.svc-banner {
  min-height: 72vh;
  display: flex; align-items: center;
  padding: 10rem 0 5rem;
  position: relative; overflow: hidden;
  background: #03080f;
}
.svc-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.25) 70%,
    transparent 100%);
}
/* Dot grid — matches hero-dots / about-banner-dots */
.svc-banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
/* Ghost watermark — matches about-banner-bg-text */
.svc-banner-bg-text {
  position: absolute; right: -20rem; top: 50%; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(9rem, 18vw, 18rem);
  color: rgba(255,255,255,.022); line-height: 1;
  pointer-events: none; user-select: none; letter-spacing: -.06em;
}
.svc-banner-content { position: relative; z-index: 2; }

/* Eyebrow — mirrors about-eyebrow */
.svc-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 1.5rem;
  animation: fadeUp .65s ease both;
}
.svc-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.4); }

/* Banner H1 — mirrors about-h1 */
.svc-h1 {
  font-size: clamp(3rem, 6vw, 4.75rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.04em;
  margin-bottom: 1.5rem; color: #fff;
  animation: fadeUp .65s ease .1s both;
}
.svc-h1 span {
  font-family: 'Inter', sans-serif; font-style: normal;
  font-weight: 300; color: rgba(255,255,255,.45);
}

/* Banner sub-copy */
.svc-banner-sub {
  font-size: 1.12rem; color: rgba(255,255,255,.45);
  max-width: 620px; line-height: 1.85; margin-bottom: 2.8rem;
  animation: fadeUp .65s ease .2s both;
}

/* Stat strip — mirrors about-stat-strip exactly */
.svc-stat-strip {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.03); backdrop-filter: blur(12px);
  padding: 1.1rem 1.6rem; width: fit-content;
  animation: fadeUp .65s ease .32s both;
}
.svc-stat { display: flex; flex-direction: column; padding: 0 1.5rem; border-right: 1px solid rgba(255,255,255,.09); }
.svc-stat:first-child { padding-left: 0; }
.svc-stat:last-child  { border-right: none; }
.svc-stat-num { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .2rem; color: #fff; line-height: 1; }
.svc-stat-lbl { font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.32); }

/* Entry animation shared with about/home banner */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }


/* ─── SERVICES OVERVIEW ────────────────────────────────────── */
/* Light section — mirrors overview-sec from about */
.svcov-sec {
  padding: var(--section-gap) 0;
  background: #fff; position: relative;
}
.svcov-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
/* Editorial lead copy — mirrors overview-lead */
.svcov-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 700; line-height: 1.45; letter-spacing: -.025em;
  color: #0f172a; margin-bottom: 1.5rem;
}
.svcov-lead span { color: rgba(15,23,42,.3); font-weight: 400; }
.svcov-body { font-size: 1.08rem; color: #475569; line-height: 1.9; }

/* Right column: three mini capability pills */
.svcov-pills { display: flex; flex-direction: column; gap: .75rem; }
.svcov-pill {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.4rem;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-md); background: #fff;
  transition: box-shadow .28s ease, transform .28s ease;
}
.svcov-pill:hover { transform: translateX(6px); box-shadow: 0 6px 24px rgba(15,23,42,.07); }
.svcov-pill-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.05); border: 1px solid rgba(15,23,42,.1);
  color: #334155; font-size: .9rem;
}
.svcov-pill-text { font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 600; color: #0f172a; }


/* ─── SERVICE CARDS ────────────────────────────────────────── */
/* Dark section — full-width card grid */
.srvcards-sec {
  padding: var(--section-gap) 0;
  background: #03080f; position: relative;
}
.srvcards-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

/* 3-column grid on desktop, 2 on tablet, 1 on mobile */
.srv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Individual service card */
.srv-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-xl);
  padding: 2.4rem 2rem;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .38s ease, border-color .38s ease, box-shadow .38s ease;
}
/* Top rule reveal on hover — mirrors port-item and value-card pattern */
.srv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.55); transform: scaleX(0); transform-origin: left;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
}
.srv-card:hover::before { transform: scaleX(1); }
.srv-card:hover {
  transform: translateY(-7px);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Subtle dot grid within card — mirrors tech-card pattern */
.srv-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 22px 22px; opacity: 0; transition: opacity .4s;
}
.srv-card:hover::after { opacity: 1; }

/* Card number badge */
.srv-card-num {
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; color: rgba(255,255,255,.2); margin-bottom: 1.6rem;
  position: relative; z-index: 1;
}

/* Icon box — matches svc-panel-icon and tech-icon-wrap proportions */
.srv-icon {
  width: 58px; height: 58px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1.5rem;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
  position: relative; z-index: 1; flex-shrink: 0;
}
.srv-card:hover .srv-icon { transform: scale(1.1) rotate(8deg); background: rgba(255,255,255,.12); color: #fff; }

/* Card title */
.srv-card-title {
  font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700;
  color: #fff; margin-bottom: .75rem; letter-spacing: -.01em; line-height: 1.25;
  position: relative; z-index: 1;
}

/* Card body copy */
.srv-card-body {
  font-family: 'Roboto', sans-serif; font-size: .95rem;
  color: rgba(255,255,255,.45); line-height: 1.8;
  flex: 1; margin-bottom: 1.5rem; position: relative; z-index: 1;
}

/* Feature list inside card — mirrors why-list pattern */
.srv-card-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.srv-card-list li {
  display: flex; align-items: center; gap: .65rem;
  font-family: 'Roboto', sans-serif; font-size: .85rem;
  color: rgba(255,255,255,.45); padding: .45rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.srv-card-list li:first-child { border-top: none; }
.srv-card-list li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.35); flex-shrink: 0;
}

/* Card footer link — mirrors svc-row-link */
.srv-card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700;
  color: rgba(255,255,255,.35); margin-top: 1.5rem;
  position: relative; z-index: 1;
  transition: color .25s, gap .25s;
}
.srv-card-link i { font-size: .72rem; transition: transform .25s; }
.srv-card:hover .srv-card-link { color: rgba(255,255,255,.8); gap: .65rem; }
.srv-card:hover .srv-card-link i { transform: translateX(3px); }


/* ─── PROCESS / HOW WE WORK ────────────────────────────────── */
/* Light section — numbered step layout */
.process-sec {
  padding: var(--section-gap) 0;
  background: #ffffff; position: relative;
}
.process-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}

/* Vertical connector timeline — desktop */
.process-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  row-gap: 0;
  position: relative;
}

/* Centre spine line */
.process-spine {
  position: relative; display: flex; flex-direction: column; align-items: center;
}
.process-spine::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: #e9e9e9;
  transform: translateX(-50%);
}

/* Step node on the spine */
.process-node {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(15,23,42,.15);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 800;
  letter-spacing: .06em; color: rgba(15,23,42,.35);
  position: relative; z-index: 2; flex-shrink: 0; margin: 2rem 0;
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.process-node.active {
  background: #03080f; border-color: #03080f;
  color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.18);
}

/* Left / right step content blocks */
.process-step {
  padding: 2.5rem 2.8rem;
  position: relative;
}
/* Horizontal connector to spine */
.process-step.left  { text-align: right; border-right: 1px solid rgba(15,23,42,.08); }
.process-step.right { text-align: left;  border-left:  1px solid rgba(15,23,42,.08); }
/* Alternate step shading */
.process-step.shaded { background: #f8fafc; }

.process-step-num {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(15,23,42,.25); margin-bottom: .6rem;
}
.process-step-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: rgba(15,23,42,.05); border: 1px solid rgba(15,23,42,.1);
  color: #334155; margin-bottom: 1.2rem;
  transition: background .3s, color .3s;
}
.process-step.left  .process-step-icon { margin-left: auto; }
.process-step.right .process-step-icon { margin-right: auto; }

.process-step-title {
  font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: #0f172a; margin-bottom: .6rem; letter-spacing: -.01em;
}
.process-step-body {
  font-family: 'Roboto', sans-serif; font-size: .95rem;
  color: #64748b; line-height: 1.8; max-width: 320px;
}
.process-step.left  .process-step-body { margin-left: auto; }
.process-step.right .process-step-body { margin-right: auto; }


/* ─── FUTURE READY ────────────────────────────────────────── */
.svc-future-sec {
  background: #03080f;
  padding: var(--section-gap) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.svc-future-sec::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(14,165,233,.08) 0%, transparent 65%);
}
.svc-future-wrap {
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.svc-future-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 1.6rem;
}
.svc-future-text {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  margin-bottom: .5rem;
}
.svc-future-bold {
  color: rgba(255,255,255,.85);
  font-weight: 600;
  margin-top: .6rem;
}

/* ─── RESULTS / IMPACT ────────────────────────────────────── */
.svc-impact-sec {
  background: #ffffff;
  padding: var(--section-gap) 0;
  border-top: 1px solid rgba(15,23,42,.07);
}
.svc-impact-lead {
  font-size: 1rem;
  color: #475569;
  margin-top: .8rem;
  margin-bottom: 0;
}
.svc-impact-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.svc-impact-list li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1rem;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.5;
}
.svc-impact-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,.08);
  display: flex; align-items: center; justify-content: center;
  color: #0ea5e9;
  flex-shrink: 0;
  font-size: .95rem;
  transition: background .25s, color .25s;
}
.svc-impact-list li:hover .svc-impact-icon {
  background: #e0f2fe;
  color: #0284c7;
}

/* ─── WHY CHOOSE OUR SERVICES ─────────────────────────────── */
/* Dark section — typography-driven, mirrors why-sec from about */
.srvwhy-sec {
  padding: var(--section-gap) 0;
  background: #0a0a0a; position: relative; overflow: hidden;
}
.srvwhy-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent 100%);
}
/* Ghost BG text — mirrors why-bg-text */
.srvwhy-bg-text {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(8rem,20vw,20rem);
  color: rgba(255,255,255,.012); line-height: 1;
  pointer-events: none; user-select: none; white-space: nowrap; letter-spacing: -.08em;
}

/* Headline — mirrors why-headline */
.srvwhy-headline {
  font-size: clamp(2.2rem,4.5vw,4rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.1; color: #fff; margin-bottom: 1.5rem;
}
.srvwhy-headline span {
    font-style: normal;
    color: #37D1FE;
    background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
.srvwhy-lead { font-size: 1.15rem; color: rgba(255,255,255,.45); line-height: 1.85; max-width: 520px; margin-bottom: 3.5rem; }

/* Strength item list — mirrors why-list */
.srvwhy-list { list-style: none; padding: 0; }
.srvwhy-list li {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 1rem; color: rgba(255,255,255,.6); line-height: 1.7;
}
.srvwhy-list li:last-child { border-bottom: none; }
.srvwhy-list-num {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: .78rem;
  color: rgba(255,255,255,.2); letter-spacing: .06em; min-width: 28px; padding-top: .15em;
}
.srvwhy-list-text strong {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .35rem;
}

/* Right framed panel — mirrors why-frame */
.srvwhy-frame {
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl);
  padding: 3rem 2.5rem; background: rgba(255,255,255,.025); height: 100%;
  display: flex; flex-direction: column; gap: 1.5rem;
}
/* Large stat number inside the frame */
.srvwhy-frame-stat { border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 1.5rem; }
.srvwhy-frame-stat:last-of-type { border-bottom: none; }
.srvwhy-frame-num {
  font-family: 'Inter', sans-serif; font-size: 3.2rem; font-weight: 900;
  letter-spacing: -.04em; color: #fff; line-height: 1;
}
.srvwhy-frame-label {
  font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.32); margin-top: .3rem;
}
.srvwhy-frame-desc {
  font-family: 'Roboto', sans-serif; font-size: .9rem;
  color: rgba(255,255,255,.42); line-height: 1.65; margin-top: .5rem;
}


/* ─── SERVICES CTA ────────────────────────────────────────── */
/* Mirrors .about-cta-sec — dark bg, rings, white btn */
.srvcta-sec {
  padding: var(--section-gap) 0; background: #03080f;
  text-align: center; position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
}
.srvcta-sec .container { position: relative; z-index: 2; }


/* ─── SERVICES PAGE — RESPONSIVE ──────────────────────────── */
/* ═══════════════════════════════════════════════════
   NEXA TECH · Portfolio Page
   Design System: Black & White — aligned to Home / About / Services
   Fonts: Inter (display) + Roboto (body)
═══════════════════════════════════════════════════ */


/* ─── SHARED PORTFOLIO CARD SYSTEM (from Home page) ─ */
.port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.port-item {
  background: #fff; border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  transition: transform .38s ease, box-shadow .38s ease;
  cursor: pointer; display: flex; flex-direction: column;
}
.port-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: #03080f; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 2;
}
.port-item:hover::before { transform: scaleX(1); }
.port-item:hover { transform: translateY(-6px); box-shadow: 0 22px 58px rgba(15,23,42,.12); }

.port-img { position: relative; overflow: hidden; height: 220px; background: #f1f5f9; }


.port-cat {
  position: absolute; top:.9rem; left:.9rem; z-index:2;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.12);
  border-radius: 50px; padding: .3rem 1rem;
  font-family: 'Roboto', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #334155;
  backdrop-filter: blur(8px);
}
.port-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: #334155; }

.port-arrow {
  position: absolute; bottom: 1rem; right: 1rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #03080f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  opacity: 0; transform: translate(6px, 6px) scale(.8);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.port-item:hover .port-arrow { opacity:1; transform:translate(0,0) scale(1); }

.port-content { padding: 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.port-label { display:inline-block; font-family:'Roboto',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#94a3b8; margin-bottom:.5rem; }
.port-h { font-family:'Inter',sans-serif; font-size:1.25rem; font-weight:600; color:#03080f; margin-bottom:.5rem; line-height:1.25; }
.port-p { font-family:'Roboto',sans-serif; font-size:1rem; color:#64748b; line-height:1.7; flex:1; }
.port-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.port-tag {
  display:inline-flex; align-items:center;
  font-family:'Roboto',sans-serif; font-size:.8rem; font-weight:700; letter-spacing:.04em;
  background:#f1f5f9; border:1px solid #e2e8f0; border-radius:6px;
  padding:.2rem .65rem; color:#475569; transition:all .22s;
}
.port-tag:hover { background:#03080f; border-color:#03080f; color:#fff; }

/* ─── CTA RINGS (from Home/Services) ────────────── */
.cta-ring-a, .cta-ring-b {
  position: absolute; top:50%; left:50%;
  border-radius:50%; border:1px solid; pointer-events: none;
  animation: ringRot linear infinite;
}
.cta-ring-a { width:560px;height:560px;margin:-280px 0 0 -280px; border-color:rgba(255,255,255,.04); animation-duration:14s; }
.cta-ring-b { width:760px;height:760px;margin:-380px 0 0 -380px; border-color:rgba(255,255,255,.025); animation-direction:reverse; animation-duration:20s; }
@keyframes ringRot { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cta-headline { font-size: clamp(2rem,4.2vw,3.4rem); font-weight:800; line-height:1.18; max-width:700px; margin:0 auto 2.5rem; letter-spacing:-.03em; color:#fff; }

/* Text gradient utilities (kept from shared system — do not modify) */
.t-brand { background: linear-gradient(135deg, #cbefff, #37D1FE); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.t-cool  { background: linear-gradient(135deg,#10b981,#0ea5e9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ══════════════════════════════════════════════════════════════
   Additional Portfolio Page Styles (If Needed)
   All rules below are strictly scoped to portfolio.html.
   No shared/global styles are redefined here.
   Sections: Banner · Featured · Filter + Grid · Case Study · CTA
══════════════════════════════════════════════════════════════ */

/* ─── 1. PAGE BANNER ─────────────────────────────── */
.port-banner {
  min-height: 72vh; display: flex; align-items: center;
  padding: 10rem 0 5rem; position: relative; overflow: hidden;
  background: #03080f;
}
.port-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.25) 70%, transparent 100%);
}
.port-banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
.port-banner-bg-text {
      position: absolute;
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(9rem, 18vw, 18rem);
    color: rgba(255,255,255,.022);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -.06em;
}
.port-banner-content { position: relative; z-index: 2; }

.port-banner-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 1.5rem;
}
.port-banner-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.4); }

.port-banner-h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.045em;
  margin-bottom: 1.4rem; color: #fff;
}
.port-banner-h1 span {
  font-style: italic; font-weight: 300;
  color: rgba(255,255,255,.4);
}

.port-banner-sub {
  font-size: 1.1rem; color: rgba(255,255,255,.42);
  max-width: 480px; line-height: 1.88; margin-bottom: 2.8rem;
}

/* Project count strip */
.port-count-strip {
  display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
}
.port-count-item {
  display: flex; flex-direction: column; gap: .15rem;
}
.port-count-num {
  font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 800;
  line-height: 1; letter-spacing: -.03em; color: #fff;
}
.port-count-lbl {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
}
.port-count-divider {
  width: 1px; height: 3rem; background: rgba(255,255,255,.1);
}

/* Right side: abstract composition */
.port-banner-vis {
  position: relative; height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.port-vis-frame {
  width: 320px; height: 320px; position: relative;
}
.port-vis-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  animation: pvRing linear infinite;
}
.port-vis-ring-1 { inset: 0; animation-duration: 18s; }
.port-vis-ring-2 { inset: 40px; border-color: rgba(255,255,255,.05); animation-duration: 12s; animation-direction: reverse; }
.port-vis-ring-3 { inset: 80px; border-color: rgba(255,255,255,.04); animation-duration: 26s; }
@keyframes pvRing { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.port-vis-card {
  position: absolute; inset: 110px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .7rem; padding: 1rem;
}
.port-vis-icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: .9rem;
}
.port-vis-lines { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.port-vis-line {
  height: 2px; border-radius: 1px;
  background: rgba(255,255,255,.1);
}
.port-vis-line:nth-child(1) { width: 80%; }
.port-vis-line:nth-child(2) { width: 55%; background: rgba(255,255,255,.2); }
.port-vis-line:nth-child(3) { width: 70%; }

/* Floating chips around vis */
.port-vis-chip {
  position: absolute; z-index: 5;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-md); padding: .75rem 1rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.port-vis-chip-a {
  top: 0; right: -20px; width: 130px;
  animation: pvChipA 7s ease-in-out infinite;
}
.port-vis-chip-b {
  bottom: 20px; left: -20px; width: 138px;
  animation: pvChipB 9s ease-in-out infinite;
}
@keyframes pvChipA { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(-1deg)} }
@keyframes pvChipB { 0%,100%{transform:translateY(0) rotate(1.2deg)} 50%{transform:translateY(-16px) rotate(1.2deg)} }
.port-vis-chip-num {
  font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 800;
  color: #fff; letter-spacing: -.02em; margin-bottom: .12rem;
}
.port-vis-chip-lbl {
  font-size: .62rem; color: rgba(255,255,255,.35); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}

/* ─── 2. FEATURED PROJECT ────────────────────────── */
.port-featured-sec {
  padding: var(--section-gap) 0;
  background: #0a0a0a; position: relative;
}
.port-featured-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}

.port-featured-wrap {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.02);
  transition: border-color .4s ease;
}
.port-featured-wrap:hover { border-color: rgba(255,255,255,.22); }

/* Left: image / visual */
.port-featured-img {
  position: relative; min-height: 500px;
  background: #111; overflow: hidden;
}
.port-featured-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) brightness(.72);
  transition: filter .6s ease, transform .6s ease;
}
.port-featured-wrap:hover .port-featured-img img {
  filter: grayscale(70%) brightness(.82);
  transform: scale(1.04);
}
/* Overlay gradient on image edge */
.port-featured-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, #0a0a0a 100%);
  pointer-events: none;
}
/* Featured badge */
.port-featured-badge {
  position: absolute; top: 1.5rem; left: 1.5rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: #03080f;
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem 1rem; border-radius: 50px;
}
.port-featured-badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #03080f; animation: featDot 2s ease-in-out infinite;
}
@keyframes featDot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Right: content */
.port-featured-content {
  padding: 3.5rem; display: flex; flex-direction: column; justify-content: center;
}
.port-featured-num {
  font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; color: rgba(255,255,255,.2);
  text-transform: uppercase; margin-bottom: 1.2rem; display: block;
}
.port-featured-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1rem;
}
.port-featured-desc {
  font-size: 1rem; color: rgba(255,255,255,.45);
  line-height: 1.82; margin-bottom: 2rem; max-width: 400px;
}
/* Metric row */
.port-featured-metrics {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-lg);
  background: rgba(255,255,255,.02); padding: 1rem 1.4rem;
  margin-bottom: 2rem;
}
.port-featured-metric {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 0 1.25rem;
  border-right: 1px solid rgba(255,255,255,.08);
}
.port-featured-metric:first-child { padding-left: 0; }
.port-featured-metric:last-child  { border-right: none; }
.port-featured-metric-num {
  font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 800;
  line-height: 1; color: #fff; letter-spacing: -.02em;
}
.port-featured-metric-lbl {
  font-size: .65rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
}
/* Tags inside featured */
.port-featured-tags {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem;
}
.port-featured-tag {
  display: inline-flex; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: .25rem .7rem; color: rgba(255,255,255,.55);
  transition: all .22s;
}
.port-featured-tag:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }

.port-featured-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 700;
  color: #fff; letter-spacing: .03em;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: gap .28s ease, border-color .28s ease;
  width: fit-content;
}
.port-featured-link i { font-size: .78rem; transition: transform .28s ease; }
.port-featured-link:hover { gap: .85rem; border-color: #fff; color: #fff; }
.port-featured-link:hover i { transform: translateX(4px); }

/* ─── 3. FILTER BAR + GRID ───────────────────────── */
.port-grid-sec {
  padding: var(--section-gap) 0;
  background: #ffffff; position: relative;
}
.port-grid-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}

/* Filter pills */
.port-filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 3.5rem;
}
.port-filter-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Roboto', sans-serif; font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem 1.2rem; border-radius: 50px; cursor: pointer;
  border: 1.5px solid rgba(15,23,42,.12);
  background: transparent; color: #64748b;
  transition: all .25s ease;
}
.port-filter-btn:hover {
  background: rgba(15,23,42,.05); color: #03080f;
  border-color: rgba(15,23,42,.3);
}
.port-filter-btn.active {
  background: #03080f; color: #fff; border-color: #03080f;
}
.port-filter-count {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  background: rgba(15,23,42,.1); color: #64748b;
  border-radius: 50px; padding: .08rem .45rem;
  transition: all .25s ease;
}
.port-filter-btn.active .port-filter-count {
  background: rgba(255,255,255,.18); color: rgba(255,255,255,.8);
}

/* Grid section header inline with filter */
.port-grid-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem;
}
.port-grid-total {
  font-family: 'Roboto', sans-serif; font-size: .82rem; color: #94a3b8;
  font-weight: 500; letter-spacing: .04em;
}

/* Hidden class for filter JS */
.port-item.hidden {
  display: none;
}

/* ─── 4. CASE STUDY PREVIEW ──────────────────────── */
.port-case-sec {
  padding: var(--section-gap) 0;
  background: #03080f; position: relative; overflow: hidden;
}
.port-case-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
/* Ghost text behind case study */
.port-case-bg-text {
  position: absolute; left: -3rem; top: 50%; transform: translateY(-50%);
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(8rem, 18vw, 18rem);
  color: rgba(255,255,255,.012); line-height: 1;
  pointer-events: none; user-select: none; letter-spacing: -.06em;
  white-space: nowrap;
}

.port-case-frame {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  overflow: hidden;
}
/* Top label bar */
.port-case-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.port-case-topbar-dots { display: flex; gap: 6px; }
.port-case-topbar-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.port-case-topbar-dot:first-child { background: rgba(255,255,255,.3); }
.port-case-topbar-label {
  font-family: 'Roboto', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.25);
}

/* Two-column layout */
.port-case-grid {
  display: grid; grid-template-columns: 1fr 1fr;
}
.port-case-col {
  padding: 3rem 2.5rem;
  border-right: 1px solid rgba(255,255,255,.07);
}
.port-case-col:last-child { border-right: none; }

.port-case-col-label {
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.22); margin-bottom: 1.5rem; display: block;
}
.port-case-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1.2rem;
}
.port-case-body {
  font-size: .97rem; color: rgba(255,255,255,.42); line-height: 1.82;
  margin-bottom: 1.8rem;
}

/* Insight blocks inside case col */
.port-case-insights { display: flex; flex-direction: column; gap: 1rem; }
.port-case-insight {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
  transition: border-color .28s, background .28s;
}
.port-case-insight:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}
.port-case-insight-icon {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: .85rem;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.port-case-insight:hover .port-case-insight-icon { transform: scale(1.1) rotate(-5deg); }
.port-case-insight-title {
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700;
  color: #fff; margin-bottom: .2rem;
}
.port-case-insight-body {
  font-size: .82rem; color: rgba(255,255,255,.38); line-height: 1.65;
}

/* Metrics row inside case study */
.port-case-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 2rem;
}
.port-case-metric-cell {
  padding: 1.4rem 1.2rem;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  text-align: center;
}
.port-case-metric-cell:last-child { border-right: none; }
.port-case-metric-num {
  font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 800;
  line-height: 1; color: #fff; letter-spacing: -.03em; margin-bottom: .3rem;
}
.port-case-metric-lbl {
  font-size: .65rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.28);
}

/* Link inside case col */
.port-case-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 700;
  color: rgba(255,255,255,.5); letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: .25rem;
  transition: gap .28s, color .28s, border-color .28s;
}
.port-case-link i { font-size: .72rem; transition: transform .28s; }
.port-case-link:hover { gap: .75rem; color: #fff; border-color: rgba(255,255,255,.5); }
.port-case-link:hover i { transform: translateX(4px); }

/* ─── 5. CTA SECTION ─────────────────────────────── */
.portcta-sec {
  padding: var(--section-gap) 0;
  background: #03080f; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
}
.portcta-sec .container { position: relative; z-index: 2; }

/* ─── RESPONSIVE ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════
   NEXA TECH · Insights Page
   Design System: Black & White
   Aligned to: Home / About / Services / Portfolio / Contact
   Fonts: Inter (display) + Roboto (body)
═══════════════════════════════════════════════════ */

.port-item {
  background: #fff; border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-xl); overflow: hidden; position: relative;
  transition: transform .38s ease, box-shadow .38s ease;
  cursor: pointer; display: flex; flex-direction: column;
}
.port-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: #03080f; transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index: 2;
}
.port-item:hover::before { transform: scaleX(1); }
.port-item:hover { transform: translateY(-6px); box-shadow: 0 22px 58px rgba(15,23,42,.12); }

.port-img { position: relative; overflow: hidden; height: 220px; background: #f1f5f9; }


.port-cat {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.12);
  border-radius: 50px; padding: .3rem 1rem;
  font-family: 'Roboto', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #334155;
  backdrop-filter: blur(8px);
}
.port-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: #334155; }

.port-arrow {
  position: absolute; bottom: 1rem; right: 1rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #03080f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  opacity: 0; transform: translate(6px, 6px) scale(.8);
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.port-item:hover .port-arrow { opacity: 1; transform: translate(0,0) scale(1); }

.port-content { padding: 1.5rem 1.6rem; flex: 1; display: flex; flex-direction: column; }
.port-label { display: inline-block; font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: .5rem; }
.port-h { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 600; color: #03080f; margin-bottom: .5rem; line-height: 1.25; }
.port-p { font-family: 'Roboto', sans-serif; font-size: 1rem; color: #64748b; line-height: 1.7; flex: 1; }
.port-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.port-tag {
  display: inline-flex; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: .2rem .65rem; color: #475569; transition: all .22s;
}
.port-tag:hover { background: #03080f; border-color: #03080f; color: #fff; }

/* ─── SHARED FILTER PILL SYSTEM (reused verbatim) ── */
.port-filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 3.5rem;
}
.port-filter-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Roboto', sans-serif; font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem 1.2rem; border-radius: 50px; cursor: pointer;
  border: 1.5px solid rgba(15,23,42,.12);
  background: transparent; color: #64748b;
  transition: all .25s ease;
}
.port-filter-btn:hover { background: rgba(15,23,42,.05); color: #03080f; border-color: rgba(15,23,42,.3); }
.port-filter-btn.active { background: #03080f; color: #fff; border-color: #03080f; }
.port-filter-count {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  background: rgba(15,23,42,.1); color: #64748b;
  border-radius: 50px; padding: .08rem .45rem;
  transition: all .25s ease;
}
.port-filter-btn.active .port-filter-count { background: rgba(255,255,255,.18); color: rgba(255,255,255,.8); }
.port-item.hidden { display: none; }


/* ─── CTA RINGS ──────────────────────────────────── */
.cta-ring-a, .cta-ring-b {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px solid; pointer-events: none;
  animation: ringRot linear infinite;
}
.cta-ring-a { width: 560px; height: 560px; margin: -280px 0 0 -280px; border-color: rgba(255,255,255,.04); animation-duration: 14s; }
.cta-ring-b { width: 760px; height: 760px; margin: -380px 0 0 -380px; border-color: rgba(255,255,255,.025); animation-direction: reverse; animation-duration: 20s; }
@keyframes ringRot { from { transform: rotate(0) } to { transform: rotate(360deg) } }
.cta-headline { font-size: clamp(2rem,4.2vw,3.4rem); font-weight: 800; line-height: 1.18; max-width: 700px; margin: 0 auto 2.5rem; letter-spacing: -.03em; color: #fff; }

/* ─── TEXT GRADIENT UTILITIES (unchanged) ─────────── */
.t-brand { background: linear-gradient(135deg, #cbefff, #37D1FE); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-cool  { background: linear-gradient(135deg,#10b981,#0ea5e9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }


/* ─── 1. PAGE BANNER ─────────────────────────────── */
.ins-banner {
  min-height: 72vh; display: flex; align-items: center;
  padding: 10rem 0 5rem; position: relative; overflow: hidden;
  background: #03080f;
}
/* Top accent line */
.ins-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.25) 70%, transparent 100%);
}
/* Dot-grid texture */
.ins-banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
/* Ghost watermark */
.ins-banner-bg-text {
  position: absolute; right: -3rem; bottom: -2rem;
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(10rem, 22vw, 22rem);
  color: rgba(255,255,255,.014); line-height: 1;
  pointer-events: none; user-select: none; letter-spacing: -.06em;
}
.ins-banner-inner { position: relative; z-index: 2; }

/* Eyebrow */
.ins-banner-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 1.4rem;
}
.ins-banner-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.38); }

/* Headline */
.ins-banner-h1 {
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 800; line-height: 1.0; letter-spacing: -.05em;
  margin-bottom: 1.5rem; color: #fff;
}
.ins-banner-h1 span { font-style: italic; font-weight: 300; color: rgba(255,255,255,.38); }

.ins-banner-sub {
  font-size: 1.1rem; color: rgba(255,255,255,.42);
  max-width: 460px; line-height: 1.9; margin-bottom: 2.8rem;
}

/* Stat strip */
.ins-stat-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg);
  background: rgba(255,255,255,.03); backdrop-filter: blur(12px);
  padding: 1.1rem 1.6rem; width: fit-content;
}
.ins-stat { display: flex; flex-direction: column; padding: 0 1.5rem; border-right: 1px solid rgba(255,255,255,.09); }
.ins-stat:first-child { padding-left: 0; }
.ins-stat:last-child  { border-right: none; }
.ins-stat-num { font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; margin-bottom: .2rem; }
.ins-stat-lbl { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.32); }

/* Banner right: abstract editorial grid composition */
.ins-banner-editorial {
  position: relative; height: 420px;
  display: flex; align-items: center; justify-content: center;
}
.ins-editorial-frame {
  width: 360px; position: relative;
}
/* Stack of abstract "article" blocks */
.ins-editorial-card {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); padding: 1.4rem 1.6rem;
  position: absolute; left: 0; right: 0;
  transition: none;
}
.ins-editorial-card-1 { top: 0; }
.ins-editorial-card-2 { top: 90px; left: 30px; right: -30px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); z-index: 2; }
.ins-editorial-card-3 { top: 180px; left: 60px; right: -60px; background: rgba(255,255,255,.025); z-index: 1; }

.ins-edit-line {
  height: 2px; border-radius: 1px;
  background: rgba(255,255,255,.1); margin-bottom: .7rem;
}
.ins-edit-line.thick { height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; margin-bottom: 1rem; }
.ins-edit-line.short { width: 55%; background: rgba(255,255,255,.18); }
.ins-edit-line.mid   { width: 80%; }
.ins-edit-line.long  { width: 100%; }

.ins-edit-tag {
  display: inline-flex; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.3); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); border-radius: 50px;
  padding: .15rem .6rem; margin-bottom: .8rem;
}

/* Floating chip: "32 Articles" */
.ins-banner-chip {
  position: absolute; z-index: 10;
  background: rgba(0,0,0,.94); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: .85rem 1.1rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
  animation: insChipFloat 8s ease-in-out infinite;
}
.ins-banner-chip-a { top: -10px; right: -10px; }
.ins-banner-chip-b { bottom: 40px; left: -20px; animation-delay: -4s; }
@keyframes insChipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.ins-chip-num { font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.ins-chip-lbl { font-size: .62rem; color: rgba(255,255,255,.35); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* ─── 2. FEATURED INSIGHT ────────────────────────── */
.ins-featured-sec {
  padding: var(--section-gap) 0;
  background: #0a0a0a; position: relative;
}
.ins-featured-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}

.ins-featured-wrap {
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl);
  overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.02);
  transition: border-color .4s;
}
.ins-featured-wrap:hover { border-color: rgba(255,255,255,.22); }

/* Left image */
.ins-featured-img {
  position: relative; min-height: 520px; background: #111; overflow: hidden;
}
.ins-featured-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) brightness(.7);
  transition: filter .6s ease, transform .6s ease;
}
.ins-featured-wrap:hover .ins-featured-img img { filter: grayscale(80%) brightness(.8); transform: scale(1.04); }
.ins-featured-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, #0a0a0a 100%);
  pointer-events: none;
}

/* Featured badge */
.ins-featured-badge {
  position: absolute; top: 1.4rem; left: 1.4rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: #03080f;
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem 1rem; border-radius: 50px;
}
.ins-featured-badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #03080f;
  animation: featBlink 2s ease-in-out infinite;
}
@keyframes featBlink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Right content */
.ins-featured-content {
  padding: 3.5rem; display: flex; flex-direction: column; justify-content: center;
}
.ins-featured-meta {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.2rem; flex-wrap: wrap;
}
.ins-featured-cat {
  font-family: 'Roboto', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.12); border-radius: 50px;
  padding: .22rem .8rem;
}
.ins-featured-date {
  font-family: 'Roboto', sans-serif; font-size: .72rem; color: rgba(255,255,255,.28);
  letter-spacing: .04em;
}
.ins-featured-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2); }

.ins-featured-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  color: #fff; margin-bottom: 1rem;
}
.ins-featured-excerpt {
  font-size: 1rem; color: rgba(255,255,255,.42);
  line-height: 1.82; margin-bottom: 2rem; max-width: 420px;
}

/* Tags inside featured */
.ins-featured-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 2rem; }
.ins-featured-tag {
  display: inline-flex; font-family: 'Roboto', sans-serif; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: .25rem .7rem; color: rgba(255,255,255,.55);
  transition: all .22s;
}
.ins-featured-tag:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }

.ins-featured-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 700;
  color: #fff; letter-spacing: .03em;
  padding-bottom: .28rem; border-bottom: 1px solid rgba(255,255,255,.25);
  transition: gap .28s, border-color .28s;
  width: fit-content;
}
.ins-featured-link i { font-size: .78rem; transition: transform .28s; }
.ins-featured-link:hover { gap: .8rem; border-color: #fff; color: #fff; }
.ins-featured-link:hover i { transform: translateX(4px); }

/* ─── 3. FILTER + GRID ───────────────────────────── */
.ins-grid-sec {
  padding: var(--section-gap) 0;
  background: #ffffff; position: relative;
}
.ins-grid-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}

/* Grid header row */
.ins-grid-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem;
}
.ins-grid-total {
  font-family: 'Roboto', sans-serif; font-size: .82rem;
  color: #94a3b8; font-weight: 500; letter-spacing: .04em;
}

/* ── Insight card extras (date + read time below tags) ──
   New scoped classes only — port-item / port-img / port-content
   / port-label / port-h / port-p / port-tags / port-tag / port-cat
   / port-cat-dot / port-arrow are all reused from shared system   */
.ins-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid rgba(15,23,42,.07);
}
.ins-card-date {
  font-family: 'Roboto', sans-serif; font-size: .76rem;
  color: #94a3b8; letter-spacing: .03em;
}
.ins-card-read {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: 'Roboto', sans-serif; font-size: .76rem; font-weight: 600;
  color: #94a3b8; letter-spacing: .02em;
}
.ins-card-read i { font-size: .65rem; }

/* "Read More" underline link inside card */
.ins-card-link {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: 'Inter', sans-serif; font-size: .8rem; font-weight: 700;
  color: #03080f; letter-spacing: .04em;
  padding-bottom: .18rem; border-bottom: 1px solid rgba(15,23,42,.2);
  transition: gap .25s, border-color .25s; margin-top: .9rem;
  width: fit-content;
}
.ins-card-link i { font-size: .7rem; transition: transform .25s; }
.ins-card-link:hover { gap: .6rem; border-color: #03080f; color: #03080f; }
.ins-card-link:hover i { transform: translateX(3px); }

/* ─── 4. NEWSLETTER CTA ──────────────────────────── */
.ins-nl-sec {
  padding: var(--section-gap) 0;
  background: #03080f; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
}
.ins-nl-sec .container { position: relative; z-index: 2; }

/* Newsletter spanail row */
.ins-nl-form {
  display: flex; align-items: center; gap: .65rem;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.ins-nl-input {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50px; padding: .85rem 1.6rem;
  font-family: 'Roboto', sans-serif; font-size: .97rem;
  color: #fff; outline: none; min-width: 280px; max-width: 380px; width: 100%;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.ins-nl-input::placeholder { color: rgba(255,255,255,.22); }
.ins-nl-input:focus {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(255,255,255,.05);
}
.ins-nl-sub {
  font-size: .8rem; color: rgba(255,255,255,.25);
  max-width: 440px; margin: 0 auto; line-height: 1.7;
}
.ins-nl-sub a { color: rgba(255,255,255,.42); border-bottom: 1px solid rgba(255,255,255,.15); transition: all .22s; }
.ins-nl-sub a:hover { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.45); }

/* ─── RESPONSIVE ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   Additional Contact Page Styles (If Needed)
   All rules below are strictly scoped to contact.html.
   No shared/global styles are redefined here.
   Sections: Banner · Form + Info · Map · CTA · Responsive
══════════════════════════════════════════════════════════════ */

/* ─── 1. PAGE BANNER ─────────────────────────────── */
.contact-banner {
  min-height: 78vh; display: flex; align-items: flex-end;
  padding: 9rem 0 4.5rem; position: relative; overflow: hidden;
  background: #03080f;
}
/* Top accent line */
.contact-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.25) 70%, transparent 100%);
}
/* Dot grid overlay */
.contact-banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
/* Ghost watermark */
.contact-banner-bg-text {
    position: absolute;
    right: -28rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(9rem, 18vw, 18rem);
    color: rgba(255,255,255,.025);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -.06em;
}
/* Vertical rule on right side for editorial weight */
.contact-banner-rule {
  position: absolute; right: 8%; top: 10rem; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
  pointer-events: none;
}

.contact-banner-inner { position: relative; z-index: 2; }

.contact-banner-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: 1.4rem;
}
.contact-banner-eyebrow-line { width: 26px; height: 1px; background: rgba(255,255,255,.38); }

.contact-banner-h1 {
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 800; line-height: 0.98; letter-spacing: -.05em;
  margin-bottom: 1.6rem; color: #fff;
}
.contact-banner-h1 span {
  color: rgba(255,255,255,.38);
  background: linear-gradient(135deg, #cbefff, #37D1FE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-banner-sub {
  font-size: 1.05rem; color: rgba(255,255,255,.4);
  max-width: 660px; line-height: 1.9;
}

/* Thin horizontal divider below banner (page chrome) */
.contact-banner-divider {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1) 40%, rgba(255,255,255,.06) 70%, transparent);
}

/* ─── 2. FORM + INFO SECTION ─────────────────────── */
/* ── Contact topics strip ── */
.contact-topics-sec {
  padding: 3.5rem 0; background: #f8fafc;
  border-top: 1px solid rgba(15,23,42,.07);
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.contact-topics-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800; letter-spacing: -.04em;
  color: #0f172a; line-height: 1.2; margin-bottom: .8rem;
}
.contact-topics-sub {
  font-size: 1rem; color: #64748b; line-height: 1.75; margin: 0;
}
.contact-topics-divider {
  width: 1px; background: rgba(15,23,42,.1);
  height: 120px; margin: 0 auto;
}
.contact-topics-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: 1rem;
}
.contact-topics-grid {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.contact-topic-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; border: 1px solid rgba(15,23,42,.1);
  border-radius: 999px; padding: .5rem 1rem;
  font-size: .82rem; font-weight: 600; color: #0f172a;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-topic-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,23,42,.1);
  border-color: rgba(15,23,42,.25);
}
.contact-topic-chip i {
  font-size: .72rem; color: #64748b;
}

/* Topics list (bullet style) */
.contact-topics-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem;
}
.contact-topics-list li {
  display: flex; align-items: center; gap: .75rem;
  font-size: .92rem; font-weight: 500; color: #334155;
}
.contact-topics-list li i {
  width: 28px; height: 28px; border-radius: 8px;
  background: #0f172a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; flex-shrink: 0;
}

/* Contact detail rows */
.contact-details-stack { display: flex; flex-direction: column; gap: 1rem; }
.contact-detail-row {
  display: flex; align-items: flex-start; gap: .9rem;
}
.contact-detail-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #f1f5f9; border: 1px solid rgba(15,23,42,.08);
  display: flex; align-items: center; justify-content: center;
  color: #475569; font-size: .8rem; flex-shrink: 0; margin-top: .1rem;
}
.contact-detail-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: .15rem;
}
.contact-detail-val {
  font-size: .92rem; font-weight: 600; color: #0f172a;
  text-decoration: none;
}
a.contact-detail-val:hover { text-decoration: underline; }
.contact-detail-note {
  font-size: .8rem; font-weight: 400; color: #94a3b8;
}

/* ── Contact Main Section (info + form) ── */
.contact-main-sec {
  padding: 5rem 0 6rem;
  background: #ffffff;
  position: relative;
  overflow-x: hidden;
}
.contact-main-divider {
  border: none;
  border-top: 1px solid rgba(15,23,42,.1);
  margin: 2rem 0;
}
.contact-info-col-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800; color: #0f172a; line-height: 1.2;
  margin: 0 0 .6rem;
}
.contact-info-col-sub {
  font-size: .9rem; color: #64748b; line-height: 1.65; margin: 0;
}
.cf-optional {
  font-size: .78rem; font-weight: 400; color: #94a3b8;
}
.cf-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
  cursor: pointer;
}

.contact-body-sec {
  padding: var(--section-gap) 0;
  background: #ffffff; position: relative;
  overflow-x: hidden;
}
.contact-body-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
  pointer-events: none;
}

/* ── Left: Form column ─────── */
.contact-form-col { padding-right: 3rem; }

.contact-form-heading {
  font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 700;
  color: #03080f; letter-spacing: -.02em; margin-bottom: .5rem; line-height: 1.2;
}
.contact-form-sub {
  font-size: .95rem; color: #64748b; line-height: 1.75;
  margin-bottom: 2.4rem;
}

/* Form field group */
.cf-group {
  position: relative; margin-bottom: 1.4rem;
}
/* Label */
.cf-label {
  display: block;
  font-family: 'Roboto', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: .5rem;
  transition: color .22s;
}
.cf-group:focus-within .cf-label { color: #334155; }

/* Input / Textarea base */
.cf-input,
.cf-textarea,
.cf-select {
  width: 100%; background: #f8fafc;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--r-md); padding: .88rem 1.1rem;
  font-family: 'Roboto', sans-serif; font-size: .97rem;
  color: #03080f; line-height: 1.5;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  outline: none; appearance: none; -webkit-appearance: none;
}
.cf-input::placeholder,
.cf-textarea::placeholder { color: #cbd5e1; }

/* Focus state — grayscale only */
.cf-input:focus,
.cf-textarea:focus,
.cf-select:focus {
  border-color: #334155;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15,23,42,.06), inset 0 0 0 1px rgba(15,23,42,.04);
}

/* Error state */
.cf-input.error,
.cf-textarea.error,
.cf-select.error {
  border-color: #ff4242;
  background: #f8fafc;
  box-shadow: 0 0 0 3px rgba(15,23,42,.07);
}
.cf-error-msg {
  display: none; font-size: .76rem; color: #ff4242;
  margin-top: .4rem; letter-spacing: .02em; font-weight: 600;
}
.cf-group.has-error .cf-error-msg { display: block; }
.cf-group.has-error .cf-input,
.cf-group.has-error .cf-textarea,
.cf-group.has-error .cf-select {
  border-color: #475569;
  box-shadow: 0 0 0 3px rgba(15,23,42,.07);
}

/* Textarea */
.cf-textarea { resize: vertical; min-height: 130px; }

/* Select */
.cf-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(15,23,42,0.35)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
  color: #94a3b8;
  max-width: 100%;
  box-sizing: border-box;
}
.cf-select option { background: #ffffff; color: #03080f; }
.cf-select.selected { color: #03080f; }

/* Inline row: two fields side by side */
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Submit button — full width, inverted for light bg */
.cf-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: #03080f; color: #ffffff;
  font-family: var(--ff-display); font-weight: 700; font-size: 1rem;
  padding: 1rem 2rem; border-radius: 50px; border: none;
  box-shadow: 0 6px 22px rgba(3,8,15,.16);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, background .25s;
  cursor: pointer; position: relative; overflow: hidden;
  margin-top: .6rem;
}
.cf-submit:hover { background: #1a1a1a; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(3,8,15,.24); }
.cf-submit:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(3,8,15,.12); }

/* Consent line */
.cf-consent {
  font-size: .78rem; color: #94a3b8;
  text-align: center; line-height: 1.65;
  margin-top: 1.2rem;
}
.cf-consent a { color: #475569; border-bottom: 1px solid rgba(15,23,42,.2); transition: color .22s, border-color .22s; }
.cf-consent a:hover { color: #03080f; border-color: #03080f; }

/* Success state overlay */
.cf-success {
  display: none; text-align: center; padding: 4rem 2rem;
}
.cf-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #f1f5f9; border: 1px solid rgba(15,23,42,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #334155;
  margin: 0 auto 1.5rem;
}
.cf-success-title {
  font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 700;
  color: #03080f; margin-bottom: .6rem;
}
.cf-success-body {
  font-size: .97rem; color: #64748b; line-height: 1.75; max-width: 340px; margin: 0 auto;
}

/* ── Right: Info panel ─────── */
.contact-info-col {
  padding-left: 2rem;
  border-left: 1px solid rgba(15,23,42,.08);
}

/* Response-time badge */
.contact-response-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #f1f5f9; border: 1px solid rgba(15,23,42,.1);
  border-radius: var(--r-lg); padding: .65rem 1.2rem;
  margin-bottom: 2.4rem;
}
.contact-response-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #334155;
  animation: responsePulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes responsePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .25; transform: scale(.75); }
}
.contact-response-text {
  font-family: 'Roboto', sans-serif; font-size: .78rem; font-weight: 700;
  color: #475569; letter-spacing: .06em; text-transform: uppercase;
}

/* Info blocks */
.contact-info-blocks { display: flex; flex-direction: column; gap: 0; }

.contact-info-block {
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.contact-info-block:first-child { padding-top: 0; }
.contact-info-block:last-child  { border-bottom: none; }

.contact-info-block-label {
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: .7rem; display: block;
}
.contact-info-block-value {
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
  color: #03080f; line-height: 1.6;
}
.contact-info-block-value a {
  color: #03080f;
  transition: color .22s;
}
.contact-info-block-value a:hover { color: #334155; }

/* Inline detail under value */
.contact-info-detail {
  font-family: 'Roboto', sans-serif; font-size: .82rem;
  color: #94a3b8; line-height: 1.65;
  margin-top: .3rem;
}

/* Social links row */
.contact-social-row {
  display: flex; gap: .55rem; flex-wrap: wrap;
  padding-top: 1.6rem;
}
.contact-social-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Roboto', sans-serif; font-size: .78rem; font-weight: 700;
  color: #64748b; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid rgba(15,23,42,.12); border-radius: 50px;
  padding: .35rem .9rem;
  transition: all .25s ease;
}
.contact-social-link i { font-size: .75rem; }
.contact-social-link:hover {
  color: #03080f; border-color: #03080f;
  background: rgba(15,23,42,.04);
}

/* ─── 3. MAP / LOCATION ──────────────────────────── */
.contact-map-sec {
  background: #fff; position: relative;
}
.contact-map-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
.contact-map-sec::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.08);
}

/* Map wrapper with overlay */
.contact-map-wrap {
  position: relative; height: 460px; overflow: hidden;
  background: #e2e8f0;
}

/* Grayscale iframe map */
.contact-map-iframe {
  width: 100%; height: 100%; border: none; display: block;
  filter: grayscale(100%) contrast(.9) brightness(.92);
  transition: filter .5s ease;
}
.contact-map-wrap:hover .contact-map-iframe {
  filter: grayscale(80%) contrast(.92) brightness(.94);
}

/* Overlay info card on map */
.contact-map-card {
  position: absolute; bottom: 2rem; left: 2rem; z-index: 3;
  background: rgba(3,8,15,.96); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: 1.4rem 1.6rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  min-width: 260px; max-width: 320px;
}
.contact-map-card-label {
  font-family: 'Roboto', sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: .8rem; display: block;
}
.contact-map-card-name {
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700;
  color: #fff; margin-bottom: .4rem; letter-spacing: -.01em;
}
.contact-map-card-addr {
  font-family: 'Roboto', sans-serif; font-size: .85rem;
  color: rgba(255,255,255,.42); line-height: 1.65;
}
.contact-map-card-divider {
  height: 1px; background: rgba(255,255,255,.08); margin: 1rem 0;
}
.contact-map-card-hours {
  font-family: 'Roboto', sans-serif; font-size: .78rem;
  color: rgba(255,255,255,.3); display: flex; flex-direction: column; gap: .25rem;
}
.contact-map-card-hours strong { color: rgba(255,255,255,.55); font-weight: 700; }

/* ─── 4. CTA SECTION ─────────────────────────────── */
.contact-cta-sec {
  padding: var(--section-gap) 0;
  background: #03080f; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.07);
}
.contact-cta-sec .container { position: relative; z-index: 2; }

/* ─── RESPONSIVE ─────────────────────────────────── */
/* ═══════════════════════════════════════════════════
   NEXA TECH · Insight Detail Page
   Design System: Black & White
   Aligned to: Home / About / Services / Portfolio / Contact / Insights
   Fonts: Inter (display) + Roboto (body)
═══════════════════════════════════════════════════ */

/* ─── 1. BREADCRUMB ───────────────────────────────── */
.idet-breadcrumb-bar {
  padding-top: 70px; /* clears fixed nav */
  background: #03080f;
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.idet-breadcrumb {
  max-width: 1380px; margin: 0 auto; padding: .9rem 2rem;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
}
.idet-bc-item {
  display: inline-flex; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: .8rem; font-weight: 500;
  letter-spacing: .03em; color: #94a3b8;
  transition: color .22s;
}
.idet-bc-item a {
  color: #94a3b8; transition: color .22s;
}
.idet-bc-item a:hover { color: #03080f; }
.idet-bc-sep {
  display: inline-flex; align-items: center;
  margin: 0 .55rem; color: #cbd5e1;
  font-size: .7rem;
}
/* Current page — darkest, not a link */
.idet-bc-item.current { color: #fff; font-weight: 600; }

/* ─── 2. ARTICLE HEADER (full-width dark stripe) ──── */
.idet-article-header {
  background: #03080f; padding: 5rem 0 4rem;
  position: relative; overflow: hidden;
}
/* Dot-grid texture matching other dark banners */
.idet-header-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 80%);
}
/* Top accent line */
.idet-article-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,.18) 70%, transparent 100%);
}
.idet-header-inner {
  position: relative; z-index: 2;
  max-width: 900px; /* aligned to prose column width */
}

/* Category + date meta row */
.idet-header-meta {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.idet-header-cat {
  display: inline-flex; align-items: center; gap: .38rem;
  font-family: 'Roboto', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); border-radius: 50px;
  padding: .28rem .9rem;
}
.idet-header-cat-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.idet-header-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2); }
.idet-header-date, .idet-header-read {
  font-family: 'Roboto', sans-serif; font-size: .78rem;
  color: rgba(255,255,255,.35); letter-spacing: .03em;
}
.idet-header-read i { margin-right: .25rem; font-size: .65rem; }

/* Article title */
.idet-article-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.04em;
  color: #ffffff; margin-bottom: 1.4rem;
}

/* Excerpt / standfirst */
.idet-article-excerpt {
  font-family: 'Roboto', sans-serif; font-size: 1.15rem;
  color: rgba(255,255,255,.46); line-height: 1.85;
  max-width: 780px; margin-bottom: 2rem;
}

/* Author / share row */
.idet-header-byline {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.idet-author {
  display: flex; align-items: center; gap: .85rem;
}
.idet-author-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700;
  color: rgba(255,255,255,.65); flex-shrink: 0;
  overflow: hidden;
}
.idet-author-avatar img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%);
}
.idet-author-name {
  font-family: 'Inter', sans-serif; font-size: .88rem; font-weight: 700;
  color: rgba(255,255,255,.75); letter-spacing: -.01em;
}
.idet-author-role {
  font-family: 'Roboto', sans-serif; font-size: .76rem;
  color: rgba(255,255,255,.3); margin-top: .1rem;
}

/* Share buttons row */
.idet-share-row { display: flex; align-items: center; gap: .45rem; }
.idet-share-label {
  font-family: 'Roboto', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.28);
  margin-right: .2rem;
}
.idet-share-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); font-size: .82rem; cursor: pointer;
  transition: all .25s ease;
}
.idet-share-btn:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.3); transform: translateY(-2px); }

/* ─── 3. TWO-COLUMN LAYOUT (content + sidebar) ────── */
.idet-body-section {
  background: #ffffff;
  padding: 4rem 0 5rem;
}

/* Custom grid: 65% content + 35% sidebar */
.idet-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: start;
  max-width: 1280px; margin: 0 auto; padding: 0 2rem;
}

/* ─── 4. MAIN ARTICLE COLUMN ──────────────────────── */
.idet-main { min-width: 0; }

/* Hero image */
.idet-hero-img-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); background: #f1f5f9;
  margin-bottom: 3rem;
  border: 1px solid rgba(15,23,42,.07);
}
.idet-hero-img-wrap img {
  width: 100%; height: auto; max-height: 480px; object-fit: cover;
  filter: grayscale(100%) brightness(.88);
  display: block;
  transition: filter .6s ease;
}
.idet-hero-img-wrap:hover img { filter: grayscale(70%) brightness(.93); }
.idet-hero-img-caption {
  padding: .75rem 1.2rem;
  border-top: 1px solid rgba(15,23,42,.06);
  font-family: 'Roboto', sans-serif; font-size: .78rem;
  color: #94a3b8; letter-spacing: .02em; line-height: 1.55;
  background: #f8fafc;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Prose typography ──────────────────────────────── */
.idet-prose { max-width: 100%; }

.idet-prose p {
  font-family: 'Roboto', sans-serif; font-size: 1.08rem;
  color: #374151; line-height: 1.92; margin-bottom: 1.5rem;
}
.idet-prose p:last-child { margin-bottom: 0; }

/* Drop cap on first paragraph */
.idet-prose .idet-lead-para::first-letter {
  font-family: 'Inter', sans-serif; font-size: 3.8rem; font-weight: 800;
  line-height: .85; float: left; margin: .08em .14em 0 0;
  color: #03080f; letter-spacing: -.03em;
}

.idet-prose h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.3rem, 2.8vw, 1.75rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -.03em;
  color: #03080f; margin: 3rem 0 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.idet-prose h3 {
  font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700;
  color: #03080f; letter-spacing: -.02em; margin: 2.2rem 0 .75rem;
  line-height: 1.3;
}
.idet-prose h4 {
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700;
  color: #1e293b; letter-spacing: -.01em; margin: 1.8rem 0 .55rem;
}

/* Blockquote — strong editorial frame */
.idet-prose blockquote {
  margin: 2.4rem 0; padding: 1.6rem 2rem;
  border-left: 3px solid #03080f;
  background: #f8fafc;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  position: relative;
}
.idet-prose blockquote::before {
  content: '\201C';
  position: absolute; top: -.3rem; left: 1.6rem;
  font-family: 'Inter', sans-serif; font-size: 4rem; font-weight: 800;
  color: rgba(15,23,42,.08); line-height: 1;
  pointer-events: none;
}
.idet-prose blockquote p {
  font-size: 1.12rem; font-style: italic; color: #1e293b;
  font-weight: 400; margin-bottom: 0; line-height: 1.78;
}
.idet-prose blockquote cite {
  display: block; margin-top: .8rem;
  font-family: 'Roboto', sans-serif; font-size: .78rem; font-weight: 700;
  color: #94a3b8; font-style: normal; letter-spacing: .04em; text-transform: uppercase;
}

/* Unordered list */
.idet-prose ul {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.idet-prose ul li {
  font-family: 'Roboto', sans-serif; font-size: 1.08rem;
  color: #374151; line-height: 1.78;
  padding-left: 1.5rem; position: relative; margin-bottom: .6rem;
}
.idet-prose ul li::before {
  content: ''; position: absolute; left: 0; top: .75em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid #03080f; background: transparent;
}

/* Ordered list */
.idet-prose ol {
  padding-left: 1.6rem; margin-bottom: 1.5rem;
  counter-reset: idet-counter;
  list-style: none;
}
.idet-prose ol li {
  font-family: 'Roboto', sans-serif; font-size: 1.08rem;
  color: #374151; line-height: 1.78; margin-bottom: .65rem;
  padding-left: .4rem; counter-increment: idet-counter;
  position: relative;
}
.idet-prose ol li::before {
  content: counter(idet-counter) '.';
  position: absolute; left: -1.4rem;
  font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 700;
  color: #94a3b8;
}

/* Inline code */
.idet-prose code {
  font-family: 'Roboto Mono', 'Courier New', monospace; font-size: .88em;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: .1rem .38rem; color: #1e293b;
}

/* Horizontal rule */
.idet-prose hr {
  border: none; border-top: 1px solid rgba(15,23,42,.08);
  margin: 2.8rem 0;
}

/* Callout box */
.idet-callout {
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--r-md); padding: 1.4rem 1.6rem;
  background: #f8fafc; margin: 2rem 0;
}
.idet-callout-label {
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #94a3b8;
  margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem;
}
.idet-callout p {
  font-size: 1rem !important; color: #475569 !important; margin-bottom: 0 !important;
}

/* Article tag row (bottom of prose) */
.idet-article-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(15,23,42,.08);
}
.idet-article-tag {
  display: inline-flex; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: .3rem .8rem; color: #475569; transition: all .22s;
}
.idet-article-tag:hover { background: #03080f; border-color: #03080f; color: #fff; }

/* ── Prev / Next article navigation ───────────────── */
.idet-article-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 3rem; padding-top: 2.5rem;
  border-top: 1px solid rgba(15,23,42,.08);
}
.idet-nav-card {
  display: flex; flex-direction: column;
  border: 1px solid rgba(15,23,42,.1); border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem; background: #ffffff;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  cursor: pointer;
}
.idet-nav-card:hover {
  border-color: #03080f; box-shadow: 0 8px 24px rgba(15,23,42,.08);
  transform: translateY(-3px);
}
.idet-nav-card.next { text-align: right; }
.idet-nav-dir {
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #94a3b8;
  margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem;
}
.idet-nav-card.next .idet-nav-dir { justify-content: flex-end; }
.idet-nav-dir i { font-size: .6rem; }
.idet-nav-title {
  font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 700;
  color: #03080f; line-height: 1.35; letter-spacing: -.01em;
}

/* ─── 5. SIDEBAR ──────────────────────────────────── */
.idet-sidebar { min-width: 0; }

/* Sticky wrapper — sticks on desktop */
.idet-sidebar-sticky {
  position: sticky; top: 92px;
}

/* Sidebar section block */
.idet-sidebar-block {
  border: 1px solid rgba(15,23,42,.09);
  border-radius: var(--r-lg); overflow: hidden;
  background: #ffffff; margin-bottom: 1.5rem;
}
.idet-sidebar-block:last-child { margin-bottom: 0; }

/* Sidebar block header */
.idet-sidebar-heading {
  padding: .9rem 1.4rem;
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,.07);
  font-family: 'Roboto', sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #94a3b8;
  display: flex; align-items: center; gap: .5rem;
}
.idet-sidebar-heading i { font-size: .62rem; }

/* Related insight list items */
.idet-related-list { list-style: none; padding: 0; }
.idet-related-item {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(15,23,42,.06);
  transition: background .22s;
}
.idet-related-item:last-child { border-bottom: none; }
.idet-related-item:hover { background: #f8fafc; }
.idet-related-item a { display: block; }

.idet-related-meta {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .4rem;
}
.idet-related-cat {
  font-family: 'Roboto', sans-serif; font-size: .63rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #94a3b8;
}
.idet-related-sep { width: 2px; height: 2px; border-radius: 50%; background: #cbd5e1; }
.idet-related-date {
  font-family: 'Roboto', sans-serif; font-size: .63rem; color: #94a3b8; letter-spacing: .02em;
}
.idet-related-title {
  font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 700;
  color: #03080f; line-height: 1.35; letter-spacing: -.01em;
  transition: color .22s;
}
.idet-related-item:hover .idet-related-title { color: #334155; }
.idet-related-read {
  font-family: 'Roboto', sans-serif; font-size: .7rem; color: #bababa;
  margin-top: .3rem; display: flex; align-items: center; gap: .3rem;
}
.idet-related-read i { font-size: .6rem; }

/* Newsletter opt-in inside sidebar */
.idet-sidebar-nl {
  padding: 1.4rem;
}
.idet-sidebar-nl-text {
  font-family: 'Roboto', sans-serif; font-size: .88rem; color: #475569;
  line-height: 1.65; margin-bottom: 1rem;
}
.idet-sidebar-nl-text strong { color: #03080f; font-weight: 700; }
.idet-sidebar-input {
  width: 100%; background: #f8fafc; border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--r-md); padding: .72rem 1rem;
  font-family: 'Roboto', sans-serif; font-size: .92rem; color: #03080f;
  outline: none; margin-bottom: .65rem;
  transition: border-color .25s, box-shadow .25s;
}
.idet-sidebar-input::placeholder { color: #cbd5e1; }
.idet-sidebar-input:focus {
  border-color: #334155; background: #fff;
  box-shadow: 0 0 0 3px rgba(15,23,42,.05);
}
.idet-sidebar-nl-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: #03080f; color: #fff;
  font-family: var(--ff-display); font-weight: 700; font-size: .88rem;
  padding: .75rem 1rem; border-radius: 50px; border: none; cursor: pointer;
  transition: background .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.idet-sidebar-nl-btn:hover { background: #1a1a1a; transform: translateY(-2px); }

/* Progress reading indicator bar */
.idet-read-progress {
  position: fixed; top: 68px; left: 0; right: 0; height: 2px;
  background: rgba(15,23,42,.06); z-index: 998;
}
.idet-read-progress-bar {
  height: 100%; width: 0%; background: #03080f;
  transition: width .1s linear;
}

/* ─── 6. CTA SECTION ──────────────────────────────── */
.idet-cta-sec {
  padding: var(--section-gap) 0;
  background: #03080f; text-align: center;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
}
.idet-cta-sec .container { position: relative; z-index: 2; }

/* ─── RESPONSIVE ──────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════
   Primary Color – Gradient, Glow & Border Enhancements
   ──────────────────────────────────────────────────────────────────
   Accent :  #37D1FE
   Rule   :  All new rules live here. Zero overrides to original styles.
   Tokens :  --ac        full color
             --ac-18     rgba(55,209,254,.18)  medium tint
             --ac-10     rgba(55,209,254,.10)  soft tint
             --ac-07     rgba(55,209,254,.07)  faint tint
             --ac-glow   standard diffused shadow
             --ac-glow-s smaller diffused shadow
══════════════════════════════════════════════════════════════════ */

/* ── A. Design tokens ────────────────────────────────────────── */
:root {
  --ac:        #37D1FE;
  --ac-18:     rgba(55,209,254,.18);
  --ac-10:     rgba(55,209,254,.10);
  --ac-07:     rgba(55,209,254,.07);
  --ac-glow:   0 0 38px rgba(55,209,254,.20), 0 0 80px rgba(55,209,254,.09);
  --ac-glow-s: 0 0 18px rgba(55,209,254,.18), 0 0 36px rgba(55,209,254,.08);
}


/* ── B. Reusable gradient utility classes ────────────────────── */
/* These are additive helpers — apply to any element as needed   */

/* Gradient backgrounds: accent → dark */
.g-ac-dark {
  background: linear-gradient(135deg, rgba(55,209,254,.14) 0%, transparent 70%);
}
.g-ac-dark-v {
  background: linear-gradient(to bottom, rgba(55,209,254,.10) 0%, transparent 70%);
}

/* Accent-tinted glass surface (for cards / panels on dark bg) */
.g-ac-glass {
  background: rgba(55,209,254,.04);
  border: 1px solid rgba(55,209,254,.14);
}

/* Accent glow utility */
.glow-ac   { box-shadow: var(--ac-glow); }
.glow-ac-s { box-shadow: var(--ac-glow-s); }

/* Accent border utility */
.border-ac    { border-color: rgba(55,209,254,.25) !important; }
.border-ac-sm { border-color: rgba(55,209,254,.14) !important; }


/* ── C. Accent button (.btn-accent) ─────────────────────────── */
/* New standalone button class — does NOT touch .btn-pri or any
   existing button. Use class="btn-accent" in HTML.              */
.btn-accent {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--ac);
  color: #03080f;
  font-family: var(--ff-display); font-weight: 700; font-size: 1rem;
  padding: .9rem 2.1rem; border-radius: 50px; border: none;
  box-shadow: 0 6px 24px rgba(55,209,254,.28);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1),
              box-shadow .28s ease,
              background .25s;
  cursor: pointer; position: relative; overflow: hidden;
}
.btn-accent:hover {
  transform: translateY(-3px);
  background: #5ddafe;
  box-shadow: 0 12px 38px rgba(55,209,254,.38), 0 0 60px rgba(55,209,254,.16);
  color: #03080f;
}


/* ── D. Navigation ───────────────────────────────────────────── */
/* Active nav link: soft accent underline glow                   */
.nav-links a.active {
  /* box-shadow: inset 0 -2px 0 rgba(55,209,254,.38); */
  text-shadow: 0 0 18px rgba(55,209,254,.22);
}


/* ── E. Home hero glow (mandatory) ──────────────────────────── */
/* Radial accent pool behind the right visual column             */
.hero::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 700px; height: 700px;
  top: 50%; right: 20%; transform: translateY(-50%);
  background: radial-gradient(ellipse at center,
    rgba(55,209,254,.09) 0%,
    rgba(55,209,254,.05) 40%,
    transparent 70%);
  border-radius: 50%;
}
.hero::before {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 700px; height: 700px;
  top: 40%; left: 0; transform: translateY(-50%);
  background: radial-gradient(ellipse at center,
    rgba(55,209,254,.09) 0%,
    rgba(55,209,254,.05) 40%,
    transparent 70%) !important;
  border-radius: 50%;
}


/* Outer ring: faint accent tint */
.vis-ring-1 { border-color: rgba(55,209,254,.12); }

/* Highlighted code line: accent */
.vis-code-line.hl { background: rgba(55,209,254,.38); }

/* Status dot: accent green-replaced with accent blue */
.vis-status-dot {
  background: var(--ac);
  box-shadow: 0 0 8px rgba(55,209,254,.55), 0 0 20px rgba(55,209,254,.20);
}

/* Chip progress bars: accent gradient */
.vis-chip-fill {
  background: linear-gradient(90deg, var(--ac) 0%, rgba(55,209,254,.45) 100%);
}

/* Floating central card: add accent layer to existing shadow */
.vis-card {
  box-shadow: 0 40px 100px rgba(0,0,0,.6),
              0 0 0 1px rgba(255,255,255,.06) inset,
              0 0 44px rgba(55,209,254,.06);
}


/* ── F. All dark page banners: accent top-accent line blend ──── */
/* Blends accent tint into the existing white gradient on ::before */
.hero::before,
.about-banner::before,
.svc-banner::before,
.port-banner::before,
.ins-banner::before,
.contact-banner::before,
.idet-article-header::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(55,209,254,.20) 25%,
    rgba(255,255,255,.50) 50%,
    rgba(55,209,254,.16) 75%,
    transparent 100%);
}


/* ── G. Dark section dividers: accent midpoint blend ────────── */
/* Thin 1px separators on dark sections get a subtle accent centre */
.impact-sec::before,
.tech-sec::before,
.srvcards-sec::before,
.port-featured-sec::before,
.port-case-sec::before,
.ins-featured-sec::before,
.srvwhy-sec::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(55,209,254,.12) 30%,
    rgba(255,255,255,.12) 50%,
    rgba(55,209,254,.10) 70%,
    transparent 100%);
}


/* ── H. Dark section ambient glow pools ──────────────────────── */
/* Upper-right radial accent cloud on select dark sections        */
.impact-sec,
.tech-sec { position: relative; overflow-x: hidden; }

.impact-sec::after,
.tech-sec::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0; width: 100%;
  max-width: 600px; height: 100%; max-height: 600px; top: -80px; right: -80px;
  background: radial-gradient(ellipse at top right,
    rgba(55,209,254,.055) 0%, transparent 65%);
  border-radius: 50%;
}
.impact-sec > .container,
.tech-sec > .container { position: relative; z-index: 1; }


/* ── I. Component-level accents ─────────────────────────────── */

/* Stat widget: hover accent border + glow */
.stat-widget:hover {
  box-shadow: 0 16px 44px rgba(255,255,255,.06),
              0 0 24px rgba(55,209,254,.08);
  border-color: rgba(55,209,254,.22);
}

/* Stat widget progress bars */
.sw-bar {
  background: linear-gradient(90deg,
    rgba(55,209,254,.65) 0%,
    rgba(55,209,254,.22) 100%);
}
/* Sparkline last bar: accent peak */
.sw-spark-b:last-child {
  background: var(--ac);
  box-shadow: 0 0 6px rgba(55,209,254,.50);
}

/* Tech card icon: accent on hover */
.tech-card:hover .tech-icon-wrap {
  color: var(--ac);
  border-color: rgba(55,209,254,.30);
  box-shadow: 0 0 18px rgba(55,209,254,.16);
}

/* Service panel icon: constant faint accent glow */
.svc-panel-icon { box-shadow: 0 0 28px rgba(55,209,254,.09); }

/* Service list row: accent bar + number on hover/active */
.svc-row:hover::before,
.svc-row.active::before { background: var(--ac); }
.svc-row:hover .svc-num,
.svc-row.active .svc-num { color: var(--ac); }

/* Service card: accent top rule + icon on hover */
.srv-card::before { background: var(--ac); }
.srv-card:hover .srv-icon {
  color: var(--ac);
  border-color: rgba(55,209,254,.30);
  box-shadow: 0 0 16px rgba(55,209,254,.16);
}

/* Portfolio card: accent top reveal line + arrow on hover */
.port-item::before { background: var(--ac); }
.port-item:hover .port-arrow {
  background: var(--ac);
  color: #03080f;
  box-shadow: 0 4px 14px rgba(55,209,254,.35);
}

/* Values card: accent top reveal line */
.value-card::before { background: var(--ac); }

/* Why-list numbers: accent tint */
.why-list-num,
.srvwhy-list-num { color: rgba(55,209,254,.48); }

/* Featured badge dots */
.port-featured-badge-dot,
.ins-featured-badge-dot { background: var(--ac); }

/* Featured wrap hover: accent border + glow */
.port-featured-wrap:hover,
.ins-featured-wrap:hover {
  border-color: rgba(55,209,254,.26);
  box-shadow: 0 0 42px rgba(55,209,254,.07);
}

/* Portfolio filter active: accent border ring */
.port-filter-btn.active {
  background: #03080f;
  border-color: rgba(55,209,254,.32);
  box-shadow: 0 0 10px rgba(55,209,254,.12);
}

/* Contact response dot: accent */
.contact-response-dot { background: var(--ac); }
.contact-response-badge {
  border-color: rgba(55,209,254,.18);
  box-shadow: 0 0 10px rgba(55,209,254,.07);
}

/* Contact form: accent focus ring */
.cf-input:focus,
.cf-textarea:focus,
.cf-select:focus {
  border-color: rgba(55,209,254,.45);
  box-shadow: 0 0 0 3px rgba(55,209,254,.10),
              inset 0 0 0 1px rgba(55,209,254,.06);
}

/* CTA rings: faint accent tint */
.cta-ring-a { border-color: rgba(55,209,254,.06); }
.cta-ring-b { border-color: rgba(55,209,254,.035); }

/* CTA headline gradient spans: soft accent glow */
.cta-headline .t-brand,
.cta-headline .t-cool {
  filter: drop-shadow(0 0 8px rgba(55,209,254,.20));
}

/* About: why-frame icon hover */
.why-frame-icon:hover,
.why-frame-row:hover .why-frame-icon {
  color: var(--ac);
  border-color: rgba(55,209,254,.26);
  background: rgba(55,209,254,.08);
}

/* Portfolio banner vis: ring + card accent */
.port-vis-ring-1 { border-color: rgba(55,209,254,.10); }
.port-vis-card {
  box-shadow: 0 30px 80px rgba(0,0,0,.50),
              inset 0 0 0 1px rgba(55,209,254,.06),
              0 0 24px rgba(55,209,254,.05);
}

/* Insight share button hover */
.idet-share-btn:hover {
  background: rgba(55,209,254,.12);
  color: var(--ac);
  border-color: rgba(55,209,254,.30);
}

/* Insight sidebar newsletter button: accent CTA */
.idet-sidebar-nl-btn {
  background: var(--ac);
  color: #03080f;
  box-shadow: 0 4px 18px rgba(55,209,254,.24);
}
.idet-sidebar-nl-btn:hover {
  background: #5ddafe;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(55,209,254,.32);
}

/* Insight reading progress bar */
.idet-read-progress-bar { background: var(--ac); }

/* Insight blockquote left border */
.idet-prose blockquote { border-left-color: var(--ac); }

/* Insight prose drop cap */
.idet-prose .idet-lead-para::first-letter { color: var(--ac); }

/* Process timeline: active node accent */
.process-node.active {
  background: var(--ac);
  border-color: var(--ac);
  color: white;
  box-shadow: 0 0 20px rgba(55,209,254,.35);
}
.process-step:hover .process-step-icon {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}

/* Marquee separator: accent tint */
.mq-sep { color: rgba(55,209,254,.32); }

/* Footer: accent top border + social hover */
.site-footer { border-top-color: rgba(55,209,254,.14); }
.soc-icon:hover {
  box-shadow: 0 0 14px rgba(55,209,254,.22);
  border-color: rgba(55,209,254,.32);
  color: var(--ac);
}


/* ── J. Accessibility: prefers-reduced-motion ────────────────── */
/* ─────────────────────────────────────────────────────────
   Privacy Policy – Page Specific Styles
   All rules scoped to .priv-* classes only.
   No overrides to global styles.
───────────────────────────────────────────────────────── */

/* ── Banner ── */
.priv-banner {
  min-height: 44vh;
  display: flex;
  align-items: flex-end;
  padding: 9rem 0 4.5rem;
  position: relative;
  overflow: hidden;
  background: #03080f;
}
.priv-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 40%,
    rgba(255,255,255,.25) 70%,
    transparent 100%);
}
.priv-banner-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 80%);
}
.priv-banner-bg-text {
      position: absolute;
      right: -20rem;
      top: 50%;
      transform: translateY(-40%);
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: clamp(9rem, 18vw, 18rem);
      color: rgba(255,255,255,.025);
      line-height: 1;
      pointer-events: none;
      user-select: none;
      letter-spacing: -.06em;
}
.priv-banner-inner { position: relative; z-index: 2; }

.priv-banner-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
  margin-bottom: 1.2rem;
  animation: fadeUp .65s ease both;
}
.priv-banner-eyebrow-line {
  width: 26px; height: 1px; background: rgba(255,255,255,.38);
}
.priv-banner-h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 800; line-height: 1.02; letter-spacing: -.045em;
  color: #fff; margin-bottom: 1.1rem;
  animation: fadeUp .65s ease .1s both;
}
.priv-banner-h1 em {
  font-style: normal; font-weight: 300;
  color: rgba(255,255,255,.38);
}
.priv-banner-meta {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  animation: fadeUp .65s ease .2s both;
}
.priv-banner-date {
  font-family: 'Roboto', sans-serif;
  font-size: .82rem; color: rgba(255,255,255,.32);
  letter-spacing: .04em;
}
.priv-banner-divider {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 40%, rgba(255,255,255,.04) 70%, transparent);
}

/* ── Layout ── */
.priv-body-sec {
  background: #ffffff;
  padding: 5rem 0 6rem;
  position: relative;
}
.priv-body-sec::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(15,23,42,.1);
}
.priv-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 5rem;
  align-items: start;
}

/* ── Sticky Sidebar TOC ── */
.priv-toc {
  position: sticky;
  top: 92px;
}
.priv-toc-heading {
  font-family: 'Roboto', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .5rem;
}
.priv-toc-list {
  list-style: none; padding: 0; margin: 0;
  border-left: 1px solid rgba(15,23,42,.1);
}
.priv-toc-list li {
  margin-bottom: .1rem;
}
.priv-toc-list a {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: .85rem; font-weight: 500;
  color: #64748b; line-height: 1.45;
  padding: .42rem .9rem;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .22s, border-color .22s;
}
.priv-toc-list a:hover {
  color: #03080f;
  border-left-color: #03080f;
}
.priv-toc-list a.active {
  color: #03080f;
  font-weight: 700;
  border-left-color: #03080f;
}
.priv-toc-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Roboto', sans-serif;
  font-size: .78rem; font-weight: 700;
  color: #94a3b8; letter-spacing: .04em;
  margin-top: 2.2rem;
  transition: color .22s, gap .22s;
}
.priv-toc-back i { font-size: .68rem; transition: transform .22s; }
.priv-toc-back:hover { color: #03080f; gap: .6rem; }
.priv-toc-back:hover i { transform: translateX(-3px); }

/* ── Prose Content ── */
.priv-prose { min-width: 0; }

.priv-section {
  padding-bottom: 3.5rem;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(15,23,42,.07);
}
.priv-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.priv-section-num {
  font-family: 'Inter', sans-serif;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: #cbd5e1; margin-bottom: .6rem; display: block;
}
.priv-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -.025em;
  color: #03080f; margin-bottom: 1.3rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.priv-prose p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.02rem; color: #475569;
  line-height: 1.88; margin-bottom: 1.1rem;
}
.priv-prose p:last-child { margin-bottom: 0; }
.priv-prose p + p { margin-top: .2rem; }

.priv-prose ul,
.priv-prose ol {
  list-style: none;
  padding: 0; margin: 1.1rem 0 1.3rem;
}
.priv-prose ul li,
.priv-prose ol li {
  font-family: 'Roboto', sans-serif;
  font-size: 1.02rem; color: #475569;
  line-height: 1.8; margin-bottom: .55rem;
  padding-left: 1.4rem; position: relative;
}
.priv-prose ul li::before {
  content: '';
  position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid rgba(15,23,42,.35);
}
.priv-prose ol {
  counter-reset: priv-counter;
}
.priv-prose ol li {
  counter-increment: priv-counter;
}
.priv-prose ol li::before {
  content: counter(priv-counter) '.';
  position: absolute; left: 0;
  font-family: 'Inter', sans-serif;
  font-size: .82rem; font-weight: 700;
  color: #94a3b8; top: .08em;
}

/* Callout / highlight box */
.priv-callout {
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  padding: 1.4rem 1.7rem;
  background: #f8fafc;
  margin: 1.6rem 0;
}
.priv-callout-label {
  font-family: 'Roboto', sans-serif;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: .5rem;
  display: flex; align-items: center; gap: .4rem;
}
.priv-callout p {
  font-size: .97rem !important;
  color: #334155 !important;
  margin-bottom: 0 !important;
}

/* Contact block */
.priv-contact-block {
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  background: #fff;
  margin-top: 1.4rem;
  display: flex; align-items: flex-start; gap: 1.3rem;
}
.priv-contact-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.1);
  display: flex; align-items: center; justify-content: center;
  color: #334155; font-size: .95rem; flex-shrink: 0;
}
.priv-contact-label {
  font-family: 'Roboto', sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #94a3b8; margin-bottom: .3rem; display: block;
}
.priv-contact-value {
  font-family: 'Inter', sans-serif;
  font-size: 1rem; font-weight: 600;
  color: #03080f; line-height: 1.55;
}
.priv-contact-value a {
  color: #03080f;
  border-bottom: 1px solid rgba(15,23,42,.2);
  transition: border-color .22s;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}
.priv-contact-value a:hover { border-color: #03080f; }

/* Last updated chip */
.priv-updated-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 50px;
  padding: .38rem 1rem;
  font-family: 'Roboto', sans-serif;
  font-size: .75rem; font-weight: 700;
  color: #64748b; letter-spacing: .04em;
}
.priv-updated-chip i { font-size: .65rem; color: #94a3b8; }

/* ── Responsive ── */
/* ── Approach Section ─────────────────────────── */
.approach-sec {
  position: relative;
}

.approach-track {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  margin-top: 3rem;
}

/* .approach-line {
  position: absolute;
  top: 52px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(107, 220, 255, 0.2) 10%,
    rgba(107, 220, 255, 0.2) 90%,
    transparent
  );
  z-index: 0;
} */

.approach-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.apstep-num {
  position: absolute;
  top: -8px;
  left: calc(50% - 26px);
  background: #6bdcff;
  color: #0a1a20;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.apstep-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(107, 220, 255, 0.2);
  background: rgba(107, 220, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #6bdcff;
  margin-bottom: 1.25rem;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.approach-step:hover .apstep-icon {
  background: #6bdcff;
  border-color: #6bdcff;
  color: #0a1a20;
  transform: translateY(-4px);
}

.apstep-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark-color, #fff);
  margin-bottom: 0.5rem;
}

.apstep-desc {
  font-size: 0.875rem;
  color: var(--muted-color, rgba(255,255,255,0.55));
  line-height: 1.6;
  max-width: 180px;
  margin: 0 auto;
}

/* ── Responsive ───────────────────────────────── */
/* ── Industries Section ───────────────────────── */
.industries-sec {
  padding: 80px 0;
  background: #0a0a0a;
}

.industries-sec .sec-h {
  color: #fff;
}

.industries-sec .sec-p {
  color: rgba(255,255,255,.5);
}

/* Pills container — wrapping flex, centered */
.ind-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 2.5rem;
}

/* Individual pill */
.ind-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(107, 220, 255, 0.18);
  border-radius: 50px;
  cursor: default;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.ind-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(107,220,255,.1), rgba(107,220,255,.03));
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ind-pill:hover {
  border-color: #6bdcff;
  background: rgba(107,220,255,.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 220, 255, 0.15);
}

.ind-pill:hover::after {
  opacity: 1;
}

/* Icon inside pill */
.ind-pill-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(107, 220, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #0a9fc2;
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
  position: relative;
  z-index: 1;
}

.ind-pill:hover .ind-pill-icon {
  background: #6bdcff;
  color: #0a1a20;
}

/* Title inside pill */
.ind-pill-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
}

.ind-pill:hover .ind-pill-name {
  color: #0a7a9a;
}

/* ── Mobile ───────────────────────────────────── */



/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Consolidated Media Queries
   All breakpoints merged here. One block per breakpoint.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
.vis-stage  { width: 360px; height: 360px; }
  .vis-chip-a { right: -5%; }
.vm-col { padding: 0 2.5rem; }
.port-featured-content { padding: 2.5rem; }
.ins-featured-content { padding: 2.5rem; }
  .ins-editorial-frame { width: 300px; }
}

@media (max-width: 1100px) {
.contact-form-col { padding-right: 2rem; }
  .contact-info-col { padding-left: 1.5rem; }
.idet-layout { grid-template-columns: 1fr 300px; gap: 3rem; }
}

@media (max-width: 991px) {
  .approach-sec{padding: var(--section-gap);
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
.svc-layout { grid-template-columns: 1fr; }
.port-grid { grid-template-columns: 1fr 1fr; }
:root { --section-gap: 3.25rem; }
  .hero { text-align: center; padding: 8.5rem 0 4rem; }
  .hero-sub, .trust-bar { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-vis { height: 380px; margin-top: 3rem; }
  .vis-stage { width: 280px; height: 280px; }
  .vis-chip-a, .vis-chip-b, .vis-chip-c { display: none; }
  .vis-status,.hero-vis { display: none; }
  .hero-bg-text { font-size: 10rem; }
  a.nav-logo {width: 130px;}
  .nav-cta {padding: .6rem 1rem;}
/* :root --section-gap override already declared in home rules */
  .about-banner { text-align: center; min-height: auto; padding: 8.5rem 0 4rem; }
  .about-banner-sub { margin-left: auto; margin-right: auto; }
  .about-stat-strip { margin: 0 auto; flex-wrap: wrap; justify-content: center; }
  .about-stat { padding: .75rem 1rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); }
  /* .about-stat:last-child { border-bottom: none; } */
  .about-banner-bg-text { font-size: 10rem; opacity: .015; }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-divider { display: none; }
  .vm-col { padding: 0; margin-bottom: 3.5rem; }
  .vm-col:last-child { margin-bottom: 0; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card:nth-child(3n) { border-right: 1px solid rgba(15,23,42,.1); }
  .value-card:nth-child(2n) { border-right: none; }
  .culture-grid { grid-template-columns: repeat(2, 1fr); }
  .overview-divider { display: none; }
.svc-banner { text-align: center; min-height: auto; padding: 8.5rem 0 4rem; }
  .svc-banner-sub { margin-left: auto; margin-right: auto; }
  .svc-stat-strip { margin: 0 auto; flex-wrap: wrap; justify-content: center; }
  .svc-stat { padding: .75rem 1rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); }
  .svc-banner-bg-text { font-size: 10rem; opacity: .015; }

  .srv-grid { grid-template-columns: repeat(2, 1fr); }
:root { --section-gap: 3.25rem; }

  /* Banner */
  .port-banner { text-align: center; padding: 8.5rem 0 4rem; }
  .port-banner-sub { margin: 0 auto 2.8rem; }
  .port-count-strip { justify-content: center; }
  .port-banner-bg-text { font-size: 10rem; }
  .port-banner-vis { display: none; }

  /* Featured: stack */
  .port-featured-wrap { grid-template-columns: 1fr; }
  .port-featured-img { min-height: 280px; }
  .port-featured-img::after {
    background: linear-gradient(to bottom, transparent 55%, #0a0a0a 100%);
  }

  /* Filter */
  .port-grid-header { flex-direction: column; align-items: flex-start; }

  /* Case study: stack */
  .port-case-grid { grid-template-columns: 1fr; }
  .port-case-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .port-case-col:last-child { border-bottom: none; }
:root { --section-gap: 3.25rem; }

  /* Banner */
  .ins-banner { text-align: center; padding: 8.5rem 0 4rem; }
  .ins-banner-sub { margin: 0 auto 2.8rem; }
  .ins-stat-strip { margin: 0 auto; }
  .ins-banner-bg-text { font-size: 10rem; }
  .ins-banner-editorial { display: none; }

  /* Featured: stack */
  .ins-featured-wrap { grid-template-columns: 1fr; }
  .ins-featured-img { min-height: 280px; }
  .ins-featured-img::after {
    background: linear-gradient(to bottom, transparent 55%, #0a0a0a 100%);
  }

  /* Grid header */
  .ins-grid-header { flex-direction: column; align-items: flex-start; }
:root { --section-gap: 3.25rem; }

  /* Banner */
  .contact-banner { min-height: auto; padding: 8rem 0 3.5rem; text-align: center; }
  .contact-banner-sub { margin: 0 auto; }
  .contact-banner-rule { display: none; }
  .contact-banner-bg-text { font-size: 10rem; right: -1rem; }

  /* Form + Info: stack */
  .contact-form-col { padding-right: 10px; padding-left: 10px; margin-bottom: 3.5rem; overflow: hidden; }
  .contact-info-col {
    padding-left: 0; border-left: none;
    border-top: 1px solid rgba(15,23,42,.08); padding-top: 3rem;
  }

  /* Map card */
  .contact-map-card { left: 1rem; bottom: 1rem; }
:root { --section-gap: 3.25rem; }

  /* Switch to single-column — sidebar falls below */
  .idet-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 780px;
  }
  /* Sidebar loses sticky on tablet/mobile */
  .idet-sidebar-sticky { position: static; }

  /* Article header */
  .idet-article-title { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.priv-layout { grid-template-columns: 1fr; gap: 0; }
  .priv-toc { position: static; margin-bottom: 3rem; }
  .priv-toc-list { display: flex; flex-wrap: wrap; gap: .3rem; border-left: none; }
  .priv-toc-list li { margin-bottom: 0; }
  .priv-toc-list a {
    border: 1px solid rgba(15,23,42,.12);
    border-left: 1px solid rgba(15,23,42,.12);
    border-radius: 50px;
    padding: .3rem .85rem;
    font-size: .78rem;
    margin-left: 0;
    background: transparent;
  }
  .priv-toc-list a:hover,
  .priv-toc-list a.active {
    background: #03080f; color: #fff;
    border-color: #03080f;
  }
  .priv-toc-back { display: none; }
  .hero-actions{margin-bottom: 0;}
}

@media (max-width: 767px) {
#topnav .nav-links,
  #topnav .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-nav-open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(3,8,15,.98); padding: 1.5rem;
    border-bottom: 1px solid var(--d-border); gap: .3rem; z-index: 999;
  }
  .mobile-nav-open .nav-cta { 
    display: inline-flex !important; 
    /* margin: 1rem 1.5rem 1.5rem;  */
  }
  .btn-pri, .btn-ghost { width: 100%; justify-content: center; }
.trust-bar { flex-wrap: wrap; justify-content: center; }
  .trust-stat { padding: .75rem 1rem; border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); }
  .trust-stat:last-child { border-bottom: none; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-bg-text { display: none; }
  .port-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr; }
  .value-card { border-right: none; }
  .value-card:nth-child(3n)      { border-right: none; }
  .value-card:nth-last-child(-n+3) { border-bottom: 1px solid rgba(15,23,42,.1); }
  .value-card:last-child          { border-bottom: none; }
  .culture-grid { grid-template-columns: 1fr 1fr; }
  .why-list li { flex-direction: column; gap: .5rem; }
  .about-banner-bg-text { display: none; }
.srv-grid { grid-template-columns: 1fr; }
  .svc-banner-bg-text { display: none; }
  .srvwhy-list li { flex-direction: column; gap: .5rem; }

  /* Collapse zigzag to simple stacked list */
  .process-grid { grid-template-columns: 1fr; }
  .process-spine { display: none; }
  .process-step { border: none !important; text-align: left !important; padding: 2rem 0; border-bottom: 1px solid rgba(15,23,42,.08) !important; }
  .process-step:last-child { border-bottom: none !important; }
  .process-step.shaded { background: transparent; }
  .process-step-icon,
  .process-step.left .process-step-icon  { margin-left: 0; margin-right: auto; }
  .process-step-body,
  .process-step.left .process-step-body  { margin-left: 0; margin-right: auto; }

  .hiddden-sec {display: none;}
.port-featured-metric:nth-child(even) { border-right: none; }
  .port-featured-metric:last-child { border-bottom: none; }

  .port-filters { gap: .4rem; }

  .port-case-metrics { grid-template-columns: 1fr 1fr; }
  .port-case-col { padding: 2rem 1.5rem; }

  .btn-pri, .btn-ghost { width: 100%; justify-content: center; }
  .d-flex.gap-3.flex-wrap { flex-direction: column; padding: 0 1rem; }
.ins-banner-bg-text { display: none; }
  .ins-banner-eyebrow { justify-content: center; }
  .ins-stat-strip { flex-direction: column; gap: 1rem; padding: 1.2rem; width: 100%; }
  .ins-stat { padding: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: .8rem; }
  .ins-stat:last-child { border-bottom: none; padding-bottom: 0; }

  .ins-featured-content { padding: 1.8rem; }
  .port-filters { gap: .4rem; }

  .ins-nl-input { min-width: 0; }
  .ins-nl-form { flex-direction: column; }
  .ins-nl-form .btn-pri { width: 100%; justify-content: center; }
  .btn-ghost { width: 100%; justify-content: center; }
.nav-burger { display: flex; }
  .mobile-nav-open .nav-links {
    display: flex !important; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(0,0,0,.98); padding: 1.5rem;
    border-bottom: 1px solid var(--d-border); gap: .3rem; z-index: 999;
  }

  /* Banner */
  .contact-banner-bg-text { display: none; }
  .contact-banner-eyebrow { justify-content: center; }

  /* Form: collapse inline row */
  .cf-row { grid-template-columns: 1fr; gap: 0; }

  /* Map */
  .contact-map-wrap { height: 320px; }
  .contact-map-card { min-width: auto; max-width: calc(100% - 2rem); left: 1rem; right: 1rem; }

  /* CTA */
  .btn-pri, .btn-ghost { width: 100%; justify-content: center; }
  .d-flex.gap-3.flex-wrap { flex-direction: column; padding: 0 1rem; }
  .contact-form-col {margin-bottom: 1.5rem; padding-right: 0; padding-left: 0; overflow: hidden; }
  .contact-body-sec {padding: 30px 15px; overflow-x: hidden; }
/* Nav mobile */
  .nav-burger { display: flex; }
  .mobile-nav-open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(0,0,0,.98); padding: 1.5rem;
    border-bottom: 1px solid var(--d-border); gap: .3rem; z-index: 999;
  }

  .idet-breadcrumb { padding: .8rem 1.2rem; }
  .idet-bc-item { font-size: .75rem; }
  /* Truncate long title in breadcrumb */
  .idet-bc-item.current {
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .idet-article-header { padding: 3.5rem 0 3rem; }
  .idet-article-title { font-size: 1.7rem; }
  .idet-article-excerpt { font-size: 1rem; }
  .idet-header-byline { flex-direction: column; align-items: flex-start; gap: .9rem; }

  .idet-layout { padding: 0 1.2rem; }
  .idet-body-section { padding: 2.5rem 0 3.5rem; }

  /* Article nav stacks */
  .idet-article-nav { grid-template-columns: 1fr; }
  .idet-nav-card.next { text-align: left; }
  .idet-nav-card.next .idet-nav-dir { justify-content: flex-start; }

  /* CTA */
  .btn-pri, .btn-ghost { width: 100%; justify-content: center; }
  .d-flex.gap-3.flex-wrap { flex-direction: column; padding: 0 1rem; }
.priv-banner { min-height: auto; padding: 8rem 0 3.5rem; }
  .priv-banner-bg-text { display: none; }
  .priv-body-sec { padding: 3.5rem 0 4.5rem; }
  .priv-section { padding-bottom: 2.5rem; margin-bottom: 2.5rem; }
  .priv-contact-block { flex-direction: column; gap: 1rem; }
.approach-track {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .approach-line {
    display: none;
  }

  .approach-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(107, 220, 255, 0.1);
    gap: 1.25rem;
  }

  .approach-step:last-child {
    border-bottom: none;
  }

  .apstep-num {
    left: 28px;
    top: 8px;
  }

  .apstep-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .apstep-body {
    padding-top: 4px;
  }

  .apstep-desc {
    max-width: 100%;
  }
  .svc-stat-strip{flex-direction: column;}
}

@media (max-width: 575px) {
.stat-grid { grid-template-columns: 1fr; }

.svc-row{
  flex-direction: column;
  gap: 1rem;
}
.port-grid { grid-template-columns: 1fr; }
.contact-form-sub {margin-bottom: 1.5rem;}
  .contact-body-sec {padding: 20px 15px 20px; overflow-x: hidden; }
  .cf-group { max-width: 100%; }
  .contact-social-row {padding-top: 1rem;}
.industries-sec {
    padding: 60px 0;
  }

  .ind-pills {
    gap: 10px;
    margin-top: 2rem;
  }

  .ind-pill {
    padding: 10px 16px;
    gap: 8px;
  }

  .ind-pill-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }

  .ind-pill-name {
    font-size: 0.825rem;
  }
}

@media (max-width: 480px) {
.stat-grid { grid-template-columns: 1fr; }
.culture-grid { grid-template-columns: 1fr; }
.port-case-metrics { grid-template-columns: 1fr; }
  .port-case-metric-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .port-case-metric-cell:last-child { border-bottom: none; }
.ins-banner-h1 { font-size: 2.8rem; }
  .ins-featured-content { padding: 1.5rem; }
.contact-banner-h1 { font-size: 2.8rem; }
  .contact-map-card { display: none; } /* hide on very small screens — address visible in info section */
.idet-prose p { font-size: 1rem; }
  .idet-prose .idet-lead-para::first-letter { font-size: 2.8rem; }
  .idet-prose blockquote { padding: 1.2rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
*, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
*, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .idet-read-progress-bar { transition: none; }
.hero::after,
  .impact-sec::after,
  .tech-sec::after { display: none; }

  .vis-status-dot,
  .vis-card,
  .svc-panel-icon,
  .stat-widget:hover,
  .btn-accent:hover { box-shadow: none; }
}