:root {
  --stt-navy: #0b3d7a;
  --stt-navy-dark: #072a56;
  --stt-sun: #fbb116;
  --stt-sun-dark: #e89a00;
  --stt-green: #4cb04f;
  --stt-grey: #6b6e7b;
  --bs-primary: var(--stt-navy);
  --bs-primary-rgb: 11, 61, 122;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
.btn-primary { --bs-btn-bg: var(--stt-navy); --bs-btn-border-color: var(--stt-navy); --bs-btn-hover-bg: var(--stt-navy-dark); --bs-btn-hover-border-color: var(--stt-navy-dark); --bs-btn-active-bg: var(--stt-navy-dark); }
.btn-sun { --bs-btn-bg: var(--stt-sun); --bs-btn-border-color: var(--stt-sun); --bs-btn-color: #1b1b1b; --bs-btn-hover-bg: var(--stt-sun-dark); --bs-btn-hover-border-color: var(--stt-sun-dark); --bs-btn-hover-color: #1b1b1b; --bs-btn-active-bg: var(--stt-sun-dark); --bs-btn-active-color:#1b1b1b; font-weight: 600; }
.text-navy { color: var(--stt-navy); }
.text-sun { color: var(--stt-sun); }
.bg-navy { background: var(--stt-navy); }
.navbar { box-shadow: 0 1px 8px rgba(0,0,0,.08); }
.navbar-brand img { height: 46px; width: auto; }
.hero {
  background: linear-gradient(120deg, rgba(7,42,86,.94) 0%, rgba(11,61,122,.82) 55%, rgba(11,61,122,.55) 100%),
              repeating-linear-gradient(45deg, #1a4f93 0 14px, #174784 14px 28px);
  color: #fff; padding: 6rem 0 5rem;
}
.hero h1 { font-weight: 800; letter-spacing: -.5px; }
.hero .tagline { letter-spacing: .15em; text-transform: uppercase; font-size: .85rem; color: var(--stt-sun); font-weight: 600; }
.hero-stat { border-left: 3px solid var(--stt-sun); padding-left: .9rem; }
.section-title { font-weight: 800; color: var(--stt-navy); }
.section-kicker { text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; font-weight: 700; color: var(--stt-sun-dark); }
.icon-circle { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(251,177,22,.15); color: var(--stt-sun-dark); font-size: 1.5rem; }
.card-lift { transition: transform .2s, box-shadow .2s; border: 0; box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.placeholder-img { aspect-ratio: 16/10; background: linear-gradient(135deg, #e6ebf2, #d3dbe7); display: grid; place-items: center; color: #8a97ab; font-size: 2.5rem; }
.placeholder-note { border: 2px dashed #b9c4d6; border-radius: .75rem; background: #fff; }
.tag-placeholder { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.filter-btn.active { background: var(--stt-navy); color: #fff; border-color: var(--stt-navy); }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--stt-navy); color: #fff; display: grid; place-items: center; font-weight: 700; }
.quote-card { box-shadow: 0 10px 40px rgba(0,0,0,.12); border: 0; }
.quote-section { background: linear-gradient(180deg, #f3f6fb 0%, #e7edf6 100%); }
.form-section-title { color: var(--stt-navy); font-weight: 700; border-bottom: 2px solid var(--stt-sun); display: inline-block; padding-bottom: .15rem; margin-bottom: 1rem; }
.stepper { display: flex; justify-content: space-between; position: relative; margin-bottom: 2.5rem; }
.stepper::before { content: ""; position: absolute; top: 20px; left: 10%; right: 10%; height: 3px; background: #dbe2ee; }
.stepper-progress { position: absolute; top: 20px; left: 10%; height: 3px; background: var(--stt-sun); width: 0; transition: width .3s; }
.stepper-item { flex: 1; text-align: center; position: relative; z-index: 1; font-size: .8rem; color: var(--stt-grey); }
.stepper-dot { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid #dbe2ee; display: grid; place-items: center; margin: 0 auto .4rem; font-weight: 700; transition: all .3s; }
.stepper-item.active .stepper-dot { border-color: var(--stt-navy); color: var(--stt-navy); }
.stepper-item.active { color: var(--stt-navy); font-weight: 600; }
.stepper-item.done .stepper-dot { background: var(--stt-sun); border-color: var(--stt-sun); color: #1b1b1b; }
.quote-step { display: none; }
.quote-step.active { display: block; animation: stepIn .3s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.summary dt { color: var(--stt-grey); font-weight: 500; }
/* ---- Motion ---- */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }
.hero-sun { position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; z-index: 1; pointer-events: none; }
.hero-sun .core { position: absolute; inset: 130px; border-radius: 50%; background: radial-gradient(circle, #ffd45e 0%, var(--stt-sun) 70%); box-shadow: 0 0 80px 30px rgba(251,177,22,.55); animation: pulse 4s ease-in-out infinite; }
.hero-sun .rays { position: absolute; inset: 0; border-radius: 50%; animation: spin 40s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(251,177,22,.28) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, transparent 72%); mask: radial-gradient(circle, transparent 28%, #000 30%, transparent 72%); }
.particle { position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 50%; background: var(--stt-sun); opacity: 0; z-index: 1; animation: rise linear infinite; }
.logo-float { animation: floaty 6s ease-in-out infinite; }
.logo-ring-wrap { position: relative; display: inline-block; }
.logo-ring-wrap::before { content: ""; position: absolute; inset: -14px; border-radius: 2rem; border: 3px dashed rgba(251,177,22,.7); animation: spin 30s linear infinite; }
.hero h1 span.hl { background: linear-gradient(90deg, var(--stt-sun), #ffe28a, var(--stt-sun)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 4s linear infinite; }
.hero-fade { opacity: 0; transform: translateY(24px); animation: fadeUp .8s ease forwards; }
.btn-sun { position: relative; overflow: hidden; }
.btn-sun::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: sheen 3.5s ease-in-out infinite; }
.btn-pulse { animation: ring 2.4s ease-out infinite; }
.navbar { transition: padding .25s, box-shadow .25s; }
.navbar.scrolled { padding-top: .2rem; padding-bottom: .2rem; box-shadow: 0 4px 18px rgba(0,0,0,.12); }
.navbar-brand img { transition: height .25s; }
.navbar.scrolled .navbar-brand img { height: 38px; }
.nav-link { position: relative; }
.nav-link::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 2px; height: 2px; background: var(--stt-sun); transform: scaleX(0); transition: transform .25s; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.icon-circle { transition: transform .35s, background .35s, color .35s; }
.card-lift:hover .icon-circle { transform: rotate(360deg) scale(1.1); background: var(--stt-sun); color: #1b1b1b; }
.placeholder-img { transition: transform .5s; }
.card-lift:hover .placeholder-img { transform: scale(1.06); }
.card-lift .overflow-hidden, .card-lift.overflow-hidden { overflow: hidden; }
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s); }
.reveal.from-left { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.zoom { transform: scale(.9); }
.reveal.in { opacity: 1; transform: none; }
.carousel-item { transition: transform .8s ease, opacity .8s ease; }
.step-num { transition: transform .3s; }
.col-6:hover > .step-num { transform: scale(1.15) rotate(-8deg); }
.check-pop { transition: transform .3s; }
.d-flex:hover > .check-pop { transform: scale(1.3) rotate(10deg); }
/* Energy flow diagram */
.flow-wrap { max-width: 920px; margin: 0 auto; }
.flow-line { stroke: var(--stt-sun); stroke-width: 4; fill: none; stroke-dasharray: 10 10; animation: dash 1s linear infinite; stroke-linecap: round; }
.flow-line.grid { stroke: var(--stt-grey); }
.flow-line.rev { animation-direction: reverse; }
.flow-node { fill: #fff; stroke: var(--stt-navy); stroke-width: 3; }
.flow-label { font-size: 15px; font-weight: 600; fill: var(--stt-navy); text-anchor: middle; }
.flow-sub { font-size: 12px; fill: var(--stt-grey); text-anchor: middle; }
.flow-sun-rays { transform-origin: 90px 70px; animation: spin 14s linear infinite; }
.flow-bat-fill { animation: charge 4s ease-in-out infinite; transform-origin: bottom; transform-box: fill-box; }
.flow-icon { font-size: 26px; fill: var(--stt-navy); text-anchor: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes shine { to { background-position: 200% center; } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@keyframes sheen { 0%,60% { left: -75%; } 100% { left: 130%; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(251,177,22,.6); } 100% { box-shadow: 0 0 0 18px rgba(251,177,22,0); } }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-110vh) scale(1.4); opacity: 0; } }
@keyframes slide { to { background-position: -200% 0; } }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes charge { 0%,100% { transform: scaleY(.25); } 60% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero-fade { opacity: 1 !important; transform: none !important; }
}
.spectrum { height: 6px; background: linear-gradient(90deg, #e84a8a, #8e5ea8, #1e88d4, #fbb116, #f08a24, #4cb04f, #e84a8a, #8e5ea8, #1e88d4, #fbb116, #f08a24, #4cb04f, #e84a8a) 0 0 / 200% 100%; animation: slide 10s linear infinite; }
footer { background: var(--stt-navy-dark); color: #c9d4e6; }
footer a { color: #c9d4e6; text-decoration: none; }
footer a:hover { color: var(--stt-sun); }
.logo-white-box { background: #fff; border-radius: .5rem; padding: .5rem .75rem; display: inline-block; }