:root{
  --accent:#FF0800;
  --bg:#fafafa;
  --card:#ffffff;
  --muted:#f5f5f5;
  --border:#e5e5e5;
  --text:#111111;
  --sub:#666666;
  --sub2:#777777;
  --brand:#111111;
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --radius-xl: 24px;
  --radius-lg: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background: transparent;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: transparent;
  color:var(--text);
}

a{color:inherit}

/* Google Material Symbols */
.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.container{max-width:1120px;margin:0 auto;padding:0 18px}

.header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
  background: rgba(250,250,250,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.logo{
  width:36px;height:36px;border-radius:14px;background:var(--brand);
}
.brand-title{font-size:15px;font-weight:900; line-height:1.05}
.brand-sub{font-size:12px;color:#888; line-height:1.05}

.nav{display:flex; flex:1 1 auto; min-width:0; gap:14px; align-items:center; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling: touch;}
.nav a{
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:#555;
}
.nav a:hover{color:#111}

.header-cta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px;
  padding:10px 14px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.btn-outline{border-color:var(--border); background:#fff; color:#111}
.btn-outline:hover{background:#f2f2f2}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{filter: brightness(0.94)}
.icon-btn:hover{background:#f2f2f2}
.icon{font-size:18px; line-height:1}

main{min-height:60vh}
section{scroll-margin-top:92px}
.section{padding:64px 0}
.eyebrow{font-size:12px; font-weight:900; letter-spacing:.12em; color:#777; text-transform:uppercase}
.h2{margin:10px 0 0; font-size:34px; letter-spacing:-.02em; color:#111;}
.sub{margin:14px 0 0; color:var(--sub); line-height:1.6; font-size:16px; max-width:64ch}
@media (min-width: 768px){
  .h2{font-size:40px}
}

.hero{padding:64px 0 78px}
.hero-grid{display:grid; gap:34px}
@media (min-width: 900px){
  .hero-grid{grid-template-columns: 1.05fr .95fr; align-items:center; gap:44px}
  .hero{padding:86px 0 104px}
}

.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  padding:6px 10px;
  font-size:12px; font-weight:700;
  color:#444;
  box-shadow: var(--shadow);
}
.h1{
  margin:18px 0 0;
  font-size:42px;
  letter-spacing:-.03em;
  line-height:1.12;
}
.h1 span{color:#666}
@media (min-width: 768px){
  .h1{font-size:52px}
}
.hero-p{margin:16px 0 0; color:var(--sub); line-height:1.65; font-size:16px; max-width:62ch}
.hero-actions{margin-top:22px; display:flex; flex-direction:column; gap:10px}
@media (min-width: 520px){
  .hero-actions{flex-direction:row}
}

.stats{margin-top:26px; display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (min-width: 768px){
  .stats{grid-template-columns: 1fr 1fr 1fr}
}
.stat{
  border:1px solid var(--border);
  background:#fff;
  border-radius:18px;
  padding:12px 14px;
  box-shadow: var(--shadow);
}
.stat .k{font-size:12px; font-weight:900; color:#777}
.stat .v{margin-top:6px; font-size:13px; font-weight:900; color:#111}

.preview-wrap{position:relative}
.preview-card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:28px;
  padding:18px;
  box-shadow: var(--shadow);
  position:relative;
}
.preview-bg{
  position:absolute; inset:-22px; z-index:-1;
  border-radius:46px;
  background: linear-gradient(180deg, #ffffff, #fafafa 40%, #f3f3f3);
}
.preview-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.badge{
  border:1px solid var(--border);
  background:#f5f5f5;
  padding:6px 10px;
  border-radius:16px;
  font-size:12px;
  font-weight:900;
  color:#444;
}
.preview-stack{margin-top:16px; display:grid; gap:10px}
.panel{
  border:1px solid var(--border);
  background:#f5f5f5;
  border-radius:18px;
  padding:14px;
}
.row{display:flex; align-items:center; gap:10px}
.avatar{width:36px;height:36px;border-radius:14px;}
.panel-title{font-size:14px;font-weight:900}
.panel-sub{font-size:12px;color:#777}
.grid3{margin-top:12px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px}
.mini{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:10px;
}
.mini .emoji{font-size:16px}
.mini .t{margin-top:6px;font-size:12px;font-weight:900}

/* Features section custom grouped 2-column layout */
.features-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:stretch; /* equal column height */
}

.feature-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
}

/* Right column has only 2 cards, so make them fill the same total height */
.feature-col-right .feature-fill{
  flex:1;
  display:flex;
}

.feature-col-right .feature-fill .card-top{
  flex:1;
}

/* Mobile / tablet fallback */
@media (max-width: 900px){
  .features-layout{
    grid-template-columns: 1fr;
  }

  .feature-col-right .feature-fill{
    flex:unset;
  }
}

.card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:22px;
  padding:18px;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06); transform: translateY(-1px)}
.card-top{display:flex; gap:12px}
.icon-box{
  width:40px;height:40px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#f5f5f5;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.card h3{margin:0; font-size:16px; font-weight:900}
.card p{margin:8px 0 0; font-size:13px; color:var(--sub); line-height:1.6}
.bullets{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.bullets li{display:flex; gap:10px; font-size:13px; color:#444; line-height:1.5}
.dot{margin-top:7px; width:6px; height:6px; border-radius:99px; background:#bdbdbd; flex:0 0 auto}

.split{display:grid; gap:12px}
@media (min-width: 900px){ .split{grid-template-columns: 2fr 1fr} }
.two-col{display:grid; gap:12px}
@media (min-width: 768px){ .two-col{grid-template-columns: 1fr 1fr} }
.three-col{display:grid; gap:12px}
@media (min-width: 900px){ .three-col{grid-template-columns: 1fr 1fr 1fr} }

.footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-row{display:flex; gap:14px; flex-wrap:wrap}
.footer a{color:#666; text-decoration:none; font-weight:700; font-size:14px}
.footer a:hover{color:#111}

.cta{
  border:1px solid var(--border);
  background:#111;
  color:#fff;
  border-radius:28px;
  padding:26px;
  box-shadow: var(--shadow);
}
@media (min-width: 768px){ .cta{padding:38px} }
.cta-grid{display:grid; gap:18px}
@media (min-width: 900px){ .cta-grid{grid-template-columns: 1fr 1fr; align-items:center} }
.cta-pill{
  display:inline-flex; align-items:center;
  background: rgba(255,255,255,.10);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px; font-weight:900;
}
.cta h3{margin:12px 0 0; font-size:28px; letter-spacing:-.02em}
.cta p{margin:10px 0 0; color: rgba(255,255,255,.8); line-height:1.6; font-size:14px}
.cta-box{
  border-radius:18px;
  background: rgba(255,255,255,.06);
  padding:16px;
}
.cta-box .k{font-size:14px;font-weight:900}
.cta-box .copy{margin-top:8px; font-size:13px; color: rgba(255,255,255,.8); line-height:1.6}
.cta-actions{margin-top:14px; display:flex; flex-direction:column; gap:10px}
@media (min-width: 520px){ .cta-actions{flex-direction:row} }

.form-card{
  border:1px solid var(--border);
  background:#fff;
  border-radius:28px;
  padding:22px;
  box-shadow: var(--shadow);
}
@media (min-width: 768px){ .form-card{padding:30px} }
.label{font-size:12px; font-weight:900; color:#666}
.input{
  margin-top:8px;
  width:100%;
  border-radius:18px;
  border:1px solid var(--border);
  background:#fff;
  padding:12px 14px;
  font-size:14px;
  outline:none;
}
.input:focus{border-color:#111}
.form-grid-2{
  display:grid;
  /* Name + Phone side-by-side */
  grid-template-columns: 1fr 1fr;
  gap:12px;
}


.error{
  border:1px solid #fecaca;
  background:#fef2f2;
  color:#b91c1c;
  border-radius:18px;
  padding:12px 14px;
  font-size:14px;
}
.note{
  margin-top:10px;
  font-size:12px;
  color:#777;
  line-height:1.6;
}
.hidden{display:none}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(17,17,17,.96);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  max-width: calc(100% - 28px);
  width: fit-content;
  z-index: 200;
}
.toast.hidden{display:none}

/* Background video */
.bg-media{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.10);
  opacity: 0.58;
}
.bg-overlay{
  position: absolute;
  inset: 0;
  background: rgba(250,250,250,0.55);
}

/* Foreground layer */
.page{
  position: relative;
  z-index: 1;
}

/* Replace placeholder logo block with svg image */
.brand-logo{
  width: 38px;
  height: 38px;
  display: block;
}

.nav::-webkit-scrollbar{display:none}

.btn-primary:disabled{opacity:0.75; cursor:not-allowed}

.cta-list{
  margin:10px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.cta-list li{
  position:relative;
  padding-left:16px;
  color: rgba(255,255,255,.88);
  font-size:13px;
  line-height:1.55;
}
.cta-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color: rgba(255,255,255,.65);
}

/* Responsive header nav */
.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle:hover{background:#f2f2f2}

/* Slide-out mobile menu */
.mobile-nav{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}
.mobile-nav__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  opacity:0;
  transition: opacity .2s ease;
}
.mobile-nav__panel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(86vw, 360px);
  background: rgba(250,250,250,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left:1px solid var(--border);
  box-shadow: -12px 0 30px rgba(0,0,0,.12);
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
  display:flex;
  flex-direction:column;
  padding:16px;
  gap:14px;
}
.mobile-nav__panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mobile-nav__title{
  font-size:14px;
  font-weight:900;
  color:#111;
}
.icon-btn{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mobile-nav__links{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px;
}
.mobile-nav__links a{
  text-decoration:none;
  font-size:15px;
  font-weight:900;
  color:#222;
  padding:10px 10px;
  border-radius:14px;
}
.mobile-nav__links a:hover{background:#f2f2f2}

.mobile-nav__cta{
  margin-top:auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Open state */
body.nav-open{overflow:hidden;}
body.nav-open .mobile-nav{pointer-events:auto;}
body.nav-open .mobile-nav__overlay{opacity:1;}
body.nav-open .mobile-nav__panel{transform: translateX(0);}

/* Breakpoint: <= 768px */
@media (max-width: 768px){
  .nav{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-inner{gap:10px}
  .header-cta{gap:10px}
  .header-cta .btn{padding:9px 12px; border-radius:16px}
}