:root {
        --background: #ffffff;
        --text-main: #0f172a;
        --text-sub: #64748b;
        --point-bg: #eff6ff;
        --point-border: #bfdbfe;
        --accent: #2563eb;
        --max-width: 1120px;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: var(--background);
        color: var(--text-main);
        font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
        overflow-wrap: break-word;
        word-break: keep-all;
      }

      h1,
      h2,
      h3,
      h4,
      p,
      li,
      strong,
      span {
        word-break: keep-all;
      }

      h1,
      h2,
      h3,
      h4 {
        text-wrap: balance;
      }

      #portfolio,
      #project-paths,
      #problem,
      #why-lpkit,
      #how-we-work,
      #pathway-01,
      #pathway-02,
      #pathway-03,
      #pathway-04,
      #packages,
      #deliverables,
      #faq,
      #get-started,
      #diagnosis-form,
      #contact {
        scroll-margin-top: 92px;
      }

      @supports (content-visibility: auto) {
        main > section:not(.hero):not(.opening-system):not(.project-paths):not(.visibility-stack) {
          content-visibility: auto;
          contain-intrinsic-size: auto 820px;
        }

        .opening-system,
        .project-paths,
        .visibility-stack {
          contain-intrinsic-size: auto;
        }
      }

      @media (max-width: 900px) {
        @supports (content-visibility: auto) {
          main > section:not(.hero):not(.opening-system):not(.project-paths):not(.visibility-stack) {
            content-visibility: auto;
            contain-intrinsic-size: auto 760px;
          }
        }
      }

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

      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        width: 100%;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        width: min(100% - 40px, var(--max-width));
        height: 76px;
        margin: 0 auto;
      }

      .logo {
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        align-items: center;
        gap: 10px;
        color: var(--text-main);
        font-size: 23px;
        font-weight: 820;
        line-height: 1;
        letter-spacing: -0.03em;
      }

      .logo img {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border-radius: 9px;
      }

      .nav-links {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(16px, 2vw, 28px);
        overflow-x: auto;
        scrollbar-width: none;
      }

      .nav-links::-webkit-scrollbar {
        display: none;
      }

      .nav-links a {
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        align-items: center;
        color: var(--text-main);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .lang-switch {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 2px;
        margin-left: 2px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.05);
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
      }

      .nav-links .lang-switch a {
        min-height: 30px;
        padding: 0 9px;
        border-radius: 999px;
        color: var(--text-sub);
        font-size: 12px;
        font-weight: 760;
        letter-spacing: 0.04em;
      }

      .nav-links .lang-switch a.is-active {
        color: #f8fafc;
        background: var(--text-main);
      }

      .logo:focus-visible,
      .nav-links a:focus-visible,
      .button:focus-visible,
      .portfolio-control:focus-visible,
      .pathway-link:focus-visible,
      .start-card:focus-visible,
      .form-submit:focus-visible,
      .form-copy:focus-visible,
      .diagnosis-form input:focus-visible,
      .diagnosis-form select:focus-visible,
      .diagnosis-form textarea:focus-visible,
      .form-consent:focus-within {
        outline: 3px solid rgba(37, 99, 235, 0.38);
        outline-offset: 3px;
      }

      .anchor-target {
        display: block;
        height: 0;
        scroll-margin-top: 92px;
      }

      .hero {
        position: relative;
        isolation: isolate;
        display: flex;
        min-height: 100vh;
        min-height: 100svh;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: calc(76px + 44px) 20px 64px;
        background: var(--background);
        text-align: center;
      }

      .hero-bg-motion {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
      }

      .hero-blob {
        position: absolute;
        display: block;
        border-radius: 999px;
        filter: blur(60px);
        transform: translate3d(var(--mouse-x, 0px), var(--mouse-y, 0px), 0);
        transition: transform 0.3s ease-out;
        will-change: transform;
      }

      .hero-blob::before {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        content: "";
        will-change: transform;
      }

      .hero-blob-1 {
        top: -120px;
        left: -120px;
        width: 480px;
        height: 480px;
      }

      .hero-blob-1::before {
        background: radial-gradient(circle, rgba(191, 219, 254, 0.6) 0%, rgba(191, 219, 254, 0.36) 42%, transparent 72%);
        animation: heroBlobFloatOne 10s ease-in-out infinite;
      }

      .hero-blob-2 {
        right: -90px;
        bottom: -110px;
        width: 380px;
        height: 380px;
      }

      .hero-blob-2::before {
        background: radial-gradient(circle, rgba(219, 234, 254, 0.5) 0%, rgba(219, 234, 254, 0.32) 44%, transparent 74%);
        animation: heroBlobFloatTwo 12s ease-in-out infinite;
      }

      .hero-inner {
        position: relative;
        z-index: 1;
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      @keyframes heroBlobFloatOne {
        0%,
        100% {
          transform: translate3d(0, 0, 0);
        }

        50% {
          transform: translate3d(30px, 22px, 0);
        }
      }

      @keyframes heroBlobFloatTwo {
        0%,
        100% {
          transform: translate3d(0, 0, 0);
        }

        50% {
          transform: translate3d(-28px, -30px, 0);
        }
      }

      .eyebrow {
        margin: 0 0 24px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hero-title {
        margin: 0;
        color: var(--text-main);
        font-size: 64px;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.03em;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .hero-line {
        display: block;
      }

      .mobile-break {
        display: none;
      }

      .hero-subtitle {
        max-width: 760px;
        margin: 28px auto 0;
        color: var(--text-sub);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.75;
      }

      .hero-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 40px;
      }

      .reveal-item {
        transition: transform 0.7s ease, opacity 0.7s ease;
        transition-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }

      .js-enabled .reveal-item {
        opacity: 0;
        transform: translateY(18px);
      }

      .js-enabled .reveal-item.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .js-enabled .hero .reveal-item {
        opacity: 1;
        transform: none;
      }

      .scroll-reveal {
        transition: transform 0.7s ease, opacity 0.7s ease;
        transition-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }

      .js-enabled .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
      }

      .js-enabled .scroll-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .button {
        display: inline-flex;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        padding: 0 22px;
        border: 1px solid var(--accent);
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
      }

      .button-primary {
        background: var(--accent);
        color: #ffffff;
      }

      .button-secondary {
        background: transparent;
        color: var(--accent);
      }

      .trust-bar {
        background: #f8fafc;
        padding: 32px 20px;
      }

      .trust-bar-inner {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .trust-item {
        display: flex;
        min-height: 44px;
        align-items: center;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        padding: 0 20px;
        border-right: 1px solid #e2e8f0;
        color: #64748b;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
        text-align: center;
      }

      .trust-item:last-child {
        border-right: 0;
      }

      .trust-item strong {
        color: var(--accent);
        font-weight: 700;
      }

      .trust-copy {
        display: block;
        color: #64748b;
        font-weight: 600;
      }

      .opening-system {
        position: relative;
        overflow: clip;
        min-height: 250vh;
        background:
          radial-gradient(circle at 8% 68%, rgba(139, 92, 246, 0.42), transparent 38%),
          radial-gradient(circle at 92% 30%, rgba(244, 114, 182, 0.46), transparent 34%),
          radial-gradient(circle at 52% 36%, rgba(255, 255, 255, 0.92), transparent 42%),
          linear-gradient(112deg, #dff2ff 0%, #fbf7ff 43%, #ffe1ec 100%);
        padding: 0;
      }

      .opening-system::before {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
        background-size: 52px 52px;
        content: "";
        mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 78%, transparent 100%);
        pointer-events: none;
      }

      .opening-system-inner {
        position: sticky;
        top: 76px;
        display: grid;
        width: 100%;
        min-height: calc(100vh - 76px);
        min-height: calc(100svh - 76px);
        place-items: center;
        overflow: hidden;
        padding: 34px 20px 30px;
      }

      .opening-head {
        position: absolute;
        top: clamp(30px, 4.8vh, 58px);
        right: 20px;
        left: 20px;
        z-index: 2;
        max-width: 900px;
        margin: 0 auto;
        text-align: center;
        opacity: var(--opening-head-opacity, 1);
        transform: translateY(var(--opening-head-y, 0px));
        transition: opacity 0.18s ease-out, transform 0.18s ease-out;
        will-change: opacity, transform;
      }

      .opening-kicker {
        margin: 0 0 18px;
        color: #6d5dfc;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .opening-title {
        margin: 0;
        color: var(--text-main);
        font-size: clamp(36px, 4.25vw, 58px);
        font-weight: 800;
        line-height: 1.14;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .opening-copy {
        max-width: 860px;
        margin: 22px auto 0;
        color: var(--text-sub);
        font-size: 17px;
        font-weight: 500;
        line-height: 1.75;
      }

      .opening-stage {
        position: relative;
        z-index: 6;
        width: min(1360px, 94vw);
        margin-top: clamp(166px, 21vh, 218px);
        transform: translateY(var(--opening-stage-y, 0px));
        transition: transform 0.18s ease-out;
        will-change: transform;
      }

      .buyer-window {
        position: relative;
        overflow: hidden;
        width: 100%;
        min-height: min(72vh, 680px);
        border: 1px solid rgba(255, 255, 255, 0.84);
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow:
          0 64px 160px rgba(77, 64, 136, 0.24),
          0 18px 56px rgba(37, 99, 235, 0.12),
          0 1px 0 rgba(255, 255, 255, 0.98) inset;
        transform: translateY(var(--opening-window-y, 22px)) scale(var(--opening-window-scale, 0.94));
        transform-origin: center center;
        transition: transform 0.18s ease-out;
        backdrop-filter: blur(22px);
        will-change: transform;
      }

      .buyer-topbar {
        display: grid;
        min-height: 66px;
        grid-template-columns: 120px minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
        border-bottom: 1px solid rgba(203, 213, 225, 0.74);
        background: rgba(255, 255, 255, 0.88);
        padding: 0 22px;
        backdrop-filter: blur(20px);
      }

      .window-dots {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .window-dots span {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #cbd5e1;
      }

      .window-address {
        display: flex;
        min-width: 0;
        min-height: 36px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 999px;
        background: rgba(248, 250, 252, 0.88);
        color: #334155;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.01em;
      }

      .window-status {
        display: inline-flex;
        min-height: 36px;
        align-items: center;
        border: 1px solid rgba(124, 58, 237, 0.2);
        border-radius: 999px;
        background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
        color: #ffffff;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        padding: 0 14px;
        white-space: nowrap;
      }

      .buyer-window-body {
        display: block;
        min-height: calc(min(72vh, 680px) - 66px);
        background:
          linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
          linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(248, 250, 252, 0.92) 100%);
        background-size: 38px 38px, 38px 38px, auto;
        padding: 0;
      }

      .site-preview {
        position: relative;
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr) 276px;
        overflow: hidden;
        min-height: calc(min(72vh, 680px) - 66px);
        background: rgba(255, 255, 255, 0.56);
      }

      .site-preview::before {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
          linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px),
          radial-gradient(circle at 48% 44%, rgba(255, 255, 255, 0.94), transparent 42%);
        background-size: 34px 34px, 34px 34px, auto;
        content: "";
        pointer-events: none;
      }

      .site-preview::after {
        position: absolute;
        inset: auto -12% -32% 42%;
        height: 300px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 65%);
        content: "";
        pointer-events: none;
      }

      .editor-panel {
        position: relative;
        z-index: 2;
        min-width: 0;
        background: rgba(255, 255, 255, 0.62);
        backdrop-filter: blur(18px);
      }

      .editor-panel-left {
        border-right: 1px solid rgba(203, 213, 225, 0.82);
        padding: 26px 20px;
      }

      .editor-panel-right {
        border-left: 1px solid rgba(203, 213, 225, 0.82);
        padding: 26px 20px;
      }

      .editor-panel-label {
        display: block;
        margin-bottom: 18px;
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .editor-page-list,
      .editor-control-list {
        display: grid;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .editor-page-list li,
      .editor-control-list li {
        display: flex;
        min-height: 42px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid rgba(203, 213, 225, 0.76);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.74);
        color: #334155;
        font-size: 12px;
        font-weight: 800;
        padding: 0 12px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
      }

      .editor-page-list li.is-active {
        border-color: rgba(37, 99, 235, 0.34);
        background: #eff6ff;
        color: #1d4ed8;
      }

      .editor-page-list small,
      .editor-control-list small {
        color: #94a3b8;
        font-size: 10px;
        font-weight: 900;
      }

      .editor-inspector-card {
        display: grid;
        gap: 12px;
        margin-top: 18px;
        border: 1px solid rgba(191, 219, 254, 0.92);
        border-radius: 18px;
        background: rgba(239, 246, 255, 0.78);
        padding: 16px;
      }

      .editor-inspector-card strong {
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
        line-height: 1.28;
        word-break: keep-all;
      }

      .editor-inspector-card span {
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
        word-break: keep-all;
      }

      .editor-palette {
        display: flex;
        gap: 7px;
        margin-top: 16px;
      }

      .editor-palette i {
        display: block;
        width: 26px;
        height: 26px;
        border: 2px solid rgba(255, 255, 255, 0.86);
        border-radius: 999px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.12);
      }

      .editor-palette i:nth-child(1) {
        background: #2563eb;
      }

      .editor-palette i:nth-child(2) {
        background: #7c3aed;
      }

      .editor-palette i:nth-child(3) {
        background: #f472b6;
      }

      .editor-canvas {
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 26px;
      }

      .preview-site-nav {
        position: relative;
        z-index: 2;
        display: flex;
        min-height: 62px;
        align-items: center;
        justify-content: space-between;
        border: 1px solid rgba(226, 232, 240, 0.86);
        border-bottom: 0;
        border-radius: 24px 24px 0 0;
        background: rgba(255, 255, 255, 0.9);
        padding: 0 34px;
      }

      .preview-brand {
        color: #0f172a;
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
      }

      .preview-menu {
        display: flex;
        gap: 18px;
        color: #94a3b8;
        font-size: 12px;
        font-weight: 800;
      }

      .preview-hero {
        position: relative;
        z-index: 2;
        min-height: calc(min(72vh, 680px) - 176px);
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.86);
        border-radius: 0 0 24px 24px;
        background:
          linear-gradient(135deg, rgba(240, 249, 255, 0.92) 0%, rgba(255, 255, 255, 0.96) 44%, rgba(253, 242, 248, 0.9) 100%);
        padding: 48px 52px 38px;
        box-shadow:
          0 28px 72px rgba(15, 23, 42, 0.08),
          0 1px 0 rgba(255, 255, 255, 0.95) inset;
      }

      .preview-hero::before {
        position: absolute;
        inset: 42px 42px auto auto;
        width: 46%;
        height: 48%;
        border: 1px solid rgba(191, 219, 254, 0.85);
        border-radius: 28px;
        background:
          linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
          rgba(255, 255, 255, 0.64);
        background-size: 28px 28px, 28px 28px, auto;
        content: "";
      }

      .preview-hero::after {
        position: absolute;
        right: 72px;
        bottom: 54px;
        width: 220px;
        height: 128px;
        border: 1px solid rgba(191, 219, 254, 0.74);
        border-radius: 24px;
        background:
          linear-gradient(90deg, rgba(37, 99, 235, 0.14) 0 28%, transparent 28% 100%),
          rgba(255, 255, 255, 0.66);
        content: "";
      }

      .preview-wireframe {
        position: relative;
        z-index: 2;
        display: grid;
        min-height: calc(min(72vh, 680px) - 260px);
        grid-template-columns: minmax(220px, 0.82fr) minmax(280px, 0.9fr);
        grid-template-rows: auto auto 1fr;
        gap: 26px 34px;
        opacity: var(--wireframe-opacity, 0.92);
        filter: blur(var(--wireframe-blur, 0px));
        transform: scale(var(--wireframe-scale, 1));
        transform-origin: center center;
        transition: opacity 0.18s ease-out, filter 0.18s ease-out, transform 0.18s ease-out;
        will-change: opacity, filter, transform;
      }

      .wire-copy {
        display: grid;
        align-content: start;
        gap: 14px;
        padding-top: 6px;
      }

      .wire-copy i,
      .wire-copy span,
      .wire-proof-row b,
      .wire-section-row b {
        display: block;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(37, 99, 235, 0.15), rgba(148, 163, 184, 0.12));
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
      }

      .wire-copy i:nth-child(1) {
        width: 42%;
        height: 14px;
      }

      .wire-copy i:nth-child(2) {
        width: 86%;
        height: 42px;
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.1);
      }

      .wire-copy i:nth-child(3) {
        width: 72%;
        height: 42px;
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.08);
      }

      .wire-copy span {
        width: 58%;
        height: 34px;
        margin-top: 6px;
        background: rgba(37, 99, 235, 0.16);
      }

      .wire-visual {
        position: relative;
        min-height: 238px;
        border: 1px solid rgba(191, 219, 254, 0.9);
        border-radius: 34px;
        background:
          linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
          rgba(255, 255, 255, 0.58);
        background-size: 28px 28px, 28px 28px, auto;
        grid-row: span 2;
      }

      .wire-visual::before,
      .wire-visual::after {
        position: absolute;
        border: 1px solid rgba(191, 219, 254, 0.82);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.58);
        content: "";
      }

      .wire-visual::before {
        top: 34px;
        right: 32px;
        left: 32px;
        height: 62px;
      }

      .wire-visual::after {
        right: 32px;
        bottom: 32px;
        width: 48%;
        height: 72px;
      }

      .wire-proof-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        grid-column: 1 / -1;
      }

      .wire-proof-row b {
        height: 74px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.56);
        border: 1px solid rgba(191, 219, 254, 0.66);
      }

      .wire-section-row {
        display: grid;
        grid-template-columns: 0.92fr 1.08fr;
        gap: 14px;
        grid-column: 1 / -1;
      }

      .wire-section-row b {
        height: 86px;
        border-radius: 24px;
        background:
          linear-gradient(90deg, rgba(37, 99, 235, 0.12) 0 32%, rgba(255, 255, 255, 0.58) 32% 100%);
        border: 1px solid rgba(191, 219, 254, 0.66);
      }

      .question-bubble-layer {
        position: absolute;
        top: clamp(54px, 7.4vh, 72px);
        right: auto;
        left: 50%;
        z-index: 4;
        display: grid;
        width: min(760px, 86%);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
        pointer-events: none;
        transform: translateX(-50%);
      }

      .question-bubble {
        position: relative;
        width: 100%;
        border: 1px solid rgba(191, 219, 254, 0.96);
        border-radius: 30px 30px 30px 10px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow:
          0 30px 80px rgba(15, 23, 42, 0.16),
          0 1px 0 rgba(255, 255, 255, 0.94) inset;
        color: #0f172a;
        display: flex;
        min-height: 118px;
        flex-direction: column;
        justify-content: center;
        padding: 18px 24px 20px;
        transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        transition-delay: var(--bubble-delay, 0ms);
        backdrop-filter: blur(20px);
        will-change: transform, opacity;
      }

      .opening-system.is-scroll-controlled .question-bubble {
        opacity: var(--bubble-opacity, 0);
        transform: translateY(var(--bubble-y, 28px)) scale(var(--bubble-scale, 0.94)) rotate(var(--bubble-live-rotate, 0deg));
        animation: none;
      }

      .question-bubble::after {
        position: absolute;
        bottom: -8px;
        left: 34px;
        width: 20px;
        height: 20px;
        border-right: 1px solid #bfdbfe;
        border-bottom: 1px solid #bfdbfe;
        background: rgba(255, 255, 255, 0.96);
        content: "";
        transform: rotate(45deg);
      }

      .question-bubble strong {
        display: block;
        font-size: clamp(17px, 1.18vw, 20px);
        font-weight: 650;
        line-height: 1.32;
        text-wrap: balance;
        word-break: keep-all;
        -webkit-font-smoothing: antialiased;
      }

      .question-bubble span {
        display: block;
        margin-top: 10px;
        color: #526174;
        font-size: 12.8px;
        font-weight: 520;
        line-height: 1.58;
        word-break: keep-all;
        -webkit-font-smoothing: antialiased;
      }

      .question-bubble:nth-child(1) {
        --bubble-delay: 0ms;
        --bubble-start-x: 32px;
        --bubble-start-y: 26px;
        --bubble-start-rotate: 4deg;
        --bubble-rest-rotate: 0.5deg;
        --bubble-float-y: -9px;
      }

      .question-bubble:nth-child(2) {
        margin-top: 8px;
        border-radius: 30px 30px 10px 30px;
        --bubble-delay: 120ms;
        --bubble-start-x: 28px;
        --bubble-start-y: 26px;
        --bubble-start-rotate: -4deg;
        --bubble-rest-rotate: -0.7deg;
        --bubble-float-y: -7px;
      }

      .question-bubble:nth-child(2)::after,
      .question-bubble:nth-child(4)::after {
        right: 34px;
        left: auto;
      }

      .question-bubble:nth-child(3) {
        margin-top: -2px;
        --bubble-delay: 240ms;
        --bubble-start-x: -22px;
        --bubble-start-y: 28px;
        --bubble-start-rotate: -5deg;
        --bubble-rest-rotate: -0.4deg;
        --bubble-float-y: -8px;
      }

      .question-bubble:nth-child(4) {
        margin-top: 6px;
        border-radius: 30px 30px 10px 30px;
        --bubble-delay: 360ms;
        --bubble-start-x: 24px;
        --bubble-start-y: 26px;
        --bubble-start-rotate: 5deg;
        --bubble-rest-rotate: 0.8deg;
        --bubble-float-y: -10px;
      }

      .js-enabled .question-bubble {
        opacity: 0;
        transform: translate(var(--bubble-start-x, 0), var(--bubble-start-y, 24px)) scale(0.93) rotate(var(--bubble-start-rotate, 0deg));
      }

      .js-enabled .opening-stage.is-visible .question-bubble {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(var(--bubble-rest-rotate, 0deg));
        animation: bubbleFloat 5.8s ease-in-out infinite;
        animation-delay: calc(var(--bubble-delay, 0ms) + 780ms);
      }

      .js-enabled .opening-system.is-scroll-controlled .opening-stage.is-visible .question-bubble {
        animation: none;
      }

      .opening-transfer-strip {
        position: absolute;
        right: 0;
        bottom: clamp(22px, 4vh, 42px);
        left: 0;
        z-index: 8;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        width: min(940px, calc(100% - 56px));
        margin: 0 auto;
        opacity: var(--opening-transfer-opacity, 0);
        transform: translateY(var(--opening-transfer-y, 18px));
        transition: opacity 0.18s ease-out, transform 0.18s ease-out;
        will-change: opacity, transform;
      }

      .opening-transfer-card {
        display: grid;
        gap: 14px;
        border: 1px solid #dbeafe;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
        padding: 20px 22px;
      }

      .opening-transfer-card strong {
        color: #0f172a;
        font-size: 16px;
        font-weight: 900;
        line-height: 1.25;
      }

      .opening-transfer-card span {
        color: #64748b;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.55;
      }

      .opening-transfer-card em {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-style: normal;
      }

      .opening-transfer-card em i {
        display: inline-flex;
        min-height: 30px;
        align-items: center;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
        color: var(--accent);
        font-size: 11px;
        font-style: normal;
        font-weight: 850;
        line-height: 1;
        padding: 0 10px;
      }

      @keyframes bubbleFloat {
        0%,
        100% {
          transform: translateY(0) scale(1) rotate(var(--bubble-rest-rotate, 0deg));
        }

        50% {
          transform: translateY(var(--bubble-float-y, -8px)) scale(1) rotate(var(--bubble-rest-rotate, 0deg));
        }
      }

      @keyframes pathwayMobileEnter {
        from {
          opacity: 0;
          transform: translateY(14px) scale(0.99);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .problem-section {
        background: #ffffff;
        padding: 120px 20px;
        overflow: hidden;
      }

      .problem-inner {
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .problem-header-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.74fr);
        gap: 54px;
        align-items: start;
      }

      .problem-header-grid .section-tag,
      .problem-header-grid .section-title {
        margin-right: 0;
        margin-left: 0;
        text-align: left;
      }

      .problem-lead {
        display: grid;
        gap: 12px;
        margin: 31px 0 0;
        border-left: 1px solid #bfdbfe;
        color: #475569;
        padding: 2px 0 2px 22px;
        word-break: keep-all;
      }

      .problem-lead > span {
        color: #2563eb;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .problem-lead p {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.76;
      }

      .problem-lead p .desktop-nowrap {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        letter-spacing: 0;
        text-transform: none;
      }

      .desktop-nowrap {
        white-space: nowrap;
      }

      .section-tag {
        margin: 0 0 18px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.08em;
        text-align: center;
        text-transform: uppercase;
      }

      .section-title {
        max-width: 860px;
        margin: 0 auto;
        color: var(--text-main);
        font-size: 40px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
      }

      .problem-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        margin-top: 56px;
        perspective: 1200px;
      }

      .problem-card {
        display: flex;
        min-height: 238px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 34px 38px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(37, 99, 235, 0.07), transparent 56%),
          #ffffff;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
        transition-delay: var(--problem-delay);
        will-change: transform, opacity;
      }

      .js-enabled .problem-card {
        opacity: 0;
        transform: var(--problem-start-transform);
      }

      .problem-card-label {
        display: block;
        margin: 0 0 18px;
        color: #2563eb;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .problem-card:nth-child(1) {
        --problem-start-transform: translateX(-120px) translateY(-60px) rotate(-8deg);
        --problem-delay: 0ms;
      }

      .problem-card:nth-child(2) {
        --problem-start-transform: translateX(120px) translateY(-80px) rotate(6deg);
        --problem-delay: 80ms;
      }

      .problem-card:nth-child(3) {
        --problem-start-transform: translateX(-150px) translateY(20px) rotate(-5deg);
        --problem-delay: 160ms;
      }

      .problem-card:nth-child(4) {
        --problem-start-transform: translateX(140px) translateY(30px) rotate(7deg);
        --problem-delay: 240ms;
      }

      .problem-card:nth-child(5) {
        --problem-start-transform: translateX(-100px) translateY(80px) rotate(-6deg);
        --problem-delay: 320ms;
      }

      .problem-card:nth-child(6) {
        --problem-start-transform: translateX(110px) translateY(60px) rotate(4deg);
        --problem-delay: 400ms;
      }

      .js-enabled .problem-grid.is-visible .problem-card {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
      }

      .problem-card h3 {
        max-width: 390px;
        margin: 0 auto;
        color: var(--text-main);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.45;
      }

      .problem-card p {
        max-width: 430px;
        margin: 14px auto 0;
        color: #64748b;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;
      }

      .problem-card strong {
        display: inline-flex;
        width: fit-content;
        margin: 20px auto 0;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.2;
        padding: 9px 11px;
        text-align: center;
        justify-content: center;
      }

      .why-lpkit-section {
        background: #f8fafc;
        padding: 120px 20px;
      }

      .why-lpkit-inner {
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .why-lpkit-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        margin-top: 56px;
      }

      .why-lpkit-card {
        min-width: 0;
        min-height: 330px;
        border: 1px solid var(--why-border, #bfdbfe);
        border-radius: 16px;
        background: var(--why-bg, #ffffff);
        padding: 28px 24px;
      }

      .why-lpkit-card h3 {
        margin: 0;
        color: var(--text-main);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: 0;
      }

      .why-lpkit-card p {
        margin: 16px 0 0;
        color: #64748b;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.7;
      }

      .why-card-divider {
        width: 100%;
        height: 1px;
        margin: 16px 0;
        background: var(--why-border, #bfdbfe);
      }

      .why-card-label {
        display: block;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .why-check-list {
        display: grid;
        gap: 8px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
      }

      .why-check-list li {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
        color: #475569;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;
      }

      .why-check-list span {
        color: var(--why-accent, var(--accent));
        font-weight: 800;
        line-height: 1.45;
      }

      .visibility-stack {
        position: relative;
        height: 310vh;
        overflow: clip;
        background:
          radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.34), transparent 34%),
          radial-gradient(circle at 18% 74%, rgba(14, 165, 233, 0.16), transparent 30%),
          linear-gradient(180deg, #050914 0%, #07111f 48%, #0f172a 100%);
      }

      .visibility-pin {
        position: sticky;
        top: 0;
        display: grid;
        min-height: 100vh;
        place-items: center;
        overflow: hidden;
        padding: 104px 24px 82px;
      }

      .visibility-heading {
        position: absolute;
        top: clamp(96px, 11vh, 128px);
        z-index: 10;
        width: min(1120px, calc(100vw - 56px));
        max-width: 1120px;
        color: #ffffff;
        opacity: var(--stack-heading-opacity, 1);
        text-align: center;
        transform: translateY(var(--stack-heading-y, 0));
        will-change: transform, opacity;
      }

      .visibility-kicker {
        margin: 0 0 18px;
        color: #93c5fd;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .visibility-heading h2 {
        max-width: 940px;
        margin: 0 auto;
        color: #ffffff;
        font-size: clamp(38px, 3.75vw, 46px);
        font-weight: 780;
        line-height: 1.14;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .visibility-heading .visibility-copy {
        max-width: min(1040px, 100%);
        margin: 16px auto 0;
        color: rgba(226, 232, 240, 0.76);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.62;
        letter-spacing: 0;
        text-transform: none;
        word-break: keep-all;
        text-wrap: pretty;
      }

      .visibility-stage {
        position: relative;
        width: min(1120px, 92vw);
        height: min(520px, 60vh);
        margin-top: clamp(124px, 17vh, 168px);
        perspective: 1800px;
        transform: translateY(var(--stack-stage-y, 0));
        will-change: transform;
      }

      .stack-card {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        grid-template-rows: auto auto auto;
        align-content: space-between;
        gap: 16px 34px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 30px;
        background:
          radial-gradient(circle at 84% 18%, var(--stack-glow, rgba(59, 130, 246, 0.28)), transparent 38%),
          linear-gradient(135deg, rgba(5, 9, 20, 0.96), rgba(15, 23, 42, 0.9));
        box-shadow:
          0 46px 128px rgba(0, 0, 0, 0.52),
          0 1px 0 rgba(255, 255, 255, 0.08) inset;
        color: #ffffff;
        padding: 40px 48px 36px;
        transform: translate3d(0, var(--card-y, 0), var(--card-z, 0px)) scale(var(--card-scale, 1)) rotate(var(--card-rotate, 0deg)) rotateX(var(--card-tilt, 0deg));
        transform-origin: center center;
        opacity: var(--card-opacity, 1);
        backdrop-filter: blur(24px);
        will-change: transform, opacity;
      }

      .seo-card {
        z-index: 1;
        --stack-accent: #60a5fa;
        --stack-glow: rgba(96, 165, 250, 0.28);
      }

      .aeo-card {
        z-index: 2;
        --stack-accent: #93c5fd;
        --stack-glow: rgba(147, 197, 253, 0.28);
        --card-y: 126%;
        --card-scale: 0.94;
        --card-opacity: 0;
      }

      .geo-card {
        z-index: 3;
        --stack-accent: #34d399;
        --stack-glow: rgba(52, 211, 153, 0.24);
        --card-y: 126%;
        --card-scale: 0.94;
        --card-opacity: 0;
      }

      .stack-card::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
        background-size: 48px 48px;
        content: "";
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 72%);
        pointer-events: none;
      }

      .stack-card-main,
      .stack-card-side {
        position: relative;
        z-index: 1;
        opacity: var(--card-content-opacity, 1);
        will-change: opacity;
      }

      .stack-card span {
        display: inline-flex;
        width: fit-content;
        border: 1px solid color-mix(in srgb, var(--stack-accent) 60%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--stack-accent) 16%, transparent);
        color: var(--stack-accent);
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.12em;
        padding: 10px 14px;
        text-transform: uppercase;
      }

      .stack-card h3 {
        max-width: 700px;
        margin: 16px 0 0;
        color: #ffffff;
        font-size: clamp(34px, 3.35vw, 48px);
        font-weight: 780;
        line-height: 1.08;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .stack-card p {
        max-width: 640px;
        margin: 14px 0 0;
        color: rgba(226, 232, 240, 0.78);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.62;
      }

      .stack-proof {
        display: grid;
        gap: 12px;
        align-self: end;
      }

      .stack-proof strong {
        display: block;
        color: #ffffff;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.35;
      }

      .stack-proof em {
        display: block;
        margin-top: 5px;
        color: rgba(226, 232, 240, 0.7);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.5;
      }

      .stack-proof-row {
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        padding-top: 10px;
      }

      .stack-flow {
        position: relative;
        z-index: 1;
        display: grid;
        grid-column: 1 / -1;
        align-self: center;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        opacity: var(--card-content-opacity, 1);
        will-change: opacity;
      }

      .stack-flow::before {
        display: none;
        content: none;
      }

      .stack-flow-step {
        position: relative;
        display: grid;
        min-height: 58px;
        align-content: center;
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
        box-shadow:
          0 18px 46px rgba(0, 0, 0, 0.18),
          0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        padding: 12px 16px;
      }

      .stack-flow-step b {
        color: color-mix(in srgb, var(--stack-accent) 88%, #ffffff);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .stack-flow-step strong {
        display: block;
        margin-top: 6px;
        color: #ffffff;
        font-size: 13.4px;
        font-weight: 780;
        line-height: 1.28;
        word-break: keep-all;
      }

      .stack-flow-step em {
        display: block;
        margin-top: 4px;
        color: rgba(226, 232, 240, 0.7);
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 1.34;
        word-break: keep-all;
      }

      .stack-deliverables {
        position: relative;
        z-index: 1;
        display: grid;
        grid-column: 1 / -1;
        align-self: end;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 0;
        opacity: var(--card-content-opacity, 1);
        will-change: opacity;
      }

      .stack-deliverable {
        min-height: 76px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.055);
        padding: 14px 16px;
        box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16);
      }

      .stack-deliverable b {
        display: block;
        color: color-mix(in srgb, var(--stack-accent) 88%, #ffffff);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .stack-deliverable strong {
        display: block;
        margin-top: 8px;
        color: #ffffff;
        font-size: 13.2px;
        font-weight: 700;
        line-height: 1.34;
        word-break: keep-all;
      }

      .before-after-section {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.22), transparent 30%),
          radial-gradient(circle at 18% 76%, rgba(14, 165, 233, 0.11), transparent 30%),
          linear-gradient(180deg, #07111f 0%, #0b1424 100%);
        color: #ffffff;
        padding: 118px 20px;
      }

      .before-after-section::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 44px 44px;
        content: "";
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 82%);
        pointer-events: none;
      }

      .before-after-inner {
        position: relative;
        z-index: 1;
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .before-after-section .section-tag {
        color: #93c5fd;
      }

      .before-after-section .section-title {
        color: #ffffff;
      }

      .compare-subtitle {
        max-width: 620px;
        margin: 18px auto 0;
        color: rgba(226, 232, 240, 0.76);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.75;
        text-align: center;
      }

      .before-after-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1.12fr);
        gap: 28px;
        align-items: stretch;
        margin-top: 64px;
      }

      .comparison-panel {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 14px;
        min-width: 0;
      }

      .comparison-card {
        position: relative;
        display: flex;
        min-height: 390px;
        flex-direction: column;
        overflow: hidden;
        padding: 36px;
        border-radius: 24px;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.26);
      }

      .comparison-card::before {
        position: absolute;
        right: 24px;
        bottom: -6px;
        color: rgba(255, 255, 255, 0.035);
        content: attr(data-watermark);
        font-size: 70px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .comparison-card > * {
        position: relative;
        z-index: 1;
      }

      .comparison-before {
        border: 1px solid rgba(148, 163, 184, 0.26);
        background:
          linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.58));
        background-size: 38px 38px, 38px 38px, auto;
      }

      .comparison-after {
        border: 1px solid rgba(147, 197, 253, 0.58);
        background:
          radial-gradient(circle at 84% 18%, rgba(96, 165, 250, 0.24), transparent 34%),
          linear-gradient(135deg, rgba(30, 64, 175, 0.38), rgba(15, 23, 42, 0.92));
        box-shadow: 0 34px 96px rgba(37, 99, 235, 0.22);
      }

      .comparison-after::after {
        position: absolute;
        inset: auto -18% -28% 34%;
        height: 220px;
        background: linear-gradient(90deg, transparent, rgba(191, 219, 254, 0.18), transparent);
        content: "";
        filter: blur(20px);
        pointer-events: none;
        transform: rotate(-18deg);
      }

      .comparison-label {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        border-radius: 999px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .comparison-before-panel .comparison-label {
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: rgba(15, 23, 42, 0.44);
        color: #cbd5e1;
      }

      .comparison-after-panel .comparison-label {
        border: 1px solid rgba(147, 197, 253, 0.42);
        background: rgba(37, 99, 235, 0.26);
        color: #bfdbfe;
      }

      .comparison-card h3 {
        max-width: 94%;
        margin: 0;
        color: #ffffff;
        font-size: clamp(25px, 2.15vw, 32px);
        font-weight: 700;
        line-height: 1.26;
        letter-spacing: 0;
        text-wrap: balance;
        word-break: keep-all;
      }

      .comparison-card p {
        max-width: 92%;
        margin: 16px 0 0;
        color: rgba(226, 232, 240, 0.76);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
        word-break: keep-all;
      }

      .comparison-note {
        display: block;
        margin-top: 26px;
        color: rgba(203, 213, 225, 0.72);
        font-size: 14px;
        font-weight: 400;
        line-height: 1.6;
      }

      .comparison-points {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: auto 0 0;
        border-top: 1px solid rgba(226, 232, 240, 0.1);
        padding: 22px 0 0;
        list-style: none;
      }

      .comparison-points li {
        border: 1px solid rgba(226, 232, 240, 0.14);
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.38);
        color: rgba(248, 250, 252, 0.86);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        padding: 9px 11px;
      }

      .comparison-after .comparison-points li {
        border-color: rgba(147, 197, 253, 0.34);
        background: rgba(37, 99, 235, 0.22);
      }

      .compare-arrow {
        position: relative;
        top: 23px;
        display: grid;
        width: 58px;
        height: 58px;
        align-self: center;
        place-items: center;
        justify-self: center;
        border: 1px solid rgba(147, 197, 253, 0.42);
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.92);
        box-shadow: 0 18px 46px rgba(37, 99, 235, 0.3);
        color: #ffffff;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
      }

      .compare-arrow::after {
        position: absolute;
        inset: -10px;
        border: 1px solid rgba(147, 197, 253, 0.28);
        border-radius: inherit;
        content: "";
        animation: comparePulse 2.6s ease-in-out infinite;
      }

      @keyframes comparePulse {
        0%,
        100% {
          opacity: 0.32;
          transform: scale(0.96);
        }

        50% {
          opacity: 0.8;
          transform: scale(1.08);
        }
      }

      .mini-comparison-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 28px;
      }

      .mini-comparison-card {
        display: grid;
        min-height: 120px;
        align-content: start;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 16px;
        background: rgba(15, 23, 42, 0.66);
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
        padding: 20px;
      }

      .mini-comparison-card p {
        margin: 0;
        color: rgba(148, 163, 184, 0.9);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        word-break: keep-all;
      }

      .mini-comparison-card span,
      .mini-comparison-card strong {
        display: block;
        margin-top: 12px;
        line-height: 1.55;
        letter-spacing: 0;
        text-transform: none;
        word-break: keep-all;
      }

      .mini-comparison-card span {
        color: rgba(203, 213, 225, 0.72);
        font-size: 14px;
        font-weight: 500;
      }

      .mini-comparison-card strong {
        margin-top: 6px;
        color: #93c5fd;
        font-size: 15px;
        font-weight: 700;
      }

      .comparison-script {
        display: grid;
        gap: 0;
        margin: 28px 0 24px;
        border-top: 1px solid rgba(226, 232, 240, 0.12);
        padding: 0;
        list-style: none;
      }

      .comparison-script li {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
        border: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.12);
        border-radius: 0;
        background: transparent;
        color: rgba(226, 232, 240, 0.86);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.6;
        padding: 14px 0;
        word-break: keep-all;
      }

      .comparison-script li span {
        color: #93c5fd;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.3;
        letter-spacing: 0;
      }

      .comparison-script li strong {
        color: rgba(248, 250, 252, 0.9);
        font-weight: 600;
      }

      .comparison-after .comparison-script li {
        border-color: rgba(191, 219, 254, 0.18);
        background: transparent;
      }

      .concept-builds {
        --portfolio-frame: min(calc(100vw - 40px), var(--max-width));
        --portfolio-gutter: calc((100vw - var(--portfolio-frame)) / 2);
        overflow: hidden;
        background:
          linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
          radial-gradient(circle at 10% 12%, rgba(191, 219, 254, 0.42), transparent 28%),
          #ffffff;
        background-size: 44px 44px, 44px 44px, auto, auto;
        padding: 112px 0 118px;
      }

      .concept-inner {
        width: 100%;
        margin: 0 auto;
      }

      .concept-heading-row {
        display: flex;
        width: var(--portfolio-frame);
        margin: 0 auto;
        gap: 32px;
        align-items: flex-end;
        justify-content: space-between;
      }

      .concept-head-copy {
        max-width: 760px;
      }

      .concept-builds .section-tag,
      .concept-builds .section-title,
      .concept-builds .section-sub {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
      }

      .concept-builds .section-title {
        max-width: var(--max-width);
      }

      .section-sub {
        max-width: 620px;
        margin: 18px auto 0;
        color: #475569;
        font-size: 14px;
        font-style: italic;
        font-weight: 400;
        line-height: 1.7;
        text-align: center;
      }

      .concept-builds .section-sub {
        max-width: var(--max-width);
      }

      .portfolio-scroll-hint {
        margin: 16px 0 0;
        color: #64748b;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.65;
      }

      .portfolio-controls {
        display: flex;
        flex: 0 0 auto;
        gap: 10px;
        align-items: center;
      }

      .portfolio-control {
        display: inline-grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #2563eb;
        cursor: pointer;
        font-size: 22px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 14px 38px rgba(37, 99, 235, 0.12);
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      }

      .portfolio-control:hover {
        transform: translateY(-2px);
        border-color: #2563eb;
        box-shadow: 0 20px 46px rgba(37, 99, 235, 0.18);
      }

      .portfolio-control:disabled {
        opacity: 0.35;
        cursor: default;
        transform: none;
        box-shadow: none;
      }

      .concept-mask {
        width: 100%;
        margin: 48px 0 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 var(--portfolio-gutter) 26px;
        scroll-padding-left: var(--portfolio-gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .concept-mask::-webkit-scrollbar {
        display: none;
      }

      .concept-track {
        display: flex;
        width: max-content;
        gap: 24px;
      }

      .concept-card {
        display: block;
        width: clamp(360px, 30vw, 500px);
        min-height: 0;
        flex: 0 0 clamp(360px, 30vw, 500px);
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        box-shadow: none;
        padding: 0;
        scroll-snap-align: start;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .concept-card.is-featured {
        background: transparent;
        box-shadow: none;
      }

      .concept-card.is-featured .concept-preview {
        border-color: #bfdbfe;
      }

      .concept-card:hover {
        transform: translateY(-5px);
        box-shadow: none;
      }

      .concept-card[aria-hidden="true"] {
        display: none;
      }

      .concept-card.scroll-reveal {
        transition: transform 0.7s ease, opacity 0.7s ease, box-shadow 0.3s ease;
        transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
      }

      .js-enabled .concept-card.scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
      }

      .js-enabled .concept-card.scroll-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .js-enabled .concept-card.scroll-reveal.is-visible:hover,
      .concept-card:hover {
        transform: translateY(-5px);
        box-shadow: none;
      }

      .js-enabled .concept-card.scroll-reveal:not(.is-visible):hover {
        transform: translateY(24px);
        box-shadow: none;
      }

      .concept-preview {
        position: relative;
        aspect-ratio: 16 / 9;
        flex: 0 0 auto;
        overflow: hidden;
        border: 1px solid #d7dee8;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0 16px 42px rgba(15, 23, 42, 0.1);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
      }

      .concept-card:hover .concept-preview {
        box-shadow: 0 24px 62px rgba(15, 23, 42, 0.16);
      }

      .portfolio-screenshot {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: var(--preview-position, center top);
        transform: none;
        transform-origin: top left;
        transition: transform 0.45s ease;
      }

      .concept-card:hover .portfolio-screenshot {
        transform: scale(1.018);
      }

      .concept-card-label {
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .concept-card-body {
        display: block;
        padding: 10px 2px 0;
      }

      .concept-card-body h3 {
        margin: 5px 0 0;
        color: var(--text-main);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.35;
        word-break: keep-all;
      }

      .concept-case-meta,
      .concept-card-cta {
        display: none;
      }

      .concept-case-meta {
        display: none;
        gap: 10px;
        margin: 4px 0 0;
      }

      .concept-case-meta div {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
      }

      .concept-case-meta dt {
        color: #94a3b8;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
      }

      .concept-case-meta dd {
        margin: 0;
        color: #334155;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        word-break: keep-all;
      }

      .concept-card-cta {
        display: none;
        width: fit-content;
        align-self: end;
        margin-top: auto;
        color: #2563eb;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
      }

      @media (min-width: 1180px) {
        .concept-builds {
          --portfolio-frame: min(calc(100vw - 96px), 1344px);
          --portfolio-gutter: calc((100vw - var(--portfolio-frame)) / 2);
        }

        .concept-card {
          width: calc((var(--portfolio-frame) - 48px) / 3);
          flex-basis: calc((var(--portfolio-frame) - 48px) / 3);
        }
      }

      .portfolio-proof-panel {
        display: grid;
        width: min(100%, 1160px);
        grid-template-columns: minmax(300px, 0.92fr) minmax(560px, 1.08fr);
        gap: 30px;
        align-items: center;
        margin: 44px auto 0;
        border: 1px solid #dbeafe;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 20px 58px rgba(15, 23, 42, 0.07);
        padding: 28px 30px;
      }

      .portfolio-proof-copy {
        max-width: 440px;
      }

      .portfolio-proof-copy span {
        display: inline-flex;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        padding: 8px 10px;
        text-transform: uppercase;
      }

      .portfolio-proof-copy h3 {
        margin: 18px 0 0;
        color: #0f172a;
        font-size: 26px;
        font-weight: 800;
        line-height: 1.24;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .portfolio-proof-copy p {
        margin: 14px 0 0;
        color: #64748b;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.7;
        word-break: keep-all;
      }

      .portfolio-proof-grid {
        display: grid;
        overflow: hidden;
        width: min(100%, 720px);
        justify-self: end;
        grid-template-columns: 1fr;
        gap: 0;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #ffffff;
      }

      .portfolio-proof-card {
        display: grid;
        min-height: 0;
        grid-template-columns: 148px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        border-top: 1px solid #e2e8f0;
        background: #ffffff;
        padding: 14px 16px;
      }

      .portfolio-proof-card:first-child {
        border-top: 0;
      }

      .portfolio-proof-card strong {
        display: block;
        color: #0f172a;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.35;
      }

      .portfolio-proof-card p {
        margin: 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.55;
      }

      .project-paths {
        --pathway-card-height: clamp(620px, 68vh, 700px);
        position: relative;
        overflow: visible;
        scroll-margin-top: 76px;
        background:
          radial-gradient(circle at 82% 12%, rgba(37, 99, 235, 0.28), transparent 32%),
          radial-gradient(circle at 18% 88%, rgba(14, 165, 233, 0.12), transparent 34%),
          linear-gradient(180deg, #07111f 0%, #0f172a 100%);
        color: #ffffff;
        padding: 0 32px;
      }

      .project-paths::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 44px 44px;
        content: "";
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), transparent 86%);
        pointer-events: none;
      }

      .project-paths-inner {
        position: relative;
        z-index: 1;
        width: min(100%, 1280px);
        margin: 0 auto;
        padding: clamp(156px, 15vh, 184px) 0 clamp(152px, 14vh, 176px);
      }

      .project-paths-layout {
        display: grid;
        grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
        gap: clamp(72px, 7vw, 104px);
        align-items: start;
      }

      .project-paths-head {
        min-width: 0;
        align-self: stretch;
      }

      .project-paths-head-sticky {
        position: sticky;
        top: 76px;
        display: flex;
        box-sizing: border-box;
        min-height: var(--pathway-card-height);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 0;
      }

      .dark-tag {
        margin: 0 0 18px;
        color: #93c5fd;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .project-paths-title {
        max-width: 430px;
        margin: 0;
        color: #ffffff;
        font-size: clamp(34px, 3vw, 40px);
        font-weight: 800;
        line-height: 1.23;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .project-paths-copy {
        max-width: 430px;
        margin: 24px 0 0;
        color: rgba(226, 232, 240, 0.8);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.75;
        text-wrap: pretty;
      }

      .project-step-list {
        display: grid;
        --pathway-list-y: 0px;
        gap: 14px;
        width: min(100%, 480px);
        margin: auto 0 0;
        padding: 0;
        list-style: none;
        transform: none;
      }

      .project-step-list li {
        position: relative;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 14px;
        background: rgba(15, 23, 42, 0.42);
        padding: 0;
        transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      }

      .project-step-list li:not(.is-active) {
        opacity: 0.66;
      }

      .project-step-list a {
        display: grid;
        min-height: 72px;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        padding: 14px 16px;
      }

      .project-step-list li.is-active {
        border-color: rgba(147, 197, 253, 0.62);
        background: rgba(37, 99, 235, 0.2);
        box-shadow: 0 16px 48px rgba(37, 99, 235, 0.14);
        opacity: 1;
      }

      .project-step-list span {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        border: 1px solid rgba(147, 197, 253, 0.34);
        border-radius: 50%;
        color: #93c5fd;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
      }

      .project-step-list li.is-active span {
        background: #93c5fd;
        color: #07111f;
        box-shadow: 0 0 0 6px rgba(147, 197, 253, 0.12);
      }

      .project-step-list strong {
        display: block;
        color: #ffffff;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.25;
        word-break: keep-all;
      }

      .project-step-list em {
        display: block;
        margin-top: 5px;
        color: rgba(203, 213, 225, 0.68);
        font-size: 12.2px;
        font-style: normal;
        font-weight: 600;
        line-height: 1.35;
      }

      .pathway-sequence {
        display: grid;
        gap: clamp(52px, 7vh, 76px);
        padding: 0;
      }

      .pathway-card {
        position: relative;
        display: grid;
        min-height: var(--pathway-card-height);
        grid-template-rows: auto 1fr auto;
        gap: 24px;
        overflow: hidden;
        contain: paint;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 26px;
        background:
          radial-gradient(circle at 86% 12%, rgba(96, 165, 250, 0.14), transparent 32%),
          linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.72)),
          rgba(15, 23, 42, 0.82);
        box-shadow: 0 26px 76px rgba(0, 0, 0, 0.24);
        padding: clamp(36px, 3.1vw, 42px);
        scroll-margin-top: 110px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
      }

      .pathway-card.scroll-reveal.is-visible {
        opacity: 0.46;
        filter: saturate(0.72);
        transform: translateY(0) scale(0.985);
      }

      .pathway-card.scroll-reveal.is-visible.is-current,
      .pathway-card.is-current {
        border-color: rgba(147, 197, 253, 0.58);
        opacity: 1;
        filter: saturate(1);
        box-shadow: 0 38px 110px rgba(37, 99, 235, 0.22);
        transform: translateY(0) scale(1);
      }

      .pathway-card.is-current .pathway-index {
        background: #93c5fd;
        color: #07111f;
        box-shadow: 0 0 0 7px rgba(147, 197, 253, 0.13);
      }

      .pathway-card::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 38px 38px;
        content: "";
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.76), transparent 76%);
        pointer-events: none;
      }

      .pathway-card::after {
        position: absolute;
        left: 28px;
        right: 28px;
        bottom: 18px;
        width: auto;
        max-width: none;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.035);
        content: attr(data-watermark);
        font-size: 72px;
        font-weight: 800;
        line-height: 1;
        pointer-events: none;
        text-align: right;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .pathway-card > * {
        position: relative;
        z-index: 1;
      }

      .pathway-card-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 16px;
        align-items: start;
      }

      .pathway-card-copy {
        min-width: 0;
      }

      .pathway-index {
        display: inline-flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(147, 197, 253, 0.32);
        border-radius: 50%;
        color: #93c5fd;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
      }

      .pathway-card h3 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(27px, 2.25vw, 30px);
        font-weight: 800;
        line-height: 1.24;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .pathway-card p {
        margin: 12px 0 0;
        color: rgba(226, 232, 240, 0.72);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.7;
      }

      .pathway-workbench {
        display: grid;
        grid-template-columns: minmax(0, 1.06fr) minmax(240px, 0.82fr);
        gap: 22px;
        min-height: 330px;
        align-items: stretch;
      }

      .pathway-browser {
        position: relative;
        display: flex;
        min-height: 330px;
        flex-direction: column;
        min-width: 0;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.16);
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.82)),
          #020617;
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
      }

      .pathway-browser::before {
        content: none;
      }

      .pathway-browser-bar {
        position: relative;
        z-index: 3;
        display: flex;
        height: 38px;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.12);
        background: rgba(15, 23, 42, 0.78);
        padding: 0 14px;
      }

      .pathway-browser-bar strong {
        margin-left: auto;
        color: rgba(203, 213, 225, 0.74);
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .pathway-browser-bar span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(203, 213, 225, 0.68);
      }

      .pathway-browser::after {
        content: none;
      }

      .pathway-browser-copy {
        position: relative;
        z-index: 4;
        max-width: 100%;
        padding: 28px 24px 0;
      }

      .pathway-browser-copy span {
        display: inline-flex;
        width: fit-content;
        border: 1px solid rgba(147, 197, 253, 0.32);
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.2);
        color: #bfdbfe;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        padding: 8px 10px;
        text-transform: uppercase;
      }

      .pathway-browser-copy h4 {
        margin: 16px 0 0;
        color: #ffffff;
        font-size: clamp(20px, 1.55vw, 23px);
        font-weight: 740;
        line-height: 1.28;
        letter-spacing: 0;
        word-break: keep-all;
        overflow-wrap: normal;
        text-wrap: pretty;
      }

      .pathway-browser-copy p {
        margin: 12px 0 0;
        color: rgba(226, 232, 240, 0.8);
        max-width: none;
        font-size: 12.2px;
        font-weight: 600;
        line-height: 1.55;
        word-break: keep-all;
        overflow-wrap: normal;
        text-wrap: pretty;
      }

      .pathway-audit-mini {
        position: relative;
        z-index: 4;
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 0;
        margin: 18px 24px 0;
        overflow: hidden;
        border: 1px solid rgba(147, 197, 253, 0.2);
        border-radius: 14px;
        background: rgba(15, 23, 42, 0.5);
      }

      .pathway-audit-mini span,
      .pathway-audit-mini strong {
        min-width: 0;
        border-bottom: 1px solid rgba(147, 197, 253, 0.14);
        padding: 10px 12px;
        line-height: 1.25;
      }

      .pathway-audit-mini span:nth-last-child(-n + 2),
      .pathway-audit-mini strong:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

      .pathway-audit-mini span {
        border-right: 1px solid rgba(147, 197, 253, 0.14);
        color: #93c5fd;
        font-size: 9.5px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .pathway-audit-mini strong {
        color: rgba(248, 250, 252, 0.9);
        font-size: 11px;
        font-weight: 760;
        word-break: keep-all;
      }

      .pathway-chip-row {
        position: relative;
        z-index: 4;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: auto;
        padding: 18px 24px 26px;
      }

      .pathway-hotspot {
        position: relative;
        z-index: 5;
        width: auto;
        max-width: none;
        border: 1px solid rgba(147, 197, 253, 0.24);
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.62);
        box-shadow: none;
        color: rgba(248, 250, 252, 0.9);
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        padding: 12px 8px;
        text-align: center;
        white-space: nowrap;
      }

      .pathway-focus {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid rgba(147, 197, 253, 0.28);
        border-radius: 22px;
        background: rgba(15, 23, 42, 0.58);
        padding: 34px 30px 30px;
      }

      .pathway-focus-label {
        display: block;
        color: #60a5fa;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .pathway-focus-title {
        display: block;
        margin-top: 14px;
        color: #ffffff;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.32;
        word-break: keep-all;
      }

      .pathway-focus ul {
        display: grid;
        gap: 9px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }

      .pathway-focus li {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 8px;
        color: rgba(248, 250, 252, 0.86);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
        word-break: keep-all;
        overflow-wrap: normal;
        text-wrap: pretty;
      }

      .pathway-focus li::before {
        display: grid;
        width: 18px;
        height: 18px;
        place-items: center;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.2);
        color: #93c5fd;
        content: "✓";
        font-size: 11px;
        font-weight: 900;
      }

      .pathway-delivery {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        margin-top: 20px;
        width: 100%;
      }

      .pathway-delivery span {
        display: inline-flex;
        min-height: 34px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(147, 197, 253, 0.34);
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.18);
        color: #bfdbfe;
        font-size: 9.5px;
        font-weight: 800;
        line-height: 1;
        padding: 0 8px;
        text-align: center;
        white-space: nowrap;
      }

      .pathway-card[data-pathway-step="02"] .pathway-browser-copy {
        padding-top: 24px;
      }

      .pathway-card[data-pathway-step="02"] .pathway-browser-copy h4 {
        margin-top: 0;
      }

      .pathway-card[data-pathway-step="02"] .pathway-focus {
        padding-top: 34px;
      }

      .pathway-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        width: fit-content;
        margin-top: 0;
        border: 1px solid rgba(147, 197, 253, 0.26);
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.16);
        color: #bfdbfe;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        padding: 0 14px;
      }

      .pathway-proof-strip {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-top: 42px;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 18px;
        background: rgba(15, 23, 42, 0.56);
      }

      .pathway-proof {
        min-width: 0;
        padding: 22px 18px;
        border-right: 1px solid rgba(148, 163, 184, 0.18);
      }

      .pathway-proof:last-child {
        border-right: 0;
      }

      .pathway-proof span {
        display: block;
        color: #60a5fa;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .pathway-proof strong {
        display: block;
        margin-top: 10px;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.45;
        word-break: keep-all;
      }

      @media (min-width: 901px) {
        .project-paths-head-sticky {
          min-height: var(--pathway-card-height);
          max-height: calc(100vh - 108px);
        }

        .visibility-heading {
          top: clamp(96px, 11vh, 128px);
        }

        .visibility-stage {
          margin-top: clamp(124px, 17vh, 168px);
        }

        .visibility-heading .visibility-copy {
          white-space: nowrap;
        }

        .diagnosis-form .form-field:has(#diagnosis-goal) {
          grid-column: 1 / -1;
        }
      }

      .deliverables-section {
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px),
          linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        background-size: 44px 44px, 44px 44px, auto;
        padding: 128px 20px;
      }

      .deliverables-inner {
        position: relative;
        z-index: 1;
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .deliverables-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
        gap: 36px;
        align-items: start;
      }

      .deliverables-copy {
        padding-top: 26px;
      }

      .deliverables-header .section-tag,
      .deliverables-header .section-title {
        text-align: left;
      }

      .deliverables-header .section-title {
        max-width: 720px;
        margin-left: 0;
        line-height: 1.22;
      }

      .deliverables-lead {
        display: grid;
        gap: 9px;
        max-width: 700px;
        margin: 24px 0 0;
        color: #475569;
        font-size: 16px;
        font-weight: 430;
        line-height: 1.72;
        word-break: keep-all;
      }

      .deliverables-lead span {
        display: block;
      }

      .deliverables-brief-card {
        border: 1px solid #bfdbfe;
        border-radius: 24px;
        background:
          linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.92));
        box-shadow: 0 24px 70px rgba(37, 99, 235, 0.09);
        padding: 26px;
      }

      .deliverables-brief-card span {
        display: inline-flex;
        width: fit-content;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #ffffff;
        color: #2563eb;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        padding: 9px 11px;
        text-transform: uppercase;
      }

      .deliverables-brief-card strong {
        display: block;
        margin-top: 18px;
        color: #0f172a;
        font-size: 22px;
        font-weight: 760;
        line-height: 1.32;
        word-break: keep-all;
      }

      .deliverables-brief-card p {
        margin: 12px 0 0;
        color: #475569;
        font-size: 14px;
        font-weight: 450;
        line-height: 1.72;
        word-break: keep-all;
      }

      .delivery-stage-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        margin: 46px 0 36px;
      }

      .delivery-stage-card {
        position: relative;
        min-height: 146px;
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
        padding: 20px;
      }

      .delivery-stage-card::before {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent 58%);
        content: "";
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .delivery-stage-card:hover::before {
        opacity: 1;
      }

      .delivery-stage-card > * {
        position: relative;
        z-index: 1;
      }

      .delivery-stage-index {
        display: inline-flex;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #eff6ff;
        color: var(--accent);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
      }

      .delivery-stage-card strong {
        display: block;
        margin-top: 18px;
        color: var(--text-main);
        font-size: 16px;
        font-weight: 800;
        line-height: 1.3;
      }

      .delivery-stage-card p {
        margin: 8px 0 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.55;
      }

      .deliverables-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        align-items: stretch;
        margin-top: 42px;
      }

      .deliverables-column {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .deliverables-column:first-child {
        border: 1px solid #e2e8f0;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 22px 70px rgba(15, 23, 42, 0.07);
        padding: 34px 36px;
      }

      .deliverables-column:last-child {
        padding: 0;
      }

      .deliverables-heading {
        margin: 0 0 24px;
        color: var(--text-main);
        font-size: 25px;
        font-weight: 700;
        line-height: 1.35;
        word-break: keep-all;
      }

      .check-list {
        display: grid;
        gap: 13px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .check-list li {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 56px;
        border: 1px solid #e2e8f0;
        border-radius: 13px;
        background: #f8fafc;
        color: var(--text-main);
        font-size: 16px;
        font-weight: 450;
        line-height: 1.55;
        padding: 11px 14px;
        word-break: keep-all;
      }

      .check-icon {
        color: var(--accent);
        font-weight: 800;
        line-height: 1.55;
      }

      .qa-card {
        position: relative;
        display: flex;
        height: 100%;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(147, 197, 253, 0.24);
        border-radius: 28px;
        background:
          radial-gradient(circle at 82% 16%, rgba(37, 99, 235, 0.34), transparent 34%),
          linear-gradient(180deg, #07111f 0%, #0f172a 100%);
        box-shadow: 0 32px 90px rgba(15, 23, 42, 0.18);
        color: #ffffff;
        padding: 34px 36px;
      }

      .qa-card::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 38px 38px;
        content: "";
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.74), transparent 86%);
        pointer-events: none;
      }

      .qa-card > * {
        position: relative;
        z-index: 1;
      }

      .qa-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 24px;
      }

      .qa-card-head span {
        color: #93c5fd;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .qa-card-head strong {
        color: #ffffff;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
      }

      .qa-card .deliverables-heading {
        margin-bottom: 0;
        color: #ffffff;
      }

      .qa-card .check-list li {
        border-color: rgba(148, 163, 184, 0.22);
        background: rgba(15, 23, 42, 0.46);
        color: rgba(248, 250, 252, 0.88);
      }

      .qa-card .check-icon {
        color: #93c5fd;
      }

      .deliverables-note {
        display: flex;
        gap: 18px;
        align-items: center;
        justify-content: space-between;
        margin: 36px auto 0;
        border: 1px solid #bfdbfe;
        border-radius: 20px;
        background:
          linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.94));
        box-shadow: 0 18px 54px rgba(37, 99, 235, 0.08);
        color: #475569;
        padding: 18px 20px;
        text-align: left;
      }

      .deliverables-note strong {
        display: block;
        color: #0f172a;
        font-size: 16px;
        font-weight: 760;
        line-height: 1.45;
        word-break: keep-all;
      }

      .deliverables-note span {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-size: 14px;
        font-weight: 450;
        line-height: 1.55;
        word-break: keep-all;
      }

      .deliverables-note a {
        display: inline-flex;
        min-height: 44px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #2563eb;
        color: #ffffff;
        font-size: 14px;
        font-weight: 760;
        line-height: 1;
        padding: 0 18px;
        white-space: nowrap;
      }

      .packages-section {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 78% 12%, rgba(37, 99, 235, 0.14), transparent 34%),
          linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        padding: 128px 20px;
        scroll-margin-top: 92px;
      }

      .packages-inner {
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .packages-section .section-title {
        max-width: 820px;
        margin-inline: auto;
        font-weight: 690;
        line-height: 1.26;
        letter-spacing: 0;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .package-lead {
        max-width: 720px;
        margin: 18px auto 0;
        color: #64748b;
        font-size: 16.5px;
        font-weight: 410;
        line-height: 1.82;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .package-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-top: 56px;
      }

      .package-card {
        position: relative;
        display: flex;
        min-height: 520px;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        border: 1px solid #dbeafe;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
        padding: 32px;
      }

      .package-card-featured {
        border-color: rgba(37, 99, 235, 0.42);
        background:
          radial-gradient(circle at 88% 12%, rgba(37, 99, 235, 0.18), transparent 34%),
          #ffffff;
        box-shadow: 0 34px 100px rgba(37, 99, 235, 0.16);
      }

      .package-card::after {
        position: absolute;
        right: 20px;
        bottom: -8px;
        color: rgba(37, 99, 235, 0.06);
        content: attr(data-package);
        font-size: 72px;
        font-weight: 800;
        line-height: 1;
        pointer-events: none;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .package-card > * {
        position: relative;
        z-index: 1;
      }

      .package-label {
        display: inline-flex;
        width: fit-content;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 11px;
        font-weight: 680;
        line-height: 1;
        letter-spacing: 0.08em;
        padding: 9px 12px;
        text-transform: uppercase;
      }

      .package-card h3 {
        margin: 22px 0 0;
        color: var(--text-main);
        font-size: 24px;
        font-weight: 690;
        line-height: 1.38;
        letter-spacing: 0;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .package-price {
        display: block;
        margin-top: 18px;
        color: #0f172a;
        font-size: 30px;
        font-weight: 750;
        line-height: 1.16;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        word-break: keep-all;
      }

      .package-copy {
        margin: 18px 0 0;
        color: #475569;
        font-size: 15.25px;
        font-weight: 410;
        line-height: 1.88;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .package-list {
        display: grid;
        gap: 10px;
        margin: 26px 0 0;
        padding: 0;
        list-style: none;
      }

      .package-list li {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 9px;
        color: #334155;
        font-size: 14.25px;
        font-weight: 500;
        line-height: 1.68;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .package-list li::before {
        color: #2563eb;
        content: "✓";
        font-weight: 740;
        line-height: 1.68;
      }

      .package-specs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 20px;
      }

      .package-specs span {
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 12px;
        font-weight: 680;
        line-height: 1;
        padding: 8px 10px;
        word-break: keep-all;
      }

      .package-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 28px;
      }

      .package-link {
        display: inline-flex;
        min-height: 44px;
        width: fit-content;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #2563eb;
        color: #ffffff;
        font-size: 14px;
        font-weight: 680;
        line-height: 1;
        padding: 14px 16px;
        word-break: keep-all;
      }

      .package-reference {
        display: inline-flex;
        min-height: 44px;
        width: fit-content;
        align-items: center;
        justify-content: center;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #ffffff;
        color: #2563eb;
        font-size: 14px;
        font-weight: 680;
        line-height: 1;
        padding: 13px 15px;
        word-break: keep-all;
      }

      .scope-ledger {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 28px;
      }

      .scope-panel {
        min-width: 0;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
        padding: 24px;
      }

      .scope-panel h3 {
        margin: 0;
        color: var(--text-main);
        font-size: 18px;
        font-weight: 680;
        line-height: 1.35;
        word-break: keep-all;
      }

      .scope-panel p {
        margin: 12px 0 0;
        color: #475569;
        font-size: 14px;
        font-weight: 410;
        line-height: 1.78;
        word-break: keep-all;
        overflow-wrap: normal;
      }

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

      .scope-list li {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 9px;
        color: #334155;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.68;
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .scope-list li::before {
        color: #2563eb;
        content: "✓";
        font-weight: 740;
        line-height: 1.68;
      }

      .faq-section {
        background: #ffffff;
        padding: 120px 20px;
        scroll-margin-top: 92px;
      }

      .faq-inner {
        width: min(100%, 920px);
        margin: 0 auto;
      }

      .faq-list {
        display: grid;
        gap: 12px;
        margin-top: 48px;
      }

      .faq-item {
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #f8fafc;
        box-shadow: 0 14px 44px rgba(15, 23, 42, 0.05);
        padding: 0;
      }

      .faq-item summary {
        position: relative;
        cursor: pointer;
        color: var(--text-main);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.45;
        list-style: none;
        padding: 22px 58px 22px 24px;
        word-break: keep-all;
      }

      .faq-item summary::after {
        position: absolute;
        top: 50%;
        right: 24px;
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border: 1px solid #bfdbfe;
        border-radius: 50%;
        color: #2563eb;
        content: "+";
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        transform: translateY(-50%);
      }

      .faq-item[open] summary::after {
        content: "−";
      }

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

      .faq-item p {
        margin: 0;
        border-top: 1px solid #e2e8f0;
        color: #64748b;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.75;
        padding: 18px 24px 22px;
      }

      .get-started-section {
        background: #f8fafc;
        padding: 120px 20px;
      }

      .get-started-inner {
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .get-started-subtitle {
        max-width: 640px;
        margin: 18px auto 0;
        color: #64748b;
        font-size: 17px;
        font-weight: 400;
        line-height: 1.75;
        text-align: center;
      }

      .start-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        margin-top: 56px;
      }

      .start-card {
        display: flex;
        height: 360px;
        flex-direction: column;
        justify-content: space-between;
        padding: 48px;
        border-radius: 20px;
        cursor: pointer;
        transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
      }

      .start-card:focus-visible {
        outline: 3px solid rgba(37, 99, 235, 0.28);
        outline-offset: 4px;
      }

      .start-card:hover {
        border-color: var(--accent);
        box-shadow: 0 12px 32px rgba(37, 99, 235, 0.12);
        transform: translateY(-4px);
      }

      .start-card-ready {
        border: 1px solid #e2e8f0;
        background: #ffffff;
      }

      .start-card-planning {
        border: 1px solid #bfdbfe;
        background: #eff6ff;
      }

      .start-card-label {
        display: block;
        margin-bottom: 18px;
        color: var(--accent);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.08em;
      }

      .start-card h3 {
        margin: 0;
        color: var(--text-main);
        font-size: 28px;
        font-weight: 700;
        line-height: 1.35;
      }

      .start-card p {
        margin: 18px 0 0;
        color: #64748b;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.75;
      }

      .start-card-hints {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 24px 0 0;
        padding: 0;
        list-style: none;
      }

      .start-card-hints li {
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.68);
        color: #2563eb;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        padding: 9px 10px;
        white-space: nowrap;
      }

      .start-card-link {
        color: var(--accent);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
      }

      .assurance-section {
        background: #ffffff;
        padding: 72px 20px;
      }

      .assurance-inner {
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .assurance-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
      }

      .assurance-item {
        min-width: 0;
        padding: 34px 32px;
        border-right: 1px solid #e2e8f0;
      }

      .assurance-item:last-child {
        border-right: 0;
      }

      .assurance-value {
        display: block;
        color: var(--accent);
        font-size: 40px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
      }

      .assurance-title {
        display: block;
        margin-top: 14px;
        color: var(--text-main);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.45;
      }

      .assurance-copy {
        margin: 8px 0 0;
        color: #64748b;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.65;
      }

      .cta-section {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.44), transparent 34%),
          radial-gradient(circle at 18% 86%, rgba(14, 165, 233, 0.18), transparent 30%),
          linear-gradient(135deg, #07111f 0%, #0f1f3a 54%, #101827 100%);
        color: #ffffff;
        padding: 120px 20px;
        text-align: center;
      }

      .cta-section::before {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 42px 42px;
        content: "";
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 78%);
        pointer-events: none;
      }

      .cta-inner {
        position: relative;
        z-index: 1;
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .cta-kicker {
        display: inline-flex;
        width: fit-content;
        align-items: center;
        border: 1px solid rgba(147, 197, 253, 0.32);
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.16);
        color: #bfdbfe;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.1em;
        margin: 0 0 20px;
        padding: 10px 14px;
        text-transform: uppercase;
      }

      .cta-title {
        max-width: 820px;
        margin: 0 auto;
        color: #ffffff;
        font-size: 46px;
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: 0;
      }

      .cta-subtitle {
        max-width: 680px;
        margin: 20px auto 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.75;
      }

      .diagnosis-form {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 12px 12px;
        max-width: 900px;
        margin: 28px auto 0;
        border: 1px solid rgba(147, 197, 253, 0.24);
        border-radius: 24px;
        background: rgba(15, 23, 42, 0.42);
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.18);
        padding: 20px;
        text-align: left;
        backdrop-filter: blur(18px);
      }

      .form-field {
        display: grid;
        min-width: 0;
        gap: 8px;
      }

      .form-field-wide {
        grid-column: 1 / -1;
      }

      .form-field label,
      .form-consent {
        color: rgba(248, 250, 252, 0.9);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.45;
      }

      .form-field input,
      .form-field select,
      .form-field textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 46px;
        border: 1px solid rgba(147, 197, 253, 0.28);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        color: #0f172a;
        appearance: none;
        -webkit-appearance: none;
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        line-height: 20px;
        padding: 12px 15px;
        vertical-align: middle;
      }

      .form-field select {
        cursor: pointer;
        background-image:
          linear-gradient(45deg, transparent 50%, #475569 50%),
          linear-gradient(135deg, #475569 50%, transparent 50%);
        background-position:
          calc(100% - 20px) 22px,
          calc(100% - 14px) 22px;
        background-size: 6px 6px, 6px 6px;
        background-repeat: no-repeat;
        padding-right: 42px;
      }

      .form-field textarea {
        height: auto;
        min-height: 78px;
        resize: vertical;
      }

      .form-field input::placeholder,
      .form-field textarea::placeholder {
        color: #94a3b8;
        font-weight: 500;
      }

      .form-consent {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        color: rgba(226, 232, 240, 0.86);
        font-weight: 600;
      }

      .form-consent input {
        width: 18px;
        height: 18px;
        margin: 1px 0 0;
        accent-color: #2563eb;
      }

      .privacy-note {
        grid-column: 1 / -1;
        margin: 0;
        border: 1px solid rgba(147, 197, 253, 0.22);
        border-radius: 14px;
        background: rgba(15, 23, 42, 0.34);
        color: rgba(226, 232, 240, 0.86);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.65;
        padding: 11px 12px;
      }

      .privacy-note a {
        color: #ffffff;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .form-actions {
        display: flex;
        grid-column: 1 / -1;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .form-submit,
      .form-copy {
        display: inline-flex;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 800;
        line-height: 1;
        padding: 0 18px;
      }

      .form-submit {
        border: 1px solid #ffffff;
        background: #ffffff;
        color: #0f172a;
      }

      .form-copy {
        display: none;
        border: 1px solid rgba(255, 255, 255, 0.46);
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
      }

      .js-enabled .form-copy {
        display: inline-flex;
      }

      .form-status {
        display: none;
        grid-column: 1 / -1;
        margin: 0;
        border: 1px solid rgba(147, 197, 253, 0.28);
        border-radius: 12px;
        background: rgba(37, 99, 235, 0.18);
        color: rgba(248, 250, 252, 0.92);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.6;
        padding: 13px 14px;
      }

      .form-status.is-visible {
        display: block;
      }

      .diagnosis-form noscript {
        grid-column: 1 / -1;
      }

      .cta-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-top: 36px;
      }

      .cta-button-primary {
        border-color: #ffffff;
        background: #ffffff;
        color: #0f172a;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
      }

      .cta-button-secondary {
        border-color: rgba(255, 255, 255, 0.62);
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
      }

      .cta-proof-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 32px;
      }

      .cta-proof-row span {
        border: 1px solid rgba(147, 197, 253, 0.22);
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.34);
        color: rgba(226, 232, 240, 0.86);
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        padding: 10px 12px;
      }

      .cta-preflight {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        max-width: 900px;
        margin: 34px auto 0;
        padding: 0;
        list-style: none;
      }

      .cta-preflight li {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(147, 197, 253, 0.22);
        border-radius: 14px;
        background: rgba(15, 23, 42, 0.32);
        color: rgba(248, 250, 252, 0.9);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.45;
        padding: 13px 10px;
      }

      .site-footer {
        border-top: 1px solid rgba(147, 197, 253, 0.14);
        background:
          linear-gradient(180deg, #07111f 0%, #050b14 100%);
        color: #94a3b8;
        padding: 84px 20px 36px;
      }

      .footer-inner {
        width: min(100%, var(--max-width));
        margin: 0 auto;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 1.25fr repeat(3, 1fr);
        gap: 48px;
      }

      .footer-section {
        min-width: 0;
      }

      .footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        color: #ffffff;
        font-size: 24px;
        font-weight: 820;
        line-height: 1;
        letter-spacing: -0.03em;
      }

      .footer-logo img {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border-radius: 10px;
      }

      .footer-description {
        margin: 14px 0 0;
        color: #bfdbfe;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.6;
      }

      .footer-copy {
        margin: 22px 0 0;
        color: #94a3b8;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.75;
      }

      .footer-heading {
        margin: 0 0 18px;
        color: #e2e8f0;
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .footer-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: default;
        font: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        padding: 0;
        text-align: left;
        text-transform: inherit;
      }

      .footer-toggle-icon {
        display: none;
        position: relative;
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        border: 1px solid rgba(147, 197, 253, 0.26);
        border-radius: 50%;
      }

      .footer-toggle-icon::before,
      .footer-toggle-icon::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 2px;
        border-radius: 999px;
        background: #bfdbfe;
        content: "";
        transform: translate(-50%, -50%);
        transition: transform 0.22s ease, opacity 0.22s ease;
      }

      .footer-toggle-icon::after {
        transform: translate(-50%, -50%) rotate(90deg);
      }

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

      .footer-list a,
      .footer-list span {
        display: inline-flex;
        align-items: center;
        color: #94a3b8;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.55;
      }

      .footer-list a {
        min-height: 44px;
        transition: color 0.2s ease;
      }

      .footer-list span {
        min-height: 30px;
      }

      .footer-list a:hover {
        color: #bfdbfe;
      }

      .footer-bottom {
        margin-top: 56px;
        padding-top: 28px;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
      }

      .footer-disclaimer {
        max-width: 980px;
        margin: 0;
        color: #64748b;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.75;
      }

      .footer-copyright {
        margin: 20px 0 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
      }

      @media (max-width: 1024px) {
        .why-lpkit-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .why-lpkit-card {
          min-height: 0;
        }

        .opening-stage {
          width: min(1120px, 94vw);
          margin-top: clamp(270px, 32vh, 318px);
        }

        .buyer-window {
          min-height: min(72vh, 670px);
        }

        .buyer-window-body {
          min-height: calc(min(72vh, 670px) - 66px);
        }

        .site-preview {
          grid-template-columns: 178px minmax(0, 1fr);
          min-height: calc(min(72vh, 670px) - 66px);
        }

        .editor-panel-left {
          padding: 22px 16px;
        }

        .editor-panel-right {
          display: none;
        }

        .editor-canvas {
          padding: 22px;
        }

        .preview-hero {
          min-height: calc(min(72vh, 670px) - 170px);
          padding: 46px 34px 34px;
        }

        .question-bubble-layer {
          top: 62px;
          width: min(700px, 92%);
          gap: 10px 12px;
        }

        .question-bubble {
          padding: 20px 22px;
        }

        .question-bubble strong {
          font-size: 16.5px;
          font-weight: 700;
          line-height: 1.28;
        }

        .question-bubble span {
          font-size: 12px;
          font-weight: 500;
          line-height: 1.58;
        }

        .portfolio-proof-panel {
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 24px;
        }

        .portfolio-proof-copy {
          max-width: 680px;
        }

        .portfolio-proof-grid {
          width: 100%;
          justify-self: stretch;
        }

        .site-preview {
          grid-template-columns: 1fr;
        }

        .editor-panel-left {
          display: none;
        }

        .editor-canvas {
          padding: 24px;
        }

        .visibility-stage {
          width: min(720px, 92vw);
          height: min(520px, 60vh);
        }

        .stack-card {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto auto;
          gap: 28px;
          padding: 42px;
        }

        .stack-proof {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          align-self: end;
        }

        .stack-deliverables {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 10px;
        }

        .stack-flow {
          gap: 10px;
        }

        .stack-flow-step {
          min-height: 78px;
          padding: 14px;
        }

        .stack-flow-step strong {
          font-size: 13px;
        }

        .stack-flow-step em {
          font-size: 10.8px;
        }

        .stack-deliverable {
          min-height: 84px;
          padding: 16px;
        }

        .stack-deliverable strong {
          font-size: 13px;
        }

        .project-paths-layout {
          grid-template-columns: 1fr;
          gap: 42px;
        }

        .project-paths-head-sticky {
          position: relative;
          top: auto;
          min-height: 0;
          padding-top: 0;
        }

        .project-paths-title {
          max-width: 760px;
        }

        .project-paths-copy {
          max-width: 760px;
        }

        .project-step-list {
          width: min(100%, 760px);
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .pathway-sequence {
          gap: 42px;
          padding: 0;
        }

        .pathway-card {
          min-height: 0;
        }
      }

      @media (min-width: 1025px) and (max-height: 820px) {
        .visibility-pin {
          padding-top: 118px;
          padding-bottom: 42px;
        }

        .visibility-heading {
          top: 116px;
        }

        .visibility-kicker {
          margin-bottom: 12px;
          font-size: 11px;
        }

        .visibility-heading h2 {
          font-size: 34px;
          line-height: 1.12;
        }

        .visibility-heading .visibility-copy {
          margin-top: 12px;
          font-size: 12.5px;
          line-height: 1.5;
        }

        .visibility-stage {
          height: min(492px, 63vh);
          margin-top: clamp(86px, 12vh, 112px);
        }

        .stack-card {
          gap: 14px 30px;
          grid-template-columns: minmax(0, 1fr) 290px;
          padding: 32px 40px 28px;
        }

        .stack-card h3 {
          margin-top: 15px;
          font-size: 34px;
          line-height: 1.1;
        }

        .stack-card p {
          margin-top: 13px;
          font-size: 13.5px;
          line-height: 1.58;
        }

        .stack-proof-row {
          padding-top: 9px;
        }

        .stack-flow {
          gap: 10px;
        }

        .stack-flow-step {
          min-height: 54px;
          padding: 10px 14px;
        }

        .stack-flow-step strong {
          margin-top: 5px;
          font-size: 12.5px;
          line-height: 1.24;
        }

        .stack-flow-step em {
          display: none;
        }

        .stack-deliverables {
          gap: 10px;
        }

        .stack-deliverable {
          min-height: 66px;
          padding: 12px 14px;
        }

        .stack-deliverable strong {
          margin-top: 7px;
          font-size: 12.2px;
          line-height: 1.28;
        }

        .stack-proof strong {
          font-size: 14px;
        }

        .stack-proof em {
          margin-top: 4px;
          font-size: 10.8px;
          line-height: 1.36;
        }

        .stack-flow {
          gap: 10px;
        }

        .stack-flow-step {
          min-height: 68px;
          border-radius: 14px;
          padding: 12px 14px;
        }

        .stack-flow-step b {
          font-size: 9.6px;
        }

        .stack-flow-step strong {
          margin-top: 7px;
          font-size: 12px;
          line-height: 1.26;
        }

        .stack-flow-step em {
          display: none;
        }

        .stack-deliverable {
          min-height: 76px;
          padding: 14px 16px;
        }

        .stack-deliverable b {
          font-size: 10px;
        }

        .stack-deliverable strong {
          margin-top: 8px;
          font-size: 11.2px;
          line-height: 1.38;
        }
      }

      @media (max-width: 768px) {
        #portfolio,
        #project-paths,
        #problem,
        #why-lpkit,
        #how-we-work,
        #pathway-01,
        #pathway-02,
        #pathway-03,
        #pathway-04,
        #packages,
        #deliverables,
          #faq,
          #get-started,
          #diagnosis-form,
          #contact {
          scroll-margin-top: 76px;
        }

        .nav {
          width: calc(100% - 36px);
          height: 66px;
          gap: 18px;
        }

        .site-header {
          background: #ffffff;
          backdrop-filter: none;
        }

        .logo {
          gap: 8px;
          font-size: 20px;
        }

        .logo img {
          width: 30px;
          height: 30px;
          border-radius: 8px;
        }

        .nav-links {
          flex: 0 1 auto;
          gap: 22px;
          overflow: visible;
        }

        .nav-links a {
          display: none;
          font-size: 15px;
          font-weight: 700;
        }

        .nav-links a:first-child,
        .nav-links a:last-child {
          display: inline-flex;
        }

        .hero {
          min-height: 100vh;
          min-height: 100svh;
          min-height: 100dvh;
          align-items: center;
          justify-content: center;
          padding: calc(66px + clamp(30px, 6svh, 52px)) 18px clamp(38px, 7svh, 58px);
        }

        .hero-inner {
          transform: translateY(clamp(-10px, -1.4svh, -4px));
        }

        .hero-blob {
          filter: blur(42px);
          transition: none;
          will-change: auto;
        }

        .hero-blob::before {
          animation: none;
          will-change: auto;
        }

        .hero-blob-1 {
          top: -86px;
          left: -150px;
          width: 340px;
          height: 340px;
        }

        .hero-blob-2 {
          right: -130px;
          bottom: -82px;
          width: 300px;
          height: 300px;
        }

        .hero-title {
          width: min(100%, 382px);
          margin: 0 auto;
          font-size: clamp(24px, 5.9vw, 28px);
          line-height: 1.28;
          letter-spacing: 0;
          word-break: keep-all;
          overflow-wrap: normal;
        }

        .hero-line + .hero-line {
          margin-top: 6px;
        }

        .mobile-break {
          display: none;
        }

        .hero-subtitle {
          max-width: 372px;
          margin-top: 16px;
          font-size: 13.5px;
          line-height: 1.56;
          word-break: keep-all;
          overflow-wrap: normal;
        }

        .hero-actions {
          flex-direction: column;
          align-items: stretch;
          width: min(100%, 372px);
          margin: 20px auto 0;
          gap: 10px;
        }

        .hero-actions .button,
        .cta-actions .button {
          width: 100%;
        }

        .hero-actions .button {
          min-height: 48px;
          font-size: 15px;
        }

        .trust-bar {
          padding: 12px 20px 18px;
        }

        .trust-bar-inner {
          position: relative;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-auto-rows: minmax(82px, auto);
          width: min(100%, 390px);
          overflow: hidden;
          border: 1px solid #e2e8f0;
          border-radius: 20px;
          background: #ffffff;
          box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
        }

        .trust-bar-inner::before,
        .trust-bar-inner::after {
          content: none;
        }

        .trust-bar-inner::before {
          top: 0;
          bottom: 0;
          left: 50%;
          width: 1px;
          transform: translateX(-0.5px);
        }

        .trust-bar-inner::after {
          top: 50%;
          right: 0;
          left: 0;
          height: 1px;
          transform: translateY(-0.5px);
        }

        .trust-item {
          min-height: 82px;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 12px 10px;
          border-right: 1px solid #e2e8f0;
          border-bottom: 1px solid #e2e8f0;
          font-size: 14px;
          line-height: 1.3;
          text-align: center;
          word-break: keep-all;
        }

        .trust-item strong {
          font-size: 13.5px;
          line-height: 1.2;
          white-space: nowrap;
        }

        .trust-item:nth-child(2n) {
          border-right: 0;
        }

        .trust-item:nth-last-child(-n + 2) {
          border-bottom: 0;
        }

        .trust-item:last-child {
          border-bottom: 0;
        }

        .trust-copy {
          max-width: 158px;
          margin: 0 auto;
          font-size: 10.2px;
          line-height: 1.38;
        }

        .trust-item:nth-child(2) .trust-copy {
          max-width: 142px;
        }

        @media (max-width: 360px) {
          .trust-bar-inner {
            grid-auto-rows: minmax(90px, auto);
          }

          .trust-item {
            min-height: 90px;
            padding: 14px 8px;
          }

          .trust-item strong {
            font-size: 13px;
          }

          .trust-copy {
            font-size: 10.2px;
          }
        }

        .opening-system {
          min-height: 0;
          overflow: hidden;
          padding: 0;
        }

        .opening-system-inner {
          position: relative;
          top: auto;
          display: block;
          width: 100%;
          min-height: 0;
          overflow: visible;
          padding: 56px 16px 58px;
        }

        .opening-head {
          position: relative;
          top: auto;
          right: auto;
          left: auto;
          max-width: 360px;
          margin: 0 auto 28px;
          opacity: 1 !important;
          transform: none !important;
          transition: none;
        }

        .opening-title {
          font-size: 28px;
          line-height: 1.2;
          word-break: keep-all;
        }

        .opening-copy {
          margin-top: 14px;
          font-size: 14px;
          line-height: 1.62;
          word-break: keep-all;
        }

        .opening-stage {
          width: 100%;
          max-width: 430px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 0;
          transform: none !important;
          transition: transform 0.45s ease, opacity 0.45s ease;
          will-change: auto;
        }

        .buyer-window {
          border-radius: 24px;
          min-height: 0;
          transform: none !important;
          transition: transform 0.45s ease;
          backdrop-filter: none;
          will-change: auto;
        }

        .buyer-topbar {
          grid-template-columns: auto minmax(0, 1fr);
          gap: 10px;
          min-height: 56px;
          padding: 0 12px;
          backdrop-filter: none;
        }

        .window-address {
          justify-content: center;
          min-height: 36px;
          padding: 0 10px;
          font-size: 10.5px;
          letter-spacing: 0;
        }

        .window-status {
          display: none;
        }

        .buyer-window-body {
          min-height: 0;
          padding: 10px;
        }

        .site-preview {
          display: block;
          min-height: 0;
          border-radius: 20px;
        }

        .editor-panel {
          display: none;
        }

        .editor-canvas {
          display: block;
          padding: 10px;
        }

        .site-preview::before {
          border-radius: 18px;
        }

        .site-preview::after {
          content: none;
        }

        .preview-site-nav {
          min-height: 48px;
          padding: 0 18px;
        }

        .preview-menu {
          display: none;
        }

        .preview-hero {
          min-height: 0;
          padding: 18px 14px 16px;
          border-radius: 0 0 20px 20px;
        }

        .preview-hero::before,
        .preview-hero::after {
          content: none;
        }

        .preview-wireframe {
          min-height: 318px;
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
          gap: 9px;
          opacity: 0.46;
          filter: blur(0.6px);
        }

        .wire-copy {
          gap: 8px;
          padding-top: 0;
        }

        .wire-copy i:nth-child(1) {
          width: 44%;
          height: 10px;
        }

        .wire-copy i:nth-child(2),
        .wire-copy i:nth-child(3) {
          height: 22px;
          border-radius: 12px;
        }

        .wire-copy span {
          width: 48%;
          height: 24px;
          margin-top: 2px;
        }

        .wire-visual {
          min-height: 112px;
          border-radius: 22px;
          grid-row: auto;
          background-size: 24px 24px, 24px 24px, auto;
        }

        .wire-visual::before {
          top: 22px;
          right: 22px;
          left: 22px;
          height: 42px;
          border-radius: 16px;
        }

        .wire-visual::after {
          right: 22px;
          bottom: 20px;
          width: 52%;
          height: 42px;
          border-radius: 16px;
        }

        .wire-proof-row {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
        }

        .wire-proof-row b {
          height: 42px;
          border-radius: 14px;
        }

        .wire-section-row {
          display: none;
        }

        .question-bubble-layer {
          position: absolute;
          top: 86px;
          right: 12px;
          left: 12px;
          width: auto;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          overflow: visible;
          margin: 0;
          padding: 0;
          scroll-padding-left: 0;
          scroll-snap-type: none;
          scrollbar-width: none;
          transform: none;
          -webkit-overflow-scrolling: auto;
        }

        .question-bubble-layer::-webkit-scrollbar {
          display: none;
        }

        .question-bubble,
        .question-bubble:nth-child(n) {
          position: relative;
          top: auto;
          right: auto;
          bottom: auto;
          left: auto;
          width: 100%;
          min-height: 108px;
          flex: initial;
          max-width: none;
          border-radius: 22px 22px 22px 8px;
          padding: 15px 15px 16px;
          transition: opacity 0.48s ease, transform 0.56s cubic-bezier(0.34, 1.56, 0.64, 1);
          transition-delay: var(--bubble-delay, 0ms);
          backdrop-filter: none;
          will-change: auto;
          scroll-snap-align: none;
        }

        .question-bubble strong {
          font-size: clamp(14.5px, 3.85vw, 16.5px);
          font-weight: 620;
          line-height: 1.3;
          text-wrap: balance;
        }

        .question-bubble span {
          margin-top: 7px;
          font-size: clamp(11px, 2.82vw, 12px);
          font-weight: 500;
          line-height: 1.48;
        }

        .question-bubble:nth-child(n)::after {
          right: auto;
          bottom: -6px;
          left: 20px;
          width: 16px;
          height: 16px;
        }

        .question-bubble:nth-child(2n)::after {
          right: 22px;
          left: auto;
        }

        .opening-transfer-strip {
          display: none;
        }

        .opening-system .portfolio-proof-panel {
          display: none;
        }

        .opening-transfer-card {
          padding: 18px;
        }

        .problem-section {
          padding: 64px 20px;
        }

        .section-title {
          font-size: 34px;
          line-height: 1.22;
          word-break: keep-all;
        }

        .problem-header-grid {
          grid-template-columns: 1fr;
          gap: 18px;
          align-items: start;
        }

        .problem-header-grid .section-tag,
        .problem-header-grid .section-title {
          text-align: left;
        }

        .problem-lead {
          margin-top: 0;
          padding-left: 16px;
        }

        .problem-lead p {
          font-size: 15px;
          line-height: 1.72;
        }

        .desktop-nowrap {
          white-space: normal;
        }

        .problem-grid {
          grid-template-columns: 1fr;
          gap: 16px;
          margin-top: 24px;
        }

        .problem-card {
          min-height: 0;
          padding: 28px 24px;
          will-change: auto;
        }

        .js-enabled .problem-card {
          transform: translateY(20px);
        }

        .js-enabled .problem-grid.is-visible .problem-card {
          transform: translateY(0);
        }

        .why-lpkit-section {
          padding: 64px 20px;
        }

        .why-lpkit-grid {
          grid-template-columns: 1fr;
          gap: 16px;
          margin-top: 40px;
        }

        .why-lpkit-card {
          min-height: 0;
          padding: 28px 24px;
        }

        .visibility-stack {
          height: auto;
        }

        .visibility-pin {
          position: relative;
          min-height: 0;
          align-items: stretch;
          padding: 64px 20px;
        }

        .visibility-heading {
          position: relative;
          top: auto;
          width: calc(100% - 40px);
          margin: 0 auto;
        }

        .visibility-heading h2 {
          font-size: 27px;
          line-height: 1.24;
        }

        .visibility-heading .visibility-copy {
          margin-top: 16px;
          font-size: 14px;
          line-height: 1.65;
          word-break: keep-all;
          overflow-wrap: normal;
        }

        .visibility-stage {
          display: grid;
          width: min(100%, 430px);
          height: auto;
          gap: 16px;
          margin: 28px auto 0;
          perspective: none;
          transform: none !important;
          will-change: auto;
        }

        .stack-card {
          position: relative;
          inset: auto;
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          gap: 16px;
          border-radius: 22px;
          padding: 22px;
          opacity: 1 !important;
          transform: none !important;
          backdrop-filter: none;
          will-change: auto;
        }

        .stack-card-main,
        .stack-card-side,
        .stack-flow,
        .stack-deliverables {
          opacity: 1 !important;
          will-change: auto;
        }

        .stack-card span {
          font-size: 11px;
          padding: 9px 12px;
        }

        .stack-card h3 {
          margin-top: 15px;
          font-size: 22px;
          line-height: 1.24;
        }

        .stack-card p {
          margin-top: 12px;
          font-size: 12.6px;
          line-height: 1.6;
        }

        .stack-proof {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .stack-flow {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .stack-flow::before {
          display: none;
        }

        .stack-flow-step {
          min-height: 0;
          border-radius: 12px;
          padding: 12px;
        }

        .stack-flow-step b {
          font-size: 10px;
        }

        .stack-flow-step strong {
          margin-top: 7px;
          font-size: 12.6px;
          line-height: 1.34;
        }

        .stack-flow-step em {
          display: block;
          margin-top: 4px;
          font-size: 11px;
          line-height: 1.36;
        }

        .stack-proof-row {
          display: grid;
          grid-template-columns: 92px minmax(0, 1fr);
          gap: 10px;
          align-items: center;
          min-width: 0;
          border: 1px solid rgba(255, 255, 255, 0.14);
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.05);
          padding: 11px 12px;
        }

        .stack-proof strong {
          font-size: 12px;
          line-height: 1.25;
          text-align: left;
        }

        .stack-proof em {
          display: block;
          margin-top: 0;
          font-size: 11px;
          line-height: 1.42;
        }

        .stack-deliverables {
          grid-template-columns: 1fr;
          gap: 8px;
          margin-top: 0;
        }

        .stack-deliverable {
          min-height: 0;
          border-radius: 12px;
          padding: 12px;
        }

        .stack-deliverable b {
          font-size: 10px;
        }

        .stack-deliverable strong {
          margin-top: 8px;
          font-size: 12px;
          line-height: 1.38;
        }

        .before-after-section {
          padding: 64px 20px;
        }

        .before-after-main {
          grid-template-columns: 1fr;
          gap: 18px;
          margin-top: 40px;
        }

        .comparison-panel {
          gap: 10px;
        }

        .comparison-card {
          min-height: 0;
          padding: 28px 24px;
          border-radius: 20px;
        }

        .comparison-card::before {
          right: 18px;
          font-size: 54px;
        }

        .comparison-card h3 {
          font-size: 22px;
        }

        .comparison-card p {
          max-width: none;
          font-size: 14px;
        }

        .comparison-script {
          margin: 22px 0 20px;
        }

        .comparison-script li {
          grid-template-columns: 1fr;
          gap: 6px;
          font-size: 13px;
          line-height: 1.55;
          padding: 12px 0;
        }

        .comparison-points {
          gap: 7px;
        }

        .comparison-points li {
          font-size: 12px;
        }

        .compare-arrow {
          width: 56px;
          height: 56px;
          justify-self: center;
          font-size: 28px;
        }

        .compare-arrow.scroll-reveal {
          transform: translateY(24px) rotate(90deg);
        }

        .compare-arrow.scroll-reveal.is-visible {
          transform: translateY(0) rotate(90deg);
        }

        .mini-comparison-grid {
          grid-template-columns: 1fr;
        }

        .concept-builds {
          padding: 64px 0;
        }

        .concept-heading-row {
          flex-direction: column;
          gap: 22px;
          align-items: flex-start;
        }

        .portfolio-controls {
          width: 100%;
          justify-content: flex-end;
        }

        .concept-track {
          display: flex;
          width: max-content;
          gap: 16px;
          animation: none;
        }

        .concept-mask {
          overflow-x: auto;
          overflow-y: hidden;
          margin-top: 40px;
          padding-right: var(--portfolio-gutter);
          padding-bottom: 6px;
          padding-left: var(--portfolio-gutter);
          scroll-padding-left: var(--portfolio-gutter);
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .portfolio-scroll-hint {
          display: block;
        }

        .concept-mask::-webkit-scrollbar {
          display: none;
        }

        .concept-card {
          width: min(calc(100vw - 32px), 430px);
          min-height: 0;
          flex: 0 0 min(calc(100vw - 32px), 430px);
          grid-column: auto;
          padding: 0;
          scroll-snap-align: start;
        }

        .concept-preview {
          border-radius: 8px;
          box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
        }

        .concept-card:hover,
        .js-enabled .concept-card.scroll-reveal.is-visible:hover {
          transform: none;
        }

        .concept-card:hover .portfolio-screenshot,
        .portfolio-screenshot {
          transform: none;
        }

        .js-enabled .concept-card.scroll-reveal,
        .js-enabled .concept-card.scroll-reveal:not(.is-visible):hover {
          opacity: 0;
          transform: translateY(14px);
        }

        .js-enabled .concept-card.scroll-reveal.is-visible,
        .js-enabled .concept-card.scroll-reveal.is-visible:hover {
          opacity: 1;
          transform: none;
        }

        .concept-card[aria-hidden="true"] {
          display: none;
        }

        .concept-card-body h3 {
          font-size: 16px;
        }

        .portfolio-proof-panel {
          grid-template-columns: 1fr;
          gap: 20px;
          margin-top: 32px;
          border-radius: 20px;
          padding: 22px;
        }

        .portfolio-proof-copy h3 {
          font-size: 23px;
        }

        .portfolio-proof-grid {
          grid-template-columns: 1fr;
        }

        .portfolio-proof-card {
          grid-template-columns: 1fr;
          gap: 8px;
          padding: 16px;
        }

        .project-paths {
          width: 100%;
          padding: 0;
          overflow-x: hidden;
        }

        .project-paths-inner {
          width: 100%;
          padding: 56px 18px 58px;
        }

        .project-paths-layout {
          grid-template-columns: minmax(0, 1fr);
          gap: 26px;
          width: 100%;
        }

        .project-paths-head {
          min-width: 0;
        }

        .project-paths-head-sticky {
          position: relative;
          top: auto;
          min-height: 0;
          padding-top: 0;
        }

        .project-paths-title {
          max-width: 100%;
          font-size: clamp(23px, 5.65vw, 27px);
          line-height: 1.22;
          letter-spacing: 0;
        }

        .project-paths-copy {
          max-width: 100%;
          margin-top: 13px;
          font-size: 12.6px;
          line-height: 1.65;
        }

        .project-step-list {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          width: 100%;
          gap: 6px;
          margin: 18px 0 0;
          overflow: visible;
          padding: 0;
          scroll-snap-type: none;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
        }

        .project-step-list::-webkit-scrollbar {
          display: none;
        }

        .project-step-list li {
          min-width: 0;
          flex: initial;
          scroll-snap-align: none;
        }

        .project-step-list a {
          min-height: 50px;
          grid-template-columns: 30px minmax(0, 1fr);
          gap: 8px;
          padding: 9px;
          border-radius: 16px;
        }

        .project-step-list span {
          width: 30px;
          height: 30px;
          font-size: 11px;
        }

        .project-step-list strong {
          font-size: 11px;
          line-height: 1.25;
        }

        .project-step-list em {
          display: none;
        }

        .pathway-sequence {
          width: 100%;
          gap: 0;
          padding: 0;
        }

        .pathway-card {
          width: 100%;
          min-height: 0;
          border-radius: 22px;
          padding: 18px 14px 14px;
          overflow: hidden;
          animation: pathwayMobileEnter 0.42s ease both;
        }

        .pathway-card:not(.is-current) {
          display: none;
        }

        .pathway-card::after {
          font-size: 54px;
        }

        .pathway-card-head {
          grid-template-columns: auto minmax(0, 1fr);
          gap: 14px;
          align-items: start;
        }

        .pathway-index {
          width: 40px;
          height: 40px;
          font-size: 15px;
        }

        .pathway-card h3 {
          font-size: 18px;
          line-height: 1.24;
        }

        .pathway-card p {
          margin-top: 8px;
          font-size: 12px;
          line-height: 1.55;
        }

        .pathway-workbench {
          grid-template-columns: minmax(0, 1fr);
          gap: 10px;
          min-height: 0;
          margin-top: 14px;
        }

        .pathway-browser {
          min-height: 214px;
          border-radius: 18px;
        }

        .pathway-browser::before {
          content: none;
        }

        .pathway-browser::after {
          display: none;
        }

        .pathway-browser-copy {
          position: relative;
          top: auto;
          left: auto;
          max-width: none;
          padding: 15px 14px 0;
        }

        .pathway-browser-copy span {
          font-size: 9px;
          padding: 7px 9px;
        }

        .pathway-browser-copy h4 {
          margin-top: 11px;
          font-size: clamp(15px, 3.72vw, 16px);
          line-height: 1.28;
        }

        .pathway-browser-copy p {
          margin-top: 9px;
          max-width: none;
          font-size: 11px;
          line-height: 1.48;
        }

        .pathway-chip-row {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 5px;
          padding: 10px 12px 12px;
        }

        .pathway-hotspot {
          max-width: none;
          min-height: 32px;
          align-items: center;
          justify-content: center;
          text-align: center;
          font-size: 9px;
          line-height: 1;
          padding: 7px 4px;
        }

        .pathway-audit-mini {
          grid-template-columns: 58px minmax(0, 1fr);
          margin: 12px 12px 0;
          border-radius: 12px;
        }

        .pathway-audit-mini span,
        .pathway-audit-mini strong {
          padding: 8px 9px;
        }

        .pathway-audit-mini span {
          font-size: 8.5px;
        }

        .pathway-audit-mini strong {
          font-size: 9.6px;
          line-height: 1.28;
        }

        .pathway-focus {
          border-radius: 18px;
          padding: 20px;
        }

        .pathway-card[data-pathway-step="02"] .pathway-browser-copy {
          padding-top: 15px;
        }

        .pathway-card[data-pathway-step="02"] .pathway-focus {
          padding-top: 20px;
        }

        .pathway-focus-title {
          margin-top: 10px;
          font-size: 15px;
          line-height: 1.28;
        }

        .pathway-focus ul {
          gap: 8px;
          margin-top: 14px;
        }

        .pathway-focus li {
          font-size: 11.2px;
          line-height: 1.4;
        }

        .pathway-delivery {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 6px;
          margin-top: 14px;
        }

        .pathway-delivery span {
          min-height: 30px;
          padding: 0 6px;
          font-size: 9px;
          line-height: 1;
        }

        .pathway-link {
          width: 100%;
          min-height: 48px;
          justify-content: center;
          margin-top: 12px;
          font-size: 13px;
        }

        .pathway-proof-strip {
          grid-template-columns: 1fr;
          margin-top: 24px;
          border-radius: 20px;
        }

        .pathway-proof {
          border-right: 0;
          border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        }

        .pathway-proof:last-child {
          border-bottom: 0;
        }

        .deliverables-section {
          padding: 64px 20px;
        }

        .packages-section {
          padding: 64px 20px;
        }

        .package-grid {
          grid-template-columns: 1fr;
          gap: 18px;
          margin-top: 40px;
        }

        .package-card {
          min-height: 0;
          padding: 28px 24px;
        }

        .package-card h3 {
          font-size: 23px;
        }

        .package-price {
          font-size: 27px;
        }

        .scope-ledger {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-top: 18px;
        }

        .faq-section {
          padding: 64px 20px;
        }

        .faq-list {
          margin-top: 36px;
        }

        .faq-item summary {
          font-size: 16px;
          padding: 20px 54px 20px 20px;
        }

        .faq-item p {
          font-size: 14px;
          padding: 16px 20px 20px;
        }

        .delivery-stage-grid {
          grid-template-columns: 1fr;
          gap: 12px;
          margin: 40px 0 28px;
        }

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

        .deliverables-copy {
          padding-top: 0;
        }

        .deliverables-header .section-tag,
        .deliverables-header .section-title {
          text-align: center;
        }

        .deliverables-header .section-title {
          margin-inline: auto;
        }

        .deliverables-lead {
          gap: 8px;
          margin-inline: auto;
          text-align: center;
        }

        .deliverables-brief-card {
          padding: 22px;
        }

        .deliverables-brief-card strong {
          font-size: 20px;
        }

        .delivery-stage-card {
          min-height: 0;
          padding: 18px;
        }

        .deliverables-grid {
          grid-template-columns: 1fr;
          gap: 40px;
          margin-top: 40px;
        }

        .deliverables-column:first-child,
        .deliverables-column:last-child {
          padding: 0;
        }

        .deliverables-column:first-child {
          padding: 24px;
          border-radius: 20px;
        }

        .deliverables-heading {
          font-size: 22px;
        }

        .qa-card {
          padding: 28px 24px;
          border-radius: 20px;
        }

        .qa-card-head {
          align-items: flex-start;
          flex-direction: column;
          gap: 14px;
        }

        .qa-card-head strong {
          font-size: 26px;
        }

        .check-list li {
          font-size: 15px;
        }

        .deliverables-note {
          flex-direction: column;
          align-items: stretch;
          gap: 14px;
          text-align: left;
        }

        .deliverables-note a {
          width: 100%;
        }

        .get-started-section {
          padding: 64px 20px;
        }

        .start-card-grid {
          grid-template-columns: 1fr;
          margin-top: 40px;
        }

        .start-card {
          height: auto;
          min-height: 300px;
          padding: 32px 28px;
        }

        .start-card h3 {
          font-size: 24px;
        }

        .assurance-section {
          padding: 64px 20px;
        }

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

        .assurance-item {
          padding: 28px 24px;
          border-right: 0;
          border-bottom: 1px solid #e2e8f0;
        }

        .assurance-item:last-child {
          border-bottom: 0;
        }

        .assurance-value {
          font-size: 36px;
        }

        .cta-section {
          padding: 48px 20px;
        }

        .cta-title {
          font-size: clamp(28px, 7.4vw, 34px);
          line-height: 1.22;
          word-break: keep-all;
          overflow-wrap: normal;
        }

        .cta-subtitle {
          margin-top: 14px;
          font-size: 13.5px;
          line-height: 1.62;
        }

        .cta-actions {
          flex-direction: column;
          align-items: stretch;
        }

        .diagnosis-form {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-top: 18px;
          border-radius: 20px;
          padding: 16px;
          backdrop-filter: none;
        }

        .form-field label,
        .form-consent {
          font-size: 12px;
        }

        .form-field input,
        .form-field select,
        .form-field textarea {
          height: 46px;
          border-radius: 10px;
          font-size: 14px;
          padding: 12px 14px;
        }

        .form-field textarea {
          min-height: 84px;
        }

        .privacy-note {
          font-size: 10.5px;
          line-height: 1.55;
          padding: 12px;
        }

        .form-actions {
          flex-direction: column;
          align-items: stretch;
        }

        .form-submit,
        .form-copy {
          width: 100%;
        }

        .cta-preflight {
          display: flex;
          flex-wrap: wrap;
          gap: 7px;
          justify-content: center;
          margin-top: 18px;
        }

        .cta-preflight li {
          width: auto;
          min-height: 34px;
          align-items: center;
          justify-content: center;
          padding: 8px 11px;
          text-align: center;
          font-size: 10.5px;
          line-height: 1;
        }

        .cta-preflight li:last-child {
          grid-column: auto;
        }

        .cta-actions .cta-button-primary[href="#diagnosis-form"] {
          display: none;
        }

        .site-footer {
          padding: 64px 20px 32px;
        }

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

        .footer-brand {
          margin-bottom: 28px;
        }

        .footer-accordion {
          border-top: 1px solid rgba(148, 163, 184, 0.18);
        }

        .footer-accordion:last-child {
          border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        }

        .footer-heading {
          margin: 0;
        }

        .footer-toggle {
          min-height: 58px;
          color: #f8fafc;
          cursor: pointer;
          touch-action: manipulation;
        }

        .footer-toggle-icon {
          display: inline-block;
        }

        .footer-accordion.is-open .footer-toggle-icon::after {
          opacity: 0;
          transform: translate(-50%, -50%) rotate(90deg) scaleX(0.2);
        }

        .js-enabled .footer-accordion .footer-list {
          max-height: 0;
          overflow: hidden;
          gap: 0;
          opacity: 0;
          transform: translateY(-4px);
          transition:
            max-height 0.28s ease,
            opacity 0.2s ease,
            padding 0.28s ease,
            transform 0.28s ease;
        }

        .js-enabled .footer-accordion.is-open .footer-list {
          max-height: 360px;
          gap: 4px;
          opacity: 1;
          padding: 0 0 16px;
          transform: translateY(0);
        }

        .footer-list a,
        .footer-list span {
          display: flex;
          min-height: 44px;
          align-items: center;
          font-size: 14px;
        }

        #footer-contact .footer-line {
          min-height: 38px;
          font-size: 13px;
          line-height: 1.3;
          white-space: nowrap;
        }

        .footer-list a {
          min-height: 44px;
        }

        .footer-bottom {
          margin-top: 34px;
        }

        .compare-arrow::after,
        .concept-track {
          animation: none !important;
        }

        .reveal-item,
        .scroll-reveal,
        .problem-card {
          opacity: 0;
          transform: translateY(12px);
          filter: none !important;
          transition-duration: 0.42s;
        }

        .reveal-item.is-visible,
        .scroll-reveal.is-visible,
        .problem-grid.is-visible .problem-card {
          opacity: 1;
          transform: none;
        }
      }

      /* Final QA tightening: keep Korean copy readable, align key modules, and prevent sticky bleed. */
      .hero-title,
      .hero-subtitle,
      .opening-title,
      .opening-copy,
      .question-bubble strong,
      .question-bubble span,
      .project-paths-title,
      .project-paths-copy,
      .pathway-card h3,
      .pathway-card p,
      .pathway-browser-copy h4,
      .pathway-browser-copy p,
      .pathway-focus-title,
      .pathway-focus li,
      .stack-card h3,
      .stack-card p,
      .stack-deliverable strong,
      .comparison-card h3,
      .comparison-card p,
      .comparison-script strong,
      .package-copy,
      .faq-item p,
      .footer-line {
        word-break: keep-all;
        overflow-wrap: normal;
      }

      .compare-arrow::after {
        content: none !important;
      }

      .project-step-list {
        margin-top: auto;
        transform: none !important;
      }

      .pathway-proof-strip,
      .pathway-card,
      .concept-builds,
      .opening-system {
        isolation: isolate;
      }

      .pathway-hotspot,
      .pathway-delivery span,
      .pathway-proof span,
      .portfolio-scroll-hint,
      .footer-line {
        white-space: nowrap;
      }

      /* Project Paths alignment pass: match the left step rail to the active right card. */
      @media (min-width: 901px) {
        .project-paths {
          --pathway-card-height: clamp(620px, 68vh, 700px);
        }

        .project-paths-inner {
          padding-top: clamp(164px, 15vh, 190px);
          padding-bottom: clamp(152px, 14vh, 176px);
        }

        .project-paths-head-sticky {
          min-height: var(--pathway-card-height);
          max-height: none;
        }

        .project-step-list {
          width: min(100%, 480px);
          gap: 14px;
          margin: auto 0 0;
        }

        .project-step-list a {
          min-height: 72px;
          grid-template-columns: 44px minmax(0, 1fr);
          gap: 14px;
          padding: 14px 16px;
        }

        .project-step-list span {
          width: 44px;
          height: 44px;
          font-size: 13px;
        }

        .project-step-list strong {
          font-size: 15px;
          line-height: 1.25;
        }

        .project-step-list em {
          margin-top: 5px;
          font-size: 12.2px;
          line-height: 1.35;
        }

        .pathway-card {
          min-height: var(--pathway-card-height);
        }
      }

      @media (max-width: 768px) {
        .project-paths-inner {
          padding-top: 132px;
          padding-bottom: 94px;
        }

        .project-step-list {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-top: 34px;
        }

        .project-step-list a {
          min-height: 58px;
          padding: 10px 12px;
        }
      }

      .seo-hub-section {
        background:
          linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
          #f8fafc;
        background-size: 44px 44px;
        padding: 104px 20px;
      }

      .seo-hub-inner {
        display: grid;
        width: min(100%, var(--max-width));
        grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
        gap: clamp(44px, 6vw, 76px);
        align-items: center;
        margin: 0 auto;
      }

      .seo-hub-copy {
        align-self: center;
      }

      .seo-hub-copy .section-title {
        margin-top: 12px;
        font-size: clamp(32px, 3vw, 42px);
      }

      .seo-hub-copy p:last-child {
        margin: 18px 0 0;
        color: #64748b;
        font-size: 15px;
        line-height: 1.72;
        word-break: keep-all;
      }

      .seo-link-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }

      .seo-link-card {
        display: flex;
        min-height: 178px;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid #dbeafe;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
        padding: 24px;
        transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      }

      .seo-link-card:hover,
      .seo-link-card:focus-visible {
        border-color: #93c5fd;
        box-shadow: 0 24px 58px rgba(37, 99, 235, 0.12);
        transform: translateY(-3px);
      }

      .seo-link-card span {
        color: #2563eb;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.1em;
        line-height: 1;
        text-transform: uppercase;
      }

      .seo-link-card strong {
        display: block;
        margin-top: 16px;
        color: #0f172a;
        font-size: 20px;
        font-weight: 760;
        line-height: 1.35;
        word-break: keep-all;
      }

      .seo-link-card p {
        margin: 12px 0 0;
        color: #64748b;
        font-size: 14px;
        line-height: 1.62;
        word-break: keep-all;
      }

      .seo-link-card em {
        display: inline-flex;
        margin-top: 22px;
        color: #2563eb;
        font-size: 14px;
        font-style: normal;
        font-weight: 800;
        line-height: 1;
      }

      @media (min-width: 901px) {
        .opening-system {
          min-height: 230vh;
        }

        .opening-stage {
          width: min(1500px, 96vw);
          margin-top: clamp(150px, 19vh, 188px);
        }

        .buyer-window {
          min-height: min(70vh, 690px);
        }

        .question-bubble-layer {
          top: clamp(92px, 13vh, 128px);
          width: min(860px, 72%);
          gap: 18px 22px;
        }

        .question-bubble {
          min-height: 134px;
          padding: 26px 30px 27px;
          border-radius: 25px 25px 25px 9px;
        }

        .question-bubble strong {
          font-size: clamp(20px, 1.35vw, 25px);
          font-weight: 650;
          line-height: 1.28;
          text-wrap: pretty;
        }

        .question-bubble span {
          margin-top: 12px;
          font-size: 14px;
          line-height: 1.55;
        }

        .project-paths-inner {
          padding-top: clamp(148px, 15vh, 176px);
          padding-bottom: clamp(148px, 15vh, 176px);
        }

        .project-paths-layout {
          grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
          gap: clamp(72px, 7vw, 108px);
        }

        .project-paths-title {
          max-width: 470px;
          font-size: clamp(34px, 2.8vw, 40px);
          line-height: 1.22;
        }

        .project-paths-copy {
          max-width: 500px;
          line-height: 1.72;
        }

        .pathway-workbench {
          grid-template-columns: minmax(380px, 1.08fr) minmax(300px, 0.92fr);
          gap: 24px;
        }

        .pathway-browser-copy {
          padding-right: 28px;
          padding-left: 28px;
        }

        .pathway-browser-copy h4 {
          font-size: clamp(21px, 1.45vw, 24px);
          line-height: 1.26;
          text-wrap: balance;
        }

        .pathway-browser-copy p {
          max-width: 96%;
          font-size: 12.6px;
          line-height: 1.58;
          text-wrap: pretty;
        }

        .pathway-chip-row {
          padding-right: 28px;
          padding-left: 28px;
        }

        .pathway-focus {
          padding: 32px 28px 30px;
        }

        .pathway-focus li {
          font-size: 11.6px;
          line-height: 1.48;
        }

        .pathway-proof-strip {
          margin-top: 54px;
        }

        .visibility-stack {
          height: 310vh;
          background:
            radial-gradient(circle at 78% 18%, rgba(37, 99, 235, 0.32), transparent 34%),
            radial-gradient(circle at 18% 74%, rgba(14, 165, 233, 0.16), transparent 30%),
            linear-gradient(180deg, #050914 0%, #07111f 48%, #0f172a 100%);
        }

        .visibility-heading {
          top: clamp(104px, 11vh, 136px);
        }

        .visibility-heading h2 {
          max-width: 980px;
          margin-right: auto;
          margin-left: auto;
          font-size: clamp(36px, 3.4vw, 52px);
          line-height: 1.16;
        }

        .visibility-heading .visibility-copy {
          white-space: normal;
          max-width: 820px;
        }

        .visibility-stage {
          width: min(1180px, 90vw);
          height: min(520px, 60vh);
          margin-top: clamp(126px, 17vh, 170px);
        }

        .stack-card {
          padding: 40px 48px 36px;
        }

        .stack-card h3 {
          font-size: clamp(34px, 3.15vw, 48px);
          line-height: 1.12;
        }

        .stack-card p {
          max-width: 720px;
          font-size: 15px;
          line-height: 1.65;
        }

        .comparison-label {
          align-self: flex-start;
        }
      }

      @media (max-width: 768px) {
        .hero {
          min-height: 100svh;
          align-items: center;
          justify-content: center;
          padding-top: calc(66px + clamp(32px, 6.5svh, 54px));
          padding-bottom: clamp(40px, 7svh, 60px);
        }

        .hero-inner {
          transform: translateY(clamp(-8px, -1.2svh, -2px));
        }

        .hero-title {
          width: min(100%, 382px);
          font-size: clamp(25px, 6.1vw, 28px);
          font-weight: 720;
          line-height: 1.29;
        }

        .hero-subtitle {
          max-width: 352px;
          font-size: 14px;
          line-height: 1.62;
        }

        .opening-system-inner {
          padding-top: 54px;
          padding-bottom: 56px;
        }

        .opening-title {
          max-width: 340px;
          margin-right: auto;
          margin-left: auto;
          font-size: 27px;
          line-height: 1.18;
        }

        .opening-copy {
          max-width: 340px;
          margin-right: auto;
          margin-left: auto;
          font-size: 13.4px;
          line-height: 1.6;
        }

        .preview-wireframe {
          min-height: 332px;
          opacity: 0.34;
          filter: blur(0.7px);
        }

        .question-bubble-layer {
          position: relative;
          top: auto;
          right: auto;
          left: auto;
          grid-template-columns: 1fr;
          gap: 10px;
          margin: -150px 8px 14px;
        }

        .question-bubble,
        .question-bubble:nth-child(n) {
          min-height: auto;
          padding: 18px 18px 19px;
          border-radius: 19px 19px 19px 7px;
        }

        .question-bubble strong {
          font-size: clamp(16px, 4.1vw, 17px);
          font-weight: 620;
          line-height: 1.3;
          text-wrap: pretty;
        }

        .question-bubble span {
          margin-top: 8px;
          font-size: 12.2px;
          line-height: 1.52;
        }

        .concept-heading-row {
          width: min(calc(100% - 40px), 350px);
          margin-right: auto;
          margin-left: auto;
        }

        .concept-mask {
          --portfolio-gutter: max(20px, calc((100vw - 350px) / 2));
        }

        .project-paths-inner {
          padding-top: 96px;
          padding-bottom: 76px;
        }

        .project-paths-title {
          max-width: 344px;
          font-size: clamp(27px, 6.9vw, 30px);
          font-weight: 730;
          line-height: 1.22;
        }

        .project-paths-copy {
          max-width: 344px;
          font-size: 13.6px;
          line-height: 1.72;
        }

        .project-step-list {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-top: 30px;
          transform: none !important;
        }

        .pathway-card {
          padding: 20px 16px 22px;
        }

        .pathway-workbench {
          gap: 12px;
        }

        .pathway-browser-copy h4 {
          font-size: clamp(18px, 4.8vw, 20px);
          font-weight: 700;
          line-height: 1.28;
        }

        .pathway-browser-copy p {
          font-size: 12.4px;
          line-height: 1.58;
        }

        .pathway-focus li {
          font-size: 12px;
          line-height: 1.45;
        }

        .pathway-proof-strip {
          display: none;
        }

        .pathway-proof strong,
        .pathway-proof span {
          white-space: normal;
        }

        .visibility-stack {
          height: auto;
        }

        .visibility-pin {
          position: relative;
          height: auto;
          min-height: 0;
          padding: 68px 20px;
        }

        .visibility-heading {
          position: relative;
          top: auto;
          margin-bottom: 32px;
          opacity: 1 !important;
          transform: none !important;
        }

        .visibility-heading h2 {
          font-size: clamp(27px, 6.9vw, 31px);
          font-weight: 720;
          line-height: 1.22;
        }

        .visibility-heading .visibility-copy {
          max-width: 340px;
          margin-right: auto;
          margin-left: auto;
          font-size: 13.3px;
          line-height: 1.62;
        }

        .visibility-stage {
          display: grid;
          width: min(100%, 350px);
          height: auto;
          gap: 14px;
          margin: 0 auto;
          transform: none !important;
        }

        .stack-card {
          position: relative;
          inset: auto;
          display: grid;
          min-height: 0;
          grid-template-columns: 1fr;
          gap: 14px;
          padding: 22px 20px;
          opacity: 1 !important;
          transform: none !important;
        }

        .stack-card h3 {
          font-size: 22px;
          font-weight: 700;
          line-height: 1.22;
        }

        .stack-card p {
          font-size: 13px;
          line-height: 1.6;
        }

        .stack-proof,
        .stack-flow,
        .stack-deliverables {
          grid-template-columns: 1fr;
        }

        .stack-proof-row,
        .stack-deliverable {
          min-height: auto;
        }

        .stack-flow-step em {
          display: none;
        }

        .stack-deliverables {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .stack-deliverable {
          padding: 12px;
        }

        .stack-deliverable strong {
          font-size: 12px;
          line-height: 1.38;
        }

        .comparison-card h3 {
          font-size: 23px;
          line-height: 1.24;
        }

        .seo-hub-section {
          padding: 64px 20px;
        }

        .seo-hub-inner {
          grid-template-columns: 1fr;
          gap: 28px;
          width: min(100%, 350px);
          align-items: start;
        }

        .seo-hub-copy {
          align-self: auto;
        }

        .seo-hub-copy .section-title {
          font-size: clamp(28px, 7vw, 32px);
          line-height: 1.22;
        }

        .seo-hub-copy p:last-child {
          font-size: 13.4px;
          line-height: 1.64;
        }

        .seo-link-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .seo-link-card {
          min-height: auto;
          padding: 20px;
        }

        .seo-link-card strong {
          font-size: 18px;
          line-height: 1.32;
        }

        .seo-link-card p {
          font-size: 13px;
          line-height: 1.58;
        }

        .footer-line {
          white-space: nowrap;
        }
      }

      @media (max-width: 768px) {
        .section-title,
        .opening-title,
        .cta-title {
          font-weight: 720;
        }

        .concept-mask {
          padding-bottom: 18px;
        }

        .concept-card {
          width: min(calc(100vw - 40px), 430px);
          flex-basis: min(calc(100vw - 40px), 430px);
        }

        .question-bubble,
        .question-bubble:nth-child(n) {
          min-height: 0;
          justify-content: flex-start;
          overflow: visible;
          padding: 19px 18px 24px;
        }

        .question-bubble strong {
          font-size: clamp(16px, 4vw, 17px);
          line-height: 1.34;
          text-wrap: pretty;
        }

        .question-bubble span {
          font-size: clamp(11.2px, 2.85vw, 12.2px);
          line-height: 1.56;
        }

        .pathway-card,
        .pathway-card.scroll-reveal {
          width: min(100%, 350px);
          min-height: 0;
          overflow: visible;
          padding: 22px 16px 24px;
        }

        .pathway-card::after {
          display: none;
        }

        .pathway-browser,
        .pathway-focus {
          overflow: visible;
        }

        .pathway-chip-row {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          padding-right: 16px;
          padding-left: 16px;
        }

        .pathway-hotspot {
          white-space: normal;
        }

        .pathway-delivery {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .pathway-delivery span {
          white-space: normal;
          line-height: 1.22;
        }

        .comparison-card {
          min-height: 0;
          overflow: visible;
          padding: 30px 22px 34px;
          padding-bottom: 34px;
        }

        .comparison-card p {
          max-width: none;
        }

        .comparison-script {
          display: grid;
          gap: 10px;
          margin: 22px 0;
        }

        .comparison-script li {
          grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
          gap: 12px;
          align-items: start;
          border-radius: 14px;
          background: rgba(15, 23, 42, 0.2);
          padding: 12px;
        }

        .comparison-script li span,
        .comparison-script li strong {
          min-width: 0;
          overflow-wrap: normal;
          word-break: keep-all;
        }

        .comparison-points {
          margin-top: 18px;
        }

        .comparison-points li {
          white-space: normal;
          line-height: 1.25;
        }

        .comparison-after {
          padding-bottom: 40px;
        }

        .comparison-after::after {
          display: none;
        }

        .package-card {
          padding-bottom: 34px;
        }

        .js-enabled .footer-accordion.is-open .footer-list {
          max-height: 760px;
        }

        .footer-list a,
        .footer-list span {
          min-height: 40px;
        }

        #footer-contact .footer-line {
          display: inline-flex;
          width: max-content;
          max-width: 100%;
          white-space: nowrap;
        }
      }

      @media (max-width: 768px) {
        :root {
          --lpkit-mobile-frame: min(calc(100vw - 36px), 430px);
        }

        .opening-head,
        .opening-stage,
        .concept-heading-row,
        .project-paths-head,
        .project-step-list,
        .pathway-sequence,
        .pathway-card,
        .pathway-card.scroll-reveal {
          width: var(--lpkit-mobile-frame);
          max-width: var(--lpkit-mobile-frame);
          margin-right: auto;
          margin-left: auto;
        }

        .concept-mask {
          --portfolio-gutter: max(18px, calc((100vw - var(--lpkit-mobile-frame)) / 2));
        }

        .concept-card {
          width: var(--lpkit-mobile-frame);
          flex-basis: var(--lpkit-mobile-frame);
        }

        .js-enabled .concept-card.scroll-reveal,
        .js-enabled .concept-card.scroll-reveal:not(.is-visible):hover,
        .js-enabled .concept-card.scroll-reveal.is-visible,
        .js-enabled .concept-card.scroll-reveal.is-visible:hover {
          opacity: 1;
          transform: none;
          transition-delay: 0ms;
        }

        .project-paths-inner {
          padding-top: clamp(118px, 22vw, 154px);
          padding-bottom: clamp(86px, 17vw, 128px);
        }

        .project-step-list {
          grid-template-columns: 1fr;
          gap: 10px;
          margin-top: 34px;
        }

        .project-step-list a {
          min-height: 64px;
          grid-template-columns: 42px minmax(0, 1fr);
          gap: 12px;
          padding: 11px 14px;
        }

        .project-step-list span {
          width: 42px;
          height: 42px;
          font-size: 12px;
        }

        .project-step-list strong {
          font-size: 13px;
          line-height: 1.28;
        }

        .project-step-list em {
          display: block;
          margin-top: 2px;
          font-size: 11px;
          line-height: 1.32;
        }

        .pathway-card,
        .pathway-card.scroll-reveal {
          padding: 24px 18px 26px;
        }

        .package-card {
          overflow: visible;
          padding-bottom: 48px;
        }
      }

      @media (min-width: 640px) and (max-width: 768px) {
        :root {
          --lpkit-mobile-frame: min(calc(100vw - 80px), 620px);
        }

        .opening-head,
        .opening-stage {
          width: var(--lpkit-mobile-frame);
          max-width: var(--lpkit-mobile-frame);
        }

        .question-bubble-layer {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          margin: -142px 18px 16px;
        }
      }

      @media (max-width: 768px) and (max-height: 740px) {
        .hero {
          align-items: center;
          min-height: 100vh;
          min-height: 100svh;
          min-height: 100dvh;
          padding-top: 86px;
          padding-bottom: 34px;
        }

        .eyebrow {
          margin-bottom: 18px;
        }

        .hero-title {
          font-size: clamp(24px, 6.2vw, 29px);
          line-height: 1.25;
        }

        .hero-subtitle {
          margin-top: 16px;
          font-size: 13.2px;
        }

        .hero-actions {
          margin-top: 20px;
        }
      }

      /* Launch QA layer: one source of truth for frame, spacing, and mobile clipping. */
      :root {
        --lpkit-wide-frame: min(calc(100vw - 160px), 1280px);
      }

      @media (min-width: 1180px) {
        .project-paths {
          --pathway-card-height: clamp(710px, 78vh, 790px);
        }

        .concept-builds {
          --portfolio-frame: var(--lpkit-wide-frame);
          padding-top: 120px;
          padding-bottom: 120px;
        }

        .project-paths-inner {
          width: var(--lpkit-wide-frame);
          padding-top: clamp(208px, 19vh, 248px);
          padding-bottom: clamp(184px, 16vh, 212px);
        }

        .project-paths-layout {
          grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1.28fr);
          gap: clamp(76px, 6vw, 96px);
        }

        .project-paths-head-sticky {
          min-height: var(--pathway-card-height);
        }

        .project-step-list {
          width: min(100%, 480px);
          margin-top: auto;
        }

        .project-step-list a {
          min-height: 76px;
          padding: 14px 18px;
        }

        .pathway-card {
          min-height: var(--pathway-card-height);
        }

        .opening-stage {
          width: min(1500px, calc(100vw - 96px));
        }

        .visibility-heading {
          top: clamp(104px, 11vh, 132px);
        }

        .visibility-stage {
          width: min(1180px, var(--lpkit-wide-frame));
          height: min(640px, 68vh);
          margin-top: clamp(148px, 18vh, 188px);
        }

        .stack-card {
          min-height: 100%;
          overflow: visible;
          padding: 44px 52px 40px;
        }

        .comparison-card {
          height: auto;
          min-height: 620px;
          overflow: visible;
        }

        .comparison-after {
          min-height: 660px;
        }

        .package-card {
          height: auto;
          min-height: 640px;
          overflow: visible;
        }

        .before-after-section,
        .assurance-section {
          padding-top: 120px;
          padding-bottom: 120px;
        }
      }

      @media (min-width: 901px) and (max-width: 1179px) {
        :root {
          --lpkit-wide-frame: min(calc(100vw - 80px), 1120px);
        }

        .project-paths {
          --pathway-card-height: clamp(680px, 76vh, 760px);
        }

        .concept-builds {
          --portfolio-frame: var(--lpkit-wide-frame);
        }

        .project-paths-inner {
          width: var(--lpkit-wide-frame);
          padding-top: 176px;
          padding-bottom: 160px;
        }

        .comparison-card,
        .package-card {
          height: auto;
          overflow: visible;
        }
      }

      @media (max-width: 768px) {
        :root {
          --lpkit-mobile-frame: min(calc(100vw - 36px), 430px);
        }

        .nav {
          width: calc(100% - 32px);
          min-height: 64px;
          padding: 0 16px;
        }

        .nav-links {
          gap: 18px;
        }

        .nav-links a:first-child,
        .nav-links a:last-child {
          display: inline-flex;
          white-space: nowrap;
          font-size: 14px;
        }

        .hero {
          min-height: 100dvh;
          padding-top: calc(64px + clamp(22px, 5svh, 42px));
          padding-bottom: clamp(28px, 5svh, 48px);
        }

        .hero-inner {
          transform: none;
        }

        .hero-title {
          width: min(100%, 360px);
          font-size: clamp(24px, 6vw, 28px);
          line-height: 1.28;
          text-wrap: balance;
        }

        .hero-subtitle {
          max-width: 340px;
          font-size: 13.6px;
          line-height: 1.62;
        }

        .hero-actions {
          width: min(100%, 350px);
          gap: 12px;
        }

        .hero-actions .button {
          min-height: 58px;
          font-size: 15px;
        }

        .trust-bar {
          margin-top: 0;
        }

        .opening-system-inner {
          padding-top: 72px;
          padding-bottom: 72px;
        }

        .opening-title {
          max-width: var(--lpkit-mobile-frame);
          font-size: clamp(26px, 6.7vw, 30px);
          line-height: 1.22;
        }

        .opening-copy {
          max-width: var(--lpkit-mobile-frame);
          font-size: 13.4px;
          line-height: 1.7;
        }

        .preview-wireframe {
          min-height: 300px;
        }

        .question-bubble-layer {
          width: min(100%, 340px);
          margin: -128px auto 0;
        }

        .question-bubble {
          height: auto;
          min-height: 124px;
          overflow: visible;
          padding: 18px 18px 19px;
        }

        .question-bubble strong {
          font-size: 16px;
          font-weight: 650;
        }

        .question-bubble span {
          font-size: 12.4px;
          line-height: 1.55;
        }

        .concept-heading-row,
        .project-paths-head,
        .project-step-list,
        .pathway-sequence,
        .pathway-card,
        .pathway-card.scroll-reveal {
          width: var(--lpkit-mobile-frame);
          max-width: var(--lpkit-mobile-frame);
        }

        .concept-mask {
          --portfolio-gutter: max(18px, calc((100vw - var(--lpkit-mobile-frame)) / 2));
        }

        .concept-card {
          width: var(--lpkit-mobile-frame);
          flex-basis: var(--lpkit-mobile-frame);
        }

        .project-paths-inner {
          padding-top: 128px;
          padding-bottom: 104px;
        }

        .project-paths-title {
          max-width: var(--lpkit-mobile-frame);
          font-size: clamp(28px, 7vw, 31px);
          line-height: 1.2;
        }

        .project-paths-copy {
          max-width: var(--lpkit-mobile-frame);
          font-size: 13.4px;
          line-height: 1.72;
        }

        .project-step-list {
          margin-top: 34px;
          gap: 12px;
        }

        .project-step-list a {
          min-height: 68px;
          padding: 12px 14px;
        }

        .pathway-card,
        .pathway-card.scroll-reveal {
          padding: 24px 18px 28px;
        }

        .pathway-workbench {
          grid-template-columns: 1fr;
          gap: 14px;
        }

        .pathway-browser {
          min-height: 310px;
        }

        .pathway-focus {
          min-height: auto;
          padding: 22px 18px;
        }

        .pathway-focus li {
          font-size: 11.6px;
          line-height: 1.5;
        }

        .visibility-pin {
          padding: 76px 20px;
        }

        .visibility-stage {
          width: min(100%, var(--lpkit-mobile-frame));
          gap: 16px;
        }

        .stack-card {
          height: auto;
          min-height: unset;
          overflow: visible;
          padding: 24px 20px;
        }

        .comparison-card,
        .comparison-before,
        .comparison-after,
        .package-card {
          height: auto !important;
          min-height: unset;
          overflow: visible;
        }

        .comparison-card {
          padding-bottom: 48px;
        }

        .package-card {
          padding-bottom: 52px;
        }

        .stack-deliverables {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .footer-line,
        #footer-contact .footer-line,
        .lpkit-footer-line {
          display: inline-flex;
          white-space: nowrap;
        }
      }

      @media (max-width: 390px) {
        :root {
          --lpkit-mobile-frame: calc(100vw - 32px);
        }

        .nav {
          width: calc(100% - 28px);
          padding: 0 14px;
        }

        .nav-links {
          gap: 14px;
        }

        .nav-links a:first-child,
        .nav-links a:last-child {
          font-size: 13.5px;
        }

        .hero-title {
          font-size: clamp(23px, 6.1vw, 26px);
        }
      }

      /* Final hardening pass: resolves launch QA overflows and mobile rhythm regressions. */
      @media (min-width: 1180px) {
        .visibility-stage {
          height: min(520px, 60vh);
          margin-top: clamp(104px, 14vh, 136px);
        }

        .stack-card {
          min-height: 100%;
          overflow: hidden;
        }

        .compare-arrow {
          top: 23px;
        }

        .comparison-panel {
          min-width: 0;
        }

        .comparison-card {
          height: auto;
          min-height: 0;
          overflow: visible;
          padding: 34px 36px 38px;
        }

        .comparison-before,
        .comparison-after {
          min-height: 0;
        }

        .comparison-script li {
          grid-template-columns: 56px minmax(0, 1fr);
        }

        .comparison-script li strong {
          min-width: 0;
          overflow-wrap: normal;
          word-break: keep-all;
        }

        .package-card {
          height: auto;
          min-height: 0;
          overflow: visible;
          padding: 30px;
        }

        .package-grid {
          align-items: stretch;
        }

        .concept-card-body {
          min-height: 46px;
          padding: 18px 4px 0;
        }

        .diagnosis-form .form-field:has(#diagnosis-goal) {
          grid-column: 1 / -1;
        }
      }

      @media (min-width: 901px) and (max-width: 1179px) {
        .visibility-stage {
          height: min(508px, 60vh);
          margin-top: clamp(104px, 14vh, 136px);
        }

        .compare-arrow {
          top: 23px;
        }

        .comparison-card,
        .package-card {
          height: auto;
          min-height: 0;
          overflow: visible;
        }

        .diagnosis-form .form-field:has(#diagnosis-goal) {
          grid-column: 1 / -1;
        }
      }

      @media (max-width: 768px) {
        .hero {
          min-height: 100vh;
          min-height: 100svh;
          min-height: 100dvh;
        }

        .opening-system-inner {
          top: auto;
          overflow: visible;
        }

        .preview-wireframe {
          min-height: clamp(280px, 76vw, 332px);
        }

        .question-bubble-layer {
          width: min(100%, 344px);
          margin: clamp(-132px, -31vw, -108px) auto 0;
        }

        .question-bubble,
        .question-bubble:nth-child(n) {
          min-height: auto;
          overflow: visible;
          padding: 18px 18px 22px;
        }

        .concept-mask {
          margin-top: 28px;
          overflow-y: visible;
        }

        .concept-card-body {
          min-height: 54px;
          padding-top: 16px;
        }

        .project-paths-inner {
          padding-top: clamp(116px, 23vw, 148px);
          padding-bottom: clamp(94px, 18vw, 124px);
        }

        .project-paths-head-sticky {
          min-height: auto;
        }

        .pathway-card,
        .pathway-card.scroll-reveal,
        .comparison-card,
        .comparison-before,
        .comparison-after,
        .package-card {
          height: auto !important;
          min-height: 0;
          overflow: visible;
        }

        .comparison-card {
          padding-bottom: 44px;
        }

        .package-card {
          padding-bottom: 48px;
        }

        .diagnosis-form {
          gap: 12px;
        }

        .diagnosis-form .form-field {
          grid-column: 1 / -1;
        }

        .privacy-note a,
        .footer-list a,
        .footer-list span {
          min-height: 44px;
        }

      .js-enabled .footer-accordion.is-open .footer-list {
          gap: 4px;
          padding-bottom: 16px;
        }
      }

      @media (max-width: 768px) {
        .nav-links {
          gap: clamp(10px, 3vw, 18px);
        }

        .nav-links > a {
          display: none;
        }

        .nav-links > a[href="#portfolio"],
        .nav-links > a[href="#get-started"] {
          display: inline-flex;
          font-size: 14px;
          font-weight: 700;
        }

        .lang-switch {
          display: inline-flex;
          margin-left: 0;
          padding: 3px;
        }

        .nav-links .lang-switch a {
          display: inline-flex;
          min-height: 28px;
          padding: 0 7px;
          font-size: 10.5px;
        }
      }

      @media (max-width: 390px) {
        .nav-links {
          gap: 10px;
        }

        .nav-links > a[href="#portfolio"],
        .nav-links > a[href="#get-started"] {
          font-size: 13px;
        }

        .nav-links .lang-switch a {
          padding: 0 6px;
          font-size: 10px;
        }
      }

      html[lang="ja"] body,
      html[lang="ja"] button,
      html[lang="ja"] input,
      html[lang="ja"] select,
      html[lang="ja"] textarea {
        font-family: "Pretendard Variable", "Pretendard", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", system-ui, sans-serif;
        font-feature-settings: "palt" 1;
      }

      html[lang="ja"] .hero-title,
      html[lang="ja"] .section-title,
      html[lang="ja"] .opening-title,
      html[lang="ja"] .project-paths-title,
      html[lang="ja"] .stack-card h3,
      html[lang="ja"] .package-card h3,
      html[lang="ja"] .pathway-browser-copy h4,
      html[lang="ja"] .comparison-card h3 {
        letter-spacing: -0.02em;
        line-break: strict;
        word-break: keep-all;
      }

      html[lang="ja"] .hero-subtitle,
      html[lang="ja"] .section-sub,
      html[lang="ja"] .opening-copy,
      html[lang="ja"] .package-copy,
      html[lang="ja"] .faq-item p,
      html[lang="ja"] .pathway-card p {
        line-height: 1.82;
      }

      @media (max-width: 768px) {
        html[lang="ja"] .hero-title {
          font-size: clamp(38px, 10vw, 48px);
          line-height: 1.18;
        }

        html[lang="ja"] .section-title,
        html[lang="ja"] .opening-title,
        html[lang="ja"] .project-paths-title {
          line-height: 1.24;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
        }

        .hero-blob,
        .hero-blob::before,
        .question-bubble,
        .compare-arrow::after,
        .concept-track {
          transition: none;
          animation: none;
        }

        .reveal-item,
        .scroll-reveal,
        .problem-card,
        .concept-card.scroll-reveal,
        .pathway-card.scroll-reveal {
          opacity: 1 !important;
          transform: none !important;
          filter: none !important;
        }

        .js-enabled .opening-stage.is-visible .question-bubble,
        .js-enabled .opening-system.is-scroll-controlled .opening-stage.is-visible .question-bubble,
        .pathway-card,
        .pathway-card.scroll-reveal {
          animation: none !important;
        }
      }