@font-face {
        font-family: 'Archivo';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('../fonts/archivo-600.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Archivo';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('../fonts/archivo-700.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Archivo';
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url('../fonts/archivo-800.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('../fonts/inter-400.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url('../fonts/inter-600.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('../fonts/inter-700.woff2') format('woff2');
      }
      @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url('../fonts/inter-800.woff2') format('woff2');
      }
      :root {
        --ink: #0b1220;
        --muted: #414a5f;
        --line: #dde3ec;
        --paper: #f8f7f2;
        --teal: #0f766e;
        --teal-bright: #14b8a6;
        --teal-dark: #0a5a54;
        --sky: #38bdf8;
        --shadow: 0 20px 50px rgba(11, 18, 32, 0.1);
        --st-green: #00c875;
        --st-orange: #fdab3d;
        --st-purple: #a25ddc;
      }

      * { box-sizing: border-box; }

      [hidden] { display: none !important; }

      html { scroll-behavior: smooth; }

      body {
        margin: 0;
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
        color: var(--ink);
        background: var(--paper);
      }

      a { color: inherit; text-decoration: none; }

      .shell {
        width: min(1080px, calc(100% - 32px));
        margin: 0 auto;
      }

      html.js .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.65, 0.25, 1);
      }

      html.js .reveal.in { opacity: 1; transform: none; }
      html.js .reveal.d1 { transition-delay: 90ms; }

      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        html.js .reveal { opacity: 1; transform: none; transition: none; }
        *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
      }

      /* header */
      header {
        position: sticky;
        top: 0;
        z-index: 20;
        border-bottom: 1px solid rgba(221, 227, 236, 0.7);
        background: rgba(248, 247, 242, 0.88);
        backdrop-filter: blur(14px);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 66px;
        gap: 18px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 11px;
        font-weight: 850;
        font-size: 1.02rem;
      }

      .brand svg { width: 36px; height: 36px; border-radius: 8px; }
      .brand em { font-style: normal; color: var(--teal); }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 26px;
        color: var(--muted);
        font-size: 0.93rem;
        font-weight: 600;
      }

      .nav-links a:not(.button):hover { color: var(--ink); }

      .nav-item { position: static; }

      .nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: none;
        background: none;
        color: var(--muted);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        padding: 22px 0;
      }

      .nav-btn .caret {
        font-size: 0.7rem;
        transition: transform 200ms ease;
      }

      .nav-item:hover .nav-btn,
      .nav-item:focus-within .nav-btn { color: var(--ink); }

      .nav-item:hover .caret,
      .nav-item:focus-within .caret { transform: rotate(180deg); }

      .mega {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 34px 60px rgba(11, 18, 32, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 190ms ease, transform 190ms ease, visibility 190ms;
        z-index: 29;
      }

      .nav-item:hover .mega,
      .nav-item:focus-within .mega {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .mega-grid {
        display: grid;
        grid-template-columns: 285px 1fr;
        align-items: stretch;
      }

      .mega-rail {
        padding: 30px 28px 34px 0;
        border-right: 1px solid var(--line);
        background:
          linear-gradient(90deg, var(--paper) 0%, var(--paper) 100%);
      }

      .mega-rail a {
        display: block;
        padding: 8px 0;
        color: var(--ink);
        font-size: 0.96rem;
        font-weight: 750;
      }

      .mega-rail a:hover { color: var(--teal); }

      .rail-sep { height: 1px; margin: 12px 0; background: var(--line); }

      .mega-rail.why h5 { margin: 0 0 10px; font-size: 1.05rem; }

      .mega-rail.why p {
        margin: 0;
        color: var(--muted);
        font-size: 0.92rem;
        line-height: 1.6;
        padding-right: 8px;
      }

      .mega-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        padding: 30px 0 34px 36px;
      }

      .mega-cols h5 { margin: 0 0 10px; font-size: 1rem; }

      .mega-cols h5 a { color: var(--ink); }
      .mega-cols h5 a:hover { color: var(--teal); }

      .mega-cols .sub {
        display: flex;
        align-items: baseline;
        gap: 9px;
        padding: 5px 0;
        color: var(--muted);
        font-size: 0.91rem;
        font-weight: 600;
      }

      .mega-cols .sub::before {
        content: "";
        flex: 0 0 6px;
        height: 6px;
        background: var(--teal-bright);
      }

      .mega-cols .sub:hover { color: var(--ink); }

      .mega-person {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 7px 0;
      }

      .mega-person img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
      }

      .mega-person span { display: grid; line-height: 1.25; font-size: 0.92rem; }
      .mega-person small { color: var(--muted); font-weight: 600; }
      .mega-person:hover b { color: var(--teal); }

      .li-mini {
        width: 22px;
        height: 22px;
        margin-left: auto;
        border-radius: 4px;
        flex: 0 0 auto;
      }

      .mega-feature {
        display: block;
        padding: 20px;
        border-radius: 12px;
        color: #fff;
        background: linear-gradient(140deg, #0b1220 0%, #0a2c2a 100%);
        transition: transform 180ms ease;
      }

      .mega-feature:hover { transform: translateY(-3px); }

      .mega-feature svg {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        margin-bottom: 12px;
      }

      .mega-feature b {
        display: block;
        font-family: "Archivo", Inter, sans-serif;
        font-size: 1.02rem;
        margin-bottom: 6px;
      }

      .mega-feature p {
        margin: 0;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.87rem;
        line-height: 1.55;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 0 20px;
        border-radius: 10px;
        border: 1px solid transparent;
        font-weight: 750;
        font-size: 0.96rem;
        transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
      }

      .button:hover { transform: translateY(-1px); }

      .button.primary {
        color: #fff;
        background: var(--teal);
        box-shadow: 0 12px 24px rgba(15, 118, 110, 0.22);
      }

      .button.primary:hover { background: var(--teal-dark); }

      .button.ghost { border-color: var(--line); background: transparent; }
      .button.ghost:hover { border-color: var(--ink); }

      .button.light { color: var(--ink); background: #fff; }

      .cta-band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        flex-wrap: wrap;
        padding: 30px 34px;
        border-radius: 16px;
        color: #fff;
        background: linear-gradient(120deg, var(--teal-dark), #0b1220);
      }

      .cta-band h2 {
        margin: 0;
        font-size: clamp(1.3rem, 2.6vw, 1.7rem);
        letter-spacing: -0.01em;
      }

      .cta-band p {
        margin: 7px 0 0;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.9rem;
        font-weight: 650;
      }

      .button .arrow { transition: transform 200ms ease; }
      .button:hover .arrow { transform: translateX(4px); }

      /* hero */
      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
        align-items: center;
        gap: 48px;
        padding: 58px 0 34px;
      }

      h1,
      h2,
      h3,
      h5,
      .manifesto,
      .wq,
      .brand span {
        font-family: "Archivo", Inter, ui-sans-serif, system-ui, sans-serif;
      }

      h1 {
        margin: 0;
        font-size: clamp(2.5rem, 5.6vw, 4.2rem);
        line-height: 1.04;
        letter-spacing: -0.015em;
      }

      .grad {
        background: linear-gradient(100deg, var(--teal-bright), var(--sky));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .hero-copy {
        max-width: 460px;
        margin: 18px 0 0;
        color: var(--muted);
        font-size: 1.02rem;
        line-height: 1.6;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
      }

      .founders {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
        font-size: 0.92rem;
        color: var(--muted);
      }

      .founders .faces { display: flex; }

      .founders img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--paper);
      }

      .founders img + img { margin-left: -10px; }

      .founders a {
        color: var(--teal-dark);
        font-weight: 750;
      }

      .founders a:hover { text-decoration: underline; }

      /* windows */
      .window {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .window-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--line);
        background: #fbfcfe;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 750;
      }

      .dots { display: flex; gap: 5px; margin-right: 6px; }
      .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
      .dots i:first-child { background: var(--teal-bright); }

      .window-body { padding: 14px; }

      .scene-frame { background: var(--paper); }

      @keyframes rise {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
      }

      /* hero mock: tasks flipping to automated */
      .auto-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 9px;
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        font-size: 0.89rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .auto-row:last-of-type { margin-bottom: 0; }

      .status-swap {
        position: relative;
        min-width: 104px;
        height: 24px;
        flex: 0 0 auto;
      }

      .status-swap span {
        position: absolute;
        right: 0;
        top: 0;
        padding: 3px 11px;
        border-radius: 6px;
        font-size: 0.74rem;
        font-weight: 800;
        white-space: nowrap;
      }

      .status-swap .before {
        color: var(--muted);
        background: rgba(90, 100, 120, 0.12);
        animation: swapout 400ms ease forwards;
        animation-delay: var(--t);
      }

      .status-swap .after {
        color: #067647;
        background: rgba(0, 200, 117, 0.14);
        opacity: 0;
        animation: swapin 400ms ease forwards;
        animation-delay: var(--t);
      }

      @keyframes swapout { to { opacity: 0; } }
      @keyframes swapin { to { opacity: 1; } }

      .scene-wrap { position: relative; }

      .float-card {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 16px 36px rgba(11, 18, 32, 0.16);
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--muted);
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .float-card .big {
        color: var(--teal-dark);
        font-size: 1.45rem;
        font-weight: 900;
        line-height: 1;
      }

      .fc-bl { left: -18px; bottom: -16px; }

      /* logo marquee */
      .logostrip { padding: 18px 0 6px; }

      .logostrip p {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: center;
      }

      .marquee {
        position: relative;
        overflow: hidden;
        padding: 4px 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      }

      .marquee + .marquee { margin-top: 12px; }

      .marquee-track {
        display: flex;
        gap: 12px;
        width: max-content;
        animation: marquee 60s linear infinite;
      }

      .marquee.rev .marquee-track { animation-direction: reverse; }

      .marquee:hover .marquee-track { animation-play-state: paused; }

      @keyframes marquee {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }

      .logo-tile {
        display: grid;
        place-items: center;
        flex: 0 0 54px;
        height: 54px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        transition: transform 160ms ease, box-shadow 160ms ease;
      }

      .logo-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(11, 18, 32, 0.1);
      }

      .logo-tile svg { width: 26px; height: 26px; }

      /* sections */
      section { padding: 46px 0; }

      .section-head { margin-bottom: 22px; }

      .section-head h2 {
        margin: 0;
        font-size: clamp(1.8rem, 3.6vw, 2.6rem);
        line-height: 1.08;
        letter-spacing: -0.01em;
      }

      .section-head p {
        max-width: 640px;
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 1.03rem;
        line-height: 1.6;
      }

      .manifesto {
        max-width: 920px;
        margin: 0 0 36px;
        font-size: clamp(1.65rem, 3.4vw, 2.5rem);
        font-weight: 850;
        line-height: 1.16;
        letter-spacing: -0.012em;
      }

      .manifesto .dim { color: var(--muted); font-weight: 750; }

      .method {
        background: #fff;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      /* tabs */
      .tabs {
        display: flex;
        gap: 30px;
        margin-bottom: 30px;
        border-bottom: 2px solid var(--line);
        overflow-x: auto;
        scrollbar-width: none;
      }

      .tabs::-webkit-scrollbar { display: none; }

      .tab {
        position: relative;
        display: inline-flex;
        align-items: baseline;
        gap: 8px;
        padding: 12px 2px 14px;
        border: none;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: 0.97rem;
        font-weight: 750;
        cursor: pointer;
        white-space: nowrap;
        transition: color 180ms ease;
      }

      .tab i {
        font-style: normal;
        font-size: 0.76rem;
        font-weight: 900;
        color: var(--teal);
        opacity: 0.7;
      }

      .tab:hover { color: var(--ink); }

      .tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 3px;
        border-radius: 2px;
        background: var(--teal);
        transform: scaleX(0);
        transform-origin: left;
      }

      .tab[aria-selected="true"] { color: var(--ink); }
      .tab[aria-selected="true"]::after { transform: scaleX(1); }

      .tabs.auto .tab[aria-selected="true"]::after {
        animation: tabprog 6500ms linear forwards;
      }

      @keyframes tabprog {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
      }

      .panel {
        display: none;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 40px;
        align-items: center;
      }

      .panel.active {
        display: grid;
        animation: rise 420ms cubic-bezier(0.2, 0.65, 0.25, 1);
      }

      .panel h3 {
        margin: 0 0 10px;
        font-size: 1.55rem;
        letter-spacing: -0.01em;
      }

      .panel > div > p {
        margin: 0;
        color: var(--muted);
        font-size: 1.02rem;
        line-height: 1.62;
      }

      /* study: workflow map */
      .fnode {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 62%;
        padding: 12px 16px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(11, 18, 32, 0.05);
        font-size: 0.88rem;
        font-weight: 650;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .fnode .nicon {
        display: grid;
        place-items: center;
        flex: 0 0 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--paper);
        border: 1px solid var(--line);
      }

      .fnode .nicon svg { width: 16px; height: 16px; }

      .fnode .navatar {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
      }

      .fnode.ai {
        border: double 2px transparent;
        background:
          linear-gradient(#fff, #fff) padding-box,
          linear-gradient(100deg, var(--teal-bright), var(--sky), var(--st-purple)) border-box;
      }

      .fnode.ai .nicon {
        border: none;
        background: linear-gradient(120deg, rgba(20, 184, 166, 0.14), rgba(162, 93, 220, 0.16));
      }

      .spark { color: var(--st-purple); font-size: 1rem; }

      .leak {
        margin-left: auto;
        padding: 3px 10px;
        border-radius: 6px;
        color: #9a3412;
        background: rgba(253, 171, 61, 0.2);
        font-size: 0.72rem;
        font-weight: 800;
        white-space: nowrap;
      }

      .flow {
        display: grid;
        justify-items: center;
        padding: 10px 4px 8px;
      }

      .flow .fnode { width: 78%; }

      .vline { width: 2px; height: 18px; background: var(--line); }

      .vline.dash {
        background: none;
        border-left: 2px dashed var(--line);
        height: 16px;
      }

      .split {
        position: relative;
        width: 76%;
        height: 30px;
      }

      .split::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        height: 12px;
        border-left: 2px solid var(--line);
      }

      .split::before {
        content: "";
        position: absolute;
        left: 25%;
        right: 25%;
        top: 12px;
        bottom: 0;
        border: 2px solid var(--line);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
      }

      .branches {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
        justify-items: center;
        width: 100%;
      }

      .branches > div {
        display: grid;
        justify-items: center;
        width: 100%;
      }

      .branches .fnode { min-width: 84%; width: auto; }

      .branch-label {
        margin-bottom: 10px;
        padding: 5px 14px;
        border-radius: 6px;
        color: #fff;
        font-size: 0.76rem;
        font-weight: 800;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .plus-node {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 1.5px dashed var(--muted);
        border-radius: 7px;
        color: var(--muted);
        font-weight: 800;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .approve-chips {
        display: flex;
        gap: 6px;
        margin-top: 9px;
      }

      .approve-chips span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px 4px 4px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        font-size: 0.78rem;
        font-weight: 700;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .approve-chips img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

      /* match: tool fit report */
      .fit-row {
        display: grid;
        grid-template-columns: 34px 1fr 74px auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 9px;
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        font-size: 0.87rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .fit-row .flogo {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--paper);
        border: 1px solid var(--line);
      }

      .fit-row .flogo svg { width: 18px; height: 18px; }

      .fit-row small {
        display: block;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
      }

      .fitbar {
        height: 6px;
        border-radius: 3px;
        background: var(--line);
        overflow: hidden;
      }

      .fitbar i {
        display: block;
        width: 0;
        height: 100%;
        border-radius: 3px;
        background: var(--teal-bright);
        animation: fitgrow 800ms cubic-bezier(0.2, 0.65, 0.25, 1) forwards;
        animation-delay: var(--t);
      }

      .fitbar i.low { background: var(--st-orange); }

      @keyframes fitgrow { to { width: var(--w); } }

      .fit-badge {
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 0.74rem;
        font-weight: 800;
        white-space: nowrap;
        color: #fff;
        background: var(--teal);
      }

      .fit-badge.build {
        color: #fff;
        background: var(--st-orange);
      }

      /* prove: before / after */
      .delta-row {
        display: grid;
        grid-template-columns: 1fr auto 22px auto;
        gap: 12px;
        align-items: center;
        margin-bottom: 9px;
        padding: 13px 15px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        font-size: 0.89rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .delta-row .before-val { color: var(--muted); font-weight: 700; }

      .delta-row .darr { color: var(--muted); text-align: center; }

      .delta-row .after-val {
        color: var(--teal-dark);
        font-weight: 900;
        font-size: 1.02rem;
      }

      .measure-note {
        margin-top: 12px;
        padding: 10px;
        border-radius: 10px;
        text-align: center;
        background: rgba(0, 200, 117, 0.1);
        color: #067647;
        font-weight: 750;
        font-size: 0.84rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      /* AI staff */
      .staff-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }

      .staff-card {
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        transition: transform 180ms ease, box-shadow 180ms ease;
      }

      .staff-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
      }

      .staff-card > svg {
        width: 84px;
        height: 84px;
        margin-bottom: 16px;
      }

      .staff-card h3 { margin: 0 0 6px; font-size: 1.12rem; }

      .staff-card > p {
        margin: 0 0 14px;
        color: var(--muted);
        font-size: 0.94rem;
        line-height: 1.55;
      }

      .staff-card .cap {
        display: inline-block;
        padding: 5px 12px;
        border-radius: 999px;
        color: var(--teal-dark);
        background: rgba(20, 184, 166, 0.1);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .reports {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 22px;
        color: var(--muted);
        font-size: 0.95rem;
      }

      .reports img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--paper);
      }

      .reports img + img { margin-left: -10px; }

      /* wizard form */
      .wprogress {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 800;
      }

      .wprogress .bars-track {
        flex: 1;
        display: flex;
        gap: 6px;
      }

      .wprogress .seg {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background: var(--line);
        transition: background 300ms ease;
      }

      .wprogress .seg.on { background: var(--teal-bright); }

      .wstep { display: none; }

      .wstep.active {
        display: block;
        animation: rise 350ms ease;
      }

      .wq {
        margin: 0 0 4px;
        font-size: 1.18rem;
        font-weight: 850;
        letter-spacing: -0.01em;
      }

      .wq-sub {
        margin: 0 0 16px;
        color: var(--muted);
        font-size: 0.88rem;
      }

      .pills {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
      }

      .pill { position: relative; }

      .pill input {
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .pill span {
        display: inline-block;
        padding: 10px 16px;
        border: 1.5px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--ink);
        font-size: 0.92rem;
        font-weight: 700;
        cursor: pointer;
        transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
      }

      .pill span:hover {
        border-color: var(--teal-bright);
        transform: translateY(-1px);
      }

      .pill input:checked + span {
        border-color: var(--teal);
        background: var(--teal);
        color: #fff;
      }

      .wnav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
      }

      .wnav .back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border: none;
        background: none;
        color: var(--muted);
        font: inherit;
        font-weight: 750;
        cursor: pointer;
        padding: 8px 10px;
      }

      .wnav .back:hover { color: var(--ink); }

      .whint {
        margin-top: 10px;
        color: #b45309;
        font-size: 0.84rem;
        font-weight: 700;
        min-height: 1.2em;
      }

      /* getting started timeline */
      .timeline {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }

      .timeline::before {
        content: "";
        position: absolute;
        top: 23px;
        left: 60px;
        right: 60px;
        height: 2px;
        background: var(--line);
      }

      .tstep { position: relative; }

      .tnum {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-bottom: 16px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 4px 12px rgba(11, 18, 32, 0.06);
        transition: border-color 180ms ease, transform 180ms ease;
      }

      .tstep:hover .tnum {
        border-color: var(--teal-bright);
        transform: translateY(-3px);
      }

      .tnum svg { width: 24px; height: 24px; }

      .tstep .num {
        color: var(--teal);
        font-size: 0.76rem;
        font-weight: 900;
        letter-spacing: 0.08em;
      }

      .tstep h3 { margin: 6px 0 8px; font-size: 1.14rem; }

      .tstep p {
        margin: 0;
        max-width: 300px;
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.55;
      }

      /* rules band */
      .band-wrap { padding: 46px 0; }

      .band {
        padding: 44px 40px;
        border-radius: 18px;
        color: #fff;
        background:
          radial-gradient(circle at 88% 10%, rgba(56, 189, 248, 0.16), transparent 22rem),
          linear-gradient(140deg, #0b1220 0%, #0c2030 60%, #0a2c2a 100%);
      }

      .band h2 {
        margin: 0 0 34px;
        font-size: clamp(1.7rem, 3.4vw, 2.4rem);
        letter-spacing: -0.01em;
      }

      .rules {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
      }

      .rule {
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        transition: background 200ms ease, transform 200ms ease;
      }

      .rule:hover {
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-3px);
      }

      .rule b { display: block; margin-bottom: 8px; font-size: 0.98rem; }

      .rule b::before {
        content: "";
        display: block;
        width: 26px;
        height: 3px;
        margin-bottom: 12px;
        border-radius: 2px;
        background: var(--teal-bright);
      }

      .rule:nth-child(2) b::before { background: var(--sky); }
      .rule:nth-child(3) b::before { background: var(--st-orange); }
      .rule:nth-child(4) b::before { background: var(--st-purple); }

      .rule p {
        margin: 0;
        color: rgba(255, 255, 255, 0.68);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      /* contact */
      .contact {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 52px;
        align-items: start;
      }

      .spark-list {
        display: grid;
        gap: 12px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }

      .spark-list li {
        display: flex;
        gap: 11px;
        align-items: baseline;
        color: var(--muted);
        font-size: 0.98rem;
        line-height: 1.55;
      }

      .spark-list b { color: var(--ink); }

      .people { display: grid; gap: 12px; margin: 26px 0 0; }

      .person {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 12px 16px 12px 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        transition: transform 160ms ease, box-shadow 160ms ease;
      }

      .person:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(11, 18, 32, 0.08);
      }

      .person > img {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
      }

      .person b { display: block; font-size: 0.98rem; }
      .person span { color: var(--muted); font-size: 0.85rem; }

      .person .li { display: inline-flex; align-items: center; margin-left: auto; }

      .person .li svg {
        width: 26px;
        height: 26px;
        border-radius: 5px;
        transition: transform 160ms ease;
      }

      .person:hover .li svg { transform: scale(1.12); }

      .contact-meta {
        margin: 22px 0 0;
        color: var(--muted);
        font-size: 0.93rem;
        line-height: 1.8;
      }

      .contact-meta a { color: var(--teal-dark); font-weight: 750; }
      .contact-meta a:hover { text-decoration: underline; }

      .intake-panel {
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow);
      }

      .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .field { display: grid; gap: 6px; }
      .field.wide { grid-column: 1 / -1; }
      .field label { font-size: 0.86rem; font-weight: 800; }
      .field label small { color: var(--muted); font-weight: 600; }

      input,
      textarea {
        width: 100%;
        min-height: 46px;
        border: 1px solid var(--line);
        border-radius: 9px;
        padding: 11px 12px;
        color: var(--ink);
        background: #fff;
        font: inherit;
        transition: border-color 160ms ease, box-shadow 160ms ease;
      }

      textarea { min-height: 104px; resize: vertical; }

      input:focus,
      textarea:focus {
        outline: none;
        border-color: var(--teal-bright);
        box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
      }

      .form-note { margin: 12px 0 0; color: var(--muted); font-size: 0.85rem; }

      footer {
        padding: 26px 0 36px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.9rem;
      }

      footer { padding: 40px 0 46px; }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 28px;
      }

      .footer-grid h4 {
        margin: 0 0 12px;
        color: var(--ink);
        font-size: 0.8rem;
        font-weight: 850;
        letter-spacing: 0.07em;
        text-transform: uppercase;
      }

      .footer-grid a {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 9px;
        font-size: 0.92rem;
      }

      .footer-grid a:hover { color: var(--teal); }

      .footer-brand {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 800;
        color: var(--ink);
      }

      .footer-brand svg { width: 26px; height: 26px; border-radius: 6px; }

      .footer-tag {
        margin: 12px 0 0;
        font-size: 0.9rem;
        line-height: 1.6;
      }

      @media (max-width: 880px) {
        .nav-links a:not(.button),
        .nav-links .nav-item { display: none; }

        .hero {
          grid-template-columns: 1fr;
          gap: 36px;
          padding: 52px 0 32px;
        }

        .panel,
        .contact { grid-template-columns: 1fr; }

        .rules { grid-template-columns: 1fr 1fr; }

        .staff-grid { grid-template-columns: 1fr; }

        .timeline { grid-template-columns: 1fr; gap: 26px; }

        .timeline::before {
          top: 26px;
          bottom: 26px;
          left: 25px;
          right: auto;
          width: 2px;
          height: auto;
        }

        .tstep {
          display: grid;
          grid-template-columns: 52px 1fr;
          gap: 0 18px;
          align-items: start;
        }

        .tstep .tnum { margin-bottom: 0; }
      }

      @media (max-width: 560px) {
        .shell { width: min(100% - 24px, 1080px); }
        .hero-actions .button { width: 100%; }

        .nav .button {
          padding: 0 14px;
          font-size: 0.88rem;
          min-height: 40px;
        }

        .band { padding: 28px 22px; }
        .form-grid { grid-template-columns: 1fr; }
        .rules { grid-template-columns: 1fr; }
        .branches { grid-template-columns: 1fr; gap: 14px; }
        .split { display: none; }
        .fit-row { grid-template-columns: 34px 1fr auto; }
        .fit-row .fitbar { display: none; }

        .float-card {
          position: static;
          margin-top: 10px;
          box-shadow: none;
        }

        .footer-grid { grid-template-columns: 1fr; gap: 22px; }
      }

      /* hard type */
      h1, h2, h3, .wq { font-weight: 800; }
      h2 { letter-spacing: -0.018em; }

      /* hover bio cards */
      .mega-person { position: relative; }

      .bio-card {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 265px;
        padding: 13px 15px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(11, 18, 32, 0.16);
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.55;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
        z-index: 32;
      }

      .mega-person:hover .bio-card {
        opacity: 1;
        visibility: visible;
        transform: none;
      }

      /* breadcrumbs + subpages */
      .crumbs {
        display: flex;
        gap: 9px;
        align-items: center;
        padding: 16px 0 0;
        color: var(--muted);
        font-size: 0.85rem;
        font-weight: 650;
      }

      .crumbs a:hover { color: var(--teal); }
      .crumbs b { color: var(--ink); }
      .crumbs i { font-style: normal; color: var(--teal-bright); }

      .page-hero { padding: 34px 0 10px; }

      .page-hero h1 {
        font-size: clamp(2.1rem, 4.4vw, 3.3rem);
        max-width: 760px;
      }

      .page-hero p {
        max-width: 620px;
        margin: 16px 0 0;
        color: var(--muted);
        font-size: 1.05rem;
        line-height: 1.6;
      }

      .page-hero .button { margin-top: 24px; }

      .grid2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }

      .tile {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
      }

      .tile h3 { margin: 0 0 10px; font-size: 1.12rem; }

      .tile ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .tile li {
        display: flex;
        gap: 9px;
        align-items: baseline;
        padding: 5px 0;
        color: #2a3247;
        font-size: 0.95rem;
        font-weight: 550;
      }

      .tile li::before {
        content: "";
        flex: 0 0 6px;
        height: 6px;
        background: var(--teal-bright);
      }

      .page-note {
        margin-top: 20px;
        padding: 18px 20px;
        border-left: 3px solid var(--teal-bright);
        background: #fff;
        border-radius: 0 10px 10px 0;
        color: var(--muted);
        font-size: 0.98rem;
        line-height: 1.6;
      }

      .page-note b { color: var(--ink); }

      @media (max-width: 700px) {
        .grid2 { grid-template-columns: 1fr; }
      }

      /* solution-page scenes */
      .bubble {
        max-width: 84%;
        margin-bottom: 9px;
        padding: 11px 14px;
        border-radius: 13px;
        font-size: 0.9rem;
        line-height: 1.45;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .bubble.in {
        border-bottom-left-radius: 4px;
        background: var(--paper);
        border: 1px solid var(--line);
      }

      .bubble.out {
        margin-left: auto;
        border-bottom-right-radius: 4px;
        color: #fff;
        background: var(--teal);
      }

      .bubble.note {
        max-width: 100%;
        text-align: center;
        background: rgba(0, 200, 117, 0.1);
        color: #067647;
        font-weight: 750;
        font-size: 0.84rem;
        border-radius: 8px;
      }

      .qrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 9px;
        padding: 11px 14px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        font-size: 0.88rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .qrow .qicon {
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        height: 28px;
        border-radius: 7px;
        background: var(--paper);
        border: 1px solid var(--line);
      }

      .qrow .qicon svg { width: 15px; height: 15px; }
      .qrow > span:nth-child(2) { flex: 1; }

      .stag {
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 800;
        white-space: nowrap;
        color: #fff;
        background: var(--st-green);
      }

      .stag.wait { color: #fff; background: var(--st-orange); }
      .stag.info { color: #fff; background: var(--st-blue); }

      .logo-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
      }

      /* hero canvas + big stats */
      .hero { position: relative; }

      #hero-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }

      .hero-fg, .hero .scene-wrap { position: relative; z-index: 1; }

      .bigstats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .bigstats > div { padding: 12px 28px; border-left: 1px solid var(--line); }
      .bigstats > div:first-child { border-left: none; padding-left: 0; }

      .bigstats b {
        display: block;
        font-family: "Archivo", Inter, sans-serif;
        font-size: clamp(2rem, 4vw, 3.1rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.05;
      }

      .bigstats > div > span {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 0.92rem;
        font-weight: 600;
      }

      /* who it fits */
      .fitstrip {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .fitstrip span {
        padding: 8px 14px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        color: var(--muted);
        font-size: 0.89rem;
        font-weight: 700;
      }

      .fitstrip span:last-child { color: var(--teal-dark); border-color: var(--teal-bright); }

      /* FAQ */
      .faq details {
        margin-bottom: 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
      }

      .faq summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 15px 18px;
        font-weight: 750;
        cursor: pointer;
        list-style: none;
      }

      .faq summary::-webkit-details-marker { display: none; }

      .faq summary::after {
        content: "+";
        color: var(--teal);
        font-size: 1.25rem;
        font-weight: 800;
        line-height: 1;
      }

      .faq details[open] summary::after { content: "\2212"; }

      .faq details p {
        margin: 0;
        padding: 0 18px 16px;
        color: var(--muted);
        line-height: 1.6;
        font-size: 0.96rem;
      }

      .mini-contact { max-width: 660px; }

      @media (max-width: 880px) {
        .bigstats { grid-template-columns: 1fr 1fr; gap: 14px 0; }
        .bigstats > div:nth-child(odd) { border-left: none; padding-left: 0; }
      }

      /* authentic pass: hard text, solid chips */
      .page-note {
        margin-top: 22px;
        padding: 0;
        border: none;
        border-left: none;
        border-radius: 0;
        background: none;
        color: var(--ink);
        font-size: 1.14rem;
        font-weight: 650;
        line-height: 1.65;
        max-width: 860px;
      }

      .stag { color: #fff; background: var(--st-green); }
      .stag.wait { color: #fff; background: var(--st-orange); }
      .stag.info { color: #fff; background: var(--st-blue); }
      .fit-badge { color: #fff; background: var(--teal); }
      .fit-badge.build { color: #fff; background: var(--st-orange); }
      .leak { color: #fff; background: var(--st-orange); }
      .status-swap .before { color: #fff; background: #64748b; }
      .status-swap .after { color: #fff; background: var(--st-green); }
      .bubble.note, .measure-note { color: #fff; background: var(--st-green); }

      .fitstrip { gap: 12px 26px; }

      .fitstrip span {
        padding: 0;
        border: none;
        border-radius: 0;
        background: none;
        color: var(--ink);
        font-size: 0.99rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .fitstrip span::before {
        content: "";
        width: 7px;
        height: 7px;
        background: var(--teal-bright);
      }

      .fitstrip span:last-child { color: var(--teal-dark); border: none; }

      /* step circles */
      .stepline {
        display: flex;
        align-items: center;
        gap: 24px 30px;
        flex-wrap: wrap;
      }

      .sstep { display: flex; align-items: center; gap: 16px; }

      .scirc {
        position: relative;
        display: grid;
        place-items: center;
        width: 88px;
        height: 88px;
        border: 2.5px solid var(--ink);
        border-radius: 50%;
        font-family: "Archivo", Inter, sans-serif;
        font-size: 1.75rem;
        font-weight: 800;
      }

      .scirc::before {
        content: "";
        position: absolute;
        left: -5px;
        top: 56%;
        width: 10px;
        height: 30%;
        background: var(--paper);
      }

      .sstep.on .scirc { border-color: var(--teal); }

      .sstep h3 { margin: 0; font-size: 1.4rem; }

      .sarrow {
        color: var(--teal);
        font-size: 1.7rem;
        font-weight: 800;
      }

      .stepdesc {
        margin: 26px 0 0;
        max-width: 880px;
        color: var(--ink);
        font-size: 1.1rem;
        font-weight: 650;
        line-height: 1.65;
      }

      @media (max-width: 700px) {
        .sarrow { display: none; }
        .stepline { gap: 18px; }
        .scirc { width: 64px; height: 64px; font-size: 1.3rem; }
      }

      /* ---- unique widget architectures ---- */
      .widgetwrap { display: grid; justify-items: center; gap: 22px; }

      /* phone */
      .phone {
        width: min(330px, 100%);
        border: 9px solid var(--ink);
        border-radius: 40px;
        background: #fff;
        padding: 46px 14px 22px;
        position: relative;
        box-shadow: var(--shadow);
      }

      .phone::before {
        content: "";
        position: absolute;
        top: 13px;
        left: 50%;
        transform: translateX(-50%);
        width: 98px;
        height: 22px;
        background: var(--ink);
        border-radius: 12px;
      }

      .ptime { text-align: center; font-size: 0.74rem; color: var(--muted); font-weight: 750; margin: 0 0 12px; }

      /* lead card + gauge */
      .leadcard {
        width: min(430px, 100%);
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--shadow);
      }

      .leadrow {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0;
        border-bottom: 1px dashed var(--line);
        font-size: 0.93rem;
        color: var(--muted);
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .leadrow b { color: var(--ink); }

      .gauge { height: 10px; margin-top: 18px; border-radius: 5px; background: var(--line); overflow: hidden; }

      .gauge i {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, var(--st-orange), var(--st-green));
        animation: fitgrow 1200ms cubic-bezier(0.2, 0.65, 0.25, 1) forwards;
      }

      .hotflag {
        margin-top: 12px;
        text-align: right;
        font-weight: 800;
        color: #067647;
        opacity: 0;
        animation: rise 400ms ease forwards;
      }

      /* calendar week */
      .calweek {
        width: min(470px, 100%);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 18px;
        box-shadow: var(--shadow);
      }

      .calhead {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        margin-bottom: 8px;
        text-align: center;
        font-size: 0.7rem;
        font-weight: 800;
        color: var(--muted);
        text-transform: uppercase;
      }

      .calgrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: 34px;
        gap: 6px;
      }

      .slot { border: 1.5px dashed var(--line); border-radius: 7px; }

      .slot.b, .slot.r {
        border: none;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 0.62rem;
        font-weight: 800;
        opacity: 0;
        animation: rise 400ms ease forwards;
      }

      .slot.b { background: var(--teal); }
      .slot.r { background: var(--st-orange); }

      .callegend { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); font-weight: 650; }

      /* escalation ladder */
      .ladder { width: min(440px, 100%); position: relative; padding-left: 28px; }

      .ladder::before {
        content: "";
        position: absolute;
        left: 9px;
        top: 10px;
        bottom: 10px;
        width: 2px;
        background: var(--line);
      }

      .lstep {
        position: relative;
        margin-bottom: 12px;
        padding: 13px 15px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        font-size: 0.92rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .lstep small { display: block; color: var(--muted); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; margin-bottom: 3px; }

      .lstep::before {
        content: "";
        position: absolute;
        left: -25px;
        top: 18px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--teal-bright);
      }

      .stamp {
        position: absolute;
        right: 14px;
        top: 10px;
        transform: rotate(-11deg);
        border: 3px solid var(--st-green);
        color: #067647;
        background: #fff;
        font-weight: 900;
        font-size: 1rem;
        padding: 3px 10px;
        border-radius: 6px;
        opacity: 0;
        animation: rise 400ms ease forwards;
      }

      /* inbox -> kanban */
      .e2t { display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 14px; align-items: center; width: 100%; }

      .minibox { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }

      .minibox h6, .kcol h6 {
        margin: 2px 4px 8px;
        font-size: 0.66rem;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
      }

      .mrow { padding: 8px; border-top: 1px solid var(--line); font-size: 0.78rem; opacity: 0; animation: rise 400ms ease forwards; }
      .mrow b { display: block; font-size: 0.8rem; }
      .mrow span { color: var(--muted); }

      .karr { font-size: 1.7rem; color: var(--teal); font-weight: 900; }

      .kanban { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
      .kcol { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px; min-height: 150px; }

      .kcard {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 7px;
        padding: 7px 8px;
        font-size: 0.72rem;
        font-weight: 650;
        margin-bottom: 6px;
        opacity: 0;
        animation: rise 400ms ease forwards;
      }

      /* doc scanner */
      .docwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; width: min(560px, 100%); }

      .doc {
        position: relative;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 20px 18px;
        min-height: 240px;
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .doc i { display: block; height: 8px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); margin-bottom: 11px; }

      .scanline {
        position: absolute;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--teal-bright);
        box-shadow: 0 0 16px var(--teal-bright);
        animation: scan 2.8s ease-in-out infinite;
      }

      @keyframes scan { 0% { top: 8%; } 50% { top: 90%; } 100% { top: 8%; } }

      .exfield {
        background: #fff;
        border: 1px solid var(--line);
        border-left: 3px solid var(--teal);
        border-radius: 8px;
        padding: 9px 11px;
        font-size: 0.8rem;
        margin-bottom: 9px;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .exfield small { display: block; color: var(--muted); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; }

      /* hub and spoke */
      .hub { position: relative; width: min(460px, 100%); height: 300px; }

      .hubc {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 76px;
        height: 76px;
        border-radius: 20px;
        display: grid;
        place-items: center;
        background: var(--ink);
        box-shadow: var(--shadow);
        z-index: 2;
      }

      .hubc svg { width: 44px; height: 44px; border-radius: 10px; }

      .spoke {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 130px;
        height: 3px;
        transform-origin: left center;
        background: repeating-linear-gradient(90deg, var(--teal-bright) 0 7px, transparent 7px 15px);
        animation: dashmove 900ms linear infinite;
        z-index: 1;
      }

      @keyframes dashmove { to { background-position: 15px 0; } }

      .hnode {
        position: absolute;
        width: 54px;
        height: 54px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid var(--line);
        display: grid;
        place-items: center;
        box-shadow: 0 10px 22px rgba(11, 18, 32, 0.1);
        z-index: 2;
      }

      .hnode svg { width: 26px; height: 26px; }

      /* funnel */
      .funnel { width: min(460px, 100%); }
      .chrow { display: flex; justify-content: space-between; padding: 0 26px; }
      .funlines { display: block; width: 100%; height: 64px; }
      .queuebox { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }

      /* dashboard */
      .dash { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; width: min(560px, 100%); }

      .kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; opacity: 0; animation: rise 500ms ease forwards; }
      .kpi b { display: block; font-family: "Archivo", Inter, sans-serif; font-size: 1.7rem; font-weight: 800; }
      .kpi span { color: var(--muted); font-size: 0.8rem; font-weight: 650; }

      .donut {
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: conic-gradient(var(--teal) 0 73%, var(--line) 0);
        display: grid;
        place-items: center;
        align-self: center;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .donut i {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: #fff;
        display: grid;
        place-items: center;
        font-style: normal;
        font-weight: 800;
        font-family: "Archivo", Inter, sans-serif;
      }

      .chartbox { grid-column: 1 / -1; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
      .chartbox h6 { margin: 0 0 8px; font-size: 0.7rem; text-transform: uppercase; color: var(--muted); }

      .chartbox path {
        fill: none;
        stroke: var(--teal);
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-dasharray: 420;
        stroke-dashoffset: 420;
        animation: draw 1600ms 400ms ease forwards;
      }

      @keyframes draw { to { stroke-dashoffset: 0; } }

      /* slack panel */
      .slackp {
        display: grid;
        grid-template-columns: 128px 1fr;
        width: min(540px, 100%);
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow);
      }

      .srail { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding: 14px 10px; font-size: 0.78rem; }
      .srail b { display: block; color: #fff; margin-bottom: 10px; font-size: 0.85rem; }
      .srail span { display: block; padding: 5px 7px; border-radius: 6px; }
      .srail .on { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 700; }

      .smain { padding: 14px; }

      .smsg { display: flex; gap: 9px; margin-bottom: 12px; font-size: 0.84rem; opacity: 0; animation: rise 500ms ease forwards; }
      .smsg .savatar {
        flex: 0 0 28px;
        height: 28px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 800;
        font-size: 0.7rem;
        background: var(--st-purple);
      }
      .smsg.bot .savatar { background: var(--teal); }
      .smsg b { display: block; font-size: 0.8rem; }
      .smsg p { margin: 2px 0 0; color: var(--muted); line-height: 1.45; }
      .smsg .src { color: var(--teal-dark); font-weight: 750; font-size: 0.74rem; }

      /* email frame */
      .mail { width: min(500px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
      .mhead { padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
      .mhead div { margin-bottom: 3px; }
      .mhead b { color: var(--ink); }
      .mbody { padding: 16px 18px; font-size: 0.92rem; line-height: 1.65; }
      .mbody p { margin: 0 0 10px; opacity: 0; animation: rise 500ms ease forwards; }
      .mbody .go { color: var(--teal-dark); font-weight: 800; }

      /* push stack */
      .pushstack { width: min(390px, 100%); display: grid; gap: 10px; }

      .push {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 13px 15px;
        box-shadow: 0 12px 28px rgba(11, 18, 32, 0.12);
        font-size: 0.86rem;
        opacity: 0;
        animation: rise 500ms ease forwards;
      }

      .push .ph { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.74rem; color: var(--muted); font-weight: 700; }
      .push .ph svg { width: 20px; height: 20px; border-radius: 5px; }
      .push .ph b { color: var(--ink); }
      .push .ph span { margin-left: auto; }

      .pactions { display: flex; gap: 8px; margin-top: 10px; }
      .pa { flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-weight: 800; font-size: 0.84rem; }
      .pa.ok { background: var(--st-green); color: #fff; }
      .pa.no { background: var(--paper); border: 1px solid var(--line); }

      @media (max-width: 700px) {
        .e2t { grid-template-columns: 1fr; }
        .karr { transform: rotate(90deg); justify-self: center; }
        .docwrap { grid-template-columns: 1fr; }
        .dash { grid-template-columns: 1fr 1fr; }
        .donut { justify-self: center; }
      }

      .mega-cols.cols4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }

      /* ambient background design */
      body {
        background-image: radial-gradient(rgba(11, 18, 32, 0.045) 1px, transparent 1.4px);
        background-size: 27px 27px;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(640px circle at 10% 6%, rgba(20, 184, 166, 0.10), transparent 70%),
          radial-gradient(760px circle at 92% 24%, rgba(56, 189, 248, 0.09), transparent 70%),
          radial-gradient(600px circle at 16% 88%, rgba(20, 184, 166, 0.06), transparent 70%);
      }

      .method, .mega { background-image: none; }
      .hero .phone { margin: 0 auto; }

      /* mobile menu */
      .menu-btn {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: #fff;
        cursor: pointer;
      }

      .menu-btn span {
        display: block;
        height: 2.5px;
        border-radius: 2px;
        background: var(--ink);
        transition: transform 200ms ease, opacity 200ms ease;
      }

      body.mnav-open .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
      body.mnav-open .menu-btn span:nth-child(2) { opacity: 0; }
      body.mnav-open .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

      .mnav {
        display: none;
        position: fixed;
        top: 66px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 39;
        overflow-y: auto;
        background: var(--paper);
        padding: 22px 0 40px;
        border-top: 1px solid var(--line);
      }

      body.mnav-open .mnav { display: block; }
      body.mnav-open { overflow: hidden; }

      .mnav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px;
      }

      .mnav h6 {
        margin: 0 0 8px;
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--teal-dark);
      }

      .mnav a:not(.button) {
        display: block;
        padding: 7px 0;
        color: var(--ink);
        font-size: 0.95rem;
        font-weight: 650;
      }

      @media (max-width: 880px) {
        .menu-btn { display: flex; }
      }

      @media (max-width: 480px) {
        .mnav-grid { grid-template-columns: 1fr; }
      }

      .solgrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }

      .solgrid h5 {
        margin: 0 0 10px;
        font-size: 1.02rem;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--teal-bright);
      }

      .solgrid .sub {
        display: flex;
        align-items: baseline;
        gap: 9px;
        padding: 6px 0;
        color: var(--muted);
        font-size: 0.93rem;
        font-weight: 600;
      }

      .solgrid .sub::before {
        content: "";
        flex: 0 0 6px;
        height: 6px;
        background: var(--teal-bright);
      }

      .solgrid .sub:hover { color: var(--ink); }

      @media (max-width: 880px) { .solgrid { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 480px) { .solgrid { grid-template-columns: 1fr; } }

      /* accessibility */
      .skip {
        position: absolute;
        left: -9999px;
        top: 12px;
        z-index: 100;
        padding: 12px 18px;
        border-radius: 9px;
        background: var(--ink);
        color: #fff;
        font-weight: 750;
      }

      .skip:focus { left: 12px; }

      a:focus-visible,
      button:focus-visible,
      summary:focus-visible,
      input:focus-visible,
      textarea:focus-visible {
        outline: 3px solid var(--teal-bright);
        outline-offset: 2px;
      }

      /* legal documents */
      .legal { max-width: 800px; }

      .legal h2 {
        margin: 30px 0 10px;
        font-size: 1.15rem;
        letter-spacing: 0;
      }

      .legal h2:first-child { margin-top: 0; }

      .legal p {
        margin: 0 0 14px;
        color: #2a3247;
        font-size: 0.98rem;
        line-height: 1.75;
      }

      .legal a { color: var(--teal-dark); font-weight: 700; }
      .legal a:hover { text-decoration: underline; }

      .legal-date {
        margin-top: 34px !important;
        color: var(--muted) !important;
        font-size: 0.86rem !important;
      }