:root {
        --ink: #101828;
        --text: #344054;
        --muted: #667085;
        --paper: #f5f7fb;
        --white: #ffffff;
        --blue: #0066cc;
        --blue-2: #0071e3;
        --green: #1db984;
        --rose: #c45189;
        --amber: #f59e0b;
        --line: rgba(15, 23, 42, 0.08);
        --shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
      }

      /* Time-aware night theme. Daytime keeps the existing default styling untouched. */
      html[data-tongpin-theme="night"] {
        --ink: #f4f7fb;
        --text: #cbd5e1;
        --muted: #94a3b8;
        --paper: #07111d;
        --white: #101b2a;
        --blue: #7dd3fc;
        --blue-2: #38bdf8;
        --green: #34d399;
        --rose: #f0abfc;
        --amber: #fbbf24;
        --line: rgba(203, 213, 225, 0.14);
        --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
      }

      html[data-tongpin-theme="night"] body {
        background: #07111d;
        color: var(--ink);
      }

      html[data-tongpin-theme="night"] .page {
        background:
          linear-gradient(90deg, rgba(125, 211, 252, 0.055) 1px, transparent 1px),
          linear-gradient(180deg, rgba(125, 211, 252, 0.04) 1px, transparent 1px),
          #07111d;
      }

      html[data-tongpin-theme="night"] .hero::before {
        background-image:
          linear-gradient(90deg, rgba(7, 17, 29, 0.98) 0%, rgba(7, 17, 29, 0.86) 42%, rgba(7, 17, 29, 0.54) 100%),
          linear-gradient(180deg, rgba(7, 17, 29, 0) 60%, #07111d 100%),
          url("./assets/hero-ai-social-future-2026-06-09.png");
      }

      html[data-tongpin-theme="night"] .hero::after {
        border-color: rgba(203, 213, 225, 0.12);
        background:
          linear-gradient(115deg, transparent 12%, rgba(125, 211, 252, 0.1) 38%, transparent 64%),
          linear-gradient(180deg, rgba(15, 23, 42, 0.48), transparent 34%, rgba(15, 23, 42, 0.7));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 90px rgba(0, 0, 0, 0.28);
      }

      html[data-tongpin-theme="night"] .nav,
      html[data-tongpin-theme="night"] .redirect-card,
      html[data-tongpin-theme="night"] .card,
      html[data-tongpin-theme="night"] .output,
      html[data-tongpin-theme="night"] .workflow-band,
      html[data-tongpin-theme="night"] .step,
      html[data-tongpin-theme="night"] .phone,
      html[data-tongpin-theme="night"] .phone-screen,
      html[data-tongpin-theme="night"] .footer {
        background-color: rgba(16, 27, 42, 0.86);
        border-color: var(--line);
        color: var(--ink);
        box-shadow: var(--shadow);
      }

      html[data-tongpin-theme="night"] h1,
      html[data-tongpin-theme="night"] h2,
      html[data-tongpin-theme="night"] h3,
      html[data-tongpin-theme="night"] .wordmark,
      html[data-tongpin-theme="night"] .capabilities,
      html[data-tongpin-theme="night"] .card h3,
      html[data-tongpin-theme="night"] .output b,
      html[data-tongpin-theme="night"] .footer strong {
        color: var(--ink);
        text-shadow: none;
      }

      html[data-tongpin-theme="night"] p,
      html[data-tongpin-theme="night"] .nav-links,
      html[data-tongpin-theme="night"] .hero-body,
      html[data-tongpin-theme="night"] .footer,
      html[data-tongpin-theme="night"] small {
        color: var(--text);
      }

      html[data-tongpin-theme="night"] textarea {
        background: #0b1422;
        border-color: rgba(148, 163, 184, 0.28);
        color: var(--ink);
      }

      html[data-tongpin-theme="night"] textarea::placeholder {
        color: #7f8da3;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        margin: 0;
        width: 100%;
        max-width: 100%;
        color: var(--ink);
        background: var(--paper);
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
        line-height: 1.45;
        overflow-x: hidden;
      }

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

      button,
      textarea {
        font: inherit;
      }

      .page {
        overflow: hidden;
        background:
          linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
          linear-gradient(180deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
          var(--paper);
        background-size: 48px 48px, 48px 48px, auto;
      }

      .shell {
        width: min(1180px, calc(100% - 48px));
        margin: 0 auto;
      }

      .hero {
        position: relative;
        min-height: 900px;
        padding: 24px 0 86px;
        isolation: isolate;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background-image:
          linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.82) 42%, rgba(245, 247, 251, 0.32) 100%),
          linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, var(--paper) 100%),
          url("./assets/hero-ai-social-future-2026-06-09.png");
        background-size: cover;
        background-position: center;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: 76px max(24px, calc((100vw - 1180px) / 2)) 42px;
        z-index: -2;
        border: 1px solid rgba(15, 23, 42, 0.075);
        border-radius: 28px;
        background:
          linear-gradient(115deg, transparent 12%, rgba(0, 102, 204, 0.08) 38%, transparent 64%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent 34%, rgba(255, 255, 255, 0.68));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 30px 90px rgba(15, 23, 42, 0.08);
        pointer-events: none;
      }

      .nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: 56px;
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 0 24px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(20px) saturate(180%);
      }

      .wordmark {
        font-size: 18px;
        font-weight: 800;
      }

      .nav-links {
        display: flex;
        gap: 34px;
        align-items: center;
        color: var(--text);
        font-size: 13px;
        font-weight: 650;
      }

      .nav-links .nav-plaza {
        display: inline-grid;
        place-items: center;
        min-height: 34px;
        border: 1px solid rgba(196, 81, 137, 0.18);
        border-radius: 999px;
        padding: 0 15px;
        color: #fff;
        background: linear-gradient(90deg, var(--rose), #d7a03d 52%, var(--green));
        box-shadow: 0 12px 28px rgba(196, 81, 137, 0.22), 0 8px 22px rgba(29, 185, 132, 0.18);
        font-weight: 850;
      }

      .nav-links .nav-plaza:hover {
        color: #fff;
        background: linear-gradient(90deg, #b23f78, #c98f2a 52%, #16a873);
        box-shadow: 0 16px 34px rgba(196, 81, 137, 0.26), 0 10px 26px rgba(29, 185, 132, 0.22);
        transform: translateY(-1px);
      }

      .nav-login {
        justify-self: end;
        display: inline-grid;
        place-items: center;
        min-height: 36px;
        border-radius: 999px;
        padding: 0 18px;
        color: #fff;
        background: linear-gradient(90deg, var(--rose), #d7a03d 52%, var(--green));
        box-shadow: 0 12px 28px rgba(196, 81, 137, 0.2), 0 8px 22px rgba(29, 185, 132, 0.16);
        font-size: 13px;
        font-weight: 800;
      }

      .hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 390px;
        gap: 60px;
        align-items: center;
        min-height: 720px;
        padding: 0 44px;
      }

      .home-core-only {
        min-height: 900px;
      }

      .hero-copy {
        max-width: 620px;
        padding-top: 54px;
      }

      .kicker {
        margin: 0 0 18px;
        color: var(--blue);
        font-size: 13px;
        font-weight: 850;
      }

      h1,
      h2,
      h3,
      p {
        letter-spacing: 0;
        overflow-wrap: anywhere;
      }

      h1 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(64px, 7.4vw, 108px);
        font-weight: 950;
        line-height: 0.92;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 22px 58px rgba(16, 24, 39, 0.14);
      }

      .capabilities {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        margin: 28px 0 0;
        color: #111827;
        font-size: clamp(18px, 1.6vw, 22px);
        font-weight: 900;
      }

      .capabilities span:not(:last-child)::after {
        content: "·";
        margin: 0 0.38em;
      }

      .slogan {
        margin: 14px 0 0;
        width: fit-content;
        color: transparent;
        background: linear-gradient(90deg, var(--rose), #d7a03d 48%, var(--green));
        background-clip: text;
        -webkit-background-clip: text;
        font-size: 23px;
        font-weight: 950;
      }

      .hero-body {
        max-width: 560px;
        margin: 28px 0 0;
        color: var(--muted);
        font-size: 18px;
        font-weight: 560;
        line-height: 1.58;
      }

      .home-ai-search,
      .search {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) auto;
        position: relative;
        z-index: 30;
        align-items: center;
        gap: 14px;
        width: min(640px, 100%);
        min-height: 72px;
        margin-top: 42px;
        border: 1px solid rgba(56, 189, 248, 0.42);
        border-radius: 999px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1);
        backdrop-filter: blur(20px);
      }

      .home-ai-plus,
      .plus {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 50%;
        color: var(--blue);
        background: linear-gradient(135deg, #eef9ff, #fff);
        box-shadow: 0 10px 24px rgba(0, 102, 204, 0.1);
        font-size: 30px;
        font-weight: 500;
      }

      .home-ai-search textarea,
      .search textarea {
        width: 100%;
        min-height: 28px;
        border: 0;
        outline: 0;
        color: var(--ink);
        background: transparent;
        resize: none;
        font-size: 18px;
      }

      .home-ai-search textarea::placeholder,
      .search textarea::placeholder {
        color: rgba(71, 84, 103, 0.64);
      }

      .home-ai-submit,
      .submit {
        min-width: 82px;
        min-height: 48px;
        border: 0;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, #004f9f, var(--blue-2));
        box-shadow: 0 12px 28px rgba(0, 102, 204, 0.25);
        font-weight: 850;
      }

      .tool-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 22px;
      }

      .home-ai-tools[hidden],
      .tool-row[hidden] {
        display: none !important;
      }

      .home-ai-tools {
        position: absolute;
        top: calc(100% + 12px);
        left: 8px;
        right: 8px;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        margin-top: 0;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 22px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 20px 52px rgba(15, 23, 42, 0.14);
        backdrop-filter: blur(20px) saturate(180%);
      }

      .home-ai-tools button,
      .tool-row span {
        display: inline-grid;
        place-items: center;
        min-height: 42px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 18px;
        color: var(--text);
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        font-size: 14px;
        font-weight: 750;
        cursor: pointer;
      }

      .home-ai-tools button:first-child,
      .tool-row span:first-child {
        color: var(--blue);
      }

      .hero-lead {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        margin: 28px 0 0;
        color: #111827;
        font-size: clamp(18px, 1.6vw, 22px);
        font-weight: 900;
      }

      .hero-lead span:not(:last-child)::after {
        content: "·";
        margin: 0 0.38em;
      }

      .ai-panel {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: var(--shadow);
        backdrop-filter: blur(22px) saturate(160%);
      }

      .panel-head {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 16px;
        align-items: center;
        padding: 28px;
        background: linear-gradient(135deg, #eef9ff, #f7f4ff);
      }

      .orb {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(135deg, var(--blue-2), var(--green));
        box-shadow: 0 12px 30px rgba(0, 113, 227, 0.28);
      }

      .panel-head h3 {
        margin: 0;
        font-size: 22px;
        line-height: 1.1;
      }

      .panel-head p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 14px;
        font-weight: 650;
      }

      .result-list {
        display: grid;
        gap: 14px;
        padding: 22px 24px 24px;
      }

      .result {
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 16px;
        padding: 15px 16px 15px 22px;
        background: rgba(255, 255, 255, 0.96);
      }

      .result b {
        display: block;
        color: var(--ink);
        font-size: 14px;
      }

      .result p {
        margin: 7px 0 0;
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
      }

      .panel-cta {
        display: grid;
        place-items: center;
        margin-top: 6px;
        min-height: 42px;
        border-radius: 999px;
        color: #fff;
        background: var(--ink);
        font-size: 14px;
        font-weight: 850;
      }

      .section {
        padding: 88px 0 96px;
      }

      .section-head {
        display: grid;
        gap: 12px;
        max-width: 780px;
        margin-bottom: 34px;
      }

      .section h2 {
        margin: 0;
        color: var(--ink);
        font-size: clamp(34px, 4vw, 54px);
        font-weight: 950;
        line-height: 1.08;
      }

      .section-head p {
        margin: 0;
        color: var(--muted);
        font-size: 18px;
        font-weight: 560;
        line-height: 1.55;
      }

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

      .card {
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 18px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
      }

      .icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        margin-bottom: 20px;
        color: var(--blue);
        background: rgba(0, 113, 227, 0.1);
      }

      .card h3 {
        margin: 0;
        color: var(--ink);
        font-size: 20px;
      }

      .card .input {
        margin: 16px 0 18px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 620;
        line-height: 1.48;
      }

      .output {
        min-height: 88px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 8px;
        padding: 12px;
        background: #f8fafc;
      }

      .output b {
        color: var(--blue);
        font-size: 12px;
      }

      .output p {
        margin: 7px 0 0;
        color: var(--text);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.38;
      }

      .workflow {
        padding: 88px 0;
        background: #fff;
      }

      .workflow-band {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        gap: 54px;
        align-items: center;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 28px;
        padding: 52px 40px;
        background: linear-gradient(135deg, #f3f7fb, #fff 52%, #f7f4ff);
        box-shadow: 0 24px 68px rgba(15, 23, 42, 0.06);
      }

      .workflow-band h2 {
        margin: 0;
        font-size: clamp(34px, 3.6vw, 48px);
        line-height: 1.12;
      }

      .workflow-band p {
        margin: 24px 0 0;
        color: var(--muted);
        font-size: 18px;
        font-weight: 560;
        line-height: 1.55;
      }

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

      .step {
        border: 1px solid rgba(15, 23, 42, 0.07);
        border-radius: 18px;
        padding: 22px;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
      }

      .step em {
        color: var(--blue);
        font-style: normal;
        font-size: 18px;
        font-weight: 950;
      }

      .step h3 {
        margin: 16px 0 8px;
        font-size: 21px;
      }

      .step p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        font-weight: 620;
      }

      .trust-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
        gap: 80px;
        align-items: center;
      }

      .bullets {
        display: grid;
        gap: 16px;
        margin-top: 36px;
      }

      .bullet {
        display: grid;
        grid-template-columns: 18px 1fr;
        gap: 14px;
        align-items: start;
        color: var(--text);
        font-size: 16px;
        font-weight: 700;
      }

      .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-top: 4px;
        background: var(--blue);
      }

      .phone {
        border-radius: 42px;
        padding: 18px;
        background: var(--ink);
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
      }

      .phone-screen {
        min-height: 416px;
        border-radius: 28px;
        padding: 32px 24px;
        background: linear-gradient(180deg, #fff, #eef9ff);
      }

      .phone-screen h3 {
        margin: 0;
        font-size: 24px;
      }

      .phone-screen p {
        margin: 8px 0 28px;
        color: var(--muted);
        font-size: 14px;
        font-weight: 650;
      }

      .phone-row {
        height: 48px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 14px;
        margin-top: 14px;
        background: #fff;
      }

      .phone-row::before,
      .phone-row::after {
        content: "";
        display: block;
        height: 6px;
        border-radius: 999px;
        margin-left: 16px;
      }

      .phone-row::before {
        width: 96px;
        margin-top: 14px;
        background: var(--blue);
      }

      .phone-row::after {
        width: 176px;
        margin-top: 8px;
        background: #cbd5e1;
      }

      .footer {
        padding: 76px 0;
        color: #fff;
        background: var(--ink);
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.5fr auto;
        gap: 44px;
        align-items: start;
      }

      .footer strong {
        display: block;
        font-size: 36px;
        line-height: 1;
      }

      .footer small,
      .footer p {
        color: #94a3b8;
        font-size: 14px;
        font-weight: 600;
      }

      .footer p {
        margin: 0 0 18px;
      }

      .footer-cta {
        display: grid;
        place-items: center;
        min-height: 48px;
        border-radius: 999px;
        padding: 0 24px;
        background: linear-gradient(135deg, #004f9f, var(--blue-2));
        box-shadow: 0 12px 30px rgba(0, 113, 227, 0.18);
        font-weight: 850;
      }

      @media (max-width: 980px) {
        .nav-links {
          display: none;
        }

        .hero {
          min-height: 820px;
        }

        .hero-layout,
        .workflow-band,
        .trust-layout,
        .footer-grid {
          grid-template-columns: 1fr;
        }

        .hero-layout {
          padding: 0;
        }

        .ai-panel {
          max-width: 430px;
        }

        .feature-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 620px) {
        html,
        body {
          max-width: 100%;
          overflow-x: hidden;
        }

        .page {
          background-size: 36px 36px, 36px 36px, auto;
        }

        .shell {
          width: min(354px, calc(100vw - 36px));
          max-width: 354px;
          margin-left: 18px;
          margin-right: 18px;
        }

        .hero {
          min-height: auto;
          padding-top: 14px;
          padding-bottom: 34px;
        }

        .hero::after {
          inset: 78px 14px 18px;
          border-radius: 22px;
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42) 56%, rgba(245, 247, 251, 0.92)),
            linear-gradient(115deg, transparent 10%, rgba(0, 102, 204, 0.07) 46%, transparent 84%);
        }

        .nav {
          grid-template-columns: 1fr auto;
          height: auto;
          row-gap: 10px;
          border-radius: 24px;
          padding: 7px 12px 9px 18px;
        }

        .nav .nav-login {
          grid-column: 2;
          grid-row: 1;
          justify-self: end;
        }

        .nav .nav-links {
          grid-column: 1 / -1;
          display: flex;
          gap: 10px;
          max-width: 100%;
          overflow-x: auto;
          padding: 0 2px 1px 0;
          font-size: 12px;
          scrollbar-width: none;
        }

        .nav .nav-links .nav-plaza {
          flex: 0 0 auto;
          min-height: 32px;
          padding: 0 12px;
          color: #fff;
          background: linear-gradient(90deg, var(--rose), #d7a03d 52%, var(--green));
          box-shadow: 0 10px 22px rgba(196, 81, 137, 0.2), 0 6px 18px rgba(29, 185, 132, 0.16);
        }

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

        .wordmark {
          font-size: 17px;
        }

        .nav-login {
          min-height: 34px;
          padding: 0 16px;
          font-size: 13px;
        }

        .hero-layout {
          display: block;
          min-height: auto;
          width: 100%;
          max-width: 100%;
          overflow: visible;
        }

        .hero-copy {
          min-width: 0;
          width: 100%;
          max-width: 100%;
          padding-top: 42px;
          overflow: visible;
        }

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

        h1 {
          font-size: 52px;
          line-height: 0.98;
        }

        .capabilities {
          margin-top: 18px;
          font-size: 16px;
          line-height: 1.35;
        }

        .slogan {
          margin-top: 10px;
          font-size: 18px;
        }

        .hero-body {
          max-width: 100%;
          margin-top: 22px;
          font-size: 15px;
          line-height: 1.55;
        }

        .search {
          grid-template-columns: 40px 1fr 60px;
          width: 100%;
          max-width: 100%;
          min-height: 58px;
          margin-top: 28px;
          padding: 7px;
        }

        .search textarea {
          font-size: 15px;
        }

        .plus {
          width: 40px;
          height: 40px;
          font-size: 26px;
        }

        .submit {
          min-width: 60px;
          min-height: 40px;
          font-size: 13px;
        }

        .tool-row {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          width: 100%;
          max-width: 100%;
          margin-top: 14px;
          overflow: hidden;
        }

        .home-ai-tools {
          top: calc(100% + 10px);
          left: 0;
          right: 0;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 8px;
          border-radius: 20px;
          padding: 10px;
        }

        .home-ai-tools button,
        .tool-row span {
          width: 100%;
          min-width: 0;
          min-height: 34px;
          border-radius: 17px;
          padding: 0 6px;
          box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
          font-size: 12px;
        }

        .ai-panel {
          width: 100%;
          max-width: 100%;
          margin-top: 22px;
          border-radius: 22px;
          box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
          overflow: hidden;
        }

        .panel-head {
          grid-template-columns: 44px 1fr;
          gap: 13px;
          padding: 18px;
        }

        .orb {
          width: 44px;
          height: 44px;
        }

        .panel-head h3 {
          font-size: 20px;
        }

        .panel-head p {
          margin-top: 4px;
          font-size: 13px;
        }

        .result-list {
          gap: 10px;
          padding: 16px 16px 18px;
        }

        .result {
          padding: 12px 14px;
        }

        .result p {
          font-size: 12px;
        }

        .panel-cta {
          min-height: 40px;
          font-size: 13px;
        }

        .section {
          padding: 58px 0 66px;
        }

        .section-head {
          gap: 10px;
          margin-bottom: 22px;
          min-width: 0;
          max-width: 100%;
        }

        .section h2,
        .workflow-band h2 {
          max-width: 100%;
          font-size: 28px;
          line-height: 1.12;
          word-break: break-all;
        }

        .section-head p {
          font-size: 15px;
        }

        .feature-grid,
        .steps {
          grid-template-columns: 1fr;
          gap: 12px;
          min-width: 0;
          max-width: 100%;
        }

        .card {
          display: grid;
          grid-template-columns: 48px 1fr;
          column-gap: 14px;
          row-gap: 10px;
          padding: 16px;
          min-width: 0;
          max-width: 100%;
          overflow: hidden;
        }

        .card .icon {
          width: 42px;
          height: 42px;
          margin: 0;
        }

        .card h3 {
          align-self: center;
          font-size: 18px;
        }

        .card .input {
          grid-column: 1 / -1;
          margin: 8px 0 12px;
          font-size: 13px;
          word-break: break-all;
        }

        .output {
          grid-column: 1 / -1;
          min-width: 0;
          max-width: 100%;
          min-height: 0;
          padding: 10px;
        }

        .output p {
          word-break: break-all;
        }

        .workflow {
          padding: 58px 0;
        }

        .workflow-band {
          gap: 26px;
          border-radius: 22px;
          padding: 28px 18px;
        }

        .workflow-band p {
          margin-top: 16px;
          font-size: 15px;
        }

        .step {
          padding: 16px;
        }

        .trust-layout {
          gap: 30px;
        }

        .bullets {
          margin-top: 24px;
        }

        .phone {
          border-radius: 28px;
          padding: 10px;
        }

        .phone-screen {
          min-height: 310px;
          border-radius: 22px;
          padding: 24px 18px;
        }

        .footer {
          padding: 46px 0;
        }

        .footer-grid {
          gap: 24px;
        }
      }