:root{
  --navy:#0F2A4A;
  --navy-deep:#0A1E38;
  --blue:#2F5FCE;
  --sky:#4FB6E8;
  --panel:#F5F8FC;
  --line:#E1E7F0;
  --text:#16263D;
  --muted:#5B6B84;
  --off-white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif; color:var(--text); background:var(--off-white);}
h1,h2,h3{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em;}
a{text-decoration:none; color:inherit;}
section{padding:96px clamp(20px,6vw,80px);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,5vw,64px); border-bottom:1px solid var(--line);
}
nav .left{display:flex; align-items:center; gap:26px;}
nav img{height:36px;}
nav .navlinks{display:flex; gap:22px; font-size:0.9rem; font-weight:500; color:var(--muted);}
nav .navlinks a:hover{color:var(--blue);}
nav .navlinks a.active{color:var(--blue);}
nav .cta{
  background:var(--blue); color:#fff; font-weight:600; font-size:0.9rem;
  padding:11px 22px; border-radius:6px; transition:background .2s ease;
}
nav .cta:hover{background:var(--navy);}
@media (max-width:780px){ nav .navlinks{display:none;} }

/* ---------- PAGE HEADER (non-home pages) ---------- */
.page-header{
  background:linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 100%);
  padding:80px clamp(20px,6vw,80px) 60px; text-align:left;
}
.page-header .eyebrow{margin-bottom:18px;}
.page-header h1{font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:700; line-height:1.25; max-width:20ch;}
.page-header p{color:var(--muted); font-size:1.05rem; max-width:56ch; margin-top:16px; line-height:1.7;}

/* ---------- HERO (home) ---------- */
.hero{
  background:linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 100%);
  padding-top:80px; padding-bottom:80px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
.eyebrow{
  display:inline-block; font-size:0.8rem; font-weight:600; color:var(--blue);
  background:#EAF1FF; padding:6px 14px; border-radius:20px; margin-bottom:22px;
}
.hero h1{font-size:clamp(2rem,4vw,3rem); line-height:1.2; font-weight:700; margin-bottom:20px;}
.hero h1 span{color:var(--blue);}
.hero p.sub{color:var(--muted); font-size:1.08rem; line-height:1.7; max-width:50ch; margin-bottom:34px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.btn-primary{
  background:var(--blue); color:#fff; font-weight:600; font-size:0.95rem;
  padding:15px 28px; border-radius:6px; display:inline-block; transition:transform .2s ease, background .2s ease;
}
.btn-primary:hover{background:var(--navy); transform:translateY(-2px);}
.btn-ghost{
  border:1px solid var(--line); color:var(--text); font-weight:600; font-size:0.95rem;
  padding:15px 28px; border-radius:6px; transition:border-color .2s ease;
}
.btn-ghost:hover{border-color:var(--blue);}
.stat-row{display:flex; gap:40px; flex-wrap:wrap;}
.stat-row div{border-left:2px solid var(--line); padding-left:14px;}
.stat-row .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; color:var(--navy);}
.stat-row .lbl{font-size:0.82rem; color:var(--muted); margin-top:2px;}

.hero-visual{
  background:var(--navy-deep); border-radius:12px; padding:24px; position:relative; overflow:hidden;
}
.hero-visual img.logo-big{width:64%; margin:0 auto; display:block; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.35));}
.hero-visual .tag{color:#AFC3E0; font-size:0.75rem; text-align:center; margin-top:14px;}

/* ---------- PROBLEM / SOLUTION ---------- */
.compare{background:var(--panel);}
.sec-head{max-width:640px; margin-bottom:56px;}
.sec-head .eyebrow{background:#fff; border:1px solid var(--line);}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; line-height:1.3;}
.sec-head p{color:var(--muted); margin-top:12px; font-size:1rem;}
.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.compare-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px;}
.compare-card h3{font-size:1.1rem; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.compare-card ul{list-style:none;}
.compare-card li{display:flex; gap:10px; padding:9px 0; font-size:0.94rem; color:var(--muted); border-top:1px solid var(--line);}
.compare-card li:first-child{border-top:none;}
.tag-old{color:#B5482D; background:#FBEAE4; padding:3px 10px; border-radius:16px; font-size:0.78rem; font-weight:600;}
.tag-new{color:var(--blue); background:#EAF1FF; padding:3px 10px; border-radius:16px; font-size:0.78rem; font-weight:600;}

/* ---------- HOW IT WORKS ---------- */
.how{background:#fff;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.step{border:1px solid var(--line); border-radius:10px; padding:28px;}
.step .idx{
  width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; margin-bottom:18px;
}
.step h3{font-size:1.08rem; margin-bottom:10px; font-weight:600;}
.step p{color:var(--muted); font-size:0.93rem; line-height:1.65;}

/* ---------- PLATFORM FEATURES ---------- */
.platform{background:var(--panel);}
.feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.feat-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px;}
.feat-card .ic{width:34px; height:34px; margin-bottom:16px; color:var(--blue);}
.feat-card h3{font-size:1rem; margin-bottom:8px; font-weight:600;}
.feat-card p{color:var(--muted); font-size:0.88rem; line-height:1.6;}

/* ---------- DEVELOPER PROFIT ---------- */
.profit{background:var(--navy-deep); color:#fff;}
.profit .eyebrow{background:rgba(255,255,255,0.1); color:var(--sky);}
.profit .sec-head h2{color:#fff;}
.profit .sec-head p{color:#AFC3E0;}
.profit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.profit-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:26px;}
.profit-card .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.6rem; color:var(--sky); margin-bottom:12px;}
.profit-card h3{font-size:1rem; margin-bottom:8px; font-weight:600;}
.profit-card p{color:#AFC3E0; font-size:0.88rem; line-height:1.6;}

/* ---------- VIDEO SHOWCASE ---------- */
.video-sec{background:var(--panel);}
.video-wrap{
  max-width:880px; margin:0 auto; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:#000; box-shadow:0 20px 50px -30px rgba(15,42,74,0.4);
}
.video-wrap video{width:100%; display:block; max-height:520px;}

/* ---------- DEMO SLIDER ---------- */
.demo{background:#fff; text-align:center;}
.slider-wrap{
  position:relative; max-width:880px; margin:0 auto; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  border:1px solid var(--line);
}
.slide-layer{position:absolute; inset:0;}
.slide-after{clip-path:inset(0 0 0 50%);}
.slider-label{position:absolute; top:14px; font-size:0.72rem; font-weight:600; color:#fff; background:rgba(15,42,74,0.7); padding:5px 12px; border-radius:20px; z-index:4;}
.slider-label.before{left:14px;} .slider-label.after{right:14px;}
.drag-handle{position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--sky); transform:translateX(-1px); z-index:5;}
.drag-handle::after{
  content:"⇔"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:36px; height:36px; background:var(--sky); color:var(--navy-deep); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
#rangeCtl{width:100%; max-width:880px; margin:24px auto 0; display:block; height:4px; -webkit-appearance:none; appearance:none; background:var(--line); border-radius:4px;}
#rangeCtl::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--blue); cursor:pointer;}
.demo-caption{color:var(--muted); margin-top:14px; font-size:0.92rem;}

/* ---------- TESTIMONIAL ---------- */
.quote-sec{background:#fff; text-align:center;}
.quote-box{max-width:720px; margin:0 auto;}
.quote-box p{font-family:'Space Grotesk',sans-serif; font-size:clamp(1.15rem,2.2vw,1.45rem); font-weight:600; line-height:1.6; margin-bottom:22px;}
.quote-who{color:var(--muted); font-size:0.9rem;}

/* ---------- CONTACT / FINAL CTA ---------- */
.final-cta{background:var(--panel); text-align:center;}
.final-cta h2{font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:700; max-width:20ch; margin:0 auto 16px;}
.final-cta p{color:var(--muted); max-width:50ch; margin:0 auto 36px; line-height:1.7;}
.form-row{max-width:560px; margin:0 auto; display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.form-row input, .form-row textarea{flex:1; min-width:180px; border:1px solid var(--line); padding:14px 16px; border-radius:6px; font-size:0.92rem; background:#fff; font-family:'Inter',sans-serif;}
.form-row textarea{width:100%; min-height:110px; resize:vertical;}
.form-row input:focus, .form-row textarea:focus, #rangeCtl:focus, a:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}

.contact-row{
  display:flex; justify-content:center; gap:32px; flex-wrap:wrap; margin-top:34px;
}
.contact-row a{
  display:flex; align-items:center; gap:8px; font-size:0.92rem; font-weight:600; color:var(--navy);
  transition:color .2s ease;
}
.contact-row a svg{width:18px; height:18px; color:var(--blue);}
.contact-row a:hover{color:var(--blue);}

.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:900px; margin:0 auto 50px;}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px; text-align:center;}
.contact-card .ic{width:32px; height:32px; margin:0 auto 14px; color:var(--blue);}
.contact-card h3{font-size:1rem; margin-bottom:8px; font-weight:600;}
.contact-card a{color:var(--muted); font-size:0.92rem;}
.contact-card a:hover{color:var(--blue);}

footer{
  border-top:1px solid var(--line); padding:30px clamp(20px,6vw,80px);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:0.85rem; color:var(--muted);
}
footer img{height:26px;}
.footer-contact{display:flex; gap:20px; flex-wrap:wrap;}
.footer-contact a:hover{color:var(--blue);}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr;}
  .compare-grid, .steps{grid-template-columns:1fr;}
  .profit-grid, .feat-grid{grid-template-columns:1fr 1fr;}
  .contact-cards{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .profit-grid, .feat-grid{grid-template-columns:1fr;}
}