/* =========================================================
   TURVI CONSULTING & IT SERVICES — DESIGN SYSTEM
   Premium enterprise technology consulting & training platform
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Brand colors (from Turvi brand guide) */
  --navy-900: #0A3D91;
  --navy-950: #071F4D;
  --navy-800: #123F82;
  --blue-600: var(--navy-900);   /* legacy token, remapped to navy so all "interactive blue" reads as brand navy */
  --blue-500: #2D8CFF;
  --teal-500: var(--gold-500);   /* legacy token, remapped to gold so all "bright accent" reads as premium gold */
  --gold-500: #D4A537;
  --gold-600: #B8872B;
  --gold-logo: #E79C0E; /* exact gold sampled from the official Turvi logo files */
  --ink-900:  #111827;
  --ink-700:  #374151;
  --ink-500:  #6B7280;
  --line-200: #E5E9F0;
  --surface-0: #FFFFFF;
  --surface-50: #F7F8FA;
  --surface-100: #EEF2F9;

  --grad-brand: linear-gradient(135deg, #071F4D 0%, #0A3D91 55%, #123F82 100%);
  --grad-dark:  linear-gradient(180deg, #071F4D 0%, #0A3D91 100%);
  --grad-panel-soft: linear-gradient(160deg, #232B40 0%, #303F5C 100%);
  --grad-card-hover: linear-gradient(135deg, rgba(10,61,145,.06), rgba(212,165,55,.06));

  --shadow-sm: 0 1px 2px rgba(17,24,39,.06), 0 1px 1px rgba(17,24,39,.04);
  --shadow-md: 0 8px 24px rgba(10,61,145,.08), 0 2px 6px rgba(10,61,145,.06);
  --shadow-lg: 0 24px 60px rgba(7,31,77,.16);
  --shadow-glow: 0 0 0 1px rgba(10,61,145,.12), 0 20px 50px rgba(10,61,145,.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--surface-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; line-height:1.15; margin:0; color: var(--ink-900); }
p{ margin:0; }

:focus-visible{ outline: 3px solid var(--teal-500); outline-offset: 2px; border-radius: 4px; }

.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }

.section{ padding: clamp(56px, 8vw, 112px) 0; position: relative; }
.section--surface{ background: var(--surface-50); }
.section--white{ background: var(--surface-0); }
.section--dark{
  background: var(--grad-dark);
  color: #fff;
}
.section--dark h2, .section--dark h3, .section--dark p{ color:#fff; }
.section--dark .eyebrow{ color: var(--teal-500); }

/* Circuit-node pattern (signature motif, drawn from the Turvi mark) */
.circuit-bg{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.circuit-bg svg{ position:absolute; opacity:.14; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--blue-600);
  background: rgba(10,61,145,.08);
  border: 1px solid rgba(10,61,145,.18);
  padding: 6px 16px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--teal-500); }

.section-head{ max-width: 720px; margin-bottom: 48px; }
.trust-bar{ padding-block: 30px !important; border-bottom:1px solid var(--line-200); }
.trust-bar-label{ text-align:center; font-size:12.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500); margin-bottom:18px; }
.trust-bar-row{ display:flex; justify-content:center; align-items:center; gap:36px; flex-wrap:wrap; }
.trust-bar-row span{ font-weight:700; font-size:14.5px; color: var(--ink-700); letter-spacing:.01em; opacity:.82; }
.pillar-card{ display:flex; flex-direction:column; text-decoration:none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.pillar-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pillar-card h3{ margin-top:6px; }
.pillar-card p{ flex:1; }
.pillar-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:14px; color: var(--navy-900); }
.pillar-link svg{ width:16px; height:16px; }
.founders-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; margin-top:36px; }
.founders-strip .card{ text-align:center; }
.founders-strip .founder-avatar{ width:64px; height:64px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; background:var(--navy-900); color:#fff; font-weight:700; font-size:18px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.6vw, 42px); letter-spacing:-.01em; }
.section-head p{ margin-top:14px; color: var(--ink-500); font-size:17px; }
.section--dark .section-head p{ color: rgba(255,255,255,.75); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 28px; border-radius: var(--radius-pill);
  font-weight:600; font-size:15px; border:1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background: var(--grad-brand); color:#fff; box-shadow: var(--shadow-md); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-outline{ background:transparent; border-color: var(--line-200); color: var(--ink-900); }
.btn-outline:hover{ border-color: var(--blue-600); color: var(--blue-600); }
.btn-ghost-light{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color:#fff; }
.btn-ghost-light:hover{ background: rgba(255,255,255,.18); }
.btn-white{ background:#fff; color: var(--navy-900); }
.btn-white:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-sm{ padding:10px 20px; font-size:14px; }
.btn svg{ width:16px; height:16px; transition: transform .25s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

/* ---------- Top utility bar ---------- */
.topbar{
  background: var(--navy-950); color: rgba(255,255,255,.85); font-size:13.5px;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-block:9px; gap:16px; }
.topbar-left{ display:flex; gap:22px; }
.topbar-left a, .topbar-right a{ color:inherit; display:inline-flex; align-items:center; gap:6px; }
.topbar-left a:hover, .topbar-right a:hover{ color: var(--teal-500); }
.topbar-right{ display:flex; gap:20px; }
.topbar svg{ width:14px; height:14px; flex-shrink:0; }
.topbar-left a{ white-space:nowrap; }
@media (max-width: 780px){ .topbar-left span.sep, .topbar-right{ display:none; } }
@media (max-width: 480px){
  .topbar .container{ padding-block:8px; }
  .topbar-left{ gap:14px; font-size:12px; overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
  .topbar-left::-webkit-scrollbar{ display:none; }
  .topbar-left span:not(.sep){ display:none; }
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-200);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-block:12px; gap:24px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ height:48px; width:auto; }
.brand-text{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.15; }
.brand-text strong{ font-size:19px; font-weight:800; color: var(--gold-logo); letter-spacing:.01em; }
.brand-text span{ font-size:9.5px; font-weight:700; letter-spacing:.05em; color: var(--ink-500); text-transform:uppercase; max-width:150px; }

.nav-main{ display:flex; align-items:center; gap:2px; }
.nav-main > li{ position:relative; }
.nav-main > li > a{
  display:flex; align-items:center; gap:5px; padding:10px 16px; border-radius:8px;
  font-weight:500; font-size:15px; color: var(--ink-700);
  transition: color .2s, background .2s;
}
.nav-main > li > a:hover, .nav-main > li.active > a{ color: var(--blue-600); background: rgba(10,61,145,.06); }
.nav-main svg.chev{ width:12px; height:12px; transition: transform .2s; }
.nav-main li:hover svg.chev{ transform: rotate(180deg); }

.mega{
  position:absolute; top: calc(100% + 10px); left:50%; transform: translateX(-50%);
  width: min(720px, 84vw); background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); border:1px solid var(--line-200);
  padding: 24px; display:grid; grid-template-columns: repeat(2,1fr); gap:6px 24px;
  opacity:0; visibility:hidden; translate: 0 6px;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility .2s;
}
.nav-main li:hover .mega, .nav-main li:focus-within .mega{ opacity:1; visibility:visible; translate:0 0; }
.mega a{ display:flex; gap:12px; padding:10px; border-radius:10px; }
.mega a:hover{ background: var(--surface-50); }
.mega-icon{ width:38px; height:38px; border-radius:10px; background: var(--surface-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--blue-600); }
.mega-icon svg{ width:18px; height:18px; }
.mega strong{ display:block; font-size:14.5px; color: var(--ink-900); }
.mega small{ color: var(--ink-500); font-size:12.5px; }

.header-cta{ display:flex; align-items:center; gap:10px; }
.header-cta .btn-outline{ padding:10px 18px; background: var(--grad-brand); color:#fff; border-color:transparent; box-shadow: var(--shadow-md); }
.header-cta .btn-outline:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); color:#fff; }
.header-cta .btn-primary{ padding:11px 22px; }

.menu-toggle{ display:none; background:none; border:none; padding:8px; }
.menu-toggle svg{ width:26px; height:26px; color: var(--navy-900); }

@media (max-width: 1080px){
  .nav-main, .header-cta .btn-outline{ display:none; }
  .menu-toggle{ display:block; }
}

/* Mobile drawer */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(340px,86vw); background:#fff; z-index:200;
  transform: translateX(100%); transition: transform .3s var(--ease);
  box-shadow: var(--shadow-lg); overflow-y:auto; padding:20px;
}
.mobile-drawer.open{ transform: translateX(0); }
.drawer-scrim{ position:fixed; inset:0; background: rgba(7,31,77,.4); z-index:190; opacity:0; visibility:hidden; transition:.3s; }
.drawer-scrim.open{ opacity:1; visibility:visible; }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.mobile-drawer nav a{ display:block; padding:13px 6px; border-bottom:1px solid var(--line-200); font-weight:500; }
.mobile-drawer .btn{ width:100%; margin-top:16px; }

/* ---------- Hero carousel ---------- */
.hero{ position:relative; overflow:hidden; min-height: min(88vh, 720px); display:flex; align-items:center; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; transition: opacity 1s var(--ease);
  background-size:cover; background-position:center;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(7,31,77,.92) 0%, rgba(7,31,77,.78) 38%, rgba(10,61,145,.45) 68%, rgba(10,61,145,.25) 100%);
}
.hero-content{ position:relative; z-index:2; color:#fff; max-width:660px; padding-block: 80px; }
.hero-content .eyebrow{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color:#fff; }
.hero-content .eyebrow::before{ background: var(--teal-500); }
.hero-content h1, .hero-content h2{ font-size: clamp(34px, 5vw, 56px); color:#fff; letter-spacing:-.01em; }
.hero-content h1 span, .hero-content h2 span{ background: linear-gradient(90deg,#D4A537,#F0CE73); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-content p{ margin-top:18px; font-size:18px; color: rgba(255,255,255,.82); max-width:560px; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:48px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-size:26px; font-family:var(--font-display); color:#fff; }
.hero-stats div span{ font-size:13px; color:rgba(255,255,255,.65); }

.hero-nav{ position:absolute; z-index:3; bottom:32px; left:0; right:0; }
.hero-nav .container{ display:flex; align-items:center; justify-content:space-between; }
.hero-dots{ display:flex; gap:9px; }
.hero-dots button{ width:34px; height:4px; border-radius:2px; background: rgba(255,255,255,.3); border:none; padding:0; transition:.3s; }
.hero-dots button.is-active{ background: var(--teal-500); width:46px; }
.hero-arrows{ display:flex; gap:10px; }
.hero-arrows button{ width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; }
.hero-arrows button:hover{ background: rgba(255,255,255,.25); }
.hero-arrows svg{ width:18px; height:18px; }
@media (max-width:640px){ .hero-arrows{ display:none; } }

/* ---------- Cards (generic premium card language) ---------- */
.grid{ display:grid; gap:24px; }
.grid[hidden]{ display:none; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-5{ grid-template-columns: repeat(5,1fr); }
.grid-6{ grid-template-columns: repeat(6,1fr); }
@media (max-width:1080px){ .grid-4,.grid-5,.grid-6{ grid-template-columns: repeat(3,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .grid-2,.grid-3,.grid-4,.grid-5,.grid-6{ grid-template-columns: repeat(1,1fr);} }
@media (max-width:900px) and (min-width:721px){ .grid-4,.grid-5,.grid-6{ grid-template-columns: repeat(2,1fr);} }

.card{
  background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-md);
  padding: 32px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--navy-900), var(--gold-500));
  transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(10,61,145,.18); }
.card:hover::before{ transform: scaleX(1); }
.card .thumb-strip{
  height:96px; margin:-32px -32px 22px -32px; position:relative;
  background:url('../images/services/blog-circuit-pattern.svg') center/cover no-repeat, var(--grad-dark);
  display:flex; align-items:flex-end; padding:14px 18px;
}
.card .thumb-strip .thumb-icon{
  width:38px; height:38px; border-radius:10px; background:rgba(212,165,55,.16); border:1px solid rgba(212,165,55,.4);
  display:flex; align-items:center; justify-content:center; color:#D4A537;
}
.card-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(10,61,145,.12), rgba(212,165,55,.12)); color: var(--blue-600);
  margin-bottom:20px;
}
.card-icon svg{ width:26px; height:26px; }
.card h3{ font-size:19px; margin-bottom:10px; }
.card p{ color: var(--ink-500); font-size:15px; }

.tag{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:500; padding:5px 12px;
  border-radius: var(--radius-pill); background: var(--surface-100); color: var(--blue-600);
}

/* ---------- Why choose ---------- */
.why-grid{ grid-template-columns: repeat(4,1fr); }
@media (max-width:980px){ .why-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .why-grid{ grid-template-columns: 1fr;} }

/* ---------- Stats band ---------- */
.stats-band{ position:relative; overflow:hidden; }
.stats-grid{ grid-template-columns: repeat(4,1fr); position:relative; z-index:1; text-align:center; }
@media (max-width:760px){ .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap:36px; } }
.stat-num{ font-size: clamp(34px,4.4vw,48px); font-weight:800; font-family:var(--font-display); color:#fff; }
.stat-num span{ color: var(--teal-500); }
.stat-label{ margin-top:8px; color: rgba(255,255,255,.72); font-size:14.5px; letter-spacing:.02em; }

/* ---------- Category pills / tabs ---------- */
.pill-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.pill-tab{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius: var(--radius-pill);
  border:1px solid var(--line-200); background:#fff; font-weight:500; font-size:14.5px; color: var(--ink-700);
  transition:.2s;
}
.pill-tab svg{ width:16px; height:16px; }
.pill-tab:hover{ border-color: var(--blue-600); color: var(--blue-600); }
.pill-tab.is-active{ background: var(--grad-brand); color:#fff; border-color:transparent; box-shadow: var(--shadow-sm); }

.tech-card{ text-align:left; }
.tech-card-top{ display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px; margin-bottom:16px; }
.tech-logo{ width:30px; height:30px; border-radius:8px; background: var(--surface-50); border:1px solid var(--line-200); display:flex; align-items:center; justify-content:center; padding:5px; flex-shrink:0; }
.tech-logo img{ width:100%; height:100%; object-fit:contain; }
.tech-card-top strong{ font-size:17px; }
.tech-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
.tech-meta{ display:flex; justify-content:space-between; font-size:13px; color: var(--ink-500); border-top:1px solid var(--line-200); padding-top:14px; margin-top:4px; }
.tech-meta a{ display:inline-flex; align-items:center; gap:6px; color: var(--ink-500); text-decoration:none; transition: color .2s; }
.tech-meta a:hover{ color: var(--blue-600); text-decoration:underline; }
.tech-meta span{ display:inline-flex; align-items:center; gap:6px; }
.tech-meta img{ width:15px; height:15px; object-fit:contain; flex-shrink:0; }

/* ---------- Role / industry tiles (icon-led, no stock photography) ---------- */
.tile-card{
  border-radius: var(--radius-md); overflow:hidden; background:#fff;
  border:1px solid var(--line-200); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tile-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(10,61,145,.25); }
.tile-banner{
  position:relative; height:132px; display:flex; align-items:center; justify-content:center;
  background: var(--grad-brand); overflow:hidden;
}
.tile-banner svg.tile-icon{ width:42px; height:42px; color:#fff; position:relative; z-index:1; }
.tile-banner .circuit-bg svg{ opacity:.35; }
.tile-card-body{ padding:20px 22px 24px; }
.tile-card-body strong{ font-size:16.5px; display:block; color: var(--ink-900); }
.tile-card-body span{ font-size:13px; color: var(--ink-500); display:block; margin-top:6px; }
.role-grid{ grid-template-columns: repeat(4,1fr); }
@media (max-width:980px){ .role-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .role-grid{ grid-template-columns: repeat(2,1fr); gap:14px;} }

.industry-grid{ grid-template-columns: repeat(5,1fr); }
@media (max-width:1080px){ .industry-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:560px){ .industry-grid{ grid-template-columns: repeat(2,1fr);} }

/* ---------- Split feature sections (corporate / individual training) ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
.split.reverse .split-media{ order:2; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px;} .split.reverse .split-media{ order:0; } }
.split-media{ position:relative; }
.split-illustration{
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width:100%; aspect-ratio: 6/5;
  background: var(--grad-dark); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.split-illustration svg.illus-icon{ width:96px; height:96px; color:#fff; opacity:.92; position:relative; z-index:1; }
.split-illustration img.dashboard-visual{ width:100%; height:100%; object-fit:cover; position:relative; z-index:1; }
.logo-badge-circle{
  width:140px; height:140px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); position:relative; z-index:1;
}
.logo-badge-circle img, .logo-badge-circle svg{ width:72px; height:72px; object-fit:contain; }
.split-badge{
  position:absolute; bottom:-22px; left:-22px; background:#fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding:18px 22px; display:flex; align-items:center; gap:12px;
}
@media (max-width:560px){ .split-badge{ left:12px; bottom:-16px; padding:12px 16px;} }
.split-badge .card-icon{ margin:0; width:44px; height:44px; }
.split-badge strong{ font-size:20px; display:block; }
.split-badge span{ font-size:12.5px; color: var(--ink-500); }

.feature-list{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.feature-list li{ display:flex; gap:14px; align-items:flex-start; }
.feature-list .tick{ width:24px; height:24px; border-radius:50%; background: rgba(212,165,55,.14); color: var(--teal-500); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.feature-list .tick svg{ width:14px; height:14px; }
.feature-list strong{ display:block; font-size:15.5px; }
.feature-list span{ color: var(--ink-500); font-size:14.5px; }

/* ---------- Internship / training-mode / process cards ---------- */
.process-grid{ grid-template-columns: repeat(4,1fr); position:relative; }
@media (max-width:980px){ .process-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .process-grid{ grid-template-columns: 1fr;} }
.process-card{ text-align:center; }
.process-num{ font-family:var(--font-display); font-weight:800; font-size:14px; color: var(--blue-600); background: var(--surface-100); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }

.mode-card{ text-align:center; }
.mode-card .card-icon{ margin-inline:auto; }

/* ---------- Certifications ---------- */
.cert-strip{ display:flex; align-items:center; gap:44px; flex-wrap:wrap; justify-content:center; }
.cert-logo{ height:34px; opacity:.85; filter:grayscale(1) brightness(2); }
.cert-logo:hover{ opacity:1; }

/* Certification mention — deliberately low-weight, single line, per brand audit */
.cert-mention{ padding-top:22px; padding-bottom:22px; }
.cert-mention-line{ text-align:center; font-size:14px; color: var(--ink-500); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px; margin:0; }
.cert-mention-marks{ display:inline-flex; align-items:center; gap:12px; margin-left:6px; }
.cert-mention-marks img{ height:18px; width:auto; opacity:.7; filter:grayscale(1); }
.cert-mention-disclaimer{ text-align:center; font-size:11.5px; color: var(--ink-400,#9aa3b2); margin:8px 0 0; }

/* ---------- Testimonials ---------- */
.testi-track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.testi-track::-webkit-scrollbar{ display:none; }
.testi-card{ scroll-snap-align:start; flex: 0 0 min(420px,86vw); background:#fff; border:1px solid var(--line-200); border-radius: var(--radius-md); padding:32px; }
.testi-stars{ display:flex; gap:3px; color: var(--gold-500); margin-bottom:16px; }
.testi-stars svg{ width:16px; height:16px; }
.testi-card p.quote{ font-size:15.5px; color: var(--ink-700); }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.testi-avatar{ width:46px; height:46px; border-radius:50%; background: var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
.testi-person strong{ font-size:14.5px; display:block; }
.testi-person span{ font-size:12.5px; color: var(--ink-500); }
.testi-controls{ display:flex; gap:10px; justify-content:center; margin-top:28px; }
.testi-controls button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line-200); background:#fff; display:flex; align-items:center; justify-content:center; }
.testi-controls svg{ width:16px; height:16px; }
.testi-controls button:hover{ border-color: var(--blue-600); color: var(--blue-600); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ border:1px solid var(--line-200); border-radius: var(--radius-md); background:#fff; overflow:hidden; }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px; background:none; border:none; text-align:left; font-family:var(--font-display); font-weight:600; font-size:16px; color: var(--ink-900); }
.faq-q svg{ width:20px; height:20px; flex-shrink:0; transition: transform .3s var(--ease); color: var(--blue-600); }
.faq-item.is-open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a-inner{ padding: 0 24px 22px; color: var(--ink-500); font-size:15px; }

/* ---------- Contact CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; }
.cta-band h2{ font-size: clamp(28px,4vw,42px); color:#fff; }
.cta-band p{ color: rgba(255,255,255,.8); max-width:560px; margin: 16px auto 0; }
.cta-actions{ display:flex; gap:16px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-950); color: rgba(255,255,255,.68); padding-top:72px; font-size:14.5px; }
.footer-top{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:980px){ .footer-top{ grid-template-columns: repeat(2,1fr); gap:40px 32px;} }
@media (max-width:560px){ .footer-top{ grid-template-columns: 1fr; gap:36px;} }

/* Premium footer brand lockup */
.footer-logo{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; margin-bottom:22px; }
.footer-logo-mark{
  flex:0 0 auto; width:132px; height:132px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:20px; padding:14px;
  box-shadow: var(--shadow-md);
}
.footer-logo-mark img{ width:100%; height:100%; object-fit:contain; }
.footer-logo-text{ display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1.28; }
.footer-brand-name{
  font-family:var(--font-display); font-weight:800; font-size:26px;
  color:var(--gold-logo); letter-spacing:.005em;
}
.footer-brand-suffix{
  display:block;
  font-family:var(--font-display); font-weight:600; font-size:13px;
  color:var(--gold-logo); opacity:.82; letter-spacing:.06em; text-transform:uppercase; margin-top:4px;
}
.footer-brand-suffix--sub{ margin-top:1px; font-size:11.5px; opacity:.68; }
@media (max-width:560px){
  .footer-logo-mark{ width:96px; height:96px; border-radius:16px; padding:10px; }
  .footer-brand-name{ font-size:21px; }
}
.footer-brand p{ color: rgba(255,255,255,.6); font-size:14px; max-width:290px; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:.2s; }
.footer-social a:hover{ background: var(--teal-500); color: var(--navy-950); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ color:#fff; font-size:14.5px; margin-bottom:18px; letter-spacing:.03em; text-transform:uppercase; }
.footer-col li{ margin-bottom:11px; }
.footer-col a:hover{ color: var(--teal-500); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; }
.footer-contact svg{ width:16px; height:16px; margin-top:3px; color: var(--teal-500); flex-shrink:0; }
.newsletter-form{ display:flex; margin-top:14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08); padding:5px; }
.newsletter-form input{ flex:1; background:none; border:none; padding:10px 14px; color:#fff; font-size:14px; }
.newsletter-form input::placeholder{ color: rgba(255,255,255,.5); }
.newsletter-form button{ background: var(--teal-500); color: var(--navy-950); border:none; border-radius: var(--radius-pill); width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.newsletter-form svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:12px; font-size:13px; }
.footer-bottom a:hover{ color: var(--teal-500); }
.footer-legal{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- Utility ---------- */
.reveal{ opacity:0; translate:0 24px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.reveal.is-visible{ opacity:1; translate:0 0; }
.text-center{ text-align:center; }
.mt-8{ margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip link */
.skip-link{ position:absolute; left:-999px; top:0; background:#fff; color:var(--navy-900); padding:12px 20px; z-index:1000; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* ---------- 404 error page ---------- */
.error-page{ min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--grad-dark); color:#fff; position:relative; overflow:hidden; padding:80px 24px; }
.error-page .content{ position:relative; z-index:2; max-width:520px; }
.error-page .code{ font-family:var(--font-display); font-size:clamp(64px,10vw,110px); font-weight:800; color:var(--teal-500); line-height:1; margin-bottom:10px; }
.error-page h1{ color:#fff; }
.error-page p{ color:rgba(255,255,255,.8); }

/* ==========================================================================
   MIGRATED INNER-PAGE PATTERNS
   (About / Contact / Services / IT Training / Industries / Technologies —
   ported from the old design system onto the current tokens & reveal system)
   ========================================================================== */
:root{
  --grad-mesh: radial-gradient(60% 60% at 15% 20%, rgba(212,165,55,.30) 0%, rgba(212,165,55,0) 60%),
               radial-gradient(50% 50% at 85% 15%, rgba(10,61,145,.45) 0%, rgba(10,61,145,0) 60%),
               radial-gradient(70% 70% at 50% 100%, rgba(7,31,77,.9) 0%, rgba(7,31,77,0) 70%);
}

.page-header{ position:relative; padding:96px 0; color:#fff; overflow:hidden; background:var(--grad-dark); }
.page-header::before{ content:""; position:absolute; inset:0; background:var(--grad-mesh); }
.page-header .container{ position:relative; z-index:2; max-width:1160px; }
.page-header .container:not(.page-header-grid){ max-width:760px; }
.page-header-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.page-header-text{ text-align:left; max-width:640px; }
.page-header-text p{ max-width:none; }
.page-header-visual{ position:relative; display:flex; align-items:center; justify-content:center; height:320px; border-radius:24px; background:var(--grad-panel-soft); overflow:hidden; }
.page-header-visual::before{
  content:""; position:absolute; width:65%; height:65%; left:50%; top:52%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(120,180,255,.22) 0%, rgba(120,180,255,0) 72%);
  filter:blur(6px);
}
.page-header-visual img{ position:relative; max-height:88%; width:auto; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
@media (max-width:900px){
  .page-header-grid{ grid-template-columns:1fr; }
  .page-header-visual{ height:220px; order:-1; }
  .page-header-visual img{ max-height:88%; }
}
.page-header .eyebrow{ color:var(--teal-500); }
.page-header h1{ color:#fff; font-size:clamp(30px,4.4vw,50px); }
.page-header p{ color:rgba(255,255,255,.8); font-size:17px; max-width:600px; }
.breadcrumb{ font-family:var(--font-display); font-size:12px; color:rgba(255,255,255,.6); margin-bottom:18px; letter-spacing:.05em; }
.breadcrumb a:hover{ color:#fff; }
.grid-overlay{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size:34px 34px; }

.section--tight{ padding:72px 0; }
.section--tint{ background:var(--surface-50); }

.btn-dark{ background:var(--navy-900); color:#fff; }
.btn-dark:hover{ background:var(--navy-950); box-shadow:0 16px 34px -10px rgba(7,31,77,.45); }
.btn-cyan{ background:var(--gold-500); color:var(--navy-950); }
.btn-cyan:hover{ background:var(--gold-600); }

.reveal-delay-1.is-visible{ transition-delay:.1s; }
.reveal-delay-2.is-visible{ transition-delay:.2s; }
.reveal-delay-3.is-visible{ transition-delay:.3s; }

.two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.mesh-panel{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px; background:var(--grad-panel-soft); display:flex; align-items:center; justify-content:center; }
.mesh-panel::after{
  content:""; position:absolute; width:60%; height:60%; left:50%; top:52%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(120,180,255,.20) 0%, rgba(120,180,255,0) 72%);
  filter:blur(6px);
}
.mesh-panel img{ position:relative; z-index:1; max-height:90%; max-width:84%; object-fit:contain; filter:drop-shadow(0 16px 26px rgba(0,0,0,.35)); }

.chip-group{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.chip{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--line-200); font-size:13.5px; font-weight:700; color:var(--ink-500); cursor:pointer; transition:all .2s ease; background:#fff; }
.chip.is-active, .chip:hover{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }

.icon{ width:52px; height:52px; border-radius:14px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:22px; }
.icon svg{ width:24px; height:24px; }

.stat-strip{ background:var(--navy-900); padding:56px 0; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-grid .num{ font-family:var(--font-display); font-size:clamp(26px,3vw,38px); color:var(--gold-500); font-weight:700; }
.stat-grid .label{ color:rgba(255,255,255,.65); font-size:13px; margin-top:6px; letter-spacing:.02em; }

/* Light variant — used whenever a stat band would otherwise sit directly
   beneath a navy page-header, so two dark sections never stack back-to-back */
.stat-strip--light{ background:var(--surface-50); border-top:1px solid var(--line-200); border-bottom:1px solid var(--line-200); }
.stat-strip--light .stat-grid .num{ color:var(--navy-900); position:relative; display:inline-block; padding-bottom:10px; }
.stat-strip--light .stat-grid .num::after{ content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:28px; height:3px; border-radius:2px; background:var(--gold-500); }
.stat-strip--light .stat-grid .label{ color:var(--ink-500); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; } }

.timeline{ position:relative; padding-top:20px; }
.timeline-track{ position:absolute; left:50%; top:0; bottom:0; width:3px; transform:translateX(-50%); background:var(--line-200); border-radius:3px; }
.timeline-progress{ position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg, var(--teal-500), var(--blue-600)); border-radius:3px; transition:height .1s linear; }
.timeline-item{ position:relative; width:50%; padding:0 56px 96px; opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease; }
.timeline-item.is-visible{ opacity:1; transform:translateY(0); }
.timeline-item:nth-child(odd){ left:0; text-align:right; }
.timeline-item:nth-child(even){ left:50%; text-align:left; }
.timeline-node{ position:absolute; top:6px; width:18px; height:18px; border-radius:50%; background:var(--navy-900); border:3px solid var(--teal-500); box-shadow:0 0 0 6px #fff; }
.timeline-item:nth-child(odd) .timeline-node{ right:-9px; }
.timeline-item:nth-child(even) .timeline-node{ left:-9px; }
.timeline-item.is-visible .timeline-node{ animation:pulseNode 1.8s ease .3s 1; }
@keyframes pulseNode{ 0%{ box-shadow:0 0 0 6px #fff, 0 0 0 6px rgba(212,165,55,.5);} 70%{ box-shadow:0 0 0 6px #fff, 0 0 0 22px rgba(212,165,55,0);} 100%{ box-shadow:0 0 0 6px #fff, 0 0 0 22px rgba(212,165,55,0);} }
.timeline-year{ font-family:var(--font-display); color:var(--teal-500); font-weight:700; font-size:14px; letter-spacing:.08em; display:block; margin-bottom:10px; }
.timeline-card{ display:inline-block; text-align:left; background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-md); padding:26px 28px; box-shadow:var(--shadow-sm); max-width:420px; transition:transform .3s ease, box-shadow .3s ease; }
.timeline-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.timeline-card h3{ font-size:19px; margin-bottom:8px; }
.timeline-card p{ font-size:14.5px; margin:0; }
.timeline-card .thumb{ width:100%; height:150px; border-radius:12px; margin-bottom:16px; background:var(--grad-dark) center/cover no-repeat; position:relative; overflow:hidden; }
.timeline-card .thumb--global{ background-image:url('../images/services/about-global-network.svg'); background-size:cover; background-position:center; }
.timeline-card .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,31,77,0) 60%, rgba(7,31,77,.35) 100%); }
@media (max-width:820px){
  .timeline-track{ left:20px; }
  .timeline-item, .timeline-item:nth-child(odd), .timeline-item:nth-child(even){ width:100%; left:0 !important; text-align:left !important; padding:0 0 64px 56px; }
  .timeline-item:nth-child(odd) .timeline-node, .timeline-item:nth-child(even) .timeline-node{ left:11px; right:auto; }
  .timeline-card{ max-width:100%; }
}

.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--navy-900); margin-bottom:8px; }
.field input, .field select, .field textarea{ width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line-200); font-family:var(--font-body); font-size:15px; color:var(--ink-900); background:#fff; transition:border-color .2s ease, box-shadow .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(212,165,55,.15); }
.field textarea{ resize:vertical; min-height:130px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(212,165,55,.12); color:var(--blue-600); font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; margin-bottom:14px; }

.course-card{ background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-md); padding:0; height:100%; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; }
.course-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--navy-900), var(--gold-500)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); z-index:3; }
.course-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(10,61,145,.18); }
.course-card:hover::before{ transform:scaleX(1); }
.course-card .course-thumb{ height:120px; background:var(--grad-dark); position:relative; }
.course-card .course-thumb::after{ content:""; position:absolute; inset:0; background:var(--grad-mesh); }
.course-card .course-badge{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.92); color:var(--navy-900); font-size:11px; font-weight:800; padding:5px 12px; border-radius:999px; z-index:2; }
.course-card .course-body{ padding:26px 28px 28px; }
.course-card .course-meta{ display:flex; gap:14px; font-size:12.5px; color:var(--ink-500); margin-bottom:14px; font-family:var(--font-display); }
.course-card .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }

.industry-card{ background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-md); padding:30px; height:100%; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; overflow:hidden; }
.industry-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--navy-900), var(--gold-500)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.industry-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(10,61,145,.18); }
.industry-card:hover::before{ transform:scaleX(1); }
.industry-card .industry-icon{ width:50px; height:50px; border-radius:14px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px; }
.industry-card h3{ font-size:18px; margin-bottom:8px; }
.industry-card .industry-body{ font-size:14.5px; color:var(--ink-500); }
.industry-card .industry-body strong{ color:var(--navy-900); }
.industry-card .tech-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-weight:700; font-size:13.5px; color:var(--blue-600); }

.tech-card .tech-icon{ width:52px; height:52px; border-radius:14px; background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:20px; }
.tech-card .tech-cta{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-weight:700; font-size:14px; color:var(--blue-600); }
.tech-card .tech-cta svg{ transition:transform .25s ease; }
.tech-card:hover .tech-cta svg{ transform:translateX(4px); }

/* ================= FLOATING ACTION BUTTON (WhatsApp) ================= */
.fab{
  position: fixed; left: 22px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 10px 28px rgba(10,20,50,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fab:hover{ transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px rgba(10,20,50,.36); }
.fab.whatsapp{ bottom: 22px; background: #25D366; animation: fab-bounce 2.6s ease-in-out 3; }
.fab.whatsapp:hover{ animation-play-state: paused; }
.fab.whatsapp::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.55);
  animation: fab-pulse 2.6s 3;
}
@keyframes fab-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes fab-bounce{
  0%, 100%{ transform: translateY(0); }
  15%{ transform: translateY(-9px); }
  30%{ transform: translateY(0); }
  40%{ transform: translateY(-4px); }
  50%{ transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .fab.whatsapp{ animation: none; }
  .fab.whatsapp::before{ animation: none; }
}
@media (max-width:560px){
  .fab{ width:50px; height:50px; left:16px; }
  .fab.whatsapp{ bottom:16px; }
}

/* Attention animation for the header "Talk to Expert" CTA */
.btn-attract{ animation: btn-attract-bounce 3.2s ease-in-out infinite; position:relative; }
.btn-attract::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 0 0 0 rgba(0,86,210,.45);
  animation: btn-attract-ring 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes btn-attract-bounce{
  0%, 100%{ transform: translateY(0); }
  10%{ transform: translateY(-4px); }
  20%{ transform: translateY(0); }
}
@keyframes btn-attract-ring{
  0%, 20%{ box-shadow: 0 0 0 0 rgba(0,86,210,.45); }
  35%{ box-shadow: 0 0 0 8px rgba(0,86,210,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,86,210,0); }
}
@media (prefers-reduced-motion: reduce){
  .btn-attract, .btn-attract::after{ animation: none; }
}

/* ================= TURVI TECH ASSISTANT WIDGET ================= */
.tcits-bot-bubble, .tcits-bot-panel, .tcits-bot-tooltip{
  --tvi-primary: #0056D2;
  --tvi-secondary: #0A1F44;
  --tvi-accent: #00C853;
  --tvi-grad: linear-gradient(135deg, #0A1F44 0%, #0056D2 100%);
  font-family: 'Poppins', var(--font-body, sans-serif);
}
/* Keyboard focus visibility across all interactive widget elements */
.tcits-bot-bubble:focus-visible, .tcits-qa-chip:focus-visible, .tcits-chip:focus-visible,
.tcits-bot-min:focus-visible, .tcits-bot-close:focus-visible, .tcits-bot-mic:focus-visible, .tcits-bot-send:focus-visible{
  outline: 2.5px solid var(--tvi-accent, #00C853); outline-offset: 2px;
}
/* =======================================================================
   TCITS Chat Widget — Responsive Sizing Tiers
   Desktop (>1200px) -> base rules below
   Small Desktop / Laptop (993px–1200px)
   Tablet (769px–992px)
   Mobile (≤768px) — minimum 80px bottom offset, never overlaps hero nav
   ======================================================================= */
.tcits-bot-bubble{
  position: fixed; right: 22px; bottom: 24px; z-index: 999;
  width: 66px; height: 66px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer; padding: 0;
  box-shadow: 0 10px 30px rgba(10,31,68,.32);
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
  display:flex; align-items:center; justify-content:center;
  max-width: calc(100vw - 32px); /* never exceed screen width on any device */
}
.tcits-bot-bubble:hover{ transform: translateY(-4px) scale(1.06); box-shadow: 0 18px 40px rgba(10,31,68,.4); }
.tcits-bot-bubble video, .tcits-bot-bubble img{ width:100%; height:100%; object-fit:cover; transform: scale(1.6) translateY(6%); }
.tcits-bot-bubble .tcits-bubble-ping{
  position:absolute; top:-1px; right:-1px; width:16px; height:16px; border-radius:50%;
  background: var(--tvi-accent); border:2.5px solid #fff; box-shadow: 0 0 0 0 rgba(0,200,83,.5);
  animation: tvi-ping 2.2s 4;
}
@keyframes tvi-ping{
  0%{ box-shadow: 0 0 0 0 rgba(0,200,83,.5); }
  70%{ box-shadow: 0 0 0 8px rgba(0,200,83,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,200,83,0); }
}
.tcits-bot-tooltip{
  position: fixed; right: 96px; bottom: 44px; z-index: 998;
  background: var(--tvi-secondary); color:#fff; font-size:13px; font-weight:600;
  padding:9px 15px; border-radius:10px; white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  opacity:0; pointer-events:none; transition:opacity .6s ease; /* fade only — no slide/movement */
  max-width: calc(100vw - 130px); overflow:hidden; text-overflow:ellipsis;
}
.tcits-bot-tooltip.show{ opacity:1; }
.tcits-bot-tooltip::after{
  content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border-width:6px 0 6px 6px; border-style:solid; border-color:transparent transparent transparent var(--tvi-secondary);
}

/* ---- Panel shell ---- */
.tcits-bot-panel{
  position: fixed; right: 22px; bottom: 24px; top: 138px; z-index: 1000;
  width: 420px; max-width: calc(100vw - 32px); height: auto; max-height: 760px;
  background:#fff; border-radius: 24px; box-shadow: 0 28px 70px rgba(10,31,68,.38);
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateY(16px) scale(.97); opacity:0; pointer-events:none;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), opacity .22s ease, height .25s ease;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.5);
  box-sizing: border-box; /* width includes border, never spills past its own edge */
}
.tcits-bot-panel.open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.tcits-bot-panel.minimized{ height: 76px; top: auto; }
.tcits-bot-panel.minimized .tcits-bot-mascot,
.tcits-bot-panel.minimized .tcits-bot-body,
.tcits-bot-panel.minimized .tcits-quick-actions-bar,
.tcits-bot-panel.minimized .tcits-bot-footer{ display:none; }

/* ---- Small Desktop / Laptop (993px–1200px) ---- */
@media (min-width:993px) and (max-width:1200px){ .tcits-bot-panel{ width:380px; } }

/* ---- Tablet (769px–992px) ---- */
@media (min-width:769px) and (max-width:992px){
  .tcits-bot-panel{ width:360px; }
  .tcits-bot-bubble{ bottom: 28px; right: 20px; }
}

/* ---- Mobile (≤768px) ----
   Bubble sits at a MINIMUM 80px from the bottom (plus the device's own
   safe-area inset for iPhone home-indicator bars) specifically so it never
   overlaps the hero carousel's dot navigation, which sits ~32px from the
   bottom of the hero on the homepage. Panel becomes a bottom sheet. */
@media (max-width:768px){
  .tcits-bot-bubble{
    right: 16px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    width:58px; height:58px;
  }
  .tcits-bot-tooltip{ display:none; }
  .tcits-bot-panel{
    right:0; left:0; bottom:0; top:auto; width:100%; max-width:100%;
    height:85vh; max-height:85vh; border-radius:24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tcits-bot-input{ font-size:16px; }
  .tcits-bot-mascot{ height:120px; }
}

/* ---- Small phones (≤380px, e.g. iPhone SE) ----
   Slightly tighter offset since the screen itself is shorter, while still
   respecting the 80px floor requested. */
@media (max-width:380px){
  .tcits-bot-bubble{ width:52px; height:52px; right:12px; }
}

/* ---- Header ---- */
.tcits-bot-header{
  background: var(--tvi-grad); color:#fff; padding:14px 16px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.tcits-bot-header .tcits-title{ flex:1; min-width:0; }
.tcits-bot-header strong{ display:block; font-size:15.5px; font-weight:700; line-height:1.3; }
.tcits-bot-header span{ font-size:11.5px; opacity:.85; display:flex; align-items:center; gap:5px; margin-top:2px; }
.tcits-bot-header span::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--tvi-accent); display:inline-block; box-shadow:0 0 0 2px rgba(0,200,83,.25); }
.tcits-bot-header-actions{ display:flex; gap:6px; flex-shrink:0; }
.tcits-bot-min, .tcits-bot-close{
  background:rgba(255,255,255,.16); border:none; color:#fff; width:30px; height:30px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.tcits-bot-min:hover, .tcits-bot-close:hover{ background:rgba(255,255,255,.3); }

/* ---- Mascot hero ---- */
.tcits-bot-mascot{
  position:relative; flex-shrink:0; height:160px; background: linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-bottom:1px solid var(--line-200, #E5E9F0);
}
.tcits-bot-mascot video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .45s ease; padding-top: 8px;
}
.tcits-bot-mascot video.active{ opacity:1; }

@media (max-height:760px){
  .tcits-bot-mascot{ height:110px; }
}
@media (max-height:600px){
  .tcits-bot-mascot{ height:84px; }
}

/* ---- Quick actions bar (persistent scroll strip) ---- */
.tcits-quick-actions-bar{
  display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px 12px; flex-shrink:0;
  border-bottom:1px solid var(--line-200,#E5E9F0);
  max-height:104px; overflow-y:auto;
}
.tcits-quick-actions-bar::-webkit-scrollbar{ width:5px; }
.tcits-quick-actions-bar::-webkit-scrollbar-track{ background:transparent; }
.tcits-quick-actions-bar::-webkit-scrollbar-thumb{ background: var(--tvi-primary, #0056D2); border-radius:99px; opacity:.4; }
.tcits-qa-chip{
  flex-shrink:0; background: var(--surface-100,#F4F7FC); border:1px solid transparent; color: var(--tvi-secondary);
  font-size:12.5px; font-weight:600; padding:9px 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:all .2s ease; min-height:38px;
}
.tcits-qa-chip:hover{ background:#fff; border-color: var(--tvi-primary); color: var(--tvi-primary); }

/* ---- Message body ---- */
.tcits-bot-body{
  flex:1; overflow-y:auto; overflow-x:hidden; padding:16px; display:flex; flex-direction:column; gap:12px;
  background: var(--surface-100, #F4F7FC);
}
.tcits-msg{ max-width:88%; display:flex; gap:8px; align-items:flex-end; animation: tcits-fade-in .35s ease both; }
@keyframes tcits-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .tcits-msg{ animation:none; } }
.tcits-msg.bot{ align-self:flex-start; }
.tcits-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.tcits-msg-bubble{
  padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.65;
  overflow-wrap: anywhere; word-break: break-word;
}
.tcits-msg.bot .tcits-msg-bubble{ background:#fff; color: var(--tvi-secondary); border-bottom-left-radius:4px; box-shadow:0 2px 8px rgba(20,30,60,.06); }
.tcits-msg.user .tcits-msg-bubble{ background: var(--tvi-grad); color:#fff; border-bottom-right-radius:4px; }
.tcits-msg-bubble a{ color: var(--tvi-primary); font-weight:700; text-decoration:underline; }
.tcits-msg.user .tcits-msg-bubble a{ color:#fff; }

.tcits-typing-indicator{ display:flex; gap:4px; padding:12px 14px; background:#fff; border-radius:16px; border-bottom-left-radius:4px; width:fit-content; box-shadow:0 2px 8px rgba(20,30,60,.06); }
.tcits-typing-indicator span{ width:7px; height:7px; border-radius:50%; background: var(--tvi-primary); opacity:.5; animation: tcits-blink 1.2s infinite ease-in-out; }
.tcits-typing-indicator span:nth-child(2){ animation-delay:.2s; }
.tcits-typing-indicator span:nth-child(3){ animation-delay:.4s; }
@keyframes tcits-blink{ 0%,80%,100%{ opacity:.35; transform:scale(.85);} 40%{ opacity:1; transform:scale(1);} }

.tcits-quick-replies{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; animation: tcits-fade-in .4s ease both; }
@media (prefers-reduced-motion: reduce){ .tcits-quick-replies{ animation:none; } }
.tcits-chip{
  background:#fff; border:1.5px solid var(--line-200,#E5E9F0); color: var(--tvi-secondary);
  font-size:13px; font-weight:600; padding:10px 15px; border-radius:999px; cursor:pointer;
  transition: all .2s ease; text-align:left; min-height:40px; line-height:1.3;
}
.tcits-chip:hover{ border-color: var(--tvi-primary); color: var(--tvi-primary); background: rgba(0,86,210,.06); }

/* ---- Footer / input ---- */
.tcits-bot-footer{
  padding:12px; border-top:1px solid var(--line-200,#E5E9F0); display:flex; gap:8px; flex-shrink:0; background:#fff; align-items:center;
}
.tcits-bot-input{
  flex:1; border:1.5px solid var(--line-200,#E5E9F0); border-radius:999px; padding:11px 18px; font-size:14px; outline:none;
  font-family:inherit; transition:border-color .2s;
}
.tcits-bot-input:focus{ border-color: var(--tvi-primary); box-shadow: 0 0 0 3px rgba(0,86,210,.15); }
.tcits-bot-mic, .tcits-bot-send{
  width:42px; height:42px; border-radius:50%; border:none; color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s, background .2s;
}
.tcits-bot-mic{ background: var(--surface-100,#F4F7FC); color: var(--tvi-secondary); }
.tcits-bot-mic:hover{ background:#E7ECF6; }
.tcits-bot-mic.listening{ background: var(--tvi-accent); color:#fff; animation: tvi-mic-pulse 1s infinite; }
@keyframes tvi-mic-pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }
.tcits-bot-send{ background: var(--tvi-grad); }
.tcits-bot-send:hover{ transform:scale(1.08); }

/* =========================================================
   PREMIUM SPLIT PAGE HERO — internal page headers
   Services / Industries / Solutions / Corporate Training / Technology
   ========================================================= */
.split-hero{
  position:relative;
  background:var(--grad-brand);
  overflow:hidden;
  min-height:clamp(400px, 30vw, 450px);
  isolation:isolate;
}
.split-hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 8% 100%, rgba(212,165,55,.16) 0%, rgba(212,165,55,0) 60%),
    radial-gradient(50% 70% at 0% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.split-hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  min-height:inherit;
  max-width:1680px;
  margin:0 auto;
}
.split-hero-content{
  flex:0 0 60%;
  max-width:60%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:52px clamp(24px, 5.5vw, 84px);
  color:#fff;
  position:relative;
  z-index:2;
}
.split-hero-content .breadcrumb{ color:rgba(255,255,255,.65); font-size:13px; margin-bottom:18px; }
.split-hero-content .breadcrumb a{ color:rgba(255,255,255,.65); }
.split-hero-content .breadcrumb a:hover{ color:#fff; }
.split-hero-content .breadcrumb span{ color:#fff; }
.split-hero-content .eyebrow{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; }
.split-hero-content .eyebrow::before{ background:var(--gold-500); }
.split-hero-content h1{
  color:#fff;
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.14;
  letter-spacing:-.01em;
  margin:14px 0 16px;
}
.split-hero-content h1 span{
  background:linear-gradient(90deg,#D4A537,#F0CE73);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.split-hero-content p{
  font-size:16.5px;
  line-height:1.65;
  color:rgba(255,255,255,.84);
  max-width:540px;
}
.split-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

/* Right-hand media panel */
.split-hero-media{
  flex:0 0 40%;
  max-width:40%;
  position:relative;
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.split-hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.split-hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(7,31,77,.58) 0%, rgba(7,31,77,.22) 55%, rgba(7,31,77,.4) 100%);
}

/* Illustration variant (used for Industry pages — bespoke branded artwork rather than stock photography) */
.split-hero-media--illustration{
  background:var(--grad-panel-soft);
  display:flex; align-items:center; justify-content:center;
}
.split-hero-media--illustration::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(65% 65% at 70% 30%, rgba(212,165,55,.22) 0%, rgba(212,165,55,0) 60%);
}
.split-hero-media--illustration img{
  position:relative; inset:auto;
  width:auto; height:auto;
  max-width:74%; max-height:80%;
  object-fit:contain;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));
}
.split-hero-media--illustration::after{ display:none; }

/* Technology pages — 70/30 split, prioritizing readability */
.split-hero--tech .split-hero-content{ flex:0 0 68%; max-width:68%; padding-right:clamp(24px,4vw,56px); }
.split-hero--tech .split-hero-media{ flex:0 0 32%; max-width:32%; clip-path:polygon(15% 0, 100% 0, 100% 100%, 0 100%); }
.split-hero--tech .split-hero-content p{ max-width:600px; }

@media (max-width:992px){
  .split-hero{ min-height:350px; }
  .split-hero-content{ padding:44px clamp(20px,4vw,48px); }
  .split-hero--tech .split-hero-content{ flex:0 0 62%; max-width:62%; }
  .split-hero--tech .split-hero-media{ flex:0 0 38%; max-width:38%; }
}

@media (max-width:768px){
  .split-hero{ min-height:auto; }
  .split-hero-inner{ flex-direction:column; }
  .split-hero-content,
  .split-hero--tech .split-hero-content{
    flex:1 1 auto; max-width:100%;
    padding:40px 22px 34px;
    order:1;
  }
  .split-hero-media,
  .split-hero--tech .split-hero-media{
    flex:1 1 auto; max-width:100%;
    height:200px;
    clip-path:none;
    order:2;
  }
  .split-hero-media--illustration{ height:240px; }
  .split-hero-content h1{ font-size:clamp(26px,7vw,34px); }
  .split-hero-actions{ margin-top:22px; }
}

@media (max-width:480px){
  .split-hero-media{ height:180px; }
  .split-hero-media--illustration{ height:210px; }
}

/* ============================================================
   TECHNOLOGY EXPERTISE SHOWCASE (technologies.html)
   ============================================================ */
.tech-showcase-intro{ margin-bottom:28px; }

.tech-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:18px; }

.tech-search{
  display:flex; align-items:center; gap:10px; background:#fff;
  border:1.5px solid var(--line-200); border-radius:var(--radius-pill);
  padding:11px 18px; flex:1 1 320px; max-width:420px; transition:border-color .2s, box-shadow .2s;
}
.tech-search:focus-within{ border-color:var(--navy-900); box-shadow:0 0 0 3px rgba(10,61,145,.1); }
.tech-search svg{ flex-shrink:0; color:var(--ink-500); }
.tech-search input{
  border:none; outline:none; font:inherit; font-size:14.5px; width:100%;
  background:transparent; color:var(--ink-900);
}
.tech-search input::placeholder{ color:var(--ink-500); }
.tech-search-clear{
  border:none; background:var(--surface-100); color:var(--ink-500); width:22px; height:22px;
  border-radius:50%; font-size:15px; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.tech-search-clear:hover{ background:var(--line-200); }

#tech-filter-group{ margin-bottom:0; flex:2 1 480px; }

.tech-result-count{ font-size:13.5px; color:var(--ink-500); margin:0 0 28px; }

#tech-showcase-grid{ display:flex; flex-direction:column; gap:22px; }

.tech-category-panel{
  background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-lg);
  padding:30px 32px; transition:border-color .3s, box-shadow .3s;
}
.tech-category-panel:hover{ border-color:rgba(10,61,145,.18); box-shadow:var(--shadow-md); }

.tech-category-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; }
.tech-category-icon{
  width:48px; height:48px; border-radius:14px; background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tech-category-head h3{ font-size:19px; margin:0 0 4px; }
.tech-category-head p{ font-size:14.5px; color:var(--ink-500); margin:0; max-width:640px; }

.tech-chip-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }

.tech-pill{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px 10px 12px;
  border:1.5px solid var(--line-200); border-radius:var(--radius-pill);
  background:var(--surface-50); text-decoration:none; color:var(--ink-900);
  font-size:14px; font-weight:600; transition:all .2s ease;
}
.tech-pill:hover, .tech-pill:focus-visible{
  background:var(--navy-900); color:#fff; border-color:var(--navy-900); transform:translateY(-2px);
}
.tech-pill:focus-visible{ outline:3px solid var(--gold-500); outline-offset:2px; }
.tech-pill img{ width:22px; height:22px; object-fit:contain; flex-shrink:0; }
.tech-pill-badge{
  display:flex; align-items:center; justify-content:center; width:22px; height:22px;
  border-radius:6px; background:var(--navy-900); color:#fff; font-size:9.5px; font-weight:800;
  flex-shrink:0; letter-spacing:.02em;
}
.tech-pill:hover .tech-pill-badge{ background:#fff; color:var(--navy-900); }

.tech-empty-state{ text-align:center; color:var(--ink-500); font-size:15px; padding:40px 20px; }
.tech-inline-reset{
  border:none; background:none; color:var(--blue-600); font-weight:700; cursor:pointer;
  text-decoration:underline; font:inherit; padding:0;
}

@media (max-width:720px){
  .tech-toolbar{ flex-direction:column; align-items:stretch; }
  .tech-search{ max-width:none; flex:0 1 auto; }
  #tech-filter-group{
    flex:0 1 auto; overflow-x:auto; flex-wrap:nowrap;
    padding-bottom:4px; -webkit-overflow-scrolling:touch;
  }
  #tech-filter-group .chip{ flex-shrink:0; align-self:flex-start; }
  .tech-category-panel{ padding:24px 20px; }
  .tech-category-head{ gap:12px; }
}

@media (max-width:480px){
  .tech-pill{ padding:8px 13px 8px 10px; font-size:13.5px; }
  .tech-category-head h3{ font-size:17px; }
}