:root {
      --ink: #090a0e;
      --ink-2: #11131a;
      --ink-3: #191c26;
      --paper: #f8f7f4;
      --white: #fff;
      --text: #f6f5f1;
      --muted: #a7a9b3;
      --paper-muted: #6d6f76;
      --line: rgba(255,255,255,.12);
      --paper-line: rgba(10,11,15,.12);
      --violet: #8d7cff;
      --violet-2: #5d4cff;
      --cyan: #53e4eb;
      --blue: #4f8cff;
      --peach: #ffb49a;
      --lime: #c7f68a;
      --max: 1360px;
      --radius: 28px;
      --shadow: 0 30px 100px rgba(0,0,0,.35);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      background: var(--paper);
      font-family: Manrope, "Noto Sans TC", system-ui, sans-serif;
      line-height: 1.65;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }
    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    svg { display: block; }
    h1, h2, h3, p { margin-top: 0; }
    ::selection { color: #08090c; background: var(--cyan); }

    .shell { width: min(calc(100% - 48px), var(--max)); margin: 0 auto; }
    .mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 20px;
      color: inherit;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      width: 7px;
      height: 7px;
      content: "";
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 18px var(--cyan);
    }
    .button {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 20px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-weight: 750;
      line-height: 1.2;
      transition: transform .25s ease, background .25s ease, border-color .25s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button.white { color: #090a0e; background: #fff; }
    .button.ghost { color: #fff; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.04); }
    .button.dark { color: #fff; background: #090a0e; }
    .button svg { width: 17px; height: 17px; }

    .preview-note {
      padding: 7px 14px;
      color: #c9c9d2;
      background: #12131a;
      border-bottom: 1px solid rgba(255,255,255,.08);
      font-size: 14px;
      text-align: center;
    }

    .dark-world {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 76% 12%, rgba(111,86,255,.2), transparent 29%),
        radial-gradient(circle at 13% 54%, rgba(51,197,206,.08), transparent 24%),
        #08090d;
    }
    .dark-world::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      opacity: .34;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
    }
    .noise {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .16;
      pointer-events: none;
      filter: contrast(150%);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
    }

    .nav {
      position: relative;
      z-index: 20;
      border-bottom: 1px solid rgba(255,255,255,.09);
      background: rgba(8,9,13,.76);
      backdrop-filter: blur(20px);
    }
    .nav-inner {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand img { width: 38px; height: 38px; border-radius: 11px; }
    .brand strong { display: block; font-size: 16px; letter-spacing: -.02em; }
    .brand small { display: block; color: #979aa5; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
    .nav-links { display: flex; align-items: center; gap: 28px; color: #b7b8c0; font-size: 14px; font-weight: 600; }
    .nav-links a:not(.button):hover { color: #fff; }
    .nav .button { min-height: 44px; padding: 10px 17px; font-size: 14px; }

    .hero { padding: 94px 0 98px; }
    .hero-grid {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 44px;
      align-items: center;
    }
    .hero-copy { position: relative; z-index: 2; }
    .hero h1 {
      margin-bottom: 25px;
      font-size: clamp(58px, 5.6vw, 80px);
      font-weight: 780;
      line-height: .99;
      letter-spacing: -.065em;
    }
    .hero h1 .line { display: block; white-space: nowrap; }
    .hero h1 .prism-text {
      color: transparent;
      background: linear-gradient(90deg, #fff 0%, #dcd6ff 38%, #78eaf0 72%, #fff 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .hero-lead { max-width: 590px; margin-bottom: 32px; color: #b5b7c0; font-size: 18px; line-height: 1.8; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .proof-line { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 25px; color: #989ba6; font-size: 14px; }
    .proof-line span { display: flex; align-items: center; gap: 7px; }
    .proof-line i { width: 5px; height: 5px; border-radius: 50%; background: #5e6170; }

    .prism-stage { position: relative; min-width: 0; }
    .prism-glow {
      position: absolute;
      inset: -17% -12% -16% -6%;
      z-index: -1;
      opacity: .75;
      filter: blur(55px);
      background:
        radial-gradient(circle at 38% 24%, rgba(116,91,255,.7), transparent 30%),
        radial-gradient(circle at 78% 44%, rgba(77,223,230,.48), transparent 25%),
        radial-gradient(circle at 56% 82%, rgba(255,169,139,.35), transparent 25%);
      animation: breathe 7s ease-in-out infinite alternate;
    }
    @keyframes breathe { to { transform: scale(1.06) translate3d(1%, -1%, 0); opacity: .9; } }
    .prism-frame {
      position: relative;
      padding: 1px;
      border-radius: 31px;
      background: linear-gradient(138deg, rgba(255,255,255,.48), rgba(141,124,255,.7) 28%, rgba(83,228,235,.58) 67%, rgba(255,180,154,.42));
      box-shadow: 0 40px 130px rgba(0,0,0,.58);
    }
    .prism-frame::before {
      position: absolute;
      inset: -1px;
      content: "";
      border-radius: inherit;
      opacity: .6;
      filter: blur(16px);
      background: inherit;
    }
    .agent-app {
      position: relative;
      display: grid;
      grid-template-columns: 190px minmax(0,1fr) 224px;
      min-height: 668px;
      overflow: hidden;
      border-radius: 30px;
      background: rgba(12,14,20,.94);
      backdrop-filter: blur(28px);
    }
    .app-side {
      display: flex;
      flex-direction: column;
      padding: 20px 15px;
      border-right: 1px solid var(--line);
      background: rgba(255,255,255,.025);
    }
    .app-mark { display: flex; align-items: center; gap: 9px; margin-bottom: 25px; font-size: 14px; font-weight: 750; }
    .app-mark span {
      width: 28px; height: 28px; display: grid; place-items: center;
      border-radius: 9px; color: #090a0e;
      background: linear-gradient(135deg, #9f90ff, #62e6e5);
      box-shadow: 0 0 22px rgba(114,228,232,.24);
    }
    .side-label { margin: 14px 8px 8px; color: #9295a0; font-size: 14px; }
    .side-item {
      display: flex; align-items: center; gap: 9px; margin: 2px 0;
      padding: 11px 9px; border-radius: 10px; color: #a7aab5; font-size: 14px; font-weight: 650;
    }
    .side-item svg { width: 14px; height: 14px; }
    .side-item.active { color: #fff; background: rgba(141,124,255,.13); box-shadow: inset 0 0 0 1px rgba(141,124,255,.18); }
    .side-live {
      margin-top: auto; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
      color: #aeb1bc; background: rgba(255,255,255,.025); font-size: 14px;
    }
    .side-live b { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: #e5e6eb; font-size: 14px; }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7decaf; box-shadow: 0 0 12px #7decaf; }

    .chat-main { min-width: 0; display: flex; flex-direction: column; }
    .app-head {
      min-height: 76px; display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line);
    }
    .app-head h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
    .app-head p { margin: 3px 0 0; color: #a1a4af; font-size: 14px; }
    .agent-badge {
      display: flex; align-items: center; gap: 7px; padding: 6px 9px;
      border: 1px solid rgba(125,236,175,.2); border-radius: 999px;
      color: #a9eec2; background: rgba(125,236,175,.06); font-size: 14px;
    }
    .chat-feed {
      height: 506px;
      display: flex;
      flex-direction: column;
      gap: 13px;
      overflow: auto;
      padding: 22px 18px 16px;
      scrollbar-width: thin;
      scrollbar-color: #333642 transparent;
    }
    .message { max-width: 88%; }
    .message.user { align-self: flex-end; }
    .message-label { margin: 0 0 6px 4px; color: #9b9eaa; font-size: 14px; }
    .bubble {
      padding: 15px 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 14px 14px 14px 4px;
      color: #d8d9df;
      background: rgba(255,255,255,.045);
      font-size: 18px;
      line-height: 1.58;
      white-space: pre-wrap;
    }
    .message.user .bubble {
      color: #0a0b0f;
      border: 0;
      border-radius: 14px 14px 4px 14px;
      background: linear-gradient(135deg, #b1a5ff, #6ce7e5);
      font-weight: 600;
    }
    .typing { display: flex; gap: 4px; align-items: center; min-height: 39px; }
    .typing i { width: 5px; height: 5px; border-radius: 50%; background: #898c98; animation: type 1s infinite alternate; }
    .typing i:nth-child(2) { animation-delay: .2s; }
    .typing i:nth-child(3) { animation-delay: .4s; }
    @keyframes type { to { opacity: .25; transform: translateY(-3px); } }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .starter-label { margin: 15px 0 0; color: #b9bbc5; font-size: 14px; font-weight: 700; }
    .chip {
      padding: 9px 11px; border: 1px solid rgba(141,124,255,.3); border-radius: 999px;
      color: #d2cdff; background: rgba(141,124,255,.08); font-size: 14px;
    }
    .chat-compose {
      display: grid; grid-template-columns: 1fr auto; gap: 8px;
      margin-top: auto; padding: 14px 15px; border-top: 1px solid var(--line);
      background: rgba(255,255,255,.018);
    }
    .chat-compose input {
      min-width: 0; height: 50px; padding: 0 14px; outline: none;
      color: #ececf0; border: 1px solid rgba(255,255,255,.11); border-radius: 11px;
      background: rgba(255,255,255,.04); font-size: 16px;
    }
    .chat-compose input:focus { border-color: rgba(141,124,255,.6); box-shadow: 0 0 0 3px rgba(141,124,255,.08); }
    .send-btn {
      width: 50px; height: 50px; display: grid; place-items: center;
      border: 0; border-radius: 11px; color: #08090d;
      background: linear-gradient(135deg, #a291ff, #65e6e4);
    }
    .send-btn:disabled { cursor: wait; opacity: .55; }
    .send-btn svg { width: 15px; height: 15px; }
    /* 電話模式需要語音回覆；一般文字聊天不提供獨立的回覆朗讀控制。 */
    .timux-tts-toggle { display: none !important; }

    .trace {
      padding: 17px 14px;
      border-left: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
    }
    .trace-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .trace-head b { font-size: 14px; }
    .trace-head span { color: #9699a5; font-size: 14px; }
    .orbital {
      position: relative; width: 98px; height: 98px; margin: 4px auto 24px; display: grid; place-items: center;
    }
    .orbital::before, .orbital::after {
      position: absolute; inset: 0; content: ""; border: 1px solid rgba(122,225,232,.28); border-radius: 50%;
    }
    .orbital::before { animation: orbit 9s linear infinite; border-top-color: var(--violet); border-right-color: var(--cyan); }
    .orbital::after { inset: 12px; animation: orbit 6s linear infinite reverse; border-bottom-color: var(--peach); }
    @keyframes orbit { to { transform: rotate(360deg); } }
    .orbital-core {
      width: 45px; height: 45px; display: grid; place-items: center; border-radius: 15px;
      color: #0b0c10; background: linear-gradient(135deg, #aa9cff, #6ce4e2); font-size: 14px; font-weight: 900;
      box-shadow: 0 0 30px rgba(94,228,230,.22);
    }
    .trace-list { display: grid; gap: 8px; }
    .trace-row {
      position: relative; padding: 10px 9px 10px 27px;
      border: 1px solid rgba(255,255,255,.075); border-radius: 12px;
      color: #a5a8b3; background: rgba(255,255,255,.024); font-size: 14px;
    }
    .trace-row::before {
      position: absolute; left: 10px; top: 13px; width: 7px; height: 7px; content: "";
      border-radius: 50%; background: #555866; box-shadow: 0 0 0 3px rgba(255,255,255,.035);
    }
    .trace-row.done { color: #b9bbc4; }
    .trace-row.done::before { background: #7decaf; box-shadow: 0 0 10px rgba(125,236,175,.7); }
    .trace-row.active { color: #dcd9ff; border-color: rgba(141,124,255,.25); background: rgba(141,124,255,.06); }
    .trace-row.active::before { background: var(--violet); box-shadow: 0 0 12px var(--violet); animation: pulse 1s infinite alternate; }
    @keyframes pulse { to { opacity: .35; } }
    .trace-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); color: #9295a0; font-size: 14px; line-height: 1.65; }

    .trust { border-top: 1px solid rgba(255,255,255,.08); background: #0b0c11; }
    .trust-inner { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; padding: 25px 0; }
    .trust-copy { color: #a0a3ae; font-size: 14px; line-height: 1.5; }
    .logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: center; }
    .logo-card {
      height: 54px; display: grid; place-items: center; padding: 10px;
      border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025);
    }
    .logo-card img { max-width: 100%; max-height: 32px; filter: grayscale(1) brightness(2.4); opacity: .58; transition: .25s ease; }
    .logo-card:hover img { filter: none; opacity: 1; }

    .section { padding: 120px 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 58px; }
    .section-head h2 {
      max-width: 860px; margin-bottom: 0;
      font-size: clamp(42px, 5vw, 72px); font-weight: 760; line-height: 1.06; letter-spacing: -.055em;
    }
    .section-head p:last-child { max-width: 380px; margin-bottom: 7px; color: var(--paper-muted); }
    .paper-eyebrow { color: #55575e; }
    .paper-eyebrow::before { background: var(--violet-2); box-shadow: none; }

    .method-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 18px; }
    .method-visual {
      position: relative; min-height: 655px; overflow: hidden;
      border-radius: var(--radius); color: #fff; background: #101117;
    }
    .method-visual::before {
      position: absolute; inset: 0; content: "";
      background:
        radial-gradient(circle at 22% 21%, rgba(141,124,255,.45), transparent 28%),
        radial-gradient(circle at 80% 65%, rgba(83,228,235,.22), transparent 29%);
    }
    .method-copy { position: relative; z-index: 2; padding: 44px; }
    .method-copy h3 { max-width: 460px; margin-bottom: 16px; font-size: 38px; line-height: 1.12; letter-spacing: -.045em; }
    .method-copy p { max-width: 500px; color: #a8aab3; }
    .flow-map { position: absolute; inset: 246px 36px 34px; }
    .flow-line {
      position: absolute; left: 10%; right: 10%; top: 47%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(141,124,255,.8), rgba(83,228,235,.8), transparent);
    }
    .flow-line::after {
      position: absolute; left: 10%; top: -2px; width: 6px; height: 6px; content: "";
      border-radius: 50%; background: #fff; box-shadow: 0 0 18px #fff;
      animation: dataflow 5s ease-in-out infinite;
    }
    @keyframes dataflow { 50% { left: 86%; } }
    .flow-node {
      position: absolute; width: 128px; padding: 14px;
      border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
      background: rgba(16,17,23,.72); box-shadow: 0 18px 45px rgba(0,0,0,.25); backdrop-filter: blur(15px);
    }
    .flow-node:nth-child(2) { left: 0; top: 30%; }
    .flow-node:nth-child(3) { left: 50%; top: 4%; transform: translateX(-50%); }
    .flow-node:nth-child(4) { right: 0; top: 30%; }
    .flow-node:nth-child(5) { left: 50%; bottom: 0; transform: translateX(-50%); }
    .flow-icon {
      width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 16px;
      border-radius: 11px; color: #0c0d12; background: linear-gradient(135deg, #a89aff, #72e8e4);
    }
    .flow-icon svg { width: 17px; height: 17px; }
    .flow-node b { display: block; margin-bottom: 4px; font-size: 14px; }
    .flow-node span { display: block; color: #a4a7b1; font-size: 14px; }

    .method-cards { display: grid; gap: 18px; }
    .method-card {
      min-height: 206px; display: grid; grid-template-columns: 60px 1fr; gap: 22px;
      padding: 30px; border: 1px solid var(--paper-line); border-radius: var(--radius); background: #fff;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .method-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(10,11,15,.08); }
    .method-number {
      width: 58px; height: 58px; display: grid; place-items: center;
      border: 1px solid var(--paper-line); border-radius: 18px; color: var(--violet-2);
      font-size: 14px; font-weight: 800;
    }
    .method-card h3 { margin-bottom: 8px; font-size: 23px; letter-spacing: -.025em; }
    .method-card p { margin-bottom: 15px; color: var(--paper-muted); font-size: 14px; }
    .tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .tags span { padding: 6px 9px; border-radius: 999px; color: #5f6168; background: #f3f2ef; font-size: 14px; }

    .cases { background: #eeece7; }
    .case-grid { display: grid; gap: 24px; }
    .case-card {
      position: relative;
      min-height: 620px;
      display: grid;
      grid-template-columns: .66fr 1.34fr;
      overflow: hidden;
      border: 1px solid var(--paper-line);
      border-radius: 32px;
      background: #fff;
      box-shadow: 0 26px 70px rgba(14,15,20,.07);
    }
    .case-card.reverse { grid-template-columns: 1.34fr .66fr; }
    .case-card.reverse .case-info { order: 2; }
    .case-info {
      position: relative;
      z-index: 3;
      align-self: center;
      padding: 44px;
    }
    @media (min-width: 1121px) {
      .case-card .case-info { padding-inline: 34px; }
    }
    .case-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
    .case-brand img { width: 62px; height: 48px; object-fit: contain; }
    .case-brand span { color: #66686f; font-size: 14px; }
    .case-card h3 { max-width: 540px; margin-bottom: 15px; font-size: 34px; line-height: 1.16; letter-spacing: -.04em; }
    .case-card p { max-width: 590px; color: var(--paper-muted); font-size: 16px; }
    .case-flow {
      display: grid;
      gap: 10px;
      margin-top: 28px;
    }
    .case-flow-item {
      display: grid;
      grid-template-columns: 36px 1fr;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border: 1px solid rgba(12,13,18,.09);
      border-radius: 14px;
      background: #faf9f6;
    }
    .case-flow-item i {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #fff;
      background: #12131a;
      font-style: normal;
      font-size: 14px;
      font-weight: 800;
    }
    .case-flow-item b { display: block; margin-bottom: 1px; font-size: 15px; }
    .case-flow-item span { display: block; color: #74767d; font-size: 14px; }
    .case-visual {
      position: relative;
      min-width: 0;
      min-height: 620px;
      overflow: hidden;
      background:
        radial-gradient(circle at 76% 18%, rgba(109,94,255,.36), transparent 30%),
        radial-gradient(circle at 20% 82%, rgba(70,212,218,.2), transparent 34%),
        #101219;
    }
    .case-visual::before {
      position: absolute;
      inset: 0;
      content: "";
      opacity: .35;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 36px 36px;
    }
    .case-screen {
      position: absolute;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 30px 80px rgba(0,0,0,.36);
    }
    .case-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
    .case-screen.primary { left: 7%; top: 9%; width: 86%; height: 58%; transform: rotate(-1.2deg); }
    .case-screen.secondary { right: 5%; bottom: 6%; width: 56%; height: 38%; transform: rotate(1.5deg); }
    .case-screen.secondary img { object-position: 67% top; }
    .ai-decision {
      position: absolute;
      left: 5%;
      bottom: 7%;
      z-index: 2;
      width: 42%;
      padding: 17px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 18px;
      color: #f4f4f7;
      background: rgba(13,15,22,.92);
      box-shadow: 0 20px 55px rgba(0,0,0,.35);
      backdrop-filter: blur(18px);
    }
    .ai-decision-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 13px;
      font-size: 14px;
      font-weight: 800;
    }
    .ai-decision-head span { color: #7decaf; }
    .ai-signal {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 8px 0;
      border-top: 1px solid rgba(255,255,255,.09);
      color: #aeb1bc;
      font-size: 14px;
    }
    .ai-signal b { color: #fff; font-weight: 700; }
    .phone-stage {
      background:
        radial-gradient(circle at 25% 18%, rgba(92,222,210,.24), transparent 30%),
        radial-gradient(circle at 78% 80%, rgba(126,102,255,.33), transparent 34%),
        #0d1017;
    }
    .phone {
      position: absolute;
      width: 29%;
      overflow: hidden;
      border: 7px solid #1c1e27;
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 28px 65px rgba(0,0,0,.38);
    }
    .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
    .phone.one { left: 5%; top: 12%; height: 74%; transform: rotate(-4deg); transform-origin: left center; }
    .phone.two { left: 35.5%; top: 7%; height: 80%; z-index: 2; transform-origin: center; }
    .phone.three { left: 66%; top: 14%; height: 72%; transform: rotate(4deg); transform-origin: right center; }
    .audit-panel {
      position: absolute;
      right: 5%;
      bottom: 4%;
      z-index: 4;
      width: 45%;
      padding: 15px;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 18px;
      color: #fff;
      background: rgba(14,16,23,.94);
      box-shadow: 0 24px 60px rgba(0,0,0,.38);
      backdrop-filter: blur(16px);
    }
    .audit-panel strong { display: block; margin-bottom: 9px; font-size: 15px; }
    .audit-check {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 0;
      color: #b7bac4;
      border-top: 1px solid rgba(255,255,255,.08);
      font-size: 14px;
    }
    .audit-check::before {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      content: "";
      border-radius: 50%;
      background: #7decaf;
      box-shadow: 0 0 12px rgba(125,236,175,.7);
    }

    .governance {
      position: relative; overflow: hidden; color: #f4f3f0; background: #090a0e;
    }
    .governance::before {
      position: absolute; inset: 0; content: "";
      background:
        radial-gradient(circle at 85% 10%, rgba(141,124,255,.18), transparent 30%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: auto, 56px 56px, 56px 56px;
    }
    .governance .shell { position: relative; }
    .gov-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: center; }
    .gov-copy h2 { margin-bottom: 24px; font-size: clamp(44px, 5vw, 70px); line-height: 1.05; letter-spacing: -.055em; }
    .gov-copy > p { color: #a5a7b1; }
    .gov-points { display: grid; gap: 16px; margin-top: 32px; }
    .gov-point { display: grid; grid-template-columns: 32px 1fr; gap: 13px; align-items: start; }
    .gov-point i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: var(--cyan); }
    .gov-point svg { width: 14px; height: 14px; }
    .gov-point b { display: block; margin-bottom: 2px; font-size: 14px; }
    .gov-point span { color: #a3a6b1; font-size: 14px; }
    .policy-ui {
      padding: 1px; border-radius: 27px;
      background: linear-gradient(135deg, rgba(141,124,255,.55), rgba(83,228,235,.28), rgba(255,255,255,.12));
      box-shadow: var(--shadow);
    }
    .policy-inner { overflow: hidden; border-radius: 26px; background: #12131a; }
    .policy-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
    .policy-head b { font-size: 14px; }
    .policy-head span { color: #7decaf; font-size: 14px; }
    .policy-body { padding: 18px; }
    .policy-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 13px; }
    .policy-stat { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
    .policy-stat span { display: block; margin-bottom: 5px; color: #9b9eaa; font-size: 14px; }
    .policy-stat b { font-size: 16px; }
    .event-table { border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
    .event-row {
      display: grid; grid-template-columns: 1.15fr .9fr .7fr; gap: 10px;
      padding: 12px 13px; border-bottom: 1px solid var(--line); color: #c0c2ca; font-size: 14px;
    }
    .event-row:last-child { border-bottom: 0; }
    .event-row.header { color: #5f626e; background: rgba(255,255,255,.02); }
    .status-pill { width: fit-content; padding: 3px 6px; border-radius: 999px; }
    .status-pill.ok { color: #a9eec2; background: rgba(125,236,175,.08); }
    .status-pill.wait { color: #ffe0a3; background: rgba(255,202,104,.08); }
    .status-pill.stop { color: #ffafa6; background: rgba(255,113,100,.08); }

    .final { padding: 38px 0; background: #eeece7; }
    .final-card {
      position: relative; isolation: isolate; overflow: hidden;
      min-height: 500px; display: grid; place-items: center; padding: 70px 30px;
      border-radius: 34px; color: #fff; text-align: center; background: #0a0b0f;
    }
    .final-card::before {
      position: absolute; inset: -30%; z-index: -1; content: "";
      opacity: .72; filter: blur(65px);
      background:
        radial-gradient(circle at 34% 40%, rgba(116,91,255,.8), transparent 24%),
        radial-gradient(circle at 64% 46%, rgba(83,228,235,.55), transparent 22%),
        radial-gradient(circle at 51% 72%, rgba(255,180,154,.45), transparent 20%);
    }
    .final-card h2 { max-width: 900px; margin-bottom: 19px; font-size: clamp(48px, 6.5vw, 86px); line-height: 1.02; letter-spacing: -.06em; }
    .final-card p { max-width: 650px; color: #d1d1d7; font-size: 17px; }
    .final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; margin-top: 25px; }

    footer { padding: 38px 0 50px; background: #eeece7; }
    .footer-inner { display: flex; justify-content: space-between; gap: 30px; color: #686a71; font-size: 14px; }
    .footer-brand { display: flex; align-items: center; gap: 10px; color: #111218; font-weight: 700; }
    .footer-brand img { width: 28px; height: 28px; border-radius: 8px; }

    @media (max-width: 1120px) {
      .hero-grid, .gov-grid { grid-template-columns: 1fr; }
      .hero-copy { max-width: 820px; }
      .prism-stage { max-width: 900px; }
      .trust-inner { grid-template-columns: 1fr; }
      .method-grid { grid-template-columns: 1fr; }
      .method-cards { grid-template-columns: repeat(3,1fr); }
      .method-card { grid-template-columns: 1fr; }
      .case-card, .case-card.reverse { grid-template-columns: 1fr; }
      .case-card.reverse .case-info { order: initial; }
      .case-visual { min-height: 600px; }
    }

    @media (max-width: 820px) {
      .shell { width: min(calc(100% - 30px), var(--max)); }
      .nav-links a:not(.button) { display: none; }
      .nav-links { gap: 8px; }
      .hero { padding: 70px 0 68px; }
      .hero h1 { font-size: clamp(49px, 14vw, 70px); }
      .hero-grid { gap: 45px; }
      .agent-app { grid-template-columns: 1fr; min-height: 660px; }
      .app-side, .trace { display: none; }
      .chat-feed { height: 540px; }
      .trust { overflow: hidden; }
      .logo-row { width: 850px; grid-template-columns: repeat(6, 128px); }
      .section { padding: 88px 0; }
      .section-head { display: block; }
      .section-head h2 { margin-bottom: 20px; font-size: 46px; }
      .method-visual { min-height: 620px; }
      .method-copy { padding: 30px; }
      .method-copy h3 { font-size: 32px; }
      .method-cards { grid-template-columns: 1fr; }
      .method-card { min-height: auto; }
      .gov-grid { gap: 45px; }
    }

    @media (max-width: 520px) {
      .preview-note { font-size: 14px; }
      .nav-inner { min-height: 68px; }
      .brand small { display: none; }
      .brand img { width: 34px; height: 34px; }
      .nav .button { padding: 8px 12px; }
      .hero { padding-top: 55px; }
      .hero-lead { font-size: 16px; }
      .hero-actions .button { width: 100%; }
      .prism-frame, .agent-app { border-radius: 23px; }
      .app-head { padding: 12px 14px; }
      .app-head p { display: none; }
      .chat-feed { height: 520px; padding: 18px 14px; }
      .message { max-width: 95%; }
      .bubble { font-size: 18px; }
      .chat-compose { padding: 11px; }
      .chat-compose input, .send-btn { height: 46px; }
      .send-btn { width: 46px; }
      .section-head h2, .gov-copy h2 { font-size: 40px; }
      .method-visual { min-height: 670px; }
      .flow-map { inset: 280px 20px 25px; }
      .flow-node { width: 110px; }
      .flow-node:nth-child(3) { top: 0; }
      .flow-node:nth-child(5) { bottom: 0; }
      .case-info { padding: 23px; }
      .case-card h3 { font-size: 29px; }
      .case-visual { min-height: 510px; }
      .case-screen.primary { left: 4%; width: 92%; height: 53%; }
      .case-screen.secondary { right: 3%; width: 58%; height: 31%; }
      .ai-decision { left: 3%; bottom: 5%; width: 50%; padding: 12px; }
      .phone { width: 31%; border-width: 5px; border-radius: 20px; }
      .phone.one { left: 3%; }
      .phone.two { left: 34.5%; }
      .phone.three { left: 66%; }
      .audit-panel { right: 3%; width: 61%; padding: 12px; }
      .policy-body { padding: 12px; }
      .policy-overview { grid-template-columns: 1fr; }
      .event-row { grid-template-columns: 1.1fr .7fr; }
      .event-row > :nth-child(2) { display: none; }
      .final-card { min-height: 530px; padding: 60px 22px; }
      .final-card h2 { font-size: 49px; }
      .footer-inner { display: grid; }
    }

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