*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Noto Sans SC', 'Outfit', sans-serif; background: #ececf3; color: #1d1d1f; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 2px; }

    /* ── Pages ── */
    .page { display: none; }
    .page.active { display: block; }

    /* ── Nav ── */
    #site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    #site-nav > div {
      height: 64px !important;
      max-width: 1600px !important;
      gap: 32px !important;
    }
    #logo-btn {
      gap: 10px !important;
    }
    /* #logo-btn > div {
      width: 32px !important;
      height: 32px !important;
      border-radius: 9px !important;
      box-shadow: 0 8px 18px rgba(17,24,39,0.12);
    } */
    #logo-btn svg {
      width: 18px !important;
      height: 18px !important;
    }
    /* #logo-btn span {
      font-size: 16px !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
    } */
    #site-nav .desk-only {
      gap: 38px !important;
    }
    .nav-btn {
      font-size: 14px; font-weight: 500; color: #5f6875;
      cursor: pointer; background: none; border: none; padding: 0;
      transition: color 0.2s; white-space: nowrap;
      font-family: 'Noto Sans SC', sans-serif;
      position: relative;
    }
    .nav-btn::after {
      content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
      height: 2px; background: #1d1d1f;
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    .nav-btn:hover { color: #1d1d1f; }
    .nav-btn.active { color: #1d1d1f; font-weight: 800; }
    .nav-btn.active::after { transform: scaleX(1); }

    /* ── Buttons ── */
    .btn-consult {
      background: #1d1d1f; color: #fff; font-size: 14px; font-weight: 700;
      padding: 10px 24px; border-radius: 999px; border: none; cursor: pointer;
      transition: background 0.2s, transform 0.15s; font-family: 'Noto Sans SC', sans-serif;
      white-space: nowrap; position: relative; overflow: hidden;
    }
    .btn-consult:hover { background: #333; transform: translateY(-1px); }
    .btn-consult:active { transform: scale(0.97); }

    .btn-submit {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      background: linear-gradient(135deg,#6366f1,#22d3ee); color: #fff; font-size: 14px; font-weight: 700;
      padding: 13px 28px; border-radius: 10px; border: none; cursor: pointer;
      transition: transform 0.15s, box-shadow 0.2s; font-family: 'Noto Sans SC', sans-serif;
      position: relative; overflow: hidden; box-shadow: 0 12px 34px rgba(99,102,241,0.26);
    }
    .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 42px rgba(34,211,238,0.22); }

    /* ── Hero ── */
    .hero-bg { background: #050508; position: relative; overflow: hidden; padding: 160px 24px 80px; }

    .business-ai-banner {
      position: relative;
      padding: 34px 24px;
      background:
        radial-gradient(circle at 18% 50%, rgba(14,165,233,0.14), transparent 30%),
        radial-gradient(circle at 84% 20%, rgba(45,212,191,0.12), transparent 32%),
        linear-gradient(180deg, #eef3f9 0%, #edf1f8 100%);
      overflow: hidden;
    }
    .business-ai-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.72;
      pointer-events: none;
    }
    .business-ai-inner {
      position: relative;
      max-width: 1600px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.82fr 1.18fr;
      gap: 28px;
      align-items: center;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 24px;
      padding: 28px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(240,248,252,0.72));
      box-shadow: 0 22px 54px rgba(42,52,77,0.08);
      overflow: hidden;
    }
    .business-ai-inner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 22%, rgba(14,165,233,0.11), transparent 62%);
      transform: translateX(-120%);
      animation: fw-scan 7s ease-in-out infinite;
      pointer-events: none;
    }
    .business-ai-copy,
    .business-ai-flow {
      position: relative;
      z-index: 1;
    }
    .business-ai-kicker {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #0284c7;
      font-size: 12px;
      font-family: 'Outfit', 'Noto Sans SC', sans-serif;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .business-ai-copy h2 {
      color: #111827;
      font-size: clamp(1.8rem, 3.2vw, 3rem);
      line-height: 1.12;
      font-weight: 900;
      letter-spacing: 0;
      margin-bottom: 14px;
    }
    .business-ai-copy p {
      max-width: 490px;
      color: #667085;
      font-size: 14px;
      line-height: 1.85;
      font-family: 'Noto Sans SC', sans-serif;
    }
    .business-proof-strip {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
      align-items: stretch;
      gap: 0;
      max-width: 1600px;
      margin: 0 auto 16px;
      padding: 14px 18px;
      border: 1px solid rgba(14,165,233,0.15);
      border-radius: 26px;
      background:
        linear-gradient(90deg, rgba(255,255,255,0.86), rgba(239,248,255,0.72)),
        radial-gradient(circle at 12% 50%, rgba(14,165,233,0.14), transparent 30%),
        radial-gradient(circle at 88% 40%, rgba(45,212,191,0.13), transparent 34%);
      box-shadow: 0 18px 44px rgba(42,52,77,0.08);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
    }
    .business-proof-strip::before {
      content: '';
      position: absolute;
      left: 18px;
      right: 18px;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.42), rgba(45,212,191,0.3), transparent);
    }
    .business-proof-strip::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(110deg, transparent 18%, rgba(14,165,233,0.12), rgba(45,212,191,0.08), transparent 58%),
        linear-gradient(rgba(14,165,233,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.035) 1px, transparent 1px);
      background-size: 34% 100%, 26px 26px, 26px 26px;
      background-position: -42% 0, 0 0, 0 0;
      opacity: 0.72;
      animation: business-proof-sweep 6.8s ease-in-out infinite;
      pointer-events: none;
    }
    .business-proof-strip span {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
      min-height: 60px;
      padding: 8px 22px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #506175;
      font-size: 16px;
      font-weight: 800;
      line-height: 1;
      box-shadow: none;
      animation: business-proof-rise 5.8s ease-in-out infinite;
    }
    .business-proof-strip span:nth-child(2) {
      animation-delay: 0.16s;
    }
    .business-proof-strip span:nth-child(3) {
      animation-delay: 0.32s;
    }
    .business-proof-strip span:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 10px;
      bottom: 10px;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(14,165,233,0.18), transparent);
    }
    .business-proof-strip span:last-child {
      align-self: center;
      min-height: 46px;
      margin-left: 14px;
      border: 1px solid rgba(14,165,233,0.22);
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(224,242,254,0.88), rgba(204,251,241,0.55));
      color: #0369a1;
      box-shadow: 0 10px 24px rgba(14,165,233,0.10);
      animation: business-proof-pulse 4.8s ease-in-out infinite;
    }
    .business-proof-strip strong {
      color: #0f172a;
      font-family: 'Outfit', 'Noto Sans SC', sans-serif;
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 0;
    }
    @keyframes business-proof-sweep {
      0%, 28% { background-position: -42% 0, 0 0, 0 0; }
      58%, 100% { background-position: 142% 0, 0 0, 0 0; }
    }
    @keyframes business-proof-rise {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }
    @keyframes business-proof-pulse {
      0%, 100% {
        transform: translateY(0);
        box-shadow: 0 10px 24px rgba(14,165,233,0.10);
        border-color: rgba(14,165,233,0.22);
      }
      50% {
        transform: translateY(-2px);
        box-shadow: 0 14px 32px rgba(14,165,233,0.18);
        border-color: rgba(14,165,233,0.36);
      }
    }

    /* ── Service stack cards ── */
    .service-stack-section {
      padding: 76px 24px 116px;
      background:
        radial-gradient(circle at 8% 28%, rgba(99,102,241,0.13), transparent 25%),
        radial-gradient(circle at 92% 74%, rgba(16,185,129,0.12), transparent 28%),
        linear-gradient(180deg, #f4f7fc 0%, #edf4f8 100%);
    }
    .service-stack-inner {
      position: relative;
      z-index: 1;
      max-width: 1180px;
      margin: 0 auto;
    }
    .service-stack-inner::before {
      content: '';
      position: absolute;
      left: 3%;
      right: 3%;
      top: 168px;
      height: 310px;
      border-radius: 999px;
      background:
        radial-gradient(ellipse at 18% 78%, rgba(124,92,231,0.18), transparent 42%),
        radial-gradient(ellipse at 52% 56%, rgba(8,159,199,0.14), transparent 46%),
        radial-gradient(ellipse at 86% 34%, rgba(22,166,106,0.16), transparent 42%);
      opacity: 0.72;
      filter: blur(20px);
      pointer-events: none;
    }
    .service-stack-heading {
      max-width: 700px;
      margin: 0 auto 38px;
      text-align: center;
    }
    .service-stack-title {
      font-size: clamp(1.9rem, 3vw, 2.4rem);
      font-weight: 900;
      color: #0f172a;
      line-height: 1.15;
      letter-spacing: -0.03em;
    }
    .service-stack-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(22px, 3vw, 44px);
      align-items: end;
      padding: 58px 8px 86px;
      isolation: isolate;
    }
    .service-stack-grid::before {
      content: '';
      position: absolute;
      left: 5%;
      right: 5%;
      top: 132px;
      bottom: 112px;
      border-radius: 34px;
      border: 1px solid rgba(148,163,184,0.16);
      background: linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06));
      z-index: 0;
    }
    .service-stack-path {
      position: absolute;
      inset: 46px 7% 78px;
      z-index: 0;
      pointer-events: none;
    }
    .service-stack-path::before {
      content: '';
      position: absolute;
      left: 3%;
      right: 3%;
      top: 55%;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(124,92,231,0.18), rgba(8,159,199,0.55) 52%, rgba(22,166,106,0.72));
      box-shadow: 0 10px 28px rgba(8,159,199,0.16);
      transform: rotate(-8deg);
      transform-origin: center;
    }
    .service-stack-path::after {
      content: '';
      position: absolute;
      right: 1.5%;
      top: 34%;
      width: 14px;
      height: 14px;
      border-top: 4px solid rgba(22,166,106,0.72);
      border-right: 4px solid rgba(22,166,106,0.72);
      border-radius: 2px;
      transform: rotate(45deg);
    }
    .service-stack-path-dot {
      position: absolute;
      width: 16px;
      height: 16px;
      border: 4px solid #fff;
      border-radius: 999px;
      background: var(--path-dot-color, #089fc7);
      box-shadow: 0 12px 24px rgba(15,23,42,0.12), 0 0 0 8px rgba(255,255,255,0.56);
    }
    .service-stack-path-dot--one {
      --path-dot-color: #7c5ce7;
      left: 4%;
      top: 70%;
    }
    .service-stack-path-dot--two {
      --path-dot-color: #089fc7;
      left: 49%;
      top: 51%;
    }
    .service-stack-path-dot--three {
      --path-dot-color: #16a66a;
      right: 2.5%;
      top: 31%;
    }
    .service-stack-card {
      --service-color: #6366f1;
      --service-color-rgb: 99,102,241;
      --service-card-rest: translateY(0);
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      min-height: 356px;
      border: 1px solid rgba(255,255,255,0.9);
      border-radius: 28px;
      overflow: hidden;
      background: rgba(255,255,255,0.78);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow:
        0 28px 65px rgba(42,52,77,0.10),
        inset 0 1px 0 #fff;
      will-change: transform;
      transition:
        transform 0.42s cubic-bezier(0.22,1,0.36,1),
        box-shadow 0.4s cubic-bezier(0.22,1,0.36,1),
        border-color 0.32s ease,
        background-color 0.32s ease;
    }
    .service-stack-card--consult {
      --service-color: #7c5ce7;
      --service-color-rgb: 124,92,231;
      --service-card-rest: translateY(72px);
      transform: var(--service-card-rest);
    }
    .service-stack-card--deploy {
      --service-color: #089fc7;
      --service-color-rgb: 8,159,199;
      --service-card-rest: translateY(36px);
      transform: var(--service-card-rest);
    }
    .service-stack-card--support {
      --service-color: #16a66a;
      --service-color-rgb: 22,166,106;
      --service-card-rest: translateY(0);
      transform: var(--service-card-rest);
    }
    .service-stack-card:hover {
      transform: var(--service-card-rest) scale(1.012);
      border-color: rgba(var(--service-color-rgb),0.3);
      transition-duration: 0.32s, 0.34s, 0.28s, 0.28s;
      box-shadow:
        0 34px 72px rgba(var(--service-color-rgb),0.145),
        inset 0 1px 0 #fff;
      z-index: 10;
    }
    .service-stack-card::before {
      content: attr(data-stage);
      position: absolute;
      right: 18px;
      bottom: -18px;
      z-index: 0;
      color: rgba(var(--service-color-rgb),0.055);
      font: 900 108px/1 'Outfit', sans-serif;
      letter-spacing: -0.08em;
    }
    .service-stack-head {
      position: relative;
      padding: 28px 28px 26px;
      color: #0f172a;
      overflow: hidden;
      min-height: 190px;
      background:
        radial-gradient(circle at 90% 5%, rgba(var(--service-color-rgb),0.20), transparent 36%),
        linear-gradient(145deg, rgba(var(--service-color-rgb),0.12), rgba(255,255,255,0.18));
      border-bottom: 1px solid rgba(var(--service-color-rgb),0.12);
    }
    .service-stack-head::before {
      content: '';
      position: absolute;
      right: -34px;
      top: -52px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 1px solid rgba(var(--service-color-rgb),0.16);
      box-shadow: inset 0 0 40px rgba(var(--service-color-rgb),0.07);
    }
    .service-stack-head::after {
      content: '';
      position: absolute;
      left: 28px;
      bottom: 0;
      width: 72px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--service-color), transparent);
    }
    .service-stack-stage {
      position: absolute;
      top: 29px;
      right: 28px;
      color: var(--service-color);
      font: 800 10px/1 'Outfit', sans-serif;
      letter-spacing: 0.14em;
      opacity: 0.8;
    }
    .service-stack-icon {
      position: relative;
      z-index: 1;
      width: 52px;
      height: 52px;
      border-radius: 18px 18px 18px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--service-color-rgb),0.82), var(--service-color));
      margin-bottom: 22px;
      box-shadow: 0 12px 26px rgba(var(--service-color-rgb),0.25);
      transform: rotate(-4deg);
      transition: transform 0.52s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease;
    }
    .service-stack-card:hover .service-stack-icon {
      transform: translateY(-2px) rotate(0) scale(1.045);
      box-shadow: 0 16px 32px rgba(var(--service-color-rgb),0.3);
    }
    .service-stack-icon svg {
      width: 24px;
      height: 24px;
      color: #fff;
      stroke-width: 2;
    }
    .service-stack-head h3 {
      position: relative;
      z-index: 1;
      font-size: 1.5rem;
      font-weight: 900;
      letter-spacing: -0.035em;
      margin-bottom: 8px;
    }
    .service-stack-head p {
      position: relative;
      z-index: 1;
      font-size: 14px;
      line-height: 1.5;
      color: #64748b;
      font-weight: 500;
    }
    .service-stack-list {
      position: relative;
      z-index: 1;
      list-style: none;
      padding: 25px 28px 18px;
      display: flex;
      flex-direction: column;
      gap: 17px;
      flex: 1;
    }
    .service-stack-list li {
      display: flex;
      align-items: flex-start;
      gap: 13px;
      font-size: 14px;
      line-height: 1.55;
      color: #334155;
      font-weight: 600;
      transition: transform 0.25s, color 0.25s;
    }
    .service-stack-list li:hover {
      color: var(--service-color);
      transform: translateX(4px);
    }
    .service-stack-outcome {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      gap: 9px;
      min-height: 62px;
      margin: 0 22px 22px;
      padding: 13px 14px;
      border: 1px solid rgba(var(--service-color-rgb),0.14);
      border-radius: 14px;
      color: #475569;
      background: linear-gradient(135deg, rgba(var(--service-color-rgb),0.09), rgba(255,255,255,0.56));
      font-size: 12px;
      font-weight: 700;
      line-height: 1.55;
    }
    .service-stack-outcome > svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 1px;
      color: var(--service-color);
    }
    .service-stack-check {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
      color: var(--service-color);
      background: rgba(var(--service-color-rgb),0.1);
    }
    .service-stack-check svg {
      width: 12px;
      height: 12px;
      stroke-width: 3;
    }
    .service-stack-grid.sr-ready .service-stack-card {
      opacity: 0;
      transform: translateY(46px) scale(0.92);
    }
    .service-stack-grid.sr-in .service-stack-card {
      animation: service-card-load 0.82s cubic-bezier(0.16,1,0.3,1) both;
    }
    .service-stack-grid.sr-in .service-stack-card:nth-of-type(1) { animation-delay: 0.08s; }
    .service-stack-grid.sr-in .service-stack-card:nth-of-type(2) { animation-delay: 0.22s; }
    .service-stack-grid.sr-in .service-stack-card:nth-of-type(3) { animation-delay: 0.36s; }
    .service-stack-grid.sr-in .service-stack-icon {
      animation: service-icon-load 0.62s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .service-stack-grid.sr-in .service-stack-card:nth-of-type(1) .service-stack-icon { animation-delay: 0.34s; }
    .service-stack-grid.sr-in .service-stack-card:nth-of-type(2) .service-stack-icon { animation-delay: 0.48s; }
    .service-stack-grid.sr-in .service-stack-card:nth-of-type(3) .service-stack-icon { animation-delay: 0.62s; }
    .service-stack-grid.sr-in .service-stack-card:hover {
      animation: none;
      opacity: 1;
      transform: var(--service-card-rest) scale(1.008);
    }
    .service-stack-grid.sr-in .service-stack-card:hover .service-stack-icon {
      animation: none;
      opacity: 1;
      transform: rotate(0) scale(1.07);
    }
    .service-stack-grid.sr-in .service-stack-card.is-loaded {
      animation: none;
      opacity: 1;
      transform: var(--service-card-rest);
    }
    .service-stack-grid.sr-in .service-stack-card.is-loaded:hover {
      transform: var(--service-card-rest) scale(1.008);
    }
    .service-stack-grid.sr-in .service-stack-card.is-loaded .service-stack-icon {
      animation: none;
      opacity: 1;
      transform: rotate(-4deg) scale(1);
    }
    .service-stack-grid.sr-in .service-stack-card.is-loaded:hover .service-stack-icon {
      transform: translateY(-2px) rotate(0) scale(1.045);
    }
    @keyframes service-card-load {
      from { opacity: 0; transform: translateY(46px) scale(0.92); }
      to { opacity: 1; transform: var(--service-card-rest); }
    }
    @keyframes service-icon-load {
      from { opacity: 0; transform: rotate(-18deg) scale(0.55); }
      to { opacity: 1; transform: rotate(-4deg) scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .service-stack-grid.sr-ready .service-stack-card {
        opacity: 1;
        transform: var(--service-card-rest);
        animation: none;
      }
      .service-stack-grid.sr-in .service-stack-icon {
        animation: none;
      }
    }
    .business-ai-flow {
      display: grid;
      grid-template-columns: 1fr 30px 1fr 30px 1fr;
      gap: 12px;
      align-items: center;
    }
    .business-step {
      position: relative;
      min-height: 132px;
      border: 1px solid rgba(37,99,235,0.08);
      border-radius: 18px;
      padding: 18px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 12px 28px rgba(42,52,77,0.06);
      overflow: hidden;
    }
    .business-step::before {
      content: '';
      position: absolute;
      right: -18px;
      top: -22px;
      width: 82px;
      height: 82px;
      border-radius: 26px;
      background: rgba(14,165,233,0.08);
      transform: rotate(18deg);
    }
    .business-step.is-active {
      background:
        radial-gradient(circle at 82% 10%, rgba(45,212,191,0.16), transparent 34%),
        rgba(255,255,255,0.84);
    }
    .business-step span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 13px;
      color: #0ea5e9;
      background: rgba(232,249,253,0.92);
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 18px;
    }
    .business-step strong {
      display: block;
      color: #102033;
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 7px;
    }
    .business-step em {
      display: block;
      color: #7b8796;
      font-size: 12px;
      line-height: 1.55;
      font-style: normal;
    }
    .business-flow-arrow {
      width: 22px;
      height: 22px;
      color: #0ea5e9;
      opacity: 0.62;
      justify-self: center;
    }

    /* ── Hero animation ── */
    #hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(100px); z-index: 1; transition: transform 0.4s ease-out; }
    .hero-inner { position: relative; z-index: 3; }

    /* Scan line */
    @keyframes scan-sweep {
      0%   { top: -2px; opacity: 0; }
      5%   { opacity: 1; }
      95%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }
    #hero-scan { animation: scan-sweep 6s linear infinite; }

    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-anim-1 { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
    .hero-anim-2 { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.28s both; }
    .hero-anim-3 { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.44s both; }
    .hero-anim-4 { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.6s both; }

    /* Gradient headline text */
    @keyframes grad-shift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .grad-text {
      background: linear-gradient(90deg, #fff 0%, #a5b4fc 30%, #67e8f9 60%, #f9a8d4 80%, #fff 100%);
      background-size: 250% auto;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: grad-shift 5s ease infinite;
    }

    .hero-sub-copy {
      display: grid;
      gap: 8px;
      color: rgba(255,255,255,0.78) !important;
      font-weight: 700;
      text-shadow: 0 0 22px rgba(103,232,249,0.08);
    }
    .hero-sub-copy span:first-child {
      color: rgba(255,255,255,0.92);
    }
    .hero-sub-copy span:last-child {
      color: rgba(255,255,255,0.78);
    }

    /* ── Hero copy block ── */
    .hero-copy {
      max-width: none;
      padding-right: 40px;
    }
    .hero-title {
      font-size: clamp(2.8rem, 5.5vw, 4.8rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.035em;
      margin-bottom: 32px;
    }
    .hero-title-brand {
      display: block;
      margin-bottom: 6px;
      background: linear-gradient(120deg, #fff 0%, #c7d2fe 38%, #67e8f9 72%, #fff 100%);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: grad-shift 6s ease infinite;
      word-break: keep-all;
    }
    .hero-title-main {
      display: block;
      color: rgba(255,255,255,0.96);
      font-weight: 700;
      font-size: 0.92em;
      letter-spacing: -0.025em;
    }
    .hero-tagline {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 32px;
      padding: 14px 24px 14px 20px;
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.9) 100%);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.85) inset,
        0 16px 40px rgba(0,0,0,0.22),
        0 0 0 1px rgba(255,255,255,0.08);
      position: relative;
      overflow: hidden;
    }
    .hero-tagline::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(99,102,241,0.08) 50%, transparent 70%);
      transform: translateX(-120%);
      animation: fw-scan 8s ease-in-out infinite;
      pointer-events: none;
    }
    .hero-tagline-accent {
      width: 5px;
      height: 26px;
      border-radius: 999px;
      background: linear-gradient(180deg, #6366f1, #14b8a6);
      flex-shrink: 0;
      box-shadow: 0 0 12px rgba(99,102,241,0.45);
    }
    .hero-tagline-text {
      font-size: clamp(1.4rem, 2.5vw, 1.8rem);
      font-weight: 800;
      color: #111827;
      letter-spacing: -0.015em;
      position: relative;
      z-index: 1;
    }
    .hero-desc {
      margin-bottom: 34px;
    }
    .hero-desc-flow {
      display: flex;
      align-items: stretch;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,0.035);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    }
    .hero-desc-step {
      flex: 1;
      padding: 16px 18px;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      line-height: 1.55;
    }
    .hero-desc-step em {
      display: block;
      font-size: 10px;
      font-family: 'Outfit', monospace;
      color: rgba(165,180,252,0.75);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 6px;
      font-style: normal;
      font-weight: 700;
    }
    .hero-desc-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      flex-shrink: 0;
      background: rgba(99,102,241,0.1);
      border-left: 1px solid rgba(255,255,255,0.06);
      border-right: 1px solid rgba(255,255,255,0.06);
      color: #a5b4fc;
    }
    .hero-anim-5 { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.76s both; }

    .hero-proof-strip {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 520px;
      margin-bottom: 28px;
    }
    .hero-proof-strip span {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 999px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.045);
      color: rgba(255,255,255,0.68);
      font-size: 13px;
      font-weight: 700;
      backdrop-filter: blur(12px);
    }
    .hero-proof-strip strong {
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      font-weight: 900;
    }

    /* Pulse dot */
    @keyframes pulse-ring {
      0%   { transform: scale(0.8); opacity: 0.9; }
      70%  { transform: scale(2); opacity: 0; }
      100% { transform: scale(0.8); opacity: 0; }
    }
    .sdot-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 10px; height: 10px; }
    .sdot-wrap::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; animation: pulse-ring 2.2s ease-out infinite; }
    .sdot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; position: relative; z-index: 1; }

    /* Float cards */
    .hero-fc {
      position: absolute; background: rgba(10,10,16,0.85);
      border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(16px);
      border-radius: 14px; padding: 12px 16px; font-size: 12px;
      color: rgba(255,255,255,0.8); white-space: nowrap; pointer-events: none; z-index: 4;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    @keyframes float-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    @keyframes float-b { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-8px) translateX(5px)} }
    .fc1 { top:12%; right:5%; animation: float-a 5s ease-in-out infinite 1.2s; opacity: 0; }
    .fc2 { bottom:18%; right:8%; animation: float-b 6.5s ease-in-out infinite 1.8s; opacity: 0; }
    .fc3 { top:55%; right:3%; animation: float-a 4.5s ease-in-out infinite 2.4s; opacity: 0; }
    .fc-show { opacity: 1 !important; transition: opacity 0.8s ease; }

    /* Twinkle stars */
    @keyframes twinkle { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:1;transform:scale(1)} }
    .hero-star { position: absolute; border-radius: 50%; background: #fff; pointer-events: none; z-index: 1; }

    /* Scroll progress */
    #scroll-progress {
      position: fixed; top: 52px; left: 0; right: 0; height: 2px; z-index: 49; pointer-events: none;
      background: linear-gradient(90deg, #667eea, #f093fb, #43e97b);
      transform-origin: left; transform: scaleX(0);
    }

    /* ── Section title ── */
    .sec-title { font-size: clamp(1.5rem,3vw,2rem); font-weight: 700; color: #1d1d1f; text-align: center; letter-spacing: -0.02em; }
    .sec-sub { font-size: 14px; color: #888; text-align: center; margin-top: 8px; }

    /* ── Cards ── */
    .white-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s; }
    .white-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }

    .advantage-band {
      position: relative;
      overflow: hidden;
      padding: 76px 24px 40px;
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.11), transparent 34%),
        linear-gradient(180deg, #f2f2f7 0%, #ececf3 64%, #e7e8f0 100%);
    }
    .advantage-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(29,29,31,0.08) 1px, transparent 1px);
      background-size: 26px 26px;
      mask-image: linear-gradient(to bottom, transparent, black 20%, black 70%, transparent);
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 70%, transparent);
      pointer-events: none;
    }
    .advantage-inner { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; }
    .section-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto 14px; border: 1px solid rgba(99,102,241,0.16); background: rgba(255,255,255,0.58); color: #667085; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-family: 'Outfit','Noto Sans SC',sans-serif; }
    .advantage-inner .section-kicker { display: flex; width: fit-content; }
    .tech-section-title { font-size: clamp(1.7rem,3vw,2.25rem); font-weight: 800; color: #111216; text-align: center; letter-spacing: -0.03em; }
    .tech-section-sub { font-size: 14px; color: #8d8d96; text-align: center; margin-top: 10px; }
    .adv-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 42px; }
    .adv-card {
      position: relative;
      min-height: 202px;
      padding: 24px 20px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.1);
      background:
        radial-gradient(circle at 18% 0%, rgba(103,232,249,0.1), transparent 34%),
        linear-gradient(180deg, #202126 0%, #15161a 100%);
      box-shadow: 0 18px 48px rgba(0,0,0,0.12);
      overflow: hidden;
      transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .adv-card::before { content: attr(data-index); position: absolute; right: 18px; top: 14px; font-family: 'Outfit', sans-serif; font-size: 38px; font-weight: 800; color: rgba(255,255,255,0.045); letter-spacing: -0.05em; }
    .adv-card::after { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(103,232,249,0.42), transparent); opacity: 0.65; }
    .adv-card:hover { transform: translateY(-5px); border-color: rgba(103,232,249,0.3); box-shadow: 0 26px 64px rgba(0,0,0,0.18), 0 0 34px rgba(103,232,249,0.08); }
    .adv-title { display: inline-flex; align-items: center; min-height: 34px; margin-bottom: 18px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); color: #fff; padding: 8px 12px; font-size: 13px; font-weight: 800; }
    .adv-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .adv-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: rgba(255,255,255,0.56); line-height: 1.45; }
    .adv-list li::before { content: ''; width: 6px; height: 6px; margin-top: 7px; flex-shrink: 0; border-radius: 50%; background: #67e8f9; box-shadow: 0 0 12px rgba(103,232,249,0.55); }

    .base-band {
      position: relative;
      padding: 26px 24px 62px;
      background:
        radial-gradient(circle at 50% 12%, rgba(99,102,241,0.12), transparent 36%),
        linear-gradient(180deg, #e7e8f0 0%, #e3e5ee 52%, #e1e3ec 100%);
    }
    .base-band-inner { max-width: 1600px; margin: 0 auto; }

    .base-console {
      position: relative;
      overflow: hidden;
      padding: 0;
      background:
        radial-gradient(circle at 18% 10%, rgba(99,102,241,0.22), transparent 34%),
        radial-gradient(circle at 82% 20%, rgba(34,211,238,0.16), transparent 30%),
        linear-gradient(180deg, #111216 0%, #07080b 100%);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 22px;
      box-shadow: 0 28px 90px rgba(0,0,0,0.28), 0 0 70px rgba(99,102,241,0.12);
      color: #fff;
    }
    .base-console::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
      pointer-events: none;
    }
    .base-console::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 52px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(103,232,249,0.55), rgba(139,92,246,0.45), transparent);
      pointer-events: none;
    }
    .console-topbar {
      position: relative;
      z-index: 1;
      height: 52px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,0.035);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .console-dot { width: 10px; height: 10px; border-radius: 50%; }
    .console-title { flex: 1; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); font-family: 'Outfit', monospace; letter-spacing: 0.04em; }
    .console-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.72); border: 1px solid rgba(103,232,249,0.25); border-radius: 999px; padding: 4px 10px; background: rgba(103,232,249,0.08); }
    .console-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.8); }
    .console-body { position: relative; z-index: 1; padding: 42px 44px 40px; }
    .console-kicker { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.72); border-radius: 999px; padding: 6px 12px; font-size: 12px; margin-bottom: 18px; }
    .console-heading { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: end; margin-bottom: 32px; }
    .console-heading h2 { font-size: clamp(1.55rem,3vw,2.35rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1.18; margin-bottom: 12px; }
    .console-heading p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.8; }
    .console-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
    .console-stat { border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.045); border-radius: 12px; padding: 14px; }
    .console-stat strong { display: block; font-size: 20px; color: #fff; font-family: 'Outfit', sans-serif; margin-bottom: 4px; }
    .console-stat span { font-size: 11px; color: rgba(255,255,255,0.42); }
    .console-panel {
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.045);
      border-radius: 18px;
      padding: 24px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .console-label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 18px; }
    .console-label span:last-child { font-family: 'Outfit', monospace; color: rgba(103,232,249,0.72); }
    .base-cap-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
    .base-cap-card { min-height: 132px; padding: 18px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)); text-align: left; transition: transform 0.25s, border-color 0.25s, background 0.25s; }
    .base-cap-card:hover { transform: translateY(-4px); border-color: rgba(103,232,249,0.35); background: linear-gradient(180deg, rgba(103,232,249,0.1), rgba(255,255,255,0.035)); }
    .base-cap-card .cap-icon-wrap { width: 38px; height: 38px; margin: 0 0 14px; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); color: #67e8f9; box-shadow: inset 0 0 18px rgba(103,232,249,0.06); }
    .base-cap-card .cap-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 6px; }
    .base-cap-card .cap-desc { font-size: 11px; color: rgba(255,255,255,0.42); line-height: 1.5; }
    .console-skill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
    .base-console .skill-tag { background: rgba(255,255,255,0.065); border: 1px solid rgba(255,255,255,0.09); color: rgba(255,255,255,0.64); border-radius: 999px; padding: 8px 13px; font-size: 12px; }
    .base-console .skill-tag:hover { color: #fff; border-color: rgba(103,232,249,0.32); background: rgba(103,232,249,0.09); box-shadow: 0 0 18px rgba(103,232,249,0.08); }
    .console-actions { display: flex; justify-content: center; margin-top: 28px; }
    .console-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#6366f1,#22d3ee); color: #fff; font-size: 14px; font-weight: 600; padding: 12px 32px; border-radius: 10px; border: none; cursor: pointer; transition: transform 0.18s, box-shadow 0.2s; font-family: 'Noto Sans SC',sans-serif; box-shadow: 0 12px 34px rgba(99,102,241,0.28); }
    .console-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(34,211,238,0.24); }

    .proof-band {
      position: relative;
      overflow: hidden;
      padding: 64px 24px 58px;
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.12), transparent 32%),
        linear-gradient(180deg, #e1e3ec 0%, #e5e6ee 46%, #e9eaf1 100%);
    }
    .proof-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(29,29,31,0.08) 1px, transparent 1px);
      background-size: 26px 26px;
      mask-image: linear-gradient(to bottom, transparent, black 18%, black 72%, transparent);
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 72%, transparent);
      pointer-events: none;
    }
    .proof-inner { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; }
    .home-advantage-section {
      padding: 60px 48px 50px;
      border: 1px solid rgba(255,255,255,0.82);
      border-radius: 36px;
      background:
        radial-gradient(circle at 0% 0%, rgba(99,102,241,0.12), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(20,184,166,0.11), transparent 32%),
        rgba(255,255,255,0.52);
      box-shadow: 0 28px 70px rgba(48,74,112,0.09), inset 0 1px 0 #fff;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      overflow: hidden;
    }
    .home-advantage-heading {
      position: relative;
      display: flex;
      justify-content: center;
      text-align: center;
      margin-bottom: 30px;
    }
    .home-advantage-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      color: #4f46e5;
      font: 800 15px/1 'Outfit', sans-serif;
      letter-spacing: 0.12em;
    }
    .home-advantage-kicker svg {
      width: 15px;
      height: 15px;
    }
    .home-advantage-heading h2 {
      color: #0f172a;
      font-size: clamp(2.4rem, 4vw, 3.4rem);
      line-height: 1.1;
      letter-spacing: -0.045em;
      font-weight: 900;
    }
    .home-advantage-heading h2 span {
      margin-left: 0.16em;
      color: transparent;
      background: linear-gradient(100deg, #4f46e5, #0ea5e9 58%, #14b8a6);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .home-advantage-heading > p {
      max-width: 310px;
      color: #708096;
      font-size: 13px;
      line-height: 1.8;
    }
    .home-advantage-line {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 28px;
    }
    .home-advantage-line span {
      width: 38px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #6366f1, #22d3ee);
    }
    .home-advantage-line b {
      color: #94a3b8;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.11em;
    }
    .home-advantage-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
    .home-advantage-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
      padding: 48px 56px;
      border: 1px solid rgba(15,23,42,0.06);
      border-radius: 28px;
      background: rgba(255,255,255,0.85);
      box-shadow: 0 16px 40px rgba(48,74,112,0.06);
      overflow: hidden;
      will-change: transform;
      transition:
        transform 0.58s cubic-bezier(0.16,1,0.3,1),
        border-color 0.42s ease,
        background-color 0.42s ease,
        box-shadow 0.58s cubic-bezier(0.16,1,0.3,1);
    }
    .home-advantage-card::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 12% 50%, rgba(99,102,241,0.12), transparent 34%),
        linear-gradient(110deg, rgba(255,255,255,0.3), rgba(224,242,254,0.38));
      opacity: 0;
      transform: scale(0.94);
      transform-origin: left center;
      transition: opacity 0.48s ease, transform 0.62s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .home-advantage-card::after {
      content: attr(data-index);
      position: absolute;
      right: 24px;
      bottom: -16px;
      color: rgba(99,102,241,0.045);
      font: 900 140px/1 'Outfit', sans-serif;
      letter-spacing: -0.08em;
      transition: color 0.48s ease, transform 0.58s cubic-bezier(0.16,1,0.3,1);
    }
    .home-advantage-card:hover {
      transform: translateY(-3px) scale(1.006);
      border-color: rgba(99,102,241,0.18);
      background-color: rgba(255,255,255,0.9);
      box-shadow: 0 24px 54px rgba(48,74,112,0.105);
    }
    .home-advantage-card:hover::before {
      opacity: 1;
      transform: scale(1);
    }
    .home-advantage-card:hover::after {
      color: rgba(99,102,241,0.095);
      transform: translateY(-4px);
    }
    .home-advantage-section.sr-ready .home-advantage-heading {
      opacity: 0;
      transform: translateY(18px);
    }
    .home-advantage-section.sr-ready .home-advantage-card {
      opacity: 0;
      transform: translateY(28px) scale(0.96);
    }
    .home-advantage-section.sr-in .home-advantage-heading {
      animation: advantage-title-in 0.7s cubic-bezier(0.16,1,0.3,1) both;
    }
    .home-advantage-section.sr-in .home-advantage-card {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation: advantage-card-in 0.72s cubic-bezier(0.16,1,0.3,1) backwards;
    }
    .home-advantage-section.sr-in .home-advantage-card::before {
      animation: none;
    }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(1) { animation-delay: 0.12s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(2) { animation-delay: 0.22s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(3) { animation-delay: 0.32s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(4) { animation-delay: 0.42s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(1)::before { animation-delay: 0.28s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(2)::before { animation-delay: 0.38s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(3)::before { animation-delay: 0.48s; }
    .home-advantage-section.sr-in .home-advantage-card:nth-child(4)::before { animation-delay: 0.58s; }
    .home-advantage-section.sr-in .home-advantage-card:hover {
      opacity: 1;
      transform: translateY(-3px) scale(1.006);
    }
    @keyframes advantage-title-in {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes advantage-card-in {
      from { opacity: 0; transform: translateY(28px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes advantage-card-shine {
      from { transform: translateX(-120%); }
      to { transform: translateX(120%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-advantage-section.sr-ready .home-advantage-heading,
      .home-advantage-section.sr-ready .home-advantage-card {
        opacity: 1;
        transform: none;
        animation: none;
      }
      .home-advantage-card::before {
        display: none;
      }
    }
    .home-advantage-icon {
      position: relative;
      z-index: 1;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px 20px 20px 8px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 12px 28px rgba(99,102,241,0.22);
      transition: transform 0.58s cubic-bezier(0.16,1,0.3,1), box-shadow 0.48s ease;
    }
    .home-advantage-card:nth-child(2) .home-advantage-icon {
      background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    }
    .home-advantage-card:nth-child(3) .home-advantage-icon {
      background: linear-gradient(135deg, #14b8a6, #22c55e);
    }
    .home-advantage-card:nth-child(4) .home-advantage-icon {
      background: linear-gradient(135deg, #8b5cf6, #ec4899);
    }
    .home-advantage-icon svg {
      width: 30px;
      height: 30px;
      transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
    }
    .home-advantage-card:hover .home-advantage-icon {
      transform: translateY(-2px) rotate(-2deg) scale(1.055);
      box-shadow: 0 17px 34px rgba(99,102,241,0.27);
    }
    .home-advantage-card:hover .home-advantage-icon svg {
      transform: scale(1.06);
    }
    .home-advantage-card > div:last-child {
      position: relative;
      z-index: 1;
      transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);
    }
    .home-advantage-card:hover > div:last-child {
      transform: translateX(3px);
    }
    .home-advantage-card h3 {
      position: relative;
      z-index: 1;
      color: #172033;
      font-size: 24px;
      font-weight: 800;
      margin: 0 0 16px;
      line-height: 1.4;
    }
    .home-advantage-card p {
      position: relative;
      z-index: 1;
      color: #7b8798;
      font-size: 16px;
      line-height: 1.7;
    }
    .home-advantage-card ul {
      position: relative;
      z-index: 1;
      list-style: none;
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
    }
    .home-advantage-card ul li {
      position: relative;
      padding-left: 20px;
      color: #475569;
      font-size: 17px;
      line-height: 1.65;
    }
    .home-advantage-card ul li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 11px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #8899ee;
    }
    .home-advantage-card:nth-child(2) ul li::before { background: #6fbfff; }
    .home-advantage-card:nth-child(3) ul li::before { background: #5ddb9b; }
    .home-advantage-card:nth-child(4) ul li::before { background: #f5a623; }
    @media (max-width: 900px) {
      .home-advantage-heading {
        align-items: center;
        text-align: center;
      }
      .home-advantage-heading > p {
        max-width: 520px;
      }
    }
    @media (max-width: 640px) {
      .home-advantage-section {
        padding: 24px 18px;
        border-radius: 24px;
      }
      .home-advantage-grid {
        grid-template-columns: 1fr;
      }
      .home-advantage-heading h2 {
        font-size: 2.2rem;
      }
      .home-advantage-card {
        padding: 28px 24px;
        gap: 16px;
      }
      .home-advantage-card h3 {
        font-size: 18px;
      }
      .home-advantage-card ul li {
        font-size: 14px;
      }
    }

    /* AI base progressive reveal and live system motion */
    .base-console.sr-ready .console-kicker,
    .base-console.sr-ready .console-heading > div:first-child,
    .base-console.sr-ready .base-visual-stack,
    .base-console.sr-ready .console-panel,
    .base-console.sr-ready .console-actions,
    .base-console.sr-ready .base-cap-card,
    .base-console.sr-ready .skill-market .skill-tag,
    .base-console.sr-ready .skill-pack {
      opacity: 0;
      transform: translateY(18px);
    }
    .base-console.sr-ready .console-heading > div:first-child {
      transform: translateX(-24px);
    }
    .base-console.sr-ready .base-visual-stack {
      transform: translateX(24px);
    }
    .base-console.sr-ready.sr-in .console-kicker,
    .base-console.sr-ready.sr-in .console-heading > div:first-child,
    .base-console.sr-ready.sr-in .base-visual-stack,
    .base-console.sr-ready.sr-in .console-panel,
    .base-console.sr-ready.sr-in .console-actions,
    .base-console.sr-ready.sr-in .base-cap-card,
    .base-console.sr-ready.sr-in .skill-market .skill-tag,
    .base-console.sr-ready.sr-in .skill-pack {
      opacity: 1;
      transform: none;
      transition:
        opacity 0.7s ease,
        transform 0.82s cubic-bezier(0.16,1,0.3,1);
    }
    .base-console.sr-ready.sr-in .console-kicker { transition-delay: 0.08s; }
    .base-console.sr-ready.sr-in .console-heading > div:first-child { transition-delay: 0.16s; }
    .base-console.sr-ready.sr-in .base-visual-stack { transition-delay: 0.24s; }
    .base-console.sr-ready.sr-in .console-panel { transition-delay: 0.34s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(1) { transition-delay: 0.42s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(2) { transition-delay: 0.48s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(3) { transition-delay: 0.54s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(4) { transition-delay: 0.60s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(5) { transition-delay: 0.66s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(6) { transition-delay: 0.72s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(7) { transition-delay: 0.78s; }
    .base-console.sr-ready.sr-in .base-cap-card:nth-child(8) { transition-delay: 0.84s; }
    .base-console.sr-ready.sr-in .skill-market .skill-tag {
      transition-delay: calc(0.54s + var(--i) * 0.045s);
    }
    .base-console.sr-ready.sr-in .skill-pack:nth-child(1) { transition-delay: 0.72s; }
    .base-console.sr-ready.sr-in .skill-pack:nth-child(2) { transition-delay: 0.80s; }
    .base-console.sr-ready.sr-in .skill-pack:nth-child(3) { transition-delay: 0.88s; }
    .base-console.sr-ready.sr-in .console-actions { transition-delay: 0.92s; }
    .base-console.sr-ready.sr-in .base-cap-card:hover {
      transform: translateY(-4px);
    }
    .base-console.sr-ready.sr-in .skill-market .skill-tag:hover {
      transform: translateY(-2px);
    }
    .base-console.sr-ready.sr-in .skill-pack:hover {
      transform: translateX(4px);
    }
    .base-console.sr-in .ring-a {
      animation: base-orbit-spin-a 9s linear infinite;
    }
    .base-console.sr-in .ring-b {
      animation: base-orbit-spin-b 12s linear infinite;
    }
    .base-console.sr-in .orbit-core {
      animation: base-core-breathe 2.8s ease-in-out infinite;
    }
    .base-console.sr-in .orbit-node {
      animation: base-node-float 3.2s ease-in-out infinite;
    }
    .base-console.sr-in .node-model { animation-delay: -0.8s; }
    .base-console.sr-in .node-skill { animation-delay: -1.6s; }
    .base-console.sr-in .node-agent { animation-delay: -2.4s; }
    .base-console.sr-in .cap-icon-wrap {
      animation: base-module-online 3s ease-in-out infinite;
    }
    .base-console.sr-in .base-cap-card:nth-child(2n) .cap-icon-wrap { animation-delay: -1.5s; }
    @keyframes base-orbit-spin-a {
      to { transform: translate(-50%,-50%) rotate(360deg); }
    }
    @keyframes base-orbit-spin-b {
      to { transform: translate(-50%,-50%) rotate(-360deg); }
    }
    @keyframes base-core-breathe {
      50% {
        transform: translate(-50%,-50%) scale(1.045);
        box-shadow: 0 18px 42px rgba(14,165,233,0.34), 0 0 0 7px rgba(14,165,233,0.06);
      }
    }
    @keyframes base-node-float {
      50% { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(48,74,112,0.13); }
    }
    @keyframes base-module-online {
      50% { box-shadow: 0 0 0 4px rgba(34,211,238,0.06), 0 0 18px rgba(34,211,238,0.13); }
    }
    @media (prefers-reduced-motion: reduce) {
      .base-console.sr-ready *,
      .base-console.sr-in * {
        animation: none !important;
        transition-delay: 0s !important;
      }
    }

    /* AI base heading balance after removing description */
    .base-console .console-heading {
      grid-template-columns: minmax(390px,1.05fr) minmax(420px,0.95fr);
      align-items: center;
      gap: 38px;
    }
    .base-console .console-heading > div:first-child {
      display: flex;
      min-height: 206px;
      flex-direction: column;
      justify-content: center;
    }
    .base-console .console-heading h2 {
      max-width: 540px;
      margin-bottom: 0;
      font-size: clamp(1.6rem,2.35vw,2rem);
      line-height: 1.24;
      letter-spacing: -0.035em;
    }
    .base-console .console-heading h2 > span {
      display: block;
    }
    .base-console .console-heading h2 > span:last-child {
      white-space: nowrap;
    }
    @media (max-width: 980px) {
      .base-console .console-heading {
        grid-template-columns: 1fr;
      }
      .base-console .console-heading > div:first-child {
        min-height: 0;
        padding: 10px 0;
      }
      .base-console .console-heading h2 > span:last-child {
        white-space: normal;
      }
    }

    .home-service-audience-profile {
      display: flex;
      align-items: center;
      gap: 18px;
      min-width: 0;
      flex: 1;
    }
    .home-audience-avatars {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding-left: 10px;
    }
    .home-audience-avatars > span {
      display: grid;
      width: 40px;
      height: 40px;
      margin-left: -10px;
      place-items: center;
      border: 3px solid rgba(255,255,255,0.95);
      border-radius: 50%;
      color: #475569;
      background: linear-gradient(145deg, #fff, #eaf2fb);
      box-shadow: 0 7px 18px rgba(48,74,112,0.12);
    }
    .home-audience-avatars > span:nth-child(2) {
      color: #2563a8;
      background: linear-gradient(145deg, #eff6ff, #e0f2fe);
    }
    .home-audience-avatars > span:nth-child(3) {
      color: #0f766e;
      background: linear-gradient(145deg, #f0fdfa, #ecfeff);
    }
    .home-audience-avatars svg {
      width: 16px;
      height: 16px;
    }
    .home-audience-profile-copy {
      min-width: 0;
      flex: 1;
    }
    .home-audience-profile-copy > small {
      display: block;
      margin-bottom: 8px;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }
    .home-audience-profile-sentence {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      width: fit-content;
      max-width: 100%;
      margin: 0;
      padding: 14px 22px 14px 16px;
      overflow: hidden;
      border: none;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(120deg, #1d4ed8 0%, #2563eb 42%, #0891b2 100%);
      box-shadow:
        0 14px 32px rgba(37,99,235,0.28),
        0 0 0 1px rgba(255,255,255,0.18) inset;
      font-size: clamp(1.05rem, 1.7vw, 1.28rem);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.35;
    }
    .home-audience-profile-sentence::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,0.22), transparent 34%),
        linear-gradient(90deg, transparent 60%, rgba(255,255,255,0.08));
      pointer-events: none;
    }
    .home-audience-profile-sentence > span {
      position: relative;
      z-index: 1;
    }
    .home-audience-profile-sentence b {
      color: #fef08a;
      font-size: 1.06em;
      font-weight: 900;
      text-shadow: 0 1px 0 rgba(15,23,42,0.12);
    }
    .home-audience-profile-sentence > svg,
    .home-audience-profile-sentence i svg {
      position: relative;
      z-index: 1;
      width: 22px !important;
      height: 22px !important;
      flex-shrink: 0;
      color: #fef08a !important;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
    }
    @media (max-width: 720px) {
      .home-service-audience-profile {
        align-items: flex-start;
        flex-direction: column;
      }
      .home-audience-profile-sentence {
        width: 100%;
        padding: 14px 16px;
        font-size: 1.02rem;
      }
    }

    /* About: enterprise culture */
    .about-culture-section {
      position: relative;
      padding: 0 24px 22px;
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.07), transparent 34%),
        linear-gradient(180deg, #eef4fa, #edf3f9);
    }
    .about-culture-section .about-shell {
      position: relative;
      z-index: 1;
      max-width: 1600px;
      margin: 0 auto;
    }
    .about-culture-heading {
      margin-bottom: 24px;
      text-align: center;
    }
    .about-culture-heading > span {
      display: block;
      margin-bottom: 7px;
      color: #6366f1;
      font: 800 10px/1 'Outfit', sans-serif;
      letter-spacing: 0.15em;
    }
    .about-culture-heading h2 {
      color: #172033;
      font-size: clamp(1.65rem,3vw,2.25rem);
      font-weight: 900;
      letter-spacing: -0.04em;
    }
    .about-culture-grid {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      overflow: hidden;
      border: 1px solid rgba(99,102,241,0.12);
      border-radius: 22px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 18px 48px rgba(48,74,112,0.08), inset 0 1px 0 #fff;
    }
    .about-culture-grid article {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 104px;
      border-right: 1px solid rgba(148,163,184,0.15);
      transition: background-color 0.32s ease, box-shadow 0.32s ease;
    }
    .about-culture-grid article:last-child {
      border-right: 0;
    }
    .about-culture-grid article:hover {
      background: linear-gradient(135deg, rgba(238,242,255,0.9), rgba(236,254,255,0.7));
      box-shadow: inset 0 3px 0 rgba(99,102,241,0.48);
    }
    .about-culture-grid article > i,
    .about-culture-grid article > svg {
      width: 22px;
      height: 22px;
      padding: 10px;
      box-sizing: content-box;
      border-radius: 13px;
      color: #4f46e5;
      background: linear-gradient(135deg, #eef2ff, #e0f2fe);
    }
    .about-culture-grid article strong {
      position: relative;
      z-index: 1;
      color: #243247;
      font-size: 18px;
      font-weight: 900;
    }
    .about-culture-grid article > span {
      position: absolute;
      right: 13px;
      bottom: -8px;
      color: rgba(99,102,241,0.07);
      font: 900 54px/1 'Outfit', sans-serif;
    }
    @media (max-width: 720px) {
      .about-culture-grid {
        grid-template-columns: repeat(2,1fr);
      }
      .about-culture-grid article:nth-child(2) {
        border-right: 0;
      }
      .about-culture-grid article:nth-child(-n+2) {
        border-bottom: 1px solid rgba(148,163,184,0.15);
      }
    }

    /* Founder profile */
    .about-founder {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-radius: 24px;
      background:
        radial-gradient(circle at 100% 0%, rgba(34,211,238,0.1), transparent 32%),
        rgba(255,255,255,0.9);
      box-shadow: 0 16px 40px rgba(42,52,77,0.06);
    }
    .founder-main {
      display: grid;
      grid-template-columns: 320px minmax(0,1fr);
      align-items: stretch;
      gap: 0;
    }
    .founder-photo {
      position: relative;
      width: 100%;
      min-height: 360px;
      align-self: stretch;
      overflow: hidden;
      border-radius: 0;
      background: #d8d1ce;
      box-shadow: none;
    }
    .founder-photo::after {
      content: '';
      position: absolute;
      z-index: 1;
      inset: 0;
      background: linear-gradient(180deg, transparent 58%, rgba(15,23,42,0.68));
      pointer-events: none;
    }
    .founder-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 12%;
      transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .about-founder:hover .founder-photo img {
      transform: scale(1.03);
    }
    .founder-photo > span {
      position: absolute;
      z-index: 2;
      left: 18px;
      bottom: 16px;
      transform: none;
      width: auto;
      color: rgba(255,255,255,0.9);
      font: 800 10px/1 'Outfit', sans-serif;
      letter-spacing: 0.14em;
    }
    .founder-profile {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      width: auto;
      max-width: none;
      min-width: 0;
      padding: 28px 32px;
      text-align: left;
    }
    .founder-profile .founder-role {
      margin-bottom: 8px;
      color: #0284c7;
      font-size: 12px;
      letter-spacing: 0.08em;
    }
    .founder-profile h3 {
      margin-bottom: 10px;
      color: #172033;
      font-size: clamp(2rem,3.2vw,2.65rem);
      line-height: 1;
      letter-spacing: -0.045em;
    }
    .founder-coach {
      width: fit-content;
      margin: 0 0 14px;
      padding: 7px 12px;
      border: 1px solid rgba(99,102,241,0.13);
      border-radius: 8px;
      color: #4f46e5;
      background: #eef2ff;
      font-size: 12px;
      font-weight: 800;
    }
    .founder-profile > p {
      max-width: none;
      margin: 0;
      font-size: 15px;
      line-height: 1.7;
    }
    .founder-profile blockquote {
      width: auto;
      max-width: none;
      margin: 14px 0 0;
      padding: 12px 16px;
      border-left: 3px solid #0ea5e9;
      border-radius: 0 10px 10px 0;
      color: #334155;
      background: linear-gradient(90deg, rgba(224,242,254,0.85), rgba(224,242,254,0.18));
      font-size: 14px;
      font-weight: 800;
      text-align: left;
    }
    .founder-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 8px;
      margin-top: 16px;
    }
    .founder-profile .founder-clients {
      width: 100%;
      margin-top: 18px;
      padding: 14px 0 0;
      border: none;
      border-top: 1px solid rgba(148,163,184,0.16);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .founder-clients > strong {
      display: block;
      margin-bottom: 10px;
      color: #64748b;
      font-size: 11px;
      letter-spacing: 0.08em;
    }
    .founder-clients > div {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .founder-clients span {
      padding: 6px 9px;
      border: 1px solid rgba(14,165,233,0.1);
      border-radius: 7px;
      color: #475569;
      background: rgba(248,250,252,0.9);
      font-size: 10px;
      font-weight: 700;
    }
    .founder-clients > .founder-client-logos {
      display: grid;
      grid-template-columns: repeat(5,minmax(0,1fr));
      gap: 8px;
    }
    .founder-client-logos > span {
      display: grid;
      min-height: 48px;
      padding: 6px;
      place-items: center;
      border: 1px solid rgba(148,163,184,0.15);
      border-radius: 10px;
      background: #fff;
      box-shadow: inset 0 1px 0 #fff;
      transition:
        transform 0.28s cubic-bezier(0.22,1,0.36,1),
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background-color 0.28s ease;
    }
    .founder-client-logos > span:hover {
      transform: translateY(-3px);
      border-color: rgba(14,165,233,0.28);
      background: #f8fcff;
      box-shadow: 0 10px 22px rgba(48,74,112,0.1), inset 0 1px 0 #fff;
    }
    .founder-client-logos img {
      display: block;
      width: 100%;
      height: 32px;
      object-fit: contain;
      transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
    }
    .founder-client-logos > span:hover img {
      transform: scale(1.05);
    }
    @media (max-width: 760px) {
      .founder-main {
        grid-template-columns: 1fr;
      }
      .founder-photo {
        width: 100%;
        min-height: 300px;
        height: 300px;
      }
      .founder-profile {
        padding: 24px 20px;
      }
      .founder-clients > .founder-client-logos {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }
    }

    /* About: horizontal recruitment roles */
    .about-jobs-section {
      padding-bottom: 72px;
    }
    .about-job-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 16px;
      max-width: 960px;
      margin: 0 auto;
    }
    .about-job-card {
      --job-rgb: 99,102,241;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      min-height: 112px;
      padding: 20px 18px 20px 18px;
      overflow: hidden;
      border: 1px solid rgba(var(--job-rgb),0.12);
      border-radius: 20px;
      color: #334155;
      background:
        radial-gradient(circle at 100% 50%, rgba(var(--job-rgb),0.07), transparent 48%),
        rgba(255,255,255,0.9);
      box-shadow: 0 12px 30px rgba(48,74,112,0.065), inset 0 1px 0 #fff;
      font-family: 'Noto Sans SC', sans-serif;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.35s ease, transform 0.3s ease;
    }
    .about-job-card:nth-child(2) { --job-rgb: 14,165,233; }
    .about-job-card:nth-child(3) { --job-rgb: 249,115,22; }
    .about-job-icon {
      position: relative;
      z-index: 1;
      display: grid;
      width: 48px;
      height: 48px;
      flex-shrink: 0;
      place-items: center;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(145deg, rgba(var(--job-rgb),0.88), rgb(var(--job-rgb)));
      box-shadow: 0 8px 18px rgba(var(--job-rgb),0.22);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .about-job-card:nth-child(1) .about-job-icon {
      background: linear-gradient(145deg, #6366f1, #4f46e5);
    }
    .about-job-card:nth-child(2) .about-job-icon {
      background: linear-gradient(145deg, #0ea5e9, #0284c7);
    }
    .about-job-card:nth-child(3) .about-job-icon {
      background: linear-gradient(145deg, #f97316, #ea580c);
    }
    .about-job-icon svg {
      width: 22px;
      height: 22px;
    }
    .about-job-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      min-width: 0;
      flex: 1;
      padding-right: 36px;
    }
    .about-job-card b {
      color: #172033;
      font-size: 17px;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }
    .about-job-card small {
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      white-space: normal;
    }
    .about-job-card em {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(var(--job-rgb),0.1);
      font: 900 56px/1 'Outfit', sans-serif;
      font-style: normal;
      pointer-events: none;
      z-index: 0;
    }
    .about-job-card:hover,
    .about-job-card.is-selected {
      border-color: rgba(var(--job-rgb),0.32);
      background:
        radial-gradient(circle at 100% 0%, rgba(var(--job-rgb),0.14), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.9));
      box-shadow: 0 16px 36px rgba(var(--job-rgb),0.12), inset 0 3px 0 rgba(var(--job-rgb),0.5);
      transform: translateY(-2px);
    }
    .about-job-card:hover .about-job-icon,
    .about-job-card.is-selected .about-job-icon {
      transform: scale(1.04);
      box-shadow: 0 12px 26px rgba(var(--job-rgb),0.28);
    }
    .about-job-apply {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
      gap: 22px;
      max-width: 960px;
      margin: 18px auto 0;
      padding: 18px 20px;
      border: 1px solid rgba(14,165,233,0.13);
      border-radius: 18px;
      background: rgba(255,255,255,0.74);
      box-shadow: 0 14px 34px rgba(48,74,112,0.07), inset 0 1px 0 #fff;
    }
    .about-job-apply > div:first-child span,
    .about-job-apply > div:first-child strong {
      display: block;
    }
    .about-job-apply > div:first-child span {
      margin-bottom: 5px;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 800;
    }
    .about-job-apply > div:first-child strong {
      color: #243247;
      font-size: 14px;
    }
    .about-job-phone {
      display: flex;
      align-items: center;
      min-height: 48px;
      padding-left: 14px;
      border: 1px solid rgba(99,102,241,0.15);
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 8px 22px rgba(48,74,112,0.06);
    }
    .about-job-phone > svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      color: #6366f1;
    }
    .about-job-phone input {
      min-width: 0;
      flex: 1;
      padding: 0 12px;
      border: 0;
      outline: 0;
      color: #334155;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
    }
    .about-job-phone button {
      display: inline-flex;
      align-items: center;
      align-self: stretch;
      gap: 7px;
      padding: 0 18px;
      border: 0;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .about-job-phone button svg {
      width: 14px;
      height: 14px;
    }
    #job-phone-err {
      position: absolute;
      right: 22px;
      bottom: 1px;
      display: none;
      color: #ef4444;
      font-size: 10px;
    }
    #job-phone-err.show {
      display: block;
    }
    #job-apply-success {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: inherit;
      color: #0f766e;
      background: rgba(240,253,250,0.97);
      font-size: 14px;
      font-weight: 800;
    }
    #job-apply-success.show {
      display: flex;
    }
    #job-apply-success svg {
      width: 20px;
      height: 20px;
    }
    @media (max-width: 760px) {
      .about-job-grid {
        grid-template-columns: 1fr;
      }
      .about-job-apply {
        grid-template-columns: 1fr;
      }
      .about-job-phone button {
        padding-inline: 13px;
      }
    }
    .proof-title { font-size: clamp(1.7rem,3vw,2.25rem); font-weight: 800; color: #111216; text-align: center; letter-spacing: -0.03em; }
    .proof-sub { font-size: 14px; color: #8d8d96; text-align: center; margin-top: 10px; }
    .process-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 42px; }
    .process-card {
      position: relative;
      min-height: 168px;
      background:
        radial-gradient(circle at 18% 0%, rgba(103,232,249,0.12), transparent 34%),
        linear-gradient(180deg, #202126 0%, #15161a 100%);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 18px;
      padding: 26px 24px;
      overflow: hidden;
      box-shadow: 0 22px 52px rgba(0,0,0,0.18);
      transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s;
    }
    .process-card::before {
      content: attr(data-step);
      position: absolute;
      right: 22px;
      top: 18px;
      font-family: 'Outfit', sans-serif;
      font-size: 42px;
      font-weight: 800;
      color: rgba(255,255,255,0.045);
      letter-spacing: -0.05em;
    }
    .process-card:hover { transform: translateY(-5px); border-color: rgba(103,232,249,0.28); box-shadow: 0 26px 66px rgba(0,0,0,0.24), 0 0 36px rgba(103,232,249,0.08); }
    .process-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #67e8f9; }
    .process-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 12px; letter-spacing: -0.01em; }
    .process-list { display: flex; flex-direction: column; gap: 8px; }
    .process-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.56); }
    .process-check { width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(103,232,249,0.82); }
    .client-section { margin-top: 76px; }
    .proof-inner > .client-section:first-child {
      margin-top: 0;
    }
    .client-wall {
      margin-top: 38px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 22px 0;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 16%, rgba(103,232,249,0.16), transparent 28%),
        radial-gradient(circle at 78% 20%, rgba(99,102,241,0.18), transparent 32%),
        linear-gradient(180deg, rgba(12,13,17,0.94), rgba(20,21,27,0.9));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 80px rgba(0,0,0,0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }
    .client-wall::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, black 18%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, black 18%, transparent 100%);
      pointer-events: none;
    }
    .client-wall::after {
      content: '';
      position: absolute;
      left: -30%;
      top: 0;
      width: 28%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(103,232,249,0.08), transparent);
      animation: client-scan 7s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes client-scan {
      0%, 18% { transform: translateX(0); opacity: 0; }
      32% { opacity: 1; }
      58%, 100% { transform: translateX(470%); opacity: 0; }
    }
    .client-marquee-row {
      position: relative;
      z-index: 1;
      overflow: hidden;
      width: 100%;
      mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    }
    .client-track {
      display: flex;
      width: max-content;
      gap: 14px;
      padding: 0 14px;
      animation: client-marquee 30s linear infinite;
    }
    .client-marquee-row.reverse .client-track { animation-name: client-marquee-reverse; animation-duration: 34s; }
    .client-wall:hover .client-track { animation-play-state: paused; }
    @keyframes client-marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @keyframes client-marquee-reverse {
      from { transform: translateX(-50%); }
      to { transform: translateX(0); }
    }

    .path-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 24px 20px; flex: 1; min-width: 140px; transition: box-shadow 0.2s, transform 0.2s; }
    .path-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-3px); }

    /* ── Mac frame ── */
    .mac-frame { background: #fff; border-radius: 14px; border: 1px solid rgba(0,0,0,0.1); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
    .mac-bar { background: #f5f5f5; border-bottom: 1px solid rgba(0,0,0,0.06); padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
    .mac-dot { width: 12px; height: 12px; border-radius: 50%; }
    .mac-url { flex: 1; margin: 0 16px; background: rgba(0,0,0,0.06); border-radius: 6px; padding: 5px 14px; font-size: 12px; color: #888; }
    .mac-tab { padding: 10px 20px; font-size: 13px; color: #999; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; font-family: 'Noto Sans SC', sans-serif; background: none; border-top: none; border-left: none; border-right: none; }
    .mac-tab.active { color: #1d1d1f; border-bottom-color: #1d1d1f; font-weight: 500; }
    .mac-content-panel { display: none; }
    .mac-content-panel.active { display: block; }

    /* ── Icons ── */
    .cap-icon-wrap { width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; background: #fff; margin: 0 auto 10px; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; }
    .cap-icon-wrap:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }

    .grad-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
    .grad-icon:hover { transform: scale(1.12) rotate(-3deg); }

    /* ── Employee card ── */
    .emp-card { background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); padding: 18px 12px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
    .emp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
    .emp-card::after { content:''; position:absolute; top:-50%; left:-60%; width:40%; height:200%; background:linear-gradient(105deg,transparent,rgba(255,255,255,0.2),transparent); transition:left 0.5s ease; }
    .emp-card:hover::after { left: 130%; }

    /* ── Framework rows ── */
    .fw-row { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); display: grid; grid-template-columns: 200px 1fr; background: #fff; margin-bottom: 12px; transition: box-shadow 0.2s, transform 0.2s; }
    .fw-row:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .fw-left { padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; }
    .fw-right { padding: 24px 28px; border-left: 1px solid rgba(0,0,0,0.06); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .fw-chip { display: flex; align-items: center; gap: 8px; background: #f7f7f7; border-radius: 8px; padding: 8px 14px; font-size: 12px; color: #444; font-family: 'Noto Sans SC', sans-serif; transition: background 0.2s, transform 0.2s; }
    .fw-chip:hover { background: #efefef; transform: translateY(-1px); }
    .fw-chip-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

    /* ── Case ── */
    .case-cell { position: relative; z-index: 1; flex: 0 0 176px; background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.026)); border: 1px solid rgba(255,255,255,0.09); border-radius: 15px; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: rgba(255,255,255,0.54); font-family: 'Noto Sans SC', sans-serif; transition: opacity 0.45s ease, border-color 0.2s, color 0.2s, transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, background 0.2s; overflow: hidden; opacity: 1; transform: none; }
    .case-cell::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 25%, rgba(103,232,249,0.16), transparent 75%); transform: translateX(-110%); transition: transform 0.55s ease; }
    .case-cell::after { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(103,232,249,0.38), transparent); opacity: 0.5; }
    .case-cell span { position: relative; z-index: 1; }
    .case-featured { background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)); border-color: rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
    .case-featured::before { background: linear-gradient(120deg, transparent 25%, rgba(103,232,249,0.2), transparent 75%); }
    .case-minor { opacity: 0.8; }
    .case-cell.is-visible { opacity: 1; transform: translateY(0) scale(1); }
    .case-minor.is-visible { opacity: 0.62; transform: translateY(0) scale(0.96); }
    .case-minor .client-logo-mark { font-size: 16px; letter-spacing: 0.02em; }
    .client-logo-mark { font-size: 18px; font-weight: 900; color: rgba(255,255,255,0.86); letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 0 18px rgba(255,255,255,0.06); }
    .client-logo-meta { font-size: 9px; color: rgba(255,255,255,0.3); font-family: 'Outfit', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
    .case-cell:hover .client-logo-mark { color: #fff; }
    .case-cell:hover .client-logo-meta { color: rgba(103,232,249,0.62); }
    .case-cell:hover { opacity: 1; border-color: rgba(103,232,249,0.38); background: linear-gradient(180deg, rgba(103,232,249,0.12), rgba(255,255,255,0.045)); color: #fff; transform: translateY(-3px) scale(1); box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 28px rgba(103,232,249,0.1); }
    .case-cell:hover::before { transform: translateX(110%); }
    .case-cell.is-pulsing { opacity: 1; border-color: rgba(103,232,249,0.46); background: linear-gradient(180deg, rgba(103,232,249,0.14), rgba(255,255,255,0.05)); box-shadow: 0 18px 40px rgba(0,0,0,0.24), 0 0 34px rgba(103,232,249,0.16); }
    .case-cell.is-pulsing::before { transform: translateX(110%); }
    .case-more-btn { display: inline-flex; align-items: center; gap: 7px; margin-top: 26px; background: rgba(29,29,31,0.04); border: 1px solid rgba(29,29,31,0.08); border-radius: 999px; padding: 10px 18px; font-size: 13px; color: #666; cursor: pointer; font-family: 'Noto Sans SC',sans-serif; transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s; }
    .case-more-btn:hover { color: #111216; border-color: rgba(99,102,241,0.24); background: rgba(255,255,255,0.72); transform: translateY(-1px); }

    /* ── Contact card ── */
    .contact-section {
      padding: 24px 24px 78px;
      background:
        radial-gradient(circle at 50% 0%, rgba(34,211,238,0.08), transparent 34%),
        linear-gradient(180deg, #e9eaf1 0%, #e3e5ee 100%);
    }
    .contact-shell { max-width: 1600px; margin: 0 auto; }
    .contact-card {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 8%, rgba(99,102,241,0.22), transparent 34%),
        radial-gradient(circle at 88% 20%, rgba(34,211,238,0.14), transparent 30%),
        linear-gradient(180deg, #111216 0%, #08090d 100%);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px;
      padding: 48px;
      color: #fff;
      box-shadow: 0 28px 80px rgba(0,0,0,0.2), 0 0 72px rgba(99,102,241,0.1);
    }
    .contact-card::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse 75% 80% at 50% 30%, black 22%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 30%, black 22%, transparent 100%); pointer-events: none; }
    .contact-card > * { position: relative; z-index: 1; }
    .contact-head { text-align: center; margin-bottom: 34px; }
    .contact-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; border: 1px solid rgba(103,232,249,0.22); background: rgba(103,232,249,0.08); color: rgba(255,255,255,0.68); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-family: 'Outfit', 'Noto Sans SC', sans-serif; }
    .contact-head h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; }
    .contact-head p { font-size: 13px; color: rgba(255,255,255,0.46); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: stretch; max-width: 820px; margin: 0 auto; }
    .contact-form { display: flex; flex-direction: column; justify-content: center; }
    .field-row { margin-bottom: 14px; }
    .wechat-panel { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
    .qr-card { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 154px; border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; background: rgba(255,255,255,0.055); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
    .qr-frame { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; box-shadow: 0 0 32px rgba(103,232,249,0.16); }
    .qr-title { font-size: 14px; color: rgba(255,255,255,0.82); font-weight: 700; margin-bottom: 6px; }
    .qr-desc { font-size: 12px; color: rgba(255,255,255,0.42); }
    .contact-note { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,0.4); }
    .contact-note span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,0.035); }

    .site-footer {
      padding: 24px;
      background: #e3e5ee;
      border-top: 1px solid rgba(29,29,31,0.05);
    }
    .site-footer-inner {
      max-width: 1600px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      color: #9a9aa3;
    }

    /* ── Form ── */
    .f-input { background: rgba(255,255,255,0.065); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 13px 16px; font-size: 14px; color: #fff; outline: none; width: 100%; font-family: 'Noto Sans SC', sans-serif; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
    .f-input:focus { border-color: rgba(103,232,249,0.42); background: rgba(255,255,255,0.085); box-shadow: 0 0 0 3px rgba(103,232,249,0.07); }
    .f-input::placeholder { color: rgba(255,255,255,0.34); }
    .f-err { font-size: 11px; color: #ff6b6b; display: none; margin-top: 4px; }
    .f-err.show { display: block; }

    /* ── Skill tag ── */
    .skill-tag { background: #f5f5f7; border-radius: 8px; padding: 8px 16px; font-size: 13px; color: #555; cursor: default; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; display: inline-block; }
    .skill-tag:hover { background: #ebebef; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

    /* ── Mobile menu ── */
    #mob-menu { display: none; position: fixed; inset: 0; z-index: 49; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); padding: 80px 24px 32px; flex-direction: column; gap: 4px; }
    #mob-menu.open { display: flex; }
    .mob-nav-item { padding: 14px 0; font-size: 18px; font-weight: 500; color: #1d1d1f; background: none; border: none; cursor: pointer; text-align: left; border-bottom: 1px solid rgba(0,0,0,0.05); font-family: 'Noto Sans SC', sans-serif; }

    @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
    .shake { animation: shake 0.35s ease; }

    /* ── Scroll-reveal (SAFE: fallback always visible) ── */
    .sr { opacity: 1; transform: none; }
    .sr.sr-ready { opacity: 0; transform: translateY(20px); transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1); }
    .sr.sr-ready.sr-in { opacity: 1; transform: translateY(0); }

    /* About page module reveal */
    #page-about .about-hero-copy.sr-ready {
      opacity: 0;
      transform: translateY(18px);
    }
    #page-about .about-hero-panel.sr-ready {
      opacity: 0;
      transform: translateY(22px);
    }
    #page-about .about-hero-copy.sr-ready.sr-in,
    #page-about .about-hero-panel.sr-ready.sr-in {
      opacity: 1;
      transform: none;
      transition: opacity 0.65s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-hero-panel.sr-ready.sr-in {
      transition-delay: 0.12s;
    }
    #page-about .about-hero-copy.sr-ready.sr-in .about-hero-brand,
    #page-about .about-hero-copy.sr-ready.sr-in .about-hero-experience,
    #page-about .about-hero-copy.sr-ready.sr-in .about-hero-slogan {
      animation: about-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) both;
    }
    #page-about .about-hero-copy.sr-ready.sr-in .about-hero-experience { animation-delay: 0.12s; }
    #page-about .about-hero-copy.sr-ready.sr-in .about-hero-slogan { animation-delay: 0.22s; }
    #page-about .about-story-card.sr-ready .about-story-mark {
      opacity: 0;
      transform: translateX(-18px);
    }
    #page-about .about-story-card.sr-ready .about-story-copy p {
      opacity: 0;
      transform: translateY(14px);
    }
    #page-about .about-story-card.sr-ready.sr-in .about-story-mark,
    #page-about .about-story-card.sr-ready.sr-in .about-story-copy p {
      opacity: 1;
      transform: none;
      transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-story-card.sr-ready.sr-in .about-story-mark { transition-delay: 0.08s; }
    #page-about .about-story-card.sr-ready.sr-in .about-story-copy p:nth-child(1) { transition-delay: 0.16s; }
    #page-about .about-story-card.sr-ready.sr-in .about-story-copy p:nth-child(2) { transition-delay: 0.26s; }
    #page-about .about-story-card.sr-ready.sr-in .about-story-copy p:nth-child(3) { transition-delay: 0.36s; }
    #page-about .about-story-card.sr-ready.sr-in .about-story-copy p:nth-child(4) { transition-delay: 0.46s; }
    #page-about .about-story-timeline.sr-ready .timeline-node {
      opacity: 0;
      transform: translateY(22px);
    }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node {
      opacity: 1;
      transform: none;
      transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node:nth-child(1) { transition-delay: 0.1s; }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node:nth-child(2) { transition-delay: 0.2s; }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node:nth-child(3) { transition-delay: 0.3s; }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node:nth-child(4) { transition-delay: 0.4s; }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node:nth-child(5) { transition-delay: 0.5s; }
    #page-about .about-story-timeline.sr-ready.sr-in .timeline-node.is-pivot {
      transform: translateY(-7px);
    }
    #page-about .about-culture-grid.sr-ready article {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }
    #page-about .about-culture-grid.sr-ready.sr-in article {
      opacity: 1;
      transform: none;
      transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-culture-grid.sr-ready.sr-in article:nth-child(1) { transition-delay: 0.08s; }
    #page-about .about-culture-grid.sr-ready.sr-in article:nth-child(2) { transition-delay: 0.16s; }
    #page-about .about-culture-grid.sr-ready.sr-in article:nth-child(3) { transition-delay: 0.24s; }
    #page-about .about-culture-grid.sr-ready.sr-in article:nth-child(4) { transition-delay: 0.32s; }
    #page-about .about-founder.sr-ready .founder-photo {
      opacity: 0;
      transform: translateX(-24px);
    }
    #page-about .about-founder.sr-ready .founder-profile {
      opacity: 0;
      transform: translateX(24px);
    }
    #page-about .about-founder.sr-ready.sr-in .founder-photo,
    #page-about .about-founder.sr-ready.sr-in .founder-profile {
      opacity: 1;
      transform: none;
      transition: opacity 0.65s ease, transform 0.75s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-founder.sr-ready.sr-in .founder-photo { transition-delay: 0.08s; }
    #page-about .about-founder.sr-ready.sr-in .founder-profile { transition-delay: 0.18s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span {
      animation: about-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) both;
    }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(1) { animation-delay: 0.34s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(2) { animation-delay: 0.38s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(3) { animation-delay: 0.42s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(4) { animation-delay: 0.46s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(5) { animation-delay: 0.5s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(6) { animation-delay: 0.54s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(7) { animation-delay: 0.58s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(8) { animation-delay: 0.62s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(9) { animation-delay: 0.66s; }
    #page-about .about-founder.sr-ready.sr-in .founder-client-logos > span:nth-child(10) { animation-delay: 0.7s; }
    #page-about .about-team-group.sr-ready .about-team-person {
      opacity: 0;
      transform: translateY(18px);
    }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person {
      opacity: 1;
      transform: none;
      transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(1) { transition-delay: 0.06s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(2) { transition-delay: 0.1s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(3) { transition-delay: 0.14s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(4) { transition-delay: 0.18s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(5) { transition-delay: 0.22s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(6) { transition-delay: 0.26s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(7) { transition-delay: 0.3s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(8) { transition-delay: 0.34s; }
    #page-about .about-team-group.sr-ready.sr-in .about-team-person:nth-child(n+9) { transition-delay: 0.38s; }
    #page-about .about-job-grid.sr-ready .about-job-card {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }
    #page-about .about-job-grid.sr-ready.sr-in .about-job-card {
      opacity: 1;
      transform: none;
      transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16,1,0.3,1);
    }
    #page-about .about-job-grid.sr-ready.sr-in .about-job-card:nth-child(1) { transition-delay: 0.08s; }
    #page-about .about-job-grid.sr-ready.sr-in .about-job-card:nth-child(2) { transition-delay: 0.18s; }
    #page-about .about-job-grid.sr-ready.sr-in .about-job-card:nth-child(3) { transition-delay: 0.28s; }
    @keyframes about-fade-up {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      #page-about .sr.sr-ready,
      #page-about .sr.sr-ready * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
      }
    }

    /* ── About ── */
    .team-card { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
    .team-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    .job-row { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; gap: 16px; transition: box-shadow 0.2s, transform 0.2s; cursor: pointer; }
    .job-row:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
    .about-shell {
      max-width: 1600px;
      margin: 0 auto;
    }
    .about-hero {
      padding: 118px 24px 72px;
      overflow: hidden;
    }
    .about-hero-inner {
      max-width: 1600px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 470px;
      gap: 54px;
      align-items: center;
    }
    .about-hero-copy h1 {
      max-width: 680px;
      font-size: clamp(2.1rem, 4.5vw, 4rem);
      line-height: 1.08;
      font-weight: 900;
      color: #fff;
      letter-spacing: 0;
      margin: 18px 0 18px;
    }
    .about-hero-copy p {
      max-width: 620px;
      color: rgba(255,255,255,0.66);
      font-size: 15px;
      line-height: 1.9;
      font-family: 'Noto Sans SC', sans-serif;
    }
    .about-hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .about-hero-tags span {
      border: 1px solid rgba(255,255,255,0.13);
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.82);
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 12px;
    }
    .about-hero-panel {
      position: relative;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 24px;
      padding: 20px;
      background:
        radial-gradient(circle at 70% 20%, rgba(103,232,249,0.18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045));
      box-shadow: 0 24px 80px rgba(0,0,0,0.22);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }
    .about-panel-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(255,255,255,0.72);
      font-size: 11px;
      letter-spacing: 0;
      margin-bottom: 16px;
    }
    .about-panel-top strong {
      color: #fff;
      font-size: 12px;
    }
    .about-runtime-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 18px;
    }
    .about-runtime-grid div {
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      padding: 16px;
      background: rgba(255,255,255,0.075);
    }
    .about-runtime-grid strong {
      display: block;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 8px;
    }
    .about-runtime-grid span {
      color: rgba(255,255,255,0.58);
      font-size: 12px;
    }
    .about-signal-map {
      position: relative;
      min-height: 230px;
      border-radius: 20px;
      background:
        radial-gradient(circle at 50% 50%, rgba(103,232,249,0.16), transparent 30%),
        linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
      background-size: auto, 24px 24px, 24px 24px;
      overflow: hidden;
    }
    .signal-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 112px;
      height: 70px;
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #031826;
      font-weight: 900;
      background: linear-gradient(135deg, #67e8f9, #a7f3d0);
      box-shadow: 0 18px 44px rgba(103,232,249,0.24);
    }
    .signal-node {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.09);
      color: rgba(255,255,255,0.78);
      font-size: 12px;
      animation: agent-node-float 4.8s ease-in-out infinite;
    }
    .signal-node svg {
      width: 14px;
      height: 14px;
      color: #67e8f9;
    }
    .signal-node.n1 { left: 8%; top: 18%; }
    .signal-node.n2 { right: 8%; top: 22%; animation-delay: -1.2s; }
    .signal-node.n3 { left: 13%; bottom: 16%; animation-delay: -2.2s; }
    .signal-node.n4 { right: 12%; bottom: 15%; animation-delay: -3s; }
    .about-intro-section,
    .about-timeline-section,
    .about-team-section,
    .about-jobs-section {
      padding: 64px 24px 0;
    }
    .about-intro-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 28px;
      align-items: stretch;
    }
    .about-copy-card,
    .about-capability-board,
    .about-founder {
      border: 1px solid rgba(37,99,235,0.09);
      border-radius: 22px;
      background:
        radial-gradient(circle at 85% 15%, rgba(14,165,233,0.10), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.94), rgba(240,248,252,0.72));
      box-shadow: 0 18px 44px rgba(42,52,77,0.08);
    }
    .about-copy-card {
      padding: 34px;
    }
    .about-copy-card h2 {
      font-size: clamp(1.6rem, 2.5vw, 2.4rem);
      line-height: 1.18;
      font-weight: 900;
      color: #111216;
      margin: 12px 0 18px;
      letter-spacing: 0;
    }
    .about-copy-card p {
      color: #5f6b7a;
      font-size: 14px;
      line-height: 1.9;
      margin-bottom: 14px;
      font-family: 'Noto Sans SC', sans-serif;
    }
    .about-proof-line {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }
    .about-proof-line span,
    .founder-tags span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid rgba(14,165,233,0.12);
      background: rgba(232,249,253,0.74);
      color: #315167;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
    }
    .founder-tags span {
      cursor: default;
      transition:
        transform 0.25s cubic-bezier(0.22,1,0.36,1),
        border-color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
    }
    .founder-tags span:hover {
      transform: translateY(-2px);
      border-color: rgba(14,165,233,0.28);
      background: rgba(224,242,254,0.96);
      color: #0c4a6e;
      box-shadow: 0 8px 18px rgba(14,165,233,0.14);
    }
    .about-proof-line svg {
      width: 14px;
      height: 14px;
      color: #0ea5e9;
    }
    .about-capability-board {
      padding: 22px;
      display: grid;
      gap: 12px;
    }
    .capability-line {
      display: grid;
      grid-template-columns: 42px minmax(130px, 0.72fr) minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      padding: 16px;
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(37,99,235,0.07);
    }
    .capability-line span {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0ea5e9;
      font-family: 'Outfit', sans-serif;
      font-weight: 900;
      background: rgba(232,249,253,0.9);
    }
    .capability-line strong {
      color: #102033;
      font-size: 14px;
      display: block;
      min-width: 0;
      white-space: nowrap;
    }
    .capability-line em {
      display: flex;
      flex-wrap: nowrap;
      gap: 7px;
      color: #8a96a8;
      font-size: 12px;
      font-style: normal;
      margin-top: 0;
      min-width: 0;
      justify-content: flex-start;
    }
    .capability-line em b {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(14,165,233,0.12);
      background: rgba(239,248,252,0.76);
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .about-timeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }
    .about-timeline::before {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      top: 32px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.28), rgba(20,184,166,0.22), transparent);
    }
    .timeline-node {
      position: relative;
      padding: 58px 18px 20px;
      min-height: 146px;
      border-radius: 18px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(37,99,235,0.08);
      box-shadow: 0 14px 34px rgba(42,52,77,0.06);
    }
    .timeline-dot {
      position: absolute;
      left: 18px;
      top: 22px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: #e0f7ff;
      border: 5px solid #fff;
      box-shadow: 0 0 0 1px rgba(14,165,233,0.18);
    }
    .timeline-node.is-current .timeline-dot {
      background: #0ea5e9;
      box-shadow: 0 0 0 6px rgba(14,165,233,0.12);
    }
    .timeline-node strong {
      display: block;
      font-family: 'Outfit', sans-serif;
      color: #102033;
      font-size: 20px;
      font-weight: 900;
      margin-bottom: 8px;
    }
    .timeline-node p {
      color: #6b7788;
      font-size: 12px;
      line-height: 1.6;
    }
    .about-founder {
      margin-bottom: 36px;
    }
    .founder-avatar {
      width: 112px;
      height: 112px;
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, #2563eb, #0ea5e9 55%, #14b8a6);
      box-shadow: 0 18px 38px rgba(14,165,233,0.20);
    }
    .founder-role {
      font-size: 11px;
      color: #0ea5e9;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .about-founder h3 {
      font-size: clamp(2rem,3.2vw,2.65rem);
      font-weight: 900;
      color: #111216;
      margin-bottom: 10px;
    }
    .about-founder p {
      max-width: 670px;
      color: #5f6b7a;
      font-size: 14px;
      line-height: 1.85;
    }
    .founder-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }
    .team-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      margin-bottom: 16px;
    }
    .team-head span {
      color: #102033;
      font-size: 20px;
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .about-team-group .team-head span {
      font-size: 22px;
    }
    .team-head em {
      color: #8a96a8;
      font-size: 12px;
      font-style: normal;
    }
    .about-team-groups {
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    .about-team-group .team-head {
      margin-bottom: 18px;
    }
    .about-team-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    @media (max-width: 980px) {
      .about-team-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    .about-team-person {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 16px 14px 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(37,99,235,0.08);
      box-shadow: 0 12px 28px rgba(42,52,77,0.06);
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .about-team-person:hover {
      transform: translateY(-3px);
      border-color: rgba(14,165,233,0.18);
      box-shadow: 0 16px 34px rgba(42,52,77,0.1);
    }
    .about-team-photo {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      overflow: hidden;
      background: linear-gradient(145deg, #e8f4ff, #f1f5f9);
      border: 3px solid #fff;
      box-shadow: 0 8px 20px rgba(37,99,235,0.12);
    }
    .about-team-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }
    .about-team-person strong {
      color: #102033;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1.3;
      text-align: center;
    }
    .team-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0ea5e9;
      background: rgba(232,249,253,0.88);
      border: 1px solid rgba(14,165,233,0.12);
      margin-bottom: 18px;
    }
    .about-jobs-section {
      padding-bottom: 72px;
    }

    /* Ripple */
    @keyframes ripple-out { to { transform: scale(1); opacity: 0; } }

    /* ── Console Tabs ── */
    .ctab {
      padding: 5px 12px; font-size: 11px; font-family: 'Outfit', monospace;
      color: rgba(255,255,255,0.3); border-radius: 6px; cursor: pointer;
      transition: all 0.2s; letter-spacing: 0.03em;
    }
    .ctab:hover { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.05); }
    .ctab-active { color: #fff !important; background: rgba(99,102,241,0.2) !important; border: 1px solid rgba(99,102,241,0.3); }

    .cpanel { animation: fadeSlideUp 0.3s cubic-bezier(0.16,1,0.3,1) both; }

    /* ── KPI card ── */
    .kpi-card {
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px; padding: 8px 10px;
      transition: border-color 0.2s, background 0.2s, transform 0.2s;
      cursor: default;
    }
    .kpi-card:hover { background: rgba(255,255,255,0.04); transform: translateY(-1px); }

    /* ── Agent list item in tab ── */
    .agent-row {
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
      border-radius: 9px; padding: 8px 10px; cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .agent-row:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
    .agent-row.selected { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.06); }

    /* progress bar animation */
    @keyframes progress-fill {
      from { width: 0; }
    }
    .prog-bar { animation: progress-fill 1.2s cubic-bezier(0.16,1,0.3,1) both; }

    /* Log line type-on */
    @keyframes log-in {
      from { opacity: 0; transform: translateX(-8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .log-line { animation: log-in 0.25s ease both; }

    @media (prefers-reduced-motion: reduce) {
      .client-wall::after { animation: none; display: none; }
      .client-track { animation: none; transform: none; flex-wrap: wrap; width: auto; justify-content: center; }
      .client-marquee-row { overflow: visible; mask-image: none; -webkit-mask-image: none; }
      .case-cell { transition: none; opacity: 1; transform: none; }
      .case-minor { opacity: 0.62; }
      .case-cell.is-pulsing { box-shadow: none; }
    }

    @media (max-width:768px) {
      .desk-only { display: none !important; }
      .mob-only  { display: flex !important; }
      .fw-row { grid-template-columns: 1fr; }
      .fw-left { padding: 16px 20px; }
      .about-hero {
        padding: 96px 20px 56px;
        overflow: visible;
      }
      .about-hero-inner,
      .about-intro-grid {
        grid-template-columns: 1fr;
      }
      .about-hero-inner {
        gap: 30px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .about-hero-copy {
        min-width: 0;
        max-width: 100%;
      }
      .about-hero-panel,
      .about-copy-card,
      .about-capability-board,
      .about-founder {
        border-radius: 18px;
      }
      .about-runtime-grid {
        grid-template-columns: 1fr 1fr;
      }
      .about-intro-section,
      .about-timeline-section,
      .about-team-section,
      .about-jobs-section {
        padding-left: 20px;
        padding-right: 20px;
      }
      .about-timeline {
        grid-template-columns: 1fr;
      }
      .about-timeline::before {
        left: 28px;
        right: auto;
        top: 18px;
        bottom: 18px;
        width: 1px;
        height: auto;
      }
      .timeline-node {
        min-height: auto;
        padding: 22px 20px 22px 62px;
      }
      .timeline-dot {
        left: 20px;
        top: 24px;
      }
      .founder-avatar {
        width: 88px;
        height: 88px;
        border-radius: 22px;
      }
      .team-head {
        display: block;
      }
      .team-head em {
        display: block;
        margin-top: 6px;
      }
      .about-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .about-team-photo {
        width: 84px;
        height: 84px;
      }
      .about-team-person {
        padding: 14px 10px 16px;
      }
      .about-team-person strong {
        font-size: 14px;
      }
      .contact-card { padding: 32px 24px; }
      .contact-grid { grid-template-columns: 1fr; gap: 24px; }
      .qr-card { flex-direction: column; padding: 22px; text-align: center; }
      .business-ai-banner {
        padding: 28px 20px;
      }
      .service-stack-section {
        padding: 52px 20px 62px;
      }
      .service-stack-inner::before {
        display: none;
      }
      .service-stack-heading {
        margin-bottom: 34px;
        text-align: center;
      }
      .service-stack-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
      }
      .service-stack-grid::before,
      .service-stack-path {
        display: none;
      }
      .service-stack-title {
        font-size: clamp(1.8rem, 9vw, 2.3rem);
      }
      .service-stack-card,
      .service-stack-card--consult,
      .service-stack-card--deploy,
      .service-stack-card--support {
        --service-card-rest: translateY(0);
        min-height: auto;
        transform: none;
        border-radius: 24px;
      }
      .service-stack-head {
        min-height: auto;
        padding: 24px 22px 28px;
      }
      .service-stack-list {
        padding: 22px 22px 26px;
      }
      .business-ai-inner {
        grid-template-columns: 1fr;
        padding: 22px;
        border-radius: 20px;
      }
      .business-ai-flow {
        grid-template-columns: 1fr;
      }
      .business-flow-arrow {
        transform: rotate(90deg);
      }
      .business-step {
        min-height: auto;
      }
      .advantage-band { padding: 56px 20px 34px; }
      .adv-grid { grid-template-columns: 1fr; gap: 14px; }
      .base-band { padding: 20px 20px 48px; }
      .base-console { border-radius: 18px; }
      .console-body { padding: 30px 20px 28px; }
      .console-heading { grid-template-columns: 1fr; gap: 20px; }
      .console-stats { grid-template-columns: repeat(3,1fr); }
      .base-cap-grid { grid-template-columns: 1fr 1fr; }
      .proof-band { padding: 48px 20px 44px; }
      .process-grid { grid-template-columns: 1fr; }
      .client-wall { padding: 16px 0; }
      .case-cell { flex-basis: 150px; min-height: 72px; }
    }

    /* ── Light bottom variant: cohesive lower page ── */
    .advantage-band,
    .base-band,
    .proof-band,
    .contact-section,
    .site-footer {
      background-color: #edf1f8;
    }

    .advantage-band {
      background:
        radial-gradient(circle at 18% 0%, rgba(103,232,249,0.18), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(99,102,241,0.14), transparent 34%),
        linear-gradient(180deg, #f5f7fb 0%, #eef2f8 58%, #eaf0f7 100%);
    }
    .base-band {
      background:
        radial-gradient(circle at 18% 10%, rgba(99,102,241,0.13), transparent 34%),
        radial-gradient(circle at 86% 8%, rgba(34,211,238,0.13), transparent 32%),
        linear-gradient(180deg, #eaf0f7 0%, #e9eef7 52%, #eaf0f7 100%);
    }
    .proof-band {
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.12), transparent 30%),
        radial-gradient(circle at 12% 28%, rgba(34,211,238,0.10), transparent 34%),
        linear-gradient(180deg, #eaf0f7 0%, #edf2f8 48%, #eef3f9 100%);
    }
    .contact-section {
      background:
        radial-gradient(circle at 50% 0%, rgba(34,211,238,0.12), transparent 32%),
        linear-gradient(180deg, #eef3f9 0%, #e9eff7 100%);
    }
    .site-footer {
      background: #e9eff7;
      border-top-color: rgba(99,102,241,0.10);
    }

    .advantage-band::before,
    .proof-band::before {
      background-image: radial-gradient(rgba(99,102,241,0.12) 1px, transparent 1px);
      opacity: 0.55;
    }

    .adv-card,
    .process-card {
      background:
        linear-gradient(120deg, rgba(255,255,255,0.82), rgba(255,255,255,0.50)),
        radial-gradient(circle at 18% 0%, rgba(103,232,249,0.18), transparent 36%);
      border-color: rgba(99,102,241,0.14);
      box-shadow: 0 18px 46px rgba(42,52,77,0.08), inset 0 1px 0 rgba(255,255,255,0.82);
    }
    .adv-card::before,
    .process-card::before {
      color: rgba(99,102,241,0.09);
    }
    .adv-card::after,
    .process-card::after {
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.40), rgba(99,102,241,0.28), transparent);
    }
    .adv-card:hover,
    .process-card:hover {
      border-color: rgba(34,211,238,0.34);
      box-shadow: 0 24px 58px rgba(42,52,77,0.12), 0 0 34px rgba(34,211,238,0.13);
    }
    .adv-title {
      background: rgba(99,102,241,0.08);
      border-color: rgba(99,102,241,0.14);
      color: #161b2b;
    }
    .adv-list li,
    .process-item {
      color: #667085;
    }
    .process-icon,
    .process-check {
      background: rgba(34,211,238,0.10);
      border-color: rgba(34,211,238,0.18);
      color: #0891b2;
    }
    .process-title {
      color: #161b2b;
    }

    .base-console,
    .contact-card {
      color: #151a2b;
      background:
        radial-gradient(circle at 16% 10%, rgba(99,102,241,0.18), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(34,211,238,0.16), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,250,255,0.66));
      border-color: rgba(99,102,241,0.16);
      box-shadow: 0 28px 78px rgba(42,52,77,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .base-console::before,
    .contact-card::before {
      background-image:
        linear-gradient(rgba(99,102,241,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.08) 1px, transparent 1px);
      opacity: 0.72;
    }
    .base-console::after {
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.42), rgba(99,102,241,0.34), transparent);
    }
    .console-topbar {
      background: rgba(255,255,255,0.46);
      border-bottom-color: rgba(99,102,241,0.12);
    }
    .console-title,
    .console-label,
    .console-kicker,
    .console-live,
    .contact-kicker,
    .contact-head p,
    .qr-desc,
    .contact-note {
      color: #667085;
    }
    .console-heading h2,
    .contact-head h2 {
      color: #111827;
    }
    .console-heading p {
      color: #667085;
    }
    .console-stat,
    .console-panel,
    .base-cap-card,
    .qr-card,
    .contact-note span {
      background: rgba(255,255,255,0.62);
      border-color: rgba(99,102,241,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    }
    .console-stat strong,
    .base-cap-card .cap-title,
    .qr-title {
      color: #151a2b;
    }
    .console-stat span,
    .base-cap-card .cap-desc {
      color: #667085;
    }
    .base-cap-card .cap-icon-wrap,
    .base-console .skill-tag {
      background: rgba(255,255,255,0.70);
      border-color: rgba(99,102,241,0.13);
      color: #475467;
    }
    .base-cap-card:hover,
    .base-console .skill-tag:hover {
      background: rgba(232,249,253,0.82);
      border-color: rgba(34,211,238,0.34);
      color: #111827;
      box-shadow: 0 12px 30px rgba(34,211,238,0.10);
    }

    .client-wall {
      background:
        radial-gradient(circle at 16% 16%, rgba(34,211,238,0.17), transparent 30%),
        radial-gradient(circle at 82% 20%, rgba(99,102,241,0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.76), rgba(248,251,255,0.56));
      border-color: rgba(99,102,241,0.14);
      box-shadow: 0 24px 70px rgba(42,52,77,0.11), inset 0 1px 0 rgba(255,255,255,0.86);
    }
    .client-wall::before {
      background-image:
        linear-gradient(rgba(99,102,241,0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.075) 1px, transparent 1px);
      opacity: 0.85;
    }
    .client-wall::after {
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.14), transparent);
    }
    .case-cell {
      background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.48));
      border-color: rgba(99,102,241,0.12);
      color: #667085;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
    }
    .case-featured {
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(235,248,255,0.62));
      border-color: rgba(34,211,238,0.22);
    }
    .case-minor.is-visible {
      opacity: 0.74;
    }
    .client-logo-mark {
      color: #202638;
      text-shadow: none;
    }
    .client-logo-meta {
      color: #98a2b3;
    }
    .case-cell:hover,
    .case-cell.is-pulsing {
      background: linear-gradient(180deg, rgba(232,249,253,0.95), rgba(255,255,255,0.66));
      border-color: rgba(34,211,238,0.38);
      color: #111827;
      box-shadow: 0 16px 34px rgba(42,52,77,0.13), 0 0 28px rgba(34,211,238,0.13);
    }
    .case-cell:hover .client-logo-mark {
      color: #0f172a;
    }

    .f-input {
      background: rgba(255,255,255,0.70);
      border-color: rgba(99,102,241,0.14);
      color: #111827;
    }
    .f-input:focus {
      border-color: rgba(34,211,238,0.44);
      background: rgba(255,255,255,0.92);
      box-shadow: 0 0 0 3px rgba(34,211,238,0.11);
    }
    .f-input::placeholder {
      color: #98a2b3;
    }
    .qr-frame {
      box-shadow: 0 14px 34px rgba(42,52,77,0.12), 0 0 30px rgba(34,211,238,0.14);
    }
    .site-footer-inner {
      color: #7b8495;
    }

    /* ── Light bottom variant v2: full palette shift ── */
    .advantage-band,
    .base-band,
    .proof-band,
    .contact-section,
    .site-footer {
      color: #172033;
    }

    .advantage-band {
      background:
        radial-gradient(circle at 18% 8%, rgba(45,212,191,0.18), transparent 30%),
        radial-gradient(circle at 82% 0%, rgba(79,70,229,0.12), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #edf5fb 48%, #e9f2f8 100%);
    }
    .base-band {
      background:
        radial-gradient(circle at 12% 18%, rgba(14,165,233,0.13), transparent 32%),
        linear-gradient(180deg, #e9f2f8 0%, #edf5fb 100%);
    }
    .proof-band {
      background:
        radial-gradient(circle at 80% 12%, rgba(45,212,191,0.14), transparent 32%),
        linear-gradient(180deg, #edf5fb 0%, #f4f8fc 52%, #eef5fb 100%);
    }
    .contact-section,
    .site-footer {
      background:
        linear-gradient(180deg, #eef5fb 0%, #eaf2f8 100%);
    }

    .section-kicker,
    .contact-kicker,
    .console-kicker,
    .console-live {
      background: rgba(255,255,255,0.72);
      border-color: rgba(20,184,166,0.20);
      color: #34748a;
    }
    .section-kicker svg,
    .contact-kicker svg,
    .console-kicker svg {
      color: #0ea5e9;
    }
    .tech-section-title,
    .proof-title,
    .console-heading h2,
    .contact-head h2 {
      color: #102033;
    }
    .tech-section-sub,
    .proof-sub,
    .console-heading p,
    .contact-head p {
      color: #5d6b7e;
    }

    .adv-card,
    .process-card,
    .base-console,
    .contact-card,
    .client-wall {
      background:
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(240,248,252,0.72)),
        radial-gradient(circle at 16% 0%, rgba(45,212,191,0.16), transparent 35%);
      border-color: rgba(37,99,235,0.13);
      box-shadow: 0 22px 58px rgba(48,74,112,0.10), inset 0 1px 0 rgba(255,255,255,0.92);
    }
    .adv-card:hover,
    .process-card:hover,
    .base-cap-card:hover,
    .case-cell:hover {
      border-color: rgba(14,165,233,0.32);
      box-shadow: 0 26px 62px rgba(48,74,112,0.13), 0 0 30px rgba(14,165,233,0.12);
    }

    .adv-title {
      background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(45,212,191,0.10));
      border-color: rgba(14,165,233,0.18);
      color: #123047;
    }
    .adv-list li,
    .process-item,
    .console-stat span,
    .base-cap-card .cap-desc,
    .qr-desc,
    .contact-note {
      color: #617086;
    }
    .adv-list li::before {
      background: #0ea5e9;
      box-shadow: 0 0 14px rgba(14,165,233,0.32);
    }
    .adv-card::before,
    .process-card::before {
      color: rgba(14,165,233,0.10);
    }
    .adv-card::after,
    .process-card::after,
    .base-console::after {
      background: linear-gradient(90deg, transparent, rgba(45,212,191,0.38), rgba(14,165,233,0.30), transparent);
    }

    .process-icon,
    .process-check,
    .base-cap-card .cap-icon-wrap {
      background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(45,212,191,0.10));
      border-color: rgba(14,165,233,0.18);
      color: #0284c7;
    }
    .process-title,
    .console-stat strong,
    .base-cap-card .cap-title,
    .qr-title {
      color: #102033;
    }

    .base-console::before,
    .contact-card::before,
    .client-wall::before {
      background-image:
        linear-gradient(rgba(14,165,233,0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.075) 1px, transparent 1px);
    }
    .console-topbar {
      background: rgba(255,255,255,0.68);
      border-bottom-color: rgba(14,165,233,0.13);
    }
    .console-title,
    .console-label {
      color: #64748b;
    }
    .console-label span:last-child {
      color: #0ea5e9;
    }
    .console-stat,
    .console-panel,
    .base-cap-card,
    .qr-card,
    .contact-note span {
      background: rgba(255,255,255,0.66);
      border-color: rgba(37,99,235,0.11);
    }
    .base-console .skill-tag {
      background: rgba(255,255,255,0.72);
      border-color: rgba(37,99,235,0.12);
      color: #465568;
    }
    .base-console .skill-tag:hover {
      background: rgba(230,249,252,0.92);
      border-color: rgba(14,165,233,0.28);
      color: #102033;
    }
    .console-btn,
    .btn-submit {
      background: linear-gradient(135deg, #2563eb, #0ea5e9 48%, #14b8a6);
      box-shadow: 0 14px 34px rgba(14,165,233,0.24);
    }
    .console-btn:hover,
    .btn-submit:hover {
      box-shadow: 0 18px 44px rgba(20,184,166,0.22);
    }

    .client-wall::after {
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.16), rgba(45,212,191,0.12), transparent);
    }
    .case-cell {
      background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(239,248,252,0.64));
      border-color: rgba(37,99,235,0.10);
      color: #516072;
    }
    .case-featured {
      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(229,247,251,0.74));
      border-color: rgba(14,165,233,0.20);
    }
    .client-logo-mark {
      color: #172033;
    }
    .client-logo-meta {
      color: #7b8a9d;
    }
    .case-cell::before,
    .case-featured::before {
      background: linear-gradient(120deg, transparent 25%, rgba(14,165,233,0.18), transparent 75%);
    }
    .case-cell:hover,
    .case-cell.is-pulsing {
      background: linear-gradient(180deg, rgba(231,249,252,0.98), rgba(255,255,255,0.76));
      border-color: rgba(14,165,233,0.34);
    }
    .case-cell:hover .client-logo-meta {
      color: #0284c7;
    }

    .contact-card {
      background:
        radial-gradient(circle at 16% 12%, rgba(20,184,166,0.14), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(37,99,235,0.11), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,0.90), rgba(240,248,252,0.74));
    }
    .f-input {
      background: rgba(255,255,255,0.76);
      border-color: rgba(37,99,235,0.13);
      color: #102033;
    }
    .f-input:focus {
      border-color: rgba(14,165,233,0.40);
      box-shadow: 0 0 0 3px rgba(14,165,233,0.11);
    }
    .f-input::placeholder {
      color: #8b98aa;
    }
    .qr-frame {
      border: 1px solid rgba(14,165,233,0.14);
      box-shadow: 0 14px 34px rgba(48,74,112,0.12), 0 0 26px rgba(14,165,233,0.12);
    }
    .site-footer {
      border-top-color: rgba(37,99,235,0.10);
    }
    .site-footer-inner {
      color: #708096;
    }

    /* ── Layout rhythm variant ── */
    .adv-grid {
      grid-template-columns: 1.35fr 1fr 1fr;
      grid-auto-rows: minmax(176px, auto);
      align-items: stretch;
      gap: 18px;
      margin-top: 26px;
    }
    .adv-visual-strip {
      position: relative;
      z-index: 1;
      max-width: 920px;
      min-height: 86px;
      margin: 30px auto 0;
      padding: 18px 22px;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 20px;
      background:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(145deg, rgba(255,255,255,0.78), rgba(238,248,252,0.58));
      background-size: 24px 24px, 24px 24px, auto;
      box-shadow: 0 18px 48px rgba(48,74,112,0.08), inset 0 1px 0 rgba(255,255,255,0.82);
      display: grid;
      grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
      align-items: center;
      gap: 12px;
      overflow: hidden;
    }
    .adv-visual-strip::before {
      content: '';
      position: absolute;
      left: -20%;
      top: 0;
      width: 20%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.12), transparent);
      animation: process-visual-scan 6s ease-in-out infinite;
    }
    .adv-flow-node {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 112px;
      justify-content: center;
      padding: 11px 13px;
      border-radius: 999px;
      border: 1px solid rgba(14,165,233,0.14);
      background: rgba(255,255,255,0.76);
      color: #405268;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 10px 26px rgba(48,74,112,0.08);
    }
    .adv-flow-node svg {
      color: #0ea5e9;
    }
    .adv-flow-node.active {
      color: #102033;
      border-color: rgba(20,184,166,0.24);
      background: linear-gradient(135deg, rgba(229,249,252,0.96), rgba(255,255,255,0.80));
    }
    .adv-flow-line {
      position: relative;
      z-index: 1;
      height: 2px;
      min-width: 52px;
      background: linear-gradient(90deg, rgba(14,165,233,0.18), rgba(20,184,166,0.42));
      box-shadow: 0 0 14px rgba(14,165,233,0.16);
    }
    .adv-flow-line::after {
      content: '';
      position: absolute;
      right: -2px;
      top: 50%;
      width: 7px;
      height: 7px;
      border-top: 2px solid rgba(20,184,166,0.62);
      border-right: 2px solid rgba(20,184,166,0.62);
      transform: translateY(-50%) rotate(45deg);
    }
    .adv-card {
      min-height: 176px;
    }
    .adv-card:first-child {
      grid-row: span 2;
      padding: 34px 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      isolation: isolate;
    }
    .adv-card:first-child::before {
      right: 26px;
      top: 18px;
      font-size: 86px;
      line-height: 1;
    }
    .adv-card:first-child::after {
      left: 30px;
      right: 30px;
    }
    .adv-card:first-child .adv-title {
      font-size: 18px;
      min-height: auto;
      width: fit-content;
      margin-bottom: 22px;
      padding: 10px 14px;
    }
    .adv-card:first-child .adv-list {
      gap: 13px;
    }
    .adv-card:first-child .adv-list li {
      font-size: 14px;
    }
    .adv-card:nth-child(4) {
      grid-column: 2 / 4;
    }

    .base-console {
      transform: translateY(0);
    }
    .console-heading {
      grid-template-columns: 0.92fr 1.08fr;
      align-items: stretch;
    }
    .base-visual-stack {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 14px;
      align-items: stretch;
    }
    .base-orbit {
      position: relative;
      min-height: 206px;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 18px;
      background:
        radial-gradient(circle at 50% 50%, rgba(14,165,233,0.12), transparent 34%),
        linear-gradient(rgba(14,165,233,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.05) 1px, transparent 1px),
        rgba(255,255,255,0.58);
      background-size: auto, 24px 24px, 24px 24px, auto;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
    }
    .base-orbit::after {
      content: '';
      position: absolute;
      inset: auto 20px 18px 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.28), transparent);
    }
    .orbit-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(14,165,233,0.16);
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    .ring-a {
      width: 148px;
      height: 92px;
    }
    .ring-b {
      width: 92px;
      height: 148px;
      border-color: rgba(20,184,166,0.16);
    }
    .orbit-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 86px;
      height: 54px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #2563eb, #0ea5e9 56%, #14b8a6);
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 16px 36px rgba(14,165,233,0.22);
    }
    .orbit-node {
      position: absolute;
      min-width: 54px;
      padding: 7px 9px;
      border: 1px solid rgba(14,165,233,0.16);
      border-radius: 999px;
      background: rgba(255,255,255,0.78);
      color: #405268;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      text-align: center;
      box-shadow: 0 10px 24px rgba(48,74,112,0.09);
    }
    .node-data { left: 22px; top: 28px; }
    .node-model { right: 22px; top: 34px; }
    .node-skill { left: 26px; bottom: 32px; }
    .node-agent { right: 30px; bottom: 30px; }
    .console-stats {
      align-content: stretch;
      grid-template-columns: 1fr;
    }
    .console-stat {
      min-height: 86px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .console-panel {
      position: relative;
      margin-top: 8px;
    }
    .console-panel::before {
      content: '';
      position: absolute;
      left: 24px;
      right: 24px;
      top: -9px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.24), transparent);
    }

    .process-grid {
      position: relative;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      padding-top: 26px;
    }
    .process-grid::before {
      content: '';
      position: absolute;
      left: 12%;
      right: 12%;
      top: 62px;
      height: 2px;
      background: linear-gradient(90deg, rgba(14,165,233,0), rgba(14,165,233,0.44), rgba(20,184,166,0.40), rgba(14,165,233,0));
      box-shadow: 0 0 22px rgba(14,165,233,0.18);
    }
    .process-card {
      padding-top: 18px;
      min-height: 270px;
    }
    .process-visual {
      position: relative;
      height: 112px;
      margin-bottom: 18px;
      border: 1px solid rgba(14,165,233,0.13);
      border-radius: 16px;
      background:
        linear-gradient(rgba(14,165,233,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.055) 1px, transparent 1px),
        radial-gradient(circle at 24% 20%, rgba(45,212,191,0.20), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.72), rgba(236,248,252,0.58));
      background-size: 22px 22px, 22px 22px, auto, auto;
      overflow: hidden;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
    }
    .process-visual::before {
      content: '';
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(14,165,233,0.10);
      border-radius: 12px;
    }
    .process-visual::after {
      content: '';
      position: absolute;
      left: -30%;
      top: 0;
      width: 28%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50), transparent);
      transform: skewX(-18deg);
      animation: process-visual-scan 5.2s ease-in-out infinite;
    }
    @keyframes process-visual-scan {
      0%, 22% { transform: translateX(0) skewX(-18deg); opacity: 0; }
      36% { opacity: 1; }
      68%, 100% { transform: translateX(470%) skewX(-18deg); opacity: 0; }
    }
    .visual-scan {
      display: grid;
      place-items: center;
    }
    .visual-scan::before {
      inset: 20px auto auto 50%;
      width: 66px;
      height: 66px;
      transform: translateX(-50%);
      border-radius: 50%;
      border-color: rgba(14,165,233,0.20);
      box-shadow:
        0 0 0 14px rgba(14,165,233,0.045),
        0 0 0 28px rgba(45,212,191,0.035);
    }
    .visual-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #0ea5e9;
      box-shadow: 0 0 18px rgba(14,165,233,0.42);
    }
    .dot-a { left: 33%; top: 32%; }
    .dot-b { left: 57%; top: 48%; background: #14b8a6; }
    .dot-c { left: 45%; top: 64%; background: #2563eb; }
    .visual-deploy::before {
      inset: 0;
      border: 0;
      border-radius: 0;
      background:
        linear-gradient(35deg, transparent 43%, rgba(14,165,233,0.24) 44%, rgba(14,165,233,0.24) 45%, transparent 46%),
        linear-gradient(145deg, transparent 45%, rgba(20,184,166,0.22) 46%, rgba(20,184,166,0.22) 47%, transparent 48%);
    }
    .deploy-node {
      position: absolute;
      border-radius: 14px;
      border: 1px solid rgba(14,165,233,0.20);
      background: rgba(255,255,255,0.76);
      box-shadow: 0 12px 28px rgba(48,74,112,0.10);
    }
    .node-main { width: 54px; height: 42px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
    .node-a { width: 38px; height: 30px; left: 18%; top: 18%; }
    .node-b { width: 38px; height: 30px; right: 18%; top: 20%; }
    .node-c { width: 38px; height: 30px; right: 25%; bottom: 16%; }
    .visual-growth {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 14px;
      padding: 22px 24px;
    }
    .visual-growth .bar {
      position: relative;
      z-index: 1;
      width: 22px;
      border-radius: 999px 999px 8px 8px;
      background: linear-gradient(180deg, rgba(14,165,233,0.78), rgba(20,184,166,0.38));
      box-shadow: 0 10px 24px rgba(14,165,233,0.16);
    }
    .bar-a { height: 34px; }
    .bar-b { height: 52px; }
    .bar-c { height: 70px; }
    .bar-d { height: 88px; }
    .process-icon {
      position: relative;
      z-index: 2;
      margin-top: 0;
      margin-bottom: 14px;
      box-shadow: 0 12px 28px rgba(14,165,233,0.14);
    }
    .process-title {
      margin-bottom: 16px;
    }
    .process-list {
      gap: 10px;
    }
    .process-item {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border: 1px solid rgba(14,165,233,0.11);
      border-radius: 14px;
      background: rgba(255,255,255,0.54);
      box-shadow: 0 10px 24px rgba(48,74,112,0.05);
    }
    .process-item strong {
      display: block;
      color: #102033;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.25;
      margin-bottom: 4px;
    }
    .process-item em {
      display: block;
      color: #6b7b90;
      font-style: normal;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 600;
    }
    .process-check {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), transparent 38%),
        linear-gradient(135deg, rgba(224,242,254,0.96), rgba(204,251,241,0.66));
      border: 1px solid rgba(14,165,233,0.16);
      color: #0284c7;
      box-shadow: 0 8px 18px rgba(14,165,233,0.10);
    }

    .client-proof-shell {
      position: relative;
      margin-top: 38px;
    }
    .client-proof-panel {
      position: absolute;
      left: 28px;
      top: -24px;
      z-index: 3;
      width: min(360px, calc(100% - 56px));
      padding: 18px 20px;
      border: 1px solid rgba(14,165,233,0.16);
      border-radius: 18px;
      background: rgba(255,255,255,0.76);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 18px 45px rgba(48,74,112,0.12);
    }
    .client-proof-label {
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: #0ea5e9;
      margin-bottom: 6px;
    }
    .client-proof-title {
      font-size: 18px;
      font-weight: 800;
      color: #102033;
      margin-bottom: 12px;
    }
    .client-proof-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .client-proof-metrics span {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 9px 10px;
      border-radius: 12px;
      background: rgba(239,248,252,0.82);
      color: #64748b;
      font-size: 11px;
    }
    .client-proof-metrics strong {
      color: #102033;
      font-size: 18px;
      font-family: 'Outfit', sans-serif;
      line-height: 1;
    }
    .client-proof-shell .client-wall {
      margin-top: 0;
      padding-top: 74px;
    }

    .contact-card {
      padding: 0;
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 0;
    }
    .contact-head {
      text-align: left;
      margin: 0;
      padding: 48px 42px;
      border-right: 1px solid rgba(37,99,235,0.10);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .contact-head h2 {
      line-height: 1.18;
    }
    .contact-head p {
      max-width: 360px;
      line-height: 1.7;
    }
    .contact-benefits {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 28px;
    }
    .contact-benefits span {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 999px;
      background: rgba(255,255,255,0.62);
      color: #405268;
      padding: 8px 12px;
      font-size: 12px;
    }
    .contact-grid {
      max-width: none;
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 48px 42px;
      margin: 0;
    }
    .wechat-panel {
      gap: 12px;
    }
    .qr-card {
      min-height: 132px;
      justify-content: flex-start;
      padding: 18px;
    }
    #hf-success {
      grid-column: 1 / -1;
    }
    #hf-success div {
      background: rgba(14,165,233,0.12) !important;
      border: 1px solid rgba(14,165,233,0.18);
    }
    #hf-success i {
      color: #0284c7 !important;
    }
    #hf-success p {
      color: #102033 !important;
    }
    .skill-market {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 18px;
      align-items: stretch;
    }
    .skill-market .console-skill-row {
      margin-top: 0;
      padding: 18px;
      border: 1px solid rgba(37,99,235,0.10);
      border-radius: 18px;
      background:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px),
        rgba(255,255,255,0.54);
      background-size: 22px 22px, 22px 22px, auto;
    }
    .skill-market .skill-tag {
      position: relative;
      min-width: 118px;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 13px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(232,249,253,0.68));
      border: 1px solid rgba(14,165,233,0.14);
      color: #243447;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 10px 24px rgba(48,74,112,0.07);
      overflow: hidden;
      animation: skill-float 4.5s ease-in-out infinite;
      animation-delay: calc(var(--i) * -0.22s);
    }
    .skill-market .skill-tag:nth-child(3n + 2) {
      transform: translateY(8px);
    }
    .skill-market .skill-tag:nth-child(3n) {
      transform: translateY(-4px);
    }
    .skill-market .skill-tag::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 22%, rgba(14,165,233,0.14), transparent 70%);
      transform: translateX(-120%);
      animation: skill-shine 3.8s ease-in-out infinite;
      animation-delay: calc(var(--i) * 0.18s);
    }
    .skill-market .skill-tag em {
      position: relative;
      z-index: 1;
      font-style: normal;
      font-family: 'Outfit', sans-serif;
      font-size: 10px;
      color: #0ea5e9;
      opacity: 0.82;
    }
    .skill-market .skill-tag b {
      position: relative;
      z-index: 1;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #14b8a6;
      box-shadow: 0 0 14px rgba(20,184,166,0.36);
    }
    .skill-market .skill-tag span {
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }
    @keyframes skill-shine {
      0%, 35% { transform: translateX(-120%); opacity: 0; }
      50% { opacity: 1; }
      78%, 100% { transform: translateX(120%); opacity: 0; }
    }
    @keyframes skill-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -4px; }
    }
    .skill-pack-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .skill-pack {
      position: relative;
      min-height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,255,255,0.82), rgba(232,249,253,0.60));
      color: #102033;
      font-size: 13px;
      font-weight: 800;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(48,74,112,0.08);
    }
    .skill-pack::after {
      content: '';
      position: absolute;
      right: 16px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(14,165,233,0.08);
    }
    .skill-pack svg {
      position: relative;
      z-index: 1;
      color: #0ea5e9;
    }
    .skill-pack span {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 900px) {
      .adv-grid {
        grid-template-columns: 1fr 1fr;
      }
      .adv-visual-strip {
        grid-template-columns: 1fr;
      }
      .adv-flow-line {
        width: 2px;
        min-width: 0;
        height: 18px;
        justify-self: center;
        background: linear-gradient(180deg, rgba(14,165,233,0.18), rgba(20,184,166,0.42));
      }
      .adv-flow-line::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -2px;
        transform: translateX(-50%) rotate(135deg);
      }
      .adv-card:first-child {
        grid-column: 1 / -1;
        grid-row: auto;
      }
      .adv-card:nth-child(4) {
        grid-column: 1 / -1;
      }
      .console-heading,
      .base-visual-stack {
        grid-template-columns: 1fr;
      }
      .contact-card {
        grid-template-columns: 1fr;
      }
      .skill-market {
        grid-template-columns: 1fr;
      }
      .skill-pack-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .contact-head {
        border-right: 0;
        border-bottom: 1px solid rgba(37,99,235,0.10);
      }
    }

    @media (max-width: 768px) {
      .adv-grid,
      .process-grid {
        grid-template-columns: 1fr;
      }
      .adv-card:first-child {
        padding: 28px 22px;
      }
      .adv-card:nth-child(4) {
        grid-column: auto;
      }
      .process-grid {
        padding-top: 0;
      }
      .process-grid::before {
        left: 22px;
        right: auto;
        top: 32px;
        bottom: 32px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(14,165,233,0), rgba(14,165,233,0.34), rgba(20,184,166,0.32), rgba(14,165,233,0));
      }
      .process-card {
        padding-top: 26px;
        padding-left: 72px;
        min-height: 220px;
      }
      .process-visual {
        height: 86px;
        margin-bottom: 16px;
      }
      .process-icon {
        position: absolute;
        left: 20px;
        top: 28px;
        margin: 0;
      }
      .client-proof-panel {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin-bottom: 14px;
      }
      .client-proof-shell .client-wall {
        padding-top: 16px;
      }
      .contact-head,
      .contact-grid {
        padding: 32px 24px;
      }
      .contact-benefits span {
        width: 100%;
      }
      .skill-pack-grid {
        grid-template-columns: 1fr;
      }
    }

    /* App/mobile container fixes: override inline desktop layouts */
    @media (max-width: 640px) {
      #site-nav > div {
        height: 66px !important;
        padding: 0 24px !important;
      }
      #site-nav .desk-only {
        display: none !important;
      }
      #site-nav .mob-only {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
      }
      #mob-toggle {
        width: 40px;
        height: 40px;
        border-radius: 12px !important;
      }
      #mob-toggle svg {
        width: 24px !important;
        height: 24px !important;
      }

      #page-home > .hero-bg {
        min-height: auto !important;
        padding: 96px 24px 34px !important;
        display: block !important;
      }
      .hero-inner > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding-bottom: 26px !important;
      }
      .hero-inner h1 {
        font-size: clamp(2.3rem, 12vw, 3.2rem) !important;
        line-height: 1.15 !important;
        max-width: 100%;
      }
      .hero-title-main {
        font-size: 0.95em !important;
      }
      .hero-tagline {
        padding: 10px 16px 10px 14px;
      }
      .hero-desc-flow {
        flex-direction: column;
      }
      .hero-desc-connector {
        width: 100%;
        height: 34px;
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .hero-desc-connector i,
      .hero-desc-connector svg {
        transform: rotate(90deg);
      }
      .hero-inner p {
        max-width: 280px !important;
      }
      .hero-inner .hero-anim-4 {
        max-width: 100%;
        flex-direction: row;
        gap: 12px !important;
      }
      .hero-inner .hero-anim-4 button {
        width: auto;
        flex: 1;
        max-width: 100% !important;
        padding: 14px 16px !important;
        font-size: 16px !important;
      }
      .hero-inner .hero-anim-5 {
        gap: 10px !important;
      }
      .hero-inner .hero-anim-5 > span {
        font-size: 13px !important;
        padding: 6px 12px !important;
      }
      .hero-inner .hero-proof-strip {
        max-width: 320px;
      }
      #hero-console {
        width: min(560px, 150vw);
        transform: translateX(22%) scale(0.86);
        transform-origin: left top;
        margin-top: -12px;
      }
      .hero-fc.fc1 {
        display: none !important;
      }
      .hero-fc.fc2 {
        display: none !important;
      }
      .hero-fc.fc3 {
        display: none !important;
      }

      .agent-hero {
        padding: 92px 24px 52px !important;
      }
      .agent-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }
      .agent-product-shell {
        transform: none !important;
        padding: 0 24px 48px !important;
      }
      .agent-shell-inner {
        border-radius: 18px !important;
        overflow: hidden;
      }
      .agent-tabbar {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        scrollbar-width: none;
      }
      .agent-tabbar::-webkit-scrollbar {
        display: none;
      }
      .agent-tabbar .mac-tab {
        flex: 0 0 auto;
        border: 1px solid rgba(14,165,233,0.12) !important;
        border-radius: 999px !important;
        padding: 9px 14px !important;
        background: rgba(255,255,255,0.72) !important;
        font-size: 12px !important;
      }
      .agent-tabbar .mac-tab.active {
        color: #0f172a !important;
        border-color: rgba(14,165,233,0.28) !important;
        background: rgba(232,249,253,0.92) !important;
      }
      .agent-tab-content {
        padding: 18px !important;
      }

      .agent-path-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      .agent-path-row .path-card {
        width: 100%;
        min-width: 0;
      }
      .agent-path-row .path-arrow {
        justify-content: center;
        height: 18px;
        transform: rotate(90deg);
      }

      .agent-page .fw-row {
        grid-template-columns: 1fr !important;
        border-radius: 20px !important;
      }
      .agent-page .fw-row::before,
      .agent-page .fw-row::after {
        display: none;
      }
      .agent-page .fw-left {
        min-height: 156px;
      }
      .agent-page .fw-right {
        padding: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
      }
      .agent-page .fw-chip {
        width: 100%;
        min-width: 0;
      }
    }

    /* ── Agent page redesign v1: light primary version ── */
    .agent-page {
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.13), transparent 34%),
        linear-gradient(180deg, #050508 0%, #101117 30%, #eef3f9 30%, #eef3f9 100%);
    }
    .agent-hero {
      padding: 118px 24px 76px;
      min-height: 560px;
    }
    .agent-hero-inner {
      max-width: 1600px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 48px;
      align-items: center;
    }
    .agent-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(103,232,249,0.22);
      background: rgba(103,232,249,0.08);
      color: rgba(255,255,255,0.72);
      border-radius: 999px;
      padding: 7px 13px;
      font-size: 12px;
      font-family: 'Outfit','Noto Sans SC',sans-serif;
      margin-bottom: 22px;
    }
    .agent-hero-copy h1 {
      font-size: clamp(2.1rem,4.4vw,3.7rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: -0.04em;
      color: #fff;
      margin-bottom: 22px;
    }
    .agent-hero-copy p {
      max-width: 500px;
      color: rgba(255,255,255,0.56);
      font-size: 15px;
      line-height: 1.9;
      margin-bottom: 30px;
    }
    .agent-hero-actions,
    .agent-hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .agent-primary-btn,
    .agent-ghost-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 22px;
      border-radius: 12px;
      border: 1px solid transparent;
      cursor: pointer;
      font-family: 'Noto Sans SC', sans-serif;
      font-size: 14px;
      font-weight: 700;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
    }
    .agent-primary-btn {
      color: #fff;
      background: linear-gradient(135deg, #2563eb, #0ea5e9 48%, #14b8a6);
      box-shadow: 0 16px 42px rgba(14,165,233,0.22);
    }
    .agent-ghost-btn {
      color: rgba(255,255,255,0.76);
      background: rgba(255,255,255,0.055);
      border-color: rgba(255,255,255,0.12);
    }
    .agent-primary-btn:hover,
    .agent-ghost-btn:hover {
      transform: translateY(-2px);
    }
    .agent-hero-tags {
      margin-top: 22px;
    }
    .agent-hero-tags span {
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.035);
      color: rgba(255,255,255,0.42);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
    }
    .agent-system-card {
      position: relative;
      overflow: hidden;
      min-height: 420px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 24px;
      background:
        radial-gradient(circle at 18% 12%, rgba(99,102,241,0.24), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(34,211,238,0.16), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.028));
      box-shadow: 0 34px 100px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .agent-system-card::before {
      content: '';
      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: 34px 34px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, black 20%, transparent 100%);
    }
    .agent-system-top {
      position: relative;
      z-index: 1;
      height: 52px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 18px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
    }
    .agent-system-top span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }
    .agent-system-top span:nth-child(1) { background: #ff5f56; }
    .agent-system-top span:nth-child(2) { background: #ffbd2e; }
    .agent-system-top span:nth-child(3) { background: #27c93f; }
    .agent-system-top em {
      margin-left: auto;
      font-style: normal;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.42);
    }
    .agent-core-map {
      position: relative;
      z-index: 1;
      height: 260px;
    }
    .agent-core {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 116px;
      height: 116px;
      border-radius: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-weight: 800;
      background: linear-gradient(135deg, #2563eb, #0ea5e9 56%, #14b8a6);
      box-shadow: 0 0 52px rgba(14,165,233,0.22);
    }
    .agent-core::before,
    .agent-core::after {
      content: '';
      position: absolute;
      border: 1px solid rgba(103,232,249,0.20);
      border-radius: 50%;
    }
    .agent-core::before { width: 220px; height: 140px; }
    .agent-core::after { width: 140px; height: 220px; border-color: rgba(99,102,241,0.20); }
    .agent-node {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(103,232,249,0.18);
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.76);
      border-radius: 999px;
      padding: 10px 13px;
      font-size: 12px;
      box-shadow: 0 14px 32px rgba(0,0,0,0.18);
      animation: agent-node-float 4.2s ease-in-out infinite;
    }
    .agent-node svg {
      width: 15px;
      height: 15px;
      color: #67e8f9;
    }
    .agent-node.node-1 { left: 12%; top: 24%; }
    .agent-node.node-2 { right: 12%; top: 22%; animation-delay: -1s; }
    .agent-node.node-3 { left: 13%; bottom: 20%; animation-delay: -1.8s; }
    .agent-node.node-4 { right: 14%; bottom: 18%; animation-delay: -2.4s; }
    @keyframes agent-node-float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -8px; }
    }
    .agent-live-metrics {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 10px;
      padding: 0 20px 20px;
    }
    .agent-live-metrics div {
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.045);
      border-radius: 14px;
      padding: 16px 14px;
    }
    .agent-live-metrics strong {
      display: block;
      color: #fff;
      font-size: 22px;
      font-family: 'Outfit', sans-serif;
      margin-bottom: 4px;
    }
    .agent-live-metrics span {
      color: rgba(255,255,255,0.42);
      font-size: 11px;
    }
    .agent-product-shell {
      padding: 0 24px 70px;
      transform: translateY(-38px);
    }
    .agent-shell-inner {
      max-width: 1600px;
      margin: 0 auto;
    }
    .agent-studio-frame {
      border-radius: 24px;
      background:
        radial-gradient(circle at 18% 0%, rgba(14,165,233,0.10), transparent 34%),
        linear-gradient(180deg, #fff, #f7f9fd);
      box-shadow: 0 32px 90px rgba(42,52,77,0.16);
    }
    .agent-tabbar {
      display: flex;
      gap: 0;
      padding: 0 24px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      overflow-x: auto;
    }
    .agent-tab-content {
      padding: 32px 24px;
      min-height: 300px;
    }
    .agent-panel-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 22px;
      align-items: stretch;
    }
    .agent-chat-visual {
      min-height: 230px;
      border: 1px solid rgba(37,99,235,0.12);
      border-radius: 18px;
      padding: 22px;
      background:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px),
        rgba(255,255,255,0.70);
      background-size: 24px 24px, 24px 24px, auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }
    .chat-line {
      width: fit-content;
      max-width: 92%;
      border-radius: 14px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.45;
      box-shadow: 0 12px 28px rgba(42,52,77,0.08);
    }
    .chat-line.human {
      color: #111827;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.06);
    }
    .chat-line.ai {
      margin-left: auto;
      color: #fff;
      background: linear-gradient(135deg, #2563eb, #0ea5e9);
    }
    .chat-line.task {
      color: #475467;
      background: rgba(232,249,253,0.84);
      border: 1px solid rgba(14,165,233,0.14);
    }
    .agent-feature-grid {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 14px;
    }
    .agent-feature-grid div,
    .flow-step {
      border: 1px solid rgba(37,99,235,0.12);
      border-radius: 18px;
      background: rgba(255,255,255,0.78);
      padding: 22px;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #111827;
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 16px 38px rgba(42,52,77,0.08);
    }
    .agent-feature-grid svg,
    .flow-step svg {
      width: 20px;
      height: 20px;
      color: #0ea5e9;
    }
    .agent-flow-visual {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 18px;
      padding: 42px 10px 20px;
    }
    .agent-flow-visual::before {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      top: 72px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.42), rgba(37,99,235,0.34), transparent);
    }
    .flow-step {
      position: relative;
      z-index: 1;
      flex-direction: column;
      text-align: center;
      min-height: 150px;
      justify-content: center;
    }
    .agent-workflow-board,
    .agent-skill-market-panel,
    .agent-squad-panel {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 24px;
      align-items: stretch;
      min-height: 300px;
    }
    .workflow-left,
    .skill-market-copy,
    .squad-status {
      border: 1px solid rgba(37,99,235,0.11);
      border-radius: 20px;
      padding: 28px;
      background:
        radial-gradient(circle at 14% 0%, rgba(14,165,233,0.12), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,0.88), rgba(240,248,252,0.68));
      box-shadow: 0 18px 42px rgba(42,52,77,0.08);
    }
    .workflow-kicker {
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      letter-spacing: 0.08em;
      color: #0ea5e9;
      margin-bottom: 14px;
    }
    .workflow-left h3,
    .skill-market-copy h3,
    .squad-status h3 {
      color: #102033;
      font-size: 22px;
      line-height: 1.25;
      font-weight: 900;
      margin-bottom: 14px;
    }
    .workflow-left p,
    .skill-market-copy p,
    .squad-status p {
      color: #64748b;
      font-size: 13px;
      line-height: 1.8;
    }
    .workflow-rules,
    .squad-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 24px;
    }
    .workflow-rules span,
    .squad-metrics span {
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 999px;
      background: rgba(255,255,255,0.68);
      padding: 8px 11px;
      color: #405268;
      font-size: 12px;
    }
    .squad-metrics span {
      display: flex;
      flex-direction: column;
      border-radius: 14px;
      min-width: 88px;
    }
    .squad-metrics strong {
      color: #102033;
      font-family: 'Outfit', sans-serif;
      font-size: 22px;
      line-height: 1;
      margin-bottom: 4px;
    }
    .workflow-canvas {
      position: relative;
      border: 1px solid rgba(37,99,235,0.11);
      border-radius: 20px;
      background:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px),
        rgba(255,255,255,0.66);
      background-size: 28px 28px, 28px 28px, auto;
      overflow: hidden;
    }
    .workflow-canvas::before {
      content: '';
      position: absolute;
      left: 12%;
      right: 12%;
      top: 50%;
      height: 2px;
      background: linear-gradient(90deg, rgba(14,165,233,0.1), rgba(14,165,233,0.50), rgba(20,184,166,0.42), rgba(14,165,233,0.1));
      box-shadow: 0 0 24px rgba(14,165,233,0.18);
    }
    .flow-node {
      position: absolute;
      z-index: 1;
      width: 104px;
      height: 82px;
      border: 1px solid rgba(14,165,233,0.16);
      border-radius: 18px;
      background: rgba(255,255,255,0.86);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #102033;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 16px 34px rgba(42,52,77,0.10);
      animation: agent-node-float 4.5s ease-in-out infinite;
    }
    .flow-node svg {
      width: 20px;
      height: 20px;
      color: #0ea5e9;
    }
    .flow-node.trigger { left: 8%; top: 36%; }
    .flow-node.agent { left: 35%; top: 18%; animation-delay: -1s; }
    .flow-node.branch { right: 25%; bottom: 18%; animation-delay: -2s; }
    .flow-node.output { right: 8%; top: 36%; animation-delay: -3s; }

    .skill-market-stage,
    .squad-grid {
      position: relative;
      border: 1px solid rgba(37,99,235,0.11);
      border-radius: 20px;
      background:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px),
        rgba(255,255,255,0.66);
      background-size: 28px 28px, 28px 28px, auto;
      padding: 22px;
      overflow: hidden;
    }
    .skill-radar {
      position: absolute;
      right: 22px;
      top: 22px;
      width: 108px;
      height: 108px;
      border-radius: 50%;
      border: 1px solid rgba(14,165,233,0.16);
      box-shadow: 0 0 0 18px rgba(14,165,233,0.035), 0 0 0 36px rgba(20,184,166,0.025);
    }
    .skill-radar span {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #0ea5e9;
      box-shadow: 0 0 16px rgba(14,165,233,0.42);
    }
    .skill-radar span:nth-child(1) { left: 22px; top: 32px; }
    .skill-radar span:nth-child(2) { right: 28px; top: 44px; background: #14b8a6; }
    .skill-radar span:nth-child(3) { left: 48px; bottom: 24px; background: #2563eb; }
    .agent-skill-cloud {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 78%;
      align-content: flex-start;
    }
    .agent-skill-cloud span {
      border: 1px solid rgba(14,165,233,0.14) !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.76) !important;
      color: #405268 !important;
      padding: 9px 13px !important;
      box-shadow: 0 10px 24px rgba(42,52,77,0.07);
      animation: skill-float 4.5s ease-in-out infinite;
    }
    .agent-skill-cloud span:nth-child(2n) { animation-delay: -1.2s; }
    .agent-skill-cloud span:nth-child(3n) { animation-delay: -2.1s; }
    .squad-grid {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 10px !important;
      align-content: start;
    }
    .squad-grid .agent-mini-emp {
      background: rgba(255,255,255,0.78);
      box-shadow: 0 12px 28px rgba(42,52,77,0.08);
    }
    .squad-orbit {
      position: relative;
      min-height: 320px;
      border: 1px solid rgba(37,99,235,0.11);
      border-radius: 20px;
      background:
        radial-gradient(circle at 50% 50%, rgba(14,165,233,0.13), transparent 30%),
        radial-gradient(circle at 16% 22%, rgba(99,102,241,0.10), transparent 28%),
        radial-gradient(circle at 84% 76%, rgba(20,184,166,0.11), transparent 28%),
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px),
        rgba(255,255,255,0.66);
      background-size: auto, auto, auto, 28px 28px, 28px 28px, auto;
      overflow: hidden;
    }
    .squad-orbit::before,
    .squad-orbit::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .squad-orbit::before {
      width: 62%;
      height: 44%;
      animation: agent-orbit-breathe 6s ease-in-out infinite;
    }
    .squad-orbit::after {
      width: 42%;
      height: 66%;
      border-color: rgba(20,184,166,0.12);
      animation: agent-orbit-breathe 6s ease-in-out infinite reverse;
    }
    .squad-orbit-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 118px;
      height: 82px;
      border-radius: 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      background: linear-gradient(135deg, #2563eb, #0ea5e9 52%, #14b8a6);
      color: #fff;
      font-family: 'Outfit', sans-serif;
      font-size: 11px;
      box-shadow: 0 18px 40px rgba(14,165,233,0.24);
      z-index: 3;
    }
    .squad-orbit-center strong {
      font-size: 15px;
      letter-spacing: 0;
      line-height: 1;
    }
    .squad-orbit-center span {
      font-family: inherit;
      opacity: 0.78;
    }
    .squad-orbit-node {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid rgba(37,99,235,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.82);
      padding: 8px 11px;
      color: #405268;
      font-size: 11px;
      box-shadow: 0 12px 26px rgba(42,52,77,0.08);
      animation: agent-node-float 4.6s ease-in-out infinite;
      z-index: 2;
    }
    .squad-orbit-node i {
      color: #0ea5e9;
    }
    .squad-orbit-node::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--role-grad);
      box-shadow: 0 0 18px rgba(14,165,233,0.32);
    }
    .squad-orbit-node.pos-1 { left: 8%; top: 15%; }
    .squad-orbit-node.pos-2 { left: 39%; top: 7%; animation-delay: -0.8s; }
    .squad-orbit-node.pos-3 { right: 9%; top: 17%; animation-delay: -1.6s; }
    .squad-orbit-node.pos-4 { right: 6%; top: 47%; animation-delay: -2.4s; }
    .squad-orbit-node.pos-5 { right: 14%; bottom: 14%; animation-delay: -1.2s; }
    .squad-orbit-node.pos-6 { left: 38%; bottom: 8%; animation-delay: -2s; }
    .squad-orbit-node.pos-7 { left: 8%; bottom: 18%; animation-delay: -2.8s; }
    .squad-orbit-trace {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1px;
      height: 112px;
      transform-origin: top center;
      background: linear-gradient(to bottom, rgba(14,165,233,0.24), transparent);
      z-index: 1;
    }
    .squad-orbit-trace.trace-1 { transform: rotate(34deg); }
    .squad-orbit-trace.trace-2 { transform: rotate(154deg); background: linear-gradient(to bottom, rgba(20,184,166,0.22), transparent); }
    .squad-orbit-trace.trace-3 { transform: rotate(274deg); background: linear-gradient(to bottom, rgba(99,102,241,0.18), transparent); }
    @keyframes agent-orbit-breathe {
      0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.04); }
    }
    .agent-page .sec-title {
      color: #111216;
    }
    .agent-page .emp-card,
    .agent-page .path-card,
    .agent-organization-section {
      position: relative;
      padding: 88px 24px 96px;
      background:
        radial-gradient(circle at 8% 18%, rgba(99,102,241,0.10), transparent 27%),
        radial-gradient(circle at 92% 78%, rgba(16,185,129,0.10), transparent 29%),
        linear-gradient(180deg, #f4f7fb, #edf3f9);
      overflow: hidden;
    }
    .agent-organization-inner {
      max-width: 1600px;
      margin: 0 auto;
    }
    .agent-organization-heading {
      text-align: center;
      margin-bottom: 42px;
    }
    .agent-organization-heading h2 {
      color: #0f172a;
      font-size: clamp(2.1rem, 3.8vw, 3.25rem);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.045em;
      margin-bottom: 12px;
    }
    .agent-organization-heading p {
      color: #6366f1;
      font-size: 17px;
      font-weight: 800;
    }
    .agent-organization-map {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .organization-row {
      --org-color: #6366f1;
      --org-rgb: 99,102,241;
      display: grid;
      grid-template-columns: 138px 36px minmax(0, 1fr) 108px;
      align-items: center;
      gap: 14px;
      min-height: 152px;
      padding: 20px 22px;
      border: 1px solid rgba(var(--org-rgb),0.13);
      border-radius: 24px;
      background:
        radial-gradient(circle at 0% 50%, rgba(var(--org-rgb),0.11), transparent 30%),
        rgba(255,255,255,0.67);
      box-shadow: 0 20px 48px rgba(48,74,112,0.07), inset 0 1px 0 #fff;
      transition: transform 0.26s, box-shadow 0.26s;
    }
    .organization-row:hover {
      transform: translateY(-3px);
      box-shadow: 0 26px 56px rgba(var(--org-rgb),0.12), inset 0 1px 0 #fff;
    }
    .organization-row--operation {
      --org-color: #0ea5e9;
      --org-rgb: 14,165,233;
    }
    .organization-row--technology {
      --org-color: #10b981;
      --org-rgb: 16,185,129;
    }
    .organization-leader {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .organization-leader-icon {
      width: 54px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(135deg, rgba(var(--org-rgb),0.72), var(--org-color));
      box-shadow: 0 12px 28px rgba(var(--org-rgb),0.23);
      margin-bottom: 10px;
    }
    .organization-leader-icon svg {
      width: 23px;
      height: 23px;
    }
    .organization-leader strong {
      color: #172033;
      font-size: 17px;
      font-weight: 900;
    }
    .organization-leader span {
      color: #94a3b8;
      font-size: 12px;
      margin-top: 3px;
    }
    .organization-arrow {
      color: var(--org-color);
      opacity: 0.65;
    }
    .organization-arrow svg {
      width: 22px;
      height: 22px;
    }
    .organization-agents {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .organization-agents > div {
      min-height: 86px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 8px;
      border: 1px solid rgba(var(--org-rgb),0.10);
      border-radius: 16px;
      color: #334155;
      background: rgba(255,255,255,0.8);
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      transition: transform 0.2s, border-color 0.2s;
    }
    .organization-agents > div:hover {
      transform: translateY(-4px);
      border-color: rgba(var(--org-rgb),0.3);
    }
    .organization-agents svg {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, rgba(var(--org-rgb),0.72), var(--org-color));
      box-sizing: border-box;
    }
    .organization-group {
      color: var(--org-color);
      font-size: 13px;
      font-weight: 900;
      text-align: center;
    }
    @media (max-width: 900px) {
      .agent-organization-section {
        padding: 66px 20px 74px;
      }
      .organization-row {
        grid-template-columns: 108px 26px minmax(0, 1fr);
      }
      .organization-group {
        grid-column: 3;
        text-align: left;
      }
      .organization-agents {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 640px) {
      .organization-row {
        grid-template-columns: 1fr;
        gap: 18px;
      }
      .organization-arrow {
        display: none;
      }
      .organization-group {
        grid-column: 1;
        text-align: center;
      }
      .organization-agents {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* AI organization command-center visual */
    .agent-organization-section {
      color: #fff;
      background:
        radial-gradient(circle at 14% 16%, rgba(99,102,241,0.24), transparent 28%),
        radial-gradient(circle at 86% 78%, rgba(14,165,233,0.18), transparent 30%),
        linear-gradient(160deg, #07101f 0%, #0b1628 54%, #07111c 100%);
    }
    .agent-organization-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(103,232,249,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,232,249,0.045) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse 82% 88% at 50% 50%, black 30%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 82% 88% at 50% 50%, black 30%, transparent 100%);
      pointer-events: none;
    }
    .agent-organization-heading h2 {
      color: #fff;
      text-shadow: 0 0 34px rgba(99,102,241,0.22);
    }
    .agent-organization-heading p {
      color: #67e8f9;
      font-family: 'Outfit', 'Noto Sans SC', sans-serif;
      letter-spacing: 0.04em;
    }
    .organization-row {
      position: relative;
      min-height: 164px;
      border-color: rgba(var(--org-rgb),0.28);
      background:
        linear-gradient(90deg, rgba(var(--org-rgb),0.13), rgba(255,255,255,0.035) 34%, rgba(255,255,255,0.025)),
        rgba(7,16,31,0.72);
      box-shadow:
        0 24px 60px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 3px 0 0 var(--org-color);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
    }
    .organization-row::before {
      position: absolute;
      right: 22px;
      top: 12px;
      color: rgba(var(--org-rgb),0.12);
      font: 900 54px/1 'Outfit', sans-serif;
      letter-spacing: -0.08em;
    }
    .organization-row:nth-child(1)::before { content: '01'; }
    .organization-row:nth-child(2)::before { content: '02'; }
    .organization-row:nth-child(3)::before { content: '03'; }
    .organization-row::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 22%;
      background: linear-gradient(90deg, transparent, rgba(var(--org-rgb),0.10), transparent);
      transform: translateX(-180%);
      animation: organization-scan 6s ease-in-out infinite;
      pointer-events: none;
    }
    .organization-row:nth-child(2)::after { animation-delay: 1.2s; }
    .organization-row:nth-child(3)::after { animation-delay: 2.4s; }
    .organization-row:hover {
      transform: translateY(-3px) scale(1.005);
      border-color: rgba(var(--org-rgb),0.5);
      box-shadow:
        0 30px 72px rgba(0,0,0,0.3),
        0 0 34px rgba(var(--org-rgb),0.10),
        inset 3px 0 0 var(--org-color);
    }
    .organization-leader-icon {
      position: relative;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 28%, rgba(255,255,255,0.42), transparent 26%), var(--org-color);
      box-shadow:
        0 0 0 7px rgba(var(--org-rgb),0.10),
        0 0 30px rgba(var(--org-rgb),0.35);
    }
    .organization-leader-icon::before {
      content: '';
      position: absolute;
      inset: -12px;
      border: 1px dashed rgba(var(--org-rgb),0.34);
      border-radius: 50%;
      animation: organization-orbit 10s linear infinite;
    }
    .organization-leader strong {
      color: #fff;
      font-size: 16px;
    }
    .organization-leader span {
      color: rgba(255,255,255,0.42);
    }
    .organization-arrow {
      position: relative;
      width: 100%;
      height: 20px;
      opacity: 1;
    }
    .organization-arrow svg {
      opacity: 0;
    }
    .organization-arrow::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 9px;
      height: 1px;
      background: linear-gradient(90deg, rgba(var(--org-rgb),0.2), var(--org-color));
    }
    .organization-arrow::after {
      content: '';
      position: absolute;
      top: 6px;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--org-color);
      box-shadow: 0 0 12px var(--org-color);
      animation: organization-signal 2s linear infinite;
    }
    .organization-agents {
      position: relative;
    }
    .organization-agents::before {
      content: '';
      position: absolute;
      left: 7%;
      right: 7%;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--org-rgb),0.3), transparent);
      pointer-events: none;
    }
    .organization-agents > div {
      position: relative;
      z-index: 1;
      min-height: 96px;
      border-color: rgba(var(--org-rgb),0.18);
      color: rgba(255,255,255,0.82);
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--org-rgb),0.12), transparent 42%),
        rgba(255,255,255,0.045);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .organization-agents > div::after {
      content: '';
      position: absolute;
      right: 9px;
      top: 9px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px #22c55e;
    }
    .organization-agents > div:hover {
      border-color: rgba(var(--org-rgb),0.55);
      background: rgba(var(--org-rgb),0.12);
      box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 22px rgba(var(--org-rgb),0.12);
    }
    .organization-agents svg {
      box-shadow: 0 8px 20px rgba(var(--org-rgb),0.25);
    }
    .organization-group {
      position: relative;
      z-index: 1;
      padding: 8px 10px;
      border: 1px solid rgba(var(--org-rgb),0.22);
      border-radius: 999px;
      color: var(--org-color);
      background: rgba(var(--org-rgb),0.08);
      font-family: 'Outfit', 'Noto Sans SC', sans-serif;
    }
    @keyframes organization-signal {
      from { left: 0; opacity: 0; }
      18% { opacity: 1; }
      to { left: calc(100% - 7px); opacity: 0; }
    }
    @keyframes organization-orbit {
      to { transform: rotate(360deg); }
    }
    @keyframes organization-scan {
      0%, 25% { transform: translateX(-180%); opacity: 0; }
      50% { opacity: 1; }
      80%, 100% { transform: translateX(560%); opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .organization-row::after,
      .organization-leader-icon::before,
      .organization-arrow::after {
        animation: none;
      }
    }
    .agent-organization-section {
      color: #172033;
      background:
        radial-gradient(circle at 10% 16%, rgba(99,102,241,0.13), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(20,184,166,0.13), transparent 30%),
        linear-gradient(180deg, #f5f8fc 0%, #eaf3f9 100%);
    }
    .agent-organization-section::before {
      background-image:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px);
    }
    .agent-organization-heading h2 {
      color: #0f172a;
      text-shadow: none;
    }
    .agent-organization-heading p {
      color: #475569;
    }
    .agent-organization-heading h2 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.14em;
    }
    .agent-organization-heading h2 > span {
      color: #475569;
      font-size: 0.56em;
      font-weight: 800;
      letter-spacing: 0;
    }
    .agent-organization-heading h2 > strong {
      position: relative;
      color: #172033;
      background: none;
    }
    .agent-organization-heading h2 > strong::after {
      content: '';
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: -8px;
      height: 4px;
      border-radius: 99px;
      background: linear-gradient(90deg, transparent, rgba(71,85,105,0.35), transparent);
      opacity: 0.7;
    }
    .agent-organization-heading h2 > .organization-title-target {
      color: #2563a8;
      background: none;
    }
    .agent-organization-heading h2 > .organization-title-target::after {
      background: linear-gradient(90deg, transparent, rgba(37,99,168,0.5), rgba(14,165,233,0.36), transparent);
    }
    .organization-title-arrow {
      display: grid;
      width: 42px;
      height: 42px;
      margin: 0 0.08em;
      place-items: center;
      border: 1px solid rgba(99,102,241,0.18);
      border-radius: 50%;
      color: #2563a8;
      border-color: rgba(37,99,168,0.16);
      background: linear-gradient(135deg, rgba(239,246,255,0.96), rgba(236,254,255,0.82));
      box-shadow: 0 7px 18px rgba(37,99,168,0.1), inset 0 1px 0 #fff;
    }
    .organization-title-arrow svg {
      width: 20px;
      height: 20px;
    }
    .agent-organization-heading p {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      min-height: 42px;
      padding: 0 20px;
      border: 1px solid rgba(14,165,233,0.16);
      border-radius: 999px;
      background: rgba(255,255,255,0.56);
      box-shadow: 0 10px 28px rgba(48,74,112,0.08), inset 0 1px 0 rgba(255,255,255,0.75);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .agent-organization-heading p > span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .agent-organization-heading p > span:first-child {
      color: #2563a8;
    }
    .agent-organization-heading p svg {
      width: 16px;
      height: 16px;
      color: #2563a8;
    }
    .agent-organization-heading p > b {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #38bdf8;
      box-shadow: none;
    }
    @media (max-width: 640px) {
      .agent-organization-heading h2 {
        flex-wrap: wrap;
        gap: 0.18em;
      }
      .organization-title-arrow {
        width: 34px;
        height: 34px;
      }
      .agent-organization-heading p {
        gap: 8px;
        padding: 10px 14px;
        border-radius: 16px;
        font-size: 13px;
      }
    }
    .organization-row {
      border-color: rgba(var(--org-rgb),0.17);
      background:
        linear-gradient(90deg, rgba(var(--org-rgb),0.09), rgba(255,255,255,0.74) 32%, rgba(255,255,255,0.6)),
        rgba(255,255,255,0.76);
      box-shadow:
        0 20px 50px rgba(48,74,112,0.09),
        inset 0 1px 0 #fff,
        inset 3px 0 0 var(--org-color);
    }
    .organization-row:hover {
      border-color: rgba(var(--org-rgb),0.34);
      box-shadow:
        0 28px 64px rgba(48,74,112,0.13),
        0 0 30px rgba(var(--org-rgb),0.08),
        inset 3px 0 0 var(--org-color);
    }
    .organization-leader strong {
      color: #172033;
    }
    .organization-leader span {
      color: #8a96a8;
    }
    .organization-agents > div {
      border-color: rgba(var(--org-rgb),0.13);
      color: #334155;
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--org-rgb),0.08), transparent 44%),
        rgba(255,255,255,0.82);
      box-shadow: 0 10px 26px rgba(48,74,112,0.06), inset 0 1px 0 #fff;
    }
    .organization-agents > div:hover {
      border-color: rgba(var(--org-rgb),0.34);
      background: rgba(255,255,255,0.96);
      box-shadow: 0 16px 34px rgba(48,74,112,0.12), 0 0 20px rgba(var(--org-rgb),0.08);
    }
    .organization-group {
      background: rgba(255,255,255,0.58);
    }
    .agent-organization-map.sr-ready .organization-row {
      --org-load-delay: 0.12s;
      opacity: 0;
      transform: translateX(-56px) scale(0.98);
    }
    .agent-organization-map.sr-ready .organization-row:nth-child(2) {
      --org-load-delay: 0.46s;
      transform: translateX(56px) scale(0.98);
    }
    .agent-organization-map.sr-ready .organization-row:nth-child(3) {
      --org-load-delay: 0.8s;
    }
    .agent-organization-map.sr-ready.sr-in .organization-row {
      opacity: 1;
      transform: translateX(0) scale(1);
      transition:
        opacity 0.95s ease,
        transform 1.18s cubic-bezier(0.16,1,0.3,1),
        border-color 0.28s,
        box-shadow 0.28s;
      transition-delay: var(--org-load-delay);
    }
    .agent-organization-map.sr-ready .organization-leader,
    .agent-organization-map.sr-ready .organization-agents > div,
    .agent-organization-map.sr-ready .organization-group {
      opacity: 0;
      transform: translateY(18px) scale(0.92);
    }
    .agent-organization-map.sr-ready.sr-in .organization-leader,
    .agent-organization-map.sr-ready.sr-in .organization-agents > div,
    .agent-organization-map.sr-ready.sr-in .organization-group {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: opacity 0.58s ease, transform 0.72s cubic-bezier(0.16,1,0.3,1);
    }
    .agent-organization-map.sr-ready.sr-in .organization-leader { transition-delay: calc(var(--org-load-delay) + 0.3s); }
    .agent-organization-map.sr-ready.sr-in .organization-agents > div:nth-child(1) { transition-delay: calc(var(--org-load-delay) + 0.44s); }
    .agent-organization-map.sr-ready.sr-in .organization-agents > div:nth-child(2) { transition-delay: calc(var(--org-load-delay) + 0.56s); }
    .agent-organization-map.sr-ready.sr-in .organization-agents > div:nth-child(3) { transition-delay: calc(var(--org-load-delay) + 0.68s); }
    .agent-organization-map.sr-ready.sr-in .organization-agents > div:nth-child(4) { transition-delay: calc(var(--org-load-delay) + 0.8s); }
    .agent-organization-map.sr-ready.sr-in .organization-group { transition-delay: calc(var(--org-load-delay) + 0.9s); }
    .agent-organization-map.sr-ready .organization-arrow::before {
      transform: scaleX(0);
      transform-origin: left center;
    }
    .agent-organization-map.sr-ready.sr-in .organization-arrow::before {
      transform: scaleX(1);
      transition: transform 1.15s cubic-bezier(0.16,1,0.3,1) calc(var(--org-load-delay) + 0.22s);
    }
    .agent-organization-map.sr-ready.sr-in .organization-row:hover {
      transform: translateY(-3px) scale(1.005);
      transition-delay: 0s;
    }
    @media (prefers-reduced-motion: reduce) {
      .agent-organization-map.sr-ready .organization-row,
      .agent-organization-map.sr-ready .organization-leader,
      .agent-organization-map.sr-ready .organization-agents > div,
      .agent-organization-map.sr-ready .organization-group {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .agent-organization-map.sr-ready .organization-arrow::before {
        transform: scaleX(1);
        transition: none;
      }
    }

    .agent-growth-section {
      position: relative;
      padding: 86px 24px 96px;
      background:
        radial-gradient(circle at 18% 16%, rgba(99,102,241,0.11), transparent 28%),
        radial-gradient(circle at 82% 82%, rgba(236,72,153,0.09), transparent 28%),
        linear-gradient(180deg, #f4f7fb, #edf3f9);
      overflow: hidden;
    }
    .agent-growth-inner {
      max-width: 1600px;
      margin: 0 auto;
    }
    .agent-growth-heading {
      text-align: center;
      margin-bottom: 48px;
    }
    .agent-growth-heading h2 {
      color: #0f172a;
      font-size: clamp(2rem, 3.6vw, 3rem);
      line-height: 1.12;
      font-weight: 900;
      letter-spacing: -0.045em;
      margin-bottom: 12px;
    }
    .agent-growth-heading p {
      color: #58697f;
      font-size: 17px;
      font-weight: 500;
    }
    .agent-growth-track {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr;
      align-items: center;
    }
    .agent-growth-track::before {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      top: 53px;
      height: 2px;
      background: linear-gradient(90deg, #6366f1, #0ea5e9, #10b981, #ec4899);
      opacity: 0.22;
    }
    .agent-growth-card {
      --growth-color: #6366f1;
      --growth-rgb: 99,102,241;
      position: relative;
      z-index: 1;
      min-height: 316px;
      padding: 80px 26px 28px;
      border: 1px solid rgba(var(--growth-rgb),0.14);
      border-radius: 24px;
      background:
        radial-gradient(circle at 50% 0%, rgba(var(--growth-rgb),0.11), transparent 34%),
        rgba(255,255,255,0.76);
      box-shadow: 0 22px 54px rgba(48,74,112,0.09), inset 0 1px 0 #fff;
      overflow: hidden;
      transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s;
    }
    .agent-growth-card:nth-of-type(2) {
      --growth-color: #0ea5e9;
      --growth-rgb: 14,165,233;
    }
    .agent-growth-card:nth-of-type(3) {
      --growth-color: #10b981;
      --growth-rgb: 16,185,129;
    }
    .agent-growth-card:nth-of-type(4) {
      --growth-color: #ec4899;
      --growth-rgb: 236,72,153;
    }
    .agent-growth-card::after {
      content: attr(data-step);
      position: absolute;
      right: 14px;
      bottom: -15px;
      color: rgba(var(--growth-rgb),0.065);
      font: 900 78px/1 'Outfit', sans-serif;
      letter-spacing: -0.08em;
    }
    .agent-growth-card:hover {
      transform: translateY(-7px);
      border-color: rgba(var(--growth-rgb),0.36);
      box-shadow: 0 30px 66px rgba(var(--growth-rgb),0.15), inset 0 1px 0 #fff;
    }
    .agent-growth-node {
      position: absolute;
      left: 50%;
      top: 0;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -16px);
      border: 7px solid #eef3f9;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(135deg, rgba(var(--growth-rgb),0.72), var(--growth-color));
      box-shadow: 0 12px 30px rgba(var(--growth-rgb),0.28);
    }
    .agent-growth-node::after {
      content: '';
      position: absolute;
      inset: -11px;
      border: 1px dashed rgba(var(--growth-rgb),0.3);
      border-radius: 50%;
      animation: growth-node-orbit 9s linear infinite;
    }
    .agent-growth-node svg {
      width: 22px;
      height: 22px;
    }
    .agent-growth-stage {
      color: var(--growth-color);
      font: 800 12px/1 'Outfit', sans-serif;
      letter-spacing: 0.1em;
      text-align: center;
      margin-bottom: 14px;
    }
    .agent-growth-card h3 {
      color: #172033;
      font-size: 22px;
      font-weight: 900;
      text-align: center;
      margin-bottom: 21px;
    }
    .agent-growth-card ul {
      position: relative;
      z-index: 1;
      list-style: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
    }
    .agent-growth-card li {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      color: #4f6075;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.55;
      text-align: center;
    }
    .agent-growth-card li::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--growth-color);
      box-shadow: 0 0 0 4px rgba(var(--growth-rgb),0.09);
      flex-shrink: 0;
    }
    .agent-growth-arrow {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
    }
    .agent-growth-arrow svg {
      width: 19px;
      height: 19px;
      animation: growth-arrow-pulse 1.8s ease-in-out infinite;
    }
    .agent-growth-arrow:nth-child(4) svg { animation-delay: 0.3s; }
    .agent-growth-arrow:nth-child(6) svg { animation-delay: 0.6s; }
    .agent-growth-track.sr-ready::before {
      transform: scaleX(0);
      transform-origin: left center;
    }
    .agent-growth-track.sr-ready.sr-in::before {
      transform: scaleX(1);
      transition: transform 1.8s cubic-bezier(0.16,1,0.3,1) 0.28s;
    }
    .agent-growth-track.sr-ready .agent-growth-card {
      opacity: 0;
      transform: translateY(38px) scale(0.94);
    }
    .agent-growth-track.sr-ready.sr-in .agent-growth-card {
      opacity: 1;
      transform: translateY(0) scale(1);
      transition:
        opacity 0.95s ease,
        transform 1.15s cubic-bezier(0.16,1,0.3,1),
        border-color 0.28s,
        box-shadow 0.28s;
    }
    .agent-growth-track.sr-ready.sr-in .agent-growth-card:nth-child(1) { transition-delay: 0.12s; }
    .agent-growth-track.sr-ready.sr-in .agent-growth-card:nth-child(3) { transition-delay: 0.44s; }
    .agent-growth-track.sr-ready.sr-in .agent-growth-card:nth-child(5) { transition-delay: 0.76s; }
    .agent-growth-track.sr-ready.sr-in .agent-growth-card:nth-child(7) { transition-delay: 1.08s; }
    .agent-growth-track.sr-ready .agent-growth-arrow {
      opacity: 0;
      transform: translateX(-10px);
    }
    .agent-growth-track.sr-ready.sr-in .agent-growth-arrow {
      opacity: 1;
      transform: translateX(0);
      transition: opacity 0.58s ease, transform 0.72s ease;
    }
    .agent-growth-track.sr-ready.sr-in .agent-growth-arrow:nth-child(2) { transition-delay: 0.52s; }
    .agent-growth-track.sr-ready.sr-in .agent-growth-arrow:nth-child(4) { transition-delay: 0.84s; }
    .agent-growth-track.sr-ready.sr-in .agent-growth-arrow:nth-child(6) { transition-delay: 1.16s; }
    .agent-growth-track.sr-ready.sr-in .agent-growth-card:hover {
      transform: translateY(-7px) scale(1);
      transition-delay: 0s;
    }
    @keyframes growth-node-orbit {
      to { transform: rotate(360deg); }
    }
    @keyframes growth-arrow-pulse {
      50% { color: #6366f1; transform: translateX(4px); }
    }
    @media (max-width: 900px) {
      .agent-growth-section {
        padding: 68px 20px 76px;
      }
      .agent-growth-track {
        grid-template-columns: 1fr;
        gap: 34px;
      }
      .agent-growth-track::before {
        display: none;
      }
      .agent-growth-card {
        min-height: auto;
      }
      .agent-growth-arrow {
        height: 20px;
        transform: rotate(90deg);
      }
      .agent-growth-track.sr-ready .agent-growth-arrow {
        transform: rotate(90deg) translateX(-10px);
      }
      .agent-growth-track.sr-ready.sr-in .agent-growth-arrow {
        transform: rotate(90deg) translateX(0);
      }
    }
    @media (max-width: 640px) {
      .agent-growth-section { padding-inline: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .agent-growth-node::after,
      .agent-growth-arrow svg {
        animation: none;
      }
      .agent-growth-track.sr-ready::before,
      .agent-growth-track.sr-ready.sr-in::before {
        transform: scaleX(1);
        transition: none;
      }
      .agent-growth-track.sr-ready .agent-growth-card,
      .agent-growth-track.sr-ready .agent-growth-arrow {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .agent-framework-section {
      position: relative;
      padding: 82px 24px 90px;
      background:
        radial-gradient(circle at 12% 8%, rgba(99,102,241,0.11), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(20,184,166,0.10), transparent 30%),
        linear-gradient(180deg, #edf3f9, #f4f7fb);
      overflow: hidden;
    }
    .agent-framework-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(14,165,233,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.035) 1px, transparent 1px);
      background-size: 30px 30px;
      mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent);
      -webkit-mask-image: linear-gradient(180deg, transparent, black 16%, black 84%, transparent);
      pointer-events: none;
    }
    .agent-framework-inner {
      position: relative;
      z-index: 1;
      max-width: 1600px;
      margin: 0 auto;
    }
    .agent-framework-inner > .sec-title {
      margin-bottom: 42px;
      text-align: center;
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 900;
      letter-spacing: -0.04em;
    }
    .agent-page .fw-row {
      border-color: rgba(37,99,235,0.10);
      box-shadow: 0 16px 42px rgba(42,52,77,0.08);
    }
    .agent-page section:not(.agent-hero):not(.agent-product-shell):not(#agent-contact) {
      position: relative;
    }
    .agent-page #emp-full-grid {
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 16px !important;
    }
    .agent-emp-card {
      min-height: 138px;
      padding: 18px;
      text-align: left;
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 0%, rgba(14,165,233,0.08), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,0.92), rgba(240,248,252,0.72));
    }
    .agent-emp-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(14,165,233,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.045) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: 0.55;
      pointer-events: none;
    }
    .agent-emp-card::after {
      content: '';
      position: absolute;
      right: -20px;
      top: -24px;
      width: 104px;
      height: 104px;
      border-radius: 34px;
      background: var(--role-grad);
      opacity: 0.10;
      transform: rotate(18deg);
      pointer-events: none;
    }
    .agent-emp-card:nth-child(3n + 2)::after {
      border-radius: 50%;
      right: -30px;
      top: -18px;
      transform: none;
    }
    .agent-emp-card:nth-child(3n)::after {
      width: 122px;
      height: 64px;
      border-radius: 999px;
      right: -26px;
      top: -8px;
      transform: rotate(-16deg);
    }
    .agent-emp-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .agent-emp-icon {
      position: relative;
      width: 58px;
      height: 58px;
      margin: 0;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.72);
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.58), transparent 28%),
        var(--role-grad);
      box-shadow: 0 18px 34px rgba(48,74,112,0.15), inset 0 1px 0 rgba(255,255,255,0.38);
      overflow: hidden;
    }
    .agent-emp-icon::before {
      content: '';
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 13px;
    }
    .agent-emp-icon svg {
      position: relative;
      z-index: 1;
      stroke-width: 2.2;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,0.18));
    }
    .agent-emp-icon small {
      position: absolute;
      right: -5px;
      bottom: -5px;
      z-index: 2;
      width: 24px;
      height: 24px;
      border-radius: 9px;
      border: 2px solid rgba(255,255,255,0.92);
      background: #102033;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Outfit', sans-serif;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0;
    }
    .agent-emp-card:hover .agent-emp-icon {
      border-color: rgba(255,255,255,0.88);
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.66), transparent 28%),
        var(--role-grad);
      transform: translateY(-2px);
    }
    .agent-emp-top span {
      font-family: 'Outfit', sans-serif;
      font-size: 9px;
      letter-spacing: 0.08em;
      color: #0ea5e9;
      border: 1px solid rgba(14,165,233,0.16);
      background: rgba(232,249,253,0.72);
      border-radius: 999px;
      padding: 4px 7px;
    }
    .agent-emp-title {
      position: relative;
      z-index: 1;
      font-size: 14px;
      font-weight: 800;
      color: #102033;
      margin-bottom: 6px;
    }
    .agent-emp-meta {
      position: relative;
      z-index: 1;
      font-family: 'Outfit', sans-serif;
      font-size: 10px;
      color: #7b8a9d;
    }
    .agent-mini-emp {
      min-height: 72px;
      border: 1px solid rgba(37,99,235,0.10);
      border-radius: 12px;
      background: rgba(255,255,255,0.72);
      padding: 10px 8px;
      text-align: center;
      color: #516072;
      font-size: 10px;
      line-height: 1.3;
    }
    .agent-mini-icon {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 6px;
    }
    .agent-page .path-card {
      position: relative;
      min-height: 128px;
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.90), rgba(240,248,252,0.70));
      overflow: hidden;
    }
    .agent-page .path-card::after {
      content: '';
      position: absolute;
      right: 18px;
      top: 18px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(14,165,233,0.08);
    }
    .agent-page .fw-row {
      position: relative;
      grid-template-columns: 240px 1fr;
      border-radius: 22px;
      border-color: rgba(37,99,235,0.08);
      background:
        radial-gradient(circle at 52% 50%, rgba(14,165,233,0.09), transparent 28%),
        linear-gradient(rgba(14,165,233,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.035) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,248,255,0.78));
      background-size: auto, 26px 26px, 26px 26px, auto;
      margin-bottom: 14px;
      box-shadow: 0 18px 44px rgba(42,52,77,0.08);
      overflow: hidden;
    }
    .agent-page .fw-row::after {
      content: '';
      position: absolute;
      left: 240px;
      top: 50%;
      right: 36px;
      height: 1px;
      background: linear-gradient(90deg, rgba(14,165,233,0.28), rgba(20,184,166,0.16), transparent);
      pointer-events: none;
    }
    .agent-page .fw-right {
      position: relative;
      z-index: 1;
      padding: 26px 28px;
      border-left: 0;
      gap: 14px;
      align-content: center;
    }
    .agent-page .fw-row::before {
      content: '';
      position: absolute;
      left: 240px;
      top: 0;
      width: 18%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.08), transparent);
      transform: translateX(-120%);
      animation: fw-scan 6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes fw-scan {
      0%, 30% { transform: translateX(-120%); opacity: 0; }
      45% { opacity: 1; }
      78%, 100% { transform: translateX(520%); opacity: 0; }
    }
    .agent-page .fw-left {
      position: relative;
      z-index: 1;
      min-height: 142px;
      padding: 26px 24px;
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.46), transparent 30%),
        var(--fw-grad);
      overflow: hidden;
    }
    .agent-page .fw-left::after {
      content: '';
      position: absolute;
      right: -24px;
      bottom: -26px;
      width: 110px;
      height: 110px;
      border-radius: 34px;
      background: rgba(255,255,255,0.14);
      transform: rotate(20deg);
    }
    .fw-left-icon {
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(255,255,255,0.20);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
    }
    .fw-left-title {
      position: relative;
      z-index: 1;
      font-size: 17px;
      font-weight: 900;
      color: #fff;
      margin-bottom: 6px;
    }
    .fw-left-sub {
      position: relative;
      z-index: 1;
      font-size: 12px;
      color: rgba(255,255,255,0.76);
    }
    .agent-page .fw-chip {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) 8px;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(37,99,235,0.07);
      background:
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,252,255,0.78));
      border-radius: 16px;
      padding: 11px 12px;
      min-width: 156px;
      box-shadow: 0 10px 24px rgba(42,52,77,0.06);
      overflow: hidden;
    }
    .agent-page .fw-chip::before {
      content: var(--chip-index);
      position: absolute;
      right: 10px;
      top: 7px;
      width: auto;
      height: auto;
      background: none;
      font-family: 'Outfit', sans-serif;
      font-size: 10px;
      font-weight: 800;
      color: rgba(14,165,233,0.22);
      line-height: 1;
    }
    .agent-page .fw-chip::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(14,165,233,0.10), transparent 70%);
      transform: translateX(-120%);
      transition: transform 0.55s ease;
      pointer-events: none;
    }
    .agent-page .fw-chip:hover {
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(234,249,253,0.86));
      border-color: rgba(14,165,233,0.18);
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(42,52,77,0.09);
    }
    .agent-page .fw-chip:hover::after {
      transform: translateX(120%);
    }
    .agent-page .fw-chip-icon {
      position: relative;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.82), transparent 36%),
        linear-gradient(135deg, rgba(14,165,233,0.18), rgba(20,184,166,0.12));
      color: #0b94d6;
      border: 1px solid rgba(14,165,233,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 18px rgba(14,165,233,0.10);
    }
    .fw-chip-copy {
      min-width: 0;
    }
    .fw-chip-title {
      font-size: 12px;
      font-weight: 800;
      color: #102033;
    }
    .fw-chip-desc {
      font-size: 11px;
      color: #8a96a8;
      margin-top: 2px;
    }
    .fw-chip-status {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
      align-self: end;
      margin-bottom: 4px;
    }
    @media (max-width: 900px) {
      .agent-framework-section {
        padding: 62px 20px 70px;
      }
      .agent-hero-inner,
      .agent-panel-grid,
      .agent-flow-visual,
      .agent-workflow-board,
      .agent-skill-market-panel,
      .agent-squad-panel {
        grid-template-columns: 1fr;
      }
      .agent-hero {
        padding-top: 96px;
      }
      .agent-flow-visual::before {
        display: none;
      }
      .agent-skill-cloud {
        max-width: 100%;
        padding-top: 116px;
      }
      .agent-page #emp-full-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    @media (max-width: 768px) {
      .agent-hero {
        padding: 92px 20px 64px;
      }
      .agent-live-metrics,
      .agent-feature-grid {
        grid-template-columns: 1fr;
      }
      .agent-product-shell {
        padding: 0 20px 52px;
      }
      .squad-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .squad-orbit {
        min-height: 360px;
      }
      .squad-orbit-center {
        width: 104px;
        height: 74px;
      }
      .squad-orbit-node {
        padding: 7px 9px;
        font-size: 10px;
      }
      .squad-orbit-node.pos-1 { left: 5%; top: 12%; }
      .squad-orbit-node.pos-2 { left: 32%; top: 6%; }
      .squad-orbit-node.pos-3 { right: 5%; top: 14%; }
      .squad-orbit-node.pos-4 { right: 4%; top: 48%; }
      .squad-orbit-node.pos-5 { right: 9%; bottom: 12%; }
      .squad-orbit-node.pos-6 { left: 30%; bottom: 7%; }
      .squad-orbit-node.pos-7 { left: 4%; bottom: 17%; }
      .workflow-canvas {
        min-height: 320px;
      }
      .agent-page #emp-full-grid {
        grid-template-columns: 1fr !important;
      }
    }

    /* Final mobile/app overrides. Keep this at the end so inline/late rules do not win. */
    @media (max-width: 640px) {
      #site-nav > div {
        height: 66px !important;
        padding: 0 24px !important;
      }
      #site-nav .desk-only {
        display: none !important;
      }
      #site-nav #mob-toggle.mob-only {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
      }
      #site-nav #mob-toggle svg {
        width: 24px !important;
        height: 24px !important;
      }

      #page-home > .hero-bg {
        min-height: auto !important;
        padding: 96px 24px 42px !important;
        display: block !important;
      }
      #page-home .hero-inner > div {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        padding-bottom: 24px !important;
      }
      #page-home .hero-inner h1 {
        font-size: clamp(2.3rem, 12vw, 3.2rem) !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
      }
      #page-home .hero-title-main {
        font-size: 0.94em !important;
      }
      #page-home .hero-desc-flow {
        flex-direction: column;
      }
      #page-home .hero-desc-connector {
        width: 100%;
        height: 34px;
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      #page-home .hero-desc-connector i,
      #page-home .hero-desc-connector svg {
        transform: rotate(90deg);
      }
      #page-home .hero-inner p {
        max-width: 300px !important;
      }
      #page-home .hero-proof-strip {
        max-width: 100% !important;
      }
      #page-home .hero-proof-strip span {
        font-size: 13px !important;
        padding: 8px 11px;
      }
      #page-home #hero-console {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        margin-top: 4px !important;
      }
      #page-home #hero-console [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
      }
      #page-home #hero-console [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      #page-home .hero-fc {
        max-width: calc(100vw - 72px);
      }
      #page-home .fc1 {
        display: none !important;
      }
      #page-home .fc2 {
        display: none !important;
      }
      #page-home .fc3 {
        display: none !important;
      }

      #page-agent .agent-hero {
        padding: 92px 24px 52px !important;
      }
      #page-agent .agent-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }
      #page-agent .agent-product-shell {
        transform: none !important;
        padding: 0 24px 48px !important;
      }
      #page-agent .agent-shell-inner {
        border-radius: 18px !important;
        overflow: hidden !important;
      }
      #page-agent .agent-tabbar {
        display: flex !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        scrollbar-width: none;
      }
      #page-agent .agent-tabbar::-webkit-scrollbar {
        display: none;
      }
      #page-agent .agent-tabbar .mac-tab {
        flex: 0 0 auto !important;
        border: 1px solid rgba(14,165,233,0.12) !important;
        border-radius: 999px !important;
        padding: 9px 14px !important;
        background: rgba(255,255,255,0.72) !important;
        font-size: 12px !important;
      }
      #page-agent .agent-tabbar .mac-tab.active {
        color: #0f172a !important;
        border-color: rgba(14,165,233,0.28) !important;
        background: rgba(232,249,253,0.92) !important;
      }
      #page-agent .agent-tab-content {
        padding: 18px !important;
      }

      #page-agent .agent-path-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
      }
      #page-agent .agent-path-row .path-card {
        width: 100% !important;
        min-width: 0 !important;
      }
      #page-agent .agent-path-row .path-arrow {
        justify-content: center !important;
        height: 18px !important;
        transform: rotate(90deg) !important;
      }

      #page-agent .fw-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        border-radius: 20px !important;
      }
      #page-agent .fw-row::before,
      #page-agent .fw-row::after {
        display: none !important;
      }
      #page-agent .fw-left {
        min-height: 150px !important;
        width: auto !important;
      }
      #page-agent .fw-right {
        padding: 18px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        border-left: 0 !important;
      }
      #page-agent .fw-chip {
        width: 100% !important;
        min-width: 0 !important;
      }
    }

    /* Typography pass: improve readability across desktop and app/mobile views */
    body {
      font-size: 16px;
    }
    .nav-btn,
    .btn-consult,
    .btn-submit,
    .console-btn,
    .agent-primary-btn,
    .agent-ghost-btn {
      font-size: 15px !important;
    }
    /* #logo-btn span {
      font-size: 17px !important;
    } */
    .sec-sub,
    .tech-section-sub,
    .proof-sub,
    .console-heading p,
    .contact-head p,
    .about-hero-copy p,
    .about-copy-card p,
    .about-founder p,
    .agent-hero-copy p,
    .skill-market-copy p,
    .squad-status p {
      font-size: 15px !important;
      line-height: 1.85;
    }
    .section-kicker,
    .business-ai-kicker,
    .contact-kicker,
    .workflow-kicker,
    .agent-kicker {
      font-size: 13px !important;
    }
    .adv-title,
    .process-title,
    .base-cap-card .cap-title,
    .fw-chip-title,
    .agent-emp-title,
    .about-team-card strong,
    .capability-line strong,
    .qr-title {
      font-size: 15px !important;
    }
    .adv-list li,
    .process-item,
    .base-cap-card .cap-desc,
    .fw-chip-desc,
    .agent-emp-meta,
    .timeline-node p,
    .about-team-card p,
    .capability-line em,
    .qr-desc,
    .contact-note,
    .business-step em,
    .agent-skill-cloud span,
    .squad-metrics span {
      font-size: 13px !important;
      line-height: 1.65;
    }
    .business-step strong,
    .flow-node span,
    .agent-feature strong {
      font-size: 16px !important;
    }
    .skill-tag,
    .base-console .skill-tag,
    .agent-hero-tags span,
    .about-hero-tags span,
    .agent-system-node,
    .case-more-btn {
      font-size: 13px !important;
    }
    .mac-tab,
    #page-agent .agent-tabbar .mac-tab {
      font-size: 14px !important;
      font-weight: 700 !important;
    }
    .mac-url,
    .console-label,
    .console-title,
    .console-live,
    .console-kicker,
    .contact-benefits span,
    .founder-role,
    .team-head em,
    .client-proof-label {
      font-size: 12px !important;
    }
    .console-stat span,
    .client-logo-meta,
    .agent-emp-top span,
    .agent-emp-icon small,
    .fw-chip::before,
    .squad-orbit-center,
    .squad-orbit-node {
      font-size: 11px !important;
    }
    .f-input {
      font-size: 15px !important;
    }
    .f-err {
      font-size: 12px !important;
    }
    .mob-nav-item {
      font-size: 19px !important;
    }
    .path-card > div:first-child {
      font-size: 13px !important;
    }
    .path-card > div:nth-child(2) {
      font-size: 20px !important;
      line-height: 1.35;
    }
    .job-row > div:nth-child(2) > div:first-child {
      font-size: 16px !important;
    }
    .job-row > div:nth-child(2) > div:nth-child(2) {
      font-size: 14px !important;
      line-height: 1.65;
    }
    footer span {
      font-size: 13px !important;
    }

    /* Inline console text in the home hero was intentionally tiny; keep it compact but readable. */
    #hero-console [style*="font-size:8px"] {
      font-size: 10px !important;
    }
    #hero-console [style*="font-size:9px"] {
      font-size: 11px !important;
    }
    #hero-console [style*="font-size:10px"] {
      font-size: 12px !important;
    }
    #hero-console [style*="font-size:11px"] {
      font-size: 13px !important;
    }
    #hero-console [style*="font-size:12px"] {
      font-size: 13px !important;
    }
    .hero-fc [style*="font-size:9px"] {
      font-size: 11px !important;
    }
    .hero-fc [style*="font-size:10px"] {
      font-size: 12px !important;
    }
    .hero-fc [style*="font-size:11px"] {
      font-size: 12px !important;
    }

    @media (max-width: 640px) {
      .nav-btn,
      .btn-consult,
      .btn-submit,
      .console-btn,
      .agent-primary-btn,
      .agent-ghost-btn {
        font-size: 15px !important;
      }
      .sec-sub,
      .tech-section-sub,
      .proof-sub,
      .console-heading p,
      .contact-head p,
      .about-hero-copy p,
      .about-copy-card p,
      .about-founder p,
      .agent-hero-copy p,
      .skill-market-copy p,
      .squad-status p {
        font-size: 16px !important;
      }
      .adv-title,
      .process-title,
      .base-cap-card .cap-title,
      .fw-chip-title,
      .agent-emp-title,
      .about-team-card strong,
      .capability-line strong,
      .qr-title {
        font-size: 16px !important;
      }
      .adv-list li,
      .process-item,
      .base-cap-card .cap-desc,
      .fw-chip-desc,
      .agent-emp-meta,
      .timeline-node p,
      .about-team-card p,
      .capability-line em,
      .qr-desc,
      .contact-note,
      .business-step em,
      .agent-skill-cloud span,
      .squad-metrics span {
        font-size: 14px !important;
      }
      #page-agent .agent-tabbar .mac-tab {
        font-size: 14px !important;
        padding: 10px 16px !important;
      }
      .squad-orbit-node {
        font-size: 12px !important;
      }
    }

    /* Readability pass 2: lift content text one more step */
    .sec-sub,
    .tech-section-sub,
    .proof-sub {
      font-size: 16px !important;
      line-height: 1.8 !important;
    }
    .adv-title,
    .process-title,
    .base-cap-card .cap-title,
    .business-step strong,
    .fw-chip-title,
    .capability-line strong,
    .agent-feature strong,
    .about-team-card strong {
      font-size: 17px !important;
      line-height: 1.45 !important;
    }
    .adv-list li,
    .process-item,
    .base-cap-card .cap-desc,
    .business-step em,
    .fw-chip-desc,
    .capability-line em,
    .about-team-card p,
    .timeline-node p,
    .agent-feature span,
    .workflow-rules span {
      font-size: 15px !important;
      line-height: 1.7 !important;
    }
    .section-kicker,
    .business-ai-kicker,
    .contact-kicker,
    .workflow-kicker,
    .agent-kicker,
    .skill-tag,
    .base-console .skill-tag,
    .agent-hero-tags span,
    .about-hero-tags span {
      font-size: 14px !important;
    }
    .business-proof-strip span {
      font-size: 16px !important;
    }
    .business-proof-strip strong {
      font-size: 30px !important;
    }
    .console-heading p,
    .contact-head p,
    .about-hero-copy p,
    .about-copy-card p,
    .about-founder p,
    .agent-hero-copy p,
    .skill-market-copy p,
    .squad-status p,
    .business-ai-copy p {
      font-size: 16px !important;
      line-height: 1.9 !important;
    }

    @media (max-width: 640px) {
      .sec-sub,
      .tech-section-sub,
      .proof-sub,
      .console-heading p,
      .contact-head p,
      .about-hero-copy p,
      .about-copy-card p,
      .about-founder p,
      .agent-hero-copy p,
      .skill-market-copy p,
      .squad-status p,
      .business-ai-copy p {
        font-size: 17px !important;
      }
      .adv-title,
      .process-title,
      .base-cap-card .cap-title,
      .business-step strong,
      .fw-chip-title,
      .capability-line strong,
      .agent-feature strong,
      .about-team-card strong {
        font-size: 18px !important;
      }
      .adv-list li,
      .process-item,
      .base-cap-card .cap-desc,
      .business-step em,
      .fw-chip-desc,
      .capability-line em,
      .about-team-card p,
      .timeline-node p,
      .agent-feature span,
      .workflow-rules span {
        font-size: 16px !important;
      }
      .business-proof-strip {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 0 auto 12px;
        padding: 10px;
        border-radius: 18px;
      }
      .business-proof-strip span {
        justify-content: flex-start;
        min-height: 52px;
        padding: 10px 12px;
        font-size: 15px !important;
      }
      .business-proof-strip span:nth-child(2)::after {
        display: none;
      }
      .business-proof-strip span:nth-child(3)::after {
        top: 0;
      }
      .business-proof-strip strong {
        font-size: 23px !important;
      }
      .business-proof-strip span:last-child {
        grid-column: 1 / -1;
        justify-content: center;
        margin: 8px 0 0;
        min-height: 40px;
      }
    }

    /* Advantage redesign: stronger title hierarchy and lighter motion */
    .advantage-band .tech-section-title {
      max-width: 760px;
      font-size: clamp(2.45rem, 4.8vw, 4.45rem) !important;
      line-height: 1.04 !important;
      letter-spacing: 0 !important;
      color: #0f172a;
      margin-top: 14px;
    }
    .advantage-band .section-kicker {
      border-color: rgba(14,165,233,0.20);
      background: rgba(255,255,255,0.72);
      box-shadow: 0 12px 30px rgba(48,74,112,0.08);
    }
    .adv-grid {
      position: relative;
      grid-template-columns: 1.18fr 0.92fr 1.08fr !important;
      grid-auto-rows: minmax(182px, auto);
      gap: 20px !important;
      margin-top: 38px !important;
    }
    .adv-grid::before {
      content: '';
      position: absolute;
      left: 8%;
      right: 7%;
      top: 50%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.28), rgba(20,184,166,0.18), transparent);
      box-shadow: 0 0 18px rgba(14,165,233,0.12);
      pointer-events: none;
    }
    .adv-card {
      position: relative;
      min-height: 188px !important;
      padding: 28px 28px 24px !important;
      border: 1px solid rgba(14,165,233,0.14) !important;
      border-radius: 26px !important;
      background:
        radial-gradient(circle at 82% 12%, rgba(14,165,233,0.13), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,0.94), rgba(238,247,252,0.70)) !important;
      box-shadow: 0 18px 46px rgba(48,74,112,0.10), inset 0 1px 0 rgba(255,255,255,0.86) !important;
      overflow: hidden;
      isolation: isolate;
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }
    .adv-card::before {
      right: 22px !important;
      top: 18px !important;
      color: rgba(14,165,233,0.10) !important;
      font-size: 54px !important;
      line-height: 1 !important;
      z-index: -1;
    }
    .adv-card::after {
      content: '' !important;
      position: absolute;
      left: -28%;
      right: auto !important;
      top: 0 !important;
      width: 28%;
      height: 100% !important;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.13), transparent) !important;
      opacity: 0;
      transform: skewX(-16deg);
      animation: adv-card-sheen 7s ease-in-out infinite;
    }
    .adv-card:hover {
      transform: translateY(-7px) !important;
      border-color: rgba(14,165,233,0.28) !important;
      box-shadow: 0 26px 64px rgba(48,74,112,0.15), 0 0 26px rgba(14,165,233,0.10) !important;
    }
    .adv-card:first-child {
      grid-row: span 2;
      justify-content: flex-start !important;
      min-height: 396px !important;
      padding: 42px 36px !important;
      background:
        radial-gradient(circle at 78% 16%, rgba(14,165,233,0.18), transparent 26%),
        radial-gradient(circle at 18% 88%, rgba(45,212,191,0.12), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(230,246,253,0.76)) !important;
    }
    .adv-card:first-child::before {
      font-size: 104px !important;
      right: 28px !important;
      top: 22px !important;
    }
    .adv-card:nth-child(3) {
      transform: translateY(22px);
    }
    .adv-card:nth-child(3):hover {
      transform: translateY(15px) !important;
    }
    .adv-card:nth-child(4) {
      grid-column: 2 / 4 !important;
      min-height: 170px !important;
    }
    .adv-head {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 20px;
    }
    .adv-icon {
      width: 50px;
      height: 50px;
      border-radius: 17px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0284c7;
      border: 1px solid rgba(14,165,233,0.20);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 36%),
        linear-gradient(135deg, rgba(224,242,254,0.94), rgba(204,251,241,0.58));
      box-shadow: 0 12px 28px rgba(14,165,233,0.12);
    }
    .adv-title {
      display: block !important;
      width: auto !important;
      min-height: 0 !important;
      margin: 0 0 8px !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: #0f172a !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      line-height: 1.25 !important;
    }
    .adv-desc {
      max-width: 360px;
      color: #667085;
      font-size: 14px;
      line-height: 1.75;
      font-weight: 600;
    }
    .adv-list {
      position: relative;
      z-index: 1;
      display: grid !important;
      gap: 12px !important;
      padding-left: 66px;
    }
    .adv-card:first-child .adv-list {
      margin-top: auto;
      padding-left: 66px;
      gap: 14px !important;
    }
    .adv-list li {
      color: #506175 !important;
      font-size: 15px !important;
      font-weight: 700;
      line-height: 1.55 !important;
    }
    .adv-list li::before {
      width: 7px !important;
      height: 7px !important;
      margin-top: 8px !important;
      background: #0ea5e9 !important;
      box-shadow: 0 0 0 5px rgba(14,165,233,0.10), 0 0 14px rgba(14,165,233,0.34) !important;
    }
    @keyframes adv-card-sheen {
      0%, 28% { left: -28%; opacity: 0; }
      42% { opacity: 1; }
      68%, 100% { left: 110%; opacity: 0; }
    }

    @media (max-width: 900px) {
      .adv-grid {
        grid-template-columns: 1fr 1fr !important;
      }
      .adv-grid::before {
        display: none;
      }
      .adv-card:first-child,
      .adv-card:nth-child(4) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: 240px !important;
      }
      .adv-card:nth-child(3) {
        transform: none;
      }
      .adv-card:nth-child(3):hover {
        transform: translateY(-7px) !important;
      }
    }

    @media (max-width: 640px) {
      .advantage-band .tech-section-title {
        font-size: clamp(2.2rem, 12vw, 3.2rem) !important;
      }
      .adv-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
      .adv-card,
      .adv-card:first-child,
      .adv-card:nth-child(4) {
        min-height: auto !important;
        padding: 26px 22px !important;
      }
      .adv-head {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 13px;
      }
      .adv-icon {
        width: 44px;
        height: 44px;
        border-radius: 15px;
      }
      .adv-title {
        font-size: 20px !important;
      }
      .adv-desc {
        font-size: 14px;
      }
      .adv-list,
      .adv-card:first-child .adv-list {
        padding-left: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .business-proof-strip::after,
      .business-proof-strip span,
      .business-proof-strip span:last-child {
        animation: none !important;
      }
    }

    /* Skill market refresh: distinguish from capability cards */
    .skill-market {
      grid-template-columns: minmax(0, 1fr) 320px !important;
      gap: 20px !important;
    }
    .skill-market .console-skill-row {
      position: relative;
      display: flex !important;
      flex-wrap: wrap;
      align-content: center;
      gap: 12px 10px !important;
      padding: 24px !important;
      border-radius: 24px !important;
      border: 1px solid rgba(14,165,233,0.13) !important;
      background:
        radial-gradient(circle at 18% 18%, rgba(20,184,166,0.13), transparent 26%),
        radial-gradient(circle at 86% 70%, rgba(14,165,233,0.13), transparent 28%),
        linear-gradient(rgba(14,165,233,0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.038) 1px, transparent 1px),
        linear-gradient(135deg, rgba(255,255,255,0.74), rgba(240,249,255,0.50)) !important;
      background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 14px 34px rgba(48,74,112,0.07);
      overflow: hidden;
    }
    .skill-market .console-skill-row::before {
      content: '';
      position: absolute;
      left: 28px;
      right: 28px;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(14,165,233,0.22), rgba(20,184,166,0.18), transparent);
      pointer-events: none;
    }
    .skill-market .console-skill-row::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 20%, rgba(14,165,233,0.11), transparent 64%);
      transform: translateX(-120%);
      animation: skill-panel-scan 7s ease-in-out infinite;
      pointer-events: none;
    }
    .skill-market .skill-tag {
      position: relative;
      z-index: 1;
      min-width: 142px !important;
      flex: 1 1 142px;
      min-height: 52px !important;
      display: grid !important;
      grid-template-columns: 24px 30px minmax(max-content, 1fr);
      align-items: center;
      gap: 9px !important;
      padding: 10px 12px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(14,165,233,0.15) !important;
      background: rgba(255,255,255,0.78) !important;
      color: #1f344b !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      box-shadow: 0 10px 22px rgba(48,74,112,0.07) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .skill-market .skill-tag:nth-child(3n + 2),
    .skill-market .skill-tag:nth-child(3n) {
      transform: none !important;
    }
    .skill-market .skill-tag:hover {
      transform: translateY(-3px) !important;
      border-color: rgba(14,165,233,0.28) !important;
      background: rgba(239,248,255,0.92) !important;
      box-shadow: 0 16px 30px rgba(48,74,112,0.10), 0 0 22px rgba(14,165,233,0.08) !important;
    }
    .skill-market .skill-tag::after {
      opacity: 0.55;
    }
    .skill-market .skill-tag em {
      font-size: 11px !important;
      color: #0ea5e9 !important;
      font-weight: 900;
      letter-spacing: 0;
      text-align: center;
    }
    .skill-market .skill-tag b {
      display: none !important;
    }
    .skill-market .skill-tag-icon {
      position: relative;
      z-index: 1;
      width: 30px !important;
      height: 30px !important;
      padding: 7px;
      border-radius: 50%;
      color: #0284c7;
      background: linear-gradient(135deg, rgba(224,242,254,0.96), rgba(204,251,241,0.64));
      border: 1px solid rgba(14,165,233,0.16);
      box-shadow: 0 8px 18px rgba(14,165,233,0.10);
    }
    .skill-market .skill-tag span {
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }
    .skill-pack-grid {
      gap: 12px !important;
    }
    .skill-pack {
      min-height: 66px !important;
      padding: 16px 82px 16px 20px !important;
      border-radius: 18px !important;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.90), rgba(232,249,253,0.64)) !important;
      transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    }
    .skill-pack:hover {
      transform: translateX(4px);
      border-color: rgba(14,165,233,0.26);
      box-shadow: 0 16px 34px rgba(48,74,112,0.11), 0 0 24px rgba(14,165,233,0.08);
    }
    .skill-pack::after {
      right: 18px !important;
      top: 50%;
      width: 46px !important;
      height: 46px !important;
      transform: translateY(-50%);
      border: 1px solid rgba(14,165,233,0.16);
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,0.9), transparent 34%),
        linear-gradient(135deg, rgba(224,242,254,0.95), rgba(204,251,241,0.62)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 22px rgba(14,165,233,0.12);
    }
    .skill-pack svg {
      position: absolute !important;
      z-index: 2 !important;
      right: 31px;
      top: 50%;
      width: 20px !important;
      height: 20px !important;
      transform: translateY(-50%);
      color: #0284c7 !important;
    }
    .skill-pack span {
      font-size: 15px;
      letter-spacing: 0;
    }
    @keyframes skill-panel-scan {
      0%, 32% { transform: translateX(-120%); opacity: 0; }
      48% { opacity: 1; }
      78%, 100% { transform: translateX(120%); opacity: 0; }
    }
    @media (max-width: 900px) {
      .skill-market {
        grid-template-columns: 1fr !important;
      }
      .skill-market .console-skill-row {
        display: flex !important;
      }
    }
    @media (max-width: 640px) {
      .skill-market .console-skill-row {
        display: grid !important;
        grid-template-columns: 1fr;
        padding: 18px !important;
      }
      .skill-market .console-skill-row::before {
        display: none;
      }
    }

    /* Service product cards: make the three products and their concrete services clearer */
    .process-card {
      display: flex;
      flex-direction: column;
      min-height: 360px !important;
      padding: 18px 24px 24px !important;
    }
    .process-card .process-visual {
      flex: 0 0 auto;
      height: 122px;
      margin-bottom: 20px;
      opacity: 0.88;
    }
    .process-card .process-icon {
      width: 52px;
      height: 52px;
      margin: -2px 0 14px !important;
      border-radius: 18px;
      background:
        radial-gradient(circle at 28% 20%, rgba(255,255,255,0.94), transparent 34%),
        linear-gradient(135deg, rgba(224,242,254,0.96), rgba(204,251,241,0.66)) !important;
      border: 1px solid rgba(14,165,233,0.18) !important;
      color: #0284c7 !important;
    }
    .process-card .process-icon svg {
      width: 22px !important;
      height: 22px !important;
      color: #0284c7 !important;
    }
    .process-card .process-title {
      color: #0f172a;
      font-size: 23px !important;
      line-height: 1.25 !important;
      margin-bottom: 16px !important;
      letter-spacing: 0;
    }
    .process-card .process-list {
      display: grid !important;
      gap: 10px !important;
      margin-top: auto;
    }
    .process-card .process-item {
      display: grid !important;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: start !important;
      gap: 11px !important;
      padding: 12px !important;
      border: 1px solid rgba(14,165,233,0.12);
      border-radius: 15px;
      background: rgba(255,255,255,0.60);
      color: #405268;
      box-shadow: 0 10px 24px rgba(48,74,112,0.055);
    }
    .process-card .process-copy {
      min-width: 0;
    }
    .process-card .process-check {
      width: 34px !important;
      height: 34px !important;
      border-radius: 13px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.94), transparent 38%),
        linear-gradient(135deg, rgba(224,242,254,0.96), rgba(204,251,241,0.66)) !important;
      border: 1px solid rgba(14,165,233,0.16);
      color: #0284c7;
      box-shadow: 0 8px 18px rgba(14,165,233,0.10);
    }
    .process-card .process-check svg {
      color: #0284c7 !important;
    }
    .process-card .process-item strong {
      display: block;
      color: #102033;
      font-size: 16px !important;
      font-weight: 900;
      line-height: 1.25 !important;
      margin-bottom: 4px;
      white-space: normal;
    }
    .process-card .process-item em {
      display: block;
      color: #6b7b90;
      font-style: normal;
      font-size: 12.5px !important;
      line-height: 1.58 !important;
      font-weight: 600;
      white-space: normal;
      word-break: normal;
      overflow-wrap: break-word;
    }
    .process-card:hover .process-item {
      border-color: rgba(14,165,233,0.18);
      background: rgba(255,255,255,0.72);
    }
    @media (max-width: 640px) {
      .process-card {
        min-height: auto !important;
        padding: 18px 18px 20px !important;
      }
      .process-card .process-title {
        font-size: 22px !important;
      }
      .process-card .process-item {
        grid-template-columns: 34px minmax(0, 1fr);
      }
      .process-card .process-check {
        width: 34px !important;
        height: 34px !important;
      }
    }

    /* Real client logo images */
    .client-wall .case-cell {
      flex-basis: 178px;
      min-height: 82px;
      padding: 16px 20px;
      border-color: rgba(14,165,233,0.16) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(239,248,252,0.64)) !important;
    }
    .client-wall .case-featured {
      border-color: rgba(14,165,233,0.16) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(239,248,252,0.64)) !important;
    }
    .client-logo-img {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      max-width: 128px;
      height: 46px;
      object-fit: contain;
      filter: saturate(0.94) contrast(1.02);
      opacity: 0.88;
      transition: transform 0.24s ease, opacity 0.24s ease, filter 0.24s ease;
    }
    .case-featured .client-logo-img {
      max-width: 140px;
      height: 50px;
      opacity: 0.96;
    }
    .case-cell:hover .client-logo-img,
    .case-cell.is-pulsing .client-logo-img {
      opacity: 1;
      filter: saturate(1.05) contrast(1.04);
      transform: scale(1.04);
    }
    .client-logo-mark,
    .client-logo-meta {
      display: none;
    }
    @media (max-width: 640px) {
      .client-wall .case-cell {
        flex-basis: 148px;
        min-height: 74px;
        padding: 12px 16px;
      }
      .client-logo-img {
        max-width: 112px;
        height: 38px;
      }
    }

    /* Client logos: remove mixed selected states, keep one consistent card style */
    .client-wall .case-cell,
    .client-wall .case-featured,
    .client-wall .case-minor {
      border-color: rgba(14,165,233,0.11) !important;
      background: rgba(255,255,255,0.58) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.78) !important;
      opacity: 0.82;
    }
    .client-wall .case-cell.is-visible {
      opacity: 0.82;
    }
    .client-wall .case-cell:hover,
    .client-wall .case-cell.is-pulsing {
      opacity: 1;
      border-color: rgba(14,165,233,0.24) !important;
      background: rgba(255,255,255,0.78) !important;
      box-shadow: 0 14px 30px rgba(48,74,112,0.10), 0 0 22px rgba(14,165,233,0.08) !important;
    }
    .client-wall .case-featured .client-logo-img,
    .client-wall .case-minor .client-logo-img,
    .client-wall .client-logo-img {
      max-width: 132px;
      height: 46px;
      opacity: 0.9;
    }
    .client-wall .case-cell:hover .client-logo-img,
    .client-wall .case-cell.is-pulsing .client-logo-img {
      opacity: 1;
    }

    /* Agent hero copy variant */
    .agent-page .agent-hero-inner {
      grid-template-columns: 1.05fr 0.95fr;
    }
    .agent-page .agent-hero-copy h1 {
      max-width: 920px;
      font-size: clamp(2.25rem, 3.35vw, 3.36rem) !important;
      letter-spacing: 0 !important;
      line-height: 1.16 !important;
      margin-bottom: 26px !important;
    }
    .agent-page .agent-hero-copy h1 span {
      display: block;
      white-space: nowrap;
    }
    .agent-hero-proof {
      margin: 0 0 30px !important;
    }
    .agent-hero-proof span {
      display: inline-flex;
      align-items: center;
      min-height: 54px;
      padding: 0 28px !important;
      border-radius: 14px !important;
      border: 1px solid rgba(255,255,255,0.16) !important;
      background: rgba(255,255,255,0.94) !important;
      color: #202329 !important;
      font-size: clamp(1.1rem, 1.7vw, 1.6rem) !important;
      font-weight: 900;
      box-shadow: 0 18px 42px rgba(0,0,0,0.24);
    }
    .agent-page .agent-hero-copy p {
      color: rgba(255,255,255,0.72) !important;
      font-size: clamp(1.25rem, 1.9vw, 1.85rem) !important;
      line-height: 1.45 !important;
      font-weight: 800;
      margin-bottom: 22px !important;
    }
    .agent-hero-copy {
      position: relative;
      z-index: 1;
    }
    .agent-hero-copy::before {
      content: '';
      position: absolute;
      left: -36px;
      top: 48px;
      width: 3px;
      height: 112px;
      border-radius: 999px;
      background: linear-gradient(180deg, #818cf8, #22d3ee, transparent);
      box-shadow: 0 0 20px rgba(34,211,238,0.32);
    }
    .agent-hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: rgba(165,180,252,0.78);
      font: 800 18px/1 'Outfit', sans-serif;
      letter-spacing: 0.14em;
    }
    .agent-hero-eyebrow span {
      width: 26px;
      height: 1px;
      background: linear-gradient(90deg, #818cf8, #22d3ee);
    }
    .agent-page .agent-hero-copy h1 .agent-hero-highlight {
      display: inline-block;
      width: max-content;
      background: linear-gradient(100deg, #fff 5%, #c7d2fe 45%, #67e8f9 100%);
      background-size: 180% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: grad-shift 6s ease infinite;
    }
    .agent-security-badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 52px;
      margin: 0 0 24px;
      padding: 0 20px 0 14px;
      border-radius: 15px;
      color: #111827;
      background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(238,246,255,0.92));
      border: 1px solid rgba(255,255,255,0.82);
      box-shadow:
        0 18px 46px rgba(0,0,0,0.28),
        inset 0 1px 0 #fff;
      overflow: hidden;
    }
    .agent-security-badge::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 25%, rgba(99,102,241,0.1), transparent 70%);
      transform: translateX(-120%);
      animation: fw-scan 7s ease-in-out infinite;
      pointer-events: none;
    }
    .agent-security-badge > * {
      position: relative;
      z-index: 1;
    }
    .agent-security-badge svg {
      width: 22px;
      height: 22px;
      padding: 4px;
      border-radius: 7px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #06b6d4);
      box-sizing: content-box;
    }
    .agent-security-badge strong {
      font-size: clamp(1rem, 1.4vw, 1.2rem);
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .agent-security-badge b {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #94a3b8;
    }
    .agent-value-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
    }
    .agent-value-tags span {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 42px;
      padding: 0 18px;
      border: 1px solid rgba(103,232,249,0.25);
      border-radius: 999px;
      color: rgba(255,255,255,0.94);
      background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(34,211,238,0.08));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(34,211,238,0.08);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.02em;
      transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }
    .agent-value-tags span:hover {
      transform: translateY(-2px);
      border-color: rgba(103,232,249,0.56);
      background: linear-gradient(135deg, rgba(99,102,241,0.24), rgba(34,211,238,0.15));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 28px rgba(34,211,238,0.15);
    }
    .agent-value-tags svg {
      width: 17px;
      height: 17px;
      color: #67e8f9;
      filter: drop-shadow(0 0 5px rgba(103,232,249,0.5));
    }
    .agent-page .agent-hero-actions {
      gap: 12px;
    }
    .agent-page .agent-product-shell {
      transform: none !important;
      padding-top: 42px !important;
    }
    .agent-page section:not(.agent-hero):not(.agent-product-shell):not(#agent-contact) {
      scroll-margin-top: 90px;
    }
    @media (max-width: 900px) {
      .agent-page .agent-hero-inner {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .agent-page .agent-hero-copy h1 {
        font-size: clamp(2.25rem, 12vw, 3.45rem) !important;
      }
      .agent-page .agent-hero-copy h1 span {
        white-space: normal;
      }
      .agent-hero-copy::before {
        display: none;
      }
      .agent-hero-eyebrow {
        font-size: 15px;
      }
      .agent-security-badge {
        min-height: 48px;
        padding: 0 15px 0 11px;
        gap: 8px;
      }
      .agent-security-badge strong {
        font-size: 1rem;
      }
      .agent-value-tags {
        margin-bottom: 26px;
      }
      .agent-hero-proof span {
        min-height: 48px;
        padding: 0 18px !important;
        font-size: 1.05rem !important;
      }
      .agent-page .agent-hero-copy p {
        font-size: 1.18rem !important;
      }
    }

    /* Agent OS product narrative */
    .agent-base-intro {
      position: relative;
      padding: 78px 24px 42px;
      background:
        radial-gradient(circle at 12% 20%, rgba(99,102,241,0.12), transparent 28%),
        radial-gradient(circle at 88% 30%, rgba(14,165,233,0.11), transparent 30%),
        linear-gradient(180deg, #f3f6fb, #edf2f8);
      overflow: hidden;
    }
    .agent-base-intro::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99,102,241,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.035) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: linear-gradient(180deg, black, transparent);
      -webkit-mask-image: linear-gradient(180deg, black, transparent);
      pointer-events: none;
    }
    .agent-base-intro-inner {
      position: relative;
      z-index: 1;
      max-width: 1600px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      text-align: center;
    }
    .agent-base-title {
      position: relative;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 0 44px 18px;
    }
    .agent-base-title::before,
    .agent-base-title::after {
      content: '';
      position: absolute;
      top: 52%;
      width: 72px;
      height: 72px;
      border: 1px solid rgba(99,102,241,0.12);
      transform: rotate(45deg);
      pointer-events: none;
    }
    .agent-base-title::before {
      left: -70px;
    }
    .agent-base-title::after {
      right: -70px;
    }
    .agent-base-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 15px;
      color: #4f46e5;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.13em;
    }
    .agent-base-kicker svg {
      width: 15px;
      height: 15px;
    }
    .agent-base-title h2 {
      color: #0f172a;
      font-size: clamp(2rem, 3.8vw, 3.65rem);
      line-height: 1;
      letter-spacing: -0.06em;
      font-weight: 900;
      margin-bottom: 32px;
      white-space: nowrap;
    }
    .agent-base-title h2 span {
      color: #0f172a;
    }
    .agent-base-title h2 .agent-base-os {
      margin-left: 0.12em;
      color: #334155;
      font-size: 0.72em;
      letter-spacing: -0.035em;
    }
    .agent-base-title h2 strong {
      position: relative;
      margin-left: 0.12em;
      color: transparent;
      background: linear-gradient(100deg, #4f46e5 0%, #0ea5e9 58%, #14b8a6 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .agent-base-title h2 strong::after {
      content: '';
      position: absolute;
      left: 3%;
      right: 0;
      bottom: -8px;
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(90deg, #6366f1, #22d3ee, #14b8a6);
      opacity: 0.7;
      transform: skewX(-24deg);
      box-shadow: 0 5px 18px rgba(14,165,233,0.22);
    }
    .agent-base-title-mark {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: min(100%, 480px);
    }
    .agent-base-title-mark span {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(99,102,241,0.35));
    }
    .agent-base-title-mark span:last-child {
      background: linear-gradient(90deg, rgba(20,184,166,0.35), transparent);
    }
    .agent-base-title-mark b {
      color: #64748b;
      font: 800 17px/1 'Outfit', 'Noto Sans SC', sans-serif;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }
    .agent-page .agent-product-shell {
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.12), transparent 30%),
        linear-gradient(180deg, #edf2f8, #eaf0f7);
    }
    .agent-workflow-console {
      min-height: 352px;
      display: grid;
      grid-template-rows: auto auto auto minmax(210px, 1fr);
      gap: 13px;
    }
    .workflow-console-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 2px 2px 4px;
    }
    .workflow-console-head > div:first-child > span {
      display: block;
      margin-bottom: 5px;
      color: #4f46e5;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.13em;
    }
    .workflow-console-head h3 {
      color: #172033;
      font-size: 19px;
      font-weight: 900;
      letter-spacing: -0.025em;
    }
    .workflow-running {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border: 1px solid rgba(16,185,129,0.16);
      border-radius: 999px;
      color: #047857;
      background: rgba(209,250,229,0.7);
      font-size: 10px;
      font-weight: 800;
    }
    .workflow-running b {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
      animation: workflow-status-pulse 2s ease-in-out infinite;
    }
    .workflow-intelligence-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 9px;
    }
    .workflow-intelligence-strip > span {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 5px 10px;
      border: 1px solid rgba(99,102,241,0.1);
      border-radius: 11px;
      color: #64748b;
      background: rgba(255,255,255,0.68);
      box-shadow: 0 8px 20px rgba(48,74,112,0.045);
    }
    .workflow-intelligence-strip svg {
      width: 14px;
      height: 14px;
      padding: 7px;
      box-sizing: content-box;
      border-radius: 8px;
      color: #4f46e5;
      background: #eef2ff;
    }
    .workflow-intelligence-strip b {
      font-size: 10px;
      white-space: nowrap;
    }
    .workflow-intelligence-strip em {
      color: #0f9f85;
      font-size: 9px;
      font-style: normal;
      font-weight: 800;
      white-space: nowrap;
    }
    .workflow-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 0 18px;
      border: 1px solid rgba(15,23,42,0.06);
      border-radius: 15px;
      background: rgba(255,255,255,0.72);
      box-shadow: 0 12px 28px rgba(48,74,112,0.05);
    }
    .workflow-progress span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .workflow-progress span b {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    .workflow-progress span.is-active {
      color: #475569;
    }
    .workflow-progress span.is-active b {
      background: #6366f1;
      box-shadow: 0 0 0 5px rgba(99,102,241,0.1);
    }
    .workflow-progress > svg {
      width: 14px;
      height: 14px;
      color: #cbd5e1;
      flex: 1;
      min-width: 12px;
    }
    .workflow-stage-tabs {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }
    .workflow-stage-tabs button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 46px;
      border: 1px solid transparent;
      border-radius: 11px;
      color: #94a3b8;
      background: rgba(226,232,240,0.62);
      font-family: 'Noto Sans SC', sans-serif;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
    }
    .workflow-stage-tabs button b {
      color: inherit;
      font: 800 9px/1 'Outfit', sans-serif;
      opacity: 0.58;
    }
    .workflow-stage-tabs button:hover {
      color: #4f46e5;
      transform: translateY(-2px);
    }
    .workflow-stage-tabs button.is-active {
      color: #4f46e5;
      border-color: #6366f1;
      background: rgba(238,242,255,0.9);
      box-shadow: inset 0 0 0 1px rgba(99,102,241,0.08);
    }
    #mc-1.active .workflow-stage-tabs button {
      animation: workflow-stage-running 3s ease-in-out infinite;
    }
    #mc-1.active .workflow-stage-tabs button:nth-child(2) { animation-delay: 0.5s; }
    #mc-1.active .workflow-stage-tabs button:nth-child(3) { animation-delay: 1s; }
    #mc-1.active .workflow-stage-tabs button:nth-child(4) { animation-delay: 1.5s; }
    #mc-1.active .workflow-stage-tabs button:nth-child(5) { animation-delay: 2s; }
    .workflow-editor {
      min-height: 220px;
      border: 1px solid rgba(15,23,42,0.07);
      border-radius: 17px;
      background: rgba(248,250,252,0.82);
      overflow: hidden;
    }
    .workflow-designer-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 190px;
      gap: 12px;
      min-height: 260px;
    }
    .workflow-editor-toolbar {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(15,23,42,0.06);
      background: rgba(255,255,255,0.72);
    }
    .workflow-editor-toolbar span {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 8px;
      border-radius: 7px;
      color: #7b8798;
      font-size: 10px;
      font-weight: 700;
    }
    .workflow-editor-toolbar span:hover {
      color: #4f46e5;
      background: #eef2ff;
    }
    .workflow-editor-toolbar svg {
      width: 12px;
      height: 12px;
    }
    .workflow-editor-toolbar b {
      margin-left: auto;
      color: #a5b4c4;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.1em;
    }
    .workflow-editor-canvas {
      position: relative;
      min-height: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image:
        radial-gradient(rgba(99,102,241,0.14) 1px, transparent 1px);
      background-size: 22px 22px;
      overflow: hidden;
    }
    .workflow-editor-canvas::before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      width: 72px;
      background: linear-gradient(90deg, transparent, rgba(99,102,241,0.07), rgba(34,211,238,0.12), transparent);
      transform: skewX(-12deg);
      animation: workflow-canvas-scan 3.2s linear infinite;
      pointer-events: none;
    }
    .workflow-editor-canvas::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 28% 24%, rgba(99,102,241,0.08), transparent 26%),
        radial-gradient(circle at 78% 72%, rgba(20,184,166,0.08), transparent 26%);
      pointer-events: none;
    }
    .workflow-links {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .workflow-links path {
      fill: none;
      stroke: rgba(99,102,241,0.35);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 6 7;
      animation: workflow-link-flow 1.1s linear infinite;
    }
    .workflow-signal {
      position: absolute;
      z-index: 3;
      width: 7px;
      height: 7px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: #22d3ee;
      box-shadow: 0 0 0 4px rgba(34,211,238,0.13), 0 0 15px rgba(14,165,233,0.8);
      opacity: 0;
      pointer-events: none;
    }
    .signal-one {
      animation: workflow-signal-one 2.8s ease-in-out infinite;
    }
    .signal-two {
      animation: workflow-signal-two 2.8s 0.38s ease-in-out infinite;
    }
    .signal-three {
      background: #34d399;
      box-shadow: 0 0 0 4px rgba(52,211,153,0.13), 0 0 15px rgba(16,185,129,0.8);
      animation: workflow-signal-three 2.8s 0.38s ease-in-out infinite;
    }
    .signal-four {
      animation: workflow-signal-four 2.8s 0.82s ease-in-out infinite;
    }
    .signal-five {
      background: #34d399;
      box-shadow: 0 0 0 4px rgba(52,211,153,0.13), 0 0 15px rgba(16,185,129,0.8);
      animation: workflow-signal-five 2.8s 0.82s ease-in-out infinite;
    }
    .signal-six {
      animation: workflow-signal-six 2.8s 1.3s ease-in-out infinite;
    }
    .workflow-node {
      position: absolute;
      z-index: 2;
      min-width: 106px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border: 1px solid rgba(99,102,241,0.14);
      border-radius: 13px;
      background: rgba(255,255,255,0.94);
      box-shadow: 0 12px 28px rgba(48,74,112,0.11);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #mc-1.active .workflow-node {
      animation: workflow-node-smart 2.8s ease-in-out infinite;
    }
    #mc-1.active .workflow-node.node-router { animation-delay: 0.38s; }
    #mc-1.active .workflow-node.node-knowledge,
    #mc-1.active .workflow-node.node-data { animation-delay: 0.78s; }
    #mc-1.active .workflow-node.node-review { animation-delay: 1.25s; }
    #mc-1.active .workflow-node.node-output { animation-delay: 1.7s; }
    .workflow-node::after {
      content: '';
      position: absolute;
      top: 7px;
      right: 7px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #cbd5e1;
    }
    #mc-1.active .workflow-node::after {
      animation: workflow-node-status 2.8s ease-in-out infinite;
    }
    #mc-1.active .workflow-node.node-router::after { animation-delay: 0.38s; }
    #mc-1.active .workflow-node.node-knowledge::after,
    #mc-1.active .workflow-node.node-data::after { animation-delay: 0.78s; }
    #mc-1.active .workflow-node.node-review::after { animation-delay: 1.25s; }
    #mc-1.active .workflow-node.node-output::after { animation-delay: 1.7s; }
    .workflow-node:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 34px rgba(48,74,112,0.15);
    }
    .workflow-node.is-selected {
      outline: 3px solid rgba(99,102,241,0.1);
      outline-offset: 2px;
    }
    .workflow-node > svg {
      width: 30px;
      height: 30px;
      padding: 7px;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .workflow-node span {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .workflow-node b {
      color: #334155;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }
    .workflow-node em {
      color: #94a3b8;
      font-size: 8px;
      font-style: normal;
      white-space: nowrap;
    }
    .workflow-node.node-start { left: 0.8%; top: 42%; }
    .workflow-node.node-router { left: 20%; top: 42%; }
    .workflow-node.node-knowledge { left: 40%; top: 8%; }
    .workflow-node.node-data { left: 40%; top: 62%; }
    .workflow-node.node-review { left: 61.5%; top: 42%; }
    .workflow-node.node-output { right: 0.8%; top: 42%; }
    .workflow-node.node-start > svg {
      background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    }
    .workflow-node.node-knowledge > svg {
      background: linear-gradient(135deg, #0284c7, #06b6d4);
    }
    .workflow-node.node-data > svg {
      background: linear-gradient(135deg, #2563eb, #4f46e5);
    }
    .workflow-node.node-review > svg {
      background: linear-gradient(135deg, #f59e0b, #f97316);
    }
    .workflow-node.node-output > svg {
      background: linear-gradient(135deg, #10b981, #14b8a6);
    }
    .workflow-branch-label {
      position: absolute;
      z-index: 2;
      left: 31.5%;
      padding: 3px 6px;
      border: 1px solid rgba(99,102,241,0.12);
      border-radius: 6px;
      color: #6366f1;
      background: rgba(255,255,255,0.86);
      font-size: 7px;
      font-weight: 800;
      pointer-events: none;
    }
    .workflow-branch-label.branch-top { top: 23%; }
    .workflow-branch-label.branch-bottom { top: 72%; }
    .workflow-canvas-tip {
      position: absolute;
      left: 12px;
      bottom: 10px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #a0aec0;
      font-size: 8px;
    }
    .workflow-canvas-tip svg {
      width: 11px;
      height: 11px;
    }
    .workflow-inspector {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 16px;
      border: 1px solid rgba(15,23,42,0.07);
      border-radius: 17px;
      background:
        radial-gradient(circle at 100% 0%, rgba(99,102,241,0.10), transparent 32%),
        rgba(255,255,255,0.78);
      box-shadow: 0 14px 32px rgba(48,74,112,0.07);
    }
    .workflow-inspector-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 11px;
      border-bottom: 1px solid rgba(15,23,42,0.06);
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
    }
    .workflow-inspector-head svg {
      width: 13px;
      height: 13px;
    }
    .workflow-inspector-type {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 14px 0;
    }
    .workflow-inspector-type > svg {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      box-sizing: border-box;
    }
    .workflow-inspector-type div {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .workflow-inspector-type b {
      color: #334155;
      font-size: 11px;
    }
    .workflow-inspector-type em {
      color: #94a3b8;
      font: 700 8px/1 'Outfit', sans-serif;
      font-style: normal;
    }
    .workflow-inspector label {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 9px;
      color: #94a3b8;
      font-size: 8px;
    }
    .workflow-inspector label strong {
      padding: 7px 8px;
      border: 1px solid rgba(15,23,42,0.06);
      border-radius: 8px;
      color: #64748b;
      background: rgba(248,250,252,0.9);
      font-size: 9px;
    }
    .workflow-inspector-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(15,23,42,0.06);
      color: #10b981;
      font-size: 8px;
      font-weight: 800;
    }
    .workflow-inspector-foot span {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .workflow-inspector-foot span b {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
    }
    .workflow-inspector-foot > svg {
      width: 12px;
      height: 12px;
    }
    @keyframes workflow-link-flow {
      to { stroke-dashoffset: -13; }
    }
    @keyframes workflow-status-pulse {
      50% { opacity: 0.48; transform: scale(0.82); }
    }
    @keyframes workflow-stage-running {
      0%, 15% {
        color: #4f46e5;
        border-color: rgba(99,102,241,0.72);
        background: #eef2ff;
        box-shadow: 0 7px 18px rgba(99,102,241,0.12);
        transform: translateY(-2px);
      }
      24%, 100% {
        color: #94a3b8;
        border-color: transparent;
        background: rgba(226,232,240,0.62);
        box-shadow: none;
        transform: none;
      }
    }
    @keyframes workflow-canvas-scan {
      from { left: -16%; }
      to { left: 108%; }
    }
    @keyframes workflow-node-smart {
      0%, 10% {
        border-color: rgba(99,102,241,0.14);
        box-shadow: 0 12px 28px rgba(48,74,112,0.11);
        transform: none;
      }
      18%, 28% {
        border-color: rgba(99,102,241,0.5);
        box-shadow: 0 16px 34px rgba(99,102,241,0.2), 0 0 0 4px rgba(99,102,241,0.07);
        transform: translateY(-4px);
      }
      38%, 100% {
        border-color: rgba(99,102,241,0.14);
        box-shadow: 0 12px 28px rgba(48,74,112,0.11);
        transform: none;
      }
    }
    @keyframes workflow-node-status {
      0%, 12% { background: #cbd5e1; box-shadow: none; }
      18%, 30% { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.15), 0 0 10px rgba(34,197,94,0.5); }
      40%, 100% { background: #cbd5e1; box-shadow: none; }
    }
    @keyframes workflow-signal-one {
      0%, 8% { left: 14%; top: 50%; opacity: 0; }
      12% { opacity: 1; }
      35% { left: 22%; top: 50%; opacity: 1; }
      40%, 100% { left: 22%; top: 50%; opacity: 0; }
    }
    @keyframes workflow-signal-two {
      0%, 8% { left: 35%; top: 50%; opacity: 0; }
      12% { opacity: 1; }
      35% { left: 45%; top: 24%; opacity: 1; }
      40%, 100% { left: 45%; top: 24%; opacity: 0; }
    }
    @keyframes workflow-signal-three {
      0%, 8% { left: 35%; top: 50%; opacity: 0; }
      12% { opacity: 1; }
      35% { left: 45%; top: 76%; opacity: 1; }
      40%, 100% { left: 45%; top: 76%; opacity: 0; }
    }
    @keyframes workflow-signal-four {
      0%, 8% { left: 57%; top: 24%; opacity: 0; }
      12% { opacity: 1; }
      35% { left: 67%; top: 50%; opacity: 1; }
      40%, 100% { left: 67%; top: 50%; opacity: 0; }
    }
    @keyframes workflow-signal-five {
      0%, 8% { left: 57%; top: 76%; opacity: 0; }
      12% { opacity: 1; }
      35% { left: 67%; top: 50%; opacity: 1; }
      40%, 100% { left: 67%; top: 50%; opacity: 0; }
    }
    @keyframes workflow-signal-six {
      0%, 8% { left: 79%; top: 50%; opacity: 0; }
      12% { opacity: 1; }
      35% { left: 87%; top: 50%; opacity: 1; }
      40%, 100% { left: 87%; top: 50%; opacity: 0; }
    }
    @media (max-width: 900px) {
      .workflow-designer-layout {
        grid-template-columns: 1fr;
      }
      .workflow-inspector {
        display: none;
      }
    }
    @media (max-width: 640px) {
      .agent-workflow-console {
        min-height: 0;
        gap: 12px;
      }
      .workflow-console-head {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
      }
      .workflow-console-head h3 {
        font-size: 17px;
      }
      .workflow-running {
        flex-shrink: 0;
      }
      .workflow-intelligence-strip {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .workflow-intelligence-strip > span {
        grid-template-columns: 28px 1fr auto;
        min-height: 44px;
      }
      .workflow-intelligence-strip b,
      .workflow-intelligence-strip em {
        white-space: normal;
      }
      .workflow-stage-tabs {
        display: flex;
        grid-template-columns: none;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .workflow-stage-tabs::-webkit-scrollbar {
        display: none;
      }
      .workflow-stage-tabs button {
        flex: 0 0 auto;
        min-width: 78px;
        min-height: 42px;
        padding: 0 12px;
      }
      .workflow-editor-toolbar {
        gap: 4px;
        padding: 0 10px;
        overflow-x: auto;
      }
      .workflow-editor-toolbar b {
        display: none;
      }
      .workflow-editor-canvas {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        min-height: 0;
        padding: 14px;
        overflow: visible;
      }
      .workflow-editor-canvas::before,
      .workflow-links,
      .workflow-signal,
      .workflow-branch-label,
      .workflow-canvas-tip {
        display: none !important;
      }
      .workflow-node,
      .workflow-node.node-start,
      .workflow-node.node-router,
      .workflow-node.node-knowledge,
      .workflow-node.node-data,
      .workflow-node.node-review,
      .workflow-node.node-output {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100%;
        min-width: 0;
        gap: 10px;
        padding: 12px 12px;
      }
      .workflow-node > svg {
        width: 32px;
        height: 32px;
        padding: 7px;
      }
      .workflow-node b {
        font-size: 13px;
        white-space: normal;
      }
      .workflow-node em {
        display: block;
        font-size: 11px;
        white-space: normal;
      }
      #mc-1.active .workflow-node {
        animation: none;
      }
    }
    .workflow-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .workflow-empty-state > svg {
      width: 42px;
      height: 42px;
      padding: 10px;
      border-radius: 14px;
      color: #6366f1;
      background: rgba(238,242,255,0.9);
      box-sizing: border-box;
      margin-bottom: 12px;
    }
    .workflow-empty-state strong {
      color: #64748b;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .workflow-empty-state span {
      color: #a0aec0;
      font-size: 11px;
    }
    .agent-knowledge-panel {
      display: grid;
      grid-template-columns: 0.78fr 1.22fr;
      gap: 18px 30px;
      min-height: 500px;
      align-items: start;
    }
    .knowledge-sidebar h3 {
      color: #172033;
      font-size: clamp(1.5rem, 2.4vw, 2.1rem);
      line-height: 1.2;
      font-weight: 900;
      margin: 10px 0 14px;
    }
    .knowledge-sidebar > p {
      color: #708096;
      font-size: 14px;
      line-height: 1.8;
    }
    .knowledge-sources {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }
    .knowledge-sources span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      color: #475569;
      border: 1px solid rgba(14,165,233,0.12);
      border-radius: 10px;
      background: rgba(239,248,255,0.82);
      font-size: 11px;
      font-weight: 700;
    }
    .knowledge-sources svg {
      width: 13px;
      height: 13px;
      color: #0ea5e9;
    }
    .knowledge-console {
      padding: 18px;
      border: 1px solid rgba(14,165,233,0.13);
      border-radius: 22px;
      background:
        radial-gradient(circle at 90% 0%, rgba(34,211,238,0.11), transparent 34%),
        rgba(255,255,255,0.78);
      box-shadow: 0 24px 60px rgba(51,65,85,0.10);
    }
    .knowledge-search {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 54px;
      padding: 0 17px;
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 13px;
      color: #94a3b8;
      background: #fff;
      font-size: 15px;
    }
    .knowledge-search svg {
      width: 18px;
      height: 18px;
      color: #0ea5e9;
    }
    .knowledge-search span {
      flex: 1;
    }
    .knowledge-search b {
      padding: 5px 9px;
      border-radius: 6px;
      color: #0369a1;
      background: #e0f2fe;
      font: 800 11px/1 'Outfit', sans-serif;
      letter-spacing: 0.08em;
    }
    .knowledge-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .knowledge-grid > div {
      position: relative;
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 2px 10px;
      align-items: center;
      min-height: 98px;
      padding: 17px;
      border: 1px solid rgba(15,23,42,0.06);
      border-radius: 14px;
      background: rgba(248,250,252,0.9);
      transition: transform 0.2s, border-color 0.2s;
    }
    .knowledge-grid > div:hover {
      transform: translateY(-2px);
      border-color: rgba(14,165,233,0.24);
    }
    .knowledge-grid svg {
      grid-row: 1 / span 2;
      width: 42px;
      height: 42px;
      padding: 10px;
      color: #0284c7;
      border-radius: 11px;
      background: #e0f2fe;
      box-sizing: border-box;
    }
    .knowledge-grid strong {
      color: #243247;
      font-size: 16px;
      font-weight: 800;
    }
    .knowledge-grid span {
      color: #94a3b8;
      font-size: 13px;
    }
    .knowledge-runtime {
      grid-column: 1 / -1;
      padding: 16px;
      border: 1px solid rgba(14,165,233,0.13);
      border-radius: 20px;
      background:
        radial-gradient(circle at 0% 100%, rgba(99,102,241,0.08), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(241,248,253,0.82));
      box-shadow: 0 16px 38px rgba(48,74,112,0.07);
    }
    .knowledge-runtime-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 13px;
    }
    .knowledge-runtime-head > div {
      display: flex;
      align-items: center;
      gap: 11px;
    }
    .knowledge-runtime-head span {
      color: #4f46e5;
      font: 800 11px/1 'Outfit', sans-serif;
      letter-spacing: 0.13em;
    }
    .knowledge-runtime-head strong {
      color: #243247;
      font-size: 16px;
    }
    .knowledge-runtime-head em {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #0f766e;
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
    }
    .knowledge-runtime-head em i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 4px rgba(16,185,129,0.12);
      animation: knowledge-runtime-pulse 1.6s ease-in-out infinite;
    }
    .knowledge-runtime-body {
      display: grid;
      grid-template-columns: 1.32fr 0.88fr;
      gap: 13px;
    }
    .knowledge-ingest-flow {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
      align-items: center;
      gap: 5px;
      min-height: 126px;
      padding: 13px;
      overflow: hidden;
      border: 1px solid rgba(99,102,241,0.09);
      border-radius: 15px;
      background:
        linear-gradient(rgba(99,102,241,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.035) 1px, transparent 1px),
        rgba(248,250,252,0.82);
      background-size: 20px 20px, 20px 20px, auto;
    }
    .knowledge-ingest-flow::before {
      content: '';
      position: absolute;
      left: -18%;
      top: 0;
      width: 88px;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.1), transparent);
      transform: skewX(-14deg);
      animation: knowledge-flow-scan 3.4s linear infinite;
    }
    .knowledge-ingest-flow > article {
      position: relative;
      z-index: 1;
      display: flex;
      min-width: 0;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      text-align: center;
    }
    .knowledge-ingest-flow > article > svg {
      width: 38px;
      height: 38px;
      padding: 10px;
      box-sizing: border-box;
      border: 1px solid rgba(14,165,233,0.12);
      border-radius: 11px;
      color: #0284c7;
      background: linear-gradient(135deg, #e0f2fe, #eef2ff);
      box-shadow: 0 7px 16px rgba(14,165,233,0.09);
      animation: knowledge-step-active 3.2s ease-in-out infinite;
    }
    .knowledge-ingest-flow > article:nth-of-type(2) > svg { animation-delay: 0.55s; }
    .knowledge-ingest-flow > article:nth-of-type(3) > svg { animation-delay: 1.1s; }
    .knowledge-ingest-flow > article:nth-of-type(4) > svg { animation-delay: 1.65s; }
    .knowledge-ingest-flow article span,
    .knowledge-ingest-flow article b,
    .knowledge-ingest-flow article small {
      display: block;
    }
    .knowledge-ingest-flow article b {
      color: #334155;
      font-size: 13px;
      white-space: nowrap;
    }
    .knowledge-ingest-flow article small {
      overflow: hidden;
      margin-top: 4px;
      color: #94a3b8;
      font-size: 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .knowledge-ingest-flow > svg {
      position: relative;
      z-index: 1;
      width: 13px;
      height: 13px;
      color: #a5b4fc;
      animation: knowledge-arrow-flow 1.2s ease-in-out infinite;
    }
    .knowledge-rag-result {
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(14,165,233,0.1);
      border-radius: 15px;
      background: rgba(255,255,255,0.82);
    }
    .knowledge-rag-query {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      color: #475569;
      font-size: 11px;
      font-weight: 800;
    }
    .knowledge-rag-query > svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: #4f46e5;
    }
    .knowledge-rag-query > span {
      overflow: hidden;
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .knowledge-rag-query b {
      padding: 4px 6px;
      border-radius: 5px;
      color: #0369a1;
      background: #e0f2fe;
      font: 800 9px/1 'Outfit', sans-serif;
    }
    .knowledge-rag-answer {
      display: flex;
      gap: 8px;
      margin: 10px 0;
      padding: 9px;
      border-left: 2px solid #6366f1;
      border-radius: 0 9px 9px 0;
      color: #64748b;
      background: #f8fafc;
    }
    .knowledge-rag-answer svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
      color: #6366f1;
    }
    .knowledge-rag-answer p {
      font-size: 11px;
      line-height: 1.55;
    }
    .knowledge-citations {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .knowledge-citations span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 7px;
      border-radius: 7px;
      color: #0f766e;
      background: #f0fdfa;
      font-size: 10px;
      font-weight: 800;
    }
    .knowledge-citations svg {
      width: 11px;
      height: 11px;
    }
    @keyframes knowledge-runtime-pulse {
      50% { opacity: 0.48; transform: scale(0.8); }
    }
    @keyframes knowledge-flow-scan {
      to { left: 110%; }
    }
    @keyframes knowledge-step-active {
      0%, 10%, 38%, 100% { transform: none; box-shadow: 0 7px 16px rgba(14,165,233,0.09); }
      18%, 30% { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(99,102,241,0.2), 0 0 0 4px rgba(99,102,241,0.07); }
    }
    @keyframes knowledge-arrow-flow {
      50% { color: #0ea5e9; transform: translateX(3px); }
    }
    @media (max-width: 900px) {
      .knowledge-runtime-body {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .knowledge-runtime-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }
      .knowledge-ingest-flow {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 14px 8px;
      }
      .knowledge-ingest-flow > svg {
        display: none;
      }
    }
    .agent-skill-catalog {
      min-height: 352px;
      padding: 20px;
      border: 1px solid rgba(14,165,233,0.13);
      border-radius: 24px;
      background:
        radial-gradient(circle at 88% 0%, rgba(99,102,241,0.11), transparent 32%),
        rgba(255,255,255,0.76);
      box-shadow: 0 20px 52px rgba(51,65,85,0.09);
    }
    .agent-skill-catalog-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 18px;
      padding: 2px 4px;
    }
    .agent-skill-catalog-head .workflow-kicker {
      margin-bottom: 7px;
    }
    .agent-skill-catalog-head h3 {
      color: #172033;
      font-size: 20px;
      font-weight: 900;
    }
    .agent-skill-catalog-head > span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      color: #047857;
      background: rgba(209,250,229,0.8);
      font-size: 11px;
      font-weight: 800;
    }
    .agent-skill-catalog-head > span svg {
      width: 13px;
      height: 13px;
    }
    .agent-skill-catalog-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 11px;
    }
    .agent-skill-catalog-grid article {
      position: relative;
      min-height: 126px;
      padding: 17px 14px;
      border: 1px solid rgba(15,23,42,0.07);
      border-radius: 16px;
      background: rgba(248,250,252,0.9);
      overflow: hidden;
      transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
    }
    .agent-skill-catalog-grid article::after {
      content: '';
      position: absolute;
      right: -22px;
      bottom: -26px;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: rgba(14,165,233,0.06);
    }
    .agent-skill-catalog-grid article:hover {
      transform: translateY(-3px);
      border-color: rgba(14,165,233,0.24);
      box-shadow: 0 16px 32px rgba(48,74,112,0.09);
    }
    .agent-skill-catalog-grid article > svg {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 11px;
      color: #0284c7;
      background: linear-gradient(135deg, #e0f2fe, #e0e7ff);
      box-sizing: border-box;
      margin-bottom: 12px;
    }
    .agent-skill-catalog-grid strong {
      position: relative;
      z-index: 1;
      display: block;
      margin-bottom: 5px;
      color: #243247;
      font-size: 14px;
      font-weight: 900;
    }
    .agent-skill-catalog-grid article > span {
      position: relative;
      z-index: 1;
      display: block;
      color: #94a3b8;
      font-size: 10px;
      line-height: 1.45;
    }
    .agent-runtime-section {
      position: relative;
      padding: 86px 24px 98px;
      background:
        radial-gradient(circle at 12% 12%, rgba(14,165,233,0.11), transparent 29%),
        radial-gradient(circle at 88% 82%, rgba(99,102,241,0.11), transparent 31%),
        linear-gradient(180deg, #eaf0f7, #f3f6fb);
      overflow: hidden;
    }
    .agent-runtime-inner {
      max-width: 1600px;
      margin: 0 auto;
    }
    .agent-runtime-heading {
      display: grid;
      grid-template-columns: 1fr 0.82fr;
      gap: 50px;
      align-items: end;
      margin-bottom: 40px;
    }
    .agent-runtime-heading span {
      display: block;
      margin-bottom: 11px;
      color: #4f46e5;
      font: 800 11px/1 'Outfit', sans-serif;
      letter-spacing: 0.14em;
    }
    .agent-runtime-heading h2 {
      color: #0f172a;
      font-size: clamp(2rem, 3.4vw, 3rem);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.04em;
    }
    .agent-runtime-heading p {
      color: #708096;
      font-size: 14px;
      line-height: 1.8;
    }
    .agent-runtime-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .agent-runtime-grid article {
      position: relative;
      min-height: 210px;
      padding: 24px 21px;
      border: 1px solid rgba(255,255,255,0.9);
      border-radius: 22px;
      background: rgba(255,255,255,0.68);
      box-shadow: 0 18px 46px rgba(51,65,85,0.07), inset 0 1px 0 #fff;
      overflow: hidden;
      transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s;
    }
    .agent-runtime-grid article:hover {
      transform: translateY(-5px);
      border-color: rgba(99,102,241,0.2);
      box-shadow: 0 26px 58px rgba(51,65,85,0.11), inset 0 1px 0 #fff;
    }
    .agent-runtime-grid article > svg {
      width: 42px;
      height: 42px;
      padding: 10px;
      color: #fff;
      border-radius: 14px;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-sizing: border-box;
      box-shadow: 0 10px 24px rgba(99,102,241,0.2);
    }
    .agent-runtime-grid article > b {
      position: absolute;
      top: 22px;
      right: 20px;
      color: rgba(99,102,241,0.16);
      font: 900 28px/1 'Outfit', sans-serif;
    }
    .agent-runtime-grid h3 {
      margin: 24px 0 9px;
      color: #172033;
      font-size: 16px;
      font-weight: 900;
    }
    .agent-runtime-grid p {
      color: #7b8798;
      font-size: 12px;
      line-height: 1.72;
    }
    @media (max-width: 900px) {
      .agent-runtime-heading {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .agent-runtime-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .agent-knowledge-panel {
        grid-template-columns: 1fr;
      }
      .agent-skill-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      .agent-base-intro {
        padding: 58px 20px 30px;
      }
      .agent-base-title h2 {
        font-size: 2rem;
        white-space: normal;
      }
      .agent-base-title h2 .agent-base-os {
        display: block;
        margin: 0.55em 0 0;
        font-size: 0.62em;
      }
      .agent-base-title {
        padding-inline: 0;
      }
      .agent-base-title::before,
      .agent-base-title::after {
        display: none;
      }
      .agent-runtime-section {
        padding: 62px 20px 70px;
      }
      .agent-runtime-grid {
        grid-template-columns: 1fr;
      }
      .agent-runtime-grid article {
        min-height: auto;
      }
      .knowledge-grid {
        grid-template-columns: 1fr;
      }
      .workflow-progress {
        overflow-x: auto;
      }
      .workflow-progress > svg {
        flex: 0 0 14px;
      }
      .workflow-stage-tabs {
        grid-template-columns: repeat(5, minmax(74px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
      }
      .agent-skill-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .agent-skill-catalog-head {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    /* Agent studio as a desktop app screen */
    .agent-page .agent-shell-inner {
      position: relative;
      max-width: 1360px;
      padding: 24px;
      border-radius: 38px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04)),
        linear-gradient(180deg, rgba(15,23,42,0.92), rgba(2,6,23,0.96));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow:
        0 42px 110px rgba(2,6,23,0.42),
        inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .agent-page .agent-shell-inner::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -64px;
      width: 280px;
      height: 64px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(15,23,42,0.34), rgba(15,23,42,0.04));
      clip-path: polygon(28% 0, 72% 0, 88% 100%, 12% 100%);
      opacity: 0.78;
      pointer-events: none;
    }
    .agent-page .agent-shell-inner::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -74px;
      width: 460px;
      height: 22px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(2,6,23,0.22);
      filter: blur(10px);
      pointer-events: none;
    }
    .agent-page .agent-studio-frame {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      grid-template-rows: 64px minmax(520px, auto);
      grid-template-areas:
        "bar bar"
        "tabs content";
      border-radius: 26px;
      overflow: hidden;
      border: 1px solid rgba(148,163,184,0.32);
      background: #f8fbff;
      box-shadow:
        0 28px 76px rgba(2,6,23,0.26),
        inset 0 1px 0 rgba(255,255,255,0.9);
    }
    .agent-page .agent-studio-frame .mac-bar {
      grid-area: bar;
      height: 64px;
      padding: 0 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,244,250,0.92));
      border-bottom: 1px solid rgba(15,23,42,0.08);
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.72);
    }
    .agent-page .agent-studio-frame .mac-url {
      max-width: none;
      height: 36px;
      display: flex;
      align-items: center;
      margin-left: 18px;
      padding: 0 22px;
      border-radius: 999px;
      background: rgba(15,23,42,0.055);
      color: #667085;
      font-weight: 800;
      font-size: 14px !important;
    }
    .agent-page .agent-tabbar {
      grid-area: tabs;
      flex-direction: column;
      gap: 11px;
      padding: 24px 18px;
      border-right: 1px solid rgba(15,23,42,0.08);
      border-bottom: 0;
      background:
        radial-gradient(circle at 20% 8%, rgba(14,165,233,0.10), transparent 28%),
        linear-gradient(180deg, rgba(248,251,255,0.96), rgba(235,244,251,0.92));
      overflow: visible;
    }
    .agent-page .agent-tabbar .mac-tab {
      width: 100%;
      min-height: 54px;
      justify-content: flex-start;
      padding: 0 18px;
      border-radius: 16px;
      border: 1px solid transparent;
      background: transparent;
      color: #6b7b90;
      font-size: 15px !important;
      font-weight: 900 !important;
    }
    .agent-page .agent-tabbar .mac-tab.active {
      color: #0f172a !important;
      border-color: rgba(14,165,233,0.18) !important;
      background: rgba(255,255,255,0.82) !important;
      box-shadow: 0 12px 28px rgba(48,74,112,0.08);
    }
    .agent-page .agent-tabbar .mac-tab::before {
      content: '';
      width: 8px;
      height: 8px;
      margin-right: 12px;
      border-radius: 50%;
      background: rgba(14,165,233,0.26);
      box-shadow: 0 0 0 4px rgba(14,165,233,0.07);
    }
    .agent-page .agent-tabbar .mac-tab.active::before {
      background: #0ea5e9;
      box-shadow: 0 0 0 4px rgba(14,165,233,0.14);
    }
    .agent-page .agent-tab-content {
      grid-area: content;
      min-height: 520px;
      padding: 38px;
      background:
        linear-gradient(rgba(14,165,233,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.035) 1px, transparent 1px),
        radial-gradient(circle at 8% 10%, rgba(45,212,191,0.12), transparent 26%),
        linear-gradient(135deg, #ffffff, #f4f8fc);
      background-size: 26px 26px, 26px 26px, auto, auto;
    }
    .agent-page .agent-chat-visual,
    .agent-page .agent-feature-grid div,
    .agent-page .agent-workflow-board,
    .agent-page .agent-skill-market-panel,
    .agent-page .agent-squad-panel {
      border-color: rgba(14,165,233,0.12);
      background: rgba(255,255,255,0.76);
      box-shadow: 0 14px 34px rgba(48,74,112,0.08);
    }
    .agent-page .agent-panel-grid {
      grid-template-columns: 1.05fr 0.95fr;
      gap: 30px;
      min-height: 430px;
    }
    @media (max-width: 900px) {
      .agent-page .agent-panel-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: 0;
      }
      .agent-live-chat,
      .agent-live-output {
        min-height: 0;
      }
      .agent-live-chat {
        min-height: 340px;
      }
      .live-panel-head {
        min-height: 56px;
        padding: 0 16px;
      }
      .live-chat-body,
      .generative-ui-stage {
        padding-left: 16px;
        padding-right: 16px;
      }
      .live-chat-welcome {
        font-size: 13px;
        line-height: 1.55;
      }
      .generated-summary {
        align-items: flex-start;
      }
      .generated-summary strong {
        font-size: 14px;
        line-height: 1.45;
      }
      .generated-metrics article {
        min-height: 68px;
        padding: 12px 10px;
      }
      .generated-metrics small {
        font-size: 11px;
        white-space: nowrap;
      }
      .generated-metrics strong {
        font-size: 17px;
        white-space: nowrap;
      }
    }
    @media (max-width: 640px) {
      .agent-page .agent-panel-grid {
        grid-template-columns: 1fr !important;
      }
      .generative-ui-bar {
        flex-wrap: wrap;
        gap: 8px;
      }
      .generated-metrics {
        grid-template-columns: 1fr;
      }
      .generated-metrics article {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 52px;
        padding: 12px 14px;
      }
      .generated-metrics strong {
        margin-top: 0;
      }
    }
    .agent-page .agent-chat-visual {
      min-height: 430px;
      border-radius: 24px;
      padding: 36px;
    }
    .agent-page .chat-line {
      padding: 14px 18px;
      font-size: 15px;
      border-radius: 16px;
    }
    .agent-page .agent-feature-grid {
      gap: 18px;
    }
    .agent-page .agent-feature-grid div {
      min-height: 128px;
      border-radius: 22px;
      padding: 28px;
      font-size: 16px;
    }
    .agent-page .agent-feature-grid svg {
      width: 24px;
      height: 24px;
    }
    .agent-live-chat,
    .agent-live-output {
      min-height: 590px;
      overflow: hidden;
      border: 1px solid rgba(14,165,233,0.13);
      border-radius: 24px;
      background: rgba(255,255,255,0.84);
      box-shadow: 0 14px 34px rgba(48,74,112,0.08);
    }
    .agent-live-chat {
      display: flex;
      flex-direction: column;
    }
    .live-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 66px;
      padding: 0 22px;
      border-bottom: 1px solid rgba(148,163,184,0.15);
      background: rgba(248,250,252,0.78);
    }
    .live-panel-head > div,
    .live-panel-head > span {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .live-panel-head b {
      color: #172033;
      font-size: 15px;
    }
    .live-avatar {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 10px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 8px 18px rgba(99,102,241,0.23);
    }
    .live-avatar.output {
      background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    }
    .live-avatar svg {
      width: 17px;
      height: 17px;
    }
    .live-online,
    .live-running {
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
    }
    .live-online i,
    .live-running i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
      animation: live-status-pulse 1.4s ease-in-out infinite;
    }
    .live-running i {
      background: #0ea5e9;
      box-shadow: 0 0 0 4px rgba(14,165,233,0.12);
    }
    .live-chat-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 13px;
      padding: 22px;
      background:
        radial-gradient(circle at 100% 0%, rgba(34,211,238,0.08), transparent 36%),
        linear-gradient(180deg, #fff, #f8fbfe);
    }
    .live-chat-welcome {
      align-self: center;
      max-width: 88%;
      margin-bottom: 6px;
      color: #94a3b8;
      font-size: 11px;
      line-height: 1.55;
      text-align: center;
    }
    .live-message {
      max-width: 88%;
      padding: 12px 15px;
      border-radius: 15px;
      font-size: 13px;
      line-height: 1.5;
      opacity: 0;
      transform: translateY(8px) scale(0.98);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .live-message.is-visible {
      opacity: 1;
      transform: none;
    }
    .live-message.human {
      align-self: flex-end;
      color: #fff;
      border-bottom-right-radius: 4px;
      background: linear-gradient(135deg, #4f46e5, #0ea5e9);
      box-shadow: 0 9px 20px rgba(37,99,235,0.17);
    }
    .live-message.ai {
      align-self: flex-start;
      color: #334155;
      border: 1px solid rgba(148,163,184,0.2);
      border-bottom-left-radius: 4px;
      background: #fff;
      box-shadow: 0 9px 20px rgba(48,74,112,0.08);
    }
    .live-chat-input {
      display: flex;
      align-items: center;
      min-height: 58px;
      margin: 0 18px 18px;
      padding: 0 7px 0 17px;
      border: 1px solid rgba(99,102,241,0.19);
      border-radius: 15px;
      color: #475569;
      background: #fff;
      box-shadow: 0 8px 24px rgba(48,74,112,0.08);
      font-size: 13px;
    }
    .live-chat-input > span {
      overflow: hidden;
      white-space: nowrap;
    }
    .typing-cursor {
      width: 1px;
      height: 17px;
      margin-left: 2px;
      background: #6366f1;
      animation: live-cursor 0.7s steps(1) infinite;
    }
    .live-chat-input button {
      display: grid;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      margin-left: auto;
      place-items: center;
      border: 0;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 7px 16px rgba(99,102,241,0.22);
    }
    .live-chat-input button svg {
      width: 17px;
      height: 17px;
    }
    .agent-live-output {
      padding-bottom: 18px;
    }
    .generative-ui-stage {
      display: flex;
      flex-direction: column;
      gap: 11px;
      padding: 0 18px;
    }
    .generative-ui-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #6366f1;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.1em;
    }
    .generative-ui-bar > span,
    .generative-ui-bar > b {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .generative-ui-bar svg {
      width: 13px;
      height: 13px;
    }
    .generative-ui-bar > b {
      color: #0f9f85;
      font-family: 'Noto Sans SC', sans-serif;
      font-size: 9px;
      letter-spacing: 0;
    }
    .generative-ui-bar > b i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 4px rgba(16,185,129,0.11);
      animation: live-status-pulse 1.4s ease-in-out infinite;
    }
    [data-generated-block] {
      opacity: 0.34;
      transform: translateY(7px);
      filter: saturate(0.35);
      transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.16,1,0.3,1), filter 0.38s ease, box-shadow 0.38s ease;
    }
    [data-generated-block].is-generated {
      opacity: 1;
      transform: none;
      filter: none;
    }
    .generated-summary {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 64px;
      padding: 11px 14px;
      border: 1px solid rgba(99,102,241,0.13);
      border-radius: 15px;
      background: linear-gradient(135deg, #eef2ff, #ecfeff);
    }
    .generated-summary > span {
      display: grid;
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 8px 18px rgba(99,102,241,0.2);
    }
    .generated-summary svg {
      width: 18px;
      height: 18px;
    }
    .generated-summary small,
    .generated-summary strong {
      display: block;
    }
    .generated-summary small {
      margin-bottom: 5px;
      color: #64748b;
      font-size: 9px;
    }
    .generated-summary strong {
      color: #172033;
      font-size: 14px;
    }
    .generated-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 9px;
    }
    .generated-metrics article {
      min-height: 74px;
      padding: 13px;
      border: 1px solid rgba(14,165,233,0.11);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(48,74,112,0.055);
    }
    .generated-metrics small,
    .generated-metrics strong {
      display: block;
    }
    .generated-metrics small {
      color: #94a3b8;
      font-size: 9px;
    }
    .generated-metrics strong {
      margin-top: 9px;
      color: #2563a8;
      font: 900 18px/1 'Outfit', 'Noto Sans SC', sans-serif;
    }
    .generated-action-list {
      min-height: 148px;
      padding: 13px;
      border: 1px solid rgba(15,23,42,0.07);
      border-radius: 15px;
      background: rgba(255,255,255,0.86);
      box-shadow: 0 10px 24px rgba(48,74,112,0.055);
    }
    .generated-action-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 9px;
      color: #334155;
      font-size: 10px;
      font-weight: 900;
    }
    .generated-action-head b {
      padding: 4px 6px;
      border-radius: 6px;
      color: #0f766e;
      background: #f0fdfa;
      font-size: 8px;
    }
    .generated-action-list ul {
      display: flex;
      flex-direction: column;
      gap: 7px;
      list-style: none;
    }
    .generated-action-list li {
      display: grid;
      grid-template-columns: 7px 1fr auto;
      align-items: center;
      gap: 8px;
      min-height: 27px;
      padding: 5px 8px;
      border-radius: 8px;
      color: #64748b;
      background: #f8fafc;
      font-size: 9px;
      animation: generated-row-in 0.38s ease both;
    }
    .generated-action-list li:nth-child(2) { animation-delay: 0.08s; }
    .generated-action-list li:nth-child(3) { animation-delay: 0.16s; }
    .generated-action-list li > i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34,197,94,0.1);
    }
    .generated-action-list li em {
      color: #94a3b8;
      font: 800 8px/1 'Outfit', sans-serif;
      font-style: normal;
    }
    .generated-delivery {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 45px;
      padding: 7px 8px 7px 12px;
      border: 1px dashed rgba(99,102,241,0.22);
      border-radius: 13px;
      color: #64748b;
      background: #f8fafc;
      font-size: 9px;
    }
    .generated-delivery > svg {
      width: 15px;
      height: 15px;
      color: #6366f1;
    }
    .generated-delivery > span {
      flex: 1;
    }
    .generated-delivery button {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-height: 31px;
      padding: 0 10px;
      border: 0;
      border-radius: 9px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      font-size: 9px;
      font-weight: 800;
    }
    .generated-delivery button svg {
      width: 12px;
      height: 12px;
    }
    .generated-delivery.is-complete {
      border-style: solid;
      border-color: rgba(16,185,129,0.23);
      color: #0f766e;
      background: #f0fdfa;
      box-shadow: 0 8px 20px rgba(16,185,129,0.08);
    }
    @keyframes generated-row-in {
      from { opacity: 0; transform: translateX(8px); }
      to { opacity: 1; transform: none; }
    }
    .live-output-title {
      padding: 20px 22px 15px;
    }
    .live-output-title small {
      display: block;
      margin-bottom: 5px;
      color: #0ea5e9;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.15em;
    }
    .live-output-title strong {
      color: #172033;
      font-size: 18px;
    }
    .live-output-title > div {
      height: 4px;
      margin-top: 15px;
      overflow: hidden;
      border-radius: 99px;
      background: #e8eef5;
    }
    #collab-progress-bar {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #6366f1, #0ea5e9, #14b8a6);
      box-shadow: 0 0 12px rgba(14,165,233,0.4);
      transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
    }
    .live-output-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
      padding: 0 18px;
    }
    .live-output-grid article {
      display: grid;
      grid-template-columns: 31px 1fr auto;
      align-items: center;
      gap: 9px;
      min-height: 68px;
      padding: 10px;
      border: 1px solid rgba(148,163,184,0.16);
      border-radius: 15px;
      background: #f8fafc;
      opacity: 0.62;
      transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .live-output-grid article > svg {
      width: 18px;
      height: 18px;
      padding: 7px;
      box-sizing: content-box;
      border-radius: 9px;
      color: #64748b;
      background: #edf2f7;
    }
    .live-output-grid article span {
      min-width: 0;
    }
    .live-output-grid article b,
    .live-output-grid article small {
      display: block;
    }
    .live-output-grid article b {
      color: #334155;
      font-size: 12px;
    }
    .live-output-grid article small {
      overflow: hidden;
      margin-top: 4px;
      color: #94a3b8;
      font-size: 9px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .live-output-grid article em {
      color: #94a3b8;
      font-size: 9px;
      font-style: normal;
      font-weight: 800;
    }
    .live-output-grid article.is-active {
      opacity: 1;
      transform: translateY(-2px);
      border-color: rgba(14,165,233,0.25);
      background: linear-gradient(135deg, rgba(238,242,255,0.9), rgba(236,254,255,0.9));
      box-shadow: 0 8px 20px rgba(14,165,233,0.08);
    }
    .live-output-grid article.is-active > svg {
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
    }
    .live-output-grid article.is-active em {
      color: #0ea5e9;
    }
    .live-output-result {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 12px 18px 0;
      padding: 11px 13px;
      border: 1px dashed rgba(148,163,184,0.28);
      border-radius: 13px;
      color: #64748b;
      background: rgba(248,250,252,0.72);
      font-size: 11px;
      transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .live-output-result svg {
      width: 16px;
      height: 16px;
      color: #94a3b8;
    }
    .live-output-result.is-complete {
      color: #0f766e;
      border-color: rgba(20,184,166,0.28);
      background: rgba(240,253,250,0.9);
    }
    .live-output-result.is-complete svg {
      color: #14b8a6;
    }
    .agent-collab-runtime {
      grid-column: 1 / -1;
      padding: 16px 18px;
      border: 1px solid rgba(99,102,241,0.13);
      border-radius: 21px;
      background:
        radial-gradient(circle at 0% 100%, rgba(99,102,241,0.09), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(20,184,166,0.08), transparent 30%),
        rgba(255,255,255,0.82);
      box-shadow: 0 15px 36px rgba(48,74,112,0.07);
    }
    .collab-runtime-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 13px;
    }
    .collab-runtime-head > div {
      display: flex;
      align-items: center;
      gap: 11px;
    }
    .collab-runtime-head span {
      color: #4f46e5;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.12em;
    }
    .collab-runtime-head strong {
      color: #243247;
      font-size: 14px;
    }
    .collab-runtime-head em {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #64748b;
      font-size: 9px;
      font-style: normal;
    }
    .collab-runtime-head em > i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
      animation: live-status-pulse 1.4s ease-in-out infinite;
    }
    .collab-runtime-head em b {
      color: #0f766e;
    }
    .collab-runtime-body {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 15px;
      align-items: stretch;
    }
    .collab-agent-flow {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr;
      align-items: center;
      gap: 4px;
      min-height: 90px;
      padding: 10px 12px;
      overflow: hidden;
      border: 1px solid rgba(99,102,241,0.09);
      border-radius: 15px;
      background:
        linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px),
        rgba(248,250,252,0.75);
      background-size: 20px 20px, 20px 20px, auto;
    }
    .collab-agent-flow::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -15%;
      width: 80px;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.11), transparent);
      transform: skewX(-12deg);
      animation: collab-runtime-scan 3.1s linear infinite;
    }
    .collab-agent-flow article {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 8px;
      border: 1px solid rgba(148,163,184,0.14);
      border-radius: 12px;
      background: rgba(255,255,255,0.88);
      animation: collab-agent-active 3s ease-in-out infinite;
    }
    .collab-agent-flow article:nth-of-type(2) { animation-delay: 0.55s; }
    .collab-agent-flow article:nth-of-type(3) { animation-delay: 1.1s; }
    .collab-agent-flow article:nth-of-type(4) { animation-delay: 1.65s; }
    .collab-agent-flow article > svg {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      padding: 7px;
      box-sizing: border-box;
      border-radius: 9px;
      color: #4f46e5;
      background: #eef2ff;
    }
    .collab-agent-flow article span,
    .collab-agent-flow article b,
    .collab-agent-flow article small {
      display: block;
    }
    .collab-agent-flow article b {
      color: #334155;
      font-size: 10px;
      white-space: nowrap;
    }
    .collab-agent-flow article small {
      margin-top: 3px;
      color: #94a3b8;
      font-size: 8px;
      white-space: nowrap;
    }
    .collab-agent-flow > svg {
      position: relative;
      z-index: 1;
      width: 13px;
      height: 13px;
      color: #a5b4fc;
      animation: collab-runtime-arrow 1.1s ease-in-out infinite;
    }
    .collab-runtime-metrics {
      display: grid;
      grid-template-columns: repeat(3, 82px);
      gap: 8px;
    }
    .collab-runtime-metrics > span {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border: 1px solid rgba(14,165,233,0.1);
      border-radius: 13px;
      background: rgba(248,250,252,0.82);
      text-align: center;
    }
    .collab-runtime-metrics svg {
      width: 14px;
      height: 14px;
      margin-bottom: 4px;
      color: #0ea5e9;
    }
    .collab-runtime-metrics b {
      color: #243247;
      font-size: 13px;
    }
    .collab-runtime-metrics small {
      margin-top: 2px;
      color: #94a3b8;
      font-size: 8px;
    }
    @keyframes collab-runtime-scan {
      to { left: 108%; }
    }
    @keyframes collab-runtime-arrow {
      50% { color: #0ea5e9; transform: translateX(3px); }
    }
    @keyframes collab-agent-active {
      0%, 10%, 38%, 100% { border-color: rgba(148,163,184,0.14); box-shadow: none; transform: none; }
      18%, 30% { border-color: rgba(99,102,241,0.3); box-shadow: 0 8px 18px rgba(99,102,241,0.11); transform: translateY(-2px); }
    }
    @media (max-width: 900px) {
      .collab-runtime-body {
        grid-template-columns: 1fr;
      }
      .collab-runtime-metrics {
        grid-template-columns: repeat(3, 1fr);
        min-height: 76px;
      }
    }
    @media (max-width: 640px) {
      .collab-runtime-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
      }
      .collab-agent-flow {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 8px;
      }
      .collab-agent-flow > svg {
        display: none;
      }
    }
    @keyframes live-status-pulse {
      50% { opacity: 0.45; transform: scale(0.78); }
    }
    @keyframes live-cursor {
      50% { opacity: 0; }
    }
    .agent-page .agent-workflow-board,
    .agent-page .agent-skill-market-panel,
    .agent-page .agent-squad-panel {
      min-height: 430px;
      border-radius: 24px;
      padding: 12px;
    }
    @media (max-width: 900px) {
      .agent-page .agent-shell-inner {
        padding: 12px;
        border-radius: 24px;
      }
      .agent-page .agent-shell-inner::before,
      .agent-page .agent-shell-inner::after {
        display: none;
      }
      .agent-page .agent-studio-frame {
        display: block;
      }
      .agent-page .agent-tabbar {
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid rgba(15,23,42,0.08);
        overflow-x: auto;
      }
      .agent-page .agent-tabbar .mac-tab {
        width: auto;
        flex: 0 0 auto;
      }
    }

    /* Agent studio density: reduce empty space in skill-market tab */
    .agent-page .agent-studio-frame {
      grid-template-rows: 64px minmax(430px, auto);
    }
    .agent-page .agent-tab-content {
      display: grid;
      align-items: stretch;
      min-height: 430px;
      padding: 28px 32px;
    }
    .agent-page .agent-tab-content > .mac-content-panel {
      grid-area: 1 / 1;
      display: block;
      min-width: 0;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .agent-page .agent-tab-content > .mac-content-panel.active {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
    .agent-page .agent-workflow-board,
    .agent-page .agent-skill-market-panel,
    .agent-page .agent-knowledge-panel,
    .agent-page .agent-squad-panel,
    .agent-page .agent-panel-grid {
      min-height: 352px;
    }
    @media (max-width: 900px) {
      .agent-page .agent-panel-grid {
        min-height: 0;
      }
    }
    .agent-page .agent-skill-market-panel {
      grid-template-columns: 0.86fr 1.14fr;
      gap: 24px;
      align-items: stretch;
    }
    .agent-page .skill-market-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }
    .agent-page .skill-market-stage {
      min-height: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: stretch;
      gap: 20px;
      padding: 26px 160px 24px 28px;
    }
    .agent-page .agent-skill-cloud {
      max-width: none;
      width: 100%;
      gap: 14px;
      align-content: start;
      align-items: center;
    }
    .agent-page .agent-skill-cloud span {
      padding: 11px 16px !important;
      font-size: 14px !important;
      min-width: 92px;
      text-align: center;
    }
    .agent-page .skill-radar {
      right: 32px;
      top: 34px;
      width: 124px;
      height: 124px;
      transform: none;
    }
    .agent-page .skill-pipeline {
      align-self: end;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding-top: 18px;
      border-top: 1px solid rgba(14,165,233,0.12);
    }
    .agent-page .skill-pipeline span {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 46px;
      border: 1px solid rgba(14,165,233,0.14);
      border-radius: 14px;
      background: rgba(255,255,255,0.72);
      color: #405268;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 10px 22px rgba(48,74,112,0.06);
    }
    .agent-page .skill-pipeline svg {
      color: #0ea5e9;
    }
    @media (max-width: 900px) {
      .agent-page .skill-market-stage {
        padding: 24px;
      }
      .agent-page .skill-radar {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin: 0 auto 20px;
      }
      .agent-page .skill-pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* About capability tags: prevent slash text from breaking vertically */
    .about-capability-board .capability-line em {
      display: flex !important;
      flex-wrap: nowrap;
      gap: 7px;
      line-height: 1.3 !important;
    }
    .about-capability-board .capability-line em b {
      white-space: nowrap;
      font-size: 12px !important;
      line-height: 1.2;
    }
    @media (max-width: 640px) {
      .about-capability-board .capability-line {
        grid-template-columns: 42px minmax(0, 1fr);
      }
      .about-capability-board .capability-line em {
        grid-column: 2;
        flex-wrap: wrap;
        margin-top: 2px;
      }
    }

    /* Agent OS architecture stack */
    .agent-page .agent-framework-section {
      padding: 94px 24px 104px;
      background:
        radial-gradient(circle at 8% 12%, rgba(99,102,241,0.12), transparent 26%),
        radial-gradient(circle at 92% 88%, rgba(16,185,129,0.11), transparent 28%),
        linear-gradient(180deg, #f6f8fc 0%, #edf3f9 100%);
    }
    .agent-framework-heading {
      position: relative;
      text-align: center;
      margin-bottom: 48px;
    }
    .agent-framework-heading span {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 13px;
      color: #0ea5e9;
      font: 800 11px/1 'Outfit', sans-serif;
      letter-spacing: 0.17em;
    }
    .agent-framework-heading span::before,
    .agent-framework-heading span::after {
      content: '';
      width: 28px;
      height: 1px;
      background: linear-gradient(90deg, transparent, #38bdf8);
    }
    .agent-framework-heading span::after {
      transform: rotate(180deg);
    }
    .agent-framework-heading h2 {
      color: #0f172a;
      font-size: clamp(2.1rem, 3.7vw, 3.15rem);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.045em;
    }
    .agent-page #fw-rows {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .agent-page #fw-rows::before {
      content: '';
      position: absolute;
      left: 35px;
      top: 32px;
      bottom: 32px;
      width: 1px;
      background: linear-gradient(180deg, #6366f1, #06b6d4, #10b981, #ec4899);
      opacity: 0.24;
    }
    .agent-page #fw-rows .fw-row {
      --layer-rgb: 99,102,241;
      position: relative;
      display: grid;
      grid-template-columns: 218px minmax(0, 1fr);
      min-height: 176px;
      margin: 0;
      border: 1px solid rgba(var(--layer-rgb),0.15);
      border-radius: 26px;
      background: rgba(255,255,255,0.74);
      box-shadow: 0 20px 52px rgba(48,74,112,0.08), inset 0 1px 0 #fff;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      overflow: hidden;
    }
    .agent-page #fw-rows .fw-row:nth-child(2) { --layer-rgb: 14,165,233; }
    .agent-page #fw-rows .fw-row:nth-child(3) { --layer-rgb: 16,185,129; }
    .agent-page #fw-rows .fw-row:nth-child(4) { --layer-rgb: 236,72,153; }
    .agent-page #fw-rows .fw-row::before {
      content: '';
      position: absolute;
      z-index: 3;
      left: 0;
      top: 22px;
      bottom: 22px;
      width: 4px;
      height: auto;
      background: rgb(var(--layer-rgb));
      border-radius: 0 4px 4px 0;
      box-shadow: 0 0 18px rgba(var(--layer-rgb),0.36);
      transform: none;
      animation: none;
    }
    .agent-page #fw-rows .fw-row::after {
      content: 'LAYER ' attr(data-layer);
      position: absolute;
      z-index: 2;
      right: 20px;
      top: 14px;
      left: auto;
      width: auto;
      height: auto;
      color: rgba(var(--layer-rgb),0.16);
      background: none;
      font: 900 11px/1 'Outfit', sans-serif;
      letter-spacing: 0.12em;
    }
    .agent-page #fw-rows .fw-left {
      position: relative;
      min-height: 176px;
      padding: 30px 26px 28px 34px;
      justify-content: center;
      background:
        radial-gradient(circle at 20% 14%, rgba(255,255,255,0.5), transparent 28%),
        var(--fw-grad);
      clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%);
    }
    .agent-page #fw-rows .fw-left::before {
      content: attr(data-layer);
      position: absolute;
      right: 28px;
      bottom: -13px;
      color: rgba(255,255,255,0.12);
      font: 900 72px/1 'Outfit', sans-serif;
    }
    .agent-page #fw-rows .fw-left::after {
      width: 86px;
      height: 86px;
      right: 4px;
      bottom: -36px;
      border: 1px solid rgba(255,255,255,0.17);
      border-radius: 50%;
      background: transparent;
    }
    .agent-page #fw-rows .fw-left-icon {
      width: 46px;
      height: 46px;
      margin-bottom: 14px;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.18);
      box-shadow: 0 12px 28px rgba(30,41,59,0.16), inset 0 1px 0 rgba(255,255,255,0.3);
    }
    .agent-page #fw-rows .fw-left-title {
      font-size: 22px;
      letter-spacing: -0.02em;
    }
    .agent-page #fw-rows .fw-left-sub {
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.03em;
    }
    .agent-page #fw-rows .fw-right {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      align-content: center;
      gap: 12px;
      padding: 34px 30px 28px 34px;
      border: 0;
    }
    .agent-page #fw-rows .fw-row:last-child .fw-right {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .agent-page #fw-rows .fw-chip {
      width: 100%;
      min-width: 0;
      min-height: 84px;
      grid-template-columns: 38px minmax(0,1fr);
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(var(--layer-rgb),0.11);
      border-radius: 15px;
      background:
        radial-gradient(circle at 0 0, rgba(var(--layer-rgb),0.09), transparent 45%),
        rgba(255,255,255,0.82);
      box-shadow: 0 10px 25px rgba(48,74,112,0.055);
    }
    .agent-page #fw-rows .fw-chip::before {
      color: rgba(var(--layer-rgb),0.2);
    }
    .agent-page #fw-rows .fw-chip-icon {
      width: 38px;
      height: 38px;
      color: rgb(var(--layer-rgb));
      border-color: rgba(var(--layer-rgb),0.16);
      background: rgba(var(--layer-rgb),0.09);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .agent-page #fw-rows .fw-chip-title {
      color: #172033;
      font-size: 15px !important;
      line-height: 1.35;
    }
    .agent-page #fw-rows .fw-chip-desc {
      color: #64748b;
      font-size: 12px !important;
      font-weight: 500;
      line-height: 1.4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .agent-page #fw-rows .fw-chip-status {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 5px;
      height: 5px;
      margin: 0;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34,197,94,0.1);
    }
    .agent-page #fw-rows .fw-chip:hover {
      border-color: rgba(var(--layer-rgb),0.3);
      background: #fff;
      box-shadow: 0 16px 34px rgba(var(--layer-rgb),0.12);
      transform: translateY(-4px);
    }
    .agent-page #fw-rows.sr-ready .fw-row {
      opacity: 0;
      transform: translateY(40px) scale(0.975);
    }
    .agent-page #fw-rows.sr-ready.sr-in .fw-row {
      opacity: 1;
      transform: none;
      transition: opacity 0.85s ease, transform 1s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s;
    }
    .agent-page #fw-rows.sr-ready.sr-in .fw-row:nth-child(1) { transition-delay: 0.1s; }
    .agent-page #fw-rows.sr-ready.sr-in .fw-row:nth-child(2) { transition-delay: 0.34s; }
    .agent-page #fw-rows.sr-ready.sr-in .fw-row:nth-child(3) { transition-delay: 0.58s; }
    .agent-page #fw-rows.sr-ready.sr-in .fw-row:nth-child(4) { transition-delay: 0.82s; }
    .agent-page #fw-rows.sr-ready.sr-in .fw-row:hover {
      transform: translateY(-3px);
      transition-delay: 0s;
      box-shadow: 0 28px 64px rgba(var(--layer-rgb),0.12), inset 0 1px 0 #fff;
    }
    @media (max-width: 1100px) {
      .agent-page #fw-rows .fw-row:last-child .fw-right {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .agent-page #fw-rows .fw-chip-desc {
        display: none;
      }
    }
    @media (max-width: 900px) {
      .agent-page .agent-framework-section {
        padding: 70px 20px 80px;
      }
      .agent-page #fw-rows .fw-row {
        grid-template-columns: 1fr !important;
      }
      .agent-page #fw-rows .fw-left {
        min-height: 138px !important;
        clip-path: none;
        border-radius: 24px 24px 0 0;
      }
      .agent-page #fw-rows .fw-right,
      .agent-page #fw-rows .fw-row:last-child .fw-right {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        padding: 18px !important;
      }
      .agent-page #fw-rows::before {
        display: none;
      }
    }
    @media (max-width: 520px) {
      .agent-page #fw-rows .fw-right,
      .agent-page #fw-rows .fw-row:last-child .fw-right {
        grid-template-columns: 1fr !important;
      }
      .agent-page #fw-rows .fw-chip-desc {
        display: block;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .agent-page #fw-rows.sr-ready .fw-row {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .contact-benefits {
      gap: 12px;
    }
    .contact-benefits span {
      padding: 10px 15px;
      gap: 9px;
      color: #334155;
      font-size: 15px !important;
      font-weight: 600;
      line-height: 1.35;
    }
    .contact-benefits span svg {
      width: 16px !important;
      height: 16px !important;
    }

    .base-console .console-label {
      position: relative;
      min-height: 34px;
      padding: 0 0 12px 16px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(14,165,233,0.13);
    }
    .base-console .console-label::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      width: 4px;
      height: 24px;
      border-radius: 999px;
      background: linear-gradient(180deg, #6366f1, #06b6d4);
      box-shadow: 0 0 14px rgba(14,165,233,0.28);
    }
    .base-console .console-label::after {
      content: '';
      position: absolute;
      left: 16px;
      bottom: -1px;
      width: 86px;
      height: 2px;
      background: linear-gradient(90deg, #6366f1, #22d3ee, transparent);
    }
    .base-console .console-label span:first-child {
      color: #172033;
      font-size: 20px !important;
      font-weight: 900;
      line-height: 1.35;
      letter-spacing: -0.025em;
    }
    .base-console .console-label span:last-child {
      color: #0b94d6;
      font-size: 11px !important;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .client-wall .client-marquee-row:nth-child(3) .client-track {
      animation-duration: 36s;
    }

    .organization-agents .organization-avatar {
      position: relative;
      width: 58px;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,0.92);
      border-radius: 18px;
      background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,0.95), transparent 32%),
        linear-gradient(145deg, rgba(var(--org-rgb),0.16), rgba(var(--org-rgb),0.38));
      box-shadow:
        0 10px 24px rgba(var(--org-rgb),0.2),
        0 0 0 1px rgba(var(--org-rgb),0.12),
        inset 0 1px 0 rgba(255,255,255,0.85);
      font-size: 27px;
      line-height: 1;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .organization-agents .organization-avatar::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(180deg, transparent 42%, rgba(var(--org-rgb),0.14) 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
    }
    .organization-agents .organization-avatar img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center 28%;
      border-radius: 16px;
      filter: saturate(1.05) contrast(1.04);
    }
    .organization-agents .organization-avatar::after {
      content: 'AI';
      position: absolute;
      right: -5px;
      bottom: -4px;
      z-index: 2;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
      border-radius: 7px;
      color: #fff;
      background: var(--org-color);
      font: 800 8px/1 'Outfit', sans-serif;
      box-shadow: 0 5px 12px rgba(var(--org-rgb),0.28);
    }
    .organization-agents > div:hover .organization-avatar {
      transform: translateY(-3px) scale(1.06);
      box-shadow:
        0 16px 32px rgba(var(--org-rgb),0.28),
        0 0 22px rgba(var(--org-rgb),0.22),
        inset 0 1px 0 #fff;
    }

    .hero-desc-flow {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr);
      align-items: stretch;
      border: 1px solid rgba(129,140,248,0.34);
      border-radius: 18px;
      background:
        linear-gradient(90deg, rgba(99,102,241,0.13), rgba(99,102,241,0.055) 48%, rgba(34,211,238,0.09)),
        rgba(255,255,255,0.035);
      box-shadow:
        0 18px 46px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 0 28px rgba(99,102,241,0.09);
    }
    .hero-desc-flow::after {
      content: '';
      position: absolute;
      z-index: 3;
      left: 20px;
      right: 20px;
      bottom: -1px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #6366f1, #8b5cf6 48%, #22d3ee);
      box-shadow: 0 0 14px rgba(99,102,241,0.55);
    }
    .hero-desc-step {
      position: relative;
      z-index: 1;
      padding: 20px 20px 22px;
      color: #fff;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.45;
      letter-spacing: -0.01em;
      text-shadow: 0 2px 12px rgba(0,0,0,0.25);
    }
    .hero-desc-step em {
      margin-bottom: 8px;
      color: #a5b4fc;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.15em;
    }
    .hero-desc-step:last-child em {
      color: #67e8f9;
    }
    .hero-desc-connector {
      position: relative;
      z-index: 2;
      width: 58px;
      border: 0;
      background: transparent;
      color: #fff;
    }
    .hero-desc-connector::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, rgba(129,140,248,0.18), #818cf8, rgba(34,211,238,0.2));
    }
    .hero-desc-connector svg {
      position: relative;
      z-index: 1;
      width: 18px !important;
      height: 18px !important;
      padding: 8px;
      border: 1px solid rgba(165,180,252,0.35);
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      box-sizing: content-box;
      box-shadow: 0 0 22px rgba(99,102,241,0.48);
      animation: hero-flow-arrow 1.9s ease-in-out infinite;
    }
    @keyframes hero-flow-arrow {
      50% { transform: translateX(4px); box-shadow: 0 0 30px rgba(99,102,241,0.7); }
    }
    @media (max-width: 640px) {
      .hero-desc-flow,
      #page-home .hero-desc-flow {
        display: grid;
        grid-template-columns: 1fr;
      }
      .hero-desc-connector,
      #page-home .hero-desc-connector {
        width: 100%;
        height: 50px;
        border: 0;
      }
      .hero-desc-connector::before {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 0;
        width: 1px;
        height: auto;
      }
      .hero-desc-connector svg,
      #page-home .hero-desc-connector svg {
        transform: rotate(90deg);
      }
      @keyframes hero-flow-arrow {
        50% { transform: rotate(90deg) translateX(4px); }
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-desc-connector svg {
        animation: none;
      }
    }

    .hero-desc-flow,
    #page-home .hero-desc-flow {
      display: block;
    }
    .hero-desc-sentence {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      padding: 22px 20px 24px;
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.45;
      letter-spacing: -0.015em;
      white-space: nowrap;
      text-shadow: 0 2px 12px rgba(0,0,0,0.25);
    }
    .hero-desc-sentence b {
      color: #a5b4fc;
      font-family: 'Outfit', sans-serif;
      font-weight: 900;
    }
    .hero-desc-sentence span:last-child b {
      color: #67e8f9;
    }
    .hero-desc-sentence > i,
    .hero-desc-sentence > svg {
      width: 21px;
      height: 21px;
      flex-shrink: 0;
      color: #fff;
      filter: drop-shadow(0 0 7px rgba(129,140,248,0.8));
      animation: hero-sentence-arrow 1.8s ease-in-out infinite;
    }
    @keyframes hero-sentence-arrow {
      50% { transform: translateX(5px); color: #67e8f9; }
    }
    @media (max-width: 640px) {
      .hero-desc-sentence {
        gap: 8px;
        padding: 18px 14px 20px;
        font-size: 16px;
        white-space: normal;
      }
      .hero-desc-sentence span {
        flex: 1;
      }
      .hero-desc-sentence span:first-child {
        text-align: right;
      }
    }

    .organization-leader-icon {
      width: 72px;
      height: 72px;
      padding: 3px;
      border: 2px solid rgba(255,255,255,0.94);
      background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,0.85), transparent 30%),
        linear-gradient(145deg, rgba(var(--org-rgb),0.18), rgba(var(--org-rgb),0.48));
      box-shadow:
        0 0 0 7px rgba(var(--org-rgb),0.09),
        0 15px 34px rgba(var(--org-rgb),0.28);
    }
    .organization-leader-icon img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 22%;
    }
    .organization-agents .organization-avatar::after {
      display: none;
    }
    .organization-row--technology .organization-leader-icon {
      box-shadow:
        0 0 0 7px rgba(var(--org-rgb),0.1),
        0 15px 34px rgba(var(--org-rgb),0.3),
        0 0 28px rgba(var(--org-rgb),0.18);
    }
    .organization-avatar .avatar-role-mark,
    .organization-leader-icon .avatar-role-mark {
      position: absolute;
      z-index: 3;
      right: -6px;
      bottom: -5px;
      width: 25px !important;
      height: 25px !important;
      padding: 5px !important;
      border: 2px solid #fff;
      border-radius: 8px;
      color: #fff !important;
      background: var(--org-color) !important;
      box-shadow: 0 7px 16px rgba(var(--org-rgb),0.34) !important;
      box-sizing: border-box;
      stroke-width: 2.4;
    }
    .organization-leader-icon .avatar-role-mark {
      right: -5px;
      bottom: -4px;
      width: 28px !important;
      height: 28px !important;
      padding: 6px !important;
      border-radius: 9px;
    }
    .organization-agents .organization-avatar {
      width: 66px;
      height: 66px;
    }
    .organization-leader-icon {
      width: 80px;
      height: 80px;
    }

    /* MacBook-style Agent OS presentation */
    .agent-page .agent-shell-inner {
      position: relative;
      max-width: 1600px;
      padding: 18px 18px 28px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 30px 30px 22px 22px;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.18), transparent 24%),
        linear-gradient(180deg, #303746 0%, #171c28 52%, #0d111b 100%);
      box-shadow:
        0 46px 110px rgba(15,23,42,0.32),
        0 18px 38px rgba(15,23,42,0.2),
        inset 0 1px 0 rgba(255,255,255,0.23),
        inset 0 -1px 0 rgba(0,0,0,0.8);
      overflow: visible;
    }
    .agent-page .agent-shell-inner::before,
    .agent-page .agent-shell-inner::after {
      content: none;
    }
    .agent-page .agent-studio-frame {
      position: relative;
      z-index: 2;
      border: 0;
      border-radius: 15px 15px 10px 10px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(15,23,42,0.16);
    }
    .macbook-camera {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 6px;
      width: 7px;
      height: 7px;
      transform: translateX(-50%);
      border: 1px solid rgba(148,163,184,0.24);
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, #334155 0 18%, #0f172a 38%, #020617 72%);
      box-shadow: 0 0 0 2px rgba(0,0,0,0.16), 0 0 7px rgba(59,130,246,0.12);
    }
    .macbook-base {
      position: absolute;
      z-index: 1;
      left: 50%;
      bottom: -51px;
      width: calc(100% + 116px);
      height: 54px;
      transform: translateX(-50%);
      border-radius: 3px 3px 24px 24px;
      background:
        linear-gradient(90deg, transparent 0, rgba(255,255,255,0.3) 8%, transparent 16%) top/100% 1px no-repeat,
        linear-gradient(180deg, #d9dee5 0%, #aeb7c2 42%, #77818f 76%, #c8ced6 100%);
      clip-path: polygon(4% 0, 96% 0, 100% 72%, 98% 100%, 2% 100%, 0 72%);
      box-shadow:
        0 20px 34px rgba(15,23,42,0.25),
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -2px 0 rgba(71,85,105,0.38);
    }
    .macbook-base::after {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -12px;
      height: 18px;
      border-radius: 50%;
      background: rgba(15,23,42,0.24);
      filter: blur(10px);
    }
    .macbook-base span {
      position: absolute;
      left: 50%;
      top: 0;
      width: 138px;
      height: 10px;
      transform: translateX(-50%);
      border-radius: 0 0 12px 12px;
      background: linear-gradient(180deg, #8e98a5, #dce1e7);
      box-shadow: inset 0 1px 2px rgba(15,23,42,0.24);
    }
    @media (max-width: 900px) {
      .agent-page .agent-shell-inner {
        padding: 11px 11px 16px;
        border-radius: 20px;
      }
      .macbook-camera {
        top: 3px;
        width: 5px;
        height: 5px;
      }
      .macbook-base {
        display: none;
      }
      .agent-page .agent-studio-frame {
        border-radius: 12px;
      }
    }

    @media (min-width: 901px) {
      .agent-page .agent-product-shell {
        padding-bottom: 104px;
      }
      .agent-page .agent-shell-inner {
        max-width: 1180px;
        padding: 18px 18px 26px;
      }
      .agent-page .agent-studio-frame {
        grid-template-rows: 64px minmax(650px, auto);
      }
      .macbook-base {
        bottom: -58px;
        width: calc(100% + 92px);
        height: 60px;
      }
      .macbook-base span {
        width: 126px;
        height: 9px;
      }
    }

    /* Application-style Agent OS sidebar */
    @media (min-width: 901px) {
      .agent-page .agent-studio-frame {
        grid-template-columns: 250px minmax(0, 1fr);
      }
      .agent-page .agent-tabbar {
        gap: 8px;
        padding: 20px 14px 16px;
        background:
          radial-gradient(circle at 0 0, rgba(99,102,241,0.10), transparent 32%),
          linear-gradient(180deg, #f7faff 0%, #edf4fa 100%);
      }
    }
    .agent-sidebar-brand {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 58px;
      margin: 0 5px 12px;
      padding: 0 10px 14px;
      border-bottom: 1px solid rgba(15,23,42,0.08);
    }
    .agent-sidebar-brand > span {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 10px 22px rgba(99,102,241,0.24);
    }
    .agent-sidebar-brand svg {
      width: 18px;
      height: 18px;
    }
    .agent-sidebar-brand div {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .agent-sidebar-brand b {
      color: #172033;
      font: 900 16px/1.1 'Outfit', 'Noto Sans SC', sans-serif;
    }
    .agent-sidebar-brand small {
      color: #94a3b8;
      font: 800 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.15em;
    }
    .agent-page .agent-tabbar .mac-tab {
      position: relative;
      display: grid;
      grid-template-columns: 42px minmax(0,1fr) 8px;
      align-items: center;
      gap: 11px;
      min-height: 70px;
      padding: 9px 13px;
      border-radius: 17px;
      overflow: hidden;
      text-align: left;
      transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s;
    }
    .agent-page .agent-tabbar .mac-tab::before {
      content: none;
    }
    .agent-page .agent-tabbar .mac-tab::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #6366f1, #22d3ee);
    }
    .agent-page .agent-tabbar:not(.is-auto-paused) .mac-tab.active::after {
      animation: agent-tab-progress 6s linear forwards;
    }
    @keyframes agent-tab-progress {
      to { width: 100%; }
    }
    .agent-page .agent-tabbar .mac-tab:hover {
      transform: translateX(3px);
      background: rgba(255,255,255,0.64);
    }
    .agent-page .agent-tabbar .mac-tab.active {
      color: #0f172a !important;
      border-color: rgba(99,102,241,0.18) !important;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.92)) !important;
      box-shadow:
        0 14px 30px rgba(48,74,112,0.10),
        inset 3px 0 0 #6366f1 !important;
    }
    .sidebar-tab-icon {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(99,102,241,0.12);
      border-radius: 13px;
      color: #64748b;
      background: rgba(255,255,255,0.72);
      transition: color 0.25s, background 0.25s, transform 0.25s;
    }
    .sidebar-tab-icon svg {
      width: 19px;
      height: 19px;
    }
    .mac-tab.active .sidebar-tab-icon {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 9px 20px rgba(99,102,241,0.22);
      transform: scale(1.04);
    }
    .sidebar-tab-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .sidebar-tab-copy strong {
      color: inherit;
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
    }
    .sidebar-tab-copy small {
      color: #9aa7b8;
      font: 700 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.06em;
    }
    .sidebar-tab-state {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #cbd5e1;
      box-shadow: 0 0 0 4px rgba(148,163,184,0.08);
    }
    .mac-tab.active .sidebar-tab-state {
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.12), 0 0 10px rgba(34,197,94,0.45);
    }
    .agent-page .agent-tab-content > .mac-content-panel {
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .agent-page .agent-tab-content > .mac-content-panel.active {
      transform: translateY(0);
    }
    @media (max-width: 900px) {
      .agent-sidebar-brand,
      .sidebar-tab-copy small,
      .sidebar-tab-state {
        display: none;
      }
      .agent-page .agent-tabbar .mac-tab {
        display: flex;
        min-height: 50px;
        padding: 7px 12px;
      }
      .sidebar-tab-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
      }
      .sidebar-tab-icon svg {
        width: 16px;
        height: 16px;
      }
      .agent-page .agent-tabbar .mac-tab::after {
        display: none;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .agent-page .agent-tabbar .mac-tab::after {
        animation: none !important;
      }
    }

    /* About hero message */
    .about-hero-brand-row {
      display: flex;
      align-items: center;
      gap: 30px;
      margin-bottom: 28px;
    }
    .about-hero-copy .about-hero-brand {
      margin: 0;
      font-size: clamp(3rem, 5.7vw, 5.2rem);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.055em;
      color: #fff;
      text-shadow: 0 16px 42px rgba(0,0,0,0.28);
    }
    .about-hero-copy > .about-hero-brand {
      margin-bottom: 28px;
    }
    .about-hero-positioning {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 205px;
      padding-left: 18px;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      line-height: 1.35;
    }
    .about-hero-positioning::before {
      content: '';
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      width: 2px;
      border-radius: 99px;
      background: linear-gradient(180deg, #f472b6, #fb7185);
      box-shadow: 0 0 12px rgba(244,114,182,0.35);
    }
    .about-hero-positioning strong {
      margin-bottom: 2px;
      color: #fda4af;
      font-size: 14px;
      font-weight: 900;
    }
    .about-hero-brand span {
      background: linear-gradient(120deg, #fff 0%, #c7d2fe 42%, #67e8f9 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .about-hero-experience {
      position: relative;
      width: fit-content;
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 20px;
      padding: 14px 20px;
      border: 1px solid rgba(255,255,255,0.78);
      border-radius: 12px;
      color: #172033;
      background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.94));
      box-shadow: 0 16px 38px rgba(0,0,0,0.24), inset 0 1px 0 #fff;
      overflow: hidden;
    }
    .about-hero-experience::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: linear-gradient(180deg, #6366f1, #22d3ee);
    }
    .about-hero-experience span {
      font-size: clamp(1.45rem, 2.5vw, 1.9rem);
      font-weight: 900;
      letter-spacing: -0.025em;
    }
    .about-hero-experience strong {
      color: #4f46e5;
      font: 900 clamp(1.1rem, 1.7vw, 1.4rem)/1 'Outfit', 'Noto Sans SC', sans-serif;
      white-space: nowrap;
    }
    .about-hero-copy .about-hero-slogan {
      max-width: none;
      color: rgba(255,255,255,0.76);
      font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: -0.015em;
    }
    .about-hero-slogan strong {
      color: #e11d48;
      font-weight: 900;
      white-space: nowrap;
    }
    @media (max-width: 640px) {
      .about-hero-brand-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
      }
      #page-about .about-hero {
        padding: 96px 20px 48px;
        overflow: visible;
      }
      #page-about .about-hero-inner {
        width: 100%;
        max-width: 100%;
        gap: 24px;
        overflow: visible;
      }
      #page-about .about-hero-copy {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-inline: 2px;
      }
      .about-hero-copy .about-hero-brand,
      #page-about .about-hero-copy .about-hero-brand {
        margin-bottom: 16px;
        max-width: 100%;
        font-size: clamp(2.15rem, 10.5vw, 2.85rem);
        letter-spacing: -0.03em;
        line-height: 1.08;
        overflow-wrap: anywhere;
        word-break: keep-all;
      }
      .about-hero-experience {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 14px 12px 16px;
      }
      .about-hero-experience span {
        font-size: clamp(1.08rem, 4.6vw, 1.28rem);
        white-space: normal;
        line-height: 1.35;
      }
      .about-hero-copy .about-hero-slogan {
        font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
        line-height: 1.55;
        padding-right: 4px;
      }
    }

    /* About profile and development path */
    .about-story-section {
      position: relative;
      padding: 92px 24px 104px;
      background:
        radial-gradient(circle at 8% 12%, rgba(99,102,241,0.09), transparent 25%),
        radial-gradient(circle at 92% 86%, rgba(20,184,166,0.09), transparent 28%),
        linear-gradient(180deg, #f6f8fc, #edf3f8);
      overflow: hidden;
    }
    .about-story-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(14,165,233,0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,165,233,0.032) 1px, transparent 1px);
      background-size: 34px 34px;
      mask-image: radial-gradient(ellipse 76% 82% at 50% 50%, #000 25%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 76% 82% at 50% 50%, #000 25%, transparent 100%);
      pointer-events: none;
    }
    .about-story-section .about-shell {
      position: relative;
      z-index: 1;
    }
    .about-story-heading {
      margin-bottom: 34px;
    }
    .about-story-heading > span,
    .about-story-timeline-head > span {
      display: block;
      margin-bottom: 8px;
      color: #0ea5e9;
      font: 800 10px/1 'Outfit', sans-serif;
      letter-spacing: 0.16em;
    }
    .about-story-heading h2 {
      color: #0f172a;
      font-size: clamp(2.1rem, 3.8vw, 3.1rem);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.045em;
    }
    .about-story-card {
      position: relative;
      display: grid;
      grid-template-columns: 224px minmax(0, 1fr);
      min-height: 280px;
      border: 1px solid rgba(37,99,235,0.09);
      border-radius: 28px;
      background: rgba(255,255,255,0.82);
      box-shadow: 0 26px 68px rgba(48,74,112,0.09), inset 0 1px 0 #fff;
      overflow: hidden;
    }
    .about-story-card::after {
      content: 'JUXINYUN';
      position: absolute;
      right: 24px;
      bottom: -12px;
      color: rgba(99,102,241,0.035);
      font: 900 72px/1 'Outfit', sans-serif;
      letter-spacing: -0.06em;
      pointer-events: none;
    }
    .about-story-mark {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 30px;
      color: #fff;
      background:
        radial-gradient(circle at 22% 16%, rgba(255,255,255,0.22), transparent 28%),
        linear-gradient(145deg, #4f46e5, #2563eb 52%, #0891b2);
      overflow: hidden;
    }
    .about-story-mark::before {
      content: '';
      position: absolute;
      right: -42px;
      top: -40px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 50%;
      box-shadow: 0 0 0 22px rgba(255,255,255,0.04);
    }
    .about-story-mark span {
      font: 900 54px/1 'Outfit', sans-serif;
      letter-spacing: -0.05em;
      margin-bottom: 10px;
    }
    .about-story-mark b {
      color: rgba(255,255,255,0.82);
      font-size: 15px;
      letter-spacing: 0.04em;
    }
    .about-story-mark svg {
      position: absolute;
      right: 24px;
      top: 25px;
      width: 27px;
      height: 27px;
      padding: 10px;
      border-radius: 15px;
      background: rgba(255,255,255,0.14);
      box-sizing: content-box;
    }
    .about-story-copy {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 18px;
      padding: 38px 46px;
    }
    .about-story-copy p {
      position: relative;
      padding-left: 20px;
      color: #526176;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.9;
    }
    .about-story-copy p::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.72em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #22d3ee);
      box-shadow: 0 0 0 5px rgba(99,102,241,0.07);
    }
    .about-story-timeline {
      margin-top: 30px;
      padding: 32px 30px 28px;
      border: 1px solid rgba(37,99,235,0.08);
      border-radius: 28px;
      background: rgba(255,255,255,0.76);
      box-shadow: 0 22px 56px rgba(48,74,112,0.075), inset 0 1px 0 #fff;
    }
    .about-story-timeline-head {
      margin-bottom: 24px;
    }
    .about-story-timeline-head h3 {
      color: #172033;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.025em;
    }
    .about-story-timeline .about-timeline {
      gap: 10px;
    }
    .about-story-timeline .about-timeline::before {
      left: 10%;
      right: 10%;
      top: 54px;
      height: 2px;
      background: linear-gradient(90deg, #6366f1, #0ea5e9, #14b8a6);
      opacity: 0.2;
    }
    .about-story-timeline .timeline-node {
      min-height: 174px;
      padding: 82px 12px 16px;
      border: 1px solid transparent;
      border-radius: 18px;
      background: transparent;
      box-shadow: none;
      text-align: center;
      transition: transform 0.42s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, background 0.3s, box-shadow 0.42s;
    }
    .about-story-timeline .timeline-node:hover {
      transform: translateY(-4px);
      border-color: rgba(14,165,233,0.13);
      background: rgba(247,251,255,0.88);
      box-shadow: 0 16px 36px rgba(48,74,112,0.08);
    }
    .about-story-timeline .timeline-node strong {
      position: absolute;
      left: 50%;
      top: 2px;
      transform: translateX(-50%);
      min-width: 68px;
      padding: 7px 12px;
      border: 1px solid rgba(99,102,241,0.1);
      border-radius: 999px;
      color: #4f46e5;
      background: rgba(238,242,255,0.92);
      font-size: 15px;
      line-height: 1;
      margin: 0;
    }
    .about-story-timeline .timeline-dot {
      z-index: 2;
      left: 50%;
      top: 45px;
      width: 18px;
      height: 18px;
      transform: translateX(-50%);
      border: 5px solid #fff;
      background: #818cf8;
      box-shadow: 0 0 0 1px rgba(99,102,241,0.24), 0 0 18px rgba(99,102,241,0.22);
    }
    .about-story-timeline .timeline-node.is-current .timeline-dot {
      background: #14b8a6;
      box-shadow: 0 0 0 6px rgba(20,184,166,0.12), 0 0 20px rgba(20,184,166,0.28);
    }
    .about-story-timeline .timeline-node.is-pivot {
      transform: translateY(-7px);
      border-color: rgba(99,102,241,0.22);
      background:
        radial-gradient(circle at 50% 0%, rgba(99,102,241,0.13), transparent 45%),
        rgba(248,250,255,0.94);
      box-shadow: 0 18px 40px rgba(79,70,229,0.11), inset 0 1px 0 #fff;
    }
    .about-story-timeline .timeline-node.is-pivot:hover {
      transform: translateY(-9px);
      border-color: rgba(99,102,241,0.3);
      box-shadow: 0 22px 48px rgba(79,70,229,0.15), inset 0 1px 0 #fff;
    }
    .about-story-timeline .timeline-node.is-pivot strong {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, #6366f1, #4f46e5);
      box-shadow: 0 8px 18px rgba(99,102,241,0.24);
    }
    .about-story-timeline .timeline-node.is-pivot .timeline-dot {
      width: 21px;
      height: 21px;
      background: #6366f1;
      box-shadow: 0 0 0 7px rgba(99,102,241,0.13), 0 0 24px rgba(99,102,241,0.38);
      animation: timeline-pivot-pulse 2s ease-in-out infinite;
    }
    .about-story-timeline .timeline-node.is-pivot h4 {
      color: #4338ca;
    }
    @keyframes timeline-pivot-pulse {
      50% { box-shadow: 0 0 0 10px rgba(99,102,241,0.06), 0 0 30px rgba(99,102,241,0.46); }
    }
    .about-story-timeline .timeline-node h4 {
      color: #263449;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.55;
      margin-bottom: 5px;
    }
    .about-story-timeline .timeline-node p {
      color: #8390a2;
      font-size: 12px;
      font-weight: 500;
      line-height: 1.55;
    }
    @media (max-width: 900px) {
      .about-story-section {
        padding: 70px 20px 80px;
      }
      .about-story-card {
        grid-template-columns: 1fr;
      }
      .about-story-mark {
        min-height: 180px;
      }
      .about-story-copy {
        padding: 30px 26px;
      }
      .about-story-timeline {
        padding: 28px 20px;
      }
      .about-story-timeline .about-timeline {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .about-story-timeline .about-timeline::before {
        left: 84px;
        right: auto;
        top: 18px;
        bottom: 18px;
        width: 2px;
        height: auto;
      }
      .about-story-timeline .timeline-node,
      .about-story-timeline .timeline-node.is-pivot {
        min-height: 92px;
        padding: 16px 16px 16px 112px;
        text-align: left;
        transform: none;
        overflow: visible;
      }
      .about-story-timeline .timeline-node.is-pivot:hover {
        transform: none;
      }
      .about-story-timeline .timeline-node strong,
      .about-story-timeline .timeline-node.is-pivot strong {
        left: 6px;
        top: 50%;
        min-width: 64px;
        width: 64px;
        padding: 8px 0;
        transform: translateY(-50%);
        text-align: center;
        font-size: 13px;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: visible;
        box-sizing: border-box;
      }
      .about-story-timeline .timeline-dot,
      .about-story-timeline .timeline-node.is-pivot .timeline-dot {
        left: 84px;
        top: 50%;
        width: 16px;
        height: 16px;
        transform: translate(-50%, -50%);
        animation: none;
      }
      .about-story-timeline .timeline-node h4 {
        font-size: 15px;
      }
      .about-story-timeline .timeline-node p {
        font-size: 13px;
      }
    }
    @media (max-width: 560px) {
      .about-story-copy p {
        font-size: 15px;
      }
      .about-story-timeline {
        padding: 22px 14px;
      }
      .about-story-timeline .timeline-node,
      .about-story-timeline .timeline-node.is-pivot {
        padding-left: 112px;
      }
    }

    /* Homepage hero AI team illustration */
    .home-ai-team-wrap {
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .home-ai-team-wrap #hero-console,
    .home-ai-team-wrap > .fc-show {
      display: none !important;
    }
    .home-ai-team-visual {
      position: relative;
      width: min(100%, 540px);
      margin: 0;
      animation: home-ai-team-float 7s ease-in-out infinite;
    }
    .home-ai-team-visual::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 14% 10% 8%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 45%, rgba(34,211,238,0.18), transparent 42%),
        radial-gradient(circle at 50% 70%, rgba(139,92,246,0.16), transparent 55%);
      filter: blur(30px);
      animation: home-ai-team-aura 4.8s ease-in-out infinite;
    }
    .home-ai-team-visual img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 62%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 62%, transparent 100%);
      filter: drop-shadow(0 34px 48px rgba(0,0,0,0.52));
    }
    .home-ai-team-glow {
      position: absolute;
      z-index: 2;
      left: 16%;
      right: 16%;
      bottom: 7%;
      height: 2px;
      border-radius: 50%;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.7), rgba(139,92,246,0.72), transparent);
      box-shadow: 0 0 24px rgba(34,211,238,0.38);
      opacity: 0.65;
    }
    .home-ai-role {
      --role-color: #22d3ee;
      position: absolute;
      z-index: 4;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 76px;
      padding: 7px 10px;
      border: 1px solid color-mix(in srgb, var(--role-color) 38%, transparent);
      border-radius: 10px;
      background: rgba(5,10,19,0.76);
      box-shadow: 0 8px 24px rgba(0,0,0,0.32), 0 0 18px color-mix(in srgb, var(--role-color) 14%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      pointer-events: none;
    }
    .home-ai-role::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 50%;
      width: 7px;
      height: 7px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: var(--role-color);
      box-shadow: 0 0 10px var(--role-color);
    }
    .home-ai-role b {
      color: var(--role-color);
      font: 900 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.1em;
    }
    .home-ai-role small {
      color: rgba(255,255,255,0.64);
      font-size: 9px;
      line-height: 1;
      white-space: nowrap;
    }
    .home-ai-role.role-ceo {
      left: 50%;
      top: 10%;
      transform: translateX(-50%);
    }
    .home-ai-role.role-strategy {
      left: -1%;
      top: 31%;
      --role-color: #38bdf8;
    }
    .home-ai-role.role-product {
      right: -1%;
      top: 28%;
      --role-color: #a78bfa;
    }
    .home-ai-role.role-data {
      left: -2%;
      bottom: 28%;
      --role-color: #2dd4bf;
    }
    .home-ai-role.role-dev {
      right: -2%;
      bottom: 28%;
      --role-color: #67e8f9;
    }
    .home-ai-role.role-ops {
      left: 50%;
      bottom: 3%;
      transform: translateX(-50%);
      --role-color: #818cf8;
    }
    @keyframes home-ai-team-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes home-ai-team-aura {
      50% { opacity: 0.72; transform: scale(1.05); }
    }
    @media (max-width: 900px) {
      .home-ai-team-wrap {
        min-height: auto;
        margin-top: 8px;
      }
      .home-ai-team-visual {
        width: min(88vw, 520px);
      }
    }
    @media (max-width: 520px) {
      .home-ai-role {
        min-width: 64px;
        padding: 6px 8px;
        transform: scale(0.88);
      }
      .home-ai-role.role-ceo,
      .home-ai-role.role-ops {
        transform: translateX(-50%) scale(0.88);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-ai-team-visual,
      .home-ai-team-visual::before {
        animation: none;
      }
    }

    /* Agent/About page-specific robot hero visuals */
    .page-robot-hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      background: transparent;
    }
    .about-hero-panel.page-robot-hero {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      overflow: visible;
    }
    .page-robot-visual {
      position: relative;
      width: min(100%, 520px);
      margin: 0;
      animation: page-robot-float 7.5s ease-in-out infinite;
    }
    .page-robot-visual::before {
      content: '';
      position: absolute;
      z-index: 0;
      inset: 16% 12% 7%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 45%, rgba(34,211,238,0.15), transparent 42%),
        radial-gradient(circle at 50% 72%, rgba(99,102,241,0.16), transparent 58%);
      filter: blur(28px);
      pointer-events: none;
    }
    .about-robot-hero .page-robot-visual::before {
      background:
        radial-gradient(circle at 50% 42%, rgba(56,189,248,0.16), transparent 42%),
        radial-gradient(circle at 66% 22%, rgba(245,158,11,0.1), transparent 34%);
    }
    .page-robot-visual img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 32px 48px rgba(0,0,0,0.48));
    }
    .page-robot-label {
      --label-color: #22d3ee;
      position: absolute;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 94px;
      padding: 8px 11px;
      border: 1px solid color-mix(in srgb, var(--label-color) 38%, transparent);
      border-radius: 11px;
      background: rgba(5,10,19,0.78);
      box-shadow: 0 10px 26px rgba(0,0,0,0.34), 0 0 18px color-mix(in srgb, var(--label-color) 14%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      pointer-events: none;
    }
    .page-robot-label::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 50%;
      width: 7px;
      height: 7px;
      transform: translateY(-50%);
      border-radius: 50%;
      background: var(--label-color);
      box-shadow: 0 0 10px var(--label-color);
    }
    .page-robot-label b {
      color: var(--label-color);
      font: 900 9px/1 'Outfit', sans-serif;
      letter-spacing: 0.1em;
    }
    .page-robot-label small {
      color: rgba(255,255,255,0.64);
      font-size: 9px;
      line-height: 1;
      white-space: nowrap;
    }
    .page-robot-label.label-top {
      left: 50%;
      top: 7%;
      transform: translateX(-50%);
      --label-color: #818cf8;
    }
    .page-robot-label.label-left {
      left: -2%;
      bottom: 26%;
    }
    .page-robot-label.label-right {
      right: -2%;
      bottom: 26%;
      --label-color: #a78bfa;
    }
    .about-robot-hero .page-robot-label.label-top {
      --label-color: #fbbf24;
    }
    .about-robot-hero .page-robot-label.label-left {
      --label-color: #38bdf8;
    }
    .about-robot-hero .page-robot-label.label-right {
      --label-color: #2dd4bf;
    }
    @keyframes page-robot-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @media (max-width: 900px) {
      .page-robot-visual {
        width: min(88vw, 520px);
      }
    }
    @media (max-width: 520px) {
      .page-robot-label {
        min-width: 78px;
        padding: 6px 8px;
        transform: scale(0.86);
      }
      .page-robot-label.label-top {
        transform: translateX(-50%) scale(0.86);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .page-robot-visual {
        animation: none;
      }
    }

    /* Robot hero technology motion effects */
    .home-ai-team-visual::after,
    .page-robot-visual::after {
      content: '';
      position: absolute;
      z-index: 2;
      left: 13%;
      top: 13%;
      width: 74%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        transparent 0 12%,
        rgba(34,211,238,0.72) 14%,
        transparent 17% 43%,
        rgba(129,140,248,0.62) 45%,
        transparent 48% 76%,
        rgba(45,212,191,0.56) 78%,
        transparent 82% 100%
      );
      -webkit-mask: radial-gradient(circle, transparent 67%, #000 68%, #000 69%, transparent 70%);
      mask: radial-gradient(circle, transparent 67%, #000 68%, #000 69%, transparent 70%);
      filter: drop-shadow(0 0 8px rgba(34,211,238,0.52));
      opacity: 0.72;
      animation: robot-orbit-scan 12s linear infinite;
      pointer-events: none;
    }
    .home-ai-team-visual img,
    .page-robot-visual img {
      animation: robot-neon-breathe 4.6s ease-in-out infinite;
    }
    .home-ai-team-glow {
      transform-origin: center;
      animation: robot-base-scan 3.2s ease-in-out infinite;
    }
    .home-ai-role,
    .page-robot-label {
      animation: robot-label-signal 2.8s ease-in-out infinite;
    }
    .home-ai-role:nth-of-type(3),
    .page-robot-label:nth-of-type(3) {
      animation-delay: 0.45s;
    }
    .home-ai-role:nth-of-type(4),
    .page-robot-label:nth-of-type(4) {
      animation-delay: 0.9s;
    }
    .home-ai-role:nth-of-type(5) { animation-delay: 1.35s; }
    .home-ai-role:nth-of-type(6) { animation-delay: 1.8s; }
    .home-ai-role:nth-of-type(7) { animation-delay: 2.25s; }
    @keyframes robot-orbit-scan {
      to { transform: rotate(360deg); }
    }
    @keyframes robot-neon-breathe {
      0%, 100% {
        filter: drop-shadow(0 30px 46px rgba(0,0,0,0.46)) brightness(0.98);
      }
      50% {
        filter:
          drop-shadow(0 32px 52px rgba(0,0,0,0.52))
          drop-shadow(0 0 13px rgba(34,211,238,0.16))
          brightness(1.06);
      }
    }
    @keyframes robot-base-scan {
      0%, 100% { opacity: 0.38; transform: scaleX(0.72); }
      50% { opacity: 0.86; transform: scaleX(1.06); }
    }
    @keyframes robot-label-signal {
      0%, 100% { opacity: 0.78; box-shadow: 0 8px 22px rgba(0,0,0,0.28); }
      50% {
        opacity: 1;
        box-shadow:
          0 10px 28px rgba(0,0,0,0.34),
          0 0 20px color-mix(in srgb, var(--role-color, var(--label-color)) 22%, transparent);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .home-ai-team-visual::after,
      .page-robot-visual::after,
      .home-ai-team-visual img,
      .page-robot-visual img,
      .home-ai-team-glow,
      .home-ai-role,
      .page-robot-label {
        animation: none !important;
      }
    }

    /* Unified dark glass navigation */
    #site-nav {
      top: 12px;
      padding: 0 20px;
      background: transparent;
      border-bottom: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #site-nav > div {
      position: relative;
      height: 64px !important;
      max-width: 1600px !important;
      padding: 0 12px 0 16px !important;
      border: 1px solid rgba(148,163,184,0.16);
      border-radius: 19px;
      background:
        linear-gradient(110deg, rgba(255,255,255,0.055), transparent 28%),
        rgba(7,11,20,0.82);
      box-shadow:
        0 18px 48px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.09);
      backdrop-filter: blur(24px) saturate(135%);
      -webkit-backdrop-filter: blur(24px) saturate(135%);
    }
    #site-nav > div::after {
      content: '';
      position: absolute;
      left: 18%;
      right: 18%;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.42), rgba(129,140,248,0.36), transparent);
      pointer-events: none;
    }
    /* #logo-btn > div {
      border: 1px solid rgba(255,255,255,0.16);
      background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.34), transparent 30%),
        linear-gradient(135deg, #6366f1, #0891b2) !important;
      box-shadow: 0 9px 22px rgba(99,102,241,0.28) !important;
    } */
    /* #logo-btn span {
      color: #f8fafc !important;
      font-family: 'Outfit', 'Noto Sans SC', sans-serif;
      letter-spacing: 0.015em !important;
    } */
    #site-nav div.desk-only {
      gap: 4px !important;
      padding: 5px;
      border: 1px solid rgba(255,255,255,0.055);
      border-radius: 14px;
      background: rgba(255,255,255,0.035);
    }
    #site-nav .nav-btn {
      min-height: 40px;
      padding: 0 17px;
      border: 1px solid transparent;
      border-radius: 11px;
      color: rgba(226,232,240,0.66);
      font-size: 13px !important;
      font-weight: 700;
      transition: color 0.28s, background 0.28s, border-color 0.28s, box-shadow 0.28s, transform 0.28s;
    }
    #site-nav .nav-btn::after {
      left: 50%;
      right: auto;
      bottom: 4px;
      width: 18px;
      height: 2px;
      border-radius: 99px;
      background: linear-gradient(90deg, #818cf8, #22d3ee);
      transform: translateX(-50%) scaleX(0);
      transform-origin: center;
    }
    #site-nav .nav-btn:hover {
      color: #fff;
      background: rgba(255,255,255,0.055);
      transform: translateY(-1px);
    }
    #site-nav .nav-btn.active {
      color: #fff;
      border-color: rgba(129,140,248,0.16);
      background:
        linear-gradient(135deg, rgba(99,102,241,0.18), rgba(14,165,233,0.11));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 20px rgba(0,0,0,0.16);
    }
    #site-nav .nav-btn.active::after {
      transform: translateX(-50%) scaleX(1);
    }
    #site-nav .btn-consult {
      min-height: 42px;
      padding: 0 21px;
      border: 1px solid rgba(165,180,252,0.24);
      border-radius: 12px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #2563eb 54%, #0891b2);
      box-shadow: 0 10px 26px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    #site-nav .btn-consult:hover {
      background: linear-gradient(135deg, #7375f4, #3473ed 54%, #0ea5b7);
      box-shadow: 0 14px 32px rgba(37,99,235,0.36), inset 0 1px 0 rgba(255,255,255,0.22);
      transform: translateY(-2px);
    }
    @media (max-width: 900px) {
      #site-nav {
        top: 8px;
        padding: 0 10px;
      }
      #site-nav > div {
        height: 56px !important;
        padding: 0 12px !important;
        border-radius: 16px;
      }
      /* #logo-btn > div {
        width: 29px !important;
        height: 29px !important;
        border-radius: 9px !important;
      } */
      /* #logo-btn span {
        font-size: 15px !important;
      } */
      #site-nav #mob-toggle {
        width: 38px;
        height: 38px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255,255,255,0.09) !important;
        border-radius: 11px;
        background: rgba(255,255,255,0.055) !important;
      }
      #site-nav #mob-toggle svg {
        color: #e2e8f0 !important;
      }
      #mob-menu {
        background:
          radial-gradient(circle at 90% 10%, rgba(99,102,241,0.18), transparent 30%),
          rgba(5,9,17,0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
      }
      .mob-nav-item {
        color: rgba(255,255,255,0.82);
        border-bottom-color: rgba(255,255,255,0.08);
      }
    }

    /* Full-width navigation bar */
    #site-nav {
      top: 0;
      padding: 0;
      background:
        linear-gradient(90deg, rgba(4,8,16,0.97), rgba(10,15,28,0.95) 52%, rgba(4,10,18,0.97));
      border-bottom: 1px solid rgba(129,140,248,0.16);
      box-shadow: 0 12px 36px rgba(0,0,0,0.18);
      backdrop-filter: blur(22px) saturate(130%);
      -webkit-backdrop-filter: blur(22px) saturate(130%);
    }
    #site-nav::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent 8%, rgba(99,102,241,0.28), rgba(34,211,238,0.38), rgba(99,102,241,0.28), transparent 92%);
      pointer-events: none;
    }
    #site-nav > div {
      height: 68px !important;
      max-width: 1600px !important;
      padding: 0 24px !important;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #site-nav > div::after {
      content: none;
    }
    #site-nav div.desk-only {
      gap: 10px !important;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    #site-nav .nav-btn {
      min-height: 68px;
      padding: 0 16px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    #site-nav .nav-btn:hover {
      background: rgba(255,255,255,0.035);
      transform: none;
    }
    #site-nav .nav-btn.active {
      border: 0;
      background: linear-gradient(180deg, transparent, rgba(99,102,241,0.10));
      box-shadow: none;
    }
    #site-nav .nav-btn::after {
      bottom: 0;
      width: 28px;
      height: 3px;
      background: linear-gradient(90deg, #818cf8, #22d3ee);
      box-shadow: 0 0 12px rgba(34,211,238,0.42);
    }
    #site-nav .btn-consult {
      min-height: 40px;
      border-radius: 999px;
    }
    @media (max-width: 900px) {
      #site-nav {
        top: 0;
        padding: 0;
      }
      #site-nav > div {
        height: 60px !important;
        padding: 0 18px !important;
        border-radius: 0;
      }
      #mob-menu {
        padding-top: 78px;
      }
    }

    #site-nav .btn-consult {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 0 17px;
      border: 1px solid rgba(103,232,249,0.22);
      border-radius: 10px;
      color: #e6faff;
      background:
        linear-gradient(135deg, rgba(34,211,238,0.09), rgba(99,102,241,0.08)),
        rgba(255,255,255,0.035);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 22px rgba(0,0,0,0.16);
      font-size: 13px !important;
      letter-spacing: 0.02em;
    }
    #site-nav .btn-consult::before {
      content: '';
      width: 6px;
      height: 6px;
      flex-shrink: 0;
      border-radius: 50%;
      background: #22d3ee;
      box-shadow: 0 0 10px rgba(34,211,238,0.78);
    }
    #site-nav .btn-consult:hover {
      color: #fff;
      border-color: rgba(103,232,249,0.4);
      background:
        linear-gradient(135deg, rgba(34,211,238,0.15), rgba(99,102,241,0.13)),
        rgba(255,255,255,0.05);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.11),
        0 10px 26px rgba(14,165,233,0.13);
      transform: translateY(-1px);
    }

    #site-nav .btn-consult {
      min-height: 42px;
      gap: 10px;
      padding: 0 18px;
      border: 1px solid rgba(165,180,252,0.42);
      border-radius: 11px;
      color: #fff;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent 52%),
        linear-gradient(135deg, #4f46b8, #2563a8 58%, #0e7490);
      box-shadow:
        0 4px 0 rgba(5,10,25,0.62),
        0 10px 24px rgba(37,99,235,0.22),
        inset 0 1px 0 rgba(255,255,255,0.22);
      font-weight: 800;
    }
    #site-nav .btn-consult::before {
      content: none;
    }
    #site-nav .btn-consult::after {
      content: '→';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: 'Outfit', sans-serif;
      font-size: 16px;
      line-height: 1;
      transition: transform 0.28s ease;
    }
    #site-nav .btn-consult:hover {
      border-color: rgba(199,210,254,0.58);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.2), transparent 52%),
        linear-gradient(135deg, #5b52c8, #2f6fba 58%, #10849f);
      box-shadow:
        0 5px 0 rgba(5,10,25,0.58),
        0 14px 30px rgba(37,99,235,0.28),
        inset 0 1px 0 rgba(255,255,255,0.26);
      transform: translateY(-2px);
    }
    #site-nav .btn-consult:hover::after {
      transform: translateX(3px);
    }
    #site-nav .btn-consult:active {
      box-shadow:
        0 1px 0 rgba(5,10,25,0.7),
        0 7px 16px rgba(37,99,235,0.2),
        inset 0 1px 0 rgba(255,255,255,0.18);
      transform: translateY(2px);
    }

    /* Navigation adapts after leaving the dark hero */
    #site-nav,
    #site-nav > div,
    #site-nav .site-logo-text,
    #site-nav .nav-btn,
    #site-nav .btn-consult {
      transition:
        color 0.38s ease,
        background 0.38s ease,
        border-color 0.38s ease,
        box-shadow 0.38s ease,
        transform 0.28s ease;
    }
    #site-nav.nav-is-scrolled {
      box-shadow: 0 8px 24px rgba(48,74,112,0.10);
    }
    #site-nav.nav-on-light {
      background:
        linear-gradient(90deg, rgba(248,250,252,0.94), rgba(241,245,249,0.91) 52%, rgba(248,250,252,0.94));
      border-bottom-color: rgba(99,102,241,0.12);
      box-shadow: 0 10px 32px rgba(48,74,112,0.10);
    }
    #site-nav.nav-on-light::after {
      background: linear-gradient(90deg, transparent 8%, rgba(99,102,241,0.18), rgba(14,165,233,0.24), rgba(99,102,241,0.18), transparent 92%);
    }
    #site-nav.nav-on-light .site-logo-text {
      color: #172033 !important;
    }
    #site-nav.nav-on-light .nav-btn {
      color: rgba(71,85,105,0.88) !important;
    }
    #site-nav.nav-on-light .nav-btn:hover {
      color: #0f172a !important;
      background: transparent !important;
    }
    #site-nav.nav-on-light .nav-btn.active {
      color: #0f172a !important;
      background: transparent !important;
    }
    #site-nav.nav-on-light .btn-consult {
      border-color: rgba(79,70,184,0.26);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.18), transparent 52%),
        linear-gradient(135deg, #5650b7, #2f67a8 58%, #187d91);
      box-shadow:
        0 3px 0 rgba(71,85,105,0.24),
        0 8px 20px rgba(37,99,235,0.17),
        inset 0 1px 0 rgba(255,255,255,0.28);
    }
    #site-nav.nav-on-light #mob-toggle {
      border-color: rgba(15,23,42,0.08) !important;
      background: rgba(15,23,42,0.045) !important;
    }
    #site-nav.nav-on-light #mob-toggle svg {
      color: #334155 !important;
    }

    /* Homepage service audience */
    .home-service-audience {
      position: relative;
      z-index: 4;
      padding: 60px 24px 40px;
      background: #f2f2f7;
    }
    .home-service-audience-inner {
      position: relative;
      display: flex;
      align-items: center;
      gap: 26px;
      max-width: 1600px;
      min-height: 112px;
      margin: 0 auto;
      padding: 22px 28px;
      border: 1px solid rgba(99,102,241,0.13);
      border-radius: 24px;
      background:
        radial-gradient(circle at 100% 0%, rgba(34,211,238,0.09), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.9));
      box-shadow: 0 18px 46px rgba(48,74,112,0.09), inset 0 1px 0 #fff;
    }
    .home-service-audience-title {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-shrink: 0;
    }
    .home-service-audience-title > span {
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(135deg, #6366f1, #0ea5e9);
      box-shadow: 0 12px 26px rgba(99,102,241,0.23);
    }
    .home-service-audience-title svg {
      width: 23px;
      height: 23px;
    }
    .home-service-audience-title small {
      display: block;
      margin-bottom: 6px;
      color: #6366f1;
      font: 800 10px/1 'Outfit', sans-serif;
      letter-spacing: 0.14em;
    }
    .home-service-audience-title h2 {
      color: #172033;
      font-size: 24px;
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -0.035em;
    }
    .home-service-audience-divider {
      width: 1px;
      height: 54px;
      flex-shrink: 0;
      background: linear-gradient(180deg, transparent, rgba(99,102,241,0.28), transparent);
    }
    .home-service-audience-inner > p {
      flex: 1;
      color: #475569;
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .home-service-audience-inner > p strong {
      position: relative;
      color: #2563a8;
      font-size: 1.12em;
      font-weight: 900;
    }
    .home-service-audience-inner > p strong::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -5px;
      height: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, #6366f1, #22d3ee);
      opacity: 0.5;
    }
    .home-service-audience-arrow {
      display: grid;
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      place-items: center;
      border: 1px solid rgba(37,99,168,0.13);
      border-radius: 50%;
      color: #2563a8;
      background: #eff6ff;
    }
    .home-service-audience-arrow svg {
      width: 18px;
      height: 18px;
    }
    @media (max-width: 720px) {
      .home-service-audience {
        padding-inline: 18px;
      }
      .home-service-audience-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 22px;
      }
      .home-service-audience-divider {
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(99,102,241,0.28), transparent);
      }
      .home-service-audience-arrow {
        position: absolute;
        right: 22px;
        bottom: 20px;
      }
      .home-service-audience-inner > p {
        padding-right: 48px;
        line-height: 1.6;
      }
    }

    
@media (max-width: 1440px) {
  .home-ai-team-wrap { transform: scale(1.1) !important; }
}
@media (max-width: 1280px) {
  .home-ai-team-wrap { transform: scale(1) !important; }
  .hero-inner > div { gap: 32px !important; }
}

@media (max-width: 1440px) {
  .hero-bg { padding: 120px 24px 60px; }
}
@media (max-width: 1280px) {
  .hero-bg { padding: 100px 24px 40px; }
}

/* Compact contact section: reduce oversized empty space */
.contact-section {
  padding: 20px 24px 48px !important;
}
.contact-card {
  grid-template-columns: 0.68fr 1.32fr !important;
  min-height: 0 !important;
}
.contact-head {
  padding: 30px 32px !important;
  justify-content: center !important;
}
.contact-kicker {
  width: fit-content !important;
  max-width: 100% !important;
}
.contact-head h2 {
  margin-bottom: 0 !important;
}
.contact-head p {
  max-width: 420px !important;
  margin-top: 16px !important;
  color: #53657a !important;
  line-height: 1.75 !important;
}
.contact-benefits {
  margin-top: 22px !important;
  gap: 10px !important;
}
.contact-benefits span {
  width: min(100%, 260px) !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,0.7) !important;
  box-shadow: 0 10px 24px rgba(48,74,112,0.06) !important;
}
.contact-grid {
  padding: 30px 32px !important;
  gap: 14px !important;
}
.qr-card {
  min-height: 108px !important;
  padding: 14px 16px !important;
}
@media (max-width: 900px) {
  .contact-card {
    grid-template-columns: 1fr !important;
  }
  .contact-head,
  .contact-grid {
    padding: 26px 24px !important;
  }
}

/* Fuller rhythm between service roadmap and AI base */
.service-stack-section {
  padding: 52px max(32px, 4vw) 42px !important;
}
.service-stack-inner {
  width: 100% !important;
  max-width: 1680px !important;
}
.service-stack-heading {
  margin-bottom: 22px !important;
}
.service-stack-grid {
  gap: clamp(34px, 5vw, 86px) !important;
  padding: 28px 0 34px !important;
}
.service-stack-card {
  min-height: 390px !important;
}
.service-stack-head {
  min-height: 210px !important;
  padding: 34px 34px 30px !important;
}
.service-stack-head p {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: rgba(15, 23, 42, 0.82) !important;
  line-height: 1.55 !important;
  margin-top: 10px !important;
  letter-spacing: -0.02em !important;
}
.service-stack-list {
  padding: 30px 34px 34px !important;
}
.service-stack-inner::before {
  top: 108px !important;
  height: 250px !important;
}
.service-stack-grid::before {
  left: 2% !important;
  right: 2% !important;
  top: 86px !important;
  bottom: 46px !important;
}
.base-band {
  padding: 24px max(18px, 2vw) 48px !important;
}
.base-band-inner {
  width: min(96vw, 1680px) !important;
  max-width: 1680px !important;
}
@media (max-width: 900px) {
  .service-stack-section {
    padding: 42px 20px 36px !important;
  }
  .service-stack-grid {
    padding: 0 !important;
  }
}

/* Bottom floating consultation bar */
.floating-consult {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 14px 28px;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(8, 96, 168, 0.98), rgba(10, 135, 198, 0.98), rgba(13, 170, 170, 0.96));
  box-shadow: 0 18px 50px rgba(15, 92, 168, 0.24), inset 0 1px 0 rgba(255,255,255,0.18);
  color: #fff;
}
.floating-consult-text {
  flex: 1;
  min-width: 0;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.floating-consult-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.floating-consult-form input {
  width: 210px;
  height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #172033;
  font-size: 15px;
  outline: none;
  background: rgba(255,255,255,0.96);
}
.floating-consult-form button {
  height: 46px;
  border: 0;
  border-radius: 8px;
  padding: 0 24px;
  background: #fff;
  color: #075c9e;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-consult-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.floating-consult-close {
  position: absolute;
  right: 10px;
  top: -10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(2, 32, 70, 0.62);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.floating-consult-mini {
  position: fixed;
  left: 56px;
  bottom: 46px;
  z-index: 79;
  width: 62px;
  height: 62px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(99,102,241,0.34), inset 0 1px 0 rgba(255,255,255,0.24);
}
.floating-consult-mini:hover {
  transform: translateY(-2px);
}
body.has-floating-consult {
  padding-bottom: 98px;
}
@media (max-width: 760px) {
  .floating-consult {
    left: 10px;
    right: 10px;
    bottom: 10px;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }
  .floating-consult-text {
    font-size: 14px;
  }
  .floating-consult-form {
    width: 100%;
  }
  .floating-consult-form input {
    flex: 1;
    width: auto;
  }
  .floating-consult-form button {
    padding: 0 14px;
  }
  .floating-consult-mini {
    left: 22px;
    bottom: 22px;
  }
}

/* Laptop viewport fit: keep hero + audience visible on MacBook screens */
@media (min-width: 901px) and (max-width: 1440px), (max-height: 900px) and (min-width: 901px) {
  .hero-bg {
    min-height: 68vh;
    padding: 88px 24px 26px !important;
  }

  .hero-inner {
    max-width: 1180px !important;
  }

  .hero-inner > div {
    gap: 36px !important;
  }

  .hero-copy {
    padding-right: 12px !important;
  }

  .hero-question {
    margin-bottom: 10px !important;
  }

  .hero-answer {
    margin-bottom: 16px !important;
  }

  .hero-question p,
  .hero-answer p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .hero-title {
    font-size: clamp(3rem, 4.1vw, 4.05rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
  }

  .hero-tagline {
    margin-bottom: 14px !important;
    padding: 10px 18px 10px 14px !important;
    border-radius: 13px !important;
  }

  .hero-tagline-accent {
    height: 22px !important;
  }

  .hero-tagline-text {
    font-size: clamp(1.15rem, 1.7vw, 1.38rem) !important;
  }

  .hero-anim-5 {
    gap: 8px !important;
  }

  .hero-anim-5 > span {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .home-ai-team-wrap {
    transform: scale(0.92) !important;
    transform-origin: center right !important;
  }

  .home-ai-team-visual {
    width: min(100%, 430px) !important;
  }

  .hero-fc {
    transform: scale(0.84);
  }

  .home-service-audience {
    margin-top: -2px;
    padding: 26px 24px 30px !important;
  }

  .home-service-audience-inner:has(.home-audience-cards) {
    padding: 30px 28px !important;
    gap: 24px !important;
  }

  .home-audience-cards {
    gap: 18px !important;
  }

  .home-audience-card {
    padding: 26px 22px !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .hero-bg {
    min-height: 64vh;
    padding-top: 78px !important;
    padding-bottom: 18px !important;
  }

  .hero-title {
    font-size: clamp(2.65rem, 3.7vw, 3.55rem) !important;
  }

  .home-ai-team-wrap {
    transform: scale(0.84) !important;
  }

  .home-ai-team-visual {
    width: min(100%, 390px) !important;
  }

  .home-service-audience {
    padding-top: 20px !important;
  }
}