/* Google Fonts loaded via <link> in HTML <head> for non-blocking performance */

    :root {
      color-scheme: light dark;
      --bg: #f6f8f5;
      --surface: #ffffff;
      --surface-2: #edf1ee;
      --ink: #101713;
      --muted: #59645d;
      --line: #d7ddd8;
      --blue: #1748c7;
      --blue-2: #0d2f8d;
      --blue-soft: #e8eeff;
      --lime: #c8f04b;
      --lime-on-light: #557400;
      --shadow: 0 22px 64px rgba(25, 40, 30, .11);
      --max: 1180px;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #101411;
        --surface: #171c18;
        --surface-2: #202721;
        --ink: #f4f7f4;
        --muted: #aab4ad;
        --line: #303a33;
        --blue: #87a6ff;
        --blue-2: #b4c5ff;
        --blue-soft: #222d4b;
        --lime: #c8ef59;
        --lime-on-light: #c8ef59;
        --shadow: 0 22px 64px rgba(0, 0, 0, .32);
      }
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: "DM Sans", sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; }
    button { font: inherit; color: inherit; }
    img, svg { display: block; }
    img { max-width: 100%; }
    .wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
    .skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; }
    .skip-link:focus { top: 12px; }

    .site-nav { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; }
    .nav-inner { min-height: 72px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .nav-links { display: flex; align-items: center; gap: 5px; }
    .nav-link { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; padding: 9px 13px; border-radius: 5px; }
    .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
    .nav-cta { margin-left: 12px; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; background: var(--ink); color: var(--bg); text-decoration: none; font-size: 14px; font-weight: 600; border-radius: 5px; }
    .nav-cta:hover, .nav-cta:focus-visible { background: var(--blue); color: #fff; }
    .menu-button { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 5px; cursor: pointer; place-items: center; }
    .menu-button svg { width: 22px; height: 22px; }

    .page { display: block; }
    .page.active { display: block; }
    @keyframes page-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    .hero { padding: 72px 0 42px; }
    .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 66px; align-items: center; }
    .eyebrow { display: flex; gap: 12px; align-items: center; color: var(--blue); font-weight: 600; font-size: 13px; letter-spacing: .035em; }
    .eyebrow::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 28%, transparent); }
    h1, h2, h3 { font-family: "Manrope", sans-serif; margin: 0; line-height: 1.06; letter-spacing: -.04em; }
    h1 { max-width: 760px; margin-top: 22px; font-size: clamp(48px, 6.6vw, 84px); font-weight: 500; }
    h1 em { font-style: normal; color: var(--blue); }
    .hero-copy { max-width: 590px; margin: 26px 0 0; color: var(--muted); font-size: 19px; }
    .actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 32px; }
    .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 21px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 600; border-radius: 6px; border: 0; }
    .button:hover, .button:focus-visible { background: var(--blue); color: #fff; }
    .button.light { background: var(--bg); color: var(--ink); }
    .button.light:hover, .button.light:focus-visible { background: var(--lime); color: #16200f; }
    .text-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
    .text-link:hover, .text-link:focus-visible { border-color: var(--ink); }

    .hero-visual { position: relative; min-height: 530px; isolation: isolate; }
    .hero-visual::before { content: ""; position: absolute; inset: 66px 34px 42px 74px; z-index: -1; background: var(--blue-soft); border-radius: 50%; filter: blur(34px); opacity: .72; }
    .visual-frame { position: absolute; inset: 22px 0 28px 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line)); border-radius: 12px; background: #101d43; box-shadow: 0 28px 70px rgba(18, 36, 79, .19); }
    .visual-topbar { height: 48px; padding: 0 18px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 10px; letter-spacing: .08em; font-weight: 600; }
    .window-dots { display: flex; gap: 5px; margin-right: 2px; }
    .window-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }
    .release-label { margin-left: auto; color: var(--lime); letter-spacing: 0; }
    .visual-stage { position: absolute; inset: 48px 0 0; overflow: hidden; }
    .visual-stage > img { width: 100%; height: 100%; object-fit: cover; opacity: .31; filter: saturate(.72) contrast(1.08); transform: scale(1.04); animation: visual-breathe 9s ease-in-out infinite; }
    .visual-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(16,29,67,.28), rgba(16,29,67,.84)); pointer-events: none; }
    .product-window { position: absolute; z-index: 2; inset: 46px 42px 50px 46px; display: grid; grid-template-columns: 64px 1fr; overflow: hidden; background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--ink); border: 1px solid rgba(255,255,255,.55); border-radius: 8px; box-shadow: 0 24px 60px rgba(3,12,39,.28); animation: float-window 7s ease-in-out infinite; }
    .product-sidebar { padding: 18px 15px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); border-right: 1px solid var(--line); }
    .product-mark { width: 26px; height: 26px; margin-bottom: 27px; border-radius: 6px; background: var(--blue); position: relative; }
    .product-mark::after { content: ""; position: absolute; width: 8px; height: 8px; right: -3px; bottom: -3px; border: 2px solid var(--surface-2); border-radius: 50%; background: var(--lime); }
    .side-item { width: 30px; height: 5px; margin: 0 0 18px; border-radius: 99px; background: var(--line); }
    .side-item.active { background: var(--blue); }
    .product-main { min-width: 0; padding: 20px; }
    .product-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
    .product-title small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 4px; }
    .product-title strong { font-family: "Manrope", sans-serif; font-size: 16px; letter-spacing: -.025em; }
    .product-action { width: 66px; height: 24px; border-radius: 4px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 8px; font-weight: 600; }
    .product-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 21px; }
    .product-kpi { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
    .product-kpi span { display: block; color: var(--muted); font-size: 7px; white-space: nowrap; }
    .product-kpi b { display: block; margin-top: 5px; font: 600 11px/1.2 "Manrope", sans-serif; }
    .product-board { display: grid; grid-template-columns: 1.25fr .75fr; gap: 9px; margin-top: 9px; height: 126px; }
    .product-chart, .product-list { padding: 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); overflow: hidden; }
    .chart-label { display: block; width: 47px; height: 5px; border-radius: 99px; background: var(--line); }
    .chart-grid { height: 76px; margin-top: 13px; position: relative; background: repeating-linear-gradient(to bottom, transparent 0 18px, var(--line) 19px); overflow: hidden; }
    .chart-grid svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .chart-path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw-line 3.8s ease-in-out infinite alternate; }
    .product-list i { display: block; height: 18px; margin-top: 9px; border-radius: 3px; background: var(--surface-2); position: relative; }
    .product-list i::after { content: ""; position: absolute; left: 6px; top: 7px; width: 58%; height: 4px; border-radius: 99px; background: var(--line); }
    .scan-line { position: absolute; z-index: 3; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 16px rgba(200,240,75,.8); animation: scan 5.4s ease-in-out infinite; pointer-events: none; }
    .floating-card { position: absolute; z-index: 4; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); box-shadow: 0 16px 40px rgba(14, 28, 21, .15); backdrop-filter: blur(14px); }
    .build-card { left: 0; top: 0; width: 222px; padding: 17px; border-radius: 7px; animation: drift 6s ease-in-out infinite; }
    .build-card small, .secure-card small { color: var(--muted); display: block; font-size: 11px; margin-bottom: 7px; }
    .build-card strong { font-family: "Manrope", sans-serif; font-size: 17px; letter-spacing: -.02em; }
    .delivery-steps { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
    .delivery-steps span { display: block; height: 5px; flex: 1; border-radius: 99px; background: var(--blue); }
    .delivery-steps span:last-child { background: linear-gradient(90deg, var(--blue) 52%, var(--surface-2) 52%); animation: progress-fill 3.4s ease-in-out infinite alternate; }
    .secure-card { right: -12px; bottom: 0; width: 204px; padding: 16px; border-radius: 7px; animation: drift 6s ease-in-out 1.2s infinite; }
    .secure-line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
    .secure-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: #16200f; }
    .live-chip { position: absolute; z-index: 4; left: 50px; bottom: 43px; display: flex; align-items: center; gap: 8px; background: #101713; color: #fff; border-radius: 999px; padding: 9px 13px; font-size: 12px; font-weight: 600; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
    .live-chip::before { content: ""; width: 7px; height: 7px; background: var(--lime); border-radius: 50%; animation: pulse 1.8s ease-out infinite; }

    .benefit-strip { margin-top: 66px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .benefit { padding: 20px 24px; display: flex; gap: 14px; align-items: center; border-right: 1px solid var(--line); }
    .benefit:first-child { padding-left: 0; }
    .benefit:last-child { border-right: 0; }
    .benefit svg { width: 22px; height: 22px; color: var(--blue); flex: 0 0 auto; }
    .benefit strong { display: block; font-size: 14px; }
    .benefit span { display: block; color: var(--muted); font-size: 12px; }

    section { padding: 104px 0; }
    .section-top { display: grid; grid-template-columns: .58fr 1.42fr; gap: 48px; margin-bottom: 50px; }
    .section-no { color: var(--muted); font-size: 13px; }
    h2 { font-size: clamp(36px, 5vw, 62px); font-weight: 500; max-width: 850px; }
    h3 { font-weight: 500; }
    .section-lede { font-size: 18px; color: var(--muted); max-width: 650px; margin: 20px 0 0; }
    .home-services { background: var(--surface); }
    .service-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
    .service-summary article { min-height: 280px; padding: 26px 24px 24px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
    .service-summary article:not(:first-child) { padding-left: 24px; }
    .service-summary article:last-child { border-right: 0; }
    .service-summary svg { width: 30px; height: 30px; color: var(--blue); margin-bottom: 58px; }
    .service-summary h3 { font-size: 22px; letter-spacing: -.025em; }
    .service-summary p { color: var(--muted); font-size: 14px; margin: 13px 0 0; }
    .service-summary .text-link { margin-top: auto; align-self: flex-start; font-size: 13px; }

    .selected-work { background: var(--surface); overflow: hidden; }
    .selected-work .section-top { align-items: end; }
    .work-showcase { display: grid; grid-template-columns: 1.24fr .76fr; gap: 18px; }
    .showcase-card { min-height: 520px; display: flex; flex-direction: column; overflow: hidden; color: #fff; background: #14265c; border-radius: 8px; text-decoration: none; position: relative; }
    .showcase-card:nth-child(2) { background: #101713; }
    .showcase-card.wide { grid-column: 1 / -1; min-height: 410px; display: grid; grid-template-columns: .83fr 1.17fr; background: #e6ebe7; color: #101713; }
    .showcase-copy { position: relative; z-index: 3; padding: 30px; }
    .showcase-type { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.63); font: 700 10px/1 "Manrope", sans-serif; letter-spacing: .1em; }
    .showcase-card.wide .showcase-type { color: #59645d; }
    .showcase-index { color: var(--lime); }
    .showcase-card h3 { max-width: 500px; margin-top: 26px; font-size: clamp(28px,3.5vw,46px); }
    .showcase-card p { max-width: 460px; margin: 15px 0 0; color: rgba(255,255,255,.72); font-size: 15px; }
    .showcase-card.wide p { color: #59645d; }
    .showcase-visual { flex: 1; min-height: 270px; position: relative; overflow: hidden; }
    .showcase-card.wide .showcase-visual { min-height: 410px; order: 2; }
    .showcase-link { position: absolute; right: 27px; bottom: 24px; z-index: 6; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: #101713; background: var(--lime); font-size: 19px; transition: transform .35s ease, background .35s ease; }
    .showcase-card:hover .showcase-link { transform: rotate(45deg); background: #fff; }
    .showcase-gridlines { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 40px 40px; animation: grid-drift 10s linear infinite; }
    .ops-window { position: absolute; left: 8%; right: -5%; top: 10%; height: 250px; overflow: hidden; color: #101713; background: #fbfcfb; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 24px 55px rgba(0,0,0,.26); transform: rotate(-2deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
    .showcase-card:hover .ops-window { transform: translate(-8px,-7px) rotate(0); }
    .ops-top { height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid #d7ddd8; color: #69736d; font: 700 7px/1 "Manrope",sans-serif; letter-spacing: .1em; }
    .ops-top b { color: #557400; }
    .ops-body { display: grid; grid-template-columns: 56px 1fr; height: calc(100% - 35px); }
    .ops-side { background: #edf1ee; border-right: 1px solid #d7ddd8; padding: 14px 11px; }
    .ops-side i { display: block; height: 5px; margin-bottom: 14px; background: #c5ccc7; }.ops-side i:first-child { background: #1748c7; }
    .ops-main { padding: 19px; }
    .ops-main > span { color: #6b756f; font: 700 7px/1 "Manrope",sans-serif; letter-spacing: .1em; }
    .ops-main > strong { display: block; margin-top: 7px; font: 600 18px/1 "Manrope",sans-serif; }
    .ops-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 18px; }
    .ops-columns div { height: 105px; padding: 8px; background: #f0f3f0; }
    .ops-columns div:nth-child(2) { background: #e8eeff; }
    .ops-columns i { display: block; height: 19px; margin-bottom: 6px; background: #fff; box-shadow: 0 2px 6px rgba(20,30,24,.06); }
    .ops-columns div:nth-child(2) i:first-child { animation: card-hop 2.8s ease-in-out infinite; }

    .automation-orbit { position: absolute; left: 50%; top: 49%; width: 172px; height: 172px; margin: -86px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; animation: orbit-spin 15s linear infinite; }
    .automation-orbit::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px rgba(200,240,75,.7); }
    .automation-core { position: absolute; left: 50%; top: 49%; width: 92px; height: 92px; margin: -46px; display: grid; place-items: center; border-radius: 50%; color: #101713; background: var(--lime); font: 700 15px/1 "Manrope",sans-serif; box-shadow: 0 0 0 17px rgba(200,240,75,.07); }
    .automation-card { position: absolute; min-width: 105px; padding: 12px; color: #101713; background: #fff; font: 600 10px/1.2 "Manrope",sans-serif; box-shadow: 0 12px 28px rgba(0,0,0,.25); }
    .automation-card::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #1748c7; }
    .auto-a { left: 8%; top: 15%; animation: chip-float 4.4s ease-in-out infinite; }.auto-b { right: 7%; top: 24%; animation: chip-float 5s ease-in-out .5s infinite; }.auto-c { left: 13%; bottom: 14%; animation: chip-float 4.7s ease-in-out 1s infinite; }
    .auto-line { position: absolute; left: 23%; right: 20%; top: 49%; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform: rotate(12deg); }
    .auto-line i { position: absolute; width: 7px; height: 7px; top: -3px; border-radius: 50%; background: var(--lime); animation: signal-run 2.5s ease-in-out infinite; }

    .field-device { position: absolute; right: 14%; top: 11%; width: 170px; height: 315px; padding: 12px 15px; border: 6px solid #101713; border-radius: 25px; background: #fff; box-shadow: 0 25px 58px rgba(20,30,24,.23); transform: rotate(5deg); animation: phone-front-float 6s ease-in-out infinite; }
    .field-device::before { content: ""; display: block; width: 35px; height: 4px; margin: -4px auto 22px; border-radius: 99px; background: #101713; }
    .field-device span { color: #69736d; font: 700 7px/1 "Manrope",sans-serif; letter-spacing: .1em; }
    .field-device strong { display: block; margin-top: 10px; font: 600 19px/1.1 "Manrope",sans-serif; }
    .field-photo { height: 105px; margin-top: 17px; position: relative; overflow: hidden; background: #1748c7; }
    .field-photo::before { content: ""; position: absolute; width: 82px; height: 82px; right: -19px; top: -22px; border-radius: 50%; background: var(--lime); opacity: .78; }
    .field-photo::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 17px; height: 28px; border: 1px solid rgba(255,255,255,.55); }
    .field-device i { display: block; height: 28px; margin-top: 8px; border: 1px solid #d7ddd8; background: #f6f8f5; }
    .field-card { position: absolute; left: 9%; top: 30%; width: 190px; padding: 19px; color: #101713; background: var(--lime); transform: rotate(-4deg); box-shadow: 0 18px 38px rgba(20,30,24,.18); animation: chip-float 5.2s ease-in-out .8s infinite; }
    .field-card small { display: block; font: 700 8px/1 "Manrope",sans-serif; letter-spacing: .1em; }
    .field-card strong { display: block; margin-top: 12px; font: 600 22px/1.05 "Manrope",sans-serif; letter-spacing: -.035em; }
    .field-sync { position: absolute; left: 26%; bottom: 16%; padding: 9px 11px; color: #fff; background: #101713; font: 700 8px/1 "Manrope",sans-serif; letter-spacing: .1em; }
    @keyframes card-hop { 50% { transform: translateY(22px); } }

    .fit-section { background: var(--ink); color: var(--bg); }
    .fit-section .section-no, .fit-section .section-lede { color: color-mix(in srgb, var(--bg) 70%, transparent); }
    .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .fit-card { background: color-mix(in srgb, var(--bg) 7%, transparent); border: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding: 32px; border-radius: 6px; }
    .fit-card.good { border-color: color-mix(in srgb, var(--lime) 50%, transparent); }
    .fit-label { display: inline-flex; align-items: center; width: fit-content; padding: 7px 10px; background: #d7ff62; color: #101713; border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: .045em; }
    .fit-card:not(.good) .fit-label { background: #eef3ef; color: #1b2820; }
    .fit-card h3 { margin-top: 34px; font-size: 28px; }
    .plain-list { list-style: none; margin: 22px 0 0; padding: 0; }
    .plain-list li { position: relative; padding: 13px 0 13px 25px; border-top: 1px solid color-mix(in srgb, var(--bg) 15%, transparent); color: color-mix(in srgb, var(--bg) 78%, transparent); }
    .plain-list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
    .fit-card:not(.good) .plain-list li::before { background: color-mix(in srgb, var(--bg) 42%, transparent); }

    .closing { padding-bottom: 122px; }
    .closing-inner { background: var(--blue); color: #fff; padding: 54px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; border-radius: 6px; }
    .closing h2 { max-width: 720px; }
    .closing-side p { color: rgba(255,255,255,.76); margin: 0 0 24px; }

    .page-head { padding: 76px 0 72px; border-bottom: 1px solid var(--line); }
    .page-head-grid { display: grid; grid-template-columns: .58fr 1.42fr; gap: 48px; align-items: end; }
    .page-head h1 { font-size: clamp(48px, 7vw, 86px); margin-top: 0; max-width: 900px; }
    .page-head-copy { color: var(--muted); font-size: 19px; max-width: 650px; margin: 24px 0 0; }
    .page-head-aside { color: var(--muted); font-size: 14px; padding-bottom: 8px; max-width: 250px; }

    .services-list { background: var(--surface); }
    .service-row { display: grid; grid-template-columns: 90px .9fr 1.1fr; gap: 34px; padding: 44px 0; border-top: 1px solid var(--line); }
    .service-row:last-child { border-bottom: 1px solid var(--line); }
    .service-number { color: var(--blue); font-size: 13px; font-weight: 600; }
    .service-row h2 { font-size: clamp(29px, 4vw, 46px); }
    .service-detail p { margin: 0; color: var(--muted); max-width: 540px; }
    .deliverables { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
    .deliverables span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 12px; }

    .process-strip { background: var(--ink); color: var(--bg); }
    .process-strip .section-no, .process-strip .section-lede { color: color-mix(in srgb, var(--bg) 70%, transparent); }
    .steps { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
    .step { min-height: 195px; padding: 24px 18px 16px 0; border-right: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
    .step:not(:first-child) { padding-left: 18px; }
    .step:last-child { border-right: 0; }
    .step span { color: var(--lime); font-size: 12px; }
    .step h3 { margin-top: 48px; font-size: 17px; letter-spacing: -.02em; }
    .step p { color: color-mix(in srgb, var(--bg) 65%, transparent); font-size: 12px; margin: 10px 0 0; }

    .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .work-card { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
    .work-visual { height: 290px; background: var(--surface-2); padding: 34px; position: relative; overflow: hidden; }
    .work-card:nth-child(2) .work-visual { background: var(--blue); }
    .work-card:nth-child(3) .work-visual { background: #dbe8e4; }
    .work-card:nth-child(4) .work-visual { background: #161c19; }
    .mock-window { height: 100%; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 5px; padding: 20px; box-shadow: 0 18px 48px rgba(20,30,24,.14); animation: float-window 7s ease-in-out infinite; }
    .mock-bar { height: 6px; width: 78px; border-radius: 99px; background: var(--line); margin-bottom: 24px; }
    .mock-grid { display: grid; grid-template-columns: 1fr .72fr; gap: 12px; height: calc(100% - 30px); }
    .mock-block { background: var(--blue-soft); border-radius: 3px; position: relative; overflow: hidden; }
    .mock-block::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 18%; height: 38%; border: 2px solid var(--blue); border-top: 0; opacity: .65; }
    .mock-lines { display: grid; gap: 9px; align-content: start; }
    .mock-lines i { display: block; height: 24px; background: var(--surface-2); border-radius: 3px; }
    .workflow { position: absolute; inset: 44px 36px; }
    .node { position: absolute; width: 106px; padding: 12px; background: #fff; color: #101713; border-radius: 5px; box-shadow: 0 10px 24px rgba(10,25,70,.18); font-size: 11px; font-weight: 600; animation: node-pulse 3s ease-in-out infinite; }
    .node:nth-child(1) { left: 0; top: 0; }
    .node:nth-child(2) { right: 0; top: 46%; animation-delay: .6s; }
    .node:nth-child(3) { left: 18%; bottom: 0; animation-delay: 1.2s; }
    .route-line { position: absolute; height: 1px; background: rgba(255,255,255,.7); transform-origin: left center; }
    .route-one { width: 66%; left: 82px; top: 45px; transform: rotate(27deg); }
    .route-two { width: 50%; left: 92px; bottom: 42px; transform: rotate(-25deg); }
    .mobile-shell { width: 150px; height: 230px; background: #fff; border: 6px solid #101713; border-radius: 22px; margin: -3px auto 0; padding: 19px 12px; box-shadow: 0 20px 45px rgba(20,30,24,.2); animation: float-window 6s ease-in-out infinite; }
    .mobile-shell::before { content: ""; display: block; width: 34px; height: 4px; background: #101713; border-radius: 99px; margin: -10px auto 18px; }
    .mobile-shell i { display: block; height: 34px; background: #dbe8e4; border-radius: 3px; margin-top: 8px; }
    .terminal { height: 100%; border: 1px solid #3a443e; border-radius: 5px; padding: 20px; color: #b7c2bb; font-family: ui-monospace, monospace; font-size: 12px; }
    .terminal div { margin: 9px 0; }
    .terminal b { color: var(--lime); font-weight: 500; }
    .work-copy { padding: 26px; }
    .work-type { font-size: 12px; font-weight: 600; color: var(--blue); }
    .work-copy h2 { font-size: 30px; margin-top: 16px; }
    .work-copy p { color: var(--muted); margin: 13px 0 0; }

    .outcome-band { background: var(--blue-soft); }
    .outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .outcome-grid article { padding: 26px 0; border-top: 1px solid var(--blue); }
    .outcome-grid strong { font-family: "Manrope", sans-serif; font-size: 25px; font-weight: 500; }
    .outcome-grid p { color: var(--muted); margin: 11px 0 0; font-size: 14px; }

    .about-intro { background: var(--surface); }
    .statement { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; }
    .statement h2 { font-size: clamp(38px, 5vw, 64px); }
    .statement-copy { columns: 2; column-gap: 36px; color: var(--muted); font-size: 17px; }
    .statement-copy p { margin: 0 0 18px; break-inside: avoid; }
    .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; }
    .principle-card { padding: 28px; background: var(--bg); border-top: 3px solid var(--blue); min-height: 225px; }
    .principle-card b { color: var(--blue); font-size: 12px; }
    .principle-card h3 { font-size: 24px; margin-top: 48px; }
    .principle-card p { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

    .ownership { background: var(--bg); }
    .ownership-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 76px; align-items: start; }
    .ownership h2 { margin-top: 16px; }
    .repo { background: var(--surface-2); padding: 30px; border-radius: 6px; box-shadow: var(--shadow); }
    .repo-head { display: flex; justify-content: space-between; padding-bottom: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
    .repo-status { color: var(--ink); }
    .repo-status::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--lime); border-radius: 50%; margin-right: 7px; }
    .tree { list-style: none; padding: 0; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
    .tree li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 10px 0; color: var(--muted); }
    .tree strong { color: var(--ink); font-weight: 500; }

    .contact-stage { padding: 86px 0 110px; }
    .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
    .contact-main { background: var(--blue); color: #fff; padding: 48px; border-radius: 7px; min-height: 500px; display: flex; flex-direction: column; justify-content: space-between; }
    .contact-main h1 { font-size: clamp(46px, 6vw, 76px); margin: 0; max-width: 700px; }
    .contact-main p { color: rgba(255,255,255,.78); font-size: 18px; max-width: 580px; }
    .contact-note { font-size: 12px !important; margin: 14px 0 0 !important; }
    .contact-side { background: var(--surface); border: 1px solid var(--line); padding: 36px; border-radius: 7px; }
    .contact-side > p { color: var(--muted); margin: 13px 0 28px; }
    .brief-list { list-style: none; padding: 0; margin: 0; counter-reset: brief; }
    .brief-list li { counter-increment: brief; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
    .brief-list li::before { content: "0" counter(brief); color: var(--blue); font-size: 12px; font-weight: 600; padding-top: 3px; }
    .brief-list strong { display: block; font-size: 15px; }
    .brief-list span { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }



    /* Hero motion study: a product system in motion rather than a static dashboard. */
    .hero-visual-upgrade { min-height: 550px; perspective: 1100px; }
    .hero-visual-upgrade::before { inset: 72px 18px 34px 64px; background: color-mix(in srgb, var(--blue) 19%, var(--lime) 7%); filter: blur(42px); }
    .kinetic-frame { position: absolute; inset: 18px 0 20px 28px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #0d1836; color: #fff; box-shadow: 0 30px 74px rgba(9,24,64,.25); transform: rotateY(-1.5deg) rotateX(.7deg); transform-style: preserve-3d; }
    .kinetic-frame::before { content: ""; position: absolute; width: 330px; height: 330px; right: -105px; top: -105px; border-radius: 50%; background: #204fd1; filter: blur(1px); opacity: .74; }
    .kinetic-frame::after { content: ""; position: absolute; width: 190px; height: 190px; left: -70px; bottom: 32px; border-radius: 50%; background: var(--lime); filter: blur(1px); opacity: .15; }
    .kinetic-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 38px 38px; animation: grid-drift 12s linear infinite; }
    .orbit { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; pointer-events: none; }
    .orbit-one { width: 410px; height: 410px; right: -92px; top: -75px; animation: orbit-spin 18s linear infinite; }
    .orbit-two { width: 255px; height: 255px; left: -80px; bottom: -38px; animation: orbit-spin 13s linear reverse infinite; }
    .orbit-dot { position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px rgba(200,240,75,.85); }
    .build-system { position: absolute; z-index: 3; left: 58px; right: 42px; top: 88px; bottom: 76px; overflow: hidden; background: rgba(249,251,249,.96); color: #101713; border: 1px solid rgba(255,255,255,.68); border-radius: 9px; box-shadow: 0 28px 65px rgba(0,8,30,.34); animation: system-float 7s ease-in-out infinite; }
    .system-bar { height: 43px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #d7ddd8; color: #5b665f; font-size: 9px; font-weight: 700; letter-spacing: .08em; }
    .system-state { display: inline-flex; gap: 7px; align-items: center; color: #101713; letter-spacing: 0; }
    .system-state i { width: 7px; height: 7px; border-radius: 50%; background: #79aa13; animation: pulse 1.8s ease-out infinite; }
    .system-content { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 190px; }
    .system-copy { padding: 24px 18px; border-right: 1px solid #d7ddd8; }
    .system-copy > span, .flow-result > span { color: #69736d; font-size: 8px; font-weight: 700; letter-spacing: .1em; }
    .system-copy strong { display: block; margin-top: 13px; font: 600 23px/1.04 "Manrope", sans-serif; letter-spacing: -.05em; }
    .system-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 22px; }
    .system-tags b { padding: 5px 7px; border: 1px solid #d7ddd8; border-radius: 99px; font-size: 7px; font-weight: 600; }
    .system-flow { padding: 23px 18px 16px; }
    .flow-track { display: flex; align-items: center; }
    .flow-track > i { height: 1px; flex: 1; background: #c3cac5; position: relative; overflow: hidden; }
    .flow-track > i::after { content: ""; position: absolute; inset: 0; background: #1748c7; transform: translateX(-100%); animation: route-progress 3.4s ease-in-out infinite; }
    .flow-track > i:nth-of-type(2)::after { animation-delay: .6s; }
    .flow-node { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #c3cac5; border-radius: 50%; color: #69736d; font-size: 7px; font-weight: 700; background: #fff; }
    .flow-node.active { color: #fff; border-color: #1748c7; background: #1748c7; box-shadow: 0 0 0 5px rgba(23,72,199,.1); }
    .flow-result { margin-top: 25px; }
    .confidence-ring { width: 88px; height: 88px; margin: 12px auto 0; border-radius: 50%; padding: 9px; background: conic-gradient(#1748c7 0 82%, #dfe4e0 82% 100%); animation: ring-breathe 2.8s ease-in-out infinite; }
    .confidence-ring::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; background: #f9fbf9; }
    .confidence-ring b { position: absolute; margin: 28px 0 0 -65px; width: 70px; text-align: center; font: 600 10px/1 "Manrope", sans-serif; }
    .system-console { height: 57px; border-top: 1px solid #d7ddd8; background: #111713; color: #92a098; display: flex; align-items: center; gap: 15px; padding: 0 15px; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; }
    .system-console .console-active { color: var(--lime); }
    .signal { position: absolute; z-index: 2; width: 110px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent); transform-origin: left; }
    .signal i { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: signal-run 2.6s ease-in-out infinite; }
    .signal-one { left: 16px; top: 142px; transform: rotate(-20deg); }
    .signal-two { right: 44px; bottom: 102px; transform: rotate(24deg); }
    .signal-two i { animation-delay: .9s; }
    .service-float { position: absolute; z-index: 4; padding: 8px 11px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; background: rgba(13,24,54,.78); color: rgba(255,255,255,.84); backdrop-filter: blur(8px); font-size: 8px; font-weight: 700; letter-spacing: .08em; box-shadow: 0 8px 25px rgba(0,0,0,.18); }
    .service-web { left: 22px; top: 220px; animation: label-float 5s ease-in-out infinite; }
    .service-ai { right: 14px; top: 148px; animation: label-float 5.8s ease-in-out .8s infinite; }
    .service-mobile { right: 28px; bottom: 88px; animation: label-float 6.2s ease-in-out 1.4s infinite; }
    .kinetic-ticker { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 39px; overflow: hidden; display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.18); background: rgba(8,15,34,.72); }
    .kinetic-ticker div { display: flex; width: max-content; gap: 17px; align-items: center; white-space: nowrap; color: rgba(255,255,255,.62); font-size: 8px; font-weight: 700; letter-spacing: .11em; animation: ticker-slide 13s linear infinite; }
    .kinetic-ticker b { color: var(--lime); font-size: 12px; }
    .idea-card { position: absolute; z-index: 6; left: 0; top: 0; width: 220px; padding: 16px 17px; border-radius: 7px; background: color-mix(in srgb, var(--surface) 95%, transparent); border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); box-shadow: 0 16px 40px rgba(14,28,21,.15); backdrop-filter: blur(14px); animation: drift 6s ease-in-out infinite; }
    .idea-card small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 6px; }
    .idea-card strong { font: 600 15px/1.2 "Manrope", sans-serif; letter-spacing: -.025em; }
    .secure-card-upgrade { right: -12px; bottom: 0; width: 190px; }

    @keyframes grid-drift { to { background-position: 38px 38px, 38px 38px; } }
    @keyframes orbit-spin { to { transform: rotate(360deg); } }
    @keyframes system-float { 0%,100% { transform: translateY(0) rotate(-.25deg); } 50% { transform: translateY(-7px) rotate(.25deg); } }
    @keyframes route-progress { 0%, 18% { transform: translateX(-100%); } 64%, 100% { transform: translateX(100%); } }
    @keyframes ring-breathe { 0%,100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.045); } }
    @keyframes signal-run { 0% { left: 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
    @keyframes label-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes ticker-slide { to { transform: translateX(-50%); } }

    /* Motion language carried through the site: quiet reveals, active systems, useful depth. */
    .service-summary article { position: relative; overflow: hidden; }
    .service-summary article::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
    .service-summary article:hover::after { transform: scaleX(1); }
    .service-summary article svg { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
    .service-summary article:hover svg { transform: translateY(-5px) rotate(-4deg); }
    .fit-card { position: relative; overflow: hidden; transition: background .35s ease, transform .35s ease; }
    .fit-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -90px; bottom: -90px; border: 1px solid color-mix(in srgb, var(--lime) 35%, transparent); border-radius: 50%; transition: transform .65s ease; }
    .fit-card:hover { transform: translateY(-4px); background: color-mix(in srgb, var(--bg) 10%, transparent); }
    .fit-card:hover::after { transform: scale(1.55); }
    .step { position: relative; overflow: hidden; }
    .step::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 1px; background: var(--lime); animation: step-scan 5.2s ease-in-out infinite; }
    .step:nth-child(2)::after { animation-delay: .5s; }.step:nth-child(3)::after { animation-delay: 1s; }.step:nth-child(4)::after { animation-delay: 1.5s; }.step:nth-child(5)::after { animation-delay: 2s; }
    .work-card { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
    .work-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
    .work-card:hover .mock-window, .work-card:hover .mobile-shell { animation-duration: 3s; }
    .work-card:hover .node { animation-duration: 1.6s; }
    .principle-card { position: relative; overflow: hidden; transition: transform .4s ease; }
    .principle-card::after { content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 3px; background: var(--lime); transform: translateX(-105%); transition: transform .55s ease; }
    .principle-card:hover { transform: translateY(-5px); }
    .principle-card:hover::after { transform: translateX(0); }
    .repo { position: relative; overflow: hidden; }
    .repo::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; top: -1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: repo-scan 5.6s ease-in-out infinite; }
    .contact-main { position: relative; overflow: hidden; isolation: isolate; }
    .contact-main::before { content: ""; position: absolute; z-index: -1; width: 440px; height: 440px; right: -210px; top: -230px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.035), 0 0 0 110px rgba(255,255,255,.025); animation: contact-orbit 12s ease-in-out infinite alternate; }
    .closing-inner { position: relative; overflow: hidden; }
    .closing-inner::after { content: ""; position: absolute; width: 160px; height: 160px; right: -90px; top: -90px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 35px rgba(255,255,255,.035); animation: contact-orbit 9s ease-in-out infinite alternate; pointer-events: none; }
    @keyframes step-scan { 0%,16% { left: -60%; opacity: 0; } 28% { opacity: 1; } 72% { left: 115%; opacity: 1; } 73%,100% { opacity: 0; } }
    @keyframes repo-scan { 0%,12% { top: 0; opacity: 0; } 22% { opacity: 1; } 72% { top: 100%; opacity: .75; } 73%,100% { opacity: 0; } }
    @keyframes contact-orbit { from { transform: translate3d(0,0,0) rotate(0); } to { transform: translate3d(-34px,28px,0) rotate(18deg); } }

    @keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,240,75,.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(200,240,75,0); } }
    @keyframes progress-fill { from { filter: saturate(.5); } to { filter: saturate(1.35); } }
    @keyframes float-window { 0%,100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-6px) rotate(.35deg); } }
    @keyframes visual-breathe { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(1.09); } }
    @keyframes draw-line { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
    @keyframes scan { 0%, 12% { top: 0; opacity: 0; } 18% { opacity: 1; } 70% { top: 100%; opacity: .8; } 71%, 100% { top: 100%; opacity: 0; } }
    @keyframes node-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }

    /* A deliberately kinetic home experience: motion communicates how the studio works. */
    .scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
    .scroll-progress i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left center; will-change: transform; }
    .hero { min-height: calc(100svh - 72px); display: grid; align-items: center; padding-top: 46px; }
    .hero-grid { min-height: 560px; }
    .kinetic-heading { font-size: clamp(46px, 6.1vw, 78px); letter-spacing: -.06em; }
    .kinetic-heading > span { display: block; }
    .kinetic-heading > span:first-child { color: var(--muted); }
    .cycle-words { position: relative; display: inline-grid; min-width: 8.7em; color: var(--blue); vertical-align: bottom; }
    .cycle-words b { grid-area: 1/1; font-weight: 600; opacity: 0; transform: translateY(.45em) rotate(2deg); animation: word-swap 9s cubic-bezier(.2,.75,.2,1) infinite; }
    .cycle-words b:nth-child(2) { animation-delay: 3s; }
    .cycle-words b:nth-child(3) { animation-delay: 6s; }
    @keyframes word-swap { 0% { opacity: 0; transform: translateY(.5em) rotate(2deg); } 7%,27% { opacity: 1; transform: none; } 34%,100% { opacity: 0; transform: translateY(-.45em) rotate(-1deg); } }

    .motion-ribbon { width: 100%; overflow: hidden; background: var(--lime); color: #101713; border-block: 1px solid rgba(16,23,19,.2); transform: rotate(-1.15deg) scale(1.03); transform-origin: center; }
    .motion-ribbon div { display: flex; align-items: center; gap: 28px; width: max-content; min-width: 200%; height: 54px; white-space: nowrap; animation: ribbon-run 18s linear infinite; }
    .motion-ribbon span { font: 700 12px/1 "Manrope", sans-serif; letter-spacing: .09em; }
    .motion-ribbon b { font-size: 13px; color: var(--blue); }
    @keyframes ribbon-run { to { transform: translateX(-50%); } }

    .motion-story { padding: 128px 0 150px; background: #0d1733; color: #fff; overflow: clip; }
    .story-intro { display: grid; grid-template-columns: .58fr 1.42fr; gap: 48px; margin-bottom: 82px; }
    .story-intro > span { padding-top: 9px; color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
    .story-intro h2 { max-width: 900px; font-size: clamp(42px, 6vw, 72px); }
    .story-layout { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(290px, .82fr); gap: clamp(44px, 7vw, 110px); align-items: start; }
    .story-visual-wrap { min-height: 2080px; }
    .story-visual { position: sticky; top: 116px; height: min(68vh, 610px); min-height: 480px; overflow: visible; }
    .story-canvas { position: absolute; inset: 0; }
    .story-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 164px; height: 164px; margin: -82px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #101713; box-shadow: 0 0 0 22px rgba(200,240,75,.08), 0 0 0 58px rgba(200,240,75,.035); transition: border-radius .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), background .5s ease; }
    .story-core::before, .story-core::after { content: ""; position: absolute; inset: -36px; border: 1px solid rgba(255,255,255,.18); border-radius: inherit; animation: core-spin 13s linear infinite; }
    .story-core::after { inset: -78px; border-style: dashed; animation-direction: reverse; animation-duration: 20s; }
    .story-core span { text-align: center; font: 700 15px/1.15 "Manrope", sans-serif; letter-spacing: -.02em; }
    .story-core b { position: absolute; top: -41px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px rgba(200,240,75,.9); }
    @keyframes core-spin { to { transform: rotate(360deg); } }
    .story-node { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font: 700 9px/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: all .7s cubic-bezier(.2,.8,.2,1); }
    .story-node i { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; background: #111e42; box-shadow: 0 0 0 6px rgba(255,255,255,.03); }
    .node-a { left: 8%; top: 14%; }.node-b { right: 8%; top: 19%; }.node-c { left: 12%; bottom: 14%; }.node-d { right: 9%; bottom: 16%; }
    .noise-line { position: absolute; z-index: 2; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform-origin: left; transition: all .8s cubic-bezier(.2,.8,.2,1); }
    .noise-line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: signal-run 2.7s ease-in-out infinite; }
    .noise-a { width: 44%; left: 10%; top: 28%; transform: rotate(18deg); }.noise-b { width: 38%; right: 7%; top: 34%; transform: rotate(150deg); }.noise-c { width: 50%; left: 12%; bottom: 25%; transform: rotate(-14deg); }
    .noise-b::after { animation-delay: .8s; }.noise-c::after { animation-delay: 1.4s; }
    .system-spine { position: absolute; z-index: 1; left: 50%; top: 7%; width: 1px; height: 86%; background: linear-gradient(transparent, rgba(200,240,75,.7), transparent); transform: scaleY(0); transition: transform .8s ease; }
    .story-pulse { position: absolute; width: 120px; height: 120px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; animation: pulse-orbit 8s ease-in-out infinite alternate; }
    .pulse-a { left: -45px; top: 18%; }.pulse-b { right: -34px; bottom: 12%; animation-delay: -3s; }
    @keyframes pulse-orbit { to { transform: translate(45px, 75px) scale(1.7) rotate(35deg); border-radius: 20%; } }

    .story-steps { padding-top: 130px; }
    .story-step { min-height: 420px; padding: 36px 0; border-top: 1px solid rgba(255,255,255,.18); opacity: .65; transform: translateX(34px); transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
    .story-step.active { opacity: 1; transform: none; }
    .story-step > span { color: var(--lime); font: 700 11px/1 "Manrope", sans-serif; letter-spacing: .12em; }
    .story-step h3 { max-width: 370px; margin-top: 80px; font-size: clamp(31px, 4vw, 48px); letter-spacing: -.05em; }
    .story-step p { max-width: 410px; color: rgba(255,255,255,.76); font-size: 17px; margin: 20px 0 0; }
    .story-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.38); padding-bottom: 4px; }
    .story-link:hover, .story-link:focus-visible { color: var(--lime); border-color: var(--lime); }

    .story-visual[data-story-stage="1"] .story-core { border-radius: 50%; }
    .story-visual[data-story-stage="2"] .story-core { width: 112px; height: 188px; margin: -94px -56px; border-radius: 24px; transform: rotate(-4deg); background: #fff; box-shadow: 0 0 0 9px rgba(255,255,255,.07), 0 28px 60px rgba(0,0,0,.3); }
    .story-visual[data-story-stage="2"] .story-core::before { inset: 10px; border-radius: 16px; border-color: rgba(13,23,51,.18); }
    .story-visual[data-story-stage="2"] .story-core::after { inset: -38px; }
    .story-visual[data-story-stage="2"] .story-core span { transform: rotate(4deg); }
    .story-visual[data-story-stage="2"] .story-node { color: var(--lime); }
    .story-visual[data-story-stage="2"] .noise-line { opacity: .35; }
    .story-visual[data-story-stage="3"] .system-spine { transform: scaleY(1); }
    .story-visual[data-story-stage="3"] .story-core { border-radius: 30%; transform: scale(.83) rotate(45deg); background: #fff; box-shadow: 0 0 0 22px rgba(23,72,199,.14), 0 0 0 58px rgba(23,72,199,.07); }
    .story-visual[data-story-stage="3"] .story-core span { transform: rotate(-45deg); }
    .story-visual[data-story-stage="3"] .story-node { padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(13,23,51,.82); }
    .story-visual[data-story-stage="3"] .node-a { left: 13%; top: 13%; }.story-visual[data-story-stage="3"] .node-b { right: 13%; top: 13%; }.story-visual[data-story-stage="3"] .node-c { left: 13%; bottom: 13%; }.story-visual[data-story-stage="3"] .node-d { right: 13%; bottom: 13%; }
    .story-visual[data-story-stage="4"] .story-core { border-radius: 8px; transform: scale(.78); background: var(--lime); box-shadow: 0 0 0 22px rgba(200,240,75,.13), 0 0 0 58px rgba(200,240,75,.055); }
    .story-visual[data-story-stage="4"] .story-core::before { inset: -58px; border-color: rgba(200,240,75,.5); }
    .story-visual[data-story-stage="4"] .story-node i { background: var(--lime); border-color: var(--lime); }
    .story-visual[data-story-stage="4"] .noise-line { transform: rotate(0); top: 50%; bottom: auto; opacity: .7; }

    /* Each service now has its own visual language, synced to the matching copy on the right. */
    .service-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .45s ease, transform .75s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
    .story-visual[data-story-stage="1"] .scene-web,
    .story-visual[data-story-stage="2"] .scene-mobile,
    .story-visual[data-story-stage="3"] .scene-ai,
    .story-visual[data-story-stage="4"] .scene-quality { opacity: 1; transform: none; }
    .ui-label { color: #6b756f; font: 700 8px/1 "Manrope", sans-serif; letter-spacing: .12em; }
    .scene-chip { position: absolute; z-index: 5; padding: 8px 11px; color: var(--lime); border: 1px solid rgba(200,240,75,.34); background: rgba(8,15,34,.9); font: 700 8px/1 "Manrope", sans-serif; letter-spacing: .1em; }

    .service-status-strip { position: absolute; z-index: 8; left: 10%; right: 8%; bottom: 4%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .service-status { min-width: 0; color: rgba(255,255,255,.7); font: 700 7px/1 "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; transition: color .35s ease; }
    .service-status i { display: block; height: 2px; margin-top: 8px; overflow: hidden; background: rgba(255,255,255,.14); }
    .service-status i::after { content: ""; display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left center; }
    .story-visual[data-story-stage="1"] .service-status:nth-child(1),
    .story-visual[data-story-stage="2"] .service-status:nth-child(2),
    .story-visual[data-story-stage="3"] .service-status:nth-child(3),
    .story-visual[data-story-stage="4"] .service-status:nth-child(4) { color: #fff; }
    .story-visual[data-story-stage="1"] .service-status:nth-child(1) i::after,
    .story-visual[data-story-stage="2"] .service-status:nth-child(2) i::after,
    .story-visual[data-story-stage="3"] .service-status:nth-child(3) i::after,
    .story-visual[data-story-stage="4"] .service-status:nth-child(4) i::after { animation: status-progress 2.2s cubic-bezier(.2,.75,.2,1) both; }

    .web-browser { position: absolute; left: 13%; right: 9%; top: 22%; bottom: 17%; overflow: hidden; border: 1px solid rgba(255,255,255,.64); background: #f8faf8; color: #101713; box-shadow: 0 26px 58px rgba(0,0,0,.32); transform: rotate(-1.5deg); animation: web-window-float 5.8s ease-in-out infinite; }
    .web-browser-bar { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 5px; color: #55625a; border-bottom: 1px solid #d7ddd8; font: 600 7px/1 "Manrope", sans-serif; }
    .web-browser-bar i { width: 5px; height: 5px; border-radius: 50%; background: #bdc6c0; }
    .web-browser-bar span { margin-left: auto; }
    .web-browser-body { display: grid; grid-template-columns: 56px 1fr; height: calc(100% - 36px); }
    .web-side { padding: 16px 12px; border-right: 1px solid #d7ddd8; background: #edf1ee; }
    .web-side b { display: block; width: 20px; height: 20px; margin-bottom: 25px; background: #1748c7; }
    .web-side i { display: block; width: 28px; height: 4px; margin: 0 0 15px; border-radius: 9px; background: #c8cfca; }
    .web-side i:first-of-type { background: #1748c7; }
    .web-main { padding: 22px; }
    .web-main strong { display: block; margin-top: 9px; font: 600 22px/1 "Manrope", sans-serif; letter-spacing: -.04em; }
    .web-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 22px; }
    .web-cards i { height: 38px; border: 1px solid #d7ddd8; background: #fff; }
    .web-cards i:nth-child(2) { background: #e8eeff; }
    .web-chart { position: relative; height: 58px; margin-top: 9px; overflow: hidden; border: 1px solid #d7ddd8; background: repeating-linear-gradient(to bottom,#fff 0 18px,#e5e9e6 19px); }
    .web-chart b { position: absolute; left: 9%; right: 7%; bottom: 9px; height: 38px; border: 2px solid #1748c7; border-width: 0 0 2px 2px; transform: skewY(-10deg); transform-origin: right bottom; animation: chart-rise 2.6s ease-in-out infinite alternate; }
    .chip-one { left: 7%; top: 17%; animation: chip-float 4s ease-in-out infinite; }
    .chip-two { right: 3%; bottom: 13%; animation: chip-float 4.8s ease-in-out .7s infinite; }
    .web-cursor { position: absolute; z-index: 6; left: 69%; top: 57%; color: #1748c7; font-size: 23px; text-shadow: 0 4px 12px rgba(23,72,199,.24); animation: cursor-tour 4s ease-in-out infinite; }

    .phone { position: absolute; overflow: hidden; color: #101713; border: 5px solid #111713; border-radius: 25px; background: #f8faf8; box-shadow: 0 28px 58px rgba(0,0,0,.32); }
    .phone-speaker { width: 34px; height: 4px; margin: 7px auto 21px; border-radius: 99px; background: #111713; }
    .phone-back { width: 150px; height: 282px; left: 18%; top: 21%; padding: 9px 15px; transform: rotate(-9deg); opacity: .74; animation: phone-back-float 6s ease-in-out infinite; }
    .phone-front { width: 174px; height: 320px; right: 18%; top: 13%; padding: 9px 17px; transform: rotate(5deg); animation: phone-front-float 6s ease-in-out .5s infinite; }
    .phone-back > i { display: block; height: 38px; margin-top: 9px; border-radius: 5px; background: #dce6e0; }
    .phone-back > i:nth-of-type(2) { background: #e8eeff; }
    .phone-back > b { display: block; width: max-content; margin: 18px auto 0; padding: 6px 8px; color: #3b5600; background: #dff892; font: 700 7px/1 "Manrope", sans-serif; }
    .phone-front strong { display: block; margin: 12px 0 20px; font: 600 20px/1.08 "Manrope", sans-serif; letter-spacing: -.04em; }
    .mobile-action { height: 74px; background: #1748c7; position: relative; }
    .mobile-action::after { content: "UPDATE JOB"; position: absolute; left: 13px; bottom: 12px; color: #fff; font: 700 8px/1 "Manrope", sans-serif; letter-spacing: .08em; }
    .mobile-row { height: 32px; margin-top: 10px; border: 1px solid #d7ddd8; background: #fff; }
    .mobile-row.short { width: 72%; }
    .mobile-signal { position: absolute; left: 50%; bottom: 10%; display: flex; gap: 5px; align-items: end; }
    .mobile-signal i { width: 5px; height: 13px; background: var(--lime); animation: mobile-signal 1.4s ease-in-out infinite alternate; }
    .mobile-signal i:nth-child(2) { height: 21px; animation-delay: .2s; }.mobile-signal i:nth-child(3) { height: 29px; animation-delay: .4s; }

    .ai-node { position: absolute; z-index: 4; min-width: 132px; padding: 14px 16px; color: #101713; background: #fff; border: 1px solid rgba(255,255,255,.65); box-shadow: 0 16px 34px rgba(0,0,0,.24); }
    .ai-node span { color: #1748c7; font: 700 8px/1 "Manrope", sans-serif; }
    .ai-node strong { display: block; margin-top: 7px; font: 600 13px/1.1 "Manrope", sans-serif; }
    .ai-input { left: 8%; top: 20%; }.ai-review { right: 7%; top: 19%; }.ai-action { right: 13%; bottom: 16%; }
    .ai-engine { position: absolute; z-index: 5; left: 50%; top: 52%; width: 126px; height: 126px; margin: -63px; display: grid; place-items: center; border-radius: 50%; color: #101713; background: var(--lime); box-shadow: 0 0 0 18px rgba(200,240,75,.09), 0 0 0 42px rgba(200,240,75,.04); }
    .ai-engine::before, .ai-engine::after { content: ""; position: absolute; inset: -25px; border: 1px dashed rgba(255,255,255,.34); border-radius: 50%; animation: core-spin 12s linear infinite; }
    .ai-engine::after { inset: -51px; animation-direction: reverse; animation-duration: 17s; }
    .ai-engine span { font: 700 27px/1 "Manrope", sans-serif; }
    .ai-engine b { position: absolute; right: 7px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #1748c7; box-shadow: 0 0 15px rgba(23,72,199,.7); animation: pulse 1.6s ease-out infinite; }
    .ai-route { position: absolute; z-index: 2; height: 1px; background: rgba(255,255,255,.4); transform-origin: left center; }
    .ai-route i { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: signal-run 2.2s ease-in-out infinite; }
    .scene-ai .route-a { width: 40%; left: 24%; top: 34%; transform: rotate(17deg); }.scene-ai .route-b { width: 35%; left: 58%; top: 47%; transform: rotate(-22deg); }.scene-ai .route-c { width: 35%; left: 52%; top: 60%; transform: rotate(27deg); }
    .scene-ai .route-b i { animation-delay: .55s; }.scene-ai .route-c i { animation-delay: 1.1s; }
    .scene-ai > p { position: absolute; left: 8%; bottom: 16%; margin: 0; color: rgba(255,255,255,.66); font-size: 11px; }

    .quality-panel { position: absolute; left: 11%; right: 9%; top: 17%; bottom: 13%; overflow: hidden; border: 1px solid rgba(255,255,255,.25); background: #0a1228; box-shadow: 0 26px 58px rgba(0,0,0,.31); }
    .quality-head { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: rgba(255,255,255,.58); border-bottom: 1px solid rgba(255,255,255,.14); font: 700 8px/1 "Manrope", sans-serif; letter-spacing: .1em; }
    .quality-head b { color: var(--lime); }
    .quality-row { height: 51px; padding: 0 18px; display: grid; grid-template-columns: 1fr 72px 38px; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.76); font-size: 10px; }
    .quality-row i { height: 3px; overflow: hidden; background: rgba(255,255,255,.12); }
    .quality-row i::after { content: ""; display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: left; animation: quality-pass 2.8s ease-in-out infinite; }
    .quality-row:nth-child(3) i::after { animation-delay: .35s; }.quality-row:nth-child(4) i::after { animation-delay: .7s; }
    .quality-row b { color: var(--lime); font: 700 8px/1 "Manrope", sans-serif; }
    .quality-release { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 21px; color: #fff; }
    .release-ring { width: 72px; height: 72px; padding: 7px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--lime) 0 100%,rgba(255,255,255,.12) 100%); animation: ring-breathe 2.8s ease-in-out infinite; }
    .release-ring::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; background: #0a1228; }
    .release-ring span { position: relative; z-index: 2; font: 700 11px/1 "Manrope", sans-serif; }
    .quality-release strong { font: 600 16px/1.1 "Manrope", sans-serif; }
    .quality-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--lime),transparent); box-shadow: 0 0 15px rgba(200,240,75,.7); animation: quality-scan 4s ease-in-out infinite; }

    @keyframes web-window-float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(.5deg); } }
    @keyframes chart-rise { from { transform: skewY(-4deg) scaleY(.55); } to { transform: skewY(-13deg) scaleY(1); } }
    @keyframes chip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes cursor-tour { 0%,100% { transform: translate(-28px,25px); } 45% { transform: translate(22px,-18px); } 70% { transform: translate(4px,8px) scale(.86); } }
    @keyframes phone-back-float { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-10px) rotate(-6deg); } }
    @keyframes phone-front-float { 0%,100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(9px) rotate(2deg); } }
    @keyframes mobile-signal { to { opacity: .36; transform: scaleY(.7); } }
    @keyframes quality-pass { 0%,18% { transform: scaleX(0); } 62%,100% { transform: scaleX(1); } }
    @keyframes quality-scan { 0%,14% { top: 0; opacity: 0; } 25% { opacity: 1; } 76% { top: 100%; opacity: .75; } 77%,100% { opacity: 0; } }
    @keyframes status-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .reveal { opacity: 0; transform: translateY(34px); transition: opacity .75s ease, transform .85s cubic-bezier(.2,.75,.2,1); }
    .reveal.in-view { opacity: 1; transform: none; }
    .service-summary article.reveal:nth-child(2), .principle-card.reveal:nth-child(2) { transition-delay: .08s; }
    .service-summary article.reveal:nth-child(3), .principle-card.reveal:nth-child(3) { transition-delay: .16s; }
    .service-summary article.reveal:nth-child(4) { transition-delay: .24s; }
    .parallax-ready .kinetic-frame { transition: transform .18s ease-out; will-change: transform; }

    @media (prefers-color-scheme: light) {
      .page-head, .services-list, .outcome-band, .about-intro, .ownership, .contact-side { --lime: var(--lime-on-light); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
    }
    @media (max-width: 900px) {
      .hero-grid, .section-top, .page-head-grid, .statement, .ownership-grid, .closing-inner, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
      .work-showcase { grid-template-columns: 1fr 1fr; }
      .showcase-card.wide { grid-template-columns: .72fr 1.28fr; }
      .hero { min-height: auto; }
      .hero-visual { min-height: 470px; }
      .story-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); gap: 28px; }
      .story-visual-wrap { min-height: 1900px; }
      .story-visual { height: 540px; }
      .story-step { min-height: 390px; }
      .visual-frame { inset: 22px 0 24px 32px; }
      .service-summary { grid-template-columns: 1fr 1fr; }
      .service-summary article:nth-child(2) { border-right: 0; }
      .service-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .service-row { grid-template-columns: 62px 1fr; }
      .service-detail { grid-column: 2; }
      .steps { grid-template-columns: repeat(3, 1fr); }
      .step:nth-child(3) { border-right: 0; }
      .step:nth-child(-n+3) { border-bottom: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
      .statement-copy { columns: 1; }
    }
    @media (max-width: 680px) {
      .wrap { width: min(100% - 28px, var(--max)); }
      .nav-inner { min-height: 64px; }
      .menu-button { display: grid; }
      .nav-links { display: none; position: absolute; top: 64px; left: 14px; right: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 6px; flex-direction: column; align-items: stretch; }
      .nav-links.open { display: flex; }
      .nav-link { min-height: 44px; display: flex; align-items: center; }
      .nav-cta { margin-left: 8px; }
      .hero { padding: 44px 0 36px; }
      h1 { font-size: clamp(44px, 13.5vw, 62px); }
      .kinetic-heading { font-size: clamp(42px, 12.5vw, 58px); }
      .cycle-words { display: grid; min-width: 0; min-height: 1.08em; }
      .hero-copy, .page-head-copy { font-size: 17px; }
      .motion-ribbon div { height: 48px; gap: 22px; }
      .motion-story { padding: 92px 0 100px; }
      .story-intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
      .story-layout { display: grid; grid-template-columns: 1fr; gap: 0; }
      .story-visual-wrap, .story-steps { grid-area: 1 / 1; }
      .story-visual-wrap { min-height: 100%; height: 100%; }
      .story-visual { top: 82px; height: 58vh; min-height: 400px; }
      .story-steps { position: relative; z-index: 3; padding: 40vh 10px 18vh; }
      .story-step { min-height: 68vh; margin-left: 8%; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(255,255,255,.2); background: rgba(8,15,34,.9); box-shadow: 0 18px 45px rgba(0,0,0,.23); opacity: .65; transform: translateX(22px); }
      .story-step.active { opacity: 1; }
      .story-step h3 { margin-top: 48px; font-size: 34px; }
      .story-step p { font-size: 15px; }
      .story-core { width: 130px; height: 130px; margin: -65px; }
      .story-node { font-size: 7px; }
      .story-node i { width: 14px; height: 14px; }
      .noise-a { left: 4%; }.noise-c { left: 2%; }
      .kinetic-grid, .orbit-one, .orbit-two { animation: none; }
      .reveal { transform: translateY(22px); }
      .hero-visual { min-height: 390px; margin-top: 8px; }
      .hero-visual::before { inset: 65px 18px 42px 44px; }
      .visual-frame { inset: 28px 0 18px 18px; }
      .visual-topbar { height: 43px; padding: 0 12px; font-size: 8px; }
      .visual-stage { inset: 43px 0 0; }
      .product-window { inset: 48px 16px 48px 24px; grid-template-columns: 42px 1fr; }
      .product-sidebar { padding: 14px 9px; }
      .product-mark { width: 22px; height: 22px; margin-bottom: 22px; }
      .side-item { width: 21px; margin-bottom: 14px; }
      .product-main { padding: 14px 12px; }
      .product-action { width: 54px; }
      .product-kpis { gap: 5px; margin-top: 15px; }
      .product-kpi { padding: 7px 6px; }
      .product-kpi b { font-size: 9px; }
      .product-board { height: 88px; gap: 5px; margin-top: 6px; }
      .product-chart, .product-list { padding: 8px; }
      .chart-grid { height: 48px; margin-top: 9px; }
      .product-list i { height: 13px; margin-top: 6px; }
      .build-card { width: 184px; padding: 13px; }
      .build-card strong { font-size: 14px; }
      .delivery-steps { margin-top: 10px; }
      .secure-card { right: -2px; width: 176px; padding: 13px; }
      .live-chip { left: 30px; bottom: 31px; font-size: 10px; }
      .hero-visual-upgrade { min-height: 438px; }
      .kinetic-frame { inset: 25px 0 19px 12px; transform: none; }
      .kinetic-frame::before { width: 220px; height: 220px; right: -88px; top: -72px; }
      .orbit-one { width: 280px; height: 280px; right: -92px; top: -40px; }
      .orbit-two { width: 190px; height: 190px; }
      .build-system { left: 31px; right: 20px; top: 82px; bottom: 65px; }
      .system-content { grid-template-columns: .9fr 1.1fr; min-height: 166px; }
      .system-copy, .system-flow { padding: 18px 11px 12px; }
      .system-copy strong { font-size: 18px; }
      .system-tags { margin-top: 16px; }
      .confidence-ring { width: 68px; height: 68px; margin-top: 9px; padding: 7px; }
      .confidence-ring b { margin: 21px 0 0 -53px; width: 56px; font-size: 8px; }
      .system-console { gap: 10px; padding: 0 10px; font-size: 6px; }
      .idea-card { width: 187px; padding: 13px; }
      .idea-card strong { font-size: 13px; }
      .secure-card-upgrade { right: -1px; bottom: 0; width: 166px; }
      .service-web { left: 15px; top: 207px; }
      .service-ai { right: 4px; top: 144px; }
      .service-mobile { display: none; }
      .signal-two { right: 24px; bottom: 84px; }
      .benefit-strip { margin-top: 42px; grid-template-columns: 1fr; }
      .benefit { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0; }
      .benefit:last-child { border-bottom: 0; }
      section { padding: 76px 0; }
      .section-top { margin-bottom: 36px; }
      .service-summary, .fit-grid, .work-grid, .outcome-grid, .principles, .work-showcase { grid-template-columns: 1fr; }
      .showcase-card, .showcase-card.wide { grid-column: auto; min-height: 480px; display: flex; }
      .showcase-card.wide .showcase-visual { order: initial; min-height: 310px; }
      .showcase-copy { padding: 25px 23px; }
      .showcase-card h3 { font-size: 31px; }
      .ops-window { left: 7%; right: -16%; }
      .field-device { right: 7%; }
      .field-card { left: 4%; width: 165px; }
      .service-summary article, .service-summary article:not(:first-child) { padding: 24px 0; min-height: 235px; border-right: 0; border-bottom: 1px solid var(--line); }
      .service-summary svg { margin-bottom: 38px; }
      .fit-card { padding: 26px; }
      .page-head { padding: 54px 0 52px; }
      .service-row { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
      .service-detail { grid-column: auto; }
      .steps { grid-template-columns: 1fr; }
      .step, .step:not(:first-child) { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 22%, transparent); }
      .step h3 { margin-top: 24px; }
      .work-visual { height: 255px; padding: 24px; }
      .work-copy { padding: 22px; }
      .statement-copy { font-size: 16px; }
      .principles { margin-top: 38px; }
      .contact-stage { padding: 48px 0 78px; }
      .contact-main { min-height: 460px; padding: 30px 24px; }
      .contact-side { padding: 28px 22px; }
      .repo { padding: 22px; }
      .repo-head { align-items: flex-start; gap: 12px; }
      .tree li { grid-template-columns: 1fr; gap: 2px; }
      .closing-inner { padding: 34px 24px; }
    }

/* ============================================================
   MULTI-PAGE ADDITIONS — shared chrome, logo, forms, work images
   ============================================================ */
/* Official logo in the nav */
.nav-brand{display:inline-flex;align-items:center;line-height:0}
.nav-brand img{height:30px;width:auto;display:block}
/* Real project images inside work cards */
.work-visual.work-visual-img{padding:0}
.work-visual.work-visual-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work-card:hover .work-visual-img img{transform:scale(1.04)}
/* Contact form — concept design language */
.contact-form{display:grid;gap:18px;margin-top:34px}
.field{display:grid;gap:8px}
.field label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.field input,.field select,.field textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:6px;padding:14px 16px;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field .hint{font-size:13px;color:var(--muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-error{font-size:13px;font-weight:600;color:#b3261e;display:none}
.form-error.show{display:block}
.form-status{border-radius:6px;padding:16px 18px;font-size:15px;display:none}
.form-status.show{display:block}
.form-status.ok{background:#e7f6e7;color:#1d5c1d;border:1px solid #bfe3bf}
.form-status.err{background:#fdecea;color:#b3261e;border:1px solid #f5c6c2}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
/* 404 page */
.notfound-stage{padding:120px 0 90px;text-align:left}
.notfound-stage h1{font-size:clamp(72px,12vw,160px);line-height:1;margin:0}
.notfound-stage p{color:var(--muted);font-size:19px;max-width:560px}

/* Smart header: fixed, hides on scroll-down, returns on scroll-up. */
.site-nav{position:fixed;top:0;left:0;right:0;transition:transform .38s cubic-bezier(.2,.7,.2,1);will-change:transform}
.site-nav.nav-hidden{transform:translateY(-110%)}
body{padding-top:72px}
/* Logo left, nav items right. */
.nav-inner{justify-content:flex-start}
.nav-brand{margin-right:auto}
/* Redesigned Premium Agency Footer */
.site-footer{background:#0b0f0c;border-top:1px solid rgba(255,255,255,.08);padding:72px 0 36px;color:rgba(255,255,255,.72);font-size:14px}
.site-footer .wrap{display:block}
.site-footer ul,.site-footer ol,.site-footer li{list-style:none;margin:0;padding:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:48px;align-items:start}
.footer-col{min-width:0}
.footer-col-brand{padding-right:20px}
.footer-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.footer-brand img{height:28px;width:22px;display:block;flex-shrink:0}
.footer-brand-name{font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.025em;color:#fff}
.footer-tagline{margin:16px 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.62);max-width:320px}
.footer-status{display:inline-flex;align-items:center;gap:9px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:500;color:rgba(255,255,255,.88);margin-top:18px;letter-spacing:-.01em}
.footer-status .status-dot{width:7px;height:7px;border-radius:50%;background:#30b26e;box-shadow:0 0 0 3px rgba(48,178,110,.28);animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
.footer-contact-direct{margin-top:22px;display:flex;flex-direction:column;gap:4px}
.footer-direct-label{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.4)}
.footer-email-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#fff;text-decoration:none;transition:color .18s ease;word-break:break-word}
.footer-email-link:hover,.footer-email-link:focus-visible{color:var(--lime,#c8ef59)}
.footer-heading{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.42);margin-bottom:18px}
.footer-nav{display:flex;flex-direction:column;gap:11px}
.footer-nav a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.68);text-decoration:none;font-size:14px;line-height:1.4;transition:color .18s ease,transform .18s ease}
.footer-nav a:hover,.footer-nav a:focus-visible{color:#fff;transform:translateX(2px)}
.footer-sub-link{color:rgba(255,255,255,.48)!important;font-size:13px!important;font-weight:500;margin-top:4px}
.footer-sub-link:hover,.footer-sub-link:focus-visible{color:var(--lime,#c8ef59)!important}
.footer-social-links a{display:inline-flex;align-items:center;gap:10px}
.footer-social-links svg{width:16px;height:16px;flex-shrink:0;color:rgba(255,255,255,.55);display:block;transition:color .18s ease,transform .18s ease}
.footer-social-links a:hover svg{color:#fff;transform:scale(1.1)}
.footer-social-links .ext-arrow{font-size:12px;opacity:.4;transition:opacity .18s ease,transform .18s ease}
.footer-social-links a:hover .ext-arrow{opacity:1;transform:translate(1px,-1px)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:rgba(255,255,255,.48)}
.footer-bottom-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-divider{opacity:.35}
.footer-legal-link{color:rgba(255,255,255,.58);text-decoration:none;transition:color .18s ease}
.footer-legal-link:hover,.footer-legal-link:focus-visible{color:#fff}
.footer-bottom-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footer-craft{font-size:12px;color:rgba(255,255,255,.42);letter-spacing:-.01em}
.footer-top-btn{font-family:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.72);font-size:12px;font-weight:500;cursor:pointer;transition:all .18s ease;line-height:1}
.footer-top-btn:hover,.footer-top-btn:focus-visible{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);color:#fff;transform:translateY(-1px)}
.footer-top-btn svg{width:12px;height:12px;display:block;flex-shrink:0}
@media (max-width:1040px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:40px 32px}
  .footer-col-brand{grid-column:1/-1;max-width:540px;padding-right:0;margin-bottom:8px}
}
@media (max-width:680px){
  .site-footer{padding:56px 0 32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 20px}
  .footer-col-brand{grid-column:1/-1;margin-bottom:8px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;margin-top:40px;padding-top:24px}
  .footer-bottom-right{width:100%;justify-content:space-between}
}
@media (max-width:330px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:680px){body{padding-top:64px}}
@media (prefers-reduced-motion:reduce){.site-nav{transition:none}}
.nav-brand picture{display:inline-flex;line-height:0}
/* Brand name next to the logo in the nav. */
.nav-brand{gap:10px;text-decoration:none;line-height:normal}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.25;white-space:nowrap}

/* Performance & Core Web Vitals: defer offscreen layout & paint */
.motion-story,
.selected-work,
.fit-section,
.outcome-band,
.process-strip,
.services-list {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}

/* GPU compositor promotion for smoother non-blocking animations */
.kinetic-frame,
.build-system,
.orbit-one,
.orbit-two,
.idea-card,
.motion-ribbon div,
.web-browser,
.phone-back,
.phone-front {
  transform: translateZ(0);
  will-change: transform;
}