:root{
    --white:#ffffff;
    --tint:#f5f8fd;
    --tint-2:#eef3fb;
    --ink:#111a2e;
    --slate:#5b647a;
    --slate-soft:#8b94aa;
    --line:#e4eaf3;
    --navy:#132a5e;
    --navy-deep:#0e2149;
    --blue:#2e5fe8;
    --blue-bright:#3f74ff;
    --blue-pale:#e8effe;
    --red:#e8262a;
    --red-soft:#fdecec;
    --radius:16px;
    --radius-lg:26px;
    --shadow-sm:0 4px 20px -8px rgba(19,42,94,0.14);
    --shadow:0 22px 60px -30px rgba(19,42,94,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Montserrat',sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Montserrat',sans-serif; margin:0; color:var(--navy); letter-spacing:-0.02em; line-height:1.15;}
  p{margin:0; color:var(--slate); line-height:1.7; text-align:justify;}
  a{text-decoration:none; color:inherit;}
  ul{margin:0; padding:0; list-style:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }
  :focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  section{padding:26px 0;}

  .eyebrow{
    font-size:12.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--blue); display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:26px; height:2px; background:var(--red); display:inline-block;}
  .eyebrow.center{justify-content:center;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:14px 26px; border-radius:999px; font-size:14.5px; font-weight:600;
    border:1.5px solid transparent; transition:all .22s ease; white-space:nowrap;
  }
  .btn-primary{background:var(--red); color:#fff; box-shadow:0 12px 26px -10px rgba(232,38,42,0.6);}
  .btn-primary:hover{background:#cf1e22; transform:translateY(-2px);}
  .btn-navy{background:var(--navy); color:#fff;}
  .btn-navy:hover{background:var(--navy-deep); transform:translateY(-2px);}
  .btn-ghost{background:#fff; border-color:var(--line); color:var(--navy);}
  .btn-ghost:hover{border-color:var(--blue); color:var(--blue);}
  .btn-sm{padding:11px 20px; font-size:13.5px;}
  .btn-pulse{position:relative; box-shadow:0 0 0 0 rgba(232,38,42,0.55); animation:btnPulse 1.8s infinite;}
  .btn-pulse:hover{animation:none;}
  @keyframes btnPulse{
    0%{box-shadow:0 0 0 0 rgba(232,38,42,0.55);}
    70%{box-shadow:0 0 0 14px rgba(232,38,42,0);}
    100%{box-shadow:0 0 0 0 rgba(232,38,42,0);}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(255,255,255,0.9); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; height:78px; max-width:1180px; margin:0 auto; padding:0 32px;}
  .logo{display:flex; align-items:center; gap:12px;}
  .logo img{height:34px; width:auto;}
  .logo-text{
    font-family:'Montserrat', sans-serif;
    font-weight:800; font-size:19px; letter-spacing:.2px;
    color:var(--blue); white-space:nowrap;
  }
  @media (max-width:560px){ .logo-text{ font-size:15px; } }
  .inline-logo{height:1em; width:auto; display:inline-block; vertical-align:-0.15em; margin-right:6px;}
  .nav-links{display:flex; align-items:center; gap:6px;}
  .nav-links a{
    font-size:14.5px; font-weight:500; color:var(--ink);
    padding:9px 15px; border-radius:999px; transition:all .2s ease;
  }
  .nav-links a:hover{background:var(--tint-2); color:var(--blue);}
  .nav-links a.active{color:var(--blue); font-weight:600;}
  .nav-right{display:flex; align-items:center; gap:14px;}
  .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
  .nav-toggle span{width:24px; height:2px; background:var(--navy); border-radius:2px; display:block;}

  /* ---------- Hero ---------- */
  .hero{background:linear-gradient(180deg, var(--tint) 0%, #fff 100%); position:relative; overflow:hidden;}
  .hero-video-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center; z-index:0;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.88) 100%);
  }
  .hero-deco{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;}
  .hero-deco svg{position:absolute; top:-120px; right:-140px; opacity:.5;}
  .hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; padding:80px 0 90px; position:relative; z-index:2;}
  .hero-badge{
    display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border-radius:999px;
    background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
    font-size:13px; font-weight:500; color:var(--slate); margin-bottom:26px;
  }
  .hero-badge .tag{background:var(--red); color:#fff; font-weight:700; font-size:11px; padding:4px 11px; border-radius:999px; letter-spacing:.03em;}
  .hero h1{font-size:clamp(34px,4.4vw,54px); font-weight:800;}
  .hero h1 em{font-style:normal; color:var(--blue);}
  .hero .lead{font-size:17px; margin-top:22px; max-width:500px;}
  .hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .hero-trust{display:flex; gap:34px; margin-top:48px; flex-wrap:wrap;}
  .hero-trust .num{font-size:26px; font-weight:800; color:var(--navy);}
  .hero-trust .num span{color:var(--red);}
  .hero-trust .lbl{font-size:12.5px; color:var(--slate-soft); margin-top:2px;}
  @media (max-width:780px){
    .hero-video-bg, .hero-overlay{display:none;}
  }

  /* Dashboard mockup */
  .mock{position:relative;}
  .mock-browser{border-radius:16px; background:#fff; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line);}
  .mock-bar{display:flex; align-items:center; gap:7px; padding:12px 15px; background:var(--tint-2); border-bottom:1px solid var(--line);}
  .mock-dot{width:10px; height:10px; border-radius:50%;}
  .mock-dot:nth-child(1){background:#ff5f57;}
  .mock-dot:nth-child(2){background:#febc2e;}
  .mock-dot:nth-child(3){background:#28c840;}
  .mock-url{margin-left:12px; background:#fff; border-radius:6px; padding:5px 14px; font-size:11px; color:var(--slate-soft); flex:1;}
  .mock-float{position:absolute; background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:13px 17px; display:flex; align-items:center; gap:12px; z-index:3;}
  .mock-float .fi{width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
  .mock-float strong{display:block; font-size:15px; color:var(--navy); font-weight:800;}
  .mock-float span{font-size:11px; color:var(--slate-soft);}
  .float-1{top:14%; right:-30px; animation:floaty 5s ease-in-out infinite;}
  .float-1 .fi{background:#eafaf0; color:#1aae5c;}
  .float-2{bottom:12%; left:-34px; animation:floaty 5s ease-in-out infinite 1.4s;}
  .float-2 .fi{background:var(--red-soft); color:var(--red);}
  @keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

  /* ---------- Logos / trust bar ---------- */
  .stats-band{background:var(--navy); border-radius:var(--radius-lg); padding:44px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:-46px; position:relative; z-index:5;}
  .stat{text-align:center; color:#fff;}
  .stat .n{font-size:clamp(26px,3vw,36px); font-weight:800;}
  .stat .n span{color:#ff6b6e;}
  .stat .l{font-size:13px; color:rgba(255,255,255,0.65); margin-top:6px;}
  .stat + .stat{border-left:1px solid rgba(255,255,255,0.12);}

  /* ---------- Section head ---------- */
  .shead{max-width:620px; margin-bottom:16px;}
  .shead.center{margin:0 auto 16px; text-align:center;}
  .shead h2{font-size:clamp(28px,3.2vw,40px); font-weight:800;}
  .shead p{margin-top:16px; font-size:16.5px;}

  .bg-tint{background:var(--tint);}

  /* ---------- Why cards ---------- */
  .why-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
  .why-list{display:flex; flex-direction:column;}
  .why-item{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
  .why-item:last-child{border-bottom:none;}
  .why-num{font-size:14px; font-weight:700; color:var(--red); padding-top:2px; flex-shrink:0; width:32px;}
  .why-item h4{font-size:16.5px; margin-bottom:6px; font-weight:700;}
  .why-item p{font-size:14px;}

  /* ---------- Service cards ---------- */
  .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 28px; transition:all .3s ease;}
  .card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent;}
  .card .ic{width:52px; height:52px; border-radius:14px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:20px;}
  .card h3{font-size:18.5px; margin-bottom:10px; font-weight:700;}
  .card p{font-size:14px;}
  .card .more{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--red);}

  /* ---------- Media visual ---------- */
  .split{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
  .checks{display:flex; flex-direction:column; gap:15px; margin-top:26px;}
  .check{display:flex; gap:12px; align-items:flex-start;}
  .check .c{width:24px; height:24px; border-radius:50%; background:var(--red-soft); color:var(--red); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; margin-top:1px;}
  .check p{font-size:14.5px; color:var(--ink);}
  .media-visual{position:relative; display:flex; justify-content:center;}
  .media-glow{position:absolute; inset:0; background:radial-gradient(circle at 50% 35%, rgba(46,95,232,0.14), transparent 62%);}
  .media-visual img{max-width:330px; position:relative; z-index:2;}


  /* ---------- Testimonials ---------- */
  .testi-vp{overflow:hidden;}
  .testi-track{display:flex; gap:24px; transition:transform .5s cubic-bezier(.4,0,.2,1);}
  .testi-card{flex:0 0 calc(33.333% - 16px); min-width:300px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; display:flex; flex-direction:column;}
  .testi-q{color:var(--red); font-size:44px; line-height:1; font-weight:800; margin-bottom:10px; font-family:Georgia,serif;}
  .testi-card p{font-size:14.5px; color:var(--ink); flex:1;}
  .testi-person{display:flex; align-items:center; gap:12px; margin-top:22px;}
  .testi-av{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--red)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}
  .testi-person strong{display:block; font-size:14px; color:var(--navy);}
  .testi-person span{font-size:12px; color:var(--slate-soft);}
  .testi-ctrl{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px;}
  .testi-arrow{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; transition:all .2s ease; color:var(--navy);}
  .testi-arrow:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
  .testi-dots{display:flex; gap:8px;}
  .testi-dot{width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0; transition:all .2s ease;}
  .testi-dot.active{background:var(--red); width:22px; border-radius:5px;}

  /* ---------- Certifications ---------- */
  .cert-strip{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:44px; flex-wrap:wrap;}
  .cert-text{max-width:300px;}
  .cert-text h3{font-size:22px; font-weight:700;}
  .cert-text p{font-size:13.5px; margin-top:10px;}
  .cert-logos{display:flex; align-items:center; gap:34px; flex-wrap:wrap;}
  .cert-logos img{height:96px; width:auto;}
  .cert-badge{width:70px; height:70px; border-radius:50%; border:2px solid var(--blue); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--navy); text-align:center; line-height:1.25;}

  /* ---------- CTA ---------- */
  .cta{background:linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 60%, var(--blue) 150%); border-radius:var(--radius-lg); padding:60px 56px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; overflow:hidden;}
  .cta h3{color:#fff; font-size:clamp(23px,2.6vw,31px); max-width:460px;}
  .cta p{color:rgba(255,255,255,0.7); margin-top:12px; font-size:15px; max-width:440px;}
  .cta-actions{display:flex; gap:14px; flex-shrink:0;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-deep); color:rgba(255,255,255,0.7); padding:72px 0 26px;}
  .footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:46px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1);}
  .footer-brand img{height:30px; margin-bottom:18px;}
  .footer-brand p{font-size:14px; color:rgba(255,255,255,0.5); max-width:320px; line-height:1.7;}
  .fsocial{display:flex; gap:10px; margin-top:20px;}
  .fsocial a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; transition:all .2s ease;}
  .fsocial a:hover{background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-3px);}
  .fcol h4{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:20px;}
  .fcol li{margin-bottom:12px;}
  .fcol a{font-size:14px; color:rgba(255,255,255,0.6); transition:color .2s ease;}
  .fcol a:hover{color:#fff;}
  .fbottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; color:rgba(255,255,255,0.45); flex-wrap:wrap; gap:12px;}
  .fbottom a{color:rgba(255,255,255,0.45); margin-left:20px;}
  .fbottom a:hover{color:#fff;}

  .to-top{position:fixed; bottom:26px; right:26px; z-index:900; width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; border:none; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease; font-size:18px;}
  .to-top.show{opacity:1; visibility:visible; transform:translateY(0);}

  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- Responsive ---------- */
  @media (max-width:1024px){
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:40px;}
  }
  @media (max-width:900px){
    .nav-links{display:none;}
    .nav-toggle{display:flex;}
    .hero-grid, .why-grid, .split{grid-template-columns:1fr;}
    .cards{grid-template-columns:repeat(2,1fr);}
    .stats-band{grid-template-columns:repeat(2,1fr); gap:30px 20px;}
    .stat + .stat:nth-child(3){border-left:none;}
    .stat:nth-child(3){border-top:1px solid rgba(255,255,255,0.12); padding-top:26px;}
    .stat:nth-child(4){border-top:1px solid rgba(255,255,255,0.12); padding-top:26px;}
    .cta{flex-direction:column; align-items:flex-start;}
    .float-1{right:8px;} .float-2{left:8px;}
  }
  @media (max-width:640px){
    .wrap{padding:0 20px;} section{padding:68px 0;}
    .cards, .footer-grid, .stats-band{grid-template-columns:1fr;}
    .stat + .stat{border-left:none;}
    .cert-strip{flex-direction:column; align-items:flex-start;}
    .fbottom{flex-direction:column; align-items:flex-start;}
    .fbottom a{margin-left:0; margin-right:16px;}
    .nav-links.open{display:flex; position:absolute; top:78px; left:0; right:0; flex-direction:column; background:#fff; padding:14px; gap:2px; border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);}
  }

  /* ---------- Service Detail Page ---------- */
  .svc-hero{background:#fff; position:relative; overflow:hidden; padding:40px 0 44px; border-bottom:1px solid var(--line);}
  .svc-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, var(--blue-pale), transparent 55%); pointer-events:none;}
  .breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate-soft); margin-bottom:22px; position:relative; z-index:2;}
  .breadcrumb a{color:var(--slate); font-weight:500;}
  .breadcrumb a:hover{color:var(--blue); text-decoration:underline;}
  .svc-icon-badge{width:60px; height:60px; border-radius:16px; background:var(--blue-pale); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:22px; position:relative; z-index:2;}
  .svc-hero h1{font-size:clamp(28px,3.6vw,44px); font-weight:800; color:var(--navy); position:relative; z-index:2; max-width:720px;}
  .svc-hero .lead{font-size:16.5px; color:var(--slate); margin-top:16px; max-width:640px; position:relative; z-index:2;}
  .svc-hero .hero-actions{margin-top:30px; position:relative; z-index:2;}
  .dashboard-float{animation:floatUpDown 4s ease-in-out infinite;}
  @keyframes floatUpDown{
    0%, 100%{transform:translateY(0);}
    50%{transform:translateY(-16px);}
  }

  .feat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:16px;}
  .dialer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:16px;}
  @media (max-width:720px){ .dialer-grid{grid-template-columns:1fr;} }
  .feat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;}
  .feat-card .fic{width:42px; height:42px; border-radius:12px; background:var(--blue-pale); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:14px;}
  .feat-card h4{font-size:16px; font-weight:700; margin-bottom:8px;}
  .feat-card p{font-size:14px;}

  .steps-list{counter-reset:svcstep; margin-top:10px;}
  .step-item{display:flex; gap:20px; padding:22px 0; border-bottom:1px solid var(--line);}
  .step-item:last-child{border-bottom:none;}
  .step-num{counter-increment:svcstep; flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;}
  .step-num::before{content:counter(svcstep);}
  .step-body h4{font-size:15.5px; font-weight:700; margin-bottom:6px;}
  .step-body p{font-size:14px;}

  .svc-cta{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); border-radius:var(--radius-lg); padding:52px 44px; text-align:center; position:relative; overflow:hidden;}
  .svc-cta h3{color:#fff; font-size:clamp(22px,2.6vw,30px); font-weight:800; margin-bottom:12px;}
  .svc-cta p{color:rgba(255,255,255,0.78); max-width:520px; margin:0 auto 26px;}
  .svc-cta .hero-actions{justify-content:center;}

  .related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:16px;}
  .related-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:all .25s ease;}
  .related-card:hover{border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow-sm);}
  .related-card .ic{font-size:22px; margin-bottom:10px;}
  .related-card h4{font-size:15px; font-weight:700; margin-bottom:6px;}
  .related-card span{font-size:13px; color:var(--blue); font-weight:600;}

  @media (max-width:780px){
    .feat-grid{grid-template-columns:1fr;}
    .related-grid{grid-template-columns:1fr;}
    .svc-cta{padding:40px 24px;}
  }