:root {
      --ink: #08111f;
      --ink-2: #142033;
      --muted: #647084;
      --soft: #f5f8fb;
      --line: #dce4ee;
      --green: #57bf8e;
      --green-2: #7be3b0;
      --green-text: #185c46;
      --cyan: #22c7d8;
      --accent-blue: #2f6bff;
      --state-success: #18794e;
      --state-warning: #a15c00;
      --state-danger: #b42318;
      --white: #fff;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      color: var(--ink);
      background: #fff;
      letter-spacing: 0;
    }

    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    .page { overflow: hidden; background: #fff; }

    .container {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    .nav {
      position: fixed;
      z-index: 40;
      top: 0;
      left: 0;
      right: 0;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(7, 13, 24, .18);
      backdrop-filter: blur(6px);
      transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
    }

    .nav.is-solid {
      border-bottom-color: rgba(255,255,255,.12);
      background: rgba(7, 13, 24, .82);
      backdrop-filter: blur(18px);
      box-shadow: 0 16px 46px rgba(0,0,0,.2);
    }

    .nav-inner {
      width: min(1180px, calc(100% - 40px));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-weight: 800;
      white-space: nowrap;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--green), var(--cyan));
      box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 14px 34px rgba(34,199,216,.24);
    }

    .brand-mark svg { width: 20px; height: 20px; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: rgba(255,255,255,.74);
      font-size: 14px;
    }

    .nav-links a { white-space: nowrap; transition: color .2s ease; }
    .nav-links a:hover { color: #fff; }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      height: 38px;
      padding: 0 16px;
      border-radius: 8px;
      color: #06131f;
      background: #fff;
      font-weight: 800;
      font-size: 14px;
      white-space: nowrap;
      transition: transform .25s ease, background .25s ease;
    }

    .nav-cta:hover {
      transform: translateY(-1px);
      background: #dffdec;
    }

    .hero {
      position: relative;
      min-height: 100vh;
      display: grid;
      align-items: center;
      padding: 118px 0 72px;
      color: #fff;
      background:
        radial-gradient(circle at 80% 20%, rgba(34,199,216,.20), transparent 30%),
        radial-gradient(circle at 10% 72%, rgba(87,191,142,.20), transparent 28%),
        linear-gradient(118deg, rgba(7,13,24,.98), rgba(10,22,42,.96) 54%, rgba(13,44,52,.92)),
        url("qingge-home-hero.webp") center / cover no-repeat;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .24;
      background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.75) 65%, transparent 94%);
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 120px;
      background: linear-gradient(to bottom, transparent, #fff 76%);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(560px, 1.08fr) minmax(390px, .92fr);
      gap: 48px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid rgba(123,227,176,.35);
      background: rgba(87,191,142,.10);
      color: #a9f4d0;
      font-size: 14px;
      font-weight: 750;
    }

    .pulse {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green-2);
      box-shadow: 0 0 0 0 rgba(123,227,176,.56);
      animation: pulse 2.6s infinite;
      flex: 0 0 auto;
    }

    h1 {
      margin: 24px 0 20px;
      font-size: clamp(42px, 5vw, 62px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .hero-title-line {
      display: block;
      white-space: nowrap;
    }

    .hero-lead {
      max-width: 670px;
      margin: 0 0 30px;
      color: rgba(255,255,255,.78);
      font-size: 18px;
      line-height: 1.82;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 20px;
      border-radius: 8px;
      font-weight: 800;
      transition: transform .24s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease;
      border: 1px solid transparent;
    }

    .btn:hover { transform: translateY(-2px); }

    .btn-primary {
      background: linear-gradient(135deg, var(--green), var(--cyan));
      color: #06131f;
      box-shadow: 0 16px 34px rgba(34,199,216,.24);
    }

    .btn-ghost {
      border-color: rgba(255,255,255,.24);
      background: rgba(255,255,255,.06);
      color: #fff;
    }

    .hero-trust {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      max-width: 660px;
    }

    .trust-item {
      padding: 16px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(10px);
    }

    .trust-item strong {
      display: block;
      color: #fff;
      font-size: 25px;
      margin-bottom: 4px;
    }

    .trust-item span {
      color: rgba(255,255,255,.64);
      font-size: 13px;
      line-height: 1.58;
      white-space: nowrap;
    }

    .hero-orbit {
      position: relative;
      min-height: 560px;
    }

    .orbit-core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 178px;
      height: 178px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      color: #fff;
      border: 1px solid rgba(123,227,176,.4);
      background:
        radial-gradient(circle at 50% 34%, rgba(123,227,176,.34), transparent 48%),
        rgba(10,24,42,.82);
      box-shadow: 0 0 0 16px rgba(87,191,142,.05), 0 0 80px rgba(34,199,216,.26);
      backdrop-filter: blur(18px);
      animation: coreFloat 6s ease-in-out infinite;
    }

    .orbit-core strong {
      display: block;
      font-size: 20px;
      margin-bottom: 7px;
    }

    .orbit-core span {
      display: block;
      color: rgba(255,255,255,.66);
      font-size: 12px;
      line-height: 1.6;
      max-width: 118px;
      margin: 0 auto;
    }

    .orbit-line {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 430px;
      height: 430px;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
    }

    .orbit-line::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, transparent 0deg, rgba(87,191,142,.9) 22deg, rgba(34,199,216,.8) 42deg, transparent 72deg);
      mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
      animation: rotateRing 8s linear infinite;
    }

    .trigger-card {
      position: absolute;
      width: 178px;
      min-height: 96px;
      padding: 14px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(14px);
      box-shadow: 0 20px 54px rgba(0,0,0,.22);
      color: #fff;
      animation: cardFloat 7s ease-in-out infinite;
    }

    .trigger-card b {
      display: block;
      font-size: 14px;
      margin-bottom: 7px;
    }

    .trigger-card span {
      display: block;
      color: rgba(255,255,255,.66);
      font-size: 12px;
      line-height: 1.55;
    }

    .trigger-card i {
      display: inline-grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      margin-bottom: 10px;
      background: var(--tint);
      color: var(--tone);
      font-style: normal;
      font-weight: 900;
    }

    .tc-1 { left: 8px; top: 72px; --tone:#7be3b0; --tint:rgba(123,227,176,.15); }
    .tc-2 { right: 0; top: 56px; --tone:#22c7d8; --tint:rgba(34,199,216,.14); animation-delay: -.7s; }
    .tc-3 { left: 0; bottom: 76px; --tone:#a15c00; --tint:rgba(161,92,0,.12); animation-delay: -1.2s; }
    .tc-4 { right: 20px; bottom: 48px; --tone:#2f6bff; --tint:rgba(47,107,255,.14); animation-delay: -1.8s; }
    .tc-5 { left: 50%; top: 0; transform: translateX(-50%); --tone:#b42318; --tint:rgba(180,35,24,.10); animation-delay: -2.2s; }
    .tc-6 { left: 50%; bottom: 0; transform: translateX(-50%); --tone:#2f6bff; --tint:rgba(47,107,255,.14); animation-delay: -2.8s; }

    .hero-note {
      position: absolute;
      left: 50%;
      bottom: 116px;
      transform: translateX(-50%);
      width: 250px;
      padding: 13px 15px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(6,15,28,.68);
      color: rgba(255,255,255,.72);
      font-size: 12px;
      line-height: 1.6;
      text-align: center;
    }

    .hero-system {
      position: relative;
      min-height: 520px;
      align-self: center;
      transform: translate(28px, -18px);
      border-radius: 0;
      border: 0;
      background:
        radial-gradient(circle at 50% 46%, rgba(87,191,142,.26), transparent 34%),
        radial-gradient(circle at 64% 22%, rgba(34,199,216,.16), transparent 28%),
        radial-gradient(circle at 28% 72%, rgba(47,107,255,.12), transparent 26%);
      overflow: visible;
      box-shadow: none;
    }

    .hero-system::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 46%;
      width: 390px;
      height: 390px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
      background-size: 32px 32px;
      border: 1px solid rgba(255,255,255,.10);
      opacity: .62;
      mask-image: radial-gradient(circle at 50% 50%, #000, transparent 74%);
    }

    .system-paths {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .system-path {
      fill: none;
      stroke: rgba(255,255,255,.18);
      stroke-width: 1.5;
    }

    .system-flow {
      fill: none;
      stroke: url(#heroFlow);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 52 420;
      animation: heroFlow 4.2s linear infinite;
      filter: drop-shadow(0 0 9px rgba(34,199,216,.45));
    }

    .system-core {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 45%;
      width: 188px;
      height: 188px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      display: grid;
      place-items: center;
      text-align: center;
      background:
        radial-gradient(circle at 45% 34%, rgba(123,227,176,.38), transparent 45%),
        rgba(8,17,31,.82);
      border: 1px solid rgba(123,227,176,.42);
      box-shadow: 0 0 0 18px rgba(87,191,142,.05), 0 0 76px rgba(34,199,216,.24);
      animation: coreFloat 6s ease-in-out infinite;
    }

    .system-core b {
      display: block;
      font-size: 24px;
      line-height: 1.2;
      margin-bottom: 7px;
    }

    .system-core span {
      display: block;
      color: rgba(255,255,255,.66);
      font-size: 12px;
      line-height: 1.55;
      max-width: 122px;
      margin: 0 auto;
    }

    .system-node {
      position: absolute;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 118px;
      padding: 10px 11px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(7,17,31,.74);
      color: rgba(255,255,255,.86);
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 42px rgba(0,0,0,.23);
      font-size: 13px;
      font-weight: 750;
      animation: cardFloat 7s ease-in-out infinite;
    }

    .system-node i {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--tint);
      color: var(--tone);
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .system-node svg,
    .process-source svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .sn-1 { left: 22px; top: 34px; --tone:#7be3b0; --tint:rgba(123,227,176,.15); }
    .sn-2 { left: 0; top: 168px; --tone:#22c7d8; --tint:rgba(34,199,216,.14); animation-delay: -.6s; }
    .sn-3 { left: 32px; bottom: 118px; --tone:#a15c00; --tint:rgba(161,92,0,.12); animation-delay: -1.1s; }
    .sn-4 { right: 14px; top: 52px; --tone:#2f6bff; --tint:rgba(47,107,255,.14); animation-delay: -1.4s; }
    .sn-5 { right: 4px; top: 202px; --tone:#b42318; --tint:rgba(180,35,24,.10); animation-delay: -1.9s; }
    .sn-6 { right: 40px; bottom: 108px; --tone:#2f6bff; --tint:rgba(47,107,255,.14); animation-delay: -2.4s; }

    .system-output {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      padding: 9px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(8,17,31,.68);
      backdrop-filter: blur(12px);
    }

    .system-output span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      color: rgba(255,255,255,.78);
      background: rgba(255,255,255,.08);
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }

    .section {
      position: relative;
      padding: 96px 0;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 32px;
      align-items: end;
      margin-bottom: 36px;
    }

    .section-kicker {
      color: var(--green-text);
      font-size: 14px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    h2 {
      margin: 0;
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.16;
      letter-spacing: 0;
    }

    .section-desc {
      max-width: 500px;
      color: var(--muted);
      line-height: 1.82;
      font-size: 16px;
      margin: 0;
    }
.section-link{display:inline-flex;align-items:center;margin-top:10px;color:var(--green-text);font-weight:850;text-decoration:none;transition:color .2s ease,transform .2s ease}.section-link:hover{color:#0f7a55;transform:translateX(2px)}

    .flow-section {
      padding-top: 84px;
      background:
        linear-gradient(180deg, #fff 0%, #f7fafc 100%);
    }

    .flow-stage {
      position: relative;
      min-height: 600px;
      border-radius: 8px;
      padding: 34px;
      overflow: hidden;
      background:
        linear-gradient(rgba(8,17,31,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,17,31,.055) 1px, transparent 1px),
        #fff;
      background-size: 42px 42px;
      border: 1px solid var(--line);
      box-shadow: 0 22px 70px rgba(8,17,31,.08);
    }

    .flow-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 20%, rgba(87,191,142,.16), transparent 28%),
        radial-gradient(circle at 78% 80%, rgba(34,199,216,.13), transparent 30%);
      pointer-events: none;
    }

    .flow-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .flow-base {
      fill: none;
      stroke: rgba(100,112,132,.2);
      stroke-width: 2;
      stroke-linecap: round;
    }

    .flow-live {
      fill: none;
      stroke: url(#flowGradient);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 80 760;
      animation: flowRun 4.8s linear infinite;
      filter: drop-shadow(0 0 9px rgba(34,199,216,.35));
    }

    .flow-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: auto auto auto;
      gap: 24px;
      min-height: 532px;
      align-items: center;
    }

    .flow-node {
      min-height: 146px;
      padding: 20px;
      border-radius: 8px;
      border: 1px solid rgba(220,228,238,.9);
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(12px);
      box-shadow: 0 14px 34px rgba(8,17,31,.06);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }

    .flow-node:hover {
      transform: translateY(-5px);
      border-color: rgba(87,191,142,.55);
      box-shadow: 0 22px 52px rgba(8,17,31,.1);
    }

    .flow-node small {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 24px;
      border-radius: 999px;
      margin-bottom: 13px;
      background: var(--tint);
      color: var(--tone);
      font-weight: 900;
      font-size: 12px;
    }

    .flow-node h3 {
      margin: 0 0 9px;
      font-size: 19px;
    }

    .flow-node p {
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 14px;
    }

    .node-1 { grid-column: 1; grid-row: 1; --tone:#0ea5e9; --tint:#e0f2fe; }
    .node-2 { grid-column: 2; grid-row: 1; --tone:#2f6bff; --tint:#eef3ff; }
    .node-3 { grid-column: 3; grid-row: 1; --tone:#185c46; --tint:#e9fbf2; }
    .node-4 { grid-column: 4; grid-row: 1; --tone:#a15c00; --tint:#fff5e8; }
    .node-5 { grid-column: 4; grid-row: 2; --tone:#b42318; --tint:#fff1f0; }
    .node-6 { grid-column: 3; grid-row: 3; --tone:#22c7d8; --tint:#e6fbfd; }
    .node-7 { grid-column: 2; grid-row: 3; --tone:#07c160; --tint:#e8fff2; }
    .node-8 { grid-column: 1; grid-row: 3; --tone:#2f6bff; --tint:#eef3ff; }

    .trigger-strip {
      position: relative;
      z-index: 2;
      margin-top: 28px;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    .trigger-pill {
      min-height: 72px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid rgba(220,228,238,.9);
      background: rgba(255,255,255,.76);
      color: var(--ink-2);
      font-size: 13px;
      line-height: 1.45;
    }

    .trigger-pill b {
      display: block;
      margin-bottom: 4px;
      color: var(--green-text);
      font-size: 12px;
    }

    .process-map {
      position: relative;
      min-height: 700px;
      border-radius: 8px;
      padding: 46px;
      overflow: hidden;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 50% 42%, rgba(87,191,142,.13), transparent 28%),
        radial-gradient(circle at 76% 68%, rgba(34,199,216,.11), transparent 26%),
        #fff;
      box-shadow: 0 22px 70px rgba(8,17,31,.08);
    }

    .process-map::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(8,17,31,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,17,31,.05) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at 50% 50%, #000, transparent 82%);
    }

    .process-svg {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .process-base {
      fill: none;
      stroke: rgba(100,112,132,.22);
      stroke-width: 2;
      stroke-linecap: round;
    }

    .process-live {
      fill: none;
      stroke: url(#processGradient);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 76 640;
      animation: processFlow 5.4s linear infinite;
      filter: drop-shadow(0 0 8px rgba(34,199,216,.32));
    }

    .process-inputs,
    .process-main {
      display: contents;
    }

    .process-node {
      position: absolute;
      z-index: 2;
      border-radius: 999px;
      border: 1px solid rgba(220,228,238,.95);
      background: rgba(255,255,255,.9);
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 38px rgba(8,17,31,.07);
      color: var(--ink-2);
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
      will-change: transform;
    }

    .process-node:hover {
      z-index: 4;
      transform: translateY(-6px) scale(1.018);
      border-color: color-mix(in srgb, var(--tone), transparent 42%);
      background: rgba(255,255,255,.96);
      box-shadow: 0 24px 58px rgba(8,17,31,.12), 0 0 0 5px color-mix(in srgb, var(--tone), transparent 88%);
    }

    .process-source {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 150px;
      height: 48px;
      padding: 0 14px;
      font-size: 14px;
      font-weight: 800;
    }

    .process-source i,
    .process-step i,
    .process-sink i {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--tint);
      color: var(--tone);
      font-style: normal;
      font-size: 12px;
      font-weight: 900;
      flex: 0 0 auto;
    }

    .process-step {
      width: 160px;
      min-height: 116px;
      padding: 15px;
      border-radius: 8px;
    }

    .process-step i {
      margin-bottom: 10px;
    }

    .process-step h3,
    .process-sink h3 {
      margin: 0 0 6px;
      font-size: 17px;
    }

    .process-step p,
    .process-sink p {
      margin: 0;
      color: var(--muted);
      line-height: 1.58;
      font-size: 13px;
    }

    .process-sink {
      width: 168px;
      min-height: 126px;
      padding: 16px;
      border-radius: 8px;
    }

    .ps-1 { left: 54px; top: 54px; --tone:#07c160; --tint:#e8fff2; }
    .ps-2 { left: 54px; top: 132px; --tone:#0ea5e9; --tint:#e0f2fe; }
    .ps-3 { left: 54px; top: 210px; --tone:#a15c00; --tint:#fff5e8; }
    .ps-4 { left: 54px; top: 288px; --tone:#2f6bff; --tint:#eef3ff; }
    .ps-5 { left: 54px; top: 366px; --tone:#b42318; --tint:#fff1f0; }
    .ps-6 { left: 54px; top: 444px; --tone:#64748b; --tint:#f1f5f9; }

    .pst-0 { left: 258px; top: 220px; --tone:#57bf8e; --tint:#e9fbf2; }
    .pst-1 { left: 438px; top: 220px; --tone:#2f6bff; --tint:#eef3ff; }
    .pst-2 { left: 618px; top: 220px; --tone:#57bf8e; --tint:#e9fbf2; }
    .pst-3 { left: 798px; top: 220px; --tone:#22c7d8; --tint:#e6fbfd; }
    .pst-4 { left: 798px; top: 420px; --tone:#a15c00; --tint:#fff5e8; }
    .pst-5 { left: 618px; top: 520px; --tone:#b42318; --tint:#fff1f0; }
    .pst-6 { left: 438px; top: 520px; --tone:#2f6bff; --tint:#eef3ff; }

    .pk-1 { left: 974px; top: 296px; --tone:#07c160; --tint:#e8fff2; }
    .pk-2 { left: 974px; top: 470px; --tone:#2f6bff; --tint:#eef3ff; }

    .capability {
      background: #07111f;
      color: #fff;
      overflow: hidden;
    }

    .capability::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      background:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: radial-gradient(circle at 50% 45%, #000, transparent 76%);
    }

    .capability .section-desc { color: rgba(255,255,255,.66); }

    .cap-grid {
      display: flex;
      gap: 12px;
      min-height: 308px;
    }

    .cap-row {
      display: contents;
    }

    .cap-card {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      min-height: 308px;
      padding: 22px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition:
        flex-grow .46s cubic-bezier(0.34, 1.18, 0.64, 1),
        opacity .3s ease,
        transform .36s ease,
        padding .36s ease,
        background .3s ease,
        border-color .3s ease;
      will-change: flex-grow, transform, opacity;
    }

    .cap-card::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 18px;
      height: 2px;
      background: linear-gradient(90deg, var(--tone), transparent);
      opacity: .38;
      transform-origin: left;
      animation: lineBreathe 3.6s ease-in-out infinite;
    }

    .cap-card.is-active {
      flex: 4 1 0;
      opacity: 1;
      padding-inline: 24px;
    }

    .cap-grid:hover .cap-card,
    .cap-grid.has-hovered .cap-card {
      flex: .9 1 0;
      opacity: .82;
      padding-inline: 14px;
    }

    .cap-grid .cap-card:hover,
    .cap-grid .cap-card.is-hovered {
      flex: 4.6 1 0;
      opacity: 1;
      transform: translateY(-8px);
      padding-inline: 24px;
    }

    .cap-card:hover,
    .cap-card.is-hovered {
      border-color: rgba(123,227,176,.42);
      background: rgba(87,191,142,.08);
    }

    .cap-card i {
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      margin-bottom: 18px;
      background: var(--tint);
      color: var(--tone);
      font-style: normal;
      font-weight: 900;
    }

    .cap-card h3 {
      margin: 0 0 10px;
      font-size: 15px;
      line-height: 1.42;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

    .cap-card p {
      margin: 0;
      color: rgba(255,255,255,.68);
      line-height: 1.56;
      font-size: 12px;
      min-width: 0;
      max-width: none;
      opacity: .58;
      max-height: 142px;
      overflow: hidden;
      transition: opacity .34s ease, max-height .34s ease, font-size .3s ease, line-height .3s ease;
    }

    .cap-card.is-active h3 {
      font-size: 23px;
      line-height: 1.28;
      white-space: normal;
    }

    .cap-grid:hover .cap-card:not(:hover) h3,
    .cap-grid.has-hovered .cap-card:not(.is-hovered) h3 {
      font-size: 15px;
      white-space: normal;
    }

    .cap-card:hover h3,
    .cap-card.is-hovered h3 {
      font-size: 23px;
      line-height: 1.28;
      white-space: normal;
    }

    .cap-card.reveal,
    .cap-card.reveal.show {
      transition:
        flex-grow .46s cubic-bezier(0.34, 1.18, 0.64, 1),
        opacity .3s ease,
        transform .36s ease,
        padding .36s ease,
        background .3s ease,
        border-color .3s ease;
      transition-delay: 0s !important;
    }

    .cap-card:hover p,
    .cap-card.is-active p,
    .cap-card.is-hovered p {
      opacity: 1;
      max-height: 220px;
      font-size: 15px;
      line-height: 1.76;
    }

    .cap-grid:hover .cap-card.is-active:not(:hover) p,
    .cap-grid.has-hovered .cap-card.is-active:not(.is-hovered) p {
      opacity: .58;
      max-height: 142px;
      font-size: 12px;
      line-height: 1.56;
    }

    .versions { background: var(--soft); }

    .version-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .version-grid::before {
      content: "";
      position: absolute;
      left: 7%;
      right: 7%;
      top: 62px;
      height: 2px;
      display: none;
    }

    .version-grid::after {
      content: "";
      position: absolute;
      left: 7%;
      top: 61px;
      width: 18%;
      height: 3px;
      border-radius: 999px;
      display: none;
    }

    .version {
      position: relative;
      z-index: 1;
      min-height: 292px;
      padding: 22px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
      overflow: hidden;
    }

    .version::before {
      content: "";
      position: absolute;
      inset: auto 18px 18px 18px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--tone), transparent);
      opacity: .34;
      transform: scaleX(.38);
      transform-origin: left;
      transition: transform .35s ease, opacity .35s ease;
    }

    .version:hover::before {
      transform: scaleX(1);
      opacity: .76;
    }

    .version-grid:has(.version:hover) .version:not(:hover) {
      transform: scale(.96);
      opacity: .72;
    }

    .version:hover {
      transform: translateY(-14px) scale(1.08);
      border-color: rgba(47,107,255,.28);
      box-shadow: 0 24px 58px rgba(8,17,31,.14);
      z-index: 3;
    }

    .version:nth-child(2) { margin-top: 26px; }
    .version:nth-child(3) { margin-top: 52px; }
    .version:nth-child(4) { margin-top: 22px; }

    .version-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }

    .icon-box {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: var(--tint);
      color: var(--tone);
      font-weight: 900;
    }

    .tag {
      color: var(--tone);
      background: var(--tint);
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 12px;
      font-weight: 800;
    }

    .version h3 { margin: 0 0 10px; font-size: 22px; }
    .version p {
      margin: 0;
      color: var(--muted);
      line-height: 1.74;
      font-size: 15px;
    }
    .version a {
      margin-top: 22px;
      color: var(--tone);
      font-weight: 900;
      font-size: 14px;
    }

    .scenes-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .scene-card {
      position: relative;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 24px;
      border-radius: 8px;
      border: 1px solid rgba(226,232,240,.82);
      background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--tone), transparent 88%), transparent 34%),
        #fff;
      box-shadow: 0 12px 32px rgba(8,17,31,.04);
      overflow: hidden;
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    }

    .scene-card::before {
      content: "";
      display: none;
    }

    .scene-card::after {
      content: "";
      display: grid;
      place-items: center;
      position: absolute;
      right: 18px;
      top: 18px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--tone), transparent 88%);
      color: var(--tone);
      font-size: 12px;
      font-weight: 900;
      pointer-events: none;
      transition: transform .25s ease, background .25s ease;
    }

    .scene-card:nth-child(1)::after { content: "01"; }
    .scene-card:nth-child(2)::after { content: "02"; }
    .scene-card:nth-child(3)::after { content: "03"; }
    .scene-card:nth-child(4)::after { content: "04"; }
    .scene-card:nth-child(5)::after { content: "05"; }
    .scene-card:nth-child(6)::after { content: "06"; }

    .scene-card:nth-child(n) {
      grid-column: span 2;
      min-height: 268px;
    }

    .scene-card:hover {
      transform: translateY(-6px);
      border-color: rgba(87,191,142,.55);
      box-shadow: 0 18px 44px rgba(8,17,31,.08);
      background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--tone), transparent 82%), transparent 34%),
        #fff;
    }

    .scene-card:hover::after {
      transform: scale(1.08);
      background: color-mix(in srgb, var(--tone), transparent 82%);
    }

    .scene-card:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--tone), #ffffff 24%);
      outline-offset: 3px;
    }

    .scene-mark {
      min-height: 116px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: var(--tone);
      background:
        linear-gradient(135deg, var(--tint), #fff);
      font-weight: 900;
      font-size: 28px;
    }

    .scene-visual {
      display: none;
    }

    .scene-visual::before {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 8px;
      border: 1px dashed color-mix(in srgb, var(--tone), transparent 42%);
    }

    .scene-visual::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 50%;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--tone), transparent);
      animation: scanLine 3.8s ease-in-out infinite;
      opacity: .68;
    }

    .scene-visual span {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--tone);
      box-shadow: 0 0 0 8px color-mix(in srgb, var(--tone), transparent 88%), 0 0 24px color-mix(in srgb, var(--tone), transparent 55%);
    }

    .scene-visual span:nth-child(1) { left: 24px; top: 24px; }
    .scene-visual span:nth-child(2) { right: 28px; top: 42px; width: 14px; height: 14px; }
    .scene-visual span:nth-child(3) { left: 46%; bottom: 24px; width: 12px; height: 12px; }

    .scene-card h3 { margin: 0 0 8px; font-size: 21px; }
    .scene-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.76;
      font-size: 15px;
    }

    .scene-card ul {
      margin: 12px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 7px;
      color: #475569;
      font-size: 13px;
      line-height: 1.5;
    }

    .scene-card li {
      display: flex;
      gap: 7px;
      align-items: flex-start;
    }

    .scene-card li::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-top: 7px;
      background: var(--tone);
      flex: 0 0 auto;
    }

    .scene-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      color: var(--tone);
      font-size: 14px;
      font-weight: 900;
    }

    .proof {
      background:
        radial-gradient(circle at 78% 20%, rgba(87,191,142,.12), transparent 30%),
        #fff;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 26px;
      align-items: center;
    }

    .proof-panel {
      position: relative;
      top: auto;
      padding: 28px;
      border:1px solid rgba(255,255,255,.16);
      border-radius: 16px;
      background: rgba(7,18,30,.72);
      box-shadow:0 24px 64px rgba(5,20,15,.17),inset 0 1px 0 rgba(255,255,255,.1);
      backdrop-filter:blur(24px) saturate(135%);
      color: #fff;
      overflow: hidden;
    }

    .proof-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 70% 20%, rgba(34,199,216,.22), transparent 34%);
    }

    .proof-panel > * { position: relative; z-index: 1; }
    .proof-panel p {
      color: rgba(255,255,255,.68);
      line-height: 1.8;
    }

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

    .proof-actions a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 46px;
      padding: 10px 12px;
      border-radius: 8px;
      color: rgba(255,255,255,.86);
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      font-size: 13px;
      font-weight: 800;
      transition: transform .25s ease, background .25s ease, border-color .25s ease;
    }

    .proof-actions a:hover {
      transform: translateY(-2px);
      background: rgba(87,191,142,.14);
      border-color: rgba(123,227,176,.35);
    }

    .proof-actions span {
      color: var(--green-2);
      font-size: 14px;
    }

    .source-list {
      display: grid;
      gap: 12px;
    }

    .source {
      display: grid;
      grid-template-columns: 132px 1fr;
      gap: 18px;
      padding: 18px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.5);
      box-shadow:0 14px 36px rgba(24,78,54,.06),inset 0 1px 0 rgba(255,255,255,.46);
      backdrop-filter: blur(20px) saturate(145%);
    }

    .source b {
      color: var(--green-text);
      font-size: 14px;
    }

    .source h3 { margin: 0 0 8px; font-size: 18px; }
    .source p {
      margin: 0;
      color: var(--muted);
      line-height: 1.72;
      font-size: 15px;
    }

    .roadmap { background: #07111f; color: #fff; }
    .roadmap .section-desc { color: rgba(255,255,255,.66); }

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

    .phase-grid::before {
      content: "";
      display: none;
      position: absolute;
      left: 7%;
      right: 7%;
      top: 34px;
      height: 1px;
      background: linear-gradient(90deg, rgba(87,191,142,.15), rgba(34,199,216,.38), rgba(143,163,255,.18));
    }

    .phase {
      position: relative;
      z-index: 1;
      grid-column: span 3;
      min-height: 266px;
      padding: 22px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.1);
      background:
        radial-gradient(circle at 86% 14%, color-mix(in srgb, var(--tone), transparent 78%), transparent 34%),
        rgba(255,255,255,.055);
      overflow: hidden;
      transition: transform .34s ease, background .34s ease, border-color .34s ease;
    }

    .phase:hover {
      transform: translateY(-6px);
      border-color: color-mix(in srgb, var(--tone), transparent 38%);
      background: rgba(255,255,255,.085);
    }

    .phase::after {
      content: "";
      display: none;
    }

    .phase small,
    .phase h3,
    .phase p,
    .phase ul {
      position: relative;
      z-index: 1;
    }

    .phase small {
      display: block;
      padding-left: 0;
    }

    .phase::before {
      content: "";
      display: none;
    }

    .phase small {
      color: var(--tone);
      font-weight: 900;
      font-size: 13px;
    }

    .phase h3 {
      margin: 14px 0 10px;
      font-size: 22px;
    }

    .phase p {
      margin: 0 0 18px;
      color: rgba(255,255,255,.68);
      line-height: 1.74;
      font-size: 15px;
    }

    .phase ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
      color: rgba(255,255,255,.72);
      font-size: 13px;
      line-height: 1.55;
    }

    .phase li {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .phase li::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-top: 7px;
      background: var(--tone);
      flex: 0 0 auto;
    }

    .ops-preview {
      grid-column: span 12;
      min-height: 270px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 50% 26%, rgba(87,191,142,.22), transparent 28%),
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        rgba(255,255,255,.055);
      background-size: auto, 38px 38px, 38px 38px, auto;
      padding: 24px;
      position: relative;
      overflow: hidden;
    }

    .ops-preview h3 {
      margin: 0 0 10px;
      font-size: 24px;
    }

    .ops-preview p {
      margin: 0;
      color: rgba(255,255,255,.66);
      line-height: 1.72;
      font-size: 15px;
    }

    .ops-screen {
      position: relative;
      margin-top: 22px;
      min-height: 142px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(7,17,31,.66);
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 58px 18px 18px;
    }

    .ops-screen::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 40px;
      background: rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .ops-row {
      position: relative;
      left: auto;
      right: auto;
      height: 46px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      color: rgba(255,255,255,.75);
      font-size: 13px;
      animation: rowFloat 5s ease-in-out infinite;
    }

    .ops-row b {
      color: #fff;
      font-size: 14px;
    }

    .ops-row:nth-child(1) { animation-delay: 0s; }
    .ops-row:nth-child(2) { animation-delay: -.8s; }
    .ops-row:nth-child(3) { animation-delay: -1.6s; }
    .ops-row:nth-child(4) { animation-delay: -2.4s; }

    .ops-orbit { display: none; }

    .final-cta {
      padding: 90px 0 106px;
      background:
        linear-gradient(135deg, rgba(87,191,142,.12), rgba(34,199,216,.08)),
        #fff;
    }

    .cta-box {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      padding: 34px;
      border-radius: 8px;
      border: 1px solid rgba(87,191,142,.28);
      background: #fff;
      box-shadow: 0 22px 70px rgba(8,17,31,.08);
    }

    .cta-box h2 { margin-bottom: 12px; }
    .cta-box p {
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
    }

    .footer {
      background: #07111f;
      color: rgba(255,255,255,.72);
      padding: 54px 0 26px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
      gap: 28px;
      padding-bottom: 34px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .footer-brand {
      display: grid;
      gap: 14px;
      max-width: 320px;
    }

    .footer-brand p {
      margin: 0;
      color: rgba(255,255,255,.62);
      line-height: 1.8;
      font-size: 14px;
    }

    .footer-title {
      margin: 0 0 14px;
      color: #fff;
      font-size: 15px;
      font-weight: 900;
    }

    .footer-links {
      display: grid;
      gap: 10px;
    }

    .footer-links a {
      color: rgba(255,255,255,.62);
      font-size: 14px;
      transition: color .2s ease, transform .2s ease;
    }

    .footer-links a:hover {
      color: var(--green-2);
      transform: translateX(3px);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding-top: 22px;
      color: rgba(255,255,255,.46);
      font-size: 13px;
      flex-wrap: wrap;
    }

    .footer-meta {
      display: grid;
      gap: 18px;
      padding-top: 22px;
      color: rgba(255,255,255,.52);
      font-size: 13px;
    }

    .footer-line,
    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .footer-line a,
    .footer-legal a,
    .footer-contact a {
      color: rgba(255,255,255,.62);
      transition: color .2s ease;
    }

    .footer-line a:hover,
    .footer-legal a:hover,
    .footer-contact a:hover {
      color: var(--green-2);
    }

    .footer-sep {
      color: rgba(255,255,255,.18);
    }

    .friend-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .friend-label {
      color: rgba(255,255,255,.38);
      white-space: nowrap;
    }

    .footer-legal {
      justify-content: space-between;
      gap: 16px 28px;
    }

    .footer-records,
    .footer-contact {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 18px;
    }

    .icp-record,
    .police-record {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .icp-record svg,
    .police-record svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
    }

    .floating-contact {
      position: fixed;
      right: 12px;
      bottom: 22px;
      z-index: 60;
      display: grid;
      gap: 8px;
      width: 211px;
      padding: 8px;
      border-radius: 18px;
      background: rgba(247, 255, 251, .88);
      border: 1px solid rgba(87,191,142,.26);
      box-shadow: 0 24px 64px rgba(19, 64, 44, .18);
      backdrop-filter: blur(18px);
      transition: opacity .14s ease, transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }

    .float-toggle {
      min-height: 46px;
      padding: 0 14px;
      border: 0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #06131f;
      background: linear-gradient(135deg, var(--green), var(--cyan));
      box-shadow: 0 12px 30px rgba(87,191,142,.22);
      font-family: inherit;
      font-weight: 900;
      cursor: pointer;
      transition: transform .16s ease, box-shadow .16s ease;
    }

    .float-toggle:hover {
      transform: translateY(-3px);
      box-shadow: 0 22px 54px rgba(0,0,0,.22);
    }

    .float-toggle-icon {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.32);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
    }

    .float-toggle-icon svg {
      width: 17px;
      height: 17px;
      stroke: currentColor;
      stroke-width: 2.35;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .float-toggle-text {
      white-space: nowrap;
    }

    .float-menu {
      display: grid;
      gap: 7px;
      max-height: min(540px, calc(100vh - 28px));
      opacity: 1;
      transform: translateY(0);
      overflow: visible;
      visibility: visible;
      transition: max-height .16s ease, opacity .12s ease, transform .14s ease, visibility .12s ease;
    }

    .floating-contact:not(.is-collapsed) .float-toggle {
      display: none;
    }

    .float-main,
    .float-phone,
    .float-quick a,
    .float-top {
      border-radius: 8px;
      transition: transform .32s cubic-bezier(.34,1.56,.64,1), background .24s ease, border-color .24s ease;
    }

    .float-main {
      position: relative;
      min-height: 66px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 11px 36px 11px 12px;
      color: #06131f;
      background: linear-gradient(135deg, var(--green), var(--cyan));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
      font-weight: 900;
    }

    .float-main-link {
      display: grid;
      gap: 4px;
    }

    .float-main span {
      font-size: 12px;
      color: rgba(255,255,255,.88);
    }

    .float-main strong {
      font-size: 17px;
      line-height: 1.22;
      color: #fff;
    }

    .float-close {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: rgba(6,19,31,.76);
      background: rgba(255,255,255,.42);
      font-size: 21px;
      line-height: 1;
      font-family: inherit;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
    }

    .float-close:hover {
      background: rgba(255,255,255,.7);
      transform: rotate(90deg);
    }

    .float-phone {
      min-height: 40px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 0;
      padding: 6px 10px;
      color: #133526;
      background: rgba(255,255,255,.52);
      border: 1px solid rgba(87,191,142,.18);
    }

    .float-phone span {
      display: none;
    }

    .float-phone strong {
      font-size: 18px;
      line-height: 1.12;
      letter-spacing: .01em;
    }

    .float-wechat {
      display: grid;
      justify-items: center;
      gap: 6px;
      padding: 8px;
      border-radius: 8px;
      color: #12382a;
      font-size: 12px;
      font-weight: 800;
      background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(237,255,247,.72));
      border: 1px solid rgba(87,191,142,.16);
    }

    .float-wechat img {
      width: 108px;
      height: 108px;
      object-fit: contain;
      display: block;
      border-radius: 0;
    }

    .float-quick {
      display: grid;
      gap: 7px;
    }

    .float-quick a {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding: 0 10px;
      color: #173527;
      background: rgba(255,255,255,.52);
      border: 1px solid rgba(87,191,142,.18);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
      min-width: 0;
    }

    .float-link-icon {
      width: 18px;
      height: 18px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #a15c00;
    }

    .float-link-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .float-quick a:nth-child(2) .float-link-icon {
      color: var(--green);
    }

    .float-quick b {
      margin-left: auto;
      padding: 2px 7px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, #c07410, var(--state-warning));
      font-size: 11px;
      line-height: 1.2;
      flex: 0 0 auto;
    }

    .float-quick span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .float-quick a:nth-child(3) {
      min-height: 42px;
      justify-content: center;
      margin: 0;
      color: #fff;
      background: linear-gradient(135deg, var(--green), var(--cyan));
      border: 0;
      font-size: 16px;
    }

    .float-top {
      min-height: 30px;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: rgba(17,53,38,.62);
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      cursor: pointer;
    }

    .float-main:hover,
    .float-phone:hover,
    .float-quick a:hover,
    .float-top:hover {
      transform: translateY(-3px);
    }

    .float-phone:hover,
    .float-quick a:hover {
      color: #133526;
      border-color: rgba(87,191,142,.38);
      background: rgba(255,255,255,.8);
    }

    .float-quick a:nth-child(3):hover {
      color: #fff;
      background: linear-gradient(135deg, #37b981, #16c98b);
    }

    .float-top:hover {
      color: #133526;
      background: rgba(255,255,255,.52);
    }

    .floating-contact.is-collapsed {
      width: 58px;
      height: 58px;
      gap: 0;
      padding: 0;
      overflow: hidden;
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .floating-contact.is-collapsed .float-toggle {
      width: 58px;
      min-height: 58px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      box-shadow: none;
      animation: contactButtonIn .16s ease-out;
    }

    .floating-contact.is-collapsed .float-toggle:hover {
      transform: scale(1.04);
      box-shadow: none;
    }

    .floating-contact.is-collapsed .float-toggle-text {
      display: none;
    }

    .floating-contact.is-collapsed .float-menu {
      display: none;
      max-height: 0;
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      overflow: hidden;
      visibility: hidden;
    }

    @keyframes contactButtonIn {
      from { opacity: .35; transform: scale(.9); }
      to { opacity: 1; transform: scale(1); }
    }

    .reveal {
      opacity: 1;
      transform: translateY(0);
      transition: opacity .72s ease, transform .72s ease;
    }

    .reveal-observer-ready .reveal:not(.show) { opacity: 0; transform: translateY(24px); }
    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal:focus, .reveal:focus-within { opacity:1; transform:translateY(0); transition:none; }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(123,227,176,.55); }
      72% { box-shadow: 0 0 0 13px rgba(123,227,176,0); }
      100% { box-shadow: 0 0 0 0 rgba(123,227,176,0); }
    }

    @keyframes coreFloat {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, calc(-50% - 8px)) scale(1.02); }
    }

    @keyframes rotateRing {
      to { transform: rotate(360deg); }
    }

    @keyframes cardFloat {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -10px; }
    }

    @keyframes flowRun {
      to { stroke-dashoffset: -840; }
    }

    @keyframes heroFlow {
      to { stroke-dashoffset: -472; }
    }

    @keyframes processFlow {
      to { stroke-dashoffset: -732; }
    }

    @keyframes lineBreathe {
      0%, 100% { transform: scaleX(.35); opacity: .24; }
      50% { transform: scaleX(1); opacity: .56; }
    }

    @keyframes railMove {
      0%, 100% { transform: translateX(0); }
      45% { transform: translateX(250%); }
      70% { transform: translateX(375%); }
    }

    @keyframes scanLine {
      0%, 100% { transform: translateY(-28px) scaleX(.38); opacity: .28; }
      50% { transform: translateY(28px) scaleX(1); opacity: .72; }
    }

    @keyframes rowFloat {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(8px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

    @media (max-width: 1040px) {
      .nav-links { display: none; }
      .hero-grid,
      .proof-grid,
      .cta-box { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-orbit { min-height: 520px; }
      .hero-system { min-height: 520px; }
      .version-grid,
      .phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cap-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
      }
      .cap-row { display: contents; }
      .cap-card:nth-child(n) { grid-column: span 1; min-height: 220px; }
      .cap-grid:has(.cap-card:hover) .cap-card,
      .cap-grid .cap-card:hover {
        flex: initial;
      }
      .version-grid::before,
      .version-grid::after,
      .phase-grid::before { display: none; }
      .version:nth-child(n) { margin-top: 0; }
      .scenes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .scene-card:nth-child(n) { grid-column: span 1; }
      .ops-preview,
      .phase {
        grid-column: span 12;
      }
      .ops-preview {
        min-height: 520px;
      }
      .section-head { display: block; }
      .section-desc { margin-top: 16px; }
      .proof-panel { position: static; }
      .flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        min-height: 0;
      }
      .node-1, .node-2, .node-3, .node-4, .node-5, .node-6, .node-7, .node-8 {
        grid-column: auto;
        grid-row: auto;
      }
      .flow-svg { display: none; }
      .trigger-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .process-map {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        min-height: 0;
      }
      .process-inputs,
      .process-main,
      .process-chain,
      .process-branch,
      .process-merge {
        display: grid;
        gap: 14px;
      }
      .process-chain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .process-chain .process-node:not(:last-child)::after,
      .process-branch .process-node::after,
      .process-merge .process-node:not(:last-child)::after,
      .process-chain::after,
      .process-branch::before,
      .process-inputs::after {
        display: none;
      }
      .process-svg { display: none; }
      .process-node,
      .process-source,
      .process-step,
      .process-sink {
        position: static;
        width: auto;
        min-width: 0;
        min-height: 96px;
        height: auto;
        border-radius: 8px;
      }
    }

    @media (max-width: 680px) {
      .container, .nav-inner { width: min(100% - 28px, 1180px); }
      .hero { padding-top: 104px; }
      .hero-grid { gap: 34px; }
      .hero-trust,
      .version-grid,
      .cap-grid,
      .phase-grid,
      .scenes-grid,
      .trigger-strip,
      .flow-grid { grid-template-columns: 1fr; }
      .hero-orbit {
        min-height: 720px;
      }
      .hero-system {
        min-height: 650px;
        transform: none;
      }
      .system-core {
        top: 48%;
        width: 158px;
        height: 158px;
      }
      .system-core b {
        font-size: 20px;
      }
      .system-node {
        min-width: auto;
        width: calc(50% - 12px);
        font-size: 12px;
        padding: 9px;
      }
      .sn-1 { left: 12px; top: 28px; }
      .sn-2 { left: 12px; top: 116px; }
      .sn-3 { left: 12px; bottom: 116px; }
      .sn-4 { right: 12px; top: 28px; }
      .sn-5 { right: 12px; top: 116px; }
      .sn-6 { right: 12px; bottom: 116px; }
      .system-output {
        left: 14px;
        right: 14px;
        transform: none;
        overflow-x: auto;
      }
      .orbit-line {
        width: 300px;
        height: 300px;
      }
      .orbit-core {
        width: 150px;
        height: 150px;
      }
      .trigger-card {
        width: calc(50% - 8px);
        min-height: 110px;
      }
      .tc-1 { left: 0; top: 24px; }
      .tc-2 { right: 0; top: 24px; }
      .tc-3 { left: 0; bottom: 126px; }
      .tc-4 { right: 0; bottom: 126px; }
      .tc-5 { left: 0; top: 156px; transform: none; }
      .tc-6 { right: 0; left: auto; bottom: 0; transform: none; }
      .hero-note { display: none; }
      .section { padding: 72px 0; }
      .flow-stage { padding: 18px; }
      .process-map {
        padding: 18px;
        grid-template-columns: 1fr;
      }
      .cap-grid {
        grid-template-columns: 1fr;
      }
      .process-chain,
      .process-branch,
      .process-merge {
        grid-template-columns: 1fr;
      }
      .ops-screen {
        grid-template-columns: 1fr;
        padding-top: 58px;
      }
      .cap-card:nth-child(n),
      .scene-card:nth-child(n) {
        grid-column: auto;
      }
      .ops-preview,
      .phase {
        grid-column: auto;
      }
      .scene-card,
      .source { grid-template-columns: 1fr; }
      .proof-actions,
      .footer-grid { grid-template-columns: 1fr; }
      .cta-box { padding: 24px; }
      .floating-contact {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        gap: 7px;
      }
      .floating-contact.is-collapsed {
        left: auto;
        right: 14px;
        width: 58px;
      }
      .float-wechat img { width: 104px; height: 104px; }
    }

    @media (min-width: 560px) and (max-width: 680px) {
      .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
  /* FEEDBACK_FIXES_2026_07_11 */
    .hero-title-emphasis { display:inline-block; margin-left:.06em; letter-spacing:.1em; }
    .hero-title-mobile-line { display:inline; }
    .hero-system { transform:translate(56px,-18px); }
    .trust-item { position:relative; overflow:hidden; transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease; animation:trustFloat 6s ease-in-out infinite; }
    .trust-item:nth-child(2){animation-delay:-2s}.trust-item:nth-child(3){animation-delay:-4s}
    .trust-item::after { content:""; position:absolute; inset:auto 14px 8px; height:2px; background:linear-gradient(90deg,#78e2ae,#27c5d3,transparent); transform:scaleX(.35); transform-origin:left; animation:trustLine 3.8s ease-in-out infinite; }
    .trust-item:hover { transform:translateY(-8px); border-color:rgba(123,227,176,.44); background:rgba(87,191,142,.1); box-shadow:0 18px 46px rgba(0,0,0,.18); }
    @keyframes trustFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
    @keyframes trustLine{0%,100%{transform:scaleX(.32);opacity:.42}50%{transform:scaleX(1);opacity:1}}
    .cap-grid { height:342px; min-height:342px; align-items:stretch; }
    .cap-card { height:342px; min-height:342px; }
    .version-grid { align-items:start; }
    .version { height:310px; min-height:310px; }
    .version:nth-child(2),.version:nth-child(4){margin-top:28px}.version:nth-child(3){margin-top:0}
    .proof-panel h2 { font-size:clamp(30px,3.1vw,44px); line-height:1.2; text-wrap:balance; }
    .source { position:relative; color:inherit; transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease; }
    .source::after { content:"→"; position:absolute; right:18px; top:18px; color:#31a779; font-weight:900; }
    .source:hover { transform:translateX(6px); border-color:rgba(87,191,142,.42); background:#f5fcf8; box-shadow:0 18px 42px rgba(41,122,84,.1); }
    .process-source i svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .floating-contact.is-collapsed .float-toggle-icon { width:58px; height:58px; background:transparent; box-shadow:none; color:#fff; backdrop-filter:none; }
    .floating-contact.is-collapsed .float-toggle-icon svg { width:30px; height:30px; stroke:#fff; }
    .float-wechat { position:relative; overflow:hidden; animation:none!important; }
    .float-wechat img { position:relative; z-index:1; animation:none!important; transform:none!important; }
    .float-wechat::after { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; border:1px solid rgba(112,230,172,.2); box-shadow:inset 0 0 20px rgba(87,191,142,.06); pointer-events:none; animation:qrGlassBreath 7s ease-in-out infinite; }
    @keyframes qrGlassBreath{0%,100%{opacity:.28;box-shadow:inset 0 0 18px rgba(87,191,142,.04)}50%{opacity:.72;box-shadow:inset 0 0 32px rgba(87,191,142,.13)}}
    /* HOMEPAGE_GLASS_SYSTEM_2026_07_12 */
    .trust-item,.cap-card,.version,.scene-card,.source,.process-map,.process-node { border-color:rgba(255,255,255,.66); box-shadow:0 18px 46px rgba(20,69,49,.08),inset 0 1px 0 rgba(255,255,255,.42); backdrop-filter:blur(20px) saturate(145%); }
    .trust-item { background:rgba(255,255,255,.08); }
    .cap-card,.version,.scene-card,.source { background:rgba(255,255,255,.5); }
    .process-map { background:rgba(255,255,255,.46); }
    .process-node { background:rgba(255,255,255,.52); }
    .proof { background:radial-gradient(circle at 78% 20%,rgba(87,191,142,.1),transparent 32%),linear-gradient(180deg,#f5faf7 0%,#edf6f1 100%); backdrop-filter:none; }
    .proof-panel { background:linear-gradient(145deg,#07121e 0%,#0b302a 100%); border-color:rgba(87,191,142,.22); backdrop-filter:none; box-shadow:0 24px 64px rgba(5,20,15,.2),inset 0 1px 0 rgba(255,255,255,.08); }
    .proof-panel::before { background:radial-gradient(circle at 70% 20%,rgba(34,199,216,.15),transparent 38%); }
    .proof .source { background:rgba(255,255,255,.94); border-color:rgba(32,123,83,.16); backdrop-filter:none; box-shadow:0 16px 36px rgba(24,78,54,.08),inset 0 1px 0 rgba(255,255,255,.72); }
    .proof .source p { color:#41584e; }
    .proof .source:hover { background:#fff; }
    .floating-contact { border-color:rgba(255,255,255,.7); background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(222,249,236,.34)); box-shadow:0 24px 64px rgba(19,64,44,.17),inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter:blur(24px) saturate(155%); }
    .floating-contact.is-collapsed { border-color:rgba(255,255,255,.46); border-radius:50%; background:linear-gradient(145deg,rgba(19,80,61,.58),rgba(43,195,163,.42)); box-shadow:0 18px 46px rgba(4,35,26,.24),inset 0 1px 0 rgba(255,255,255,.28); backdrop-filter:blur(22px) saturate(160%); }
    .floating-contact.is-collapsed .float-toggle-icon { background:transparent; box-shadow:none; backdrop-filter:none; }
    .float-main,.float-phone,.float-wechat,.float-quick a { border-color:rgba(255,255,255,.58); background:rgba(255,255,255,.42); backdrop-filter:blur(18px) saturate(145%); }
    .float-main,.float-quick a:nth-child(3) { background:linear-gradient(145deg,rgba(33,154,111,.76),rgba(43,190,162,.54)); }
    @media(max-width:1040px){.hero-system{transform:none}.cap-grid{height:auto;min-height:0}.cap-card{height:auto;min-height:220px}.version{height:310px}.version:nth-child(n){margin-top:0}.process-map{grid-template-columns:1fr}.process-main{position:relative;padding-left:24px}.process-main::before{content:"";position:absolute;left:8px;top:18px;bottom:18px;width:2px;background:linear-gradient(#57bf8e,#22c7d8,#2f6bff)}.process-inputs{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:34px}.process-inputs::after{display:block;content:"";position:absolute;left:50%;bottom:10px;width:2px;height:24px;background:#57bf8e}.process-chain .process-node:not(:last-child)::after,.process-merge .process-node:not(:last-child)::after{display:block;content:"↓";position:absolute;left:50%;bottom:-18px;color:#57bf8e;font-weight:900}.process-node{position:relative}}
    @media(max-width:680px){.hero-title-line{white-space:normal}.hero-title-mobile-line{display:block}.hero-trust{grid-template-columns:1fr}.trust-item span{white-space:normal}.hero-system{width:100%;min-height:620px;overflow:visible}.system-node{max-width:calc(50% - 18px)}.process-map{padding:18px}.process-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;padding:0 0 34px}.process-inputs::before{display:block;content:"";position:absolute;left:50%;top:12px;bottom:28px;width:2px;background:rgba(87,191,142,.38)}.process-source:nth-child(odd)::after{content:"";position:absolute;right:-17px;top:50%;width:17px;height:2px;background:#57bf8e}.process-source:nth-child(even)::after{content:"";position:absolute;left:-17px;top:50%;width:17px;height:2px;background:#57bf8e}.process-chain,.process-branch,.process-merge{grid-template-columns:1fr}.process-chain .process-node:not(:last-child)::after,.process-merge .process-node:not(:last-child)::after{bottom:-20px}.floating-contact{left:auto;right:14px;width:min(278px,calc(100vw - 28px))}.floating-contact.is-collapsed{right:14px;width:58px}}
/* HOMEPAGE_CAPABILITY_CASE_STYLE_2026_07_13 */
.capability {
background:
radial-gradient(circle at 82% 14%,rgba(87,191,142,.15),transparent 31%),
linear-gradient(135deg,#061a16 0%,#0b2d23 54%,#123f30 100%);
}
.capability .cap-card {
height:342px;
min-height:342px;
padding:76px 22px 22px;
color:#fff;
border-color:rgba(255,255,255,.18);
background:rgba(255,255,255,.10);
box-shadow:0 18px 52px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(18px) saturate(135%);
opacity:1;
}
.capability .cap-card i {
position:absolute;
z-index:0;
right:18px;
top:10px;
width:auto;
height:auto;
margin:0;
border-radius:0;
background:transparent;
color:rgba(210,255,232,.14);
font-size:72px;
line-height:1;
font-weight:900;
letter-spacing:-.08em;
}
.capability .cap-card h3 {
position:relative;
z-index:1;
color:#fff;
}
.capability .cap-card p {
position:relative;
z-index:1;
color:rgba(239,255,247,.78);
opacity:.82;
}
.capability .cap-card.is-active {
border-color:rgba(156,241,199,.42);
background:rgba(255,255,255,.15);
box-shadow:0 24px 58px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.16);
}
.capability .cap-grid:hover .cap-card,
.capability .cap-grid.has-hovered .cap-card {
opacity:1;
background:rgba(255,255,255,.10);
}
.capability .cap-grid .cap-card:hover,
.capability .cap-grid .cap-card.is-hovered {
border-color:rgba(156,241,199,.48);
background:rgba(255,255,255,.16);
box-shadow:0 24px 58px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.16);
}
.capability .cap-grid:hover .cap-card.is-active:not(:hover) p,
.capability .cap-grid.has-hovered .cap-card.is-active:not(.is-hovered) p {
opacity:.82;
color:rgba(239,255,247,.78);
}
@media(max-width:1040px){
.capability .cap-card { height:auto; min-height:240px; padding-top:76px; }
}
  /* HOMEPAGE_FLOW_REBUILD_2026_07_12 */
    .hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr); align-items:center; }
    body.intro-playing { overflow:hidden; }
    .brand-intro { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 48%,#0f3d2d 0,#071a16 38%,#030b0a 76%); animation:introCurtain 2.35s cubic-bezier(.7,0,.2,1) forwards; }
    .brand-intro::before,.brand-intro::after { content:""; position:absolute; }
    .brand-intro-stage { position:relative; display:grid; justify-items:center; gap:20px; }
    .brand-intro-bird { width:min(34vw,290px); height:auto; opacity:0; filter:drop-shadow(0 24px 44px rgba(87,191,142,.28)); transform:translate3d(-32vw,14vh,0) rotate(-14deg) scale(.76); animation:introBird 1.55s .08s cubic-bezier(.16,.84,.23,1) both; }
    .brand-intro-word { color:#fff; font-size:clamp(24px,3vw,40px); font-weight:900; letter-spacing:.18em; opacity:0; transform:translateY(14px); animation:introWord .6s 1.02s ease-out forwards; }
    .brand-intro-word small { display:block; margin-top:8px; color:rgba(170,242,205,.7); font-size:10px; font-weight:800; letter-spacing:.32em; text-align:center; }
    @keyframes introBird { 0%{transform:translate3d(-32vw,14vh,0) rotate(-14deg) scale(.76);opacity:0} 48%{opacity:1} 76%{transform:translate3d(12px,-8px,0) rotate(2deg) scale(1.05)} 100%{transform:translate3d(0,0,0) rotate(0) scale(1);opacity:1} }
    @keyframes introWord { to{opacity:1;transform:translateY(0)} }
    @keyframes introCurtain { 0%,72%{opacity:1;visibility:visible;clip-path:circle(145% at 50% 50%)} 100%{opacity:0;visibility:hidden;clip-path:circle(0 at 74% 35%)} }

    .hero-brand-scene { position:relative; min-height:590px; display:grid; place-items:center; isolation:isolate; }
    .brand-scene-caption { position:absolute; z-index:5; right:0; bottom:50px; display:flex; gap:7px; padding:10px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(4,18,14,.36); color:rgba(255,255,255,.72); font-size:11px; font-weight:800; letter-spacing:.05em; backdrop-filter:blur(14px); }
    .brand-scene-caption i { width:6px; height:6px; margin:auto 1px; border-radius:50%; background:#79e1ad; box-shadow:0 0 12px rgba(121,225,173,.7); }

    .flow-section { background:#f6faf8; }
    .process-map {
      min-height:0;
      display:grid;
      grid-template-columns:1fr;
      gap:24px;
      padding:34px;
      border-radius:18px;
      background:rgba(255,255,255,.66);
      backdrop-filter:blur(20px) saturate(130%);
    }
    .process-svg { display:none; }
    .process-phase-title { position:relative; z-index:2; display:grid; grid-template-columns:38px auto 1fr; align-items:center; gap:10px; margin-top:4px; }
    .process-phase-title span { width:38px; height:28px; display:grid; place-items:center; border-radius:999px; color:#063c2a; background:rgba(87,191,142,.24); font-size:12px; font-weight:900; }
    .process-phase-title strong { color:#133b2d; font-size:17px; }
    .process-phase-title small { color:#6c7e76; font-size:13px; }
    .process-inputs { position:relative; z-index:2; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:0; }
    .process-main { position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:24px; padding:0; }
    .process-chain { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
    .process-branch,.process-merge { display:grid; grid-template-columns:repeat(2,minmax(0,260px)); justify-content:center; gap:16px; }
    .process-node,.process-source,.process-step,.process-sink { position:relative !important; inset:auto !important; width:auto; min-width:0; height:auto; overflow:hidden; border-radius:12px; background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(130%); }
    .process-node::before { content:""; position:absolute; z-index:0; inset:-2px; pointer-events:none; background:linear-gradient(110deg,transparent 20%,rgba(110,230,171,.24) 46%,rgba(255,255,255,.48) 50%,transparent 75%); transform:translateX(-140%); animation:nodeFlowSweep 9s ease-in-out infinite; animation-delay:var(--flow-delay,0s); }
    .process-node > *,.process-node { isolation:isolate; }
    .process-source:nth-child(1){--flow-delay:0s}.process-source:nth-child(2){--flow-delay:.18s}.process-source:nth-child(3){--flow-delay:.36s}.process-source:nth-child(4){--flow-delay:.54s}.process-source:nth-child(5){--flow-delay:.72s}.process-source:nth-child(6){--flow-delay:.9s}
    .process-step:nth-child(1){--flow-delay:1.65s}.process-step:nth-child(2){--flow-delay:2.3s}.process-step:nth-child(3){--flow-delay:2.95s}.process-step:nth-child(4){--flow-delay:3.6s}.process-step:nth-child(5){--flow-delay:4.25s}
    .process-branch .process-node:nth-child(1){--flow-delay:5.1s}.process-branch .process-node:nth-child(2){--flow-delay:5.35s}.process-merge .process-node:nth-child(1){--flow-delay:6.15s}.process-merge .process-node:nth-child(2){--flow-delay:6.4s}
    .process-source { min-height:82px; padding:14px 10px; display:flex; flex-direction:column; justify-content:center; text-align:center; gap:8px; }
    .process-step { min-height:150px; padding:18px; }
    .process-sink { min-height:132px; padding:18px; }
    .process-step i,.process-sink i { margin-bottom:10px; }
    .process-main::before,.process-inputs::before,.process-inputs::after,.process-source::after,.process-branch .process-node::after { content:none !important; display:none !important; }
    .process-chain .process-node:not(:last-child)::after { content:"" !important; display:block !important; position:absolute; z-index:5; left:auto; right:-15px; top:50%; bottom:auto; width:16px; height:3px; border-radius:999px; background:linear-gradient(90deg,rgba(87,191,142,.25),#57bf8e 38%,#d8fff0 50%,#22c7d8 62%,rgba(34,199,216,.22)); background-size:280% 100%; transform:translateY(-50%); animation:processConnector 1.45s linear infinite; }
    @keyframes processConnector { from{background-position:140% 50%} to{background-position:-140% 50%} }
    @keyframes processConnectorY { from{background-position:50% 140%} to{background-position:50% -140%} }
    @keyframes nodeFlowSweep { 0%,66%{transform:translateX(-140%);opacity:0} 72%{opacity:1} 82%{transform:translateX(140%);opacity:0} 100%{transform:translateX(140%);opacity:0} }
    .process-stage-flow { position:relative; z-index:4; width:180px; height:54px; margin:-7px auto; display:grid; place-items:center; color:#2f8061; }
    .process-stage-flow::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:3px; border-radius:999px; background:linear-gradient(180deg,rgba(87,191,142,.18),rgba(34,199,216,.42),rgba(47,107,255,.18)); transform:translateX(-50%); }
    .process-stage-flow::after { content:""; position:absolute; left:50%; bottom:0; width:9px; height:9px; border-right:2px solid #22a97b; border-bottom:2px solid #22a97b; transform:translate(-50%,0) rotate(45deg); }
    .process-stage-flow span { position:absolute; z-index:2; left:50%; top:0; width:9px; height:9px; border-radius:50%; background:#75e7b0; box-shadow:0 0 0 4px rgba(117,231,176,.13),0 0 20px rgba(34,199,216,.72); transform:translateX(-50%); animation:stageFlowDot 1.8s linear infinite; }
    .process-stage-flow em { position:absolute; left:calc(50% + 17px); top:50%; width:max-content; color:#47806a; font-size:11px; font-style:normal; font-weight:800; letter-spacing:.04em; transform:translateY(-50%); }
    @keyframes stageFlowDot { 0%{top:0;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:calc(100% - 9px);opacity:0} }
    @media(min-width:1041px){
      .process-inputs{padding-bottom:28px}
      .process-inputs::after{content:""!important;display:block!important;position:absolute;left:8%;right:8%;bottom:10px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(87,191,142,.16),#57bf8e,#e6fff3,#22c7d8,rgba(34,199,216,.16));background-size:280% 100%;animation:processConnector 2.4s linear infinite}
      .process-source::after{content:""!important;display:block!important;position:absolute;left:50%;top:auto;bottom:-19px;width:2px;height:19px;background:rgba(87,191,142,.38);transform:translateX(-50%)}
    }

    @media(max-width:1040px){
      .hero-grid{grid-template-columns:minmax(0,1fr) 360px;gap:24px}
      .hero-title-line{white-space:normal}
      .hero-copy h1{font-size:clamp(44px,5.4vw,56px)}
      .hero-brand-scene{width:360px;min-height:520px;margin:0 auto}
      .process-inputs{grid-template-columns:repeat(3,minmax(0,1fr))}
      .process-chain,.process-branch,.process-merge{grid-template-columns:minmax(0,720px);justify-content:center}
      .process-chain .process-node:not(:last-child)::after{left:50%;right:auto;top:auto;bottom:-16px;width:3px;height:18px;transform:translateX(-50%)}
      .process-chain .process-node:not(:last-child)::after{background:linear-gradient(180deg,rgba(87,191,142,.24),#57bf8e 38%,#e6fff3 50%,#22c7d8 62%,rgba(34,199,216,.2));background-size:100% 280%;animation-name:processConnectorY}
      .process-main{padding:0}
    }
    @media(min-width:681px) and (max-width:1040px){
      .process-branch,.process-merge{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    @media(max-width:680px){
      .hero-grid{grid-template-columns:1fr;gap:8px}
      .hero-copy h1{font-size:clamp(38px,10vw,50px)}
      .hero-brand-scene{min-height:500px}
      .brand-scene-caption{right:20px;bottom:36px}
      .process-map{padding:20px 16px;gap:20px}
      .process-phase-title{grid-template-columns:34px 1fr}.process-phase-title small{grid-column:2}
      .process-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    }
    @media(max-width:460px){
      .hero-brand-scene{min-height:410px}
      .brand-scene-caption{right:8px;bottom:14px;font-size:10px}
      .process-inputs{grid-template-columns:1fr}
    }
    @media(prefers-reduced-motion:reduce){body.intro-playing{overflow:auto}.brand-intro{display:none}.hero-pigeon,.process-node::before,.process-chain .process-node::after,.process-stage-flow span,.process-inputs::after{animation:none!important}}

    /* PIGEON_FLIGHT_SCENE_2026_07_13 */
    .brand-intro::before { left:-15%; top:18%; width:130%; height:34%; aspect-ratio:auto; border:0; border-radius:0; background:linear-gradient(112deg,transparent 15%,rgba(115,235,176,.05) 36%,rgba(115,235,176,.22) 50%,rgba(39,197,211,.08) 62%,transparent 82%); filter:blur(8px); transform:translateX(-30%) rotate(-8deg); animation:introCurrent 1.8s .12s ease-out both; }
    .brand-intro::after { left:0; top:0; width:100%; height:100%; aspect-ratio:auto; border:0; border-radius:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 88px); transform:none; opacity:.46; animation:none; }
    @keyframes introCurrent { from{opacity:0;transform:translateX(-38%) rotate(-8deg)} 45%{opacity:.9} to{opacity:0;transform:translateX(38%) rotate(-8deg)} }
    .hero-brand-scene { min-height:590px; overflow:visible; }
    .brand-fluid-drop,.flight-orbit,.flight-trail { display:none; }
    .flight-current { position:absolute; z-index:1; left:-8%; top:52%; width:112%; height:auto; overflow:visible; transform:translateY(-50%); pointer-events:none; }
    .flight-current path { fill:none; stroke:url(#wake-gradient); stroke-width:8; stroke-linecap:round; filter:blur(3.2px); transform-origin:35% 55%; animation:cloudWake 10s ease-in-out infinite; }
    .flight-current path:nth-child(2) { opacity:.58; animation-delay:-3.2s; animation-duration:12s; }
    .flight-current path:nth-child(3) { opacity:.38; animation-delay:-6.4s; animation-duration:14s; }
    .hero-pigeon-stage { position:relative; z-index:3; width:min(440px,82%); display:grid; place-items:center; opacity:.58; }
    .hero-pigeon { grid-area:1/1; width:84%; height:auto; opacity:.72; filter:drop-shadow(0 26px 42px rgba(49,168,116,.09)) saturate(.42) brightness(.82) contrast(.92); animation:pigeonGlide 10s ease-in-out infinite; }
    .brand-scene-caption { right:4%; bottom:54px; border-radius:12px; background:rgba(4,18,14,.28); }
    @keyframes cloudWake { 0%,100%{opacity:.16;transform:translate3d(-6px,2px,0) scaleX(.98)} 50%{opacity:.42;transform:translate3d(10px,-2px,0) scaleX(1.04)} }
    @keyframes pigeonGlide { 0%,100%{transform:translate3d(-2px,3px,0) rotate(-.35deg);opacity:.68} 48%{transform:translate3d(5px,-6px,0) rotate(.35deg);opacity:.76} 58%{transform:translate3d(6px,-5px,0) rotate(.15deg);opacity:.72} }
    @media(max-width:1040px){.hero-pigeon-stage{width:390px}.hero-brand-scene{width:360px;min-height:510px}.brand-scene-caption{right:0;bottom:36px}}
    @media(max-width:680px){.hero-pigeon-stage{width:min(430px,94vw)}.hero-brand-scene{width:100%;min-height:470px}.flight-current{width:110%;left:-5%}.brand-scene-caption{right:18px;bottom:24px}}
    @media(max-width:460px){.hero-brand-scene{min-height:390px}.hero-pigeon-stage{width:min(350px,92vw)}.brand-scene-caption{right:8px;bottom:8px}}
    @media(prefers-reduced-motion:reduce){.brand-intro::before,.flight-current path,.hero-pigeon{animation:none!important}}

  /* QINGGE_SITE_CHROME_START */
    :root { --green:#57bf8e; --green-2:#78e2ae; --cyan:#27c5d3; }
    html { scroll-padding-top:92px; }
    body.menu-locked { overflow:hidden; }
    .skip-link { position:fixed; z-index:130; left:18px; top:10px; padding:10px 14px; border-radius:6px; color:#07111f; background:#fff; font-weight:800; transform:translateY(-150%); transition:transform .18s ease; }
    .skip-link:focus { transform:translateY(0); }
    .site-nav button, .mobile-overlay button { font:inherit; }
    .site-nav svg, .mobile-overlay svg, .site-footer svg { display:block; }
    .site-footer > .container { width:min(1240px,calc(100% - 40px)); margin:0 auto; }
    .site-nav {
      position: fixed;
      z-index: 100;
      inset: 0 0 auto;
      height: 76px;
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: linear-gradient(to bottom, rgba(4,10,18,.58), rgba(4,10,18,0));
      transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
    }

    .site-nav.is-solid,
    .site-nav.has-open {
      border-bottom-color: rgba(255,255,255,.12);
      background: rgba(7,17,31,.86);
      backdrop-filter: blur(22px) saturate(135%);
      box-shadow: 0 16px 48px rgba(0,0,0,.18);
    }

    .nav-shell {
      position: relative;
      z-index: 3;
      width: min(1320px, calc(100% - 40px));
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0;
      flex: 0 0 auto;
      color: #fff;
      white-space: nowrap;
    }
    .brand-wordmark { display:block; width:148px; height:auto; flex:0 0 auto; image-rendering:auto; }
    .brand-lockup { display:grid; width:148px; flex:0 0 auto; }
    .brand-lockup .brand-wordmark { grid-area:1 / 1; width:100%; transition:opacity .24s ease; }
    .brand-wordmark--green { opacity:0; }
    .site-nav.is-solid .brand-wordmark--white { opacity:0; }
    .site-nav.is-solid .brand-wordmark--green { opacity:1; }
    .brand-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    .desktop-nav {
      min-width: 0;
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: stretch;
    }

    .menu-list {
      display: flex;
      height: 100%;
      align-items: stretch;
      gap: 4px;
    }

    .menu-item { position: static; display: flex; align-items: stretch; }
    .menu-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      border: 0;
      padding: 0 12px;
      color: rgba(255,255,255,.76);
      background: transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: color .2s ease, background .2s ease;
    }
    .menu-trigger::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 0;
      height: 2px;
      transform: scaleX(0);
      background: var(--green-2);
      transition: transform .2s ease;
    }
    .menu-item.is-open .menu-trigger,
    .menu-trigger:hover,
    .menu-trigger:focus-visible { color: #fff; background: rgba(255,255,255,.035); }
    .menu-trigger:focus-visible {
      outline: 2px solid var(--green-2);
      outline-offset: -2px;
    }
    .menu-item.is-open .menu-trigger::after { transform: scaleX(1); }

    .nav-cta {
      flex: 0 0 auto;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 17px;
      border-radius: 7px;
      color: #07111f;
      background: #fff;
      font-size: 14px;
      font-weight: 850;
      white-space: nowrap;
      transition: transform .2s ease, background .2s ease;
    }
    .nav-cta:hover { transform: translateY(-1px); background: #ddfaeb; }
    .nav-cta svg { width: 16px; height: 16px; }

    .nav-panel {
      --panel-width: 820px;
      position: absolute;
      z-index: 4;
      top: calc(100% + 10px);
      left: 0;
      width: min(var(--panel-width), calc(100vw - 32px));
      padding: 20px 18px 22px;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px;
      background: rgba(8,20,32,.97);
      box-shadow: 0 28px 80px rgba(0,0,0,.36);
      backdrop-filter: blur(24px) saturate(130%);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .nav-panel::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -12px;
      height: 12px;
    }
    .panel-product { --panel-width: 760px; }
    .panel-scenarios { --panel-width: 920px; }
    .panel-selection { --panel-width: 780px; }
    .panel-evidence { --panel-width: 350px; }
    .panel-resources { --panel-width: 720px; }
    .menu-item.is-open .nav-panel {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .panel-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 17px;
      margin-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .panel-head strong { color: #fff; font-size: 17px; }
    .panel-head span { color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.6; }
    .panel-product .panel-head,
    .panel-evidence .panel-head,
    .panel-resources .panel-head { gap: 12px; }
    .panel-product .panel-head strong,
    .panel-evidence .panel-head strong,
    .panel-resources .panel-head strong { font-size: 15px; white-space: nowrap; }
    .panel-product .panel-head span,
    .panel-evidence .panel-head span,
    .panel-resources .panel-head span { font-size: 11px; line-height: 1.45; white-space: nowrap; }

    .panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
    .panel-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .panel-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .panel-product .panel-grid { grid-template-columns: 220px 150px 330px; }
    .panel-scenarios .panel-grid { grid-template-columns: 225px 180px 285px 185px; }
    .panel-selection .panel-grid { grid-template-columns: 230px 300px 210px; }
    .panel-evidence .panel-grid { grid-template-columns: 195px 115px; }
    .panel-resources .panel-grid { grid-template-columns: 185px 315px 160px; }
    .nav-group { min-width: 0; padding: 2px 16px; border-left: 1px solid rgba(255,255,255,.09); }
    .nav-group:first-child { padding-left: 0; border-left: 0; }
    .nav-group:last-child { padding-right: 0; }
    .nav-group h3 {
      margin: 0 0 11px;
      padding-left: 10px;
      color: var(--green-2);
      font-size: 12px;
      font-weight: 800;
      text-align: left;
    }
    .menu-links { display: grid; gap: 4px; }
    .menu-link {
      position: relative;
      min-width: 0;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 6px;
      color: rgba(255,255,255,.75);
      font-size: 14px;
      text-align: center;
      transition: color .18s ease, background .18s ease, transform .18s ease;
    }
    .menu-link > span:first-child { white-space: nowrap; }
    a.menu-link:hover,
    a.menu-link:focus-visible {
      color: var(--green-2);
      background: rgba(87,191,142,.09);
      transform: translateY(-1px);
      box-shadow: inset 0 0 0 1px rgba(123,227,176,.08);
      outline: 2px solid var(--green-2);
      outline-offset: -2px;
    }
    .link-arrow { display: none; }
    .menu-link.is-planned { color: rgba(255,255,255,.43); cursor: default; }
    .mini-tag {
      flex: 0 0 auto;
      padding: 3px 6px;
      border-radius: 4px;
      color: #9debc3;
      border: 1px solid rgba(123,227,176,.22);
      background: rgba(87,191,142,.08);
      font-size: 10px;
      line-height: 1;
    }
    .mini-tag.dev { color: #ffd789; border-color: rgba(245,165,36,.26); background: rgba(245,165,36,.08); }
    .mini-tag.limited { color: #ffe0a0; border-color: rgba(245,165,36,.3); background: rgba(245,165,36,.1); }

    .nav-scrim {
      position: fixed;
      z-index: 1;
      inset: 76px 0 0;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background: rgba(2,7,13,.34);
      transition: opacity .2s ease, visibility .2s ease;
    }
    .site-nav.has-open .nav-scrim { visibility: visible; opacity: 1; pointer-events: auto; }

    .mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      margin-left: auto;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 7px;
      color: #fff;
      background: rgba(255,255,255,.06);
      cursor: pointer;
    }
    .mobile-toggle svg { width: 21px; height: 21px; }

    .mobile-overlay {
      position: fixed;
      z-index: 110;
      inset: 0;
      visibility: hidden;
      opacity: 0;
      background: rgba(2,7,13,.62);
      transition: opacity .24s ease, visibility .24s ease;
    }
    .mobile-overlay.is-open { visibility: visible; opacity: 1; }

    .mobile-drawer {
      position: absolute;
      top: 0;
      right: 0;
      width: min(430px, 92vw);
      height: 100%;
      display: flex;
      flex-direction: column;
      color: #fff;
      background: #091622;
      transform: translateX(100%);
      box-shadow: -28px 0 70px rgba(0,0,0,.34);
      transition: transform .28s cubic-bezier(.22,.8,.25,1);
    }
    .mobile-overlay.is-open .mobile-drawer { transform: translateX(0); }
    .mobile-head {
      flex: 0 0 auto;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .mobile-close {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 7px;
      color: #fff;
      background: rgba(255,255,255,.06);
      cursor: pointer;
    }
    .mobile-close svg { width: 21px; height: 21px; }
    .mobile-scroll { overflow-y: auto; padding: 8px 18px 30px; }
    .mobile-section { border-bottom: 1px solid rgba(255,255,255,.1); }
    .mobile-section-trigger {
      width: 100%;
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 0;
      padding: 0;
      color: #fff;
      background: transparent;
      text-align: left;
      font-weight: 780;
      cursor: pointer;
    }
    .mobile-section-trigger svg { width: 17px; height: 17px; transition: transform .2s ease; }
    .mobile-section.is-open .mobile-section-trigger svg { transform: rotate(180deg); }
    .mobile-section-body { display: none; padding: 0 0 17px; }
    .mobile-section.is-open .mobile-section-body { display: grid; gap: 15px; }
    .mobile-subgroup h3 { margin: 0 0 7px; color: var(--green-2); font-size: 12px; }
    .mobile-subgroup div { display: grid; gap: 2px; }
    .mobile-subgroup a,
    .mobile-subgroup span {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 9px;
      border-radius: 5px;
      color: rgba(255,255,255,.72);
      font-size: 14px;
    }
    .mobile-subgroup a:hover { color: #fff; background: rgba(87,191,142,.1); }
    .mobile-subgroup span { color: rgba(255,255,255,.4); }
    .mobile-cta { margin-top: 20px; width: 100%; height: 46px; background: var(--green); color: #07111f; }
    .footer { color: rgba(255,255,255,.7); background: #07111f; padding: 58px 0 26px; }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.45fr repeat(5,minmax(0,1fr));
      gap: 28px;
      padding-bottom: 36px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .footer-brand { max-width: 290px; }
    .footer-brand p { margin: 16px 0 0; color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.8; }
    .footer-title { margin: 0 0 15px; color: #fff; font-size: 14px; font-weight: 850; }
    .footer-links { display: grid; gap: 9px; }
    .footer-links a { color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.5; transition: color .18s ease, transform .18s ease; }
    .footer-links a:hover { color: var(--green-2); transform: translateX(3px); }
    .footer-meta { display: grid; gap: 18px; padding-top: 22px; color: rgba(255,255,255,.5); font-size: 13px; }
    .footer-line,
    .footer-legal,
    .footer-records,
    .footer-contact,
    .friend-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .footer-legal { justify-content: space-between; gap: 16px 28px; }
    .footer-line a,
    .footer-contact a { color: rgba(255,255,255,.62); transition: color .18s ease; }
    .footer-line a:hover,
    .footer-contact a:hover { color: var(--green-2); }
    .footer-sep { color: rgba(255,255,255,.18); }
    .friend-label { color: rgba(255,255,255,.36); }
    .icp-record,.police-record { display: inline-flex; align-items: center; gap: 6px; }
    .icp-record svg,.police-record svg { width: 15px; height: 15px; flex:0 0 auto; }

    .back-top {
      position: fixed;
      z-index: 50;
      right: 22px;
      bottom: 22px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(8,17,31,.1);
      border-radius: 7px;
      color: #0d5138;
      background: rgba(255,255,255,.92);
      box-shadow: 0 12px 34px rgba(8,17,31,.12);
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }
    .back-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .back-top svg { width: 18px; height: 18px; }

    @media (max-width: 1160px) {
      .desktop-nav, .nav-shell > .nav-cta { display: none; }
      .mobile-toggle { display: inline-flex; }
      .site-footer .footer-grid { grid-template-columns: 1.25fr repeat(3,minmax(0,1fr)); }
    }
    @media (max-width: 820px) {
      .site-nav { background:rgba(7,17,31,.9); border-bottom-color:rgba(255,255,255,.12); backdrop-filter:blur(22px) saturate(135%); box-shadow:0 12px 34px rgba(0,0,0,.2); }
      .nav-shell { width: min(100% - 28px, 1240px); }
      .site-nav { height: 68px; }
      .nav-scrim { inset-block-start: 68px; }
      .site-footer .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .site-footer .footer-brand { grid-column: 1 / -1; max-width: 520px; }
    }
    @media (max-width: 520px) {
      .site-nav .brand-wordmark, .mobile-overlay .brand-wordmark, .site-footer .brand-wordmark { width:104px; }
      .site-footer .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 18px; }
      .site-footer .footer-legal { align-items: flex-start; flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-nav *, .site-nav *::before, .site-nav *::after,
      .mobile-overlay *, .site-footer *, .site-footer *::before, .site-footer *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }

  /* QINGGE_SITE_CHROME_END */