:root{
    --graphite:#15171C;
    --paper:#F6F5F2;
    --trace:#3654F4;
    --slate:#6B7178;
    --line-light:#D8D6CF;
    --line-dark:#2A2D33;
    --display: 'Space Grotesk', sans-serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--body);
    background:var(--paper);
    color:var(--graphite);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media(max-width:640px){ .wrap{padding:0 20px;} }

  /* Focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--trace);
    outline-offset:3px;
  }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(246,245,242,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-light);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .logo{display:flex; align-items:center; height:40px;}
  .logo img{height:100%; width:auto; display:block;}
  .nav-links{display:flex; align-items:center; gap:32px; list-style:none;}
  .nav-links a{font-size:0.95rem; color:var(--graphite); position:relative;}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px;
    background:var(--trace); transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--body); font-weight:600; font-size:0.92rem;
    padding:11px 22px; border-radius:2px; cursor:pointer; border:1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-primary{background:var(--graphite); color:var(--paper);}
  .btn-primary:hover{background:var(--trace);}
  .btn-secondary{background:transparent; color:var(--graphite); border-color:var(--graphite);}
  .btn-secondary:hover{border-color:var(--trace); color:var(--trace);}
  .btn-ghost{color:var(--trace); font-weight:600;}
  .nav-cta{display:none;}
  @media(min-width:860px){ .nav-cta{display:inline-flex;} }
  .nav-links{display:none;}
  @media(min-width:860px){ .nav-links{display:flex;} }

  /* ---------- HERO / CONVERGENCE ---------- */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:80px 0 60px;
    overflow:hidden;
  }
  #convergence{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none;
  }
  .hero-content{
    position:relative; z-index:2; text-align:center;
    padding-top:6vh;
  }
  .eyebrow{
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.12em;
    color:var(--trace); text-transform:uppercase; margin-bottom:18px;
  }
  h1{
    font-family:var(--display); font-weight:700;
    font-size:clamp(2.2rem, 5.4vw, 4.4rem);
    line-height:1.05; letter-spacing:-0.02em;
    color:var(--graphite);
  }
  .hero-sub{
    max-width:560px; margin:24px auto 0;
    font-size:1.05rem; color:var(--slate);
  }
  .hero-ctas{
    display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap;
  }
  .scroll-hint{
    margin-top:56px; text-align:center; font-family:var(--mono);
    font-size:0.75rem; color:var(--slate); letter-spacing:0.08em;
  }

  /* ---------- SECTIONS ---------- */
  section{padding:96px 0;}
  .section-dark{background:var(--graphite); color:var(--paper);}
  .divider{
    height:1px; background:var(--line-light); width:100%;
  }
  .section-dark + .section-dark .divider,
  .section-dark .divider{background:var(--line-dark);}

  .eyebrow-mono{
    font-family:var(--mono); font-size:0.75rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--trace); margin-bottom:14px; display:block;
  }
  h2{
    font-family:var(--display); font-weight:600;
    font-size:clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing:-0.01em; margin-bottom:16px;
  }
  .lede{color:var(--slate); max-width:620px; font-size:1.02rem;}
  .section-dark .lede{color:#A9ADB4;}

  /* two paths */
  .paths{
    display:grid; grid-template-columns:1fr; gap:24px; margin-top:48px;
  }
  @media(min-width:760px){ .paths{grid-template-columns:1fr 1fr;} }
  .path-card{
    border:1px solid var(--line-light); padding:36px 32px;
    position:relative; overflow:hidden;
    transition:border-color .2s ease;
  }
  .path-card:hover{border-color:var(--trace);}
  .path-card:hover .trace-in{width:100%;}
  .trace-in{
    position:absolute; left:0; top:0; height:2px; width:0; background:var(--trace);
    transition:width .35s ease;
  }
  .path-card h3{font-family:var(--display); font-size:1.3rem; margin-bottom:12px; font-weight:600;}
  .path-flow{
    font-family:var(--mono); font-size:0.82rem; color:var(--trace);
    margin:18px 0 20px; line-height:1.8;
  }
  .path-card p{color:var(--slate); font-size:0.95rem;}
  .link-arrow{display:inline-block; margin-top:20px; font-weight:600; font-size:0.9rem; color:var(--trace);}

  /* connected system band */
  .system-tags{
    display:flex; flex-wrap:wrap; gap:12px; margin:36px 0 30px;
  }
  .tag{
    font-family:var(--mono); font-size:0.82rem;
    border:1px solid var(--line-dark); color:#CBD0D6;
    padding:8px 14px; border-radius:2px;
  }
  .converge-line{
    font-family:var(--mono); font-size:0.85rem; color:var(--trace);
    margin-top:8px;
  }

  /* process strip */
  .process{
    display:flex; flex-wrap:wrap; gap:0; margin-top:36px;
    border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);
  }
  .process-step{
    flex:1 1 130px; padding:20px 18px; border-right:1px solid var(--line-light);
  }
  .process-step:last-child{border-right:none;}
  .process-num{font-family:var(--mono); color:var(--trace); font-size:0.8rem; margin-bottom:8px;}
  .process-label{font-family:var(--body); font-weight:600; font-size:0.92rem;}

  /* products */
  .products-grid{
    display:grid; grid-template-columns:1fr; gap:24px; margin-top:44px;
  }
  @media(min-width:760px){ .products-grid{grid-template-columns:1fr 1fr;} }
  .product-card{
    border:1px solid var(--line-light); padding:32px;
    background:var(--paper);
  }
  .product-card .eyebrow-mono{color:var(--trace);}
  .product-card h3{font-family:var(--display); font-size:1.5rem; margin-bottom:10px;}
  .product-card p{color:var(--slate); font-size:0.95rem; margin-bottom:18px;}

  /* why zcs grid */
  .why-grid{
    display:grid; grid-template-columns:1fr; gap:1px;
    background:var(--line-light); margin-top:40px; border:1px solid var(--line-light);
  }
  @media(min-width:640px){ .why-grid{grid-template-columns:1fr 1fr;} }
  @media(min-width:960px){ .why-grid{grid-template-columns:repeat(5,1fr);} }
  .why-item{background:var(--paper); padding:26px 22px;}
  .why-item h4{font-family:var(--display); font-size:0.98rem; margin-bottom:8px; font-weight:600;}
  .why-item p{font-size:0.86rem; color:var(--slate);}

  /* final cta */
  .final-cta{text-align:center; padding:110px 0;}
  .final-cta h2{max-width:640px; margin:0 auto 30px;}
  .final-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  footer{
    background:var(--graphite); color:#CBD0D6; padding:56px 0 32px; font-size:0.88rem;
  }
  .footer-grid{
    display:grid; grid-template-columns:1fr; gap:32px;
  }
  @media(min-width:760px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;} }
  .footer-brand{margin-bottom:14px; display:inline-block; background:var(--paper); padding:10px 16px; border-radius:2px;}
  .footer-brand img{height:34px; width:auto; display:block;}
  .footer-sub{font-family:var(--mono); font-size:0.75rem; color:var(--trace); margin-bottom:18px;}
  .footer-col h5{font-family:var(--body); font-weight:600; color:var(--paper); font-size:0.85rem; margin-bottom:14px;}
  .footer-col a{display:block; color:#9BA0A7; margin-bottom:10px;}
  .footer-col a:hover{color:var(--trace);}
  .footer-bottom{
    margin-top:48px; padding-top:24px; border-top:1px solid var(--line-dark);
    color:#7B8087; font-size:0.8rem;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* ---------- SCROLL REVEAL SYSTEM ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.16,.8,.28,1), transform .7s cubic-bezier(.16,.8,.28,1);
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }
  .reveal-group > *{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.16,.8,.28,1), transform .6s cubic-bezier(.16,.8,.28,1);
  }
  .reveal-group.in-view > *{ opacity:1; transform:translateY(0); }
  .reveal-group.in-view > *:nth-child(1){ transition-delay:0ms; }
  .reveal-group.in-view > *:nth-child(2){ transition-delay:90ms; }
  .reveal-group.in-view > *:nth-child(3){ transition-delay:180ms; }
  .reveal-group.in-view > *:nth-child(4){ transition-delay:270ms; }
  .reveal-group.in-view > *:nth-child(5){ transition-delay:360ms; }
  .reveal-group.in-view > *:nth-child(6){ transition-delay:450ms; }
  .reveal-group.in-view > *:nth-child(7){ transition-delay:540ms; }
  .reveal-group.in-view > *:nth-child(8){ transition-delay:630ms; }

  .reveal-line{
    position:relative; overflow:hidden;
  }
  .reveal-line::after{
    content:""; position:absolute; inset:0; background:var(--paper);
    transform-origin:right;
    transform:scaleX(0);
  }
  .section-dark .reveal-line::after{ background:var(--graphite); }

  .converge-line{
    opacity:0; transform:translateX(-14px);
    transition:opacity .6s ease .2s, transform .6s ease .2s;
  }
  .converge-line.in-view{ opacity:1; transform:translateX(0); }

  .process-step{ opacity:0; transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease; }
  .process.in-view .process-step{ opacity:1; transform:translateY(0); }
  .process.in-view .process-step:nth-child(1){transition-delay:0ms;}
  .process.in-view .process-step:nth-child(2){transition-delay:70ms;}
  .process.in-view .process-step:nth-child(3){transition-delay:140ms;}
  .process.in-view .process-step:nth-child(4){transition-delay:210ms;}
  .process.in-view .process-step:nth-child(5){transition-delay:280ms;}
  .process.in-view .process-step:nth-child(6){transition-delay:350ms;}
  .process.in-view .process-step:nth-child(7){transition-delay:420ms;}

  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-group > *, .converge-line, .process-step{
      opacity:1 !important; transform:none !important; transition:none !important;
    }
  }