:root {
      --human: #007AFF;
      --learning: #34C759;
      --process: #8E8E93;
      --decision: #FF9500;
      --warning: #FF3B30;
      --ai: #AF52DE;
      --system: #5AC8FA;
      --ink: #111827;
      --ink-soft: #243044;
      --muted: #5F6B7A;
      --surface: #FFFFFF;
      --soft: #F6F8FB;
      --soft-2: #EDF3F8;
      --line: #DCE3EA;
      --dark: #0B1220;
      --dark-2: #111A28;
      --dark-line: rgba(255, 255, 255, .14);
      --max: 1224px;
      --r-s: 6px;
      --r-m: 12px;
      --r-l: 20px;
      --shadow-s: 0 10px 26px rgba(17, 24, 39, .07);
      --shadow-m: 0 18px 48px rgba(17, 24, 39, .12);
      --shadow-l: 0 26px 72px rgba(17, 24, 39, .2);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Aptos, Arial, sans-serif;
      color: var(--ink);
      background: var(--surface);
      line-height: 1.5;
      text-rendering: optimizeLegibility;
    }

    a { color: inherit; text-decoration: none; }
    p { margin: 0; }
    button, input, select, textarea { font: inherit; }
    section { scroll-margin-top: 88px; }

    .wrap {
      width: min(var(--max), calc(100% - 48px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(220, 227, 234, .8);
      background: rgba(255, 255, 255, .88);
      backdrop-filter: blur(18px);
    }

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

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 780;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: var(--r-m);
      color: #fff;
      background: linear-gradient(135deg, var(--human), var(--system) 48%, var(--learning));
      box-shadow: 0 12px 28px rgba(0, 122, 255, .22);
      font-size: .9rem;
      font-weight: 850;
    }

    .navlinks {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(246, 248, 251, .86);
    }

    .navlinks a {
      padding: 8px 12px;
      border-radius: 999px;
      color: var(--muted);
      font-size: .93rem;
      font-weight: 700;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .navlinks a:hover {
      color: var(--ink);
      background: #fff;
      box-shadow: var(--shadow-s);
    }

    .btn,
    .nav-cta {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 760;
      white-space: nowrap;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    }

    .btn:hover,
    .nav-cta:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-m);
    }

    .btn-primary,
    .nav-cta {
      color: #fff;
      background: linear-gradient(135deg, #101827, #27364A);
      box-shadow: 0 14px 30px rgba(17, 24, 39, .18);
    }

    .btn-secondary {
      color: var(--ink);
      background: #fff;
      border-color: var(--line);
    }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
    }

    .mobile-menu { display: none; padding-bottom: 16px; }
    .mobile-menu a {
      display: block;
      padding: 13px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-weight: 700;
    }

    .section { padding: clamp(72px, 8vw, 112px) 0; }

    .hero {
      overflow: hidden;
      border-bottom: 1px solid rgba(220, 227, 234, .8);
      background:
        radial-gradient(circle at 12% 12%, rgba(0, 122, 255, .13), transparent 34%),
        radial-gradient(circle at 84% 10%, rgba(175, 82, 222, .11), transparent 31%),
        radial-gradient(circle at 76% 62%, rgba(90, 200, 250, .12), transparent 30%),
        linear-gradient(180deg, #fff 0%, #F8FAFC 100%);
    }

    .hero-grid {
      min-height: calc(100vh - 68px);
      display: grid;
      grid-template-columns: minmax(380px, .9fr) minmax(520px, 1.1fr);
      gap: clamp(28px, 4vw, 48px);
      align-items: center;
      padding: 34px 0 54px;
    }

    .hero-grid > * {
      min-width: 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      padding: 7px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .86);
      color: var(--muted);
      font-size: .88rem;
      font-weight: 750;
      box-shadow: var(--shadow-s);
    }

    .pip {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--learning);
      box-shadow: 0 0 0 5px rgba(52, 199, 89, .13);
      flex: none;
    }

    h1, h2, h3 {
      margin: 0;
      line-height: 1.06;
      letter-spacing: 0;
    }

    h1 {
      max-width: 640px;
      font-size: clamp(2.8rem, 4.65vw, 4.7rem);
      font-weight: 820;
    }

    h2 {
      max-width: 880px;
      font-size: clamp(2rem, 4.15vw, 3.95rem);
      font-weight: 800;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 780;
    }

    .lead {
      max-width: 620px;
      margin-top: 18px;
      color: #344154;
      font-size: clamp(1.02rem, 1.22vw, 1.16rem);
    }

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

    .hero-note {
      max-width: 620px;
      margin-top: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(220, 227, 234, .92);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.72);
      color: var(--ink-soft);
      box-shadow: var(--shadow-s);
      font-weight: 700;
    }

    .hero-note span {
      color: var(--ai);
      font-weight: 830;
    }

    .domain-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .domain {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .78);
      color: var(--muted);
      font-size: .94rem;
      font-weight: 700;
    }

    .swatch {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: none;
    }

    .hero-visual {
      position: relative;
      min-height: 0;
      aspect-ratio: 2 / 1;
      max-width: 790px;
      width: 100%;
      min-width: 0;
      justify-self: end;
      overflow: hidden;
      border: 1px solid rgba(178, 190, 205, .48);
      border-radius: var(--r-l);
      background: transparent;
      box-shadow:
        0 34px 86px rgba(17, 24, 39, .18),
        0 18px 42px rgba(0, 122, 255, .10),
        0 6px 18px rgba(175, 82, 222, .08);
      isolation: isolate;
      display: grid;
      place-items: center;
    }

    .hero-visual img {
      width: 100%;
      max-width: 100%;
      height: 100%;
      min-height: 0;
      display: block;
      object-fit: contain;
      border-radius: inherit;
    }

    .hero-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.28), transparent 28%),
        radial-gradient(circle at 55% 52%, rgba(175,82,222,.045), transparent 30%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -1px 0 rgba(17,24,39,.08);
      border-radius: inherit;
      pointer-events: none;
    }

    .section-head { margin-bottom: 34px; }
    .section-head p {
      max-width: 760px;
      margin-top: 15px;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .soft-band {
      background: linear-gradient(180deg, #fff 0%, var(--soft) 9%, var(--soft) 91%, #fff 100%);
    }

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

    .card,
    .principle-card,
    .journey-card,
    .talent-card {
      border: 1px solid var(--line);
      border-radius: var(--r-m);
      background: #fff;
      box-shadow: var(--shadow-s);
    }

    .card,
    .talent-card {
      position: relative;
      overflow: hidden;
      padding: 22px;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .card::before,
    .talent-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: var(--accent);
      opacity: .78;
    }

    .card:hover,
    .talent-card:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--accent), var(--line) 62%);
      box-shadow: var(--shadow-m);
    }

    .card p,
    .talent-card p {
      margin-top: 12px;
      color: var(--muted);
    }

    .icon-badge {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      border-radius: var(--r-m);
      background: color-mix(in srgb, var(--accent), transparent 86%);
    }

    .icon-badge svg {
      width: 24px;
      height: 24px;
      stroke: var(--accent);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 14px;
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent), transparent 90%);
      font-size: .76rem;
      font-weight: 820;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
    }

    .question {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      color: var(--ink-soft);
      font-weight: 700;
    }

    .question span {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 820;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .principle-card {
      margin-top: 18px;
      padding: 26px;
      display: grid;
      grid-template-columns: 68px 1fr;
      gap: 18px;
      align-items: center;
      background:
        radial-gradient(circle at 8% 20%, rgba(0,122,255,.12), transparent 26%),
        linear-gradient(135deg, rgba(0,122,255,.06), rgba(52,199,89,.06)),
        #fff;
    }

    .principle-icon {
      width: 60px;
      height: 60px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(135deg, var(--human), var(--learning));
      box-shadow: 0 16px 32px rgba(0, 122, 255, .2);
      font-weight: 850;
    }

    .principle-card strong {
      display: block;
      font-size: clamp(1.22rem, 2vw, 1.62rem);
      letter-spacing: 0;
    }

    .principle-card p {
      margin-top: 6px;
      color: var(--muted);
    }

    .enablement-points {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .enablement-points span {
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.7);
      color: var(--ink-soft);
      font-size: .9rem;
      font-weight: 760;
    }

    .journey {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .journey::before {
      content: "";
      position: absolute;
      left: 9%;
      right: 9%;
      top: 35px;
      height: 2px;
      z-index: 3;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--process), var(--learning), var(--ai), var(--human));
      opacity: .82;
      pointer-events: none;
    }

    .journey-card {
      position: relative;
      z-index: 1;
      min-height: 248px;
      padding: 82px 22px 22px;
      overflow: visible;
    }

    .journey-number {
      position: absolute;
      top: 16px;
      left: 22px;
      z-index: 4;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      border: 5px solid #fff;
      background: var(--accent);
      box-shadow: 0 7px 18px rgba(17, 24, 39, .12);
      font-weight: 850;
    }

    .journey-card p {
      margin-top: 12px;
      color: var(--muted);
    }

    .result {
      margin-top: 18px;
      padding: 11px 12px;
      border-radius: var(--r-s);
      color: var(--ink);
      background: color-mix(in srgb, var(--accent), transparent 91%);
      font-size: .94rem;
      font-weight: 760;
    }

    .dark-section {
      color: #fff;
      background:
        radial-gradient(circle at 16% 0%, rgba(0,122,255,.25), transparent 34%),
        radial-gradient(circle at 84% 12%, rgba(175,82,222,.25), transparent 32%),
        linear-gradient(180deg, var(--dark) 0%, #07101C 100%);
    }

    .dark-section .section-head p { color: #C7D2DF; }
    .dark-section .eyebrow {
      color: #C7D2DF;
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
    }

    .product-layout {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 22px;
      align-items: start;
    }

    .product-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 22px;
    }

    .product-proof-item {
      padding: 14px;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.07);
      box-shadow: 0 18px 42px rgba(0,0,0,.12);
    }

    .product-proof-item strong {
      display: block;
      color: #fff;
    }

    .product-proof-item span {
      display: block;
      margin-top: 4px;
      color: #C7D2DF;
      font-size: .92rem;
    }

    .product-aside {
      position: sticky;
      top: 90px;
      padding: 22px;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background:
        radial-gradient(circle at 16% 10%, rgba(175,82,222,.22), transparent 34%),
        rgba(255,255,255,.07);
    }

    .product-aside p {
      margin-top: 10px;
      color: #C7D2DF;
    }

    .layer-list {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .layer {
      padding: 12px;
      border-radius: var(--r-s);
      background: rgba(255,255,255,.08);
      color: #E8EEF5;
      font-weight: 700;
    }

    .layer strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
    }

    .layer span {
      display: block;
      color: #C7D2DF;
      font-size: .9rem;
      font-weight: 600;
    }

    .acc-group {
      display: grid;
      gap: 14px;
    }

    details.acc {
      overflow: hidden;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.075);
      box-shadow: 0 18px 42px rgba(0,0,0,.16);
      transition: border-color .2s ease, background .2s ease, transform .2s ease;
    }

    details.acc[open] {
      border-color: color-mix(in srgb, var(--accent), transparent 42%);
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 90%), rgba(255,255,255,.07));
    }

    .acc > summary {
      list-style: none;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      cursor: pointer;
      user-select: none;
    }

    .acc > summary:hover {
      background: rgba(255,255,255,.06);
    }

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

    .acc-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      flex: 0 0 44px;
      border-radius: var(--r-m);
      background: color-mix(in srgb, var(--accent), transparent 82%);
    }

    .acc-icon svg {
      width: 23px;
      height: 23px;
      stroke: var(--accent);
    }

    .acc-title { flex: 1; min-width: 0; }
    .acc-title strong {
      display: block;
      font-size: 1.08rem;
    }

    .acc-title span {
      display: block;
      margin-top: 3px;
      color: #C7D2DF;
      font-size: .93rem;
    }

    .chev {
      width: 22px;
      height: 22px;
      transition: transform .2s ease;
    }

    details[open] .chev { transform: rotate(180deg); }

    .acc-body {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding: 0 20px 20px;
    }

    .tool-card {
      padding: 15px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--r-s);
      background: rgba(255,255,255,.08);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .tool-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255,255,255,.24);
      background: rgba(255,255,255,.115);
    }

    .tool-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .tool-name {
      color: #fff;
      font-weight: 780;
    }

    .tool-card p {
      margin-top: 8px;
      color: #C7D2DF;
      font-size: .95rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .badge.free { color: #102216; background: #7AF0A3; }
    .badge.workshop { color: #231601; background: #FFC46B; }
    .badge.pilot { color: #fff; background: var(--ai); }
    .badge.internal { color: #10212A; background: var(--system); }
    .badge.available { color: #102216; background: #7AF0A3; }
    .badge.custom { color: #08223A; background: #9ED8FF; }
    .badge.project { color: #231601; background: #FFC46B; }
    .badge.building { color: #2A2133; background: #E3C7F4; }

    .portfolio-guide {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    .portfolio-guide-item {
      padding: 16px;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.07);
    }

    .portfolio-guide-item strong {
      display: block;
      color: #fff;
    }

    .portfolio-guide-item span {
      display: block;
      margin-top: 4px;
      color: #C7D2DF;
      font-size: .92rem;
    }

    .portfolio-accordion {
      display: grid;
      gap: 12px;
    }

    details.portfolio-item {
      overflow: hidden;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.065);
      box-shadow: 0 18px 42px rgba(0,0,0,.15);
      transition: border-color .2s ease, background .2s ease;
    }

    details.portfolio-item[open] {
      border-color: color-mix(in srgb, var(--accent), transparent 38%);
      background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent), transparent 83%), transparent 34%),
        rgba(255,255,255,.075);
    }

    .portfolio-summary {
      list-style: none;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 20px;
      cursor: pointer;
      user-select: none;
    }

    .portfolio-summary::-webkit-details-marker { display: none; }
    .portfolio-summary:hover { background: rgba(255,255,255,.05); }

    .portfolio-number {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: #fff;
      background: color-mix(in srgb, var(--accent), transparent 70%);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 44%);
      font-weight: 900;
    }

    .portfolio-title strong {
      display: block;
      color: #fff;
      font-size: 1.18rem;
    }

    .portfolio-title,
    .portfolio-panel,
    .portfolio-promise > span,
    .portfolio-groups {
      min-width: 0;
    }

    .portfolio-title span {
      display: block;
      margin-top: 4px;
      color: #C7D2DF;
      font-size: .95rem;
    }

    .portfolio-panel {
      padding: 0 20px 22px;
    }

    .portfolio-promise {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 16px;
      padding: 15px 16px;
      border-radius: var(--r-s);
      color: #D8E2ED;
      background: rgba(255,255,255,.065);
    }

    .portfolio-promise strong {
      color: #fff;
    }

    .status-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
      flex: 0 0 auto;
    }

    .portfolio-groups {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .portfolio-card {
      min-width: 0;
      padding: 16px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--r-s);
      background: rgba(255,255,255,.075);
    }

    .portfolio-card h3 {
      color: #fff;
      font-size: 1rem;
    }

    .portfolio-card p {
      margin-top: 6px;
      color: #C7D2DF;
      font-size: .9rem;
    }

    .portfolio-card ul {
      display: grid;
      gap: 7px;
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
    }

    .portfolio-card li {
      position: relative;
      padding-left: 15px;
      color: #F0F4F8;
      font-size: .92rem;
      overflow-wrap: anywhere;
    }

    .portfolio-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .58em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
    }

    .portfolio-card.featured {
      grid-column: span 2;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 84%), rgba(255,255,255,.075));
    }

    .portfolio-contact {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 18px;
      color: #fff;
      font-weight: 800;
      text-decoration: none;
    }

    .portfolio-contact::after { content: "→"; }

    .free-gpts {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 12% 16%, rgba(90,200,250,.26), transparent 31%),
        radial-gradient(circle at 86% 8%, rgba(175,82,222,.34), transparent 34%),
        radial-gradient(circle at 52% 94%, rgba(52,199,89,.18), transparent 34%),
        linear-gradient(145deg, #091426 0%, #11172B 48%, #21153B 100%);
    }

    .free-gpts::before {
      content: "3";
      position: absolute;
      right: clamp(-28px, 2vw, 36px);
      top: clamp(-84px, -5vw, -36px);
      color: rgba(255,255,255,.035);
      font-size: clamp(24rem, 42vw, 46rem);
      line-height: .8;
      font-weight: 950;
      letter-spacing: -.09em;
      pointer-events: none;
    }

    .free-gpts .wrap {
      position: relative;
      z-index: 1;
    }

    .free-gpt-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .58fr);
      gap: clamp(28px, 5vw, 70px);
      align-items: end;
      margin-bottom: 32px;
    }

    .free-gpts .eyebrow {
      color: #EEF3F9;
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
    }

    .free-gpts h2 {
      margin-top: 18px;
      max-width: 780px;
      font-size: clamp(2.35rem, 5.5vw, 4.7rem);
      line-height: .98;
      letter-spacing: -.052em;
    }

    .free-gpt-lead {
      max-width: 760px;
      margin-top: 18px;
      color: #CBD6E4;
      font-size: clamp(1rem, 1.6vw, 1.18rem);
    }

    .free-gpt-promise {
      padding: 20px 22px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.075);
      box-shadow: 0 22px 50px rgba(0,0,0,.16);
    }

    .free-gpt-promise strong {
      display: block;
      color: #fff;
      font-size: 1.08rem;
    }

    .free-gpt-promise span {
      display: block;
      margin-top: 7px;
      color: #C7D2DF;
      font-size: .93rem;
    }

    .free-gpt-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .free-gpt-card {
      --accent: var(--ai);
      position: relative;
      min-width: 0;
      min-height: 470px;
      display: flex;
      flex-direction: column;
      padding: 24px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--r-l);
      background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent), transparent 66%), transparent 42%),
        rgba(255,255,255,.085);
      box-shadow: 0 28px 66px rgba(0,0,0,.22);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .free-gpt-card:hover {
      transform: translateY(-5px);
      border-color: color-mix(in srgb, var(--accent), white 28%);
      background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent), transparent 56%), transparent 44%),
        rgba(255,255,255,.11);
    }

    .free-gpt-card.featured {
      border-color: rgba(122,240,163,.55);
      box-shadow: 0 30px 74px rgba(0,0,0,.24), 0 0 0 1px rgba(122,240,163,.08);
    }

    .free-gpt-card::after {
      content: "";
      position: absolute;
      left: 24px;
      right: 24px;
      top: 87px;
      height: 1px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--accent), white 20%), transparent);
    }

    .free-gpt-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 32px;
    }

    .free-gpt-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      flex: 0 0 54px;
      border-radius: 17px;
      color: #fff;
      background: color-mix(in srgb, var(--accent), transparent 28%);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), white 24%);
    }

    .free-gpt-icon svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .free-gpt-card h3 {
      color: #fff;
      font-size: clamp(1.45rem, 2.25vw, 2rem);
      line-height: 1.08;
    }

    .free-gpt-tagline {
      margin-top: 9px;
      color: color-mix(in srgb, var(--accent), white 52%);
      font-weight: 800;
    }

    .free-gpt-card > p {
      margin-top: 15px;
      color: #CBD6E4;
    }

    .free-gpt-steps {
      display: grid;
      gap: 9px;
      margin: 20px 0 24px;
      padding: 0;
      list-style: none;
    }

    .free-gpt-steps li {
      position: relative;
      padding-left: 25px;
      color: #F0F4F8;
      font-size: .94rem;
    }

    .free-gpt-steps li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--accent);
      font-weight: 900;
    }

    .free-gpt-action {
      width: 100%;
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: auto;
      padding: 0 17px;
      border: 1px solid color-mix(in srgb, var(--accent), transparent 32%);
      border-radius: 999px;
      color: #fff;
      background: color-mix(in srgb, var(--accent), transparent 68%);
      font-weight: 850;
      transition: transform .18s ease, background .18s ease;
    }

    .free-gpt-action:hover {
      transform: translateY(-1px);
      background: color-mix(in srgb, var(--accent), transparent 55%);
    }

    .free-gpt-action::after {
      content: "↗";
      font-size: 1.18rem;
    }

    .free-gpt-note {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-top: 22px;
      padding: 14px 17px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--r-m);
      color: #BFCBDA;
      background: rgba(255,255,255,.055);
      font-size: .88rem;
    }

    .free-gpt-note strong { color: #fff; }

    .gpt-toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      z-index: 100;
      width: min(520px, calc(100% - 32px));
      padding: 15px 18px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--r-m);
      color: #fff;
      background: rgba(11,18,32,.94);
      box-shadow: 0 22px 60px rgba(0,0,0,.28);
      opacity: 0;
      transform: translate(-50%, 18px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }

    .gpt-toast.visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .trust-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: center;
    }

    .trust-visual {
      position: relative;
      aspect-ratio: 10 / 7;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(178,190,205,.48);
      border-radius: var(--r-l);
      background:
        radial-gradient(circle at 20% 30%, rgba(84,199,236,.42), transparent 34%),
        radial-gradient(circle at 78% 24%, rgba(175,82,222,.31), transparent 37%),
        radial-gradient(circle at 58% 86%, rgba(52,199,89,.28), transparent 38%),
        linear-gradient(135deg, #EEF9FF 0%, #F9F4FF 54%, #EAF9F0 100%);
      box-shadow:
        0 28px 70px rgba(17,24,39,.14),
        0 16px 36px rgba(0,122,255,.09),
        0 6px 16px rgba(175,82,222,.07);
      isolation: isolate;
      container-type: inline-size;
    }

    .trust-visual.trust-visual-image {
      aspect-ratio: 3 / 2;
      display: grid;
      place-items: center;
      background: transparent;
    }

    .trust-visual.trust-visual-image::before,
    .trust-visual.trust-visual-image::after {
      display: none;
    }

    .trust-visual-image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      border-radius: inherit;
    }

    .trust-visual::before {
      content: "";
      position: absolute;
      inset: -18% -10%;
      background:
        repeating-linear-gradient(78deg, rgba(255,255,255,.42) 0 1px, transparent 1px 112px),
        repeating-linear-gradient(176deg, rgba(255,255,255,.34) 0 1px, transparent 1px 78px);
      mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 82%);
      opacity: .72;
      transform: rotate(-3deg);
      z-index: 0;
    }

    .trust-flow {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: visible;
    }

    .trust-flow path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 10px 14px rgba(0,122,255,.22));
    }

    .trust-card,
    .trust-node,
    .trust-result,
    .trust-ai {
      position: absolute;
      z-index: 2;
      border: 1px solid rgba(255,255,255,.78);
      background: rgba(255,255,255,.84);
      box-shadow:
        0 22px 48px rgba(17,24,39,.13),
        inset 0 1px 0 rgba(255,255,255,.86);
      backdrop-filter: blur(14px);
    }

    .trust-card {
      top: 13%;
      width: 39%;
      min-height: 25%;
      display: grid;
      grid-template-columns: 20% 1fr;
      align-items: center;
      gap: 4%;
      padding: 3.6%;
      border-radius: 8px;
    }

    .trust-card.project { left: 8%; }
    .trust-card.training { left: 53%; }

    .trust-icon {
      width: 100%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1.5px solid var(--accent);
      border-radius: 8px;
      color: var(--accent);
      background: rgba(255,255,255,.78);
      box-shadow: 0 12px 24px rgba(17,24,39,.10);
    }

    .trust-icon svg {
      width: 64%;
      height: 64%;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.15;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .trust-card strong,
    .trust-result strong {
      display: block;
      color: var(--ink);
      font-size: clamp(.8rem, 2.7cqw, 1.08rem);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .trust-card small,
    .trust-result span,
    .trust-node span {
      display: block;
      color: var(--muted);
      font-size: clamp(.55rem, 1.75cqw, .74rem);
      line-height: 1.24;
      margin-top: .4em;
    }

    .trust-highlight {
      display: inline-flex;
      align-items: center;
      margin-top: .55em;
      padding: .3em .7em;
      border-radius: 999px;
      color: var(--accent);
      border: 1px solid color-mix(in srgb, var(--accent), white 15%);
      background: rgba(255,255,255,.7);
      font-size: clamp(.5rem, 1.45cqw, .66rem);
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .trust-node {
      left: 38%;
      top: 43%;
      width: 24%;
      height: 22%;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 2%;
      border-radius: 8px;
    }

    .trust-node .trust-icon {
      width: 30%;
      margin-bottom: 5%;
    }

    .trust-node strong {
      color: #344154;
      font-size: clamp(.68rem, 2cqw, .88rem);
      line-height: 1.05;
    }

    .trust-result {
      left: 20%;
      top: 72%;
      width: 60%;
      min-height: 16%;
      display: grid;
      grid-template-columns: 14% 1fr;
      align-items: center;
      column-gap: 3%;
      padding: 2.4% 4%;
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(231,255,239,.92), rgba(214,248,226,.86));
      box-shadow:
        0 28px 62px rgba(19,122,53,.16),
        0 20px 46px rgba(17,24,39,.13),
        inset 0 1px 0 rgba(255,255,255,.9);
    }

    .trust-result .trust-icon {
      width: 100%;
      color: var(--learning);
      border-color: var(--learning);
    }

    .trust-result strong {
      color: #137A35;
      font-size: clamp(1.02rem, 3.8cqw, 1.55rem);
    }

    .trust-result span {
      color: #345D42;
      font-weight: 780;
      font-size: clamp(.58rem, 1.92cqw, .8rem);
    }

    .trust-result em {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin-top: .6em;
      padding: .38em .8em;
      border-radius: 999px;
      border: 1px solid var(--human);
      background: rgba(255,255,255,.74);
      color: #137A35;
      font-size: clamp(.48rem, 1.45cqw, .62rem);
      font-style: normal;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .trust-ai {
      left: 67%;
      top: 47%;
      width: 23%;
      min-height: 13%;
      display: grid;
      grid-template-columns: 22% 1fr;
      align-items: center;
      gap: 4%;
      padding: 2.2% 2.6%;
      border-radius: 8px;
      color: var(--ai);
      background: rgba(255,255,255,.74);
    }

    .trust-ai .trust-icon {
      width: 100%;
      color: var(--ai);
      border-color: var(--ai);
    }

    .trust-ai strong {
      display: block;
      color: #6E2496;
      font-size: clamp(.5rem, 1.55cqw, .68rem);
      line-height: 1.08;
    }

    .trust-ai small {
      display: block;
      margin-top: .25em;
      color: var(--muted);
      font-size: clamp(.4rem, 1.15cqw, .5rem);
      line-height: 1.12;
    }

    .trust-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -1px 0 rgba(17,24,39,.06);
    }

    .trust-copy p {
      margin-top: 16px;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .quote {
      margin-top: 22px;
      padding: 22px;
      border-left: 4px solid var(--decision);
      border-radius: 0 var(--r-m) var(--r-m) 0;
      background: #fff;
      box-shadow: var(--shadow-s);
      color: #344154;
      font-size: 1.2rem;
    }

    .mark {
      font-size: .45em;
      line-height: 0;
      vertical-align: super;
    }

    .nowrap {
      white-space: nowrap;
    }

    .talent-section {
      background: linear-gradient(180deg, #fff, var(--soft));
    }

    .talent-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .contact-section {
      color: #fff;
      background:
        radial-gradient(circle at 78% 22%, rgba(52,199,89,.2), transparent 28%),
        radial-gradient(circle at 16% 0%, rgba(0,122,255,.2), transparent 34%),
        #0B1220;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 28px;
      align-items: start;
    }

    .contact-copy p {
      max-width: 560px;
      margin-top: 16px;
      color: #C7D2DF;
      font-size: 1.08rem;
    }

    .contact-note {
      margin-top: 22px;
      padding: 16px;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.07);
      color: #E7EEF6;
    }

    .contact-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 22px;
    }

    .contact-proof span {
      min-height: 64px;
      display: grid;
      align-content: center;
      padding: 12px;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-m);
      background: rgba(255,255,255,.07);
      color: #F5F8FC;
      font-weight: 780;
    }

    .contact-proof small {
      display: block;
      margin-top: 3px;
      color: #B9C6D6;
      font-size: .78rem;
      font-weight: 650;
    }

    .formbox {
      padding: 22px;
      border: 1px solid var(--dark-line);
      border-radius: var(--r-l);
      background: rgba(255,255,255,.96);
      color: var(--ink);
      box-shadow: var(--shadow-l);
    }

    .seg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin: 14px 0 18px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--soft);
    }

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

    .seg label {
      min-height: 36px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: var(--muted);
      cursor: pointer;
      font-weight: 740;
      font-size: .92rem;
    }

    .seg input:checked + label {
      color: var(--ink);
      background: #fff;
      box-shadow: var(--shadow-s);
    }

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

    .field.full { grid-column: 1 / -1; }

    label.field-label {
      display: block;
      margin-bottom: 6px;
      color: var(--ink-soft);
      font-weight: 740;
      font-size: .91rem;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--r-m);
      background: #fff;
      padding: 12px 13px;
      color: var(--ink);
      outline: none;
    }

    input:focus, select:focus, textarea:focus {
      border-color: var(--human);
      box-shadow: 0 0 0 4px rgba(0,122,255,.12);
    }

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

    .mode-recruit .customer-only,
    .mode-customer .recruit-only,
    .other-field {
      display: none;
    }

    .other-field.visible { display: block; }

    .form-hint {
      margin-top: 10px;
      color: var(--muted);
      font-size: .88rem;
    }

    footer {
      padding: 44px 0;
      color: #DCE6EF;
      background: #070D16;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr .8fr;
      gap: 24px;
    }

    footer p,
    footer a {
      color: #9BAABA;
    }

    footer p { margin-top: 9px; }
    footer a:hover { color: #fff; }

    @media (max-width: 1040px) {
      .navlinks, .nav-cta { display: none; }
      .menu-toggle { display: grid; place-items: center; }
      .mobile-menu.open { display: block; }
      .hero-grid,
      .product-layout,
      .trust-grid,
      .contact-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .hero-grid { min-height: auto; }
      .hero-visual {
        max-width: none;
        justify-self: stretch;
      }
      .product-aside { position: static; }
      .grid-3,
      .product-proof,
      .portfolio-guide,
      .portfolio-groups,
      .free-gpt-grid,
      .journey,
      .contact-proof,
      .talent-grid {
        grid-template-columns: 1fr;
      }
      .portfolio-card.featured { grid-column: auto; }
      .free-gpt-intro { grid-template-columns: 1fr; }
      .free-gpt-card { min-height: 0; }
      .free-gpt-note {
        align-items: flex-start;
        flex-direction: column;
      }
      .journey::before { display: none; }
    }

    @media (max-width: 700px) {
      .wrap { width: min(100% - 36px, var(--max)); }
      h1 { font-size: clamp(2.35rem, 10.8vw, 3.15rem); }
      .lead { font-size: 1rem; }
      .hero-visual,
      .hero-visual img {
        min-height: 0;
      }
      .acc > summary {
        align-items: flex-start;
        padding: 16px;
      }
      .acc-body,
      .form-grid {
        grid-template-columns: 1fr;
      }
      .portfolio-summary {
        grid-template-columns: auto 1fr auto;
        gap: 11px;
        padding: 16px;
      }
      .portfolio-number {
        width: 40px;
        height: 40px;
        border-radius: 13px;
      }
      .portfolio-title span { font-size: .87rem; }
      .portfolio-panel { padding: 0 16px 18px; }
      .portfolio-promise { display: block; }
      .status-row {
        justify-content: flex-start;
        margin-top: 12px;
      }
      .field.full { grid-column: auto; }
      .principle-card { grid-template-columns: 1fr; }
      .trust-visual {
        min-height: 0;
      }
      .trust-card {
        top: 14%;
        width: 40%;
        min-height: 24%;
        grid-template-columns: 20% 1fr;
        gap: 3.5%;
        padding: 3.2%;
      }
      .trust-card.project { left: 7%; }
      .trust-card.training { left: 53%; }
      .trust-card strong {
        font-size: clamp(.48rem, 2.35cqw, .66rem);
      }
      .trust-card small,
      .trust-result span,
      .trust-node span {
        font-size: clamp(.34rem, 1.2cqw, .48rem);
        line-height: 1.18;
      }
      .trust-highlight {
        max-width: 100%;
        padding: .24em .55em;
        font-size: clamp(.36rem, 1.18cqw, .48rem);
      }
      .trust-node {
        left: 38%;
        top: 43%;
        width: 24%;
        height: 21%;
        padding: 1.5%;
      }
      .trust-node strong {
        font-size: clamp(.46rem, 1.45cqw, .58rem);
      }
      .trust-result {
        left: 17%;
        top: 72%;
        width: 66%;
        min-height: 15%;
        grid-template-columns: 13% 1fr;
        column-gap: 3%;
        padding: 2% 3%;
      }
      .trust-result .trust-icon {
        width: 100%;
      }
      .trust-result strong {
        font-size: clamp(.68rem, 2.7cqw, .9rem);
      }
      .trust-result em {
        margin-top: .45em;
        padding: .3em .55em;
        font-size: clamp(.34rem, 1.08cqw, .45rem);
      }
      .trust-ai {
        left: 66.5%;
        top: 47%;
        width: 24%;
        min-height: 12%;
        padding: 1.7% 2%;
      }
      .trust-ai strong {
        font-size: clamp(.34rem, 1.12cqw, .46rem);
      }
      .trust-ai small {
        display: none;
      }
      .hero-actions .btn { width: 100%; }
    }