*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0F2B5B;
  --blue:#1D4ED8;
  --blue-light:#3B82F6;
  --blue-pale:#EFF6FF;
  --slate:#475569;
  --slate-light:#94A3B8;
  --border:#E2E8F0;
  --bg:#FFFFFF;
  --bg2:#F8FAFC;
  --bg3:#F1F5F9;
  --text:#0F172A;
  --green:#059669;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:68px;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.logo{font-size:1.3rem;font-weight:800;color:var(--navy);letter-spacing:-0.03em;cursor:pointer}
.logo span{color:var(--blue)}
.logo a{text-decoration:none;color:inherit}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:110}
.hamburger span{width:25px;height:3px;background:var(--navy);border-radius:2px;transition:0.3s}

nav ul{display:flex;align-items:center;gap:2rem;list-style:none}
nav ul a{color:var(--slate);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color 0.2s}
nav ul a:hover{color:var(--navy)}
.nav-cta{background:var(--navy)!important;color:#fff!important;padding:0.5rem 1.25rem;border-radius:6px;font-weight:600!important;transition:background 0.2s!important}
.nav-cta:hover{background:var(--blue)!important}

/* MOBILE NAV */
@media (max-width: 768px) {
  .hamburger{display:flex}

  nav ul{
    position:fixed;
    top:0;
    right:-100%;
    width:70%;
    height:100vh;
    background:#fff;
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    box-shadow:-10px 0 30px rgba(0,0,0,0.05);
    transition:0.4s ease;
    z-index:105;
  }

  nav ul.active{right:0}

  #nav-overlay.active{display:block;opacity:1}

  .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px, 6px)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px, -6px)}

  .hero{flex-direction:column; padding-top:7rem; text-align:center}
  .hero-sub{margin:0 auto 2.5rem}
  .ctas{justify-content:center}
  .trust{flex-wrap:wrap; justify-content:center; gap:1rem}
  .trust-sep{display:none}

  .dash-body{grid-template-columns:1fr}
  .dash-side{display:none}

  .feat-grid, .price-grid{grid-template-columns:1fr}
  .stats-banner .inner{grid-template-columns:repeat(2, 1fr)}
}


/* HERO */
.hero{padding:9rem 5% 5rem;display:flex;align-items:center;gap:5rem;max-width:1200px;margin:0 auto}
.hero-left{flex:1;min-width:0}
.hero-badge{display:inline-flex;align-items:center;gap:0.5rem;background:var(--blue-pale);border:1px solid #BFDBFE;color:var(--blue);font-size:0.75rem;font-weight:600;padding:0.35rem 0.9rem;border-radius:100px;margin-bottom:1.75rem;letter-spacing:0.02em}
.badge-dot{width:6px;height:6px;background:var(--blue-light);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
.hero h1{font-size:clamp(2.5rem,5vw,3.8rem);font-weight:800;line-height:1.1;letter-spacing:-0.04em;color:var(--navy);margin-bottom:1.5rem}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:1.1rem;color:var(--slate);max-width:480px;line-height:1.75;margin-bottom:2.5rem;font-weight:400}
.ctas{display:flex;gap:1rem;align-items:center;margin-bottom:3rem}
.btn-primary{background:var(--navy);color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:0.9rem;padding:0.85rem 1.75rem;border-radius:8px;border:none;cursor:pointer;transition:background 0.2s,transform 0.15s;text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--blue);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--navy);font-family:'Inter',sans-serif;font-weight:500;font-size:0.9rem;padding:0.85rem 1.75rem;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;transition:border-color 0.2s,color 0.2s;text-decoration:none;display:inline-block}
.btn-outline:hover{border-color:var(--navy)}
.trust{display:flex;align-items:center;gap:1.5rem;font-size:0.8rem;color:var(--slate-light);font-weight:500}
.trust-check{color:var(--green);font-weight:700}
.trust-sep{width:4px;height:4px;background:var(--border);border-radius:50%}

/* DASHBOARD */
.hero-right{flex:1;min-width:0}
.dash-wrap{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(15,43,91,0.1),0 4px 16px rgba(15,43,91,0.06);overflow:hidden}
.dash-bar{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:var(--bg3);border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#FC8181}.dot-y{background:#F6C90E}.dot-g{background:#48BB78}
.dash-url{flex:1;text-align:center;font-size:0.7rem;color:var(--slate-light);background:#fff;border:1px solid var(--border);border-radius:6px;padding:0.2rem 0.75rem}
.dash-body{display:grid;grid-template-columns:160px 1fr}
.dash-side{background:var(--bg2);border-right:1px solid var(--border);padding:1rem 0}
.dash-logo{font-size:0.8rem;font-weight:800;color:var(--navy);padding:0 1rem;margin-bottom:1.25rem}
.dash-item{display:flex;align-items:center;gap:0.6rem;padding:0.5rem 1rem;font-size:0.75rem;color:var(--slate);cursor:pointer}
.dash-item.on{color:var(--blue);background:var(--blue-pale);font-weight:600;border-right:2px solid var(--blue)}
.dash-main{padding:1.25rem}
.dash-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.dash-ttl{font-size:0.875rem;font-weight:700;color:var(--navy)}
.dash-pill{font-size:0.7rem;background:var(--bg3);border:1px solid var(--border);color:var(--slate);padding:0.2rem 0.6rem;border-radius:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin-bottom:1rem}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:0.85rem}
.s-lbl{font-size:0.65rem;font-weight:600;color:var(--slate-light);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.3rem}
.s-val{font-size:1.35rem;font-weight:800;color:var(--navy)}
.s-delta{font-size:0.65rem;color:var(--green);font-weight:600;margin-top:0.15rem}
.chart{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1rem;height:110px;display:flex;align-items:flex-end;gap:5px}
.bar{flex:1;border-radius:3px 3px 0 0;background:var(--blue-pale)}
.bar.hi{background:var(--blue)}

/* LOGOS */
.logos{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2.5rem 5%}
.logos-label{text-align:center;font-size:0.78rem;font-weight:600;color:var(--slate-light);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2rem}
.logos-row{display:flex;align-items:center;justify-content:center;gap:4.5rem;flex-wrap:wrap}
.logo-item{height:28px;opacity:0.4;filter:grayscale(100%);transition:opacity 0.2s, filter 0.2s}
.logo-item:hover{opacity:0.8;filter:grayscale(0%)}
.logo-item svg{height:100%;width:auto}

/* SECTION */
.section{padding:6rem 5%;max-width:1200px;margin:0 auto}
.section-full{padding:6rem 5%;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-full .inner{max-width:1200px;margin:0 auto}
.s-tag{display:inline-block;font-size:0.72rem;font-weight:700;color:var(--blue);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.75rem}
.s-title{font-size:clamp(1.8rem,3.5vw,2.75rem);font-weight:800;color:var(--navy);letter-spacing:-0.03em;line-height:1.15;margin-bottom:1rem;max-width:560px}
.s-sub{font-size:1rem;color:var(--slate);line-height:1.75;max-width:480px}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;margin-top:3.5rem;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.feat{background:#fff;padding:2.25rem;transition:background 0.2s}
.feat:hover{background:var(--bg2)}
.feat-icon{width:42px;height:42px;border-radius:10px;background:var(--blue-pale);border:1px solid #BFDBFE;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.25rem}
.feat-name{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:0.6rem}
.feat-desc{font-size:0.875rem;color:var(--slate);line-height:1.7}

/* STATS BANNER */
.stats-banner{padding:5rem 5%;background:var(--navy)}
.stats-banner .inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat-b-val{font-size:2.5rem;font-weight:800;color:#fff;letter-spacing:-0.03em}
.stat-b-lbl{font-size:0.85rem;color:#93C5FD;font-weight:500;margin-top:0.25rem}

/* PRICING */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.price-card{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:2.25rem;position:relative;transition:box-shadow 0.2s,transform 0.2s}
.price-card:hover{box-shadow:0 8px 30px rgba(15,43,91,0.1);transform:translateY(-3px)}
.price-card.best{border-color:var(--blue);box-shadow:0 0 0 4px rgba(29,78,216,0.08)}
.best-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;padding:0.3rem 1rem;border-radius:100px}
.plan-name{font-size:0.85rem;font-weight:700;color:var(--slate);margin-bottom:0.5rem;text-transform:uppercase;letter-spacing:0.05em}
.plan-price{font-size:3rem;font-weight:800;color:var(--navy);letter-spacing:-0.04em;line-height:1}
.plan-price sup{font-size:1.25rem;font-weight:500;color:var(--slate);vertical-align:super}
.plan-per{font-size:0.8rem;color:var(--slate-light);margin-bottom:1.75rem;margin-top:0.25rem}
.plan-feats{list-style:none;margin-bottom:2rem}
.plan-feats li{display:flex;align-items:center;gap:0.6rem;font-size:0.875rem;color:var(--slate);padding:0.375rem 0;border-bottom:1px solid var(--bg3)}
.plan-feats li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0}
.plan-btn{width:100%;padding:0.8rem;border-radius:8px;font-family:'Inter',sans-serif;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s;border:1.5px solid var(--border);background:transparent;color:var(--navy);text-decoration:none;display:inline-block;text-align:center}
.plan-btn:hover{background:var(--bg2)}
.plan-btn.cta{background:var(--navy);color:#fff;border-color:var(--navy)}
.plan-btn.cta:hover{background:var(--blue)}

/* FAQ */
.faq-grid{max-width:800px;margin:3.5rem auto 0;display:flex;flex-direction:column;gap:1rem}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.2s}
.faq-q{width:100%;padding:1.25rem 1.5rem;display:flex;justify-content:space-between;align-items:center;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:1rem;font-weight:600;color:var(--navy)}
.faq-q span:last-child{font-size:1.25rem;transition:transform 0.3s;color:var(--slate-light)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.3s ease-out, padding 0.3s ease}
.faq-a p{padding:0 1.5rem 1.5rem;color:var(--slate);font-size:0.9rem;line-height:1.6}
.faq-item.open{border-color:var(--blue);box-shadow:0 4px 20px rgba(29,78,216,0.05)}
.faq-item.open .faq-q span:last-child{transform:rotate(45deg);color:var(--blue)}
.faq-item.open .faq-a{max-height:200px}

/* CTA BAND */
.cta-band{padding:6rem 5%;text-align:center;background:var(--blue-pale);border-top:1px solid #BFDBFE;border-bottom:1px solid #BFDBFE}
.cta-band h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--navy);letter-spacing:-0.03em;margin-bottom:1rem}
.cta-band p{color:var(--slate);font-size:1.05rem;max-width:460px;margin:0 auto 2.5rem;line-height:1.75}

/* FOOTER */
footer{padding:3rem 5%;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;background:#fff}
.footer-logo{font-size:1.1rem;font-weight:800;color:var(--navy)}.footer-logo span{color:var(--blue)}
.footer-links{display:flex;gap:2rem;list-style:none}
.footer-links a{font-size:0.8rem;color:var(--slate-light);text-decoration:none;font-weight:500;transition:color 0.2s}
.footer-links a:hover{color:var(--navy)}
.footer-copy{font-size:0.78rem;color:var(--slate-light)}

/* TESTIMONIALS */
.testimonials { padding: 6rem 5%; background: var(--bg); border-bottom: 1px solid var(--border); }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3.5rem; }
.test-card { background: #fff; border: 1px solid var(--border); padding: 2.5rem; border-radius: 16px; transition: transform 0.2s; }
.test-card:hover { transform: translateY(-5px); }
.test-quote { color: var(--navy); font-size: 1.1rem; font-weight: 500; margin-bottom: 2rem; line-height: 1.6; position: relative; }
.test-quote::before { content: '"'; font-size: 3rem; color: var(--blue-pale); position: absolute; top: -1.5rem; left: -1rem; z-index: -1; }
.test-name { font-weight: 700; color: var(--navy); font-size: 0.95rem; margin-bottom: 0.2rem; }
.test-role { color: var(--slate); font-size: 0.8rem; font-weight: 500; }

/* MODAL */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 43, 91, 0.4); backdrop-filter: blur(4px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.modal-overlay.active { display: flex; }
.modal-content { background: #fff; padding: 2.5rem; border-radius: 16px; width: 100%; max-width: 480px; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: scale(0.95); transition: transform 0.3s; }
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--slate-light); transition: color 0.2s; }
.modal-close:hover { color: var(--navy); }
.modal-h { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-bottom: 0.5rem; }
.modal-p { font-size: 0.9rem; color: var(--slate); margin-bottom: 2rem; }
.form-g { margin-bottom: 1.25rem; }
.form-g label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.form-g input { width: 100%; padding: 0.75rem 1rem; border-radius: 8px; border: 1.5px solid var(--border); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; }
.form-g input:focus { border-color: var(--blue); }
.modal-success { display: none; text-align: center; padding: 2rem 0; }
.modal-success h3 { color: var(--green); font-size: 1.5rem; margin-bottom: 0.5rem; }

/* REVEAL */
.reveal-target { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.reveal-target.revealed { opacity: 1; transform: translateY(0); }
.reveal-target.d1 { transition-delay: 0.15s; }
.reveal-target.d2 { transition-delay: 0.3s; }
.reveal-target.d3 { transition-delay: 0.45s; }

/* NAV OVERLAY */
#nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 104; display: none; opacity: 0; transition: opacity 0.3s; }
#nav-overlay.active { display: block; opacity: 1; }

/* UTILS */
.container{max-width:1200px;margin:0 auto;padding:0 5%}
.subpage-hero{padding:8rem 5% 4rem;background:var(--bg2);text-align:center;border-bottom:1px solid var(--border)}
.subpage-hero h1{font-size:3rem;font-weight:800;color:var(--navy);margin-bottom:1rem}
.subpage-hero p{font-size:1.2rem;color:var(--slate);max-width:600px;margin:0 auto}