:root{
  --bg: radial-gradient(circle at center, #f4f4f6 0%, #ffffff 100%);
  --navy:#0b1533;
  --gold:#c9a227; /* accent for buttons/hover if desired */
}

/* Reset / base ----------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#0f1020;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%;-webkit-text-size-adjust:100%}
img,video{max-width:100%;height:auto;display:block}
@media (max-width:640px){
  body{font-size:0.95rem}
}

/* ================= Header / Nav ======================================= */
header{
  position:sticky;
  top:0;
  z-index:50;
  display:block;
  background: transparent;
  border-bottom: none;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.nav{
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  height:110px;
  padding:0 20px;
}

.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto}
.brand .logo{display:block; background:transparent; max-height:76px; width:auto; height:auto; margin:0; -webkit-font-smoothing:antialiased; image-rendering:optimizeQuality}

.nav .menu{display:flex; align-items:center; gap:20px; margin-left:auto}
.nav .menu a{color:var(--navy); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:8px; transition:background .15s ease, color .15s ease, transform .12s ease}
.nav .menu a:hover,.nav .menu a:focus{background: rgba(11,21,51,0.04); transform: translateY(-1px); color:var(--navy); outline: none}

/* Login dropdown (details-based) inside nav menu */
.nav .menu details.nav-login{position:relative}
.nav .menu summary.nav-login-summary{list-style:none; cursor:pointer; color:var(--navy); font-weight:600; padding:8px 12px; border-radius:8px}
.nav .menu summary.nav-login-summary::-webkit-details-marker{display:none}
.nav .menu .nav-login-list{display:none; position:absolute; right:0; margin-top:8px; background:#fff; border:1px solid #e6e6e8; border-radius:8px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.08); min-width:180px; flex-direction:column; z-index:30}
.nav .menu details[open] .nav-login-list{display:flex}
.nav .menu .nav-login-list a{display:block; padding:8px 10px; border-radius:6px; color:var(--navy)}
.nav .menu .nav-login-list a:hover{background:#f4f4f9}

.nav-toggle{display:none; padding:10px 12px; border-radius:10px; border:1px solid #e6e6e8; background:#fff; font-weight:700}
@media (max-width:900px){
  .nav{height:76px; padding:0 14px}
  .nav-toggle{display:inline-block}
  .menu{display:none; position:absolute; right:20px; top:72px; background:#fff; border:1px solid #e6e6e8; border-radius:12px; padding:10px; box-shadow:0 10px 30px rgba(0,0,0,.08)}
  .menu.open{display:flex; flex-direction:column; gap:6px}
  .menu a{margin:0; padding:8px 10px; border-radius:8px}
  .menu a:hover{background:#f4f4f9}
  /* On small screens make dropdown list static within the menu */
  .menu details.nav-login .nav-login-list{position:static; box-shadow:none; border:0; padding:0; margin:6px 0 0 0}
  .menu details.nav-login summary.nav-login-summary{display:block}
}

/* When scrolled, keep a solid background so header doesn't show the page behind it */
header.scrolled{background: #ffffff; border-bottom: 1px solid rgba(10,5,32,0.06); box-shadow: 0 6px 20px rgba(0,0,0,0.06)}

/* ================= Splash / Intro ===================================== */
#intro{position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--bg); overflow:hidden}
.intro-content{display:grid; place-items:center}
.intro-content svg{width:min(86vw,1100px); height:auto; display:block; margin:auto}
.intro-skip{position:absolute; bottom:40px; right:40px; padding:12px 24px; background:var(--navy); color:#fff; border:none; border-radius:8px; font-weight:600; cursor:pointer; transition:all 0.2s ease}
.intro-skip:hover{background:#1a2b4d; transform:translateY(-2px)}
@keyframes fadeOut{to{opacity:0; visibility:hidden}}
.fade-out{animation:fadeOut .8s ease forwards}

/* ================= SINGLE PAGE SIDEBAR LAYOUT ===================================== */
.container{max-width:1200px;margin:auto;padding:0 20px}
.section{padding:clamp(28px,5vw,64px) 0}
.strip{background:#fff; border-block:1px solid #ececf2; padding:12px 0}
.wrapper{max-width:1200px; margin-inline:auto; padding:0 20px}
.cluster{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.cluster.spread{justify-content:space-between}
.grid{display:grid; gap:clamp(16px,3vw,24px)}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:900px){ 
  .grid-3{grid-template-columns:1fr 1fr} 
  .container{padding:0 16px}
}
@media (max-width:640px){ 
  .grid-3,.grid-2{grid-template-columns:1fr} 
  .container{padding:0 14px}
  .section{padding:clamp(20px,4vw,48px) 0}
}
.center{ text-align:center }

/* ================= Cards, Buttons, Badges ============================= */
.card{border:1px solid #e6e6e8; border-radius:16px; padding:18px; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.05)}
.card.link{display:block; text-decoration:none; color:inherit}
.card.link:hover{box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-1px); transition:all .2s ease}
.badge{display:inline-block; padding:6px 10px; border:1px solid rgba(124,58,237,.25); border-radius:999px; font-size:12px; color:#4c1d95; background:rgba(124,58,237,.06)}
.btn{padding:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:700; cursor:pointer; font-size:1rem; min-height:44px}
.btn.primary{background:#0b1533; color:#fff}
.btn.primary:hover{background:#162548}
.btn.ghost{background:#fff; border-color:#eaeaf1}
.btn.navy{background:#0f1020; color:#fff; border:none}
.btn.navy:hover{background:#1a1b2f}
.btn:focus{outline:2px solid var(--gold); outline-offset:2px}
@media (max-width:640px){
  .card{padding:14px; border-radius:12px}
  .btn{padding:10px 16px; font-size:0.95rem}
}

/* ================= Lists & Text ====================================== */
.check{list-style:disc; padding-left:24px; margin:0 0 1rem}
.check li{margin:8px 0; line-height:1.6}
.small{font-size:.92rem; color:#555}
.muted{color:#64748b}
.h6{font-size:1rem; letter-spacing:.2px; text-transform:uppercase; color:#111; margin:0 0 6px}
h1{font-size:clamp(1.75rem, 4vw, 2.5rem); line-height:1.2; margin:0 0 1rem}
h2{font-size:clamp(1.5rem, 3.5vw, 2rem); line-height:1.3; margin:0 0 0.75rem}
h3{font-size:clamp(1.25rem, 3vw, 1.5rem); line-height:1.4; margin:0 0 0.5rem}
p{line-height:1.6; margin:0 0 1rem}
@media (max-width:640px){
  .small{font-size:0.88rem}
  p{font-size:0.95rem}
}

/* ================= Hero content ===================================== */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; margin:40px 0}
.actions{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.scenarios{min-height:220px; margin-top:40px}
@media (max-width:900px){ 
  .hero{grid-template-columns:1fr; gap:20px; margin:28px 0} 
  .actions{gap:10px}
}
@media (max-width:640px){
  .hero{margin:20px 0}
  .actions{flex-direction:column; width:100%}
  .actions .btn{width:100%}
}

/* ================= HERO BANNER ===================================== */
/* keep hero banner positioned below header without negative pull-up */
.hero-banner{position:relative; width:100%; height:600px; overflow:hidden; margin-bottom:28px; margin-top:0; z-index:0}
.hero-banner .video-stack{position:absolute; inset:0}
.banner-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s ease; -webkit-backface-visibility:hidden; backface-visibility:hidden}
.banner-video.active{opacity:1}
.banner-overlay{position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.4))}

/* Banner content overlay */
.banner-content{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:80px 60px 80px; max-width:1200px; margin:0 auto; z-index:2}
.banner-content h1{color:#fff; font-size:clamp(36px, 5vw, 62px); font-weight:700; line-height:1.15; margin:0 0 16px 0; max-width:700px}
.banner-content .lead{color:#fff; font-size:clamp(16px, 2vw, 20px); margin:0 0 22px 0; max-width:600px; opacity:0.95; line-height:1.5}
.banner-checks{list-style:none; padding:0; margin:0 0 18px 0; display:flex; flex-direction:column; gap:11px}
.banner-checks li{display:flex; align-items:center; gap:12px; color:#fff; font-size:clamp(15px, 1.8vw, 18px); font-weight:500}
.banner-checks svg{flex-shrink:0}
.banner-actions{position:absolute; right:60px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; align-items:center}
.banner-actions .btn{font-size:clamp(16px, 1.8vw, 18px); padding:14px 32px; min-width:220px; text-align:center}

/* Rotating word animation */
.rotating-word{position:relative; display:inline-block; min-width:220px; vertical-align:bottom}
.rotating-word .word{position:absolute; left:0; top:0; opacity:0; transform:translateY(30px); animation:rotateWord 15s infinite; transition:opacity 0.6s ease, transform 0.6s ease}
.rotating-word .word.active{position:relative; opacity:1; transform:translateY(0)}
.rotating-word .word:nth-child(1){animation-delay:0s}
.rotating-word .word:nth-child(2){animation-delay:3s}
.rotating-word .word:nth-child(3){animation-delay:6s}
.rotating-word .word:nth-child(4){animation-delay:9s}
.rotating-word .word:nth-child(5){animation-delay:12s}

@keyframes rotateWord{
  0%{opacity:0; transform:translateY(30px)}
  2%{opacity:1; transform:translateY(0)}
  18%{opacity:1; transform:translateY(0)}
  20%{opacity:0; transform:translateY(-30px)}
  100%{opacity:0; transform:translateY(-30px)}
}

@media (max-width:900px){ 
  .hero-banner{height:500px; margin-bottom:20px}
  .banner-content{padding:30px 40px}
  .banner-content h1{font-size:clamp(28px, 5.5vw, 44px)}
  .menu a{font-size:1rem; margin-left:16px} 
}
@media (max-width:640px){ 
  .hero-banner{height:580px; margin-bottom:16px}
  .banner-content{padding:20px 20px}
  .banner-content h1{font-size:clamp(26px, 7vw, 36px); line-height:1.2}
  .banner-content .lead{margin-bottom:24px}
  .banner-checks{gap:12px; margin-bottom:28px}
  .banner-checks li{font-size:14px}
  .banner-actions{width:100%; align-self:flex-start}
  .banner-actions .btn{width:100%; justify-content:center}
  .rotating-word{min-width:150px}
  .nav{padding:12px 16px} 
}

/* ================= KPI Cards ======================================= */
.kpis .kpi{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px}
.kpis .num{font-size:clamp(24px, 3.5vw, 42px); font-weight:800; color:var(--navy)}
.kpis .label{color:#64748b; margin-top:4px; font-size:clamp(0.85rem, 2vw, 1rem); text-align:center}
@media (max-width:640px){
  .kpis{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px}
  .kpis .kpi{padding:16px}
}

/* ================= Step-up Model =================================== */
.section.alt{background:#fff}
.stepup{display:grid; gap:16px; grid-template-columns:repeat(4, minmax(0,1fr))}
.step{border:1px solid #ececf2; border-radius:14px; padding:18px; background:#fff}
.step .rate{font-size:1.5rem; font-weight:800; color:var(--navy); margin-top:4px}
@media (max-width:900px){ .stepup{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .stepup{grid-template-columns:1fr} }
.disclaimer{margin-top:8px}

/* ================= How it works ==================================== */
.stepcard{min-height:120px; display:flex; flex-direction:column; justify-content:center}

/* ================= Posts / Insights ================================= */
.cards .post img{border-radius:12px; border:1px solid #ececf2}
.cards .post{transition:transform .2s ease, box-shadow .2s ease}
.cards .post:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.08)}

/* ================= CTA ============================================= */
.cta .card{max-width:720px; margin:0 auto}

/* ================= Footer ========================================== */
footer{border-top:1px solid #e6e6e8; padding:22px 20px; text-align:center; color:#555}

/* ================= Forms =========================================== */
.input{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #d7d7de; background:#fff; font-size:16px; min-height:44px}
.input:focus{border-color:#b6b6c8; box-shadow:0 0 0 4px rgba(34,211,238,.15)}
.input-group select{padding:8px 12px; border:1px solid #ddd; border-radius:6px; font-size:1rem; background:#fff; width:100%; min-height:44px}
textarea.input{min-height:100px; resize:vertical}
@media (max-width:640px){
  .input, .input-group select{font-size:16px; padding:10px 12px}
}

/* ================= Accessibility helpers =========================== */
:focus-visible{outline:2px dashed #22d3ee; outline-offset:3px}
.visually-hidden{position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* ===== INTRO OVERLAY ===== */
#intro { position: fixed; inset: 0; z-index: 100; background: #f4f6f8; display: grid; place-items: center }
.intro-content { max-width: 720px; width: 100%; margin: auto }
.intro-content svg { width: 100%; height: auto }
.intro-skip { position: absolute; bottom: 24px; right: 24px; padding: 8px 16px; border: none; background: rgba(0,0,0,0.1); border-radius: 4px; cursor: pointer; font-size: 14px; color: #666 }
.intro-fade { animation: fadeOut 0.7s ease-out forwards }
.app-hidden { opacity: 0 }
.app-visible { opacity: 1; transition: opacity 0.5s ease-out }

@keyframes fadeOut { to { opacity: 0; visibility: hidden } }

@media (prefers-reduced-motion: reduce) {
  #intro svg #ring animate,
  #intro svg #word animate,
  #intro svg #sweep { animation: none }
  .intro-fade { animation: none; opacity: 0; visibility: hidden }
  .app-visible { transition: none }
}

/* ================= Standard list styling =============== */
main ul, .container ul, section ul, .card ul, .post ul, .article ul { list-style: disc; margin: 0 0 1rem 0; padding-left: 24px }
main ol, .container ol, section ol, .card ol, .post ol, .article ol { list-style: decimal; margin: 0 0 1rem 0; padding-left: 24px }
main ul li, main ol li, .container ul li, .container ol li, section ul li, section ol li, .card ul li, .card ol li, .post ul li, .post ol li, .article ul li, .article ol li { margin-bottom: .5rem; line-height: 1.6 }

/* ================= Tables (mobile responsive) ======================= */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px}
.table{width:100%; border-collapse:collapse; min-width:500px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #ececf2; text-align:left; white-space:nowrap}
.table thead{background:#f9fafb}
@media (max-width:640px){
  .table{font-size:0.9rem}
  .table th,.table td{padding:8px 10px}
}

/* ================= Header / Logo tweak note ========================= */
/* If you later provide a transparent, trimmed logo, replace the image file and adjust .brand .logo max-height accordingly. */

/* ================= SINGLE PAGE SIDEBAR LAYOUT ===================================== */
body.single-page {
  margin: 0;
  padding: 0;
  background: #fff;
}

/* Left Sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 180px;
  background: var(--navy);
  color: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 20px;
}

.sidebar-brand {
  display: block;
  margin-bottom: 50px;
}

.sidebar-logo {
  max-width: 80px;
  height: auto;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-nav .nav-item {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 10px 0;
  border-left: 2px solid transparent;
  padding-left: 12px;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-item.active {
  color: #fff;
  border-left-color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.sidebar-email {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 20px;
  transition: color 0.2s ease;
  display: inline-block;
}

.sidebar-email:hover {
  color: #fff;
}

/* Main Page Content */
.page-content {
  margin-left: 180px;
  width: calc(100% - 180px);
}

/* Full Height Sections */
.full-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 60px;
  position: relative;
}

.full-section.light-section {
  background: #f8f9fa;
}

.section-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-header {
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.section-desc {
  font-size: 18px;
  color: #64748b;
  max-width: 700px;
}

.section-subtitle {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--navy);
  margin: 60px 0 32px 0;
}

/* Hero Section */
.hero-section {
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(11, 21, 51, 0.7), rgba(11, 21, 51, 0.8));
  z-index: 1;
}

.hero-section .section-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(36px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 24px 0;
  max-width: 800px;
}

.hero-lead {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  margin: 0 0 32px 0;
  max-width: 700px;
  opacity: 0.95;
}

.hero-features {
  list-style: none;
  padding: 0;
  margin: 0 0 36px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
}

.hero-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
}

.hero-features svg {
  flex-shrink: 0;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Two Column Layout */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

.col-text h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
}

.col-text p {
  margin: 0 0 16px 0;
  line-height: 1.7;
  color: #475569;
}

/* KPI Grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 60px 0;
}

.kpi-card {
  background: #fff;
  padding: 32px 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.kpi-num {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}

.kpi-label {
  color: #64748b;
  font-size: 15px;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.feature-card {
  background: #fff;
  padding: 28px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.feature-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px 0;
}

.feature-card p {
  margin: 0;
  line-height: 1.6;
  color: #475569;
  font-size: 15px;
}

/* Criteria Grid */
.criteria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.criteria-card {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.criteria-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
}

.criteria-card p {
  margin: 0 0 12px 0;
  line-height: 1.6;
  color: #475569;
  font-size: 15px;
}

.criteria-card p.muted {
  color: #94a3b8;
  font-size: 14px;
}

/* Steps Grid */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step-card {
  background: #fff;
  padding: 32px 28px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.step-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1;
}

.step-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px 0;
}

.step-card p {
  margin: 0;
  line-height: 1.6;
  color: #475569;
  font-size: 15px;
}

/* Check List */
.check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.check-list li {
  padding-left: 28px;
  position: relative;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #475569;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  color: var(--navy);
  font-weight: 700;
  font-size: 18px;
}

/* Contact Section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
}

.contact-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 20px 0;
}

.contact-info p {
  margin: 12px 0;
  line-height: 1.7;
  color: #475569;
}

.contact-info a {
  color: var(--navy);
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
  font-size: 14px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--navy);
}

/* Rotating Word Animation */
.rotating-word {
  position: relative;
  display: inline-block;
  min-width: 220px;
  vertical-align: bottom;
}

.rotating-word .word {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: rotateWord 15s infinite;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rotating-word .word.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}

.rotating-word .word:nth-child(1) {animation-delay: 0s}
.rotating-word .word:nth-child(2) {animation-delay: 3s}
.rotating-word .word:nth-child(3) {animation-delay: 6s}
.rotating-word .word:nth-child(4) {animation-delay: 9s}
.rotating-word .word:nth-child(5) {animation-delay: 12s}

@keyframes rotateWord {
  0% {opacity: 0; transform: translateY(30px)}
  2% {opacity: 1; transform: translateY(0)}
  18% {opacity: 1; transform: translateY(0)}
  20% {opacity: 0; transform: translateY(-30px)}
  100% {opacity: 0; transform: translateY(-30px)}
}

/* Responsive Design */
@media (max-width: 1024px) {
  .sidebar {
    width: 160px;
  }
  .page-content {
    margin-left: 160px;
    width: calc(100% - 160px);
  }
  .feature-grid, .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar-inner {
    flex-direction: row;
    align-items: center;
    padding: 20px;
  }
  .sidebar-brand {
    margin-bottom: 0;
    margin-right: auto;
  }
  .sidebar-nav {
    flex-direction: row;
    gap: 16px;
    flex: 0;
  }
  .sidebar-nav .nav-item {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
  }
  .sidebar-nav .nav-item.active {
    border-bottom-color: #fff;
    background: none;
  }
  .sidebar-footer {
    margin-left: 20px;
    margin-top: 0;
    padding-top: 0;
    padding-left: 20px;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
  .page-content {
    margin-left: 0;
    width: 100%;
  }
  .full-section {
    padding: 60px 30px;
  }
  .two-col-layout, .criteria-grid, .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .feature-grid, .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Login Grid */
.login-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.login-card {
  background: #fff;
  padding: 48px 40px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.login-card h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
}

.login-card p {
  margin: 0 0 28px 0;
  line-height: 1.7;
  color: #475569;
  font-size: 15px;
}

.login-card .btn {
  width: 100%;
  max-width: 250px;
}

@media (max-width: 768px) {
  .login-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Scroll Snap & Smooth Transitions */
.page-content {
  scroll-snap-type: y proximity;
}

/* Full Height Sections with scroll snap */
.full-section {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition: background-color 0.6s ease;
}

/* Section Background Colors - Various shades of blue and gray */
.section-light-blue {
  background: #e8f2f7;
}

.section-light-gray {
  background: #f0f2f5;
}

.section-pale-blue {
  background: #e1eef5;
}

.section-white {
  background: #ffffff;
}

.section-soft-gray {
  background: #f5f7fa;
}

/* Override light-section if specific color class exists */
.section-light-blue.light-section,
.section-light-gray.light-section,
.section-pale-blue.light-section,
.section-white.light-section {
  background: inherit;
}

/* Step Panels */
.step-panel {
  min-width: 80vw;
  width: 80vw;
  scroll-snap-align: start;
  padding: 60px 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.step-panel:not(.calculator-panel) {
  border-right: 1px solid #e1e5ea;
}

.step-panel-content {
  max-width: 600px;
  text-align: center;
}

.step-panel .step-num {
  font-size: 72px;
  font-weight: 700;
  color: #0b1533;
  opacity: 0.1;
  margin-bottom: 20px;
  line-height: 1;
}

.step-panel h4 {
  font-size: 28px;
  font-weight: 600;
  color: #0b1533;
  margin-bottom: 16px;
}

.step-panel p {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5568;
}

/* Calculator Panel Styles */
.calculator-panel {
  min-width: 90vw;
  width: 90vw;
  background: linear-gradient(135deg, #f8f9fb 0%, #e8f2f7 100%);
}

.calculator-panel .step-panel-content {
  max-width: 900px;
  text-align: left;
}

.calculator-panel h3 {
  font-size: 32px;
  font-weight: 700;
  color: #0b1533;
  margin-bottom: 12px;
}

.calc-desc {
  font-size: 16px;
  color: #4a5568;
  margin-bottom: 30px;
}

/* Rate Bands Table */
.rate-bands-table {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.rate-bands-table table {
  width: 100%;
  border-collapse: collapse;
}

.rate-bands-table th {
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid #e1e5ea;
  font-size: 14px;
  font-weight: 600;
  color: #0b1533;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rate-bands-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 15px;
  color: #4a5568;
}

.rate-bands-table tbody tr:last-child td {
  border-bottom: none;
}

.rate-bands-table strong {
  color: #0b1533;
  font-weight: 600;
}

/* Calculator Form */
.calculator-form {
  background: white;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.calculator-form h4 {
  font-size: 20px;
  font-weight: 600;
  color: #0b1533;
  margin-bottom: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.calculator-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calculator-form label span {
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
}

.calculator-form input {
  padding: 12px 16px;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.calculator-form input:focus {
  outline: none;
  border-color: #0b1533;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.btn-primary, .btn-secondary {
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background: #0b1533;
  color: white;
}

.btn-primary:hover {
  background: #1a2548;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: #0b1533;
  border: 1px solid #e1e5ea;
}

.btn-secondary:hover {
  background: #f8f9fb;
}

/* Results */
#calc-results {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #f0f2f5;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.result-item {
  background: #f8f9fb;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

.result-label {
  font-size: 13px;
  color: #718096;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.result-value {
  font-size: 24px;
  font-weight: 700;
  color: #0b1533;
}

/* Schedule Details */
.schedule-details {
  margin-top: 20px;
  cursor: pointer;
}

.schedule-details summary {
  font-size: 14px;
  font-weight: 500;
  color: #0b1533;
  padding: 12px;
  background: #f8f9fb;
  border-radius: 6px;
  list-style: none;
  user-select: none;
}

.schedule-details summary::-webkit-details-marker {
  display: none;
}

.schedule-details summary::after {
  content: ' ';
  font-size: 10px;
  margin-left: 8px;
}

.schedule-details[open] summary::after {
  content: ' ';
}

.schedule-table {
  margin-top: 12px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
}

.schedule-table table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-table th {
  text-align: left;
  padding: 12px;
  background: #f8f9fb;
  border-bottom: 1px solid #e1e5ea;
  font-size: 13px;
  font-weight: 600;
  color: #0b1533;
  position: sticky;
  top: 0;
}

.schedule-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 14px;
  color: #4a5568;
}

.schedule-table tbody tr:last-child td {
  border-bottom: none;
}

.calc-disclaimer {
  font-size: 12px;
  color: #718096;
  margin-top: 20px;
  font-style: italic;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .step-panel {
    min-width: 90vw;
    width: 90vw;
    padding: 40px 30px;
  }
  
  .calculator-panel {
    min-width: 95vw;
    width: 95vw;
  }
  
  .step-panel .step-num {
    font-size: 48px;
  }
  
  .step-panel h4 {
    font-size: 22px;
  }
  
  .calculator-panel h3 {
    font-size: 24px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
  }
  
  .rate-bands-table {
    overflow-x: auto;
  }
  
  .calculator-form {
    padding: 24px;
  }
}

/* Calculator Section */
.calculator-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 45px 30px;
}

.calculator-content {
  max-width: 100%;
}

.calculator-content h3 {
  font-size: 27px;
  font-weight: 700;
  color: #0b1533;
  margin-bottom: 9px;
  text-align: center;
}

.calc-desc {
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 30px;
  text-align: center;
}

/* Rate Bands Table */
.rate-bands-table {
  background: white;
  border-radius: 9px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 3px 9px rgba(0,0,0,0.08);
}

.rate-bands-table table {
  width: 100%;
  border-collapse: collapse;
}

.rate-bands-table th {
  text-align: left;
  padding: 12px 9px;
  border-bottom: 2px solid #e1e5ea;
  font-size: 11px;
  font-weight: 600;
  color: #0b1533;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rate-bands-table td {
  padding: 14px 9px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 12px;
  color: #4a5568;
}

.rate-bands-table tbody tr:last-child td {
  border-bottom: none;
}

.rate-bands-table strong {
  color: #0b1533;
  font-weight: 600;
  font-size: 13px;
}

/* Calculator Form */
.calculator-form {
  background: white;
  border-radius: 9px;
  padding: 30px;
  box-shadow: 0 3px 9px rgba(0,0,0,0.08);
}

.calculator-form h4 {
  font-size: 18px;
  font-weight: 600;
  color: #0b1533;
  margin-bottom: 18px;
  text-align: center;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 21px;
}

.calculator-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calculator-form label span {
  font-size: 11px;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calculator-form input {
  padding: 11px 14px;
  border: 2px solid #e1e5ea;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s;
}

.calculator-form input:focus {
  outline: none;
  border-color: #0b1533;
  box-shadow: 0 0 0 3px rgba(11, 21, 51, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 21px;
  justify-content: center;
}

.btn-primary, .btn-secondary {
  padding: 11px 30px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  font-family: inherit;
}

.btn-primary {
  background: #0b1533;
  color: white;
}

.btn-primary:hover {
  background: #1a2548;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 21, 51, 0.3);
}

.btn-secondary {
  background: transparent;
  color: #0b1533;
  border: 2px solid #e1e5ea;
}

.btn-secondary:hover {
  background: #f8f9fb;
  border-color: #0b1533;
}

/* Results */
#calc-results {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e1e5ea;
}

#calc-results h4 {
  font-size: 16px;
  font-weight: 600;
  color: #0b1533;
  margin-bottom: 18px;
  text-align: center;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 21px;
}

.result-item {
  background: linear-gradient(135deg, #f8f9fb 0%, #e8f2f7 100%);
  padding: 21px 18px;
  border-radius: 8px;
  text-align: center;
  border: 2px solid #e1e5ea;
}

.result-label {
  font-size: 10px;
  color: #718096;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.result-value {
  font-size: 21px;
  font-weight: 700;
  color: #0b1533;
}

/* Schedule Details */
.schedule-details {
  margin-top: 21px;
  cursor: pointer;
}

.schedule-details summary {
  font-size: 12px;
  font-weight: 600;
  color: #0b1533;
  padding: 12px 16px;
  background: #f8f9fb;
  border-radius: 6px;
  list-style: none;
  user-select: none;
  text-align: center;
  border: 2px solid #e1e5ea;
  transition: all 0.2s;
}

.schedule-details summary:hover {
  background: #e8f2f7;
  border-color: #0b1533;
}

.schedule-details summary::-webkit-details-marker {
  display: none;
}

.schedule-details summary::after {
  content: ' ';
  font-size: 11px;
  margin-left: 10px;
}

.schedule-details[open] summary::after {
  content: ' ';
}

.schedule-table {
  margin-top: 16px;
  max-height: 350px;
  overflow-y: auto;
  border: 2px solid #e1e5ea;
  border-radius: 8px;
  background: white;
}

.schedule-table table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-table th {
  text-align: left;
  padding: 14px 16px;
  background: #f8f9fb;
  border-bottom: 2px solid #e1e5ea;
  font-size: 13px;
  font-weight: 600;
  color: #0b1533;
  position: sticky;
  top: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.schedule-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 14px;
  color: #4a5568;
}

.schedule-table tbody tr:hover {
  background: #f8f9fb;
}

.schedule-table tbody tr:last-child td {
  border-bottom: none;
}

.calc-disclaimer {
  font-size: 13px;
  color: #718096;
  margin-top: 24px;
  font-style: italic;
  text-align: center;
  padding: 16px;
  background: #f8f9fb;
  border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .calculator-container {
    padding: 40px 20px;
  }
  
  .calculator-content h3 {
    font-size: 28px;
  }
  
  .calc-desc {
    font-size: 16px;
  }
  
  .rate-bands-table {
    padding: 20px;
    overflow-x: auto;
  }
  
  .calculator-form {
    padding: 28px 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-primary, .btn-secondary {
    width: 100%;
  }
}

/* Premium Scroll Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations for child elements */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 300ms; }

.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ensure content fits properly */
.steps-panel .section-content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px;
}

/* Mobile: Stack vertically */
@media (max-width: 1024px) {
  #how-it-works {
    height: auto;
    overflow: visible;
  }
  
  .steps-panel,
  .calculator-panel-right {
    width: 100vw;
    height: auto;
    min-height: 100vh;
  }
}

/* KPI Grid Large (for panel display) */
.kpi-grid-large {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}

.kpi-grid-large .kpi-card {
  text-align: center;
  padding: 40px 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.kpi-grid-large .kpi-num {
  font-size: 56px;
  font-weight: 700;
  color: #0b1533;
  margin-bottom: 16px;
}

.kpi-grid-large .kpi-label {
  font-size: 16px;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.kpi-grid-large .kpi-desc {
  font-size: 14px;
  color: #718096;
  margin: 0;
}

/* Feature Grid Compact (3 columns for panels) */
.feature-grid-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.feature-grid-compact .feature-card {
  background: white;
  padding: 32px 28px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.feature-grid-compact .feature-card h4 {
  font-size: 20px;
  font-weight: 600;
  color: #0b1533;
  margin-bottom: 12px;
}

.feature-grid-compact .feature-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
  margin: 0;
}

/* Mobile adjustments for About panels */
@media (max-width: 1024px) {
  .kpi-grid-large {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .feature-grid-compact {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .kpi-grid-large .kpi-num {
    font-size: 42px;
  }
}

/* Full grid layouts for single-panel content */
.steps-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.feature-grid-all {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
  .steps-grid-full {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .feature-grid-all {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .steps-grid-full {
    grid-template-columns: 1fr;
  }
  
  .feature-grid-all {
    grid-template-columns: 1fr;
  }
}