:root{
    --royal:#4257c9;
    --royal-dim: rgba(66,87,201,0.16);
    --royal-2:#5a6ee0;
    --glow: rgba(66,87,201,0.55);
    --ink:#0f172a;
    --ink-2:#141d33;
    --ink-3:#1b263f;
    --slate:#94a3b8;
    --midslate:#334155;
    --white:#ffffff;
    --border: rgba(255,255,255,0.09);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(1100px 560px at 78% -6%, rgba(66,87,201,0.16), transparent 60%),
      var(--ink);
    color:var(--white);
    font-family:'Inter', Arial, sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.wordmark{font-family:'Montserrat', Arial, sans-serif;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:'Montserrat', Arial, sans-serif;
    font-weight:700;
    font-size:18px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--royal-2);
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Montserrat', Arial, sans-serif;
    font-weight:600;
    font-size:15px;
    padding:14px 26px;
    border-radius:8px;
    border:1px solid transparent;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .25s ease, background .18s ease, border-color .18s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--royal); color:var(--white);}
  .btn-primary:hover{background:#3d51bd; transform:translateY(-2px); box-shadow:0 14px 34px -12px var(--glow);}
  .btn-ghost{border-color:rgba(255,255,255,0.22); color:var(--white);}
  .btn-ghost:hover{border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.05); transform:translateY(-2px);}

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(15,23,42,0.88);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--border);
  }
  nav{display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:16px 32px; max-width:1120px; margin:0 auto;}
  nav > a{grid-column:1;}
  .nav-logo{height:46px; width:auto;}
  .nav-links{display:flex; align-items:center; gap:34px; justify-self:center; grid-column:2;}
  .nav-links a{position:relative; font-size:14.5px; font-weight:500; color:var(--slate); transition:color .18s ease; padding:4px 0;}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--royal-2); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.16,.84,.44,1);}
  .nav-links a:hover{color:var(--white);}
  .nav-links a:hover::after{transform:scaleX(1);}
  .nav-links a.active{color:var(--white);}
  .nav-links a.active::after{transform:scaleX(1);}
  .nav-cta{display:flex; align-items:center; gap:12px; grid-column:3;}
  .nav-cta .btn-ghost{font-size:13px; padding:10px 15px;}
  .nav-toggle{display:none;}

  /* HERO */
  .hero{padding:96px 0 88px; position:relative; overflow:hidden;}
  .hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;}
  .hero h1{font-size:60px; font-weight:800; line-height:1.08; letter-spacing:-0.02em; margin:18px 0 22px; text-wrap:balance;}
  .hero h1 .accent{color:var(--royal-2);}
  .hero p.lede{font-size:19px; color:var(--slate); max-width:520px; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-visual{position:relative;}
  .hero-visual::before{content:""; position:absolute; inset:-14% -8% -20% -8%; background:radial-gradient(closest-side, rgba(66,87,201,0.42), transparent 78%); filter:blur(18px); z-index:0;}
  .bars-card{
    position:relative; z-index:1;
    background:linear-gradient(180deg, #172142, var(--ink-2));
    border:1px solid rgba(255,255,255,0.10);
    border-radius:18px;
    padding:34px 34px 28px;
    box-shadow:0 30px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .bars-row{display:flex; align-items:flex-end; gap:10px; height:196px;}
  .bar{width:100%; border-radius:7px 7px 0 0; background:linear-gradient(180deg,var(--royal-2),var(--royal)); transform:scaleY(0); transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.8,.25,1) forwards;}
  .bars-row .bar:nth-child(1){animation-delay:.05s;}
  .bars-row .bar:nth-child(2){animation-delay:.12s;}
  .bars-row .bar:nth-child(3){animation-delay:.19s;}
  .bars-row .bar:nth-child(4){animation-delay:.26s;}
  .bars-row .bar:nth-child(5){animation-delay:.33s;}
  .bars-row .bar:nth-child(6){animation-delay:.40s;}
  .bars-row .bar:nth-child(7){animation-delay:.47s;}
  .bars-row .bar:nth-child(8){animation-delay:.54s;}
  .bars-row .bar:nth-child(9){animation-delay:.61s;}
  @keyframes grow{to{transform:scaleY(1);}}
  .bars-caption{display:flex; justify-content:space-between; margin-top:16px; font-size:12.5px; color:var(--slate); letter-spacing:.06em; text-transform:uppercase; font-weight:600;}

  section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head h2{font-size:34px; font-weight:700; margin-top:12px; letter-spacing:-0.01em; text-wrap:balance;}
  .section-head p{color:var(--slate); font-size:17px; margin-top:14px;}
  .divider{border-top:1px solid var(--border);}

  /* PROBLEM */
  .problem-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .card{background:var(--ink-2); border:1px solid var(--border); border-radius:14px; padding:32px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;}
  .card:hover{transform:translateY(-6px); border-color:rgba(66,87,201,0.55); box-shadow:0 20px 44px -22px var(--glow), inset 0 1px 0 rgba(255,255,255,0.06);}
  .card h3{font-size:19px; font-weight:700; margin-bottom:12px;}
  .card p{color:var(--slate); font-size:15.5px;}

  /* BLUEPRINT */
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
  .step{padding:24px 18px; border-radius:14px; background:var(--ink-2); border:1px solid var(--border); position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,0.04); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;}
  .step:hover{transform:translateY(-6px); border-color:rgba(66,87,201,0.55); box-shadow:0 18px 40px -22px var(--glow);}
  .step-num{font-family:'Montserrat',Arial,sans-serif; font-weight:800; font-size:13px; color:var(--royal-2); letter-spacing:.08em; margin-bottom:14px;}
  .step h3{font-size:18px; font-weight:700; margin-bottom:10px;}
  .step p{font-size:14.5px; color:var(--slate);}

  /* SERVICES */
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .service{border-radius:14px; padding:30px; border:1px solid var(--border); transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;}
  .service:hover{transform:translateY(-6px); box-shadow:0 20px 44px -22px var(--glow);}
  .service .mark{width:72px; height:36px; margin-bottom:22px;}
  .service h3{font-size:20px; font-weight:700; margin-bottom:12px;}
  .service p{color:var(--slate); font-size:15px;}
  .service.featured{background:var(--royal); border-color:var(--royal);}
  .service.featured p, .service.featured h3{color:var(--white);}
  .service.featured .mark rect, .service.featured .mark path{fill:#ffffff !important;}
  .service:not(.featured){background:var(--ink-2);}
  .service:not(.featured):hover{border-color:rgba(66,87,201,0.55);}

  /* STATS */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:56px;}
  .stat{text-align:left;}
  .stat .num{font-family:'Montserrat',Arial,sans-serif; font-size:38px; font-weight:800; color:var(--royal);}
  .stat .label{font-size:13.5px; color:var(--slate); margin-top:6px; letter-spacing:.02em;}

  table.compare{width:100%; border-collapse:collapse; font-size:15px;}
  table.compare th{text-align:left; font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); padding:14px 16px; border-bottom:1px solid var(--border);}
  table.compare td{padding:16px; border-bottom:1px solid var(--border); color:var(--white);}
  table.compare td:first-child{color:var(--slate); font-weight:500;}
  table.compare td.win{color:var(--royal-2); font-weight:600;}
  table.compare tr:last-child td{border-bottom:none;}

  /* HUMAN IN LOOP */
  .hitl{background:var(--ink-2); border:1px solid rgba(66,87,201,0.35); border-radius:18px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
  .hitl h2{font-size:30px; font-weight:700; line-height:1.25; margin-bottom:16px;}
  .hitl p{color:var(--slate); font-size:16px;}
  .hitl-list{display:flex; flex-direction:column; gap:18px;}
  .hitl-item{display:flex; gap:14px; align-items:flex-start;}
  .hitl-dot{width:8px; height:8px; border-radius:50%; background:var(--royal); margin-top:8px; flex-shrink:0;}
  .hitl-item p{color:var(--white); font-size:15px;}

  /* ABOUT */
  .about{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;}
  .about-badge{background:var(--ink-2); border:1px solid var(--border); border-radius:16px; padding:36px; text-align:center;}
  .about p{color:var(--slate); font-size:17px; margin-bottom:16px;}
  .about p:last-child{margin-bottom:0;}
  .about strong{color:var(--white);}

  /* CONTACT / CTA */
  .cta-section{text-align:center; padding:100px 0;}
  .cta-section h2{font-size:38px; font-weight:800; margin:16px 0 14px;}
  .cta-section p.lede{color:var(--slate); font-size:18px; max-width:520px; margin:0 auto 36px;}
  .cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
  .contact-note{margin-top:22px; font-size:13.5px; color:var(--midslate);}

  footer{border-top:1px solid var(--border); padding:40px 0;}
  .footer-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
  .footer-logo{height:22px;}
  .footer-links{display:flex; gap:28px;}
  .footer-links a{color:var(--slate); font-size:14px; transition:color .18s ease;}
  .footer-links a:hover{color:var(--white);}
  .footer-copy{color:var(--midslate); font-size:13px;}

  /* SCROLL REVEAL */
  .reveal{opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .8s cubic-bezier(.16,.84,.44,1);}
  .reveal.in{opacity:1; transform:none;}
  [data-stagger] > *{opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .7s cubic-bezier(.16,.84,.44,1);}
  [data-stagger].in > *{opacity:1; transform:none;}
  [data-stagger].in > *:nth-child(1){transition-delay:.00s;}
  [data-stagger].in > *:nth-child(2){transition-delay:.09s;}
  [data-stagger].in > *:nth-child(3){transition-delay:.18s;}
  [data-stagger].in > *:nth-child(4){transition-delay:.27s;}
  [data-stagger].in > *:nth-child(5){transition-delay:.36s;}

  @media (max-width: 860px){
    .hero-grid, .problem-grid, .steps, .services-grid, .stats-grid, .hitl, .about{grid-template-columns:1fr;}
    nav{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
    nav > a{order:1;}
    .nav-toggle{
      display:flex; order:2; flex-direction:column; justify-content:center; align-items:center; gap:5px;
      width:38px; height:38px; background:transparent; border:1px solid rgba(255,255,255,0.22); border-radius:8px;
      cursor:pointer; padding:0;
    }
    .nav-toggle span{display:block; width:18px; height:2px; background:var(--white); border-radius:2px;}
    .nav-links{
      display:none; order:3; flex-basis:100%; flex-direction:column; align-items:flex-start; gap:18px; margin-top:22px;
    }
    .nav-cta{display:none; order:4; flex-basis:100%; flex-direction:column; gap:10px; margin-top:18px;}
    .nav-cta .btn{width:100%; font-size:15px; padding:14px 26px;}
    header.nav-open .nav-links, header.nav-open .nav-cta{display:flex;}
    .hero h1{font-size:40px;}
    .hitl{padding:32px;}
    .footer-row{flex-direction:column; align-items:flex-start;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .bar{animation:none; transform:none;}
    .reveal, [data-stagger] > *{opacity:1; transform:none; transition:none;}
  }