/* ==========================================================================
   TECNVIRONS MARSHAL — Global Landing Page Stylesheet
   File: styles/landingpage.css
   ========================================================================== */

/* ===== DESIGN TOKENS ===== */
:root{
  --navy:#0a0f2e;
  --navy-deep:#060915;
  --navy-raise:#111834;
  --navy-line: rgba(255,255,255,0.08);
  --royal-blue:#1a3bff;
  --royal-blue-soft: rgba(26,59,255,0.14);
  --indigo:#3d3abf;
  --white:#f8f5fb;
  --bg-tint:#f8f5fb;
  --surface:#ffffff;
  --soft-gray:#f4effa;
  --gray-line: rgba(10,15,46,0.08);
  --ink: #0a0f2e;
  --ink-soft: rgba(10,15,46,0.62);
  --paper-ink-soft: rgba(255,255,255,0.66);
  --paper-ink-faint: rgba(255,255,255,0.4);
  --emerald:#10b981;
  --orange:#f97316;
  --purple:#8b5cf6;
  --success:#22c55e;
  --error:#ef4444;
  --display: 'Manrope', sans-serif;
  --body: 'Inter', sans-serif;
  --mono-ui: 'Plus Jakarta Sans', sans-serif;
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --ease: cubic-bezier(.16,.84,.32,1);

  /* Ecosystem & Order Flow Tokens */
  --primary:#6d28d9;
  --primary-light:#d7c8ef;
  --primary-lighter:#ebe5f5;
  --primary-dark:#521ba7;
  --primary-darker:#2b0d59;
  --ink-faint:#9a8fa8;
  --line:#c6bcd6;
  --radius-lg:20px;
}

/* ===== RESETS ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
body{
  font-family: var(--body);
  background: var(--bg-tint);
  color: var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--royal-blue); outline-offset:3px; border-radius:4px;}

/* ===== UTILITIES ===== */
.wrap{ max-width:1440px; margin:0 auto; padding:0 32px; width:100%; }
.eyebrow{
  font-family:var(--mono-ui);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  border:1.5px solid currentColor;
  transform:rotate(45deg);
  flex:none;
}
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); line-height:1.08; margin-top:14px;}
.section-head p{ margin-top:16px; font-size:17px; color:var(--ink-soft); line-height:1.6;}
.section-pad{ padding:120px 0; }
.on-dark{ color:var(--white); }
.on-dark .section-head p{ color:var(--paper-ink-soft); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--white); }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono-ui); font-weight:600; font-size:14.5px;
  padding:15px 26px; border-radius:100px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  white-space:nowrap;
}
.btn-primary{
  background: var(--royal-blue); color:#fff;
  box-shadow: 0 8px 24px -6px rgba(26,59,255,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -6px rgba(26,59,255,.65); }
.btn-ghost{
  background: rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(10,15,46,.4); }

/* ===== REVEAL ON SCROLL ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.09s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.23s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.30s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.37s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.44s;}
.reveal-stagger.in > *:nth-child(8){transition-delay:.51s;}

/* coordinate / command-grid signature marks */
.tag-coord{
  font-family:var(--mono-ui); font-size:11px; font-weight:600; letter-spacing:.1em;
  color: var(--royal-blue); opacity:.75; text-transform:uppercase;
}
.crosshair{ position:relative; }
.crosshair::before,.crosshair::after{
  content:""; position:absolute; background:currentColor; opacity:.5;
}
.crosshair::before{ width:1px; height:9px; top:50%; left:50%; transform:translate(-50%,-50%); }
.crosshair::after{ width:9px; height:1px; top:50%; left:50%; transform:translate(-50%,-50%); }

/* ===== KEYFRAMES ===== */
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes pulse-ring{ 0%{ transform:scale(.7); opacity:.6;} 100%{ transform:scale(2.2); opacity:0;} }
@keyframes dash-move{ to{ stroke-dashoffset:-200; } }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes gradient-shift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.nav-inner{
  max-width:1440px; margin:0 auto; padding:0 32px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.nav.scrolled{
  padding:12px 0; background:rgba(6,9,21,0.82); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,0.08);
}
.nav-logo{ display:flex; align-items:center; }
.nav-brand-logo{ height:48px; width:auto; max-width:260px; object-fit:contain; border-radius:6px; transition:transform .2s ease; }
.nav-brand-logo:hover{ transform:scale(1.03); }
.nav-menu{ display:flex; gap:34px; }
.nav-menu a{
  font-family:var(--mono-ui); font-size:14px; font-weight:500; color:var(--paper-ink-soft);
  transition:color .25s;
  position:relative;
}
.nav-menu a:hover{ color:#fff; }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-right .btn{ padding:11px 22px; font-size:13.5px; }
.nav-burger{ display:none; }

/* ===== LANGUAGE PICKER DROPDOWN ===== */
.lang-selector-wrap {
  position: relative;
  display: inline-block;
  z-index: 1050;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-family: var(--mono-ui);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.25s var(--ease);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.lang-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.lang-globe { font-size: 14px; }
.lang-curr-flag { font-size: 14px; }
.lang-curr-label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; }
.lang-arrow { font-size: 10px; color: var(--paper-ink-soft); transition: transform 0.25s; }
.lang-btn[aria-expanded="true"] .lang-arrow { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: #0d1430;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(26, 59, 255, 0.2);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1100;
}
.lang-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lang-dropdown-header {
  font-family: var(--mono-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa4ff;
  padding: 8px 12px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--paper-ink-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.lang-option:hover {
  background: rgba(26, 59, 255, 0.2);
  color: #ffffff;
}
.lang-option.active {
  background: linear-gradient(135deg, var(--royal-blue), #3b82f6);
  color: #ffffff;
  font-weight: 700;
}
.lang-check { font-size: 12px; font-weight: 800; color: #10b981; }

/* ===== MOBILE DRAWER & BURGER ===== */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10001;
  align-items: center;
}
.nav-burger span {
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.25s var(--ease);
}

/* Mobile Drawer styles */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 320px;
  height: 100vh;
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-raise));
  z-index: 10000;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.mobile-drawer.active {
  right: 0;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}
.drawer-overlay.active {
  opacity: 1;
  visibility: visible;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.drawer-close {
  font-size: 24px;
  color: #ffffff;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: transform 0.2s;
}
.drawer-close:hover {
  transform: scale(1.1);
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.drawer-menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.drawer-link {
  font-family: var(--mono-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper-ink-soft);
  text-decoration: none;
  transition: color 0.2s;
  padding: 8px 0;
  display: block;
}
.drawer-link:hover {
  color: #ffffff;
}

/* Drawer Dropdowns */
.drawer-dropdown {
  position: relative;
  width: 100%;
}
.drawer-dropdown-btn {
  width: 100%;
  text-align: left;
  font-family: var(--mono-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--paper-ink-soft);
  background: transparent;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
}
.drawer-dropdown-btn:hover {
  color: #ffffff;
}
.drawer-dropdown-content {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 8px;
  gap: 12px;
}
.drawer-dropdown-content.show {
  display: flex;
}

.drawer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 20px 0;
}

.drawer-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.drawer-btn-ghost {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.drawer-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.drawer-btn-primary {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--royal-blue), var(--indigo));
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.drawer-btn-primary:hover {
  transform: translateY(-1px);
}

.drawer-lang-selector {
  display: flex;
  justify-content: center;
}

@media (max-width:960px){
  .nav-menu{ display:none; }
  .nav-burger{ display:flex; }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:100vh;
  background: var(--navy);
  overflow:hidden;
  display:flex; align-items:center;
  padding-top:110px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 78% 18%, rgba(26,59,255,.32), transparent 60%),
    radial-gradient(ellipse 700px 500px at 15% 85%, rgba(61,58,191,.28), transparent 60%);
  pointer-events:none;
}
.hero-grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 90%);
  opacity:.6;
}
#particle-canvas{ position:absolute; inset:0; pointer-events:none; }
.hero-inner{
  position:relative; z-index:2;
  max-width:1440px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  width:100%;
}
.hero-copy .eyebrow{ color:#8fa4ff; }
.hero-copy h1{
  font-size:clamp(38px,4.6vw,60px); line-height:1.04; color:#fff; margin-top:18px; letter-spacing:-0.025em;
}
.hero-copy h1 span{
  background:linear-gradient(90deg,#5b7dff,#8b5cf6,#5b7dff);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradient-shift 6s ease infinite;
}
.hero-copy p.lede{ margin-top:22px; font-size:18px; color:var(--paper-ink-soft); max-width:580px; line-height:1.65;}
.hero-ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hero-proof{ margin-top:56px; display:flex; gap:32px; flex-wrap:wrap; }
.hero-proof .num{ font-family:var(--display); font-weight:800; font-size:26px; color:#fff; }
.hero-proof .lbl{ font-family:var(--mono-ui); font-size:11.5px; letter-spacing:.08em; color:var(--paper-ink-faint); text-transform:uppercase; margin-top:2px;}

.hero-visual{ position:relative; }
.console-frame{
  position:relative; border-radius:22px; border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter:blur(10px);
  padding:18px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  animation: floaty 7s ease-in-out infinite;
}
.console-frame .console-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono-ui); font-size:10.5px; letter-spacing:.1em; color:var(--paper-ink-faint);
  text-transform:uppercase; margin-bottom:10px; padding:0 4px;
}
.console-head .dot-live{ width:6px;height:6px;border-radius:50%; background:var(--emerald); display:inline-block; margin-right:6px; animation:blink 1.6s infinite;}

/* ===== TRUST BAR ===== */
.trust-bar{ background:var(--navy-deep); padding:44px 0; border-top:1px solid var(--navy-line); border-bottom:1px solid var(--navy-line); overflow:hidden;}
.trust-stats{ display:flex; justify-content:space-between; max-width:1440px; margin:0 auto; padding:0 32px; flex-wrap:wrap; gap:24px; width:100%;}
.trust-stats .stat{ text-align:left; }
.trust-stats .num{ font-family:var(--display); font-weight:800; font-size:32px; color:#fff; }
.trust-stats .lbl{ font-family:var(--mono-ui); font-size:11.5px; color:var(--paper-ink-faint); letter-spacing:.08em; text-transform:uppercase; margin-top:4px;}
.logo-slider{ position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);}
.logo-track{ display:flex; gap:64px; width:max-content; animation:slide 28s linear infinite; align-items:center;}
.logo-track span{ font-family:var(--mono-ui); font-weight:700; font-size:17px; color:var(--paper-ink-faint); letter-spacing:.03em; white-space:nowrap;}

/* ===== DEPARTMENT ECOSYSTEM (PENTAGON & CONNECTED DEPARTMENTS) ===== */
.dept-eco-section{
  position:relative; width:100%; margin:0 auto; padding:100px 32px 110px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%, #e9e1f5 0%, transparent 55%),
    radial-gradient(900px 560px at 100% 12%, #e0d7ef 0%, transparent 50%),
    linear-gradient(180deg,#ffffff 0%, var(--bg-tint) 100%);
  border-bottom: 1px solid rgba(109,40,217,0.08);
}
.dept-eco-section::before,
.dept-eco-section::after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; pointer-events:none; z-index:0;
}
.dept-eco-section::before{
  width:420px;height:420px;
  background:radial-gradient(circle,var(--primary-light) 0%, transparent 70%);
  top:-140px; left:-120px;
}
.dept-eco-section::after{
  width:520px;height:520px;
  background:radial-gradient(circle,#ded3ee 0%, transparent 70%);
  bottom:-220px; right:-160px;
}
.dept-eco-inner{
  position:relative; z-index:1; max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:minmax(320px,460px) 1fr; gap:64px; align-items:center;
}

/* --- Left column --- */
.dept-eco-left .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--body);
  font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--primary-dark); margin-bottom:22px;
}
.dept-eco-left .eyebrow svg{width:11px;height:11px;transform:rotate(45deg);}
.dept-eco-left .eyebrow svg rect{fill:none;stroke:var(--primary-dark);stroke-width:2;}
.dept-eco-heading{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:clamp(32px,4vw,52px);
  line-height:1.15; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink);
}
.dept-eco-heading em{
  font-style:normal; background:linear-gradient(92deg,var(--primary-dark),var(--primary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dept-eco-desc{ font-size:17.5px; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin:0 0 36px; }
.dept-feature-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.dept-feature-card{
  position:relative; display:flex; gap:16px; align-items:flex-start;
  padding:18px 20px 18px 22px; background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(109,40,217,.18); border-radius:16px;
  box-shadow:0 4px 18px rgba(82,27,167,.06); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  cursor:pointer;
}
.dept-feature-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--primary),var(--primary-dark)); opacity:.8;
}
.dept-feature-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(82,27,167,.16); border-color:rgba(109,40,217,.4); }
.dept-feature-card.is-active{
  transform:translateY(-4px); background:rgba(255,255,255,.88);
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(109,40,217,.14), 0 16px 34px rgba(82,27,167,.22);
}
.dept-feature-card.is-active::before{ opacity:1; box-shadow:0 0 10px 1px rgba(109,40,217,.7); }
.dept-feature-card.is-active .dept-feature-num{
  color:#fff; background:linear-gradient(150deg,var(--primary),var(--primary-dark));
  border-color:transparent; box-shadow:0 0 0 6px rgba(109,40,217,.2);
}
.dept-feature-card.is-active .dept-feature-text b{ color:var(--primary-darker); }
.dept-feature-num{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
  color:var(--primary-darker); background:linear-gradient(150deg,var(--primary-lighter),#fff);
  border:1px solid rgba(109,40,217,.35); box-shadow:0 0 0 4px rgba(109,40,217,.08);
  animation:badgePulse 3.2s ease-in-out infinite;
}
.dept-feature-text{font-size:15px; line-height:1.55; color:var(--ink-soft);}
.dept-feature-text b{color:var(--ink); font-weight:600;}

/* --- Pentagon right column --- */
.dept-stage-wrap{ position:relative; }
.dept-stage{ position:relative; width:100%; max-width:580px; margin:0 auto; aspect-ratio:1/1; }
.dept-lines-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dept-conn{
  fill:none; stroke:url(#deptLineGrad); stroke-width:2; stroke-linecap:round; opacity:.3;
}
.dept-conn[data-phase]{
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:drawLine .45s var(--ease) forwards; animation-delay:var(--d);
}
.dept-stage.idle .dept-conn{ stroke-dasharray:5 7; animation:flowDash 1.4s linear infinite; opacity:.4; }
.dept-conn.is-active{ opacity:1 !important; stroke-width:3; filter:url(#deptGlow); }
.dept-node{
  position:absolute; transform:translate(-50%,-50%) scale(1);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation:floatY 5s ease-in-out infinite; animation-delay:calc(var(--d, 0s) + .6s); cursor:pointer;
}
.dept-node-ring{
  position:relative; width:96px; height:96px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.7); backdrop-filter:blur(10px);
  border:2px solid rgba(109,40,217,.45);
  box-shadow:0 8px 24px rgba(82,27,167,.12), inset 0 0 0 1px rgba(255,255,255,.6);
  transition:box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.dept-node.marshal .dept-node-ring{
  width:104px; height:104px;
  background: rgba(255,255,255,0.92);
  border: 2.5px solid rgba(109,40,217,.55);
  box-shadow: 0 0 0 8px rgba(109,40,217,.12), 0 12px 32px rgba(82,27,167,.16), inset 0 0 0 1px rgba(255,255,255,.9);
  animation:marshalPulse 2.6s ease-in-out infinite;
}
.dept-node.marshal .dept-node-icon{ color:var(--primary-darker); }
.dept-node-icon{ width:32px; height:32px; color:var(--primary-darker); }
.dept-node.marshal .dept-node-ring::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(circle,rgba(109,40,217,.5),transparent 70%);
  filter:blur(6px); z-index:-1; animation:glowBreathe 2.6s ease-in-out infinite;
}
.dept-node-label{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); transition:color .3s var(--ease);
}
.dept-node.marshal .dept-node-label{ color:var(--primary-darker); font-weight:700; }
.dept-node:hover .dept-node-ring, .dept-node.is-active .dept-node-ring{
  transform:scale(1.1); border-color:var(--primary);
  box-shadow:0 0 0 8px rgba(109,40,217,.16), 0 14px 30px rgba(82,27,167,.28);
}
.dept-node:hover .dept-node-label, .dept-node.is-active .dept-node-label{ color:var(--primary-darker); }
.dept-node.marshal.is-active .dept-node-ring{ box-shadow:0 0 0 10px rgba(109,40,217,.22), 0 14px 36px rgba(43,13,89,.45); }

.dept-tooltip{
  position:absolute; z-index:15; max-width:220px; padding:12px 14px;
  background:var(--navy); color:#f2eaf5; font-size:12.5px; line-height:1.5;
  border-radius:12px; box-shadow:0 12px 28px rgba(20,10,25,.35);
  opacity:0; visibility:hidden; transform:translate(-50%,-8px);
  transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.dept-tooltip.show{ opacity:1; visibility:visible; transform:translate(-50%,-14px); }
.dept-tooltip b{ display:block; margin-bottom:4px; font-family:'Manrope',sans-serif; color:#fff; font-size:12px; letter-spacing:.06em; }
.dept-tooltip::after{
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  width:10px;height:10px; background:var(--navy); clip-path:polygon(0 0,100% 0,50% 100%);
}

/* Dept Ecosystem Keyframes */
@keyframes badgePulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(109,40,217,.08); } 50%{ box-shadow:0 0 0 7px rgba(109,40,217,.16); } }
@keyframes drawLine{ to{ stroke-dashoffset:0; opacity:.55; } }
@keyframes flowDash{ to{ stroke-dashoffset:-24; } }
@keyframes nodeIn{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes floatY{ 0%,100%{ margin-top:0; } 50%{ margin-top:-6px; } }
@keyframes marshalPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }
@keyframes glowBreathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes vFlow{ 0%{ background-position-y:0; } 100%{ background-position-y:16px; } }

/* Mobile vertical flow */
.dept-stage-mobile{ display:none; }
@media (max-width:980px){
  .dept-eco-inner{ grid-template-columns:1fr; gap:56px; }
  .dept-stage{ display:none; }
  .dept-stage-mobile{ display:flex; flex-direction:column; align-items:center; gap:0; }
  .dept-mnode{ display:flex; flex-direction:column; align-items:center; gap:10px; opacity:1; transform:scale(1); }
  .dept-mnode .dept-node-ring{ width:84px; height:84px; }
  .dept-mnode.marshal .dept-node-ring{ width:92px; height:92px; }
  .dept-mconn{
    width:2px; height:34px;
    background:repeating-linear-gradient(180deg,var(--primary) 0 4px, transparent 4px 8px); opacity:.6;
  }
  .dept-stage-mobile.idle .dept-mconn{ animation:vFlow 1s linear infinite; opacity:.6; }
}
@media (max-width:520px){
  .dept-eco-section{ padding:64px 20px 80px; }
  .dept-eco-heading{ font-size:28px; }
}

/* ===== ECOSYSTEM & ORDER FLOW CONNECT-MARSHAL ===== */
.eco-section{
  position:relative; width:100%; margin:0 auto; padding:100px 32px 120px; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 12% -8%, #ede4f2 0%, transparent 55%),
    radial-gradient(900px 560px at 100% 12%, #f2e9f5 0%, transparent 50%),
    linear-gradient(180deg,#ffffff 0%, var(--bg-tint) 100%);
}
.eco-section::before,.eco-section::after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; pointer-events:none; z-index:0;
}
.eco-section::before{ width:420px;height:420px; background:radial-gradient(circle,var(--primary-light) 0%, transparent 70%); top:-140px; left:-120px; }
.eco-section::after{ width:520px;height:520px; background:radial-gradient(circle,#ded3ee 0%, transparent 70%); bottom:-220px; right:-160px; }
.eco-grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(82,27,167,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(82,27,167,.05) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 20%, black 40%, transparent 90%);
  pointer-events:none;
}
.eco-particle{
  position:absolute; width:5px;height:5px;border-radius:50%;
  background:var(--primary); opacity:.35; filter:blur(.5px);
  animation:drift 9s ease-in-out infinite;
}
.eco-head{ position:relative; z-index:1; text-align:center; max-width:760px; margin:0 auto 68px; }
.eco-head .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-dark); margin-bottom:20px; }
.eco-head .eyebrow svg{width:11px;height:11px;transform:rotate(45deg);}
.eco-head .eyebrow svg rect{fill:none;stroke:var(--primary-dark);stroke-width:2;}
.eco-head h2{ font-family:'Manrope',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,42px); line-height:1.18; letter-spacing:-.02em; margin:0 0 16px; color:var(--ink); }
.eco-head h2 em{ font-style:normal; background:linear-gradient(92deg,var(--primary-dark),var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eco-head p{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

/* Horizontal flow */
.flow-wrap{ position:relative; z-index:1; overflow-x:auto; overflow-y:visible; padding:8px 4px 12px; scrollbar-width:thin; max-width:1280px; margin:0 auto; }
.flow-row{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; min-width:820px; padding-top:118px; }
.flow-line{
  position:absolute; top:56px; left:6%; right:6%; height:2px;
  background:linear-gradient(90deg, var(--line), var(--primary-light), var(--line)); border-radius:2px;
}
.flow-line::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px); opacity:.5; }
.flow-pulse{
  position:absolute; top:56px; left:6%; width:9px; height:9px; margin-top:-3.5px;
  border-radius:50%; background:var(--primary-dark);
  box-shadow:0 0 10px 2px rgba(109,40,217,.55), 0 0 22px 6px rgba(109,40,217,.25);
  animation:travel 6.4s linear infinite;
}
.flow-pulse.p2{ animation-delay:-2.13s; opacity:.55; }
.flow-pulse.p3{ animation-delay:-4.27s; opacity:.3; }
@keyframes travel{ 0%{ left:6%; } 100%{ left:94%; } }
.flow-badge{
  position:absolute; top:20px; transform:translateX(-50%);
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; color:var(--primary-darker);
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  border:1px solid rgba(109,40,217,.3); border-radius:999px; padding:6px 13px; white-space:nowrap;
  opacity:0; animation:badgeCycle 6.4s ease-in-out infinite;
}
.flow-badge.b1{ left:27%; animation-delay:0s; }
.flow-badge.b2{ left:56%; animation-delay:2.13s; }
.flow-badge.b3{ left:82%; animation-delay:4.27s; }
@keyframes badgeCycle{
  0%{ opacity:0; transform:translateX(-50%) translateY(4px); }
  6%{ opacity:1; transform:translateX(-50%) translateY(0); }
  24%{ opacity:1; }
  32%{ opacity:0; transform:translateX(-50%) translateY(-4px); }
  100%{ opacity:0; }
}
.flow-node{ position:relative; z-index:2; flex:0 0 auto; width:23%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.node-tick{ position:absolute; top:-62px; width:2px; height:62px; background:var(--line); }
.node-ring{
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.75); backdrop-filter:blur(10px);
  border:2px solid rgba(109,40,217,.4);
  box-shadow:0 8px 22px rgba(82,27,167,.14), inset 0 0 0 1px rgba(255,255,255,.6);
  margin-bottom:14px;
}
.node-icon{ width:28px; height:28px; color:var(--primary-darker); }
.flow-node.core .node-ring{
  width:84px; height:84px;
  background: rgba(255,255,255,0.92);
  border: 2.5px solid rgba(109,40,217,.45);
  box-shadow: 0 0 0 6px rgba(109,40,217,.10), 0 10px 28px rgba(82,27,167,.15), inset 0 0 0 1px rgba(255,255,255,.8);
  animation:corePulse 2.6s ease-in-out infinite;
}
.flow-node.core .node-icon{ color:var(--primary-darker); }
.flow-node.done .node-ring{ background:linear-gradient(150deg,#fff,var(--primary-lighter)); border-color:var(--primary); }
.flow-title{ font-family:'Manrope',sans-serif; font-weight:700; font-size:15px; color:var(--ink); margin-bottom:5px; }
.flow-sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; max-width:20ch; }

/* Phone mockups */
.phone{
  width:78px; height:158px; border-radius:15px; border:2px solid var(--primary-light);
  background:#fff; box-shadow:0 14px 30px rgba(82,27,167,.18);
  overflow:hidden; position:relative; margin-bottom:14px;
}
.phone::before{ content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:22px; height:3px; border-radius:2px; background:var(--primary-light); z-index:2; }
.phone-screen{ position:absolute; inset:3px; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,#fff,var(--bg-tint)); }
.phone-slide{ position:absolute; inset:0; padding:15px 8px 8px; display:flex; flex-direction:column; gap:6px; opacity:0; animation:phoneCycle 6.4s ease-in-out infinite; }
.phone-slide.s2{ animation-delay:-2.13s; }
.phone-slide.s3{ animation-delay:-4.27s; }
.phone-app-label{ font-weight:700; font-size:7px; letter-spacing:.08em; color:var(--primary-dark); text-transform:uppercase; }
.phone-status{ font-family:'Manrope',sans-serif; font-size:8.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.phone-bar-track{ height:3px; border-radius:2px; background:var(--primary-lighter); overflow:hidden; }
.phone-bar-fill{ height:100%; background:var(--primary); border-radius:2px; }
.phone-map{ flex:1; margin-top:2px; border-radius:6px; position:relative; overflow:hidden; background: repeating-linear-gradient(0deg, rgba(109,40,217,.08) 0 6px, transparent 6px 12px), var(--primary-lighter); }
.phone-map .live-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--primary-dark); top:60%; left:20%; animation:moveDot 3.2s ease-in-out infinite; box-shadow:0 0 0 0 rgba(82,27,167,.5); }
.phone-map .live-dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--primary-dark); opacity:.6; animation:radar 1.8s ease-out infinite; }
@keyframes moveDot{ 0%{ top:64%; left:16%; } 35%{ top:38%; left:42%; } 65%{ top:50%; left:68%; } 100%{ top:64%; left:16%; } }
@keyframes radar{ 0%{ transform:scale(.4); opacity:.7; } 100%{ transform:scale(1.6); opacity:0; } }
@keyframes phoneCycle{ 0%{ opacity:0; transform:translateX(6px); } 6%{ opacity:1; transform:translateX(0); } 26%{ opacity:1; } 33%{ opacity:0; transform:translateX(-6px); } 100%{ opacity:0; } }
@keyframes corePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045); } }

/* Detail cards */
.detail-wrap{ position:relative; z-index:1; margin-top:56px; max-width:1280px; margin-left:auto; margin-right:auto; }
.detail-rail{ position:relative; height:2px; margin:0 auto 0; max-width:900px; background:var(--line); border-radius:2px; }
.detail-rail-pulse{ position:absolute; top:50%; left:0; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--primary-dark); box-shadow:0 0 10px 2px rgba(109,40,217,.5); animation:detailTravel 6.4s linear infinite; }
@keyframes detailTravel{ 0%{ left:0%; } 100%{ left:100%; } }
.detail-grid{ max-width:900px; margin:0 auto; padding-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.detail-card{
  position:relative; overflow:hidden; padding:22px 22px 24px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(109,40,217,.22); border-radius:16px;
  box-shadow:0 4px 16px rgba(82,27,167,.06); transform:translateY(0);
  animation:cardActive 6.4s ease-in-out infinite;
}
.detail-card.c1{ animation-delay:0s; }
.detail-card.c2{ animation-delay:2.13s; }
.detail-card.c3{ animation-delay:4.27s; }
@keyframes cardActive{
  0%{ border-color:rgba(109,40,217,.22); box-shadow:0 4px 16px rgba(82,27,167,.06); transform:translateY(0); }
  6%{ border-color:var(--primary); box-shadow:0 16px 34px rgba(82,27,167,.22); transform:translateY(-5px); }
  24%{ border-color:var(--primary); box-shadow:0 16px 34px rgba(82,27,167,.22); transform:translateY(-5px); }
  32%{ border-color:rgba(109,40,217,.22); box-shadow:0 4px 16px rgba(82,27,167,.06); transform:translateY(0); }
  100%{ border-color:rgba(109,40,217,.22); box-shadow:0 4px 16px rgba(82,27,167,.06); transform:translateY(0); }
}
.detail-wave{ position:absolute; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--primary),var(--primary-dark)); border-radius:3px 3px 0 0; animation:waveFill 6.4s ease-in-out infinite; }
.detail-card.c1 .detail-wave{ animation-delay:0s; }
.detail-card.c2 .detail-wave{ animation-delay:2.13s; }
.detail-card.c3 .detail-wave{ animation-delay:4.27s; }
@keyframes waveFill{ 0%{ width:0%; opacity:0; } 6%{ width:0%; opacity:1; } 28%{ width:100%; opacity:1; } 33%{ width:100%; opacity:0; } 100%{ width:0%; opacity:0; } }
.detail-icon-wrap{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--primary-lighter); border:1px solid rgba(109,40,217,.3); margin-bottom:16px; transition:background .3s var(--ease), border-color .3s var(--ease); }
.detail-icon-wrap svg{ width:20px; height:20px; color:var(--primary-darker); }
.detail-card-num{ position:absolute; top:20px; right:20px; font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; color:var(--ink-faint); }
.detail-card h4{ font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px; margin:0 0 8px; color:var(--ink); }
.detail-card p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0; }

@media (max-width:760px){ .detail-grid{ grid-template-columns:1fr; } }
@media (max-width:900px){ .eco-section{ padding:64px 20px 72px; } .flow-row{ min-width:740px; } }
@media (max-width:520px){ .eco-head h2{ font-size:26px; } }

/* ===== PROBLEMS ===== */
.problems{ background:var(--bg-tint); }
.problems .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.problem-card{ background:#ffffff; border:1px solid var(--gray-line); border-radius:var(--radius-m); padding:30px 26px; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.problem-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -20px rgba(10,15,46,.18);}
.ba-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.ba-tag{ font-family:var(--mono-ui); font-size:10.5px; font-weight:700; letter-spacing:.08em; padding:5px 10px; border-radius:100px; }
.ba-before{ background:rgba(239,68,68,.1); color:var(--error);}
.ba-after{ background:rgba(16,185,129,.12); color:var(--emerald);}
.problem-card h4{ font-size:17px; margin-bottom:8px; }
.problem-card .before-txt{ font-size:14px; color:var(--ink-soft); text-decoration:line-through; text-decoration-color:rgba(239,68,68,.4); margin-bottom:10px;}
.problem-card .after-txt{ font-size:14.5px; color:var(--ink); font-weight:500;}

/* ===== TIMELINE (legacy — kept for reference) ===== */
.timeline-section{ background:var(--navy); position:relative; }
.timeline-track{ position:relative; margin-top:60px; padding-left:8px;}
.timeline-line{ position:absolute; left:29px; top:0; bottom:0; width:2px; background:rgba(255,255,255,0.1);}
.timeline-line-fill{ position:absolute; left:29px; top:0; width:2px; background:linear-gradient(var(--royal-blue),var(--purple)); height:0%; transition:height .1s linear;}
.tl-item{ position:relative; padding-left:74px; padding-bottom:46px; }
.tl-item:last-child{ padding-bottom:0;}
.tl-dot{ position:absolute; left:16px; top:2px; width:28px;height:28px; border-radius:50%; background:var(--navy-raise); border:2px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-family:var(--mono-ui); font-weight:700; font-size:11px; color:var(--paper-ink-faint); transition:border-color .4s, background .4s, color .4s; }
.tl-item.in .tl-dot{ border-color:var(--royal-blue); background:var(--royal-blue); color:#fff; box-shadow:0 0 0 6px rgba(26,59,255,.18);}
.tl-item h4{ color:#fff; font-size:17px; margin-bottom:6px;}
.tl-item p{ color:var(--paper-ink-soft); font-size:14.5px; max-width:520px; }
.tl-item .tag-coord{ display:block; margin-bottom:6px; color:#5b7dff;}

/* ===== FEATURES SHOWCASE (CREATIVE HOVER & INTERACTION) ===== */
.features { position: relative; }
.feat-tabs{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px;}
.feat-tab{
  font-family:var(--mono-ui); font-size:13.5px; font-weight:700; padding:11px 22px; border-radius:100px;
  border:1.5px solid rgba(10,15,46,0.12); color:var(--ink-soft); background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px); cursor: pointer;
  transition:all .3s var(--ease); position: relative; overflow: hidden;
}
.feat-tab:hover{
  color:var(--royal-blue); border-color:var(--royal-blue); transform:translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(26,59,255,0.25); background: #fff;
}
.feat-tab.active{
  background:linear-gradient(135deg, var(--navy), #1a2754); color:#fff; border-color:var(--navy);
  box-shadow: 0 10px 24px -6px rgba(10,15,46,0.4); transform:scale(1.04);
}
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feat-card{
  position: relative; background:linear-gradient(145deg, #ffffff, #f4f0fa); border-radius:var(--radius-m);
  padding:26px; border:1px solid rgba(10,15,46,0.08); overflow: hidden;
  box-shadow: 0 8px 24px -10px rgba(10,15,46,0.06);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.feat-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--royal-blue), var(--purple));
  transition: width 0.4s var(--ease);
}
.feat-card:hover{
  transform:translateY(-8px) scale(1.02); background:#ffffff;
  border-color:rgba(26,59,255,0.25);
  box-shadow:0 24px 50px -15px rgba(26,59,255,0.22), 0 0 0 1px rgba(26,59,255,0.15);
}
.feat-card:hover::before { width: 100%; }

.feat-icon{
  width:48px;height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:22px; margin-bottom:16px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.feat-card:hover .feat-icon {
  transform: rotate(8deg) scale(1.16);
  box-shadow: 0 10px 24px -4px rgba(26,59,255,0.3);
}

.feat-card h5{ font-family:var(--display); font-weight:800; font-size:16px; margin-bottom:8px; transition: color 0.3s ease; }
.feat-card:hover h5 { color: var(--royal-blue); }
.feat-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55;}

/* ===== SUBSCRIPTION CALENDAR (CREATIVE ENGINE) ===== */
.subscription{ background:var(--soft-gray); position: relative; }
.sub-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:60px; align-items:flex-start;}

.calendar-card{
  background:#fff; border-radius:var(--radius-l); padding:30px;
  box-shadow:0 30px 65px -25px rgba(10,15,46,.18); border:1px solid var(--gray-line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.calendar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 45px 80px -25px rgba(10,15,46,0.28), 0 0 0 2px rgba(26,59,255,0.12);
}

.cal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; border-bottom:1px solid rgba(10,15,46,0.06); padding-bottom:14px;}
.cal-head h5{ font-family:var(--display); font-weight:800; font-size:16px; color:var(--ink);}
.cal-active-badge { font-family:var(--mono-ui); font-size:11px; font-weight:700; color:var(--royal-blue); background:rgba(26,59,255,0.1); padding:4px 12px; border-radius:100px; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.cal-day-lbl{ font-family:var(--mono-ui); font-size:11px; color:var(--ink-soft); text-align:center; padding-bottom:8px; font-weight:700;}

.cal-cell{
  aspect-ratio:1; border-radius:10px; background:var(--soft-gray); position:relative;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono-ui);
  font-size:12px; font-weight:600; color:var(--ink-soft);
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer;
}
.cal-cell:hover {
  transform: scale(1.25) translateY(-3px); z-index: 10;
  background: var(--royal-blue); color: #fff;
  box-shadow: 0 10px 22px rgba(26,59,255,0.5); border-radius: 12px;
}

.cal-cell.active{ background:var(--royal-blue-soft); color:var(--royal-blue); font-weight:800;}
.cal-cell.active::after{ content:""; position:absolute; bottom:5px; width:5px;height:5px;border-radius:50%; background:var(--royal-blue); animation: pulseDot 1.8s infinite;}
.cal-cell.today{ outline:2px solid var(--royal-blue); outline-offset:-2px; background: rgba(26,59,255,0.06); font-weight:800; }

@keyframes pulseDot { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.8); opacity:0.5; } }

/* Subscription Feature Bullet Animation */
.sub-feature-item {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 10px 14px;
  border-radius: 12px; transition: background 0.3s, transform 0.3s;
}
.sub-feature-item:hover { background: rgba(26,59,255,0.06); transform: translateX(6px); }
.sub-check-badge {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--emerald);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(16,185,129,0.35); transition: transform 0.3s;
}
.sub-feature-item:hover .sub-check-badge { transform: scale(1.2) rotate(10deg); }

/* ===== DISPATCH ===== */
.dispatch{ background:var(--navy); }
.dispatch-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
.route-map{ position:relative; background:var(--navy-raise); border-radius:var(--radius-l); border:1px solid var(--navy-line); padding:24px; aspect-ratio:4/3;}

/* ===== WAREHOUSE COMMAND CONSOLE ===== */
.warehouse{ background:var(--soft-gray); position: relative; overflow: hidden; }
.wh-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:48px; align-items:center;}

.wh-zone-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; margin-bottom: 24px; }
.wh-chip {
  padding: 7px 16px; border-radius: 100px; font-family: var(--mono-ui); font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(10,15,46,0.12); color: var(--ink-soft);
  cursor: pointer; transition: all 0.25s var(--ease);
}
.wh-chip:hover { background: #fff; color: var(--royal-blue); border-color: var(--royal-blue); transform: translateY(-2px); }
.wh-chip.active { background: var(--royal-blue); color: #fff; border-color: var(--royal-blue); box-shadow: 0 6px 16px rgba(26,59,255,0.35); }

.wh-feature-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.wh-feat-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(10,15,46,0.06);
  transition: all 0.3s var(--ease);
}
.wh-feat-item:hover { background: #fff; border-color: rgba(26,59,255,0.2); transform: translateX(6px); box-shadow: 0 8px 20px rgba(10,15,46,0.06); }
.wh-feat-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(26,59,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.wh-feat-item strong { display: block; font-family: var(--display); font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.wh-feat-item p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.45; }

.wh-console-frame {
  position: relative; background: linear-gradient(160deg, #090e2b, #121a42); border-radius: var(--radius-l);
  border: 1px solid rgba(255,255,255,0.14); padding: 24px; box-shadow: 0 35px 70px -20px rgba(10,15,46,0.5);
  overflow: hidden;
}
.wh-console-head {
  display: flex; justify-content: space-between; align-items: center; font-family: var(--mono-ui);
  font-size: 11px; letter-spacing: 0.1em; color: #8fa4ff; text-transform: uppercase; margin-bottom: 14px;
}
.wh-drone-beacon { display: inline-flex; align-items: center; gap: 6px; background: rgba(16,185,129,0.15); color: #10b981; padding: 4px 10px; border-radius: 100px; font-weight: 700; border: 1px solid rgba(16,185,129,0.3); }
.wh-beacon-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: blink 1.2s infinite; }

/* Laser Scanner Beam */
@keyframes laserScan {
  0% { top: 10%; opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { top: 90%; opacity: 0; }
}
.wh-laser-beam {
  position: absolute; left: 5%; right: 5%; height: 2px;
  background: linear-gradient(90deg, transparent, #10b981, #3b82f6, transparent);
  box-shadow: 0 0 14px 3px #10b981; pointer-events: none; z-index: 8;
  animation: laserScan 4s ease-in-out infinite alternate;
}

.wh-iso-bin { cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.wh-iso-bin:hover { transform: translateY(-8px) scale(1.1); filter: drop-shadow(0 12px 14px rgba(26,59,255,0.6)); }

.wh-live-card {
  position: absolute; bottom: 20px; right: 20px; z-index: 10;
  background: rgba(10,15,46,0.92); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px; padding: 14px 18px; min-width: 180px; box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  transition: all 0.3s var(--ease);
}
.wh-card-tag { font-family: var(--mono-ui); font-size: 10px; color: #8fa4ff; font-weight: 700; letter-spacing: 0.1em; display: block; margin-bottom: 2px; }
.wh-card-val { font-family: var(--display); font-size: 20px; font-weight: 800; color: #fff; line-height: 1.1; }
.wh-card-sub { font-family: var(--mono-ui); font-size: 11px; color: #10b981; margin-top: 4px; font-weight: 600; }

/* ===== CALCULATOR ===== */
.calc-section{ background:var(--bg-tint); }
.calc-card{ background:var(--navy); border-radius:var(--radius-l); padding:40px; display:grid; grid-template-columns:1fr 1.05fr; gap:40px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.12); box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);}
.calc-card::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(139,92,246,.25), transparent 55%); pointer-events:none;}
.calc-inputs{ position:relative; z-index:1;}
.calc-panel-head { margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 12px; }
.calc-panel-tag { font-family: var(--mono-ui); font-size: 11px; color: #8fa4ff; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.calc-presets { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.preset-label { font-family: var(--mono-ui); font-size: 10.5px; color: var(--paper-ink-faint); font-weight: 700; }
.preset-chip { padding: 5px 12px; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--paper-ink-soft); font-size: 12px; font-weight: 600; font-family: var(--mono-ui); cursor: pointer; transition: all 0.2s; }
.preset-chip:hover, .preset-chip.active { background: var(--royal-blue); color: #fff; border-color: var(--royal-blue); }

.calc-field{ margin-bottom:20px; }
.field-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.field-header label{ font-family:var(--mono-ui); font-size:12px; color:var(--paper-ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:0; display:block;}
.field-val-badge { font-family: var(--mono-ui); font-size: 12px; font-weight: 700; color: #10b981; background: rgba(16,185,129,0.12); padding: 2px 8px; border-radius: 6px; }

.slider-input-group { display: flex; align-items: center; gap: 12px; }
.calc-slider { flex: 1; accent-color: var(--royal-blue); height: 6px; border-radius: 4px; cursor: pointer; }
.slider-input-group input[type="number"] { width: 90px; text-align: center; padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-family: var(--mono-ui); font-weight: 700; font-size: 14px; }
.slider-input-group input[type="number"]:focus{ border-color:var(--royal-blue); background:rgba(255,255,255,.14); }

.calc-output{ position:relative; z-index:1; background:linear-gradient(145deg, rgba(20,29,54,0.95), rgba(10,15,35,0.98)); border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:28px; display:flex; flex-direction:column; justify-content:space-between;}
.output-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.output-tag { font-family: var(--mono-ui); font-size: 10.5px; color: #8fa4ff; font-weight: 700; letter-spacing: 0.1em; }
.deficit-status-pill { padding: 4px 12px; border-radius: 100px; font-family: var(--mono-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.deficit-status-pill.safe { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.deficit-status-pill.critical { background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(239,68,68,0.4); animation: pulseAlert 1.5s infinite; }

@keyframes pulseAlert { 0%, 100%{ opacity: 1; } 50%{ opacity: 0.6; } }

.deficit-hero-box { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; margin-bottom: 20px; text-align: center; }
.deficit-lbl{ font-family:var(--mono-ui); font-size:11px; color:var(--paper-ink-soft); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px;}
.deficit-num-wrap { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.deficit-num{ font-family:var(--display); font-weight:800; font-size:46px; color:#fff; line-height:1;}
.deficit-num.critical { color: #f87171; text-shadow: 0 0 20px rgba(248,113,113,0.4); }
.deficit-unit { font-family: var(--mono-ui); font-size: 14px; font-weight: 700; color: var(--paper-ink-soft); }
.deficit-sub { font-size: 12px; color: var(--paper-ink-faint); margin-top: 6px; font-family: var(--mono-ui); }

.calc-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.metric-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; }
.m-lbl { display: block; font-size: 10.5px; font-family: var(--mono-ui); color: var(--paper-ink-soft); margin-bottom: 2px; }
.m-val { font-family: var(--mono-ui); font-size: 14px; font-weight: 700; color: #fff; }

.depletion-bar-wrap { margin-bottom: 20px; }
.depletion-bar-labels { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--mono-ui); color: var(--paper-ink-soft); margin-bottom: 6px; }
.depletion-track { height: 8px; background: rgba(255,255,255,0.1); border-radius: 100px; position: relative; overflow: hidden; }
.depletion-fill { height: 100%; background: linear-gradient(90deg, #10b981, #3b82f6); border-radius: 100px; transition: width 0.3s ease; }
.depletion-fill.critical { background: linear-gradient(90deg, #f87171, #ef4444); }
.depletion-threshold-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }

.po-lines-wrap { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.po-line{ display:flex; align-items:center; gap:10px; opacity:0; transform:translateX(-10px); transition:all .5s var(--ease);}
.po-line.show{ opacity:1; transform:translateX(0);}
.po-line .chk{ width:20px;height:20px;border-radius:50%; background:var(--emerald); display:flex;align-items:center;justify-content:center; font-size:11px; color:#fff; flex:none;}
.po-line span{ font-family:var(--mono-ui); font-size:12.5px; color:var(--paper-ink-soft);}

/* ===== VENDOR ===== */
.vendor{ background:var(--soft-gray); }
.vendor-flow{ display:flex; align-items:center; justify-content:space-between; margin-top:60px; flex-wrap:wrap; gap:20px; position:relative;}
.vf-node{ background:#fff; border-radius:16px; padding:22px 20px; text-align:center; width:180px; box-shadow:0 20px 40px -24px rgba(10,15,46,.2); position:relative; z-index:2;}
.vf-node .vf-icon{ width:40px;height:40px; border-radius:10px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;}
.vf-node h5{ font-size:14px; font-family:var(--display); font-weight:700;}
.vf-node p{ font-size:12px; color:var(--ink-soft); margin-top:4px;}
.vf-arrow{ flex:1; min-width:30px; height:2px; background:repeating-linear-gradient(90deg, var(--royal-blue) 0 8px, transparent 8px 14px); position:relative;}
.vf-arrow::after{ content:"›"; position:absolute; right:-4px; top:50%; transform:translateY(-50%); color:var(--royal-blue); font-size:20px; font-weight:700;}
@media(max-width:900px){ .vf-arrow{ width:2px; min-width:2px; height:30px; background:repeating-linear-gradient(180deg, var(--royal-blue) 0 8px, transparent 8px 14px);} .vendor-flow{ flex-direction:column;} }

/* ===== BILLING ===== */
.billing{ background:var(--bg-tint); }
.billing-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center;}
.invoice-card{ background:var(--soft-gray); border-radius:var(--radius-l); padding:30px; border:1px solid var(--gray-line);}
.invoice-head{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--gray-line); padding-bottom:16px; margin-bottom:16px;}
.invoice-head h5{ font-family:var(--display); font-size:16px;}
.invoice-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; color:var(--ink-soft); border-bottom:1px solid var(--gray-line);}
.invoice-row b{ color:var(--ink);}
.invoice-total{ display:flex; justify-content:space-between; margin-top:14px; font-family:var(--display); font-weight:800; font-size:18px;}
.gst-badge{ font-family:var(--mono-ui); font-size:10.5px; font-weight:700; background:var(--royal-blue-soft); color:var(--royal-blue); padding:4px 9px; border-radius:6px;}

/* ===== ANALYTICS ===== */
.analytics{ background:var(--navy); }
.dash-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px;}
.dash-card{ background:var(--navy-raise); border:1px solid var(--navy-line); border-radius:var(--radius-m); padding:22px;}
.dash-card h5{ font-family:var(--mono-ui); font-size:12px; color:var(--paper-ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
.dash-bars{ display:flex; align-items:flex-end; gap:6px; height:90px;}
.dash-bars div{ flex:1; background:linear-gradient(180deg, var(--royal-blue), var(--indigo)); border-radius:4px 4px 0 0; transform:scaleY(0); transform-origin:bottom; transition:transform 1s var(--ease);}
.dash-card.in .dash-bars div{ transform:scaleY(1); }
.dash-num{ font-family:var(--display); font-weight:800; font-size:28px; color:#fff; margin-top:12px;}
.dash-delta{ font-family:var(--mono-ui); font-size:12px; color:var(--emerald); margin-top:2px;}

/* ===== INDUSTRIES ===== */
.industries{ background:var(--soft-gray); }
.ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.ind-card{ background:#fff; border-radius:var(--radius-m); padding:26px 22px; border:1px solid var(--gray-line); transition:all .4s var(--ease); position:relative; overflow:hidden;}
.ind-card:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 24px 50px -20px rgba(10,15,46,.22);}
.ind-card .ind-icon{ font-size:26px; margin-bottom:14px;}
.ind-card h5{ font-family:var(--display); font-size:15.5px; margin-bottom:6px;}
.ind-card p{ font-size:13px; color:var(--ink-soft); line-height:1.5;}

/* ===== ROLES ===== */
.roles{ background:var(--bg-tint); }
.roles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.role-list{ display:flex; flex-direction:column; gap:14px; margin-top:26px;}
.role-chip{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px; background:var(--soft-gray); cursor:pointer; transition:background .3s;}
.role-chip.active{ background:var(--navy); }
.role-chip.active h5, .role-chip.active p{ color:#fff; }
.role-chip .r-dot{ width:10px;height:10px;border-radius:50%; flex:none;}
.role-chip h5{ font-family:var(--display); font-size:14.5px;}
.role-chip p{ font-size:12.5px; color:var(--ink-soft);}

/* ===== TECH STACK ===== */
.techstack{ background:var(--navy); position:relative; overflow:hidden;}
.tech-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:50px;}
.tech-card{ aspect-ratio:1; background:var(--navy-raise); border:1px solid var(--navy-line); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; animation:floaty 6s ease-in-out infinite;}
.tech-card span{ font-family:var(--mono-ui); font-size:11px; color:var(--paper-ink-soft); font-weight:600;}

/* ===== WHY US ===== */
.whyus{ background:var(--soft-gray); perspective:1200px;}
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.why-card{ background:#fff; border-radius:var(--radius-m); padding:30px 26px; transition:transform .5s var(--ease), box-shadow .5s var(--ease); transform-style:preserve-3d; border:1px solid var(--gray-line);}
.why-card:hover{ transform: rotateX(4deg) rotateY(-4deg) translateY(-6px); box-shadow:0 30px 60px -20px rgba(10,15,46,.25);}
.why-card .why-num{ font-family:var(--mono-ui); font-size:12px; color:var(--royal-blue); font-weight:700; letter-spacing:.06em;}
.why-card h4{ font-size:19px; margin:12px 0 8px;}
.why-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6;}

/* ===== TESTIMONIALS ===== */
.testimonials{ background:var(--bg-tint); overflow:hidden;}
.testi-track{ display:flex; gap:24px; width:max-content; animation:slide-testi 40s linear infinite;}
.testimonials:hover .testi-track{ animation-play-state:paused;}
@keyframes slide-testi{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.testi-card{ width:380px; background:var(--soft-gray); border-radius:var(--radius-m); padding:28px; flex:none;}
.testi-quote{ font-size:15px; color:var(--ink); line-height:1.65; margin-bottom:20px;}
.testi-person{ display:flex; align-items:center; gap:12px;}
.testi-avatar{ width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,var(--royal-blue),var(--purple)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:14px;}
.testi-person h5{ font-size:13.5px; font-family:var(--display);}
.testi-person span{ font-size:12px; color:var(--ink-soft);}

/* ===== FAQ ===== */
.faq {
  background: linear-gradient(180deg, var(--soft-gray) 0%, rgba(244, 239, 250, 0.4) 100%);
  position: relative;
  overflow: hidden;
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 992px) {
  .faq-layout {
    grid-template-columns: 1fr 1.6fr;
    gap: 80px;
  }
  
  .faq-info {
    position: sticky;
    top: 100px;
  }
}

.faq-info h2 {
  font-size: clamp(32px, 3.8vw, 44px);
  line-height: 1.15;
  margin-top: 16px;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}

.faq-info-sub {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 32px;
}

.faq-cta-card {
  background: var(--surface);
  border: 1px solid rgba(10, 15, 46, 0.05);
  border-radius: var(--radius-m);
  padding: 24px;
  box-shadow: 0 10px 30px -10px rgba(10, 15, 46, 0.04);
}

.faq-cta-card h5 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}

.faq-cta-card p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 16px;
}

.faq-accordion-wrap {
  width: 100%;
}

.faq-list {
  width: 100%;
}

.faq-item {
  background: var(--surface);
  border: 1px solid rgba(10, 15, 46, 0.06);
  border-radius: var(--radius-m);
  margin-bottom: 16px;
  box-shadow: 0 4px 20px -2px rgba(10, 15, 46, 0.01);
  transition: all 0.4s var(--ease);
  overflow: hidden;
}

.faq-item:hover {
  border-color: rgba(26, 59, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(10, 15, 46, 0.04);
}

.faq-item.open {
  border-color: rgba(26, 59, 255, 0.3);
  box-shadow: 0 20px 40px -15px rgba(26, 59, 255, 0.06);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  transition: color 0.3s;
}

.faq-item.open .faq-q {
  color: var(--royal-blue);
}

.faq-q .plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--soft-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--royal-blue);
  transition: all 0.3s var(--ease);
  flex: none;
  margin-left: 20px;
}

.faq-item.open .faq-q .plus {
  background: var(--royal-blue);
  color: var(--white);
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}

.faq-a p {
  padding: 0 28px 24px 28px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.faq-footer-note {
  text-align: center;
  margin-top: 32px;
}

.faq-footer-note p {
  font-size: 14px;
  color: var(--ink-soft);
}

.faq-footer-note a {
  color: var(--royal-blue);
  font-weight: 600;
  transition: color 0.2s;
}

.faq-footer-note a:hover {
  color: var(--indigo);
  text-decoration: underline;
}

/* ===== CONTACT ===== */
.contact{ background:var(--navy); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.form-field{ margin-bottom:18px;}
.form-field label{ font-family:var(--mono-ui); font-size:12px; color:var(--paper-ink-soft); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; display:block;}
.form-field input, .form-field select, .form-field textarea{ width:100%; padding:13px 16px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:14.5px;}
.form-field select option{ background: var(--navy-deep); color: #ffffff; padding: 12px; font-size: 14.5px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.contact-options{ display:flex; flex-direction:column; gap:16px; margin-top:30px;}
.contact-opt{ display:flex; gap:14px; align-items:center; padding:16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);}
.contact-opt .co-icon{ width:38px;height:38px; border-radius:10px; background:var(--royal-blue-soft); display:flex; align-items:center; justify-content:center; flex:none;}
.contact-opt h5{ color:#fff; font-size:14px; font-family:var(--display);}
.contact-opt p{ color:var(--paper-ink-soft); font-size:12.5px;}
.map-frame{ margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); aspect-ratio:16/9; background:var(--navy-raise); position:relative;}

/* ===== VISITOR GEOLOCATION BANNER & GLOBAL OFFICES ===== */
.visitor-banner{
  background: rgba(26,59,255,0.08); border: 1px solid rgba(26,59,255,0.25);
  backdrop-filter: blur(12px); border-radius: var(--radius-m); padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-bottom: 40px; flex-wrap: wrap;
}
.vb-left{ display: flex; align-items: center; gap: 14px; }
.pulse-dot{ width: 12px; height: 12px; border-radius: 50%; background: #10b981; box-shadow: 0 0 12px #10b981; position: relative; flex: none; }
.pulse-dot::after{ content:''; position: absolute; top:-4px; left:-4px; right:-4px; bottom:-4px; border-radius: 50%; border: 2px solid #10b981; animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping{ 75%, 100%{ transform: scale(1.8); opacity: 0; } }
#vbTitle{ color: #fff; font-size: 15px; font-weight: 700; font-family: var(--display); }
#vbDesc{ color: var(--paper-ink-soft); font-size: 13px; font-family: var(--mono-ui); margin-top: 2px; }
.btn-sm-ghost{ padding: 8px 16px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 12.5px; font-weight: 600; font-family: var(--mono-ui); transition: all 0.25s; }
.btn-sm-ghost:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.office-tabs{ display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.office-tab{ padding: 9px 16px; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--paper-ink-soft); font-size: 13px; font-weight: 600; font-family: var(--mono-ui); transition: all 0.25s; }
.office-tab:hover, .office-tab.active{ background: var(--royal-blue); border-color: var(--royal-blue); color: #fff; box-shadow: 0 4px 14px rgba(26,59,255,0.4); }
.office-details-box{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; margin-bottom: 16px; transition: all 0.3s; }
.od-badge{ display: inline-block; padding: 4px 10px; border-radius: 6px; background: rgba(16,185,129,0.15); color: #10b981; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px; }
.od-company{ color: #fff; font-size: 16.5px; font-weight: 800; font-family: var(--display); margin-bottom: 6px; }
.od-address{ color: var(--paper-ink-soft); font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.od-meta{ display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #8fa4ff; font-family: var(--mono-ui); }
.od-distance{ display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; border-radius: 8px; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #10b981; font-family: var(--mono-ui); font-size: 13px; font-weight: 700; width: 100%; }
.global-touch-bar{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media(max-width:600px){ .global-touch-bar{ grid-template-columns: 1fr; } }
.gt-item{ display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 12px 14px; border-radius: 12px; }
.gt-icon{ font-size: 18px; }
.gt-label{ display: block; font-size: 10px; font-family: var(--mono-ui); letter-spacing: 0.1em; color: var(--paper-ink-faint); }
.gt-val{ color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.gt-val:hover{ color: #8fa4ff; }

/* ===== TERMS & CONDITIONS SECTION ===== */
.tnc-section{ background: var(--bg-tint); }
.tnc-card{ background: #ffffff; border: 1px solid var(--gray-line); border-radius: var(--radius-l); padding: 56px 60px; box-shadow: 0 12px 48px -12px rgba(10,15,46,.08); max-width: 960px; margin: 0 auto; }
@media(max-width:700px){ .tnc-card{ padding: 32px 22px; } }
.tnc-badge{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; background: rgba(26,59,255,.08); border: 1px solid rgba(26,59,255,.18); border-radius: 100px; color: var(--royal-blue); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
.tnc-last-updated{ display: block; font-size: 12.5px; color: var(--ink-soft); font-family: var(--mono-ui); margin-bottom: 32px; margin-top: -8px; }
.tnc-toc{ background: var(--soft-gray); border-radius: var(--radius-m); padding: 22px 28px; margin-bottom: 40px; }
.tnc-toc h4{ font-size: 13px; color: var(--ink); font-family: var(--mono-ui); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.tnc-toc ol{ padding-left: 20px; }
.tnc-toc ol li{ margin-bottom: 8px; }
.tnc-toc ol li a{ color: var(--royal-blue); font-size: 14px; font-weight: 600; text-decoration: none; }
.tnc-toc ol li a:hover{ text-decoration: underline; }
.tnc-art{ border-top: 1px solid var(--gray-line); padding-top: 36px; margin-top: 36px; }
.tnc-art:first-of-type{ border-top: none; padding-top: 0; margin-top: 0; }
.tnc-art-num{ font-family: var(--mono-ui); font-size: 11px; letter-spacing: .1em; color: var(--royal-blue); font-weight: 700; text-transform: uppercase; margin-bottom: 6px; display: block; }
.tnc-art h3{ font-size: 20px; color: var(--ink); margin-bottom: 14px; line-height: 1.2; }
.tnc-art p{ font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.tnc-art p:last-child{ margin-bottom: 0; }
.tnc-art ul, .tnc-art ol{ padding-left: 22px; margin-bottom: 14px; }
.tnc-art ul li, .tnc-art ol li{ font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 7px; }
.tnc-highlight{ background: rgba(26,59,255,.05); border-left: 3px solid var(--royal-blue); border-radius: 0 10px 10px 0; padding: 14px 20px; margin: 18px 0; font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.6; }
.tnc-sms-box{ background: linear-gradient(135deg, rgba(26,59,255,.06), rgba(139,92,246,.06)); border: 1px solid rgba(26,59,255,.15); border-radius: var(--radius-m); padding: 22px 26px; margin: 20px 0; }
.tnc-sms-box .sms-title{ font-family: var(--mono-ui); font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--royal-blue); text-transform: uppercase; margin-bottom: 10px; display: block; }
.tnc-sms-box table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tnc-sms-box table td{ padding: 8px 12px; border-bottom: 1px solid rgba(10,15,46,.07); vertical-align: top; }
.tnc-sms-box table td:first-child{ font-weight: 700; color: var(--ink); white-space: nowrap; width: 36%; }
.tnc-sms-box table td:last-child{ color: var(--ink-soft); }
.tnc-sms-box table tr:last-child td{ border-bottom: none; }
.tnc-keyword-pills{ display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tnc-pill{ background: var(--navy); color: #fff; font-family: var(--mono-ui); font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 5px 14px; border-radius: 100px; }
.tnc-pill.stop{ background: #ef4444; }
.tnc-pill.help{ background: #1a3bff; }
.tnc-contact-box{ background: var(--navy); color: #fff; border-radius: var(--radius-m); padding: 24px 28px; margin-top: 28px; display: flex; align-items: flex-start; gap: 18px; }
.tnc-contact-box .tnc-contact-icon{ font-size: 28px; flex: none; }
.tnc-contact-box h5{ font-size: 15px; font-weight: 800; font-family: var(--display); color: #fff; margin-bottom: 6px; }
.tnc-contact-box p{ font-size: 13.5px; color: var(--paper-ink-soft); margin: 0; line-height: 1.6; }
.tnc-contact-box a{ color: #8fa4ff; text-decoration: underline; }

/* ===== SMS OPT-IN CONSENT IN FORM ===== */
.sms-consent-box{ background: rgba(26,59,255,.05); border: 1px solid rgba(26,59,255,.18); border-radius: 12px; padding: 16px 18px; margin-top: 14px; margin-bottom: 4px; }
.sms-consent-label{ display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.sms-consent-label input[type="checkbox"]{ margin-top: 3px; flex: none; width: 17px; height: 17px; cursor: pointer; }
.sms-consent-text{ font-size: 12.5px; color: var(--paper-ink-soft); line-height: 1.55; }
.sms-consent-text a{ color: #8fa4ff; text-decoration: underline; }
.sms-microcopy{ font-size: 11px; color: var(--paper-ink-faint); margin-top: 8px; line-height: 1.5; }

/* ===== FOOTER ===== */
.footer{ background:var(--navy-deep); padding:80px 0 30px; border-top:1px solid var(--navy-line);}
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:40px; padding-bottom:60px;}
.footer-brand p{ color:var(--paper-ink-faint); font-size:14px; margin-top:14px; max-width:280px; line-height:1.6;}
.footer-col h5{ font-family:var(--mono-ui); font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;}
.footer-col a{ display:block; color:var(--paper-ink-faint); font-size:14px; margin-bottom:12px; transition:color .25s;}
.footer-col a:hover{ color:#fff;}
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:30px; border-top:1px solid var(--navy-line); flex-wrap:wrap; gap:14px;}
.footer-bottom p{ color:var(--paper-ink-faint); font-size:13px;}
.footer-social{ display:flex; gap:12px;}
.footer-social a{ width:36px;height:36px; border-radius:50%; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.1);}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media(max-width:960px){
  .hero-inner, .eco-grid, .dispatch-grid, .wh-grid, .sub-grid, .billing-grid, .roles-grid, .contact-grid{ grid-template-columns:1fr; }
  .problems .cards, .feat-grid, .ind-grid, .why-grid, .dash-grid, .tech-grid{ grid-template-columns:repeat(2,1fr);}
  .footer-top{ grid-template-columns:repeat(2,1fr);}
  .calc-card{ grid-template-columns:1fr;}
}

/* ===== PLANS & PRICING SECTION ===== */
.pricing-section{ background: var(--navy-deep); border-top: 1px solid var(--navy-line); }
.pricing-controls{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-bottom: 48px; }
.currency-toggle, .cycle-toggle{ display: flex; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); padding: 5px; border-radius: 100px; backdrop-filter: blur(10px); box-shadow: 0 8px 24px -6px rgba(0,0,0,0.3); flex-wrap: wrap; justify-content: center; }
.cur-btn, .cycle-btn{ padding: 9px 20px; border-radius: 100px; font-size: 13.5px; font-weight: 700; font-family: var(--mono-ui); color: var(--paper-ink-soft); transition: all 0.25s var(--ease); cursor: pointer; border: none; background: transparent; }
.cur-btn:hover, .cycle-btn:hover{ color: #fff; background: rgba(255,255,255,0.08); }
.cur-btn.active, .cycle-btn.active{ background: linear-gradient(135deg, var(--royal-blue), #3b82f6); color: #fff; box-shadow: 0 4px 16px rgba(26,59,255,0.5); }
.pricing-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 60px; }
@media(max-width: 1100px){ .pricing-grid{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 650px){ .pricing-grid{ grid-template-columns: 1fr; } }
.price-card{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 30px 24px; display: flex; flex-direction: column; position: relative; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.price-card:hover{ transform: translateY(-6px); border-color: rgba(26,59,255,0.5); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5); }
.price-card.featured{ background: linear-gradient(180deg, rgba(26,59,255,0.15) 0%, rgba(10,15,46,0.5) 100%); border: 2px solid var(--royal-blue); box-shadow: 0 12px 36px -6px rgba(26,59,255,0.35); }
.popular-tag{ position: absolute; top: -13px; right: 20px; background: linear-gradient(135deg, var(--royal-blue), var(--indigo)); color: #fff; font-size: 10.5px; font-weight: 800; font-family: var(--mono-ui); letter-spacing: 0.1em; padding: 4px 12px; border-radius: 100px; text-transform: uppercase; box-shadow: 0 4px 12px rgba(26,59,255,0.5); }
.pc-head{ margin-bottom: 20px; }
.pc-emoji{ font-size: 32px; display: block; margin-bottom: 8px; }
.pc-name{ font-size: 22px; font-weight: 800; color: #fff; font-family: var(--display); }
.pc-sub{ font-size: 12px; font-weight: 700; color: #8fa4ff; font-family: var(--mono-ui); text-transform: uppercase; letter-spacing: 0.08em; }
.pc-segment{ font-size: 13px; color: var(--paper-ink-soft); margin-top: 4px; }
.pc-price-wrap{ margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px dashed rgba(255,255,255,0.12); }
.pc-amount{ font-size: 32px; font-weight: 800; color: #fff; font-family: var(--display); line-height: 1; }
.pc-period{ font-size: 13px; color: var(--paper-ink-soft); font-family: var(--mono-ui); margin-top: 6px; }
.pc-features{ margin-bottom: 24px; flex: 1; list-style: none; }
.pc-features li{ display: flex; gap: 10px; font-size: 13.5px; color: var(--paper-ink-soft); margin-bottom: 12px; line-height: 1.4; }
.pc-features li strong{ color: #fff; }
.pc-chk{ color: #10b981; flex: none; font-weight: 700; }
.pc-usage-box{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; font-size: 12px; color: var(--paper-ink-soft); margin-bottom: 24px; }
.pc-usage-title{ font-size: 10px; font-family: var(--mono-ui); letter-spacing: 0.08em; color: #8fa4ff; text-transform: uppercase; margin-bottom: 4px; }

/* ===== OVERVIEW TABLE & CREDIT RATES ===== */
.pricing-overview-box{ background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 36px; margin-bottom: 60px; }
.overview-table-wrap{ overflow-x: auto; margin-top: 24px; }
.overview-table{ width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; color: #fff; }
.overview-table th{ background: rgba(255,255,255,0.05); padding: 14px 18px; font-family: var(--mono-ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #8fa4ff; border-bottom: 1px solid rgba(255,255,255,0.1); }
.overview-table td{ padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--paper-ink-soft); }
.overview-table tr:hover td{ background: rgba(255,255,255,0.03); color: #fff; }
.rates-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
@media(max-width: 900px){ .rates-grid{ grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 500px){ .rates-grid{ grid-template-columns: 1fr; } }
.rate-card{ background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 14px; }
.rate-icon{ width: 36px; height: 36px; border-radius: 10px; background: rgba(26,59,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.rate-name{ font-size: 13px; color: #fff; font-weight: 600; }
.rate-cost{ font-size: 12px; color: #10b981; font-family: var(--mono-ui); margin-top: 2px; }

/* ===== ABOUT US SECTION STYLES ===== */
.about-section {
  background: var(--navy);
  border-top: 1px solid var(--navy-line);
  position: relative;
  overflow: hidden;
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 70px;
}
@media(max-width: 960px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-director-card {
  background: linear-gradient(135deg, rgba(17,24,52,0.9) 0%, rgba(6,9,21,0.95) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-l);
  padding: 32px;
  position: relative;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.director-img-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding: 6px;
  background: linear-gradient(135deg, var(--royal-blue), var(--purple), var(--orange));
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(26,59,255,0.3);
}
.director-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--navy);
}
.experience-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--royal-blue);
  color: #fff;
  font-family: var(--mono-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(26,59,255,0.5);
  border: 1px solid rgba(255,255,255,0.3);
}
.director-name {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  font-family: var(--display);
  margin-top: 8px;
}
.director-title {
  font-size: 13px;
  font-family: var(--mono-ui);
  color: #8fa4ff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
  margin-bottom: 16px;
}
.director-bio {
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper-ink-soft);
  margin-bottom: 20px;
}
.director-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.director-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11.5px;
  color: #c9d2ff;
  font-family: var(--mono-ui);
}

.pillars-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
@media(max-width: 1024px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 600px) {
  .pillars-grid { grid-template-columns: 1fr; }
}
.pillar-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 28px 24px;
  transition: all 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}
.pillar-card:hover {
  transform: translateY(-6px);
  border-color: rgba(139,92,246,0.4);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.4);
}
.pillar-num {
  font-family: var(--mono-ui);
  font-size: 12px;
  font-weight: 800;
  color: #8fa4ff;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}
.pillar-icon {
  font-size: 28px;
  margin-bottom: 14px;
  display: inline-block;
}
.pillar-card h4 {
  font-size: 19px;
  color: #fff;
  margin-bottom: 12px;
  font-family: var(--display);
}
.pillar-card p {
  font-size: 14px;
  color: var(--paper-ink-soft);
  line-height: 1.6;
}

.about-cta-box {
  background: linear-gradient(135deg, rgba(26,59,255,0.18) 0%, rgba(139,92,246,0.18) 100%);
  border: 1px solid rgba(139,164,255,0.25);
  border-radius: 24px;
  padding: 40px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.about-cta-text h3 {
  font-size: 26px;
  color: #fff;
  margin-bottom: 8px;
}
.about-cta-text p {
  font-size: 15px;
  color: var(--paper-ink-soft);
}
.about-cta-contacts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* ===== TERMS AND CONDITIONS SECTION STYLES ===== */
.terms-section {
  background: var(--navy-deep);
  border-top: 1px solid var(--navy-line);
}
.legal-card-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
@media(max-width: 768px) {
  .legal-card-wrap { padding: 24px; }
}
.legal-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
  gap: 16px;
}
.legal-badge {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  color: #10b981;
  font-family: var(--mono-ui);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.legal-last-updated {
  font-family: var(--mono-ui);
  font-size: 12.5px;
  color: var(--paper-ink-faint);
}
.legal-toc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
@media(max-width: 900px) {
  .legal-toc { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 550px) {
  .legal-toc { grid-template-columns: 1fr; }
}
.toc-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  color: #c9d2ff;
  font-family: var(--mono-ui);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-item:hover {
  background: rgba(26,59,255,0.2);
  border-color: var(--royal-blue);
  color: #fff;
}
.legal-article {
  margin-bottom: 36px;
  padding-bottom: 32px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.legal-article:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.legal-article h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
}
.legal-article h3 .clause-num {
  color: #8fa4ff;
  font-family: var(--mono-ui);
  font-size: 16px;
}
.legal-article p {
  font-size: 14.5px;
  color: var(--paper-ink-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}
.legal-article ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 14px;
  color: var(--paper-ink-soft);
}
.legal-article ul li {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 8px;
}
.legal-article ul li strong {
  color: #fff;
}
.legal-support-card {
  background: rgba(26,59,255,0.08);
  border: 1px solid rgba(26,59,255,0.25);
  border-radius: 16px;
  padding: 24px;
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ===== WHY US SECTION STYLES ===== */
:root {
  --bg-deep:#0B1220;
  --bg-panel:#141D30;
  --bg-panel-2:#1B2740;
  --line-why:#2A3652;
  --amber:#F5A623;
  --amber-dim:#8A6420;
  --teal:#2DD4BF;
  --text-hi:#E9EEF6;
  --text-mid:#AEB9CC;
  --text-low:#6D7A93;
  --danger:#E2604C;
  --font-display-why:'Manrope', sans-serif;
  --font-mono-why:'IBM Plex Mono', monospace;
}

.why-us-section {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-why);
  color: var(--text-hi);
  padding: 100px 0;
  position: relative;
}

.why-us-hero {
  padding-bottom: 60px;
  position: relative;
}
.why-us-hero h2 {
  font-family: var(--font-display-why);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}
.why-us-hero h2 .accent { color: var(--amber); }
.why-us-sub {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 680px;
  margin-bottom: 40px;
}

/* Flow pipeline */
.flow {
  position: relative;
  padding: 36px 0 8px;
}
.flow-label {
  font-family: var(--font-mono-why);
  font-size: 11.5px;
  color: var(--text-low);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.flow-track { position: relative; width: 100%; height: 150px; }
.flow-track svg { width: 100%; height: 100%; overflow: visible; display: block; }
.flow-path { fill: none; stroke: var(--line-why); stroke-width: 2; }
.flow-path-glow {
  fill: none; stroke: var(--amber); stroke-width: 2;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: drawline 2.6s ease forwards .3s;
}
@keyframes drawline { to { stroke-dashoffset: 0; } }
.flow-node { cursor: pointer; }
.flow-node circle.ring {
  fill: var(--bg-panel); stroke: var(--line-why); stroke-width: 2;
  transition: stroke .3s, fill .3s;
}
.flow-node.active circle.ring { stroke: var(--amber); fill: #26190A; }
.flow-node text {
  font-family: var(--font-mono-why); font-size: 10.5px; fill: var(--text-low);
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: fill .3s;
}
.flow-node.active text { fill: var(--amber); }
.flow-node .num {
  font-family: var(--font-mono-why); font-size: 13px; fill: var(--text-mid); font-weight: 500;
  transition: fill .3s;
}
.flow-node.active .num { fill: var(--text-hi); }
.traveler {
  fill: var(--amber);
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.9));
  offset-path: path("M20,75 C 160,10 280,140 420,75 S 700,10 840,75 S 1120,140 1160,75");
  animation: travel 7s linear infinite;
}
@keyframes travel {
  0% { offset-distance: 0%; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Stage & Compare Panels */
.stage-why {
  padding: 80px 0;
  border-top: 1px solid var(--line-why);
  position: relative;
}
.stage-head-why {
  display: flex; gap: 24px; align-items: baseline; margin-bottom: 40px;
}
.stage-index-why {
  font-family: var(--font-mono-why); font-size: 14px; color: var(--amber);
  padding-top: 6px; flex-shrink: 0; width: 44px;
}
.stage-title-why {
  font-family: var(--font-display-why); font-weight: 600; font-size: clamp(22px, 3vw, 34px); color: #fff;
}
.compare-why {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media(max-width: 820px) { .compare-why { grid-template-columns: 1fr; } }

.panel-why {
  background: var(--bg-panel); border: 1px solid var(--line-why); border-radius: 12px;
  padding: 28px; transition: all 0.3s var(--ease);
}
.panel-why.legacy { border-color: rgba(226,96,76,0.3); }
.panel-why.legacy .tag-why { color: var(--danger); }
.panel-why.solve {
  border-color: rgba(245,166,35,0.35);
  background: linear-gradient(180deg, rgba(245,166,35,0.06), var(--bg-panel) 40%);
}
.panel-why.solve .tag-why { color: var(--amber); }

.tag-why {
  font-family: var(--font-mono-why); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 14px; display: block;
}
.panel-why p.desc-why { color: var(--text-mid); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; }

.feature-list-why { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.feature-list-why li {
  font-size: 14px; line-height: 1.55; color: var(--text-hi);
  padding-left: 20px; position: relative;
}
.feature-list-why li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px;
  background: var(--teal);
}
.feature-list-why li b { color: var(--text-hi); font-weight: 600; }
.feature-list-why li span.desc-inline { color: var(--text-mid); }

/* Table styling for Why Us */
.table-wrap-why {
  border: 1px solid var(--line-why); border-radius: 12px; overflow-x: auto;
  background: var(--bg-panel); margin-top: 24px;
}
.table-why { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-why th {
  font-family: var(--font-mono-why); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; padding: 16px 20px; background: var(--bg-panel-2); color: var(--text-low);
  border-bottom: 1px solid var(--line-why);
}
.table-why th:nth-child(3) { color: var(--amber); }
.table-why td { padding: 18px 20px; border-bottom: 1px solid var(--line-why); color: var(--text-mid); vertical-align: top; }
.table-why td:first-child { color: var(--text-hi); font-weight: 500; width: 22%; }
.table-why td:nth-child(2) { color: var(--danger); opacity: 0.85; width: 34%; }
.table-why td:nth-child(3) { color: var(--text-hi); }
.table-why tr:hover { background: rgba(245,166,35,0.04); }
.table-why tr:last-child td { border-bottom: none; }

/* ==========================================================================
   GLOBAL RESPONSIVE MEDIA QUERIES (DESKTOP, TABLET & MOBILE)
   ========================================================================== */

/* Large Screens (min-width: 1440px) */
@media (min-width: 1440px) {
  .wrap, .nav-inner, .hero-inner, .trust-stats, .dept-eco-inner {
    max-width: 1480px;
  }
}

/* Tablet & Medium Screen (max-width: 1024px) */
@media (max-width: 1024px) {
  .wrap, .nav-inner, .hero-inner, .trust-stats, .dept-eco-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .hero-copy p.lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-proof {
    justify-content: center;
  }
  .dept-eco-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-hero-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .calc-card {
    grid-template-columns: 1fr;
  }
  .roles-grid, .wh-grid, .sub-grid, .dispatch-grid, .billing-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Mobile Screens (max-width: 768px) */
@media (max-width: 768px) {
  .section-pad {
    padding: 60px 0;
  }
  .nav-menu {
    display: none;
  }
  .nav-inner {
    padding: 0 16px;
  }
  .nav-brand-logo {
    height: 34px;
    max-width: 180px;
  }
  .nav .nav-right {
    display: none !important;
  }
  .nav-right {
    gap: 6px !important;
    display: flex;
  }
  .nav-right .btn {
    padding: 7px 12px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }
  .lang-selector-wrap {
    padding: 4px 6px !important;
    border-radius: 6px !important;
  }
  #lang-select {
    font-size: 11px !important;
    padding-right: 8px !important;
    max-width: 50px !important;
    background-size: 6px !important;
  }
  .topbar {
    padding: 14px 20px !important;
  }
  .topbar nav {
    gap: 16px !important;
  }
  .hero {
    padding-top: 100px;
    padding-bottom: 60px;
    min-height: auto;
  }
  .hero-copy h1 {
    font-size: clamp(28px, 7vw, 42px);
  }
  .hero-copy p.lede {
    font-size: 15.5px;
  }
  .hero-proof {
    gap: 18px;
    justify-content: space-around;
  }
  .hero-proof .num {
    font-size: 22px;
  }
  .hero-proof .lbl {
    font-size: 10px;
  }
  .trust-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: center;
  }
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .ind-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tech-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-grid {
    grid-template-columns: 1fr;
  }
  .calc-card {
    padding: 20px;
  }
  .calc-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .global-touch-bar {
    grid-template-columns: 1fr;
  }
  .office-tabs {
    justify-content: center;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

/* Small Mobile Screens (max-width: 580px) */
@media (max-width: 580px) {
  .topbar {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
    position: relative !important;
    align-items: center !important;
    text-align: center !important;
  }
  .topbar nav {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .topbar .nav-brand-logo {
    height: 30px !important;
  }
}

/* Extra Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .wrap, .nav-inner, .hero-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ind-grid {
    grid-template-columns: 1fr;
  }
  .trust-stats {
    grid-template-columns: 1fr 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .hero-ctas .btn {
    width: 100%;
  }
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .calc-card {
    padding: 20px 14px !important;
  }
  .calc-output {
    padding: 18px !important;
  }
  .calc-metrics-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .calc-output .btn {
    white-space: normal !important;
    text-align: center !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    line-height: 1.4 !important;
    height: auto !important;
  }
}

/* ==========================================================================
   DROPDOWN & LANGUAGE SELECTOR
   ========================================================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--navy-raise);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  top: 100%;
}

.dropdown-content.right-align {
  right: 0;
}

.dropdown-content a {
  color: var(--white);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
  transition: background 0.2s ease;
}

.dropdown-content a:hover {
  background-color: var(--royal-blue);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.language-selector-wrap {
  display: flex;
  align-items: center;
}

/* Platform Badges (Android / iOS) */
.flow-platform-badges {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.platform-badge.android {
  background: #e8f5e9;
  color: #1b7a34;
  border: 1.5px solid #3ddc84;
}
.platform-badge.android svg {
  fill: #3ddc84;
}
.platform-badge.ios {
  background: #f0f0f0;
  color: #1a1a1a;
  border: 1.5px solid #aaaaaa;
}
.platform-badge.ios svg {
  fill: #555555;
}


/* Custom Language Selector */
.lang-selector-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.lang-selector-wrap:hover {
  background: rgba(255,255,255,0.12);
}
.lang-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
#lang-select {
  background: transparent;
  color: #f8f5fb;
  border: none;
  outline: none;
  font-size: 13.5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  min-width: 80px;
  max-width: 110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23aeb9cc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 8px;
}
#lang-select option {
  background: #111834;
  color: #f8f5fb;
  font-family: 'Plus Jakarta Sans', sans-serif;
  padding: 10px;
  font-size: 14px;
}



/* Hide Google Translate default UI completely */
.goog-te-banner-frame,
.goog-te-menu-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
.skiptranslate,
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
.goog-te-combo {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body { top: 0px !important; }