/* ===== CSS CUSTOM PROPERTIES ===== */
:root{
  /* Brand Colors */
  --color-primary:#1F5C99;
  --color-secondary:#F4A261;
  --color-accent:#3AB795;
  --innovation-orange:#F4A261;

  /* Neutral Colors */
  --color-text-primary:#2D3748;
  --color-text-secondary:#495057;
  --color-background-primary:#FFFFFF;
  --color-background-secondary:#F8FAFC;

  /* Border/Shadow */
  --color-border-light:#E2E8F0;
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);

  /* Spacing */
  --spacing-sm:.5rem;
  --spacing-md:1rem;
  --spacing-lg:1.5rem;
  --spacing-xl:2rem;
  --spacing-2xl:3rem;

  /* Type Scale */
  --font-size-xs:.75rem;
  --font-size-sm:.875rem;
  --font-size-base:1rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.25rem;
  --font-size-2xl:1.5rem;
  --font-size-4xl:2.25rem;
  --font-size-5xl:3rem;

  /* Radius/Transitions */
  --radius-md:.5rem;
  --radius-lg:.75rem;
  --radius-xl:1rem;
  --transition-normal:.3s ease-in-out;
}

/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  line-height:1.6;
  color:var(--color-text-primary);
  background:var(--color-background-secondary);
  width:100%;
  overflow-x:hidden;
}

/* ===== LAYOUT ===== */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 var(--spacing-xl);
}
.section{padding:var(--spacing-2xl) 0}
.section--primary{background:var(--color-background-primary)}
.section-title{
  font-size:var(--font-size-4xl);
  font-weight:700;
  text-align:center;
  margin-bottom:var(--spacing-lg)
}
.section-subtitle{
  font-size:var(--font-size-xl);
  text-align:center;
  color:var(--color-text-secondary);
  margin:0 auto var(--spacing-2xl);
  max-width:800px
}

/* ===== HEADER ===== */
.header{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border-light);
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  padding:var(--spacing-md) 0
}
.header__container{display:flex;justify-content:space-between;align-items:center}
.header__logo{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none}
.header__logo img{height:40px}
.header__logo-text{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary)}
.header__nav{display:flex;list-style:none;gap:var(--spacing-xl)}
.header__nav-link{
  text-decoration:none;color:var(--color-text-primary);
  font-weight:500;padding:var(--spacing-sm) 0;border-bottom:2px solid transparent;
  transition:all var(--transition-normal)
}
.header__nav-link:hover,.header__nav-link--active{
  color:var(--color-primary);border-bottom-color:var(--color-primary)
}
.header__cta{
  background:var(--color-primary);color:#fff;
  padding:var(--spacing-sm) var(--spacing-lg);
  border-radius:var(--radius-md);text-decoration:none;font-weight:600;
  transition:all var(--transition-normal)
}
.header__cta:hover{background:#1a4f82;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.header__menu-btn{display:none}

/* ===== MOBILE NAV – hidden on desktop ===== */
.mobile-nav{display:none}

/* ===== HERO ===== */
.hero-video{
  position:relative;height:80vh;min-height:600px;
  display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;
  overflow:hidden;margin-top:70px
}
.hero-video__background{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  object-fit:cover;transform:translate(-50%,-50%);z-index:1
}
.hero-video__overlay{position:absolute;inset:0;background:rgba(10,25,47,.6);z-index:2}
.hero-headline,.hero-subtitle,.hero-cta{opacity:0}
.hero-video__content{position:relative;z-index:3;max-width:1000px;padding:0 var(--spacing-xl)}
.hero-headline{font-size:var(--font-size-5xl);font-weight:800;margin-bottom:var(--spacing-lg);text-shadow:2px 2px 4px rgba(0,0,0,.3)}
.hero-headline .destiny-accent{color:var(--innovation-orange)}
.hero-subtitle{font-size:var(--font-size-xl);margin-bottom:var(--spacing-2xl);text-shadow:1px 1px 2px rgba(0,0,0,.3)}
.hero-cta{
  background:var(--color-accent);color:#fff;padding:var(--spacing-md) var(--spacing-2xl);
  border-radius:var(--radius-lg);text-decoration:none;font-weight:700;font-size:var(--font-size-lg);
  transition:all var(--transition-normal);display:inline-block
}
.hero-cta:hover{background:#2a9d8f;transform:translateY(-2px)}

/* ===== GRIDS ===== */
.stats-grid,.platform-grid,.intelligence-grid,.impact-grid,.tech-grid{
  display:grid;gap:var(--spacing-xl)
}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.platform-grid{grid-template-columns:2fr 1fr;align-items:start}
.intelligence-grid{grid-template-columns:1fr 1fr;align-items:start}
.impact-grid{grid-template-columns:repeat(auto-fit,minmax(450px,1fr))}
.tech-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ===== REUSABLE: Cards/Charts/Buttons ===== */
.card{
  background:var(--color-background-primary);border-radius:var(--radius-xl);
  padding:var(--spacing-xl);box-shadow:var(--shadow-md);
  border:1px solid var(--color-border-light);transition:all var(--transition-normal)
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card__stat-value{font-size:var(--font-size-5xl);font-weight:700;color:var(--color-primary);margin-bottom:var(--spacing-sm)}
.card__stat-label{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-sm)}
.card__stat-description{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.chart-container{position:relative;width:100%;height:300px}
.chart-container--small{height:120px}
.button{
  display:inline-block;padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);
  text-decoration:none;font-weight:600;text-align:center;transition:all var(--transition-normal);cursor:pointer;border:none
}
.button--secondary{background:var(--color-secondary);color:#fff}
.button--secondary:hover{background:#e6935a;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.button--large{padding:var(--spacing-lg) var(--spacing-2xl);font-size:var(--font-size-lg)}

/* ===== PLATFORM ===== */
#kpi-domain-buttons{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:2rem
}
.kpi-domain-btn{
  background:var(--color-background-primary);border:2px solid var(--color-border-light);
  padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);
  cursor:pointer;transition:all var(--transition-normal);font-weight:600;color:var(--color-text-primary)
}
.kpi-domain-btn:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.kpi-domain-btn--active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.kpi-domain-btn--active:hover{color:#fff;filter:brightness(1.1)}
.kpi-list-item{padding:.75rem;border-radius:.375rem;cursor:pointer;transition:background-color .2s}
.kpi-list-item:hover{background:#dbeafe}
.bg-blue-50{background:#eff6ff}

/* ===== INTELLIGENCE ===== */
.role-tabs{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-2xl);flex-wrap:wrap}
.role-tab{
  background:var(--color-background-primary);border:2px solid var(--color-border-light);
  padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-lg);
  cursor:pointer;transition:all var(--transition-normal);font-weight:600
}
.role-tab:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.role-tab--active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.role-tab--active:hover{color:#fff;filter:brightness(1.1)}
.role-title{font-size:var(--font-size-xl);font-weight:700;margin-bottom:var(--spacing-lg)}
.role-section{margin-bottom:var(--spacing-lg)}
.role-section-title{font-size:var(--font-size-lg);font-weight:600;margin-bottom:var(--spacing-sm)}
.role-section-title--challenge{color:var(--innovation-orange)}
.role-section-title--solution{color:var(--color-primary)}
.role-section-title--outcome{color:var(--color-accent)}
.role-section-content{color:var(--color-text-secondary)}

/* ===== IMPACT ===== */
.impact-card{
  background:var(--color-background-primary);border-radius:var(--radius-xl);
  padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border-light)
}
.impact-title{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--spacing-md)}
.impact-description{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}
.impact-toggle-container{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}
.impact-toggle{
  position:relative;width:60px;height:30px;background:#cbd5e0;border-radius:15px;
  cursor:pointer;transition:background-color var(--transition-normal)
}
.impact-toggle::after{
  content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;background:#fff;border-radius:50%;
  transition:transform var(--transition-normal)
}
.impact-toggle--active{background:var(--color-accent)}
.impact-toggle--active::after{transform:translateX(30px)}
.impact-toggle-label{font-weight:500}

/* ===== TECHNOLOGY ===== */
.tech-card{
  background:var(--color-background-primary);border-radius:var(--radius-xl);
  padding:var(--spacing-xl);text-align:center;box-shadow:var(--shadow-md);border:1px solid var(--color-border-light)
}
.tech-icon{width:80px;height:80px;margin:0 auto var(--spacing-lg)}
.tech-icon img{width:100%;height:100%;object-fit:contain}
.tech-title{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--spacing-md)}
.tech-description{font-size:var(--font-size-sm);color:var(--color-text-secondary)}

/* ===== CONTACT ===== */
.section--contact{background:var(--color-primary);color:#fff}
.contact__title{font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--spacing-lg);text-align:center}
.contact__description{
  font-size:var(--font-size-lg);margin-bottom:var(--spacing-2xl);max-width:800px;
  margin-left:auto;margin-right:auto;opacity:.9;text-align:center
}
.contact-form{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-md)}
.contact-form .form-row{display:flex;gap:var(--spacing-md)}
.contact-form .form-row input{width:50%}
.contact-form input,.contact-form textarea{
  width:100%;padding:var(--spacing-md);border-radius:var(--radius-md);
  border:1px solid var(--color-border-light);font-family:'Inter',sans-serif;font-size:1rem;
  transition:all var(--transition-normal)
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #3AB79540}
.form-status{margin-top:var(--spacing-md);font-weight:500;padding:var(--spacing-md);border-radius:var(--radius-md);display:none}
.form-status--success{display:block;background:rgba(58,183,149,.15);color:#fff;border:1px solid var(--color-accent)}
.form-status--error{display:block;background:rgba(231,76,60,.15);color:#fff;border:1px solid #E74C3C}

/* ===== FOOTER ===== */
.footer{background:#17457A;color:#fff;padding:var(--spacing-xl) 0;text-align:center}
.footer__logo-container{margin-bottom:var(--spacing-lg)}
.footer__logo{max-height:40px;width:auto}
.footer__copyright{font-size:var(--font-size-sm);margin-bottom:var(--spacing-sm)}
.footer__compliance{font-size:var(--font-size-xs);opacity:.8}

/* ===== SECTION SPACING TWEAKS ===== */
/* Extra space after stats cards so the next headline breathes */
.stats-grid{margin-bottom:var(--spacing-2xl)}
/* If you prefer class-based: add .section--stats to that section and use:
.section--stats .container{padding-bottom:calc(var(--spacing-2xl) + 10px);} */

/* ==============================================
   RESPONSIVE (TABLET & MOBILE)
   ============================================== */
@media (max-width:1024px){
  .container{padding:0 var(--spacing-lg)}
  .hero-video__content{padding:0 var(--spacing-lg)}

  /* Type scale */
  .section-title{font-size:var(--font-size-4xl)}
  .section-subtitle{font-size:var(--font-size-lg)}
  .hero-headline{font-size:var(--font-size-4xl)}
  .hero-subtitle{font-size:var(--font-size-xl)}

  /* Header & Mobile Navigation */
  .header__nav,.header__cta{display:none}
  .header__menu-btn{
    display:flex;flex-direction:column;justify-content:space-around;
    width:30px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:1001
  }
  .header__menu-bar{width:100%;height:3px;background:var(--color-text-primary);border-radius:2px}

  /* Mobile nav container: rendered only on <=1024px, closed by default */
  .mobile-nav{
    display:block;position:absolute;top:100%;left:0;right:0;background:var(--color-background-primary);
    border-bottom:1px solid var(--color-border-light);overflow:hidden;max-height:0;
    transition:max-height var(--transition-normal);z-index:999;pointer-events:none
  }
  .mobile-nav--open{max-height:calc(100vh - 64px);pointer-events:auto}
  .mobile-nav__list{list-style:none}
  .mobile-nav__link{
    display:block;text-align:center;padding:var(--spacing-lg);
    font-size:var(--font-size-lg);color:var(--color-text-primary);text-decoration:none
  }

  /* CTA inside mobile nav (centered button) */
  .mobile-nav__cta{
    display:block;text-align:center;margin:12px auto 16px;padding:12px 20px;
    background:var(--color-primary);color:#fff!important;border-radius:10px;font-weight:600;
    max-width:240px;transition:background .25s ease
  }
  .mobile-nav__cta:hover,.mobile-nav__cta:focus{background:#1a4f82;text-decoration:none}

  /* Grids stack */
  .stats-grid,.platform-grid,.intelligence-grid,.impact-grid,.tech-grid{grid-template-columns:1fr}

  /* Contact form stacking */
  .contact-form .form-row{flex-direction:column}
  .contact-form .form-row input{width:100%}
}

/* ==============================================
   LARGE SCREENS ENHANCEMENTS
   ============================================== */

/* Technology: force 3-up layout on desktop */
@media (min-width:1024px){
  .tech-grid{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1200px) {
  /* Platform section */
  .platform-grid {
    grid-template-columns: 1.6fr 1fr;
    align-items: start;
  }

  /* Optional sticky details for pleasant scroll */
  #kpi-details {
    position: sticky;
    top: 96px;
  }

  /* Intelligence section */
  .intelligence-grid {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: var(--spacing-2xl);
  }

  #role-info {
    max-width: 780px;
  }
}

/* Shared large-screen layout for Platform + Intelligence */
@media (min-width:1200px) {
  .platform-grid,
  .intelligence-grid {
    display: grid;
    align-items: start;
    gap: var(--spacing-2xl);
  }

  /* Slightly different ratios for visual balance */
  .platform-grid {
    grid-template-columns: 1.6fr 1fr;
  }

  .intelligence-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  /* Optional sticky side panels */
  #kpi-details,
  #role-info {
    position: sticky;
    top: 96px;
    max-width: 780px;
  }
}

/* =====================================================
   BaseeraX — Equal-height columns & section divider
   (Non-destructive overrides appended at end)
   ===================================================== */

/* Make both columns equal height by stretching grid items */
.platform-grid,
.intelligence-grid {
  align-items: stretch; /* override previous align-items:start */
}

/* Ensure cards fill the stretched track; allow inner content to grow */
.platform-grid > .card,
.intelligence-grid > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Let chart containers expand within flex cards */
.platform-grid .chart-container,
.intelligence-grid .chart-container {
  flex: 1 1 auto;
  min-height: 300px;
}

/* Mobile/tablet stacked layout: allow natural heights */
@media (max-width: 1024px) {
  .platform-grid > .card,
  .intelligence-grid > .card {
    height: auto;
  }
}

/* Keep sticky side panels on large screens (if already present, this is harmless) */
@media (min-width: 1200px) {
  #kpi-details,
  #role-info {
    position: sticky;
    top: 96px;
  }
}

/* Safeguard in case details panels have tiny content */
#kpi-details.card,
#role-info {
  min-height: 100%;
}

/* Reusable subtle divider under sections */
.section--with-divider .container {
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}