/*
 * ══════════════════════════════════════════════════════════════════
 *  IOUX SYSTEMS v4 — Design System
 *  Light (Scheme C: Sovereign Stone) = DEFAULT
 *  Dark  (Scheme A: Command Midnight) = toggle
 *  BEM naming throughout. Angular migration: each section comment
 *  maps to a standalone Angular component. Override :root variables
 *  in Angular's styles.scss to re-theme in one place.
 * ══════════════════════════════════════════════════════════════════
 */

/* ── LIGHT THEME (DEFAULT) ── */
:root {
  --bg:          #F7F4EE;
  --bg-2:        #FFFFFF;
  --bg-3:        #EDE9DF;
  --bg-footer:   #0D1E38;
  --bg-quote:    #0D2B5E;
  --primary:     #0D2B5E;
  --primary-lt:  #1E5FA8;
  --primary-glow:rgba(13,43,94,0.07);
  --gold:        #B8832A;
  --gold-lt:     #D4A040;
  --teal:        #0A7060;
  --tx-h:        #0D2B5E;
  --tx-body:     #364556;
  --tx-muted:    #8090A4;
  --bd:          rgba(13,43,94,0.09);
  --bd-2:        rgba(13,43,94,0.18);
  --card:        rgba(255,255,255,0.92);
  --glass:       rgba(247,244,238,0.95);
  --hero-grid:   rgba(13,43,94,0.05);
  --hero-em:     linear-gradient(135deg,#0D2B5E 0%,#1E5FA8 100%);
  --hero-orb1:   rgba(13,43,94,0.10);
  --hero-orb2:   rgba(10,112,96,0.07);
  --hero-orb3:   rgba(184,131,42,0.06);
  --live-color:  #0A7060;
  --live-bg:     rgba(10,112,96,0.09);
  --live-border: rgba(10,112,96,0.25);
  --announce-bg:     linear-gradient(90deg,#EDE9DF,rgba(13,43,94,0.06),#EDE9DF);
  --announce-border: rgba(13,43,94,0.14);
  --shadow:      0 2px 16px rgba(13,43,94,0.08);
  --shadow-h:    0 12px 40px rgba(13,43,94,0.14);
  --noise-op:    0.018;
  --ff-display:  'Cormorant Garamond', Georgia, serif;
  --ff-body:     'DM Sans', system-ui, sans-serif;
  --ff-mono:     'IBM Plex Mono', monospace;
  --radius:      4px;
  --radius-lg:   10px;
  --ease:        cubic-bezier(0.16,1,0.3,1);
  --logo-color: #000;
  --logo-xcolor: #1e6298;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:          #070D1A;
  --bg-2:        #0D1829;
  --bg-3:        #111F36;
  --bg-footer:   #040912;
  --bg-quote:    #0D2B5E;
  --primary:     #1D54B0;
  --primary-lt:  #2B7FFF;
  --primary-glow:rgba(43,127,255,0.14);
  --gold:        #C4923A;
  --gold-lt:     #E0AE5C;
  --teal:        #0E9B8A;
  --tx-h:        #FFFFFF;
  --tx-body:     #C0D0E4;
  --tx-muted:    #6A7E9A;
  --bd:          rgba(255,255,255,0.07);
  --bd-2:        rgba(255,255,255,0.13);
  --card:        rgba(13,24,41,0.75);
  --glass:       rgba(7,13,26,0.92);
  --hero-grid:   rgba(43,127,255,0.05);
  --hero-em:     linear-gradient(135deg,#FFFFFF 0%,rgba(43,127,255,0.9) 100%);
  --hero-orb1:   rgba(29,84,176,0.18);
  --hero-orb2:   rgba(14,155,138,0.11);
  --hero-orb3:   rgba(196,146,58,0.07);
  --live-color:  #0E9B8A;
  --live-bg:     rgba(14,155,138,0.10);
  --live-border: rgba(14,155,138,0.28);
  --announce-bg:     linear-gradient(90deg,#111F36,rgba(29,84,176,0.28),#111F36);
  --announce-border: rgba(43,127,255,0.20);
  --shadow:      0 2px 16px rgba(0,0,0,0.4);
  --shadow-h:    0 20px 60px rgba(0,0,0,0.5);
  --noise-op:    0.04;
  --logo-color: #fff;
  --logo-xcolor: #C0D0E4;
}

/* Theme transition */
.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
  transition: background-color .35s ease, color .25s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg); color:var(--tx-body);
  font-family:var(--ff-body); font-weight:300; line-height:1.7;
  overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity:var(--noise-op);
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:var(--ff-display); font-weight:400; line-height:1.15; color:var(--tx-h) }
h1 { font-size:clamp(2.1rem,5vw,4.6rem) }
h2 { font-size:clamp(1.75rem,3.5vw,2.85rem) }
h3 { font-size:clamp(1.15rem,2vw,1.6rem) }
h4 { font-family:var(--ff-body); font-size:.96rem; font-weight:600; color:var(--tx-h) }
p  { font-size:1rem; color:var(--tx-body) }
a  { color:inherit; text-decoration:none }

/* RTL */
[dir="rtl"] .nav__links            { flex-direction:row-reverse }
[dir="rtl"] .hero__eyebrow         { flex-direction:row-reverse }
[dir="rtl"] .hero__eyebrow-line    { background:linear-gradient(270deg,var(--gold),transparent) }
[dir="rtl"] .divider               { background:linear-gradient(270deg,var(--primary-lt),transparent) }
[dir="rtl"] .divider--gold         { background:linear-gradient(270deg,var(--gold),transparent) }
[dir="rtl"] .record-points li      { padding-left:0; padding-right:1.2rem }
[dir="rtl"] .record-points li::before { left:auto; right:0 }
[dir="rtl"] .ai__module            { border-left:none; border-right:3px solid var(--primary); border-radius:var(--radius-lg) 0 0 var(--radius-lg) }

/* ── LAYOUT ── */
.container  { max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) }
.section    { padding:clamp(3.5rem,8vw,7rem) 0 }
.section--alt { background:var(--bg-3) }

/* ── HELPERS ── */
.eyebrow {
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.9rem;
}
.divider      { width:3rem; height:2px; margin:1.4rem 0; background:linear-gradient(90deg,var(--primary-lt),transparent) }
.divider--gold{ background:linear-gradient(90deg,var(--gold),transparent) }
.section-hdr  { margin-bottom:clamp(2rem,5vw,3.5rem) }
.section-hdr p{ max-width:560px; margin-top:.7rem }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.8rem; font-family:var(--ff-body);
  font-size:.875rem; font-weight:500; border-radius:var(--radius);
  border:none; cursor:pointer; text-decoration:none;
  transition:all .25s var(--ease); white-space:nowrap;
}
.btn--primary { background:var(--primary); color:#fff }
.btn--primary:hover { background:var(--primary-lt); transform:translateY(-1px); box-shadow:0 4px 20px rgba(13,43,94,.25) }
[data-theme="dark"] .btn--primary:hover { box-shadow:0 4px 20px rgba(43,127,255,.3) }
.btn--outline { background:transparent; color:var(--tx-h); border:1px solid var(--bd-2) }
.btn--outline:hover { border-color:var(--primary-lt); background:var(--primary-glow); transform:translateY(-1px) }
.btn--gold { background:var(--gold); color:#fff; font-weight:600 }
.btn--gold:hover { background:var(--gold-lt); transform:translateY(-1px); box-shadow:0 4px 18px rgba(184,131,42,.35) }
.btn--sm { padding:.55rem 1.2rem; font-size:.8rem }
.btn--arrow::after { content:" →" }

/* ── TAGS ── */
.tag { display:inline-block; padding:.27rem .68rem; border-radius:100px; font-size:.68rem; font-family:var(--ff-mono); letter-spacing:.08em; text-transform:uppercase; border:1px solid }
.tag--blue  { color:var(--primary-lt); border-color:rgba(30,95,168,.35); background:rgba(30,95,168,.08) }
.tag--gold  { color:var(--gold-lt); border-color:rgba(184,131,42,.35); background:rgba(184,131,42,.08) }
.tag--teal  { color:var(--teal); border-color:rgba(10,112,96,.35); background:rgba(10,112,96,.08) }
.tag--white { color:var(--tx-muted); border-color:var(--bd-2) }

/* Live badge */
.live-badge { display:inline-flex; align-items:center; gap:.42rem; padding:.28rem .8rem; border-radius:100px; font-size:.68rem; font-family:var(--ff-mono); letter-spacing:.12em; color:var(--live-color); background:var(--live-bg); border:1px solid var(--live-border) }
.live-dot   { width:6px; height:6px; border-radius:50%; background:var(--live-color); animation:blink 2s ease-in-out infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* Cert badge */
.cert-badge { display:inline-flex; align-items:center; gap:.38rem; padding:.26rem .62rem; border-radius:100px; font-size:.68rem; color:var(--tx-muted); background:var(--primary-glow); border:1px solid var(--bd-2) }
.cert-dot   { width:5px; height:5px; border-radius:50%; background:var(--teal) }

/* Reveal */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s var(--ease),transform .65s var(--ease) }
.reveal.visible { opacity:1; transform:translateY(0) }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ══════════════════════════════════════════════════════════════════
   ANNOUNCE BAR  →  AnnounceBannerComponent
══════════════════════════════════════════════════════════════════ */
.announce-bar {
  background:var(--announce-bg); border-bottom:1px solid var(--announce-border);
  padding:.52rem 0; text-align:center; z-index:999; position:relative;
}
.announce-bar p  { font-size:.76rem; color:var(--tx-body) }
.announce-bar strong { color:var(--tx-h) }
.announce-bar .hl{ color:var(--gold) }

/* ══════════════════════════════════════════════════════════════════
   NAV  →  NavbarComponent
══════════════════════════════════════════════════════════════════ */
.nav { padding:1.1rem 0; transition:all .4s var(--ease) }
.nav.is-scrolled {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--glass); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bd); padding:.72rem 0; box-shadow:var(--shadow);
}
.nav__inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem); gap:1rem;
}
.nav__logo img { height:30px; transition:opacity .2s }
[data-theme="dark"] .nav__logo img { filter:brightness(1.6); mix-blend-mode:screen }
.nav__logo img:hover { opacity:.8 }

.nav__links { display:flex; align-items:center; gap:1.6rem; list-style:none }
.nav__links a {
  font-size:.82rem; font-weight:400; color:var(--tx-body); transition:color .2s;
  position:relative; letter-spacing:.02em; white-space:nowrap;
}
.nav__links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px;
  background:var(--primary-lt); transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav__links a:hover { color:var(--tx-h) }
.nav__links a:hover::after { transform:scaleX(1); transform-origin:left }

/* Language switcher */
.nav__lang { display:flex; align-items:center; border:1px solid var(--bd-2); border-radius:var(--radius); overflow:hidden }
.lang-btn {
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.06em;
  padding:.28rem .44rem; border:none; border-right:1px solid var(--bd-2);
  background:transparent; color:var(--tx-muted); cursor:pointer; transition:all .18s;
}
.lang-btn:last-child { border-right:none }
.lang-btn:hover { background:var(--primary-glow); color:var(--tx-h) }
.lang-btn.active { background:var(--primary); color:#fff }

/* Theme toggle */
.theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius);
  background:var(--primary-glow); border:1px solid var(--bd-2);
  cursor:pointer; transition:all .2s; flex-shrink:0;
}
.theme-toggle:hover { background:var(--bd-2) }
.theme-toggle svg { width:15px; height:15px; stroke:var(--tx-h); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:opacity .2s }
.theme-toggle .icon-moon { display:none }
[data-theme="dark"] .theme-toggle .icon-sun  { display:none }
[data-theme="dark"] .theme-toggle .icon-moon { display:block }

/* Hamburger */
.nav__hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none }
.nav__hamburger span { display:block; width:22px; height:1.5px; background:var(--tx-h); transition:all .3s }
.nav__hamburger.is-open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.nav__hamburger.is-open span:nth-child(2) { opacity:0 }
.nav__hamburger.is-open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* ══════════════════════════════════════════════════════════════════
   HERO  →  HeroComponent
══════════════════════════════════════════════════════════════════ */
.hero {
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; position:relative; overflow:hidden;
  padding:clamp(6rem,12vw,9rem) 0 clamp(3rem,6vw,5rem);
  background:var(--bg);
}
.hero__grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 100%);
  animation:gridPan 24s linear infinite;
}
@keyframes gridPan { 0%{background-position:0 0} 100%{background-position:80px 80px} }
.hero__orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none }
.hero__orb--1 { width:clamp(280px,50vw,580px); height:clamp(280px,50vw,580px); background:radial-gradient(circle,var(--hero-orb1),transparent 70%); top:-80px; right:-80px; animation:pulse 9s ease-in-out infinite }
.hero__orb--2 { width:clamp(180px,35vw,380px); height:clamp(180px,35vw,380px); background:radial-gradient(circle,var(--hero-orb2),transparent 70%); bottom:0; left:-50px; animation:pulse 11s ease-in-out infinite 2s }
.hero__orb--3 { width:clamp(140px,25vw,280px); height:clamp(140px,25vw,280px); background:radial-gradient(circle,var(--hero-orb3),transparent 70%); top:42%; left:58%; animation:pulse 13s ease-in-out infinite 4s }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.18);opacity:1} }
.hero__content { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem) }
.hero__eyebrow { display:flex; align-items:center; gap:.9rem; margin-bottom:1.8rem }
.hero__eyebrow-line { width:36px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); flex-shrink:0 }
.hero__eyebrow-text { font-family:var(--ff-mono); font-size:clamp(.6rem,.8vw,.7rem); letter-spacing:.22em; text-transform:uppercase; color:var(--gold) }
.hero__headline { max-width:820px; margin-bottom:1.4rem }
.hero__headline em { font-style:italic; background:var(--hero-em); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.hero__sub { max-width:560px; font-size:clamp(.95rem,1.4vw,1.05rem); font-weight:300; margin-bottom:2.2rem; line-height:1.8 }
.hero__actions { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:3rem }
.hero__stats {
  display:flex; flex-wrap:wrap;
  border:1px solid var(--bd-2); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); max-width:fit-content; backdrop-filter:blur(10px); box-shadow:var(--shadow);
}
.hero__stat { padding:clamp(.8rem,2vw,1.1rem) clamp(.9rem,2.5vw,1.7rem); border-right:1px solid var(--bd) }
.hero__stat:last-child { border-right:none }
.hero__stat-num { font-family:var(--ff-display); font-size:clamp(1.4rem,2.5vw,1.8rem); font-weight:500; color:var(--tx-h); display:block; line-height:1; margin-bottom:.25rem }
.hero__stat-num span { color:var(--primary-lt) }
.hero__stat-label { font-size:clamp(.6rem,.8vw,.68rem); color:var(--tx-muted); letter-spacing:.04em; white-space:nowrap }
.hero__certs { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:1.8rem }
.hero__certs-label { font-size:.67rem; font-family:var(--ff-mono); text-transform:uppercase; letter-spacing:.14em; color:var(--tx-muted) }

/* ══════════════════════════════════════════════════════════════════
   CAPABILITIES  →  CapabilitiesComponent
══════════════════════════════════════════════════════════════════ */
.capabilities__grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));
  gap:1.5px; background:var(--bd); border:1px solid var(--bd);
  border-radius:var(--radius-lg); overflow:hidden;
}
.cap-card { background:var(--bg-2); padding:clamp(1.5rem,3vw,2.2rem); position:relative; overflow:hidden; transition:background .3s }
.cap-card__icon { font-size:1.65rem; margin-bottom:1rem; display:block; transition:transform .3s }
.cap-card:hover .cap-card__icon { transform:scale(1.1) }
.cap-card h4 { margin-bottom:.6rem }
.cap-card p  { font-size:.86rem; line-height:1.7 }
.cap-card__tag { margin-top:1rem }
.cap-card--featured { grid-column:span 2; border-bottom:2px solid var(--primary) }
.cap-card--featured::after {
  content:'FLAGSHIP — LIVE IN PRODUCTION'; position:absolute; top:1.3rem; right:1.3rem;
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.17em;
  color:var(--gold); border:1px solid rgba(184,131,42,.35); padding:.2rem .52rem; border-radius:100px;
}

/* ══════════════════════════════════════════════════════════════════
   CLIENT LOGOS  →  ClientLogosComponent
   JS-controlled show/hide: data-show="true/false" on .clients-section
══════════════════════════════════════════════════════════════════ */
.clients-section { padding:clamp(2.5rem,5vw,4rem) 0; border-top:1px solid var(--bd); border-bottom:1px solid var(--bd) }
.clients-section[data-show="false"] { display:none }
.clients__label {
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tx-muted); text-align:center; margin-bottom:2rem;
}
.clients__track { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.8rem) }
.client-logo {
  display:flex; align-items:center; justify-content:center;
  height:44px; padding:0 1.4rem;
  border:1px solid var(--bd-2); border-radius:var(--radius-lg);
  background:var(--card); transition:all .3s var(--ease);
  filter:grayscale(1); opacity:.55;
}
.client-logo:hover { filter:grayscale(0); opacity:1; border-color:var(--primary); box-shadow:var(--shadow) }
/* Text-only client placeholder — swap with <img> tag when you have logos */
.client-logo span {
  font-family:var(--ff-display); font-size:1rem; font-weight:600;
  color:var(--tx-h); letter-spacing:.06em; white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   TRACK RECORD  →  TrackRecordComponent
══════════════════════════════════════════════════════════════════ */
.tr__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr)); gap:1.4rem }
.rec-card { background:var(--bg-2); border:1px solid var(--bd); border-radius:var(--radius-lg); overflow:hidden; transition:all .3s var(--ease); box-shadow:var(--shadow) }
.rec-card:hover { border-color:var(--bd-2); transform:translateY(-3px); box-shadow:var(--shadow-h) }
.rec-card__hd { padding:1.6rem 1.9rem 1.1rem; border-bottom:1px solid var(--bd); display:flex; align-items:flex-start; justify-content:space-between; gap:.9rem }
.rec-card__sector { font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-muted); margin-bottom:.38rem }
.rec-card h4 { font-family:var(--ff-display); font-size:1.18rem; font-weight:400; color:var(--tx-h) }
.rec-status { display:inline-flex; align-items:center; gap:.38rem; padding:.26rem .68rem; border-radius:100px; font-size:.64rem; font-family:var(--ff-mono); color:var(--live-color); background:var(--live-bg); border:1px solid var(--live-border); white-space:nowrap; letter-spacing:.1em }
.rec-card__body { padding:1.3rem 1.9rem }
.rec-points { list-style:none; display:flex; flex-direction:column; gap:.52rem }
.rec-points li { font-size:.855rem; padding-left:1.1rem; position:relative }
.rec-points li::before { content:'→'; position:absolute; left:0; color:var(--primary-lt); font-size:.78rem }

/* ══════════════════════════════════════════════════════════════════
   AI SECTION  →  AiSectionComponent
══════════════════════════════════════════════════════════════════ */
.ai__layout { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start }
.ai__sticky { position:sticky; top:6rem }
.ai__metrics { display:flex; gap:1.1rem; margin:1.8rem 0; flex-wrap:wrap }
.ai__metric { background:var(--card); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:1.1rem 1.3rem; flex:1; min-width:90px; box-shadow:var(--shadow) }
.ai__metric-val { font-family:var(--ff-display); font-size:1.8rem; color:var(--primary-lt); display:block; margin-bottom:.2rem }
.ai__metric-label { font-size:.68rem; color:var(--tx-muted) }
.ai__modules { display:flex; flex-direction:column; gap:1rem }
.ai__mod { background:var(--card); border:1px solid var(--bd); border-left:3px solid var(--primary); border-radius:0 var(--radius-lg) var(--radius-lg) 0; padding:1.3rem 1.55rem; transition:border-left-color .3s,box-shadow .3s; box-shadow:var(--shadow) }
.ai__mod:hover { border-left-color:var(--primary-lt); box-shadow:var(--shadow-h) }
.ai__mod-hd { display:flex; align-items:center; gap:.65rem; margin-bottom:.5rem }
.ai__mod-icon { font-size:1.1rem }
.ai__mod h4 { letter-spacing:0 }
.ai__mod p { font-size:.83rem }

/* ══════════════════════════════════════════════════════════════════
   PLATFORMS  →  PlatformsComponent
══════════════════════════════════════════════════════════════════ */
.pf-feature { display:grid; grid-template-columns:1fr 1fr; gap:3.8rem; align-items:center; padding:3.2rem 0; border-bottom:1px solid var(--bd) }
.pf-feature:last-child { border-bottom:none }
.pf-feature:nth-child(even) .pf-feature__text   { order:2 }
.pf-feature:nth-child(even) .pf-feature__visual  { order:1 }
.pf-feature__text h3 { margin-bottom:.85rem }
.pf-feature__text p  { margin-bottom:1.2rem; font-size:.93rem }
.pf-list { display:flex; flex-direction:column; gap:.52rem; margin:1.2rem 0 }
.pf-item { display:flex; align-items:flex-start; gap:.65rem; font-size:.855rem }
.pf-dot  { width:5px; height:5px; border-radius:50%; background:var(--primary-lt); flex-shrink:0; margin-top:.54rem }
.pf-visual { background:var(--bg-2); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:2.2rem; position:relative; overflow:hidden; box-shadow:var(--shadow) }
.pf-visual::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--primary-glow),transparent 70%) }
.pf-visual-inner { position:relative; z-index:1 }
.pstat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-top:1.2rem }
.pstat { background:var(--bg-3); border:1px solid var(--bd); border-radius:var(--radius); padding:.85rem }
.pstat__val { font-family:var(--ff-display); font-size:1.5rem; color:var(--tx-h); display:block }
.pstat__key { font-size:.66rem; color:var(--tx-muted) }

/* ══════════════════════════════════════════════════════════════════
   SECTORS  →  SectorsComponent
══════════════════════════════════════════════════════════════════ */
.sectors__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,185px),1fr)); gap:.85rem }
.sector-card { background:var(--bg-2); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:1.55rem 1.35rem; text-align:center; transition:all .3s var(--ease); box-shadow:var(--shadow) }
.sector-card:hover { border-color:var(--primary); transform:translateY(-4px); box-shadow:var(--shadow-h) }
.sector-card__icon { font-size:1.85rem; display:block; margin-bottom:.85rem }
.sector-card h4 { font-size:.84rem; letter-spacing:0; margin-bottom:.32rem }
.sector-card p  { font-size:.74rem; color:var(--tx-muted) }

/* ══════════════════════════════════════════════════════════════════
   BLOG  →  BlogComponent
══════════════════════════════════════════════════════════════════ */
.blog__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:1.4rem }
.blog-card { background:var(--bg-2); border:1px solid var(--bd); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:all .3s var(--ease); box-shadow:var(--shadow) }
.blog-card:hover { border-color:var(--bd-2); transform:translateY(-3px); box-shadow:var(--shadow-h) }
.blog-card__cover { height:150px; display:flex; align-items:center; justify-content:center; font-size:2.8rem; background:linear-gradient(135deg,var(--bg-3),var(--bg-2)) }
.blog-card__body { padding:1.5rem; flex:1; display:flex; flex-direction:column }
.blog-card__meta { display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; flex-wrap:wrap }
.blog-card__date { font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.1em; color:var(--tx-muted) }
.blog-card h3 { font-family:var(--ff-display); font-size:1.16rem; font-weight:400; color:var(--tx-h); margin-bottom:.65rem; line-height:1.3 }
.blog-card p  { font-size:.845rem; line-height:1.7; flex:1 }
.blog-cta { margin-top:1.1rem; font-family:var(--ff-mono); font-size:.7rem; color:var(--primary-lt); letter-spacing:.08em; display:inline-flex; align-items:center; gap:.38rem; transition:gap .2s }
.blog-card:hover .blog-cta { gap:.65rem }

/* ══════════════════════════════════════════════════════════════════
   QUOTE
══════════════════════════════════════════════════════════════════ */
.quote-section { background:var(--bg-quote); padding:5.5rem 0; text-align:center; position:relative; overflow:hidden }
.quote-section blockquote { position:relative; z-index:1; font-family:var(--ff-display); font-size:clamp(1.3rem,2.6vw,2.2rem); font-style:italic; font-weight:300; color:rgba(255,255,255,.93); max-width:800px; margin:0 auto 1.3rem; line-height:1.4; padding:0 1rem }
.quote-section cite { font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); font-style:normal }

/* ══════════════════════════════════════════════════════════════════
   WHY US  →  WhyUsComponent
══════════════════════════════════════════════════════════════════ */
.why__grid  { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }
.why-items  { display:flex; flex-direction:column; gap:.9rem }
.why-item   { display:flex; gap:1.1rem; background:var(--card); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:1.35rem; transition:border-color .3s,box-shadow .3s; box-shadow:var(--shadow) }
.why-item:hover { border-color:var(--bd-2); box-shadow:var(--shadow-h) }
.why-num { font-family:var(--ff-mono); font-size:.67rem; color:var(--primary-lt); letter-spacing:.1em; padding-top:.08rem; flex-shrink:0 }
.why-item h4 { font-size:.87rem; letter-spacing:0; margin-bottom:.26rem }
.why-item p  { font-size:.81rem }

/* ══════════════════════════════════════════════════════════════════
   LEADERSHIP  →  LeadershipComponent
══════════════════════════════════════════════════════════════════ */
.leadership__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr)); gap:1.4rem }

/* Leader card — photo variant */
.leader-card {
  background:var(--bg-2); border:1px solid var(--bd); border-radius:var(--radius-lg);
  overflow:hidden; position:relative; transition:all .3s var(--ease); box-shadow:var(--shadow);
}
.leader-card:hover { border-color:var(--bd-2); transform:translateY(-4px); box-shadow:var(--shadow-h) }

/* Accent bar (top edge) */
.leader-card__accent { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--primary),transparent); z-index:1 }
.leader-card__accent--gold { background:linear-gradient(90deg,var(--gold),transparent) }

/* Photo placeholder — 3:2 aspect, B&W */
.leader-card__photo {
  width:100%; aspect-ratio:1/1;
  background:var(--bg-3);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.leader-card__photo img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(1) contrast(1.05);
  transition:filter .4s, transform .4s;
}
.leader-card:hover .leader-card__photo img { filter:grayscale(.6) contrast(1.08); transform:scale(1.04) }

/* Photo placeholder when no image supplied */
.leader-card__photo-placeholder {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(145deg,var(--bg-3),var(--bg-2));
}
.leader-card__photo-placeholder .initials {
  font-family:var(--ff-display); font-size:clamp(2rem,5vw,3rem);
  color:var(--primary-lt); opacity:.4; line-height:1;
}
.leader-card__photo-placeholder .upload-hint {
  font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-muted); opacity:.55;
}

/* Card body */
.leader-card__body { padding:1.4rem 1.6rem }
.leader-card h4 { font-size:.96rem; letter-spacing:0; margin-bottom:.22rem }
.leader-card__role { font-size:.76rem; color:var(--primary-lt); margin-bottom:.75rem; font-weight:500 }
.leader-card p  { font-size:.8rem; line-height:1.65 }

/* ══════════════════════════════════════════════════════════════════
   CAREERS  →  CareersComponent
══════════════════════════════════════════════════════════════════ */
.careers { background:linear-gradient(135deg,var(--bg-3),var(--bg-2)); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd) }
.careers__grid  { display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center }
.career-perks   { display:flex; flex-direction:column; gap:.85rem }
.career-perk    { display:flex; gap:.9rem; align-items:flex-start }
.career-perk__icon { font-size:1.1rem; flex-shrink:0; margin-top:.06rem }
.career-perk h4 { font-size:.87rem; letter-spacing:0; margin-bottom:.2rem }
.career-perk p  { font-size:.81rem }
.open-roles     { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:1.7rem }
.role-tag       { display:inline-flex; padding:.38rem .85rem; background:var(--primary-glow); border:1px solid var(--bd-2); border-radius:100px; font-size:.76rem; color:var(--primary-lt); transition:all .2s }
.role-tag:hover { background:rgba(30,95,168,.14); border-color:var(--primary-lt) }

/* ══════════════════════════════════════════════════════════════════
   CONTACT  →  ContactComponent
══════════════════════════════════════════════════════════════════ */
.contact__grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem }
.cinfo-row     { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.3rem }
.cinfo-icon    { width:36px; height:36px; flex-shrink:0; background:var(--primary-glow); border:1px solid var(--bd-2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:.9rem }
.cinfo-row strong { display:block; font-size:.76rem; font-weight:600; color:var(--tx-h); margin-bottom:.2rem; letter-spacing:.04em }
.cinfo-row span { font-size:.845rem }
.cform { display:flex; flex-direction:column; gap:.85rem }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem }
.fg { display:flex; flex-direction:column; gap:.32rem }
.fg label { font-size:.71rem; font-weight:500; color:var(--tx-muted); letter-spacing:.08em; text-transform:uppercase }
.fg input,.fg select,.fg textarea {
  background:var(--bg); border:1px solid var(--bd-2); border-radius:var(--radius);
  padding:.7rem .9rem; color:var(--tx-h); font-family:var(--ff-body); font-size:.875rem;
  outline:none; width:100%; transition:border-color .2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--primary) }
.fg input::placeholder,.fg textarea::placeholder { color:var(--tx-muted) }
.fg select option { background:var(--bg-2) }
.fg textarea { height:120px; resize:none }
.form-note { font-size:.71rem; color:var(--tx-muted) }

/* ══════════════════════════════════════════════════════════════════
   FOOTER  →  FooterComponent (always dark)
══════════════════════════════════════════════════════════════════ */
.footer { background:var(--bg-footer); border-top:1px solid rgba(255,255,255,.07); padding:clamp(2.5rem,5vw,4rem) 0 1.8rem }
.footer__top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.8rem; margin-bottom:2.5rem }
.footer__brand-name { font-family:var(--ff-display); font-size:1.4rem; color:#fff; margin-bottom:.65rem; letter-spacing:.05em }
.footer__brand-name span { color:#4A9EFF }
.footer__brand p { font-size:.82rem; color:rgba(255,255,255,.45); max-width:260px; line-height:1.7 }
.footer__badges { display:flex; flex-wrap:wrap; gap:.42rem; margin-top:1.3rem }
.fbadge { display:inline-flex; align-items:center; gap:.36rem; padding:.24rem .58rem; border-radius:100px; font-size:.66rem; color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1) }
.fbadge-dot { width:4px; height:4px; border-radius:50%; background:#0E9B8A }
.footer__col h5 { font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1.1rem }
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:.52rem }
.footer__col ul li a { font-size:.84rem; color:rgba(255,255,255,.45); transition:color .2s }
.footer__col ul li a:hover { color:#fff }
.footer__bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:1.7rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.9rem }
.footer__bottom p { font-size:.74rem; color:rgba(255,255,255,.3) }
.footer__legal { display:flex; gap:1.7rem }
.footer__legal a { font-size:.74rem; color:rgba(255,255,255,.3); transition:color .2s }
.footer__legal a:hover { color:rgba(255,255,255,.7) }

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP FAB
══════════════════════════════════════════════════════════════════ */
.wa-fab {
  position:fixed; bottom:2rem; right:2rem; z-index:1001;
  display:flex; align-items:center; gap:.55rem;
  background:#25D366; color:#fff;
  padding:.72rem 1.05rem .72rem .8rem; border-radius:100px;
  box-shadow:0 4px 18px rgba(37,211,102,.35);
  font-family:var(--ff-body); font-size:.8rem; font-weight:500;
  text-decoration:none; animation:wap 3.5s ease-in-out infinite;
}
.wa-fab:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 6px 26px rgba(37,211,102,.5); animation:none }
.wa-fab svg { width:19px; height:19px; flex-shrink:0 }
@keyframes wap { 0%,100%{box-shadow:0 4px 18px rgba(37,211,102,.35)} 50%{box-shadow:0 4px 28px rgba(37,211,102,.58),0 0 0 5px rgba(37,211,102,.07)} }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
══════════════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .cap-card--featured { grid-column:span 1 }
  .ai__layout { grid-template-columns:1fr }
  .ai__sticky  { position:static }
  .pf-feature  { grid-template-columns:1fr }
  .pf-feature:nth-child(even) .pf-feature__text,
  .pf-feature:nth-child(even) .pf-feature__visual { order:unset }
  .why__grid   { grid-template-columns:1fr }
  .careers__grid { grid-template-columns:1fr }
  .contact__grid { grid-template-columns:1fr }
  .footer__top   { grid-template-columns:1fr 1fr }
}

@media(max-width:820px) {
  /* Nav collapses to hamburger */
  .nav__links { display:none }
  .nav__hamburger { display:flex }
  .nav__links.is-open {
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--glass); backdrop-filter:blur(24px);
    padding:5rem 2rem 2rem; gap:1.4rem;
    align-items:center; justify-content:center; z-index:998;
  }
  .nav__links.is-open a { font-size:1.3rem }
  .nav__links.is-open .nav__lang { display:flex }
  .nav__links.is-open .theme-toggle { display:flex }
  /* tr grid */
  .tr__grid { grid-template-columns:1fr }
  .blog__grid { grid-template-columns:1fr }
  /* leadership: 2 cols on tablet */
  .leadership__grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)) }
}

@media(max-width:600px) {
  .form-row { grid-template-columns:1fr }
  .hero__stats { flex-direction:column; max-width:100% }
  .hero__stat  { border-right:none; border-bottom:1px solid var(--bd); padding:.9rem 1.2rem }
  .hero__stat:last-child { border-bottom:none }
  .sectors__grid { grid-template-columns:repeat(2,1fr) }
  .footer__top   { grid-template-columns:1fr }
  /* Leadership single column on small phones */
  .leadership__grid { grid-template-columns:repeat(2,1fr) }
  /* WhatsApp — icon only on small screens */
  .wa-fab__text { display:none }
  .wa-fab { padding:.78rem }
}

@media(max-width:380px) {
  .leadership__grid { grid-template-columns:1fr }
  .hero__eyebrow-text { font-size:.58rem; letter-spacing:.14em }
}

body.is-locked { overflow:hidden }

/* ── TOUCH IMPROVEMENTS ── */
@media(hover:none) {
  .leader-card:hover,
  .rec-card:hover,
  .blog-card:hover,
  .sector-card:hover,
  .why-item:hover { transform:none }
}
.ioux-text {
  font-size: 32px;
  font-weight: 800;
  color: var(--logo-color);
  text-transform: uppercase;
  font-family: Arial, sans-serif;

}
.ioux-text span{
  color: var(--logo-xcolor);
}