:root{
    --void:#0A0A12;
    --void-2:#0F0E1A;
    --panel:#15141F;
    --panel-line: rgba(244,243,250,0.09);
    --automation:#6C5CE7;
    --automation-2:#22D3EE;
    --human:#D8B472;          /* brand gold — the human checkpoint colour */
    --human-2:#E8C48A;
    --danger:#E2685A;       /* form error state only */
    --text:#F4F3FA;
    --muted:#9A98B5;
    --max:1160px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--void);
    color:var(--text);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  /* One sans across the whole page. The logo is the only serif on the site,
     which makes it an event rather than a theme. Tracking tightens as size
     grows — Inter is drawn loose for UI and needs pulling in at display sizes. */
  h1,h2,.display{
    font-family:'Inter', sans-serif;
    color:var(--text);
    font-weight:700;
    letter-spacing:-0.035em;
    margin:0;
  }
  h3{font-family:'Inter', sans-serif; color:var(--text); margin:0; font-weight:600; letter-spacing:-0.015em;}
  .mono{
    font-family:'IBM Plex Mono', monospace;
    letter-spacing:0.06em;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}

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

  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
  .grad-text{
    background:linear-gradient(90deg, var(--automation-2), var(--automation));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* ---------- NAV ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(10,10,18,0.75);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--panel-line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:72px; gap:20px;
  }
  /* The hero carries the mark on arrival, so the nav stays empty until the
     hero lockup scrolls out — one logo on screen at a time, never two. */
  .logo{
    display:flex; align-items:center; text-decoration:none; flex-shrink:0;
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  .logo.is-visible{opacity:1; transform:none; pointer-events:auto;}
  .logo img{height:40px; width:auto;}
  @media (max-width:520px){ .logo img{height:32px;} }
  .nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0;}
  .nav-links a{
    color:var(--muted);
    text-decoration:none;
    font-size:0.92rem;
    font-weight:500;
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--text);}
  .nav-right{display:flex; align-items:center; gap:14px;}
  .lang{
    display:flex; gap:2px; padding:3px;
    background:rgba(244,243,250,0.04);
    border:1px solid var(--panel-line);
    border-radius:100px;
  }
  .lang a{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.7rem; letter-spacing:0.05em;
    padding:6px 11px; border-radius:100px;
    color:var(--muted); text-decoration:none;
    transition:background .2s, color .2s;
  }
  .lang a:hover{color:var(--text);}
  .lang a[aria-current="true"]{background:rgba(216,180,114,0.15); color:var(--human);}
  .nav-cta{
    background:linear-gradient(100deg, var(--automation), var(--automation-2));
    color:#0A0A12;
    padding:10px 20px;
    border-radius:100px;
    text-decoration:none;
    font-size:0.86rem;
    font-weight:600;
    white-space:nowrap;
  }
  .nav-toggle{display:none; background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; padding:4px 8px;}
  .mobile-menu{display:none; border-top:1px solid var(--panel-line); background:rgba(10,10,18,0.98);}
  .mobile-menu.open{display:block;}
  .mobile-menu ul{list-style:none; margin:0; padding:14px 28px 22px;}
  .mobile-menu li{padding:11px 0; border-bottom:1px solid rgba(244,243,250,0.05);}
  .mobile-menu li:last-child{border-bottom:none;}
  .mobile-menu a{color:var(--text); text-decoration:none; font-size:1rem;}
  @media (max-width:1180px){
    .nav-links{display:none;}
    .nav-toggle{display:block;}
    .nav-cta{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{position:relative; overflow:hidden; padding:72px 0 60px;}
  .hero-mark{margin-bottom:32px;}
  .hero-mark img{height:110px; width:auto;}
  @media (max-width:760px){ .hero-mark img{height:82px;} .hero-mark{margin-bottom:26px;} }
  .hero-glow{
    position:absolute; inset:-20% -10% -10% -10%;
    background:
      radial-gradient(560px 420px at 18% 20%, rgba(108,92,231,0.35), transparent 60%),
      radial-gradient(480px 380px at 78% 5%, rgba(34,211,238,0.22), transparent 60%),
      radial-gradient(420px 320px at 55% 45%, rgba(216,180,114,0.13), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(244,243,250,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(244,243,250,0.035) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(circle at 50% 0%, black, transparent 78%);
    -webkit-mask-image:radial-gradient(circle at 50% 0%, black, transparent 78%);
    pointer-events:none;
  }
  .hero-inner{position:relative; z-index:2;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--automation-2);
    display:inline-flex; align-items:center; gap:10px;
    margin-bottom:26px;
    padding:7px 14px 7px 10px;
    border:1px solid rgba(34,211,238,0.3);
    border-radius:100px;
    background:rgba(34,211,238,0.06);
  }
  .eyebrow::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--automation-2);
    box-shadow:0 0 8px var(--automation-2);
  }
  .hero h1{
    font-size:clamp(2.25rem, 5.2vw, 3.9rem);
    line-height:1.03;
    letter-spacing:-0.042em;
    max-width:18ch;
  }
  .hero .lede{
    font-size:1.15rem;
    line-height:1.65;
    color:var(--muted);
    max-width:46ch;
    margin:26px 0 36px;
  }
  .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 28px;
    border-radius:100px;
    text-decoration:none;
    font-size:0.92rem;
    font-weight:600;
    transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .btn-primary{
    background:linear-gradient(100deg, var(--automation), var(--automation-2));
    color:#0A0A12;
    box-shadow:0 8px 28px rgba(108,92,231,0.35);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 34px rgba(108,92,231,0.5);}
  .btn-ghost{border:1px solid var(--panel-line); color:var(--text); background:rgba(244,243,250,0.03);}
  .btn-ghost:hover{border-color:var(--automation-2); color:var(--automation-2);}

  /* ---------- FLOW DIAGRAM (signature) ---------- */
  .flow-panel{
    background:rgba(21,20,31,0.75);
    backdrop-filter:blur(16px);
    border:1px solid var(--panel-line);
    border-radius:20px;
    padding:30px 26px 22px;
    box-shadow:0 0 0 1px rgba(108,92,231,0.06), 0 30px 80px -30px rgba(108,92,231,0.35);
  }
  .flow-caption{
    display:flex; justify-content:space-between; align-items:baseline;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    color:var(--muted);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-bottom:10px;
  }
  .flow-caption .live{color:var(--automation-2); display:flex; align-items:center; gap:6px;}
  .flow-caption .live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--automation-2); box-shadow:0 0 8px var(--automation-2);}
  .flow-scenario{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.8rem;
    letter-spacing:0.04em;
    color:var(--human);
    margin:2px 0 14px;
    min-height:1.2em;
    transition:opacity .25s ease;
  }
  .flow-scenario:empty{display:none; margin:0;}
  .flow-svg{width:100%; height:auto; display:block;}
  .flow-line{fill:none; stroke:url(#lineGrad); stroke-width:2; opacity:0.55;}
  .node circle{fill:#15141F; stroke:rgba(244,243,250,0.3); stroke-width:2;}
  .node.done circle{stroke:var(--automation-2); filter:drop-shadow(0 0 4px rgba(34,211,238,0.5));}
  .node-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    line-height:1.3;
    color:var(--muted);
    text-align:center;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
  }
  /* Labels below their node grow downward from the top of the reserved
     box (stays close to the node when short); labels above grow upward
     from the bottom, for the same reason. */
  .node-label.below{ justify-content:flex-start; }
  .node-label.above{ justify-content:flex-end; }
  .node.checkpoint .node-label{ color:var(--human); }
  .node.checkpoint circle{stroke:var(--human); animation:checkpointPulse 9s linear infinite;}
  @keyframes checkpointPulse{
    0%, 32%{ stroke-width:2; filter:none; }
    36%, 58%{ stroke-width:3; filter:drop-shadow(0 0 10px rgba(216,180,114,0.95)); }
    63%, 100%{ stroke-width:2; filter:none; }
  }
  /* Token eases into the checkpoint, holds while a human decides, then goes.
     offset-distance 57% is where node 4 sits along this path's total arc
     length (recompute if the path geometry changes again). */
  .token{
    offset-path: path("M 40 100 L 220 55 L 400 140 L 560 100 L 780 55 L 960 100");
    offset-rotate:0deg;
    animation:travel 9s cubic-bezier(.36,.06,.28,1) infinite;
  }
  @keyframes travel{
    0%{ offset-distance:0%; }
    34%{ offset-distance:57%; }
    60%{ offset-distance:57%; }
    100%{ offset-distance:100%; }
  }
  .token circle{fill:var(--automation-2); r:5.5; filter:drop-shadow(0 0 6px rgba(34,211,238,0.9)); animation:tokenWait 9s linear infinite;}
  @keyframes tokenWait{
    0%,34%{fill:var(--automation-2);}
    38%,58%{fill:var(--human);}
    63%,100%{fill:var(--automation-2);}
  }
  /* Lives above the diagram, in normal document flow -- not fighting for
     space with a node label or the connector path like the in-SVG
     placement it replaced. Reserves 2 lines' height so nothing shifts
     when the status appears/disappears. */
  .flow-status-top{
    position:relative;
    min-height:44px;
    margin-bottom:6px;
  }
  .status-text{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.95rem;
    font-weight:500;
    line-height:1.35;
    text-align:center;
    position:absolute;
    left:0; right:0; top:0;
  }
  .status-wait{ color:var(--human); opacity:0; animation:statusWait 9s linear infinite; }
  .status-ok{ color:var(--automation-2); opacity:0; animation:statusOk 9s linear infinite; }
  @keyframes statusWait{ 0%,33%{opacity:0;} 36%,56%{opacity:1;} 60%,100%{opacity:0;} }
  @keyframes statusOk{ 0%,60%{opacity:0;} 63%,78%{opacity:1;} 90%,100%{opacity:0;} }
  .flow-pips{display:flex; gap:7px; justify-content:center; margin-top:18px;}
  .flow-pips:empty{display:none; margin:0;}
  .flow-pips .pip{width:6px; height:6px; border-radius:50%; background:rgba(244,243,250,0.18); transition:background .25s ease;}
  .flow-pips .pip.active{background:var(--automation-2); box-shadow:0 0 6px rgba(34,211,238,0.6);}
  .flow-framing{
    font-size:0.95rem;
    line-height:1.6;
    color:var(--muted);
    max-width:46ch;
    margin:22px 0 0;
  }
  .flow-framing:empty{display:none; margin:0;}

  /* ---------- SECTIONS ---------- */
  section{padding:110px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.76rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--automation-2);
    margin-bottom:16px;
    display:block;
  }
  .section-head h2{font-size:clamp(1.75rem, 3.3vw, 2.6rem); line-height:1.12; letter-spacing:-0.032em;}
  .section-head p{margin-top:18px; font-size:1.06rem; line-height:1.65; color:var(--muted);}

  .grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
  @media (max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .grid-4{grid-template-columns:1fr;} }
  .card{
    background:linear-gradient(160deg, rgba(244,243,250,0.05), rgba(244,243,250,0.015));
    border:1px solid var(--panel-line);
    border-radius:18px;
    padding:32px 26px;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .card:hover{transform:translateY(-4px); border-color:rgba(108,92,231,0.4); box-shadow:0 20px 50px -25px rgba(108,92,231,0.5);}
  .card .num{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--automation-2); margin-bottom:22px; display:block;}
  .card h3{ font-size:1.12rem; font-weight:600; margin-bottom:12px; }
  .card p{ font-size:0.97rem; line-height:1.6; color:var(--muted); margin:0; }

  .method{ background:var(--void-2); position:relative; }
  .method-principle{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:80px;}
  @media (max-width:860px){ .method-principle{grid-template-columns:1fr; gap:32px;} }
  .principle-quote{
    font-family:'Inter', sans-serif;
    font-size:clamp(1.55rem, 2.8vw, 2.15rem);
    line-height:1.24;
    font-weight:700;
    letter-spacing:-0.03em;
    margin:0;
  }
  .principle-body p{ font-size:1.02rem; line-height:1.7; color:var(--muted); margin:0 0 16px; }
  .steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
  @media (max-width:860px){ .steps{grid-template-columns:1fr 1fr; row-gap:40px;} }
  @media (max-width:520px){ .steps{grid-template-columns:1fr;} }
  .step{border-radius:16px; padding:22px 20px; background:rgba(244,243,250,0.03); border:1px solid var(--panel-line);}
  .step .num{font-family:'IBM Plex Mono', monospace; font-size:0.85rem; color:var(--human); display:block; margin-bottom:14px;}
  .step h3{ font-size:1.03rem; font-weight:600; margin-bottom:10px; }
  .step p{ font-size:0.94rem; line-height:1.6; color:var(--muted); margin:0; }

  .security{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
  @media (max-width:860px){ .security{grid-template-columns:1fr; gap:36px;} }
  .security-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
  .security-list li{display:flex; gap:16px; padding:22px; border-radius:16px; background:rgba(244,243,250,0.03); border:1px solid var(--panel-line);}
  .security-list .mark{font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--automation-2); flex-shrink:0; padding-top:2px;}
  .security-list h3{ font-size:1.02rem; font-weight:600; margin-bottom:6px; }
  .security-list p{ font-size:0.94rem; line-height:1.6; color:var(--muted); margin:0; }

  .apps{ background:var(--void-2); }
  .apps-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:760px){ .apps-row{grid-template-columns:1fr;} }
  .apps-col{border-radius:20px; padding:42px 34px; border:1px solid var(--panel-line); background:linear-gradient(160deg, rgba(244,243,250,0.05), rgba(244,243,250,0.01));}
  .apps-col .platform{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--human); margin-bottom:16px; display:block;}
  .apps-col h3{ font-size:1.3rem; font-weight:600; margin-bottom:14px; }
  .apps-col p{ font-size:0.98rem; line-height:1.65; color:var(--muted); margin:0; }

  .advisory-inner{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center; }
  @media (max-width:860px){ .advisory-inner{grid-template-columns:1fr; gap:32px;} }
  .advisory-box{background:rgba(244,243,250,0.03); border:1px solid var(--panel-line); border-left:3px solid var(--human); border-radius:16px; padding:32px 30px;}
  .advisory-box .mono{font-size:0.76rem; color:var(--muted); display:block; margin-bottom:12px; text-transform:uppercase;}
  .advisory-box p{font-size:0.98rem; line-height:1.6; color:var(--text); margin:0 0 10px;}
  .advisory-box p:last-child{margin-bottom:0;}

  .cta-section{position:relative; overflow:hidden; text-align:center; padding:120px 0;}
  .cta-glow{position:absolute; inset:0; background:radial-gradient(600px 400px at 50% 0%, rgba(108,92,231,0.25), transparent 70%); pointer-events:none;}
  .cta-section .section-eyebrow{ justify-content:center; display:inline-flex; margin:0 auto 20px; }
  .cta-section h2{font-size:clamp(1.95rem, 4.2vw, 2.9rem); max-width:18ch; margin:0 auto; line-height:1.11; letter-spacing:-0.035em; position:relative; z-index:2;}
  .cta-section p{font-size:1.05rem; color:var(--muted); max-width:48ch; margin:22px auto 36px; line-height:1.6; position:relative; z-index:2;}
  .cta-section .cta-row{ justify-content:center; margin-bottom:0; position:relative; z-index:2; }

  .contact-form{
    position:relative; z-index:2;
    margin:36px auto 0;
    max-width:560px;
    text-align:left;
  }
  .contact-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:560px){ .contact-form .form-row{grid-template-columns:1fr;} }
  .contact-form .field{ margin-bottom:18px; }
  .contact-form label{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .contact-form input, .contact-form textarea{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--panel-line);
    background:rgba(244,243,250,0.03);
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:0.95rem;
  }
  .contact-form input:focus, .contact-form textarea:focus{ border-color:var(--automation-2); }
  .contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"]{ border-color:var(--danger); }
  .field-error{ display:block; font-size:0.82rem; color:var(--danger); margin-top:6px; }
  .field-error:empty{ display:none; }
  .contact-form textarea{ resize:vertical; min-height:110px; }
  .contact-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .contact-form button[type="submit"]{ border:none; cursor:pointer; font-family:inherit; }
  .form-status{ margin-top:16px; font-size:0.92rem; min-height:1.4em; }
  .form-status.ok{ color:var(--automation-2); }
  .form-status.error{ color:var(--danger); }

  /* ---------- LEGAL PAGES ---------- */
  .legal-head{max-width:640px; margin-bottom:48px;}
  .legal-head h1{font-size:clamp(1.75rem, 3.3vw, 2.6rem); line-height:1.12; letter-spacing:-0.032em;}
  .legal-updated{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:16px;
  }
  .legal-body{max-width:680px;}
  .legal-body h2{font-size:1.25rem; font-weight:600; letter-spacing:-0.01em; margin:44px 0 14px;}
  .legal-body h2:first-child{margin-top:0;}
  .legal-body p{font-size:1rem; line-height:1.7; color:var(--muted); margin:0 0 14px;}
  .legal-body p:last-child{margin-bottom:0;}
  .legal-body a{color:var(--automation-2);}

  .form-privacy-note{font-size:0.82rem; line-height:1.55; color:var(--muted); margin-top:12px; max-width:480px;}
  .form-privacy-note a{color:var(--automation-2);}

  footer{border-top:1px solid var(--panel-line); padding:64px 0 48px; font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--muted);}
  .footer-mark{margin-bottom:20px;}
  .footer-mark img{height:110px; width:auto;}
  @media (max-width:560px){ .footer-mark img{height:84px;} }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footer-row a{text-decoration:none; color:var(--muted);}
  .footer-row a:hover{color:var(--human);}

  /* Very narrow phones (320px): the invisible nav logo still occupies its
     box, so the bar has to give ground or the page scrolls sideways. */
  @media (max-width:380px){
    .wrap{padding:0 18px;}
    nav.wrap{gap:10px;}
    .nav-right{gap:8px;}
    .logo img{height:26px;}
    .lang a{padding:5px 8px; font-size:0.64rem;}
    .nav-toggle{font-size:1.3rem; padding:4px;}
  }

  /* Landscape phones: a 72px sticky bar plus a 110px lockup eats a 390px-tall
     viewport before the headline gets a word in. Everything tightens. */
  @media (max-height:500px) and (orientation:landscape){
    nav.wrap{height:54px;}
    .hero{padding:28px 0 36px;}
    .hero-mark{margin-bottom:18px;}
    .hero-mark img{height:56px;}
    .eyebrow{margin-bottom:16px; padding:5px 12px 5px 9px; font-size:0.7rem;}
    .hero h1{font-size:clamp(1.6rem, 4.2vw, 2.2rem);}
    .hero .lede{font-size:1rem; margin:16px 0 22px;}
    .btn{padding:11px 20px; font-size:0.86rem;}
    .cta-row{margin-bottom:36px;}
    section{padding:56px 0;}
    .section-head{margin-bottom:32px;}
    .cta-section{padding:64px 0;}
    .mobile-menu ul{padding:10px 28px 14px;}
    .mobile-menu li{padding:8px 0;}
  }

  ::selection{background:var(--automation); color:#0A0A12;}
  a.skip-link:focus{position:fixed; top:8px; left:8px; z-index:100; background:var(--human); color:#0A0A12; padding:8px 14px; border-radius:8px;}
  a.skip-link{position:absolute; left:-999px;}
  :focus-visible{outline:2px solid var(--automation-2); outline-offset:2px;}