/* ── Tokens ── */
      :root {
        color-scheme: light;
        --bg: #f5f5f7;
        --surface: rgba(255, 255, 255, 0.82);
        --text: #1d1d1f;
        --muted: #6e6e73;
        --subtle: #86868b;
        --line: rgba(29, 29, 31, 0.08);
        --line-strong: rgba(29, 29, 31, 0.14);
        --blue: #0071e3;
        --blue-hover: #0062cc;
        --blue-deep: #004ea3;
        --blue-tint: rgba(0, 113, 227, 0.04);
        --blue-glow: rgba(0, 113, 227, 0.12);
        --red: #e03131;
        --red-bg: rgba(224, 49, 49, 0.06);
        --green: #178a46;
        --brand: #2EB885;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
        --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.07);
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1);
        --radius-lg: 24px;
        --radius-md: 16px;
        --radius-sm: 10px;
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          sans-serif;
      }

      * { box-sizing: border-box; margin: 0; }
      body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); scroll-behavior: smooth; overflow-x: hidden; }
      button, input { font: inherit; }

      /* ── Background ── */
      .bg-gradient {
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
          radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 113, 227, 0.06) 0%, transparent 60%),
          radial-gradient(ellipse 60% 50% at 80% 80%, rgba(23, 138, 70, 0.04) 0%, transparent 60%),
          linear-gradient(180deg, #fff 0, #f5f5f7 400px);
      }

      .bg-glow {
        position: fixed;
        top: -20%;
        left: -10%;
        width: 60%;
        height: 60%;
        z-index: -1;
        background: radial-gradient(circle, rgba(0, 113, 227, 0.05) 0%, transparent 70%);
        animation: breathe 12s ease-in-out infinite;
        pointer-events: none;
      }

      @keyframes breathe {
        0%, 100% { opacity: 0.4; transform: scale(1); }
        50% { opacity: 0.7; transform: scale(1.05); }
      }

      /* ── Layout ── */
      .shell {
        width: min(1140px, calc(100% - 40px));
        margin: 0 auto;
      }

      /* ── Nav ── */
      .nav {
        position: sticky;
        top: 0;
        z-index: 10;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(46,184,133,0.06) 100%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--line);
      }

      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: var(--text);
      }

      .brand-icon {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        flex-shrink: 0;
      }

      .brand-icon svg {
        width: 38px;
        height: 38px;
      }

      .brand-name {
        display: flex;
        align-items: baseline;
        gap: 0;
        line-height: 1;
      }

      .brand-name-text {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.02em;
        display: inline-block;
        background: linear-gradient(90deg, #1d1d1f 0%, #234a3e 42%, #2EB885 62%, #1F9E78 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      .brand-name-sep {
        font-size: 15px;
        font-weight: 400;
        color: var(--subtle);
        margin: 0 5px;
      }

      .brand-name-sub {
        font-size: 15px;
        font-weight: 400;
        color: var(--muted);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 28px;
      }

      .nav-link {
        position: relative;
        color: var(--muted);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        padding: 4px 0;
        transition: color 0.2s ease;
      }

      .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: var(--text);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
      }

      .nav-link:hover {
        color: var(--text);
      }

      .nav-link:hover::after {
        transform: scaleX(1);
      }

      /* ── Main ── */
      main { padding: 32px 0 0; }

      /* ─ Hero ── */
      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
        align-items: start;
        gap: clamp(32px, 5vw, 72px);
      }

      .story {
        grid-column: 1;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 16px;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(0, 113, 227, 0.08);
        color: var(--blue);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        flex-wrap: wrap;
      }

      .eyebrow-price {
        padding-left: 6px;
        margin-left: 4px;
        border-left: 1px solid rgba(0, 113, 227, 0.2);
        font-weight: 750;
      }

      .eyebrow-divider {
        width: 1px;
        height: 10px;
        background: rgba(0, 113, 227, 0.2);
        margin: 0 2px;
      }

      .eyebrow-kicker {
        font-weight: 600;
        opacity: 0.85;
      }

      .eyebrow svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        animation: eyebrowPulse 2s ease-in-out infinite;
      }

      @keyframes eyebrowPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.85; }
      }

      h1 {
        max-width: 520px;
        font-size: clamp(32px, 4.5vw, 42px);
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: -0.01em;
      }

      .lead {
        max-width: 460px;
        margin-top: 18px;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.6;
      }

      /* ─ Hero Visual ── */
      .hero-visual {
        margin-top: 18px;
        width: 100%;
        max-width: 100%;
      }

      .hero-visual-frame {
        /* aspect-ratio: 2 / 1; */
        border-radius: 16px;
        overflow: hidden;
        background: transparent;
        position: relative;
      }

      .hero-visual-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .hero-trust-bar {
        margin-top: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        display:none;

      }

      .hero-trust-bar .trust-item {
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .hero-trust-bar .trust-item svg {
        width: 14px;
        height: 14px;
        color: var(--green);
        flex-shrink: 0;
      }

      .hero-trust-bar .trust-divider {
        width: 1px;
        height: 12px;
        background: var(--border);
      }

      .hero-visual-placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: var(--subtle);
        font-size: 12px;
        font-weight: 600;
      }

      .hero-visual-placeholder svg {
        width: 40px;
        height: 40px;
        opacity: 0.4;
        color: var(--blue);
      }

      /* ── Price Preview ── */
      .price-preview {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
      }

      .price-preview-value {
        font-size: 20px;
        font-weight: 750;
        letter-spacing: -0.02em;
        color: var(--text);
      }

      .price-preview-unit {
        color: var(--muted);
        font-size: 13px;
        font-weight: 500;
      }

      .price-preview-dot {
        width: 3px;
        height: 3px;
        border-radius: 999px;
        background: var(--line-strong);
      }

      .price-preview-note {
        color: var(--muted);
        font-size: 13px;
        font-weight: 500;
      }

      /* ─ Trust Anchors ── */
      .trust-anchors {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 16px;
      }

      .trust-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
      }

      .trust-tag svg {
        width: 14px;
        height: 14px;
        color: var(--green);
        flex-shrink: 0;
      }

      /* ── Panel ── */
      .panel {
        grid-column: 2;
        position: relative;
        padding: 28px;
        border-radius: 28px;
        background: var(--surface);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: var(--shadow-lg);
        overflow: hidden;
      }

      .panel::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          radial-gradient(ellipse 80% 60% at 0% 0%, rgba(0, 113, 227, 0.05) 0%, transparent 60%),
          url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230071e3' fill-opacity='0.018'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
      }

      .panel > * { position: relative; }

      .panel-header {
        margin-bottom: 24px;
      }

      .panel-title {
        margin-top: 6px;
        font-size: 22px;
        line-height: 1.25;
        font-weight: 700;
      }

      .panel-subtitle {
        margin-top: 6px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      /* ── Form Field ── */
      .field-group { margin-top: 20px; }

      .field-label {
        display: block;
        margin-bottom: 8px;
        color: #3a3a3c;
        font-size: 13px;
        font-weight: 650;
      }

      .field-wrap {
        position: relative;
      }

      .field-icon {
        position: absolute;
        top: 50%;
        left: 14px;
        display: grid;
        width: 20px;
        height: 20px;
        place-items: center;
        transform: translateY(-50%);
        color: var(--blue);
        pointer-events: none;
      }

      .field-icon svg { width: 18px; height: 18px; }

      .field {
        width: 100%;
        height: 52px;
        padding: 0 16px 0 44px;
        border: 1.5px solid var(--line-strong);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.8);
        color: var(--text);
        font-size: 16px;
        outline: 0;
        transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      }

      .field::placeholder { color: var(--subtle); font-weight: 400; }

      .field:focus {
        border-color: var(--blue);
        background: #fff;
        box-shadow: 0 0 0 3px var(--blue-glow);
      }

      .field.invalid {
        border-color: var(--red);
        background: var(--red-bg);
      }

      .field.invalid:focus {
        box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.1);
      }

      .field-error {
        display: none;
        align-items: center;
        gap: 5px;
        margin-top: 6px;
        color: var(--red);
        font-size: 12px;
        font-weight: 600;
      }

      .field-error.visible { display: flex; }
      .field-error svg { width: 14px; height: 14px; flex-shrink: 0; }

      /* ── Plan Cards ── */
      .plans-section { margin-top: 22px; }

      .plans-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }

      .plans-label {
        font-size: 13px;
        font-weight: 650;
        color: #3a3a3c;
      }

      .plans-hint {
        color: var(--subtle);
        font-size: 12px;
        font-weight: 500;
      }

      .plans { display: grid; gap: 10px; }

      .plan-input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .plan {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 14px;
        align-items: center;
        min-height: 88px;
        padding: 18px 20px;
        border: 1.5px solid var(--line);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
      }

      .plan::before {
        content: "";
        position: absolute;
        left: 0;
        top: 12px;
        bottom: 12px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--blue);
        opacity: 0;
        transition: opacity 0.2s;
      }

      .plan:hover {
        background: rgba(255, 255, 255, 0.85);
        border-color: var(--line-strong);
      }

      .plan-input:checked + .plan {
        border-color: rgba(0, 113, 227, 0.35);
        background: var(--blue-tint);
        box-shadow: 0 4px 16px rgba(0, 113, 227, 0.08);
        transform: scale(1.005);
      }

      .plan-input:checked + .plan::before { opacity: 1; }

      .plan-icon {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 8px;
        background: rgba(0, 113, 227, 0.07);
        color: var(--blue);
        flex-shrink: 0;
      }

      .plan-icon svg { width: 16px; height: 16px; }

      .plan-main { min-width: 0; }

      .plan-line {
        display: flex;
        align-items: center;
        gap: 7px;
      }

      .plan-name {
        font-size: 15px;
        font-weight: 700;
      }

      .plan-badge {
        display: inline-flex;
        align-items: center;
        height: 20px;
        padding: 0 7px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
      }

      .plan-badge.recommend {
        color: var(--blue);
        background: rgba(0, 113, 227, 0.1);
      }

      .plan-badge.alt {
        color: #8b6914;
        background: rgba(184, 110, 0, 0.1);
      }

      .plan-desc {
        margin-top: 4px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.5;
      }

      .plan-price-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
      }

      .plan-price {
        font-size: 20px;
        font-weight: 750;
        letter-spacing: -0.02em;
        white-space: nowrap;
      }

      .plan-price-unit {
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
      }

      .plan-check {
        position: absolute;
        bottom: 12px;
        right: 12px;
        display: grid;
        width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 999px;
        background: var(--blue);
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.2s, transform 0.2s;
      }

      .plan-check svg {
        width: 12px;
        height: 12px;
        stroke: #fff;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .plan-check .check-path {
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
        transition: stroke-dashoffset 0.35s ease 0.1s;
      }

      .plan-input:checked + .plan .plan-check {
        opacity: 1;
        transform: scale(1);
      }

      .plan-input:checked + .plan .check-path {
        stroke-dashoffset: 0;
      }

      /* ── CTA ── */
      .cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 52px;
        margin-top: 20px;
        border: 0;
        border-radius: 14px;
        color: #fff;
        background: var(--blue);
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s;
      }

      .cta:hover {
        background: var(--blue-hover);
        box-shadow: 0 8px 24px rgba(0, 113, 227, 0.2);
        transform: translateY(-1px);
      }

      .cta:active { transform: translateY(0); }

      .cta:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      .cta-spinner {
        display: none;
        width: 18px;
        height: 18px;
        animation: spin 0.8s linear infinite;
      }

      .cta.loading .cta-spinner { display: block; }
      .cta.loading .cta-text { display: none; }
      .cta.loading .cta-loading-text { display: inline; }
      .cta-loading-text { display: none; }

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

      /* ── Payment Methods ── */
      .payment-section {
        margin-top: 16px;
        text-align: center;
      }

      .payment-label {
        color: var(--subtle);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        margin-bottom: 8px;
      }

      .payment-icons {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
      }

      .payment-icon {
        display: grid;
        place-items: center;
        height: 28px;
        padding: 0 4px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.03);
        opacity: 0.6;
        transition: opacity 0.2s;
      }

      .payment-icon:hover { opacity: 0.85; }
      .payment-icon svg { height: 18px; width: auto; }


      /* ── Supported Services ── */
      .services-section {
        margin-top: 64px;
      }

      .services-header {
        text-align: center;
        margin-bottom: 32px;
      }

      /* ══ Section typography (shared) ══ */
      .section-title {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.015em;
      }

      .section-subtitle {
        margin-top: 10px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.6;
      }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      .service-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 24px 16px;
        border-radius: 16px;
        background: white;
        border: 1px solid var(--line);
        text-align: center;
        transition: box-shadow 0.25s ease, transform 0.25s ease;
      }

      .service-card:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
      }

      .service-card img {
        width: 20px;
        height: 20px;
        object-fit: contain;
      }

      .service-icon-placeholder {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--blue-tint);
        color: var(--blue);
        font-size: 14px;
        font-weight: 700;
      }

      .service-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
      }

      .service-desc {
        font-size: 12px;
        color: var(--muted);
      }

      .services-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 32px;
      }

      .services-more-badge {
        font-size: 20px;
        font-weight: 800;
        color: var(--blue);
      }

      .services-more-text {
        font-size: 14px;
        color: var(--muted);
      }

      .services-categories {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
      }

      .services-categories span {
        padding: 5px 14px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.03);
        font-size: 12px;
        color: var(--muted);
        font-weight: 500;
      }

      /* ── FAQ ── */
      .faq-section {
        position: relative;
        margin-top: 56px;
        padding-top: 56px;
      }

      .faq-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
      }

      .section-kicker {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #2EB885;
        margin-bottom: 10px;
      }

      .faq-header {
        text-align: center;
        margin-bottom: 36px;
      }

      .faq-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px 40px;
        align-items: start;
      }

      .faq-col {
        display: grid;
        gap: 12px;
        min-width: 0;
      }

      .faq-item {
        position: relative;
        border-radius: 14px;
        border: 1px solid transparent;
        background: transparent;
        overflow: hidden;
        transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
      }

      .faq-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: #2EB885;
        transform: scaleY(0);
        transform-origin: center;
        transition: transform 0.25s ease;
      }

      .faq-item:hover {
        background: rgba(46, 184, 133, 0.04);
        border-color: var(--line);
      }

      .faq-item.open {
        background: white;
        border-color: var(--line-strong);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
      }

      .faq-item.open::before { transform: scaleY(1); }

      .faq-question {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 18px 22px;
        border: 0;
        background: none;
        cursor: pointer;
        text-align: left;
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        line-height: 1.45;
      }

      .faq-index {
        font-size: 13px;
        font-weight: 700;
        color: #2EB885;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.02em;
        flex-shrink: 0;
        min-width: 24px;
      }

      .faq-q-text { flex: 1; min-width: 0; }

      .faq-chevron {
        width: 20px;
        height: 20px;
        color: var(--subtle);
        flex-shrink: 0;
        transition: transform 0.25s ease;
      }

      .faq-item.open .faq-chevron { transform: rotate(180deg); }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      .faq-answer-inner {
        padding: 0 22px 20px 60px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75;
      }

      /* ── Contact ── */
      .contact-section {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 88px 40px 80px;
        background: linear-gradient(180deg, #f3faf7 0%, #eef6f6 50%, #f0f4ff 100%);
        text-align: center;
      }

      .contact-card {
        max-width: 720px;
        margin: 0 auto;
        padding: 56px 48px;
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        text-align: center;
      }

      .contact-card .section-kicker {
        margin-bottom: 14px;
      }

      .contact-card .section-title {
        margin-bottom: 12px;
      }

      .contact-card .section-subtitle {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 36px;
      }

      .contact-email {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.01em;
        color: #1a8a5f;
        text-decoration: none;
        padding: 14px 28px;
        border-radius: var(--radius-md);
        transition: background 0.2s ease, transform 0.2s ease;
      }

      .contact-email-icon svg { width: 22px; height: 22px; }
      .contact-email:hover { background: rgba(46, 184, 133, 0.08); transform: translateY(-1px); }

      .contact-meta {
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0;
        margin-top: 40px;
        padding-top: 32px;
        border-top: 1px solid var(--line);
      }

      .contact-meta-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 24px;
      }

      .contact-meta-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(46, 184, 133, 0.1);
        color: #2EB885;
        flex-shrink: 0;
      }
      .contact-meta-icon svg { width: 17px; height: 17px; }

      .contact-meta-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        text-align: left;
      }

      .contact-meta-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtle);
        letter-spacing: 0.02em;
      }

      .contact-meta-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
      }

      .contact-meta-divider {
        width: 1px;
        align-self: center;
        height: 28px;
        background: var(--line-strong);
      }

      /* ── Footer ──
         接住 contact 区渐变的尾色 (#f0f4ff)，让色场从 contact card
         一路流进 footer，页面是被"溶解"掉的而非被硬切。
         - 不引入新色相：复用品牌渐变尾色，与上方连续。
         - 无硬边线：两侧同源时无需分隔，避免高亮色差。 */
      .footer {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 24px 40px;
        background: #f0f4ff;
      }

      .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
      }

      .footer-copy {
        color: var(--subtle);
        font-size: 12px;
      }

      .footer-links {
        display: flex;
        gap: 20px;
      }

      .footer-links a {
        color: var(--muted);
        font-size: 12px;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.15s;
      }

      .footer-links a:hover { color: var(--blue); }

      /* ── Responsive ── */
      @media (max-width: 960px) {
        .hero {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .faq-grid {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .story {
          padding-top: 0;
          text-align: center;
        }

        .eyebrow { justify-content: center; }
        h1 { margin: 0 auto; }
        .lead { margin-left: auto; margin-right: auto; }

        .panel {
          grid-column: auto;   /* 解除桌面端 grid-column:2 的钉死，避免在单列网格里被挤进隐式第二列 */
          max-width: 520px;
          margin: 0 auto;
        }
      }

      @media (max-width: 720px) {
        .shell { width: min(100% - 24px, 1140px); }

        .nav-links { gap: 20px; }
        .nav-link { font-size: 12px; }

        .brand-name-text { font-size: 18px; }
        .brand-name-sep { font-size: 14px; }
        .brand-name-sub { font-size: 14px; }

        .story { text-align: left; }
        .eyebrow { justify-content: flex-start; }

        .panel { padding: 20px; border-radius: 22px; }

        .plan {
          grid-template-columns: auto 1fr;
          gap: 12px;
          padding: 14px;
        }

        .plan-price-wrap {
          grid-column: 2;
          flex-direction: row;
          align-items: baseline;
          gap: 6px;
        }

        .price-preview-value { font-size: 18px; }

        .hero-visual {
          max-width: 100%;
          margin-top: 24px;
        }

        .services-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }

        .service-card {
          padding: 18px 12px;
        }

        .trust-anchors { gap: 14px; }

        .contact-section {
          margin-left: calc(-50vw + 50%);
          margin-right: calc(-50vw + 50%);
          padding: 48px 16px 40px;
        }

        .contact-card {
          padding: 36px 22px;
        }

        .contact-email {
          font-size: 18px;
          padding: 12px 18px;
          gap: 10px;
        }
        .contact-email-icon svg { width: 18px; height: 18px; }

        .contact-meta {
          flex-direction: column;
          gap: 18px;
          margin-top: 32px;
          padding-top: 28px;
        }

        .contact-meta-item {
          padding: 0;
        }

        .contact-meta-divider {
          width: 40px;
          height: 1px;
        }

        .faq-answer-inner {
          padding-left: 22px;
        }

        .footer {
          padding: 20px 20px;
        }

        .footer-inner {
          max-width: 100%;
          margin-top: 24px;
        }

        .services-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }

        .service-card {
          padding: 18px 12px;
        }

        .trust-anchors { gap: 14px; }

        .footer-inner {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      /* ══ Result card (post-checkout) ══ */
      .result-card {
        grid-column: 2;
        grid-row: 1;
        position: relative;
        background: var(--card, rgba(255,255,255,0.04));
        border: 1px solid var(--border, rgba(255,255,255,0.08));
        border-radius: 20px;
        padding: 28px;
        margin: 0 auto;
        max-width: 520px;
        backdrop-filter: blur(12px);
        box-shadow: 0 18px 50px rgba(0,0,0,0.25);
      }

      /* ══ Embedded checkout overlay (Stripe modal) ══ */
      .checkout-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: rgba(0, 0, 0, 0.62);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      .checkout-overlay-card {
        position: relative;
        width: min(100%, 460px);
        max-height: 90vh;
        overflow-y: auto;
        border-radius: 24px;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
        padding: 8px 12px 12px 12px;
      }

      .checkout-overlay-card #checkoutMount {
        border-radius: 16px;
        overflow: hidden;
      }

      .checkout-overlay-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.05);
        color: rgba(0, 0, 0, 0.55);
        cursor: pointer;
        z-index: 2;
        transition: background 0.15s, color 0.15s;
      }
      .checkout-overlay-close:hover {
        background: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.85);
      }

      @media (max-width: 720px) {
        .checkout-overlay { padding: 0; }
        .checkout-overlay-card {
          width: 100%;
          height: 100%;
          max-height: 100%;
          border-radius: 0;
          padding: 8px 10px 10px 10px;
        }
      }

      /* ══ Toast ══ */
      .toast {
        position: fixed;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%) translateY(16px);
        padding: 12px 20px;
        border-radius: 999px;
        background: rgba(20, 20, 24, 0.92);
        color: #fff;
        font-size: 14px;
        letter-spacing: 0.01em;
        line-height: 1.4;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease;
        z-index: 1100;
        max-width: calc(100vw - 32px);
        text-align: center;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .toast.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      .result-head {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 18px;
      }
      .result-head h2 { font-size: 18px; font-weight: 600; }
      .result-refresh {
        background: transparent;
        border: 1px solid var(--border, rgba(255,255,255,0.15));
        color: inherit;
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 13px;
        cursor: pointer;
        transition: background .2s;
      }
      .result-refresh:hover { background: rgba(255,255,255,0.06); }
      .phone-box {
        text-align: center;
        padding: 24px 16px;
        border-radius: 14px;
        background: rgba(0,0,0,0.18);
        border: 1px solid var(--border, rgba(255,255,255,0.06));
      }
      .phone-box .num {
        font-size: 28px; font-weight: 700; letter-spacing: 0.04em;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        color: #2EB885;
      }
      .phone-box .hint { font-size: 13px; opacity: 0.7; margin-top: 8px; }
      .msg-section-title {
        display: flex; justify-content: space-between; align-items: center;
        margin: 22px 0 10px;
        font-size: 14px; font-weight: 600;
      }
      .pulse {
        display: inline-block; width: 8px; height: 8px;
        background: #fbbf24; border-radius: 50%;
        margin-right: 6px; vertical-align: middle;
        animation: msgPulse 1.5s infinite;
      }
      @keyframes msgPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
      .msg-list {
        max-height: 320px; overflow-y: auto;
        display: flex; flex-direction: column; gap: 8px;
      }
      .msg-item {
        padding: 12px 14px;
        border-radius: 10px;
        background: rgba(0,0,0,0.22);
        border: 1px solid var(--border, rgba(255,255,255,0.05));
        font-size: 14px; word-break: break-all;
      }
      .msg-item .meta { font-size: 12px; opacity: 0.6; margin-bottom: 4px; }
      .msg-empty {
        text-align: center; padding: 22px;
        opacity: 0.55; font-size: 14px;
      }
      .result-status {
        margin-top: 14px; font-size: 14px; opacity: 0.8;
        text-align: center;
      }
      .result-status.err { color: #fc8181; opacity: 1; }