:root{
    --navy-900:#0a0f1e; --navy-850:#0c1322; --navy-800:#111827; --navy-700:#161e2e;
    --line-strong:#374151; --line:#232c3d; --line-soft:#1b2333;
    --white:#fff; --text-body:#e5e9f0; --text-secondary:#9aa6b8; --text-muted:#6b7280;
    --blue-300:#93b4fb; --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb;
    --glow:rgba(59,130,246,.18);
    --font-sans:'Geist',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;
    --ease:cubic-bezier(.22,1,.36,1);
    --shadow-md:0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 24px 60px rgba(0,0,0,.55);
    --maxw:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-sans);background:var(--navy-900);color:var(--text-body);line-height:1.5;-webkit-font-smoothing:antialiased;
    background-image:radial-gradient(900px 480px at 78% -8%, rgba(59,130,246,.10), transparent 60%);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  a{color:inherit}
  h1,h2,h3{font-family:var(--font-sans);letter-spacing:-.03em;line-height:1.05;color:var(--white);font-weight:600}
  .eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-400);font-weight:500}

  /* nav */
  header{position:sticky;top:0;z-index:50;background:rgba(10,15,30,.78);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;text-decoration:none}
  .brand img{height:30px;display:block}
  .navlinks{display:flex;align-items:center;gap:32px}
  .navlinks a{font-size:15px;text-decoration:none;color:var(--text-secondary);font-weight:500;transition:color var(--ease) .15s}
  .navlinks a:hover{color:var(--white)}
  .btn{display:inline-block;font-family:var(--font-sans);font-weight:500;font-size:15px;padding:11px 20px;border-radius:var(--r-sm);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:all var(--ease) .18s}
  .btn-primary{background:var(--blue-500);color:#fff}
  .btn-primary:hover{background:var(--blue-400);box-shadow:0 8px 30px var(--glow);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--text-body);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--text-secondary);color:var(--white)}
  .nav .btn{padding:9px 17px}
  .navlinks .btn{color:#fff}
  .navlinks .btn:hover{color:#fff}
  .menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px;color:var(--text-body);cursor:pointer}

  /* hero */
  .hero{padding:84px 0 70px}
  .hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(2.4rem,5.2vw,4rem);margin:18px 0 0}
  .hero .lead{font-size:18px;color:var(--text-secondary);margin-top:22px;max-width:31em;line-height:1.6}
  .hero-cta{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}
  .trust{margin-top:30px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);letter-spacing:.02em;line-height:1.7}
  .trust b{color:var(--text-body);font-weight:500}

  /* signature demo */
  .demo{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-lg)}
  .demo-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
  .demo-tab{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--ease) .15s}
  .demo-tab:hover{color:var(--white);border-color:var(--text-secondary)}
  .demo-tab[aria-selected="true"]{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}
  .demo-body{display:grid;grid-template-columns:1fr 30px 1fr;gap:6px;align-items:stretch}
  .col-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:7px}
  .col-label .dot{width:7px;height:7px;border-radius:2px;flex:none}
  .before .col-label{color:var(--text-muted)} .before .dot{background:var(--text-muted)}
  .after .col-label{color:var(--blue-400)} .after .dot{background:var(--blue-500);box-shadow:0 0 8px var(--blue-500)}
  .panel{border-radius:var(--r-md);padding:13px;height:100%}
  .before .panel{background:var(--navy-850);border:1px solid var(--line-soft)}
  .after .panel{background:linear-gradient(180deg,rgba(59,130,246,.07),rgba(59,130,246,.02));border:1px solid rgba(59,130,246,.28)}
  .step{background:var(--navy-700);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;margin-bottom:7px;line-height:1.35;opacity:0;transform:translateY(6px);animation:rise .4s var(--ease) forwards}
  .before .step{color:var(--text-secondary);border:1px solid var(--line-soft)}
  .after .step{color:var(--text-body);border:1px solid transparent;border-left:2px solid var(--blue-500);display:flex;align-items:center;gap:8px}
  .after .step::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-500);flex:none;box-shadow:0 0 6px var(--blue-500)}
  .step:last-child{margin-bottom:0}
  @keyframes rise{to{opacity:1;transform:none}}
  .arrow{display:flex;align-items:center;justify-content:center;color:var(--blue-400)}
  .arrow svg{width:22px;height:22px}
  .badge{display:flex;align-items:baseline;gap:7px;margin-top:11px;font-family:var(--font-mono);font-size:12px}
  .badge .t{font-size:18px;font-weight:500}
  .before .badge{color:var(--text-muted)} .before .badge .t{color:var(--text-secondary)}
  .after .badge{color:var(--blue-400)} .after .badge .t{color:var(--white)}

  /* sections */
  .section{padding:78px 0;border-top:1px solid var(--line)}
  .section-head{max-width:40em;margin-bottom:42px}
  .section-head h2{font-size:clamp(1.9rem,3.4vw,2.4rem);margin-top:13px}
  .section-head p{color:var(--text-secondary);font-size:17px;margin-top:14px;line-height:1.6}

  /* process — node path echoes the logo */
  .steps{display:grid;grid-template-columns:repeat(7,1fr);position:relative}
  .steps::before{content:"";position:absolute;top:19px;left:7%;right:7%;height:2px;background:linear-gradient(90deg,var(--line-strong),var(--blue-600),var(--line-strong))}
  .pstep{position:relative;text-align:center;padding:0 6px}
  .pstep .num{width:40px;height:40px;border-radius:50%;background:var(--navy-800);border:2px solid var(--blue-500);color:var(--blue-300);font-family:var(--font-mono);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative;z-index:1;box-shadow:0 0 0 4px var(--navy-900),0 0 14px var(--glow)}
  .pstep .label{font-weight:600;font-size:15px;color:var(--white)}
  .pstep .desc{font-size:12.5px;color:var(--text-secondary);margin-top:5px;line-height:1.35}

  /* industries */
  .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .ind{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-decoration:none;display:block;transition:all var(--ease) .2s}
  .ind:hover{transform:translateY(-3px);border-color:rgba(59,130,246,.5);box-shadow:0 18px 44px -26px var(--glow),0 0 0 1px rgba(59,130,246,.15)}
  .ind .ico{width:28px;height:28px;color:var(--blue-400);margin-bottom:15px}
  .ind h3{font-size:18px}
  .ind p{font-size:14px;color:var(--text-secondary);margin-top:9px;line-height:1.5}
  .ind .more{font-family:var(--font-mono);font-size:12px;color:var(--blue-400);margin-top:15px;display:inline-block}

  /* services */
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .svc{background:var(--navy-800);padding:28px}
  .svc .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--blue-400);text-transform:uppercase}
  .svc h3{font-size:20px;margin-top:10px}
  .svc ul{list-style:none;margin-top:15px}
  .svc li{font-size:14.5px;color:var(--text-secondary);padding:5px 0 5px 22px;position:relative}
  .svc li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:2px;background:rgba(59,130,246,.15);border:1.5px solid var(--blue-500)}
  .svc.span2{grid-column:1 / -1}

  /* proof */
  .proof{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .proof-card{background:var(--navy-800);border:1px solid rgba(59,130,246,.28);border-radius:var(--r-lg);padding:32px;box-shadow:0 0 0 1px rgba(59,130,246,.06),0 24px 60px -30px var(--glow)}
  .proof-card .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-400)}
  .proof-card h3{font-size:23px;margin:11px 0 20px}
  .flowrow{display:flex;align-items:center;gap:12px;margin:11px 0;font-size:14px;color:var(--text-body)}
  .flowrow .n{font-family:var(--font-mono);font-size:11px;color:var(--blue-400);flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(59,130,246,.4);display:flex;align-items:center;justify-content:center}
  .metric{display:flex;gap:30px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
  .metric .big{font-size:32px;font-weight:600;color:var(--white);line-height:1;letter-spacing:-.03em}
  .metric .cap{font-size:12px;color:var(--text-muted);margin-top:6px;font-family:var(--font-mono)}

  /* differentiation */
  .diff{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .diff-item{padding:24px;border-radius:var(--r-lg);background:var(--navy-800);border:1px solid var(--line)}
  .diff-item .x{font-weight:600;color:var(--white);font-size:15px;display:flex;align-items:center;gap:9px}
  .diff-item .x svg{width:16px;height:16px;color:var(--text-muted);flex:none}
  .diff-item .y{font-size:14.5px;color:var(--text-secondary);margin-top:10px;line-height:1.55}
  .diff-item .y b{color:var(--text-body);font-weight:600}

  /* cta */
  .cta-band{background:linear-gradient(180deg,var(--navy-800),var(--navy-850));border:1px solid rgba(59,130,246,.3);border-radius:18px;padding:56px;text-align:center;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(59,130,246,.05),0 30px 80px -40px var(--glow)}
  .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 50% -20%,var(--glow),transparent 70%);pointer-events:none}
  .cta-band h2{font-size:clamp(1.7rem,3.2vw,2.2rem);max-width:18em;margin:0 auto;position:relative}
  .cta-band p{color:var(--text-secondary);margin:16px auto 0;max-width:36em;font-size:16px;position:relative}
  .cta-band .btn-primary{margin-top:26px;position:relative}
  .cta-band .fine{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-top:16px;position:relative}

  /* footer */
  footer{padding:52px 0 60px;border-top:1px solid var(--line)}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
  .foot img{height:28px;display:block}
  .foot .tagline{font-family:var(--font-mono);font-size:12.5px;color:var(--blue-400);margin-top:14px;letter-spacing:.02em}
  .foot p{font-size:13.5px;color:var(--text-secondary);max-width:26em;margin-top:10px;line-height:1.55}
  .foot-links{display:flex;gap:48px;flex-wrap:wrap}
  .foot-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:13px}
  .foot-col a{display:block;font-size:14px;color:var(--text-secondary);text-decoration:none;padding:4px 0;transition:color var(--ease) .15s}
  .foot-col a:hover{color:var(--white)}
  .copyright{margin-top:40px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--text-muted);font-family:var(--font-mono)}

  :focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px}

  @media(max-width:900px){
    .hero-grid,.proof{grid-template-columns:1fr;gap:40px}
    .steps{grid-template-columns:repeat(2,1fr);gap:28px 16px}
    .steps::before{display:none}
    .ind-grid,.diff,.svc-grid{grid-template-columns:1fr}
    .navlinks{display:none}
    .navlinks.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--navy-850);border-bottom:1px solid var(--line);padding:18px 28px;gap:18px;align-items:flex-start}
    .menu-toggle{display:flex}
    .demo-body{grid-template-columns:1fr;gap:14px}
    .arrow{transform:rotate(90deg);height:24px;margin:4px 0}
    .demo-tabs{gap:8px}
    .demo-tab{padding:8px 14px;font-size:13px}
  }
  @media(max-width:560px){
    .hero{padding:48px 0 40px}
    .hero h1{font-size:clamp(1.8rem,7vw,2.4rem)}
    .demo{padding:16px}
    .cta-band{padding:38px 24px}
    .section{padding:56px 0}
    .contact-form{padding:24px}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
  /* contact form */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .contact-info h2{font-size:clamp(1.7rem,3.2vw,2.2rem);margin-top:13px}
  .contact-info p{color:var(--text-secondary);font-size:16px;margin-top:14px;line-height:1.6}
  .contact-info .fine{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-top:20px}
  .contact-form{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
  .form-group{margin-bottom:20px}
  .form-group label{display:block;font-size:14px;font-weight:500;color:var(--text-body);margin-bottom:8px}
  .form-group .required{color:var(--blue-400)}
  .form-group input,.form-group select,.form-group textarea{width:100%;background:var(--navy-900);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;font-family:var(--font-sans);font-size:15px;color:var(--white);transition:border-color var(--ease) .15s}
  .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--glow)}
  .form-group input.error,.form-group textarea.error{border-color:var(--danger)}
  .form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239aa6b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
  .form-group select option{background:var(--navy-800);color:var(--text-body)}
  .form-group textarea{resize:vertical;min-height:100px}
  .error-msg{display:block;font-size:12px;color:var(--danger);margin-top:4px;min-height:16px}
  .btn-full{width:100%;text-align:center}
  .form-status{margin-top:16px;font-size:14px;text-align:center;min-height:20px}
  .form-status.success{color:var(--success)}
  .form-status.error{color:var(--danger)}
  @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}

  /* P2-3: Active nav state */
  .navlinks a.active{color:var(--white);position:relative}
  .navlinks a.active::after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--blue-500)}

  /* FAQ */
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .faq-item{background:var(--navy-800);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .faq-item[open]{border-color:rgba(59,130,246,.28)}
  .faq-q{list-style:none;font-size:16px;font-weight:500;color:var(--white);background:transparent;border:none;padding:20px 24px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color var(--ease) .15s;width:100%;text-align:left;font-family:inherit}
  .faq-q::-webkit-details-marker{display:none}
  .faq-q::marker{display:none;content:""}
  .faq-q::after{content:"+";font-family:var(--font-mono);font-size:18px;font-weight:400;color:var(--blue-400);flex:none;transition:transform var(--ease) .2s}
  .faq-item[open] .faq-q::after{transform:rotate(45deg)}
  .faq-q:hover{color:var(--blue-300)}
  .faq-a{padding:0 24px 20px;font-size:15px;color:var(--text-secondary);line-height:1.6}

  /* use-cases filter */
  .filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
  .filter-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--ease) .15s}
  .filter-btn:hover{color:var(--white);border-color:var(--text-secondary)}
  .filter-btn[aria-pressed="true"]{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}
  .filter-hidden{display:none !important}

  /* P2-5: Scroll-reveal */
  .reveal-target{opacity:0;transform:translateY(20px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .reveal-target.revealed{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal-target{opacity:1;transform:none}}

/* skip link (a11y) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue-500);color:#fff;
  padding:10px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}

/* active nav state */
.navlinks a[aria-current]{color:var(--white);position:relative}
.navlinks a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--blue-500);border-radius:1px}