:root{
  /* Light theme palette tuned to hero video */
  --bg:#ffffff;
  --surface:#f4f7fb;
  --text:#0b1220;
  --muted:#5f6b7a;
  --accent:#0ea5e9; /* vibrant blue from video/logo */
  --accent-2:#f97316; /* subtle highlight */
  --card:#ffffff;
  --border:#e6edf5;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
}
.container{width:min(1120px,92%); margin-inline:auto}
.site-header{position:fixed; inset-block-start:0; inset-inline:0; backdrop-filter:saturate(140%) blur(8px); background:color-mix(in oklab, var(--bg) 92%, transparent); border-block-end:1px solid var(--border); z-index:20}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:8px 0}
.site-header-placeholder{height:60px}
.brand{display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none}
.brand-mark{height:28px; width:auto}
.brand-text{font-weight:700; font-family:'IBM Plex Sans', Inter, system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; font-size:36px; letter-spacing:0.2px}
.brand-o{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:500; font-size:14px}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--text); text-decoration:underline; text-underline-offset:6px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:600; border:1px solid var(--border); transition: box-shadow .2s ease, transform .15s ease}
.btn-small{padding:8px 12px; border-radius:8px}
.btn-primary{background:var(--accent); color:#041018; border-color:transparent}
.btn-secondary{background:var(--surface); color:var(--text)}
.btn-primary:hover{box-shadow:0 6px 18px rgba(14,165,233,0.25); transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid color-mix(in oklab, var(--accent) 40%, #fff 60%); outline-offset:2px}

.hero{position:relative; min-height:92vh; display:grid; place-items:center; padding-top:62px; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(2,11,19,0.55), rgba(2,11,19,0.2) 35%, transparent 60%)}
.hero-media, .hero-canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-overlay{position:relative; z-index:10; text-align:center; padding:24px}
.hero-title{font-size:clamp(22px, 3.8vw, 40px); line-height:1.3; letter-spacing:-0.01em; margin:0 auto 12px; color:#ffffff; text-shadow:0 2px 8px rgba(0,0,0,.35); transition:opacity 1s ease; max-width:900px; padding:0 24px}
.hero-subheadline{display:block; color:#e8f3ff; max-width:820px; margin:8px auto 0; font-size:clamp(14px, 2.2vw, 18px); text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero-ctas{display:flex; gap:12px; justify-content:center}
.hero-footnote{margin-top:16px; color:#6b7280; font-size:12px}
.hero-footnote a{color:#9fd}

.section{padding:64px 0; border-top:1px solid var(--border)}
.two-col{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; transition: box-shadow .25s ease, transform .2s ease, opacity .4s ease}
.card h3{margin-top:0}
.card:hover{box-shadow:0 10px 24px rgba(2,11,19,0.06); transform:translateY(-2px)}
.card.reveal{opacity:0; transform:translateY(10px)}
.card.reveal.in{opacity:1; transform:none}
.note{background:linear-gradient(180deg, #f8fafc, #f2f6fb)}
.feature-card{ text-align:center }
.feature-card i{ font-size:28px; color:var(--accent); margin-bottom:8px }
.section-title{margin:0 0 16px; letter-spacing:-0.01em}
.center{ text-align:center }
.section-title.center::after{content:""; display:block; width:64px; height:3px; background:var(--accent); margin:10px auto 0; border-radius:2px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; position:relative; padding-inline-start:64px}
.step h3{margin-top:0}
.step-num{position:absolute; inset-inline-start:16px; inset-block-start:16px; background:color-mix(in oklab, var(--accent) 30%, #fff 70%); color:#05202a; border-radius:50%; width:32px; height:32px; display:grid; place-items:center; font-weight:800}

.metrics-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.metric{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px; text-align:center}
.metric-value{font-size:28px; font-weight:800}
.metric-label{color:var(--muted)}
.metric-footnote{color:var(--muted); margin-top:10px}

.bullets{margin:0; padding-left:18px}
.bullets li{margin-bottom:6px}

.section-cta{padding:80px 0 96px}
.cta-inner{display:grid; gap:16px; justify-items:center}
.cta-form{display:flex; gap:10px; flex-wrap:wrap}
.cta-form input{background:#ffffff; border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--text); min-width:260px}
.cta-thanks{color:var(--accent)}

/* Contact */
.contact-wrap{max-width:760px; margin-inline:auto}
.contact-form form{display:grid; gap:12px}
.contact-form input, .contact-form select, .contact-form textarea{background:#ffffff; border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--text)}
.contact-form textarea{min-height:140px; resize:vertical}
.contact-form button{width:max-content}

.site-footer{
  background: linear-gradient(180deg, #122033 0%, #0f1b2e 100%);
  color:#ffffff;
  padding:56px 0 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.footer-content{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start}
.footer-section{min-height:100%; display:flex; flex-direction:column; gap:10px}
.footer-section h4{margin:0 0 6px; color:#ffffff}
.footer-section p{margin:0; color:rgba(255,255,255,0.82)}
.footer-section ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
/* Column alignment: left, center, right */
.footer-content .footer-section:nth-child(1){align-items:flex-start; text-align:left}
.footer-content .footer-section:nth-child(2){align-items:center; text-align:center}
.footer-content .footer-section:nth-child(3){align-items:flex-end; text-align:right}
.site-footer a{color:rgba(255,255,255,0.86); text-decoration:none}
.site-footer a:hover{color:#ffffff}
.social-links{display:flex; gap:12px}
.footer-content .footer-section:nth-child(3) .social-links{justify-content:flex-end}
.footer-bottom{text-align:center; border-top:1px solid rgba(255,255,255,0.12); margin-top:20px; padding-top:10px; color:rgba(255,255,255,0.8)}

@media (max-width: 920px){
  .two-col{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .footer-content{grid-template-columns:1fr}
  .footer-section{align-items:center; text-align:center}
  .footer-content .footer-section:nth-child(3) .social-links{justify-content:center}
}