/* ============================================================
   KBS BRAND LAYER v2 — exact palette, live motion, richer surfaces
   Loaded last. Overrides styles.css / enhance.css / motifs.css
   ============================================================ */

:root{
  /* exact values sampled from the supplied logo files */
  --navy:#305173;
  --navy-deep:#1B3350;
  --navy-950:#0A1626;
  --navy-900:#10233C;
  --navy-800:#173252;
  --blue:#5794DD;
  --blue-lt:#8FBEF0;
  --violet:#8666D5;
  --magenta:#AB42CF;
  --teal:#14B8A6;
  --teal-deep:#199AB8;
  --teal-lt:#5FE3D2;
  --amber:#F0A93B;
  --coral:#EE5D8A;

  --grad:linear-gradient(90deg,#5794DD 0%,#8666D5 52%,#AB42CF 100%);
  --grad-d:linear-gradient(135deg,#5794DD 0%,#8666D5 50%,#AB42CF 100%);
  --grad-teal:linear-gradient(135deg,#199AB8 0%,#14B8A6 100%);
  --grad-warm:linear-gradient(135deg,#8666D5 0%,#AB42CF 55%,#EE5D8A 100%);
}

body{color:#16283F}
.section--dark{background:var(--navy-900)}
.hero,.phero{background:var(--navy-950)}

/* ---------- brand geometry: the KBS parallelogram ---------- */
.quad{position:absolute;pointer-events:none;border:1.5px solid rgba(255,255,255,.30);
  border-radius:14px 4px 14px 4px;transform:skewX(-11deg)}
.quad--fill{border:0;background:linear-gradient(140deg,rgba(171,66,207,.55),rgba(134,102,213,.28))}
@keyframes quadFloat{0%,100%{transform:skewX(-11deg) translateY(0)}50%{transform:skewX(-11deg) translateY(-16px)}}
.quad{animation:quadFloat 9s ease-in-out infinite}
.quad--b{animation-duration:12s;animation-delay:-3s}

/* circuit tracery, from the LAN cover artwork */
.circuit{position:absolute;pointer-events:none;opacity:.5}
@keyframes traceDash{to{stroke-dashoffset:-160}}
.circuit path{stroke-dasharray:5 9;animation:traceDash 9s linear infinite}
.circuit circle{fill:#8FBEF0}

/* triangle cluster accent */
.tri{position:absolute;pointer-events:none}
@keyframes triSpin{to{transform:rotate(360deg)}}
.tri svg{animation:triSpin 46s linear infinite}

/* ---------- logo sizing ---------- */
.hdr__logo{height:44px}
.ftr__logo{height:52px}
.hero__lock{height:58px;width:auto}
@media(max-width:640px){.hdr__logo{height:36px}}

/* ---------- partner plates: true colour, gentle lift ---------- */
.plate img{filter:none;opacity:1}
.plate{background:#fff;border-color:#E3EBF5}
.plate:hover{border-color:var(--blue);box-shadow:0 14px 34px rgba(87,148,221,.22)}
.marquee--tint .plate{background:#fff}

/* ---------- personnel login ---------- */
.nav__login{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);color:#fff;font-family:'Poppins';font-weight:600;font-size:.86rem;
  transition:background .25s,border-color .25s,transform .25s var(--ease)}
.nav__login svg{width:15px;height:15px}
.nav__login:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.hdr.is-stuck .nav__login{border-color:var(--line);color:var(--navy)}
.hdr.is-stuck .nav__login:hover{border-color:var(--blue);color:var(--blue);background:rgba(87,148,221,.08)}

/* ---------- live section motifs ---------- */
.livebox{position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(155deg,#10233C,#1B3350 60%,#2A2350);
  border:1px solid rgba(255,255,255,.12);aspect-ratio:4/3}
.livebox svg{position:absolute;inset:0;width:100%;height:100%}

/* rocket — digital transformation */
@keyframes rocketRise{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-14px) rotate(-3deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes exhaust{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1.25)}}
@keyframes starfall{to{transform:translate(-120px,90px)}}
.mo-rocket .ship{animation:rocketRise 4.2s ease-in-out infinite;transform-origin:center}
.mo-rocket .flame{animation:exhaust 1.05s ease-in-out infinite;transform-origin:50% 0%}
.mo-rocket .star{animation:starfall 6s linear infinite}
.mo-rocket .star:nth-child(2){animation-duration:8s;animation-delay:-2s}
.mo-rocket .star:nth-child(3){animation-duration:5s;animation-delay:-3.5s}
.mo-rocket .ring{transform-origin:center;animation:moSweep 14s linear infinite}

/* orbit — connectivity */
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.mo-orbit .ring1{transform-origin:center;animation:orbitSpin 16s linear infinite}
.mo-orbit .ring2{transform-origin:center;animation:orbitSpin 24s linear infinite reverse}
.mo-orbit .sat{transform-origin:center;animation:orbitSpin 10s linear infinite}

/* data stream — automation */
@keyframes streamMove{to{transform:translateX(-180px)}}
.mo-stream .row{animation:streamMove 7s linear infinite}
.mo-stream .row:nth-child(2){animation-duration:9s}
.mo-stream .row:nth-child(3){animation-duration:11s}

/* ---------- interactive tiles ---------- */
.itile{position:relative;display:block;border-radius:18px;overflow:hidden;padding:26px;
  background:#fff;border:1px solid var(--line);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.itile::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.itile:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(48,81,115,.16)}
.itile:hover::before{transform:scaleX(1)}
.itile__ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--grad-d);box-shadow:0 10px 24px rgba(134,102,213,.3);transition:transform .45s var(--ease)}
.itile__ico svg{width:26px;height:26px;color:#fff}
.itile:hover .itile__ico{transform:rotate(-8deg) scale(1.06)}
.itile h3{margin-bottom:10px}
.itile p{font-size:.93rem;color:var(--slate);line-height:1.6}

/* ---------- stat ribbon ---------- */
.ribbon{border-radius:22px;padding:34px clamp(22px,3vw,44px);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#10233C 0%,#305173 42%,#8666D5 78%,#AB42CF 100%)}
.ribbon__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.ribbon__v{font-family:'Poppins';font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.035em}
.ribbon__k{font-size:.86rem;color:rgba(233,240,252,.86);margin-top:10px;line-height:1.5}
@media(max-width:900px){.ribbon__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ribbon__grid{grid-template-columns:1fr}}

/* ---------- gradient headline accent ---------- */
.accent{color:var(--blue)}
.section--dark .accent{color:#8FBEF0}
.accent--warm{color:var(--magenta)}
.section--dark .accent--warm{color:#D98BF0}

/* ---------- richer buttons ---------- */
.btn--primary{background:var(--grad-d);box-shadow:0 12px 30px rgba(134,102,213,.34)}
.btn--primary:hover{box-shadow:0 18px 44px rgba(171,66,207,.42)}
.btn--teal{background:var(--grad-teal);color:#fff;box-shadow:0 12px 30px rgba(20,184,166,.3)}
.btn--teal:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(20,184,166,.4)}

/* ---------- section eyebrow variants ---------- */
.eyebrow--teal{color:var(--teal)}
.eyebrow--teal::before{background:var(--grad-teal)}

@media (prefers-reduced-motion:reduce){
  .quad,.circuit path,.tri svg,.mo-rocket .ship,.mo-rocket .flame,.mo-rocket .star,.mo-rocket .ring,
  .mo-orbit .ring1,.mo-orbit .ring2,.mo-orbit .sat,.mo-stream .row{animation:none !important}
}

/* ---- nav density at full width ---- */
.nav{gap:20px}
.hdr__in{gap:18px}
@media(max-width:1400px){ .nav{gap:15px} .nav a,.nav__trigger{font-size:.86rem} .nav__login{padding:8px 14px;font-size:.8rem} }
@media(max-width:1180px){ .nav__login span{display:none} .nav__login{padding:9px 12px} }
@media(max-width:1080px){ .nav{display:none} .burger{display:flex} }
.btn--sm{white-space:nowrap}