@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/BarlowCondensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/BarlowCondensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/BarlowCondensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/BarlowCondensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/BarlowCondensed-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/BarlowCondensed-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/RobotoMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/RobotoMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/RobotoMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/RobotoMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/RobotoMono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/RobotoMono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  :root{
    --ink:#131A22;
    --ink-2:#1B2430;
    --slate:#232F3E;
    --slate-2:#37475A;
    --amber:#FF9900;
    --amber-light:#FFB84D;
    --amber-dim:#9E5800;
    --green:#067D62;
    /* Success colour for dark surfaces: #067D62 only reaches 2.66:1 on --slate. */
    --green-on-dark:#3DDCB2;
    --paper:#FFFFFF;
    --mist:#F2F2F2;
    --line:#E3E6E6;
    --ink-soft:#5A6570;
    --ink-softer:#98A1AA;
    --radius:10px;
    --wrap:1180px;
    --shadow-card:0 1px 2px rgba(19,26,34,0.04), 0 16px 32px -20px rgba(19,26,34,0.16);
    --shadow-card-hover:0 1px 2px rgba(19,26,34,0.05), 0 26px 44px -18px rgba(19,26,34,0.24);
    --shadow-dark-card:0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 48px -20px rgba(0,0,0,0.55);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* scroll-padding keeps anchored sections clear of the fixed header */
  html{scroll-behavior:smooth; scroll-padding-top:86px;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    line-height:1.02;
    text-transform:none;
  }
  .mono{
    font-family:'Roboto Mono',monospace;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
  img,svg{display:block;}
  ::selection{background:var(--amber); color:var(--ink);}

  /* Focus visibility.
     Amber only reaches 2.14:1 on white, so light surfaces get an ink ring instead. */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:3px;
  }
  .picker-chip:focus-visible, .role-pill:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:2px;
  }

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

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(19,26,34,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .nav-inner{
    max-width:var(--wrap); margin:0 auto; padding:16px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .nav-inner .btn{padding:8px 17px; font-size:12.5px;}
  .logo{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800; font-size:24px; color:#fff; letter-spacing:0.02em;
    display:flex; align-items:center; gap:9px;
  }
  .logo span{color:var(--amber); margin-left:-8px;} /* the dot is a flex item: pull it back onto the wordmark */
  .logo-icon{flex:none; display:block;}
  /* ---------- INSTRUMENT NAV ----------
     The brand mark is a gauge, so the nav behaves like one: a needle that slides
     between readings and settles with a slight overshoot, mono channel numbers, and
     a live position line. Everything animates transform/opacity only. */
  nav.links{display:flex; gap:4px; align-items:center; position:relative;}
  nav.links a{
    position:relative; display:inline-flex; align-items:center; gap:7px;
    padding:9px 14px; border-radius:7px;
    font-size:14px; color:#C7CCD1; font-weight:500;
    transition:color 0.25s ease, background 0.25s ease;
    isolation:isolate;
  }
  nav.links a .ch{
    font-family:'Roboto Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:0.06em; color:var(--ink-softer); opacity:0.75;
    transition:color 0.25s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(.2,.9,.25,1);
  }
  nav.links a:hover{color:#fff; background:rgba(255,255,255,0.05);}
  nav.links a:hover .ch{color:var(--amber); opacity:1; transform:translateY(-1px);}
  nav.links a.on{color:#fff;}
  nav.links a.on .ch{color:var(--amber); opacity:1;}

  /* the needle: one element that travels, rather than a border per item */
  .nav-needle{
    position:absolute; left:0; bottom:2px; height:2px; width:0;
    background:linear-gradient(90deg, transparent, var(--amber) 18%, var(--amber-light) 50%, var(--amber) 82%, transparent);
    border-radius:2px; opacity:0; pointer-events:none;
    transform-origin:center;
    /* overshoot then settle — a gauge needle finding its reading */
    transition:transform 0.52s cubic-bezier(.34,1.42,.42,1), width 0.52s cubic-bezier(.34,1.42,.42,1), opacity 0.25s ease;
  }
  .nav-needle::after{
    content:""; position:absolute; left:50%; top:-3px; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%; background:var(--amber);
    box-shadow:0 0 10px 2px rgba(255,153,0,0.75);
  }
  nav.links.armed .nav-needle{opacity:1;}

  /* scroll position read out across the foot of the header */
  .nav-progress{
    position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:linear-gradient(90deg, var(--amber-dim), var(--amber) 55%, var(--amber-light));
    transform:scaleX(0); transform-origin:left center;
    will-change:transform; pointer-events:none;
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:11px 22px; border-radius:6px; font-weight:600; font-size:14px;
    cursor:pointer; border:none; transition:transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.15s;
    white-space:nowrap;
  }
  .btn-primary{
    background:linear-gradient(155deg, var(--amber-light), var(--amber)); color:var(--ink);
    box-shadow:0 4px 0 var(--amber-dim), 0 14px 26px -12px rgba(255,153,0,0.6);
  }
  .btn-primary:hover{
    background:linear-gradient(155deg, #FFC363, #FFA929); transform:translateY(-2px);
    box-shadow:0 6px 0 var(--amber-dim), 0 18px 30px -10px rgba(255,153,0,0.6);
  }
  .btn-primary:active{transform:translateY(1px); box-shadow:0 2px 0 var(--amber-dim), 0 8px 16px -10px rgba(255,153,0,0.5);}
  .btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.25);}
  .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,0.06); transform:translateY(-2px);}
  .btn-ghost:active{transform:translateY(1px);}
  .btn-dark{
    background:linear-gradient(155deg, #1B2430, var(--ink)); color:#fff;
    box-shadow:0 4px 0 #000, 0 12px 22px -12px rgba(19,26,34,0.6);
  }
  .btn-dark:hover{background:#000; transform:translateY(-2px); box-shadow:0 6px 0 #000, 0 16px 26px -10px rgba(19,26,34,0.6);}
  .btn-dark:active{transform:translateY(1px); box-shadow:0 2px 0 #000, 0 6px 14px -10px rgba(19,26,34,0.5);}

  /* ---------- LANG TOGGLE ---------- */
  .lang-toggle{
    display:flex; align-items:center; background:rgba(255,255,255,0.08);
    border-radius:20px; padding:3px; gap:2px; margin-right:6px;
  }
  .lang-btn{
    border:none; background:transparent; color:#AEB8C2; font-size:12px; font-weight:700;
    padding:6px 12px; border-radius:16px; cursor:pointer; font-family:'Inter',sans-serif;
    transition:background 0.15s, color 0.15s; letter-spacing:0.03em;
  }
  .lang-btn.active{background:var(--amber); color:var(--ink);}

  /* ---------- MOBILE NAV ---------- */
  .nav-toggle{
    display:none; width:42px; height:42px; margin-left:8px; flex:none;
    background:transparent; border:1px solid rgba(255,255,255,0.22); border-radius:8px;
    cursor:pointer; padding:0; align-items:center; justify-content:center;
  }
  .nav-toggle:hover{border-color:#fff; background:rgba(255,255,255,0.06);}
  .nav-toggle-bars{position:relative; width:18px; height:12px; display:block;}
  .nav-toggle-bars span{
    position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:#fff;
    transition:transform 0.22s ease, opacity 0.15s ease;
  }
  .nav-toggle-bars span:nth-child(1){top:0;}
  .nav-toggle-bars span:nth-child(2){top:5px;}
  .nav-toggle-bars span:nth-child(3){top:10px;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

  .mobile-menu{
    display:none;
    border-top:1px solid rgba(255,255,255,0.1);
    background:rgba(19,26,34,0.98);
    backdrop-filter:blur(8px);
    padding:10px 32px 22px;
    max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .mobile-menu a.m-link{
    display:flex; align-items:center; gap:12px;
    padding:15px 4px; font-size:16px; font-weight:600; color:#DADFE3;
    border-bottom:1px solid rgba(255,255,255,0.07);
    /* staggered entrance, index set inline per item */
    opacity:0; transform:translateX(-14px);
    transition:opacity 0.34s ease, transform 0.34s cubic-bezier(.2,.9,.25,1), color 0.2s;
    transition-delay:calc(var(--i) * 45ms);
  }
  .mobile-menu.open a.m-link{opacity:1; transform:translateX(0);}
  .mobile-menu a.m-link .ch{
    font-family:'Roboto Mono',monospace; font-size:10px; font-weight:600;
    color:var(--amber-dim); min-width:20px;
  }
  .mobile-menu a.m-link:hover, .mobile-menu a.m-link:focus-visible{color:var(--amber);}
  .mobile-menu a.m-link:hover .ch{color:var(--amber);}
  .mobile-menu .btn{
    width:100%; margin-top:18px; padding:14px 22px; font-size:15px;
    opacity:0; transform:translateY(10px);
    transition:opacity 0.34s ease, transform 0.34s cubic-bezier(.2,.9,.25,1);
    transition-delay:270ms;
  }
  .mobile-menu.open .btn{opacity:1; transform:translateY(0);}

  /* ---------- SIDE RAIL ----------
     A vertical telemetry strip: one marker per section, label revealed on hover,
     active marker driven by the same observer that moves the top needle. */
  .rail{
    position:fixed; right:22px; top:50%; z-index:90;
    display:none; flex-direction:column; gap:1px; padding:9px 10px;
    border-radius:26px;
    /* the site alternates dark and light sections, so this floats over both —
       it has to read as a deliberate instrument module, not a translucent smudge */
    background:linear-gradient(165deg, rgba(38,48,60,0.94), rgba(19,26,34,0.94));
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 18px 40px -14px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.07) inset;
    backdrop-filter:blur(10px);
    transform:translateY(-50%) translateX(24px); opacity:0;
    transition:transform 0.6s cubic-bezier(.2,.9,.25,1), opacity 0.5s ease;
  }
  .rail.ready{transform:translateY(-50%) translateX(0); opacity:1;}
  .rail-item{
    position:relative; display:flex; align-items:center; justify-content:flex-end;
    gap:10px; padding:7px 6px; border-radius:20px; cursor:pointer;
    background:none; border:none; font-family:'Inter',sans-serif;
  }
  .rail-label{
    font-size:12px; font-weight:600; color:#C7CCD1; white-space:nowrap;
    max-width:0; overflow:hidden; opacity:0;
    transition:max-width 0.4s cubic-bezier(.2,.9,.25,1), opacity 0.28s ease, color 0.2s;
  }
  .rail-item:hover .rail-label, .rail-item:focus-visible .rail-label{max-width:130px; opacity:1;}
  .rail-item.on .rail-label{max-width:130px; opacity:1; color:#fff;}
  .rail-tick{
    position:relative; flex:none; width:22px; height:2px; border-radius:2px;
    background:rgba(255,255,255,0.28);
    transition:width 0.4s cubic-bezier(.34,1.42,.42,1), background 0.28s ease, box-shadow 0.28s ease;
  }
  .rail-item:hover .rail-tick{background:#fff; width:26px;}
  .rail-item.on .rail-tick{
    background:var(--amber); width:30px;
    /* tinted and tight, not a halo: a 12px amber bloom was the only outer glow
       on the page and read as a different design language */
    box-shadow:0 1px 6px -1px rgba(255,153,0,0.55);
  }
  .rail-item:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
  @media (min-width:1180px){ .rail{display:flex;} }

  @media (prefers-reduced-motion: reduce){
    .nav-needle, .rail, .rail-tick, .rail-label, .mobile-menu a.m-link, .mobile-menu .btn{
      transition-duration:0.01ms !important; transition-delay:0ms !important;
    }
    .rail{transform:translateY(-50%) translateX(0); opacity:1;}
  }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(ellipse 900px 560px at 82% -10%, rgba(255,153,0,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at -5% 110%, rgba(55,71,90,0.55), transparent 60%),
      linear-gradient(165deg, var(--ink-2) 0%, var(--ink) 55%, #0E1420 100%);
    color:#fff;
    padding:168px 0 96px;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; top:-220px; right:-180px;
    width:560px; height:560px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #1c2530, transparent 70%);
  }
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
    position:relative; z-index:1;
  }
  .eyebrow{
    font-size:12px; color:var(--amber); font-weight:600;
    display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  }
  .eyebrow::before{content:""; width:18px; height:2px; background:var(--amber); display:inline-block;}
  .hero h1{
    font-size:clamp(40px, 5vw, 64px);
    margin-bottom:22px;
    text-shadow:0 4px 24px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.75);
  }
  .hero h1 em{
    font-style:normal; color:var(--amber);
  }
  .hero p.lead{
    font-size:18.5px; line-height:1.58; color:#C7CCD1; max-width:520px; margin-bottom:34px;
    text-shadow:0 2px 12px rgba(0,0,0,0.5);
  }
  /* The promise, not decoration: only the payoff phrase is lit. */
  .hero p.lead em{font-style:normal; font-weight:600; color:#fff;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
  .hero-tagline{
    font-size:12px; color:var(--ink-softer); letter-spacing:0.12em; font-weight:600;
  }
  .hero-tagline b{color:#fff;}

  /* Dashboard signature widget */
  .scorecard{
    position:relative; z-index:1;
    background:linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01) 40%), var(--slate);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    padding:22px 22px 18px;
    box-shadow:0 40px 70px -24px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.09) inset;
    backdrop-filter:blur(6px);
    max-width:380px;
    margin:44px 0 0 auto;
  }
  .scorecard-head{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .scorecard-head .mono{font-size:11px; color:var(--ink-softer);}
  .metric-row{margin-bottom:16px;}
  .metric-row:last-child{margin-bottom:0;}
  .metric-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px;}
  .metric-label{font-size:13px; color:#C7CCD1; font-weight:500;}
  .metric-value{font-family:'Roboto Mono',monospace; font-size:15px; font-weight:600; color:#fff;}
  .metric-value.good{color:var(--green-on-dark);}
  .metric-track{height:6px; background:rgba(255,255,255,0.09); border-radius:4px; overflow:hidden;}
  /* Grows by transform, not width: width would reflow the card on every frame
     of a 1.4s animation, and this sits in the hero. The track clips it. */
  .metric-fill{
    height:100%; width:100%; border-radius:4px; background:var(--green-on-dark);
    transform:scaleX(0); transform-origin:left center;
    transition:transform 1.4s cubic-bezier(.2,.8,.2,1);
  }
  .metric-fill.amber{background:var(--amber);}
  .scorecard-foot{
    margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08);
    font-size:12px; color:var(--ink-softer); display:flex; justify-content:space-between;
  }

  /* ---------- SECTION GENERIC ---------- */
  section{padding:104px 0;}
  .section-mist{background:var(--mist);}
  .section-ink{background:linear-gradient(175deg, var(--ink-2) 0%, var(--ink) 45%); color:#fff;}
  .kicker{
    font-size:11.5px; color:var(--amber-dim); font-weight:700; margin-bottom:16px;
    display:inline-flex; align-items:center; gap:8px;
    text-transform:uppercase; letter-spacing:0.09em;
    padding:6px 13px 6px 10px; border-radius:20px;
    background:rgba(255,153,0,0.09); border:1px solid rgba(158,88,0,0.22);
  }
  .kicker::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); flex:none;}
  .section-ink .kicker{color:var(--amber); background:rgba(255,153,0,0.1); border-color:rgba(255,153,0,0.24);}
  :is(h1,h2).title{font-size:clamp(30px, 3.6vw, 44px); max-width:680px; margin-bottom:16px;}
  p.sub{font-size:16px; color:var(--ink-soft); max-width:560px; line-height:1.6;}
  .section-ink p.sub{color:#B7BEC5;}

  /* Anything an in-page link points at has to clear the fixed header. The
     script below computes this from the live header height; this is the floor
     for native fragment navigation and for a visitor without JS. */
  :where(section[id], article[id], #main-content){scroll-margin-top:112px;}
  .reveal{opacity:1; transform:none; transition:opacity 0.6s ease, transform 0.6s ease;}
  .reveal.pre{opacity:0; transform:translateY(18px);}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- FREEDOM SECTION ---------- */
  .freedom-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px;}
  .freedom-card{
    background:linear-gradient(165deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:28px 24px;
    box-shadow:var(--shadow-dark-card); transition:transform 0.2s, border-color 0.2s;
  }
  .freedom-card:hover{transform:translateY(-3px); border-color:rgba(255,153,0,0.3);}
  .freedom-icon{
    width:46px; height:46px; border-radius:10px;
    background:linear-gradient(155deg, var(--amber-light), var(--amber));
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    box-shadow:0 10px 20px -8px rgba(255,153,0,0.45), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 5px rgba(133,66,0,0.35);
    transform:translateZ(28px);
  }
  .freedom-card h3{font-family:'Inter',sans-serif; font-weight:700; font-size:16px; color:#fff; margin-bottom:9px;}
  .freedom-card p{font-size:13.5px; color:#B7BEC5; line-height:1.6;}

  /* ---------- PROBLEM: ONE DAY, AS A LOG ---------- */
  .daylog{list-style:none; margin:46px 0 0; max-width:760px; position:relative;}
  /* One spine down the page, warming toward amber at the last entry: the hours
     escalate, and the rule should say so before the text does. Horizontal rules
     between the rows were the other option and would have made this a table. */
  .daylog::before{
    content:""; position:absolute; left:65px; top:6px; bottom:16px; width:1px;
    background:linear-gradient(180deg, var(--line) 0%, var(--line) 76%, rgba(255,153,0,0.5) 100%);
  }
  .daylog-row{
    display:grid; grid-template-columns:78px 1fr; gap:26px; align-items:baseline;
    padding:0 0 26px; position:relative;
  }
  .daylog-row:last-child{padding-bottom:0;}
  /* The ring is the section background, so the dot punches a hole in the spine. */
  .daylog-row::before{
    content:""; position:absolute; left:62px; top:9px;
    width:7px; height:7px; border-radius:50%;
    background:#C9CDD1; box-shadow:0 0 0 5px var(--mist);
  }
  .daylog-time{
    font-size:13px; font-weight:500; color:var(--ink-soft);
    font-variant-numeric:tabular-nums; letter-spacing:0.06em;
  }
  .daylog-text{
    font-size:16.5px; line-height:1.5; color:var(--ink); max-width:56ch;
    text-wrap:pretty;
  }
  /* The last hour is the point of the section, so it is the only lit one. */
  .daylog-row:last-child::before{background:var(--amber); width:9px; height:9px; left:61px; top:8px;}
  .daylog-row:last-child .daylog-time{color:var(--amber-dim); font-weight:600;}
  .daylog-close{
    font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:clamp(21px, 2.2vw, 27px); line-height:1.2; letter-spacing:-0.01em;
    color:var(--ink); max-width:44ch; margin:34px 0 0 104px;
    text-wrap:balance;
  }

  /* ---------- STATEMENT ---------- */
  .statement{
    background:linear-gradient(175deg, var(--ink-2), var(--ink) 70%); color:#fff; text-align:center; padding:96px 0;
    position:relative; overflow:hidden;
  }
  .statement::before{
    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:900px; height:2px; background:linear-gradient(90deg, transparent, rgba(255,153,0,0.4), transparent);
  }
  .statement-inner{max-width:820px; margin:0 auto; position:relative; z-index:1;}
  .statement h2{
    font-size:clamp(28px, 4.2vw, 48px); line-height:1.15; margin-bottom:0;
  }
  .statement .fade{color:#6B7580;}
  .statement .pop{color:var(--amber);}

  /* ---------- SOLUTION ---------- */
  .solution-grid{display:grid; grid-template-columns:1fr 0.85fr; gap:60px; align-items:center; margin-top:48px;}
  .sol-list{list-style:none;}
  .sol-list li{
    display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; font-size:15.5px; color:#DADFE3;
  }
  .sol-check{
    flex:none; width:22px; height:22px; border-radius:50%; background:var(--amber);
    display:flex; align-items:center; justify-content:center; margin-top:2px;
  }
  .engine-diagram{
    background:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 45%), var(--slate);
    border-radius:14px; padding:30px; border:1px solid rgba(255,255,255,0.1);
    box-shadow:var(--shadow-dark-card);
  }
  .ledger{display:block;}
  .ledger-head{
    display:block; font-size:10.5px; font-weight:600; margin-bottom:16px;
    color:var(--ink-softer);
  }
  .ledger-col ul{list-style:none;}
  .ledger-col li{
    position:relative; padding-left:20px; margin-bottom:11px;
    font-size:14.5px; line-height:1.5;
  }
  .ledger-col li:last-child{margin-bottom:0;}
  .ledger-out li{color:#96A0AA;}
  /* A short rule, not a bullet: these items are being handed away. */
  .ledger-out li::before{
    content:""; position:absolute; left:0; top:10px;
    width:9px; height:1px; background:#5A6570;
  }
  .ledger-in .ledger-head{color:var(--amber);}
  .ledger-in li{color:#EDF0F2;}
  .ledger-in li::before{
    content:""; position:absolute; left:0; top:7px;
    width:7px; height:7px; border-radius:50%;
    background:var(--amber); box-shadow:0 0 0 3px rgba(255,153,0,0.16);
  }
  /* The divider carries the direction the old arrow carried. */
  .ledger-in{
    margin-top:26px; padding-top:26px; position:relative;
    border-top:1px solid rgba(255,255,255,0.1);
  }
  .ledger-in::before{
    content:"\2193"; position:absolute; top:-12px; left:0;
    width:24px; height:24px; border-radius:50%;
    background:var(--slate); border:1px solid rgba(255,153,0,0.45);
    color:var(--amber); font-size:13px; line-height:22px; text-align:center;
  }

  /* ---------- SERVICES: CONSOLE PANEL ---------- */
  .console{
    margin-top:52px;
    background:linear-gradient(165deg, var(--ink-2), var(--ink) 60%);
    border-radius:16px; overflow:hidden;
    display:grid; grid-template-columns:repeat(4,1fr);
    box-shadow:0 50px 90px -30px rgba(19,26,34,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;
    border:1px solid rgba(255,255,255,0.06);
  }
  .console-mod{
    padding:38px 26px 32px; border-right:1px solid rgba(255,255,255,0.09);
    position:relative; transition:background 0.2s; cursor:pointer;
  }
  .console-mod:hover{background:rgba(255,255,255,0.025);}
  .console-mod:focus-visible{outline:2px solid var(--amber); outline-offset:-2px;}
  .console-mod:last-child{border-right:none;}
  .console-mod::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:rgba(255,153,0,0.25);
  }
  .console-mod.on::before{background:linear-gradient(90deg, var(--amber), var(--amber-light));}
  .mod-code{
    font-family:'Roboto Mono',monospace; font-size:11px; color:var(--amber);
    letter-spacing:0.1em; margin-bottom:22px; display:flex; align-items:center; justify-content:space-between;
  }
  .mod-icon{
    width:46px; height:46px; border:1px solid rgba(255,255,255,0.18); border-radius:10px;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    transform:translateZ(28px);
  }
  .console-mod.on .mod-icon{
    background:linear-gradient(155deg, var(--amber-light), var(--amber)); border-color:var(--amber);
    box-shadow:0 10px 20px -8px rgba(255,153,0,0.5), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 5px rgba(133,66,0,0.35);
  }
  .console-mod h3{font-family:'Inter',sans-serif; font-weight:700; font-size:18px; color:#fff; margin-bottom:14px;}
  .console-mod ul{list-style:none; font-size:13px; color:#B7BEC5; line-height:2;}
  .console-mod ul li{position:relative; padding-left:14px;}
  .console-mod ul li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:1.5px; background:#5A6570;}
  .mod-more{
    display:inline-flex; align-items:center; gap:5px; margin-top:16px;
    font-size:12px; font-weight:600; color:var(--amber);
  }
  .console-mod:hover .mod-more{text-decoration:underline;}

  /* ---------- MODULE MODAL ---------- */
  .module-modal-overlay{
    position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
    padding:24px; background:rgba(10,14,19,0.7); backdrop-filter:blur(4px);
    /* visibility (not just opacity) so the closed dialog leaves the tab order */
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .module-modal-overlay.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity 0.2s ease, visibility 0s;
  }
  .module-modal{
    position:relative; width:100%; max-width:560px; max-height:85vh; overflow-y:auto;
    background:linear-gradient(165deg, var(--ink-2), var(--ink) 55%);
    border:1px solid rgba(255,255,255,0.1); border-radius:18px;
    padding:40px 36px 36px; box-shadow:0 40px 90px -20px rgba(0,0,0,0.7);
    transform:translateY(16px) scale(0.98); transition:transform 0.25s ease;
  }
  .module-modal-overlay.open .module-modal{transform:translateY(0) scale(1);}
  .module-modal-close{
    position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#fff;
    font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background 0.15s;
  }
  .module-modal-close:hover{background:rgba(255,255,255,0.14);}
  .module-modal-icon{
    width:52px; height:52px; border-radius:12px;
    background:linear-gradient(155deg, var(--amber-light), var(--amber));
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    box-shadow:0 10px 20px -8px rgba(255,153,0,0.45), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .module-modal h3{color:#fff; font-size:24px; margin-bottom:12px;}
  .module-modal p{font-size:14.5px; color:#B7BEC5; line-height:1.65; margin-bottom:24px;}
  .module-modal ul{list-style:none;}
  .module-modal ul li{
    display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:#DADFE3;
    padding:10px 0; border-top:1px solid rgba(255,255,255,0.07);
  }
  .module-modal ul li:first-child{border-top:none;}
  .module-modal ul li::before{
    content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--amber);
    margin-top:6px;
  }
  @media (max-width:600px){
    .module-modal{padding:32px 22px 28px;}
    .module-modal h3{font-size:20px;}
  }

  .reporting-strip{
    margin-top:22px; border-radius:var(--radius); border:1px solid var(--line);
    padding:20px 26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
    background:#fff; box-shadow:var(--shadow-card);
  }
  .reporting-strip .left{display:flex; align-items:center; gap:14px; cursor:pointer; border-radius:8px; padding:4px; margin:-4px;}
  .reporting-strip .left:hover strong{text-decoration:underline;}
  .reporting-strip .left:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}
  /* .reporting-strip span (0,1,1) outranks .mod-more (0,1,0), so restate the token here */
  .reporting-strip .left .mod-more{
    display:block; margin-top:4px; font-size:12px; font-weight:600; color:var(--amber-dim);
  }
  .reporting-strip strong{font-size:15px;}
  .reporting-strip span{font-size:13px; color:var(--ink-soft);}
  .pill{
    font-size:11.5px; font-weight:600; background:var(--mist); border:1px solid var(--line);
    padding:6px 12px; border-radius:20px; color:var(--ink-soft);
  }

  /* ---------- FLOW DIAGRAM ---------- */
  .flow-diagram{
    margin-top:22px; border-radius:16px; padding:36px 34px 32px;
    background:
      radial-gradient(ellipse 500px 300px at 55% 45%, rgba(255,153,0,0.08), transparent 65%),
      linear-gradient(165deg, var(--ink-2), var(--ink) 60%);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:var(--shadow-dark-card);
    perspective:1400px;
  }
  .flow-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; flex-wrap:wrap; gap:10px;}
  .flow-top strong{color:#fff; font-size:15px;}
  .flow-top span{font-size:13px; color:#B7BEC5;}
  .flow-col{display:flex; flex-direction:column; align-items:center; gap:0;}
  .flow-modules-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:520px;}
  .flow-mod{
    display:flex; align-items:center; gap:9px; background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.09); border-radius:9px; padding:8px 13px;
    font-size:13px; font-weight:600; color:#fff; min-width:0;
    justify-content:center; text-align:left;
    transform-style:preserve-3d; transition:transform 0.15s ease-out, box-shadow 0.2s, border-color 0.2s;
  }
  .flow-mod-icon{
    width:26px; height:26px; border-radius:7px; background:rgba(255,153,0,0.16);
    display:flex; align-items:center; justify-content:center; flex:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 4px rgba(0,0,0,0.35);
    transform:translateZ(18px);
  }
  .flow-mod-icon svg{width:14px; height:14px;}
  .flow-connector-v{width:100%; max-width:440px; height:70px; overflow:visible; display:block; margin-top:18px;}
  .flow-connector-v.out{width:6px; height:56px; max-width:none;}
  .flow-line{fill:none; stroke:rgba(255,153,0,0.4); stroke-width:1.6; stroke-dasharray:5 5; animation:flowDash 1.1s linear infinite;}
  @keyframes flowDash{to{stroke-dashoffset:-20;}}
  .flow-particle{fill:var(--amber-light); filter:drop-shadow(0 0 4px rgba(255,153,0,0.9));}
  .flow-hub{
    flex:none; width:132px; text-align:center; display:flex; flex-direction:column; align-items:center;
    transform-style:preserve-3d; transition:transform 0.15s ease-out;
  }
  .flow-hub-outer{
    position:relative; width:92px; height:92px; display:flex; align-items:center; justify-content:center;
    margin-bottom:14px; transform:translateZ(10px);
  }
  .flow-hub-outer::before, .flow-hub-outer::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    border:1px solid rgba(255,153,0,0.5);
    animation:hubPulse 2.6s ease-out infinite;
  }
  .flow-hub-outer::after{animation-delay:1.3s;}
  @keyframes hubPulse{
    0%{transform:scale(0.78); opacity:0.9;}
    100%{transform:scale(1.55); opacity:0;}
  }
  .flow-hub-spin{
    position:absolute; inset:-6px; border-radius:50%;
    background:conic-gradient(from 0deg, transparent, rgba(255,153,0,0.7), transparent 40%);
    animation:hubSpin 3.5s linear infinite;
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  }
  @keyframes hubSpin{to{transform:rotate(360deg);}}
  .flow-hub-ring{
    position:relative; width:72px; height:72px; border-radius:50%;
    background:linear-gradient(155deg, #232F3E, var(--ink));
    border:2px solid var(--amber); display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 0 6px rgba(255,153,0,0.08), 0 16px 28px -10px rgba(255,153,0,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
    z-index:1;
  }
  .flow-hub strong{color:#fff; font-size:16px; display:block; transform:translateZ(10px);}
  .flow-hub span{font-size:11px; color:var(--ink-softer); margin-top:2px; display:block;}
  .flow-ceo{
    flex:none; width:220px; text-align:center; display:flex; flex-direction:column; align-items:center;
    transform-style:preserve-3d; transition:transform 0.15s ease-out;
  }
  .flow-ceo-icon{
    width:52px; height:52px; border-radius:50%; background:linear-gradient(155deg, var(--amber-light), var(--amber));
    display:flex; align-items:center; justify-content:center; margin-bottom:10px;
    box-shadow:0 10px 20px -8px rgba(255,153,0,0.45), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 5px rgba(133,66,0,0.35);
    transform:translateZ(20px);
  }
  .flow-ceo strong{color:#fff; font-size:15px;}
  .flow-ceo-label{
    font-size:11px; color:var(--ink-softer); text-align:center;
    margin:6px 0; letter-spacing:0.02em;
  }
  .flow-mid{position:relative; width:100%; max-width:460px; height:110px;}
  /* the fan has to span exactly what the grid below it spans */
  .flow-mid-out{height:90px; max-width:640px;}
  .flow-connector-fan{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
  .flow-line-green{stroke:rgba(6,125,98,0.55);}
  .flow-particle-green{fill:#3DDCB2; filter:drop-shadow(0 0 4px rgba(6,125,98,0.9));}
  .flow-mid-label{
    position:absolute; top:50%; transform:translate(-50%, -50%);
    background:var(--ink-2); border:1px solid rgba(255,153,0,0.3); border-radius:20px;
    padding:5px 11px; font-size:10.5px; font-weight:600; color:#fff; white-space:nowrap;
  }
  /* A grid, not a wrapping row: the three centres then sit at fixed sixths of
     the width, which is what the fan above draws to. 640px is the width the
     longest German label needs to stay on one line. */
  .flow-outputs-row{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.875%; width:100%; max-width:640px;
  }
  .flow-output-node{
    display:flex; align-items:center; gap:9px; background:rgba(6,125,98,0.1);
    border:1px solid rgba(6,125,98,0.28); border-radius:9px; padding:8px 13px;
    font-size:13px; font-weight:600; color:#fff; flex:0 0 auto;
    transform-style:preserve-3d; transition:transform 0.15s ease-out, box-shadow 0.2s, border-color 0.2s;
  }
  .flow-output-icon{
    width:26px; height:26px; border-radius:7px; background:rgba(6,125,98,0.2);
    display:flex; align-items:center; justify-content:center; flex:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -2px 4px rgba(0,0,0,0.3);
    transform:translateZ(18px);
  }
  .flow-output-icon svg{width:14px; height:14px;}
  @media (max-width:600px){
    .flow-mid{display:flex; flex-direction:column; align-items:center;}
    .flow-mid:not(.flow-mid-out){height:auto; gap:5px; padding:6px 0 2px;}
    .flow-mid:not(.flow-mid-out) .flow-connector-fan{position:relative; inset:auto; width:110px; height:54px;}
    .flow-mid-label{position:static; transform:none; left:auto !important;}
    /* Three columns cannot hold these words at any size worth reading, so the
       nodes stack — and a fan into a stack is the thing that looked broken.
       One line into one column is the same diagram, told straight. */
    .flow-outputs-row{grid-template-columns:1fr; max-width:320px; gap:9px;}
    .flow-mid-out{height:46px; max-width:120px;}
    .flow-line-side{display:none;}
  }
  @media (max-width:480px){
    .flow-mod, .flow-output-node{font-size:12px; padding:7px 11px;}
    .flow-ceo{width:100%; max-width:260px;}
  }

  /* ---------- WHY ---------- */
  .why-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:50px; margin-top:52px; align-items:start;}
  .founder-card{
    background:linear-gradient(165deg, var(--ink-2), var(--ink) 65%); color:#fff; border-radius:14px; padding:34px 28px;
    box-shadow:var(--shadow-dark-card); border:1px solid rgba(255,255,255,0.06);
  }
  .founder-badge{
    width:56px; height:56px; border-radius:50%;
    background:linear-gradient(155deg, var(--amber-light), var(--amber));
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:22px; color:var(--ink);
    box-shadow:0 12px 24px -8px rgba(255,153,0,0.5), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 5px rgba(133,66,0,0.35);
    transform:translateZ(28px);
  }
  .founder-card h3{font-family:'Inter',sans-serif; font-weight:700; font-size:20px; margin-bottom:10px;}
  .founder-card p{font-size:14px; color:#C7CCD1; line-height:1.65;}
  .role-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .role-pill{
    border:1px solid var(--line); border-radius:10px; padding:16px 18px; background:#fff;
    display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--ink);
    box-shadow:var(--shadow-card); transition:transform 0.2s, box-shadow 0.2s;
  }
  .role-pill:hover{transform:translateY(-2px); box-shadow:var(--shadow-card-hover);}
  .role-pill .dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(155deg, var(--amber-light), var(--amber)); flex:none; box-shadow:0 0 0 3px rgba(255,153,0,0.15);}

  /* ---------- HOW IT WORKS ---------- */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; position:relative;}
  .steps::before{
    content:""; position:absolute; top:23px; left:60px; right:60px; height:1px;
    background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  }
  .step{position:relative; padding-right:20px;}
  .step-num{
    width:46px; height:46px; border-radius:50%;
    background:linear-gradient(155deg, var(--ink-2), var(--ink)); color:#fff;
    display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:19px;
    margin-bottom:22px; position:relative; z-index:1;
    box-shadow:0 10px 20px -10px rgba(19,26,34,0.5), 0 0 0 5px var(--paper);
  }
  .step h3{font-family:'Inter',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px;}
  .step p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

  /* ---------- PACKAGES: MODULE PICKER ---------- */
  .picker-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:52px; margin-bottom:26px;}
  .picker-chip{
    border:2px solid var(--line); border-radius:12px; padding:20px 18px; cursor:pointer;
    background:#fff; transition:border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
    text-align:left; font-family:'Inter',sans-serif; box-shadow:var(--shadow-card);
    display:block; width:100%; color:inherit; /* it is a <button>, so reset the UA defaults */
  }
  .picker-chip:hover{border-color:var(--ink-softer); transform:translateY(-2px); box-shadow:var(--shadow-card-hover);}
  .picker-chip.active{border-color:var(--amber); background:#FFF8EE; box-shadow:0 16px 32px -18px rgba(255,153,0,0.4);}
  .picker-chip-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .picker-check{
    width:20px; height:20px; border-radius:5px; border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex:none; transition:all 0.15s;
  }
  .picker-chip.active .picker-check{background:var(--amber); border-color:var(--amber);}
  .picker-check svg{display:none; width:12px; height:12px;}
  .picker-chip.active .picker-check svg{display:block;}
  .picker-chip h4{font-weight:700; font-size:15px; margin-bottom:4px; color:var(--ink);}
  .picker-chip .pdesc{font-size:12px; color:var(--ink-soft); line-height:1.4; display:block;}

  .picker-summary{
    background:linear-gradient(165deg, var(--ink-2), var(--ink) 65%); border-radius:16px; padding:36px 34px; color:#fff;
    display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
    transition:background 0.2s; box-shadow:var(--shadow-dark-card); border:1px solid rgba(255,255,255,0.06);
  }
  .picker-summary.empty{background:var(--mist); color:var(--ink); border:1px dashed var(--ink-softer);}
  .picker-tier{
    font-family:'Roboto Mono',monospace; font-size:11px; color:var(--amber); font-weight:700;
    letter-spacing:0.1em; margin-bottom:10px; text-transform:uppercase;
  }
  .picker-summary.empty .picker-tier{color:var(--ink-soft);}
  .picker-title{font-size:clamp(22px,2.6vw,30px); margin-bottom:10px;}
  .picker-modlist{font-size:14px; color:#C7CCD1; margin-bottom:2px;}
  .picker-summary.empty .picker-modlist{color:var(--ink-soft);}
  .picker-cadence{
    font-size:12.5px; color:var(--ink-softer); margin-top:12px; display:flex; align-items:center; gap:7px;
  }
  .picker-summary.empty .picker-cadence{color:var(--ink-soft);}
  .picker-cadence-dot{width:6px; height:6px; border-radius:50%; background:var(--amber); flex:none;}
  /* Left, like its sibling .software-note directly below it. The centring was
     written for a grid this section no longer uses. */
  .pkg-note{margin-top:26px; font-size:13px; color:var(--ink-soft); line-height:1.65;}

  /* ---------- CTA ---------- */
  .cta-section{
    background:linear-gradient(165deg, var(--ink-2), var(--ink) 60%); color:#fff; text-align:center; position:relative; overflow:hidden;
  }
  .cta-section::before{
    content:""; position:absolute; bottom:-260px; left:50%; transform:translateX(-50%);
    width:640px; height:640px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,153,0,0.14), transparent 70%);
  }
  .cta-inner{position:relative; z-index:1; max-width:640px; margin:0 auto;}
  .cta-section :is(h1,h2){font-size:clamp(30px,4vw,46px); margin-bottom:18px;}
  .cta-section p{font-size:16px; color:#C7CCD1; margin-bottom:38px;}
  .contact-card{
    display:inline-flex; flex-direction:column; gap:6px;
    background:linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), var(--slate);
    border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:26px 36px; margin-bottom:26px;
    box-shadow:var(--shadow-dark-card);
  }
  .contact-card strong{font-size:16px;}
  .contact-card span{font-size:13px; color:#B7BEC5;}
  .contact-card a{color:var(--amber); font-weight:600;}
  .cta-response{font-size:13px; color:var(--ink-softer); margin-top:18px;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--ink); color:#8A939C; padding:32px 0; position:relative;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  footer::before{
    content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,153,0,0.5), transparent);
  }
  .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12.5px;}
  .footer-inner .logo{font-size:18px;}

  /* ---------- 3D TILT ---------- */
  .scorecard-wrap{position:relative;}
  /* Anchored to the right half and dropped to a background weight, so it reads as
     brand texture instead of competing with the headline and the CTAs. */
  .hero-3d{
    position:absolute; top:50%; right:-6%; left:auto; transform:translateY(-50%);
    width:min(46vw, 520px); height:min(46vw, 520px);
    pointer-events:none; z-index:0; opacity:0.28;
    filter:drop-shadow(0 0 60px rgba(255,153,0,0.28));
  }
  /* will-change is set imperatively by bindTilt for the duration of a hover only —
     declaring it here would promote 31 layers permanently, including on touch. */
  .freedom-card, .role-pill, .console-mod, .scorecard, .founder-card, .picker-chip, .reporting-strip{
    transform-style:preserve-3d;
    transition:transform 0.15s ease-out, box-shadow 0.2s, border-color 0.2s;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-3d{display:none;}
    .flow-particle, .flow-particle-green{display:none;}
    .flow-line{animation:none;}
    .flow-hub-spin{display:none;}
    .flow-hub-outer::before, .flow-hub-outer::after{animation:none; display:none;}
    }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    nav.links{display:none;}
    .nav-toggle{display:flex;}
    .nav-inner > div:last-child > .btn{display:none;} /* CTA moves into the panel */
    .mobile-menu.open{display:block;}
    .hero-grid{grid-template-columns:1fr;}
    .console{grid-template-columns:repeat(2,1fr);}
    .console-mod{border-right:1px solid rgba(255,255,255,0.09); border-bottom:1px solid rgba(255,255,255,0.09);}
    .console-mod:nth-child(2n){border-right:none;}
    .console-mod:nth-last-child(-n+2){border-bottom:none;}
    .solution-grid, .why-grid{grid-template-columns:1fr; gap:36px;}
    .steps{grid-template-columns:1fr 1fr; row-gap:36px;}
    .steps::before{display:none;}
    .picker-chips{grid-template-columns:1fr 1fr;}
    .picker-summary{grid-template-columns:1fr;}
    .freedom-grid{grid-template-columns:1fr;}
    .hero-3d{display:none;} /* single-column hero: it would sit under the copy */
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .steps{grid-template-columns:1fr;}
    /* The hour loses its own column: at this width the text needs all of it. */
    .daylog-row{grid-template-columns:1fr; gap:6px; padding:16px 0 17px;}
    /* Stacked entries have no hour column for the spine to sit beside. */
    .daylog::before, .daylog-row::before{display:none;}
    .daylog-text{font-size:16px;}
    .daylog-close{margin-left:0; font-size:20px;}
    .console{grid-template-columns:1fr;}
    .console-mod{border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.09) !important;}
    .console-mod:last-child{border-bottom:none !important;}
    .hero{padding:140px 0 72px;}
    section{padding:72px 0;}
    .role-grid{grid-template-columns:1fr;}
    .picker-chips{grid-template-columns:1fr;}
    .nav-inner{padding:12px 20px;}
    .mobile-menu{padding:10px 20px 20px;}

  }

  /* Taste pass: preserve IBSS identity, add editorial rhythm and clearer hierarchy. */
  h1,h2,h3,.title{ text-wrap:balance; }
  .hero h1 em{ font-style:normal; }
  .hero .lead, p.sub{ max-width:62ch; }
  .console-mod{ padding:29px 25px 31px; }
  .console-mod h3{ letter-spacing:-.02em; }
  .founder-card{ box-shadow:0 18px 42px -22px rgba(19,26,34,.42); }
  .software-note{ margin-top:18px; font-size:13px; color:var(--ink-soft); line-height:1.65; }
  .individual-offer{ box-shadow:var(--shadow-dark-card); }
  .reveal{
    transition:opacity 550ms cubic-bezier(0.23,1,0.32,1), transform 550ms cubic-bezier(0.23,1,0.32,1);
    transition-delay:var(--reveal-delay, 0ms);
  }
  .reveal.pre{ transform:translateY(18px); }
  @media (prefers-reduced-motion: reduce){
    .reveal{ transition:opacity 220ms ease; transition-delay:0ms; }
    .reveal.pre{ transform:none; }
  }
  @media (max-width:600px){
    .hero h1{ font-size:clamp(44px,12vw,64px); }
    .hero .lead{ max-width:38ch; }
  }