:root {
        color-scheme: light;
        --bg: #f4f8ff;
        --paper: #ffffff;
        --paper-soft: #f8fbff;
        --ink: #071435;
        --muted: #63718d;
        --line: rgba(124, 144, 183, 0.22);
        --line-strong: rgba(76, 111, 189, 0.28);
        --blue: #1467ff;
        --blue-dark: #0b4ed7;
        --blue-soft: #eaf2ff;
        --teal: #18c7b4;
        --pink: #ea3f95;
        --orange: #ff7a1a;
        --green: #1ebf75;
        --shadow: 0 28px 70px rgba(22, 54, 112, 0.12);
        --soft-shadow: 0 16px 42px rgba(22, 54, 112, 0.08);
        font-family:
          Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        overflow-x: hidden;
      }

      body {
        margin: 0;
        min-width: 320px;
        overflow-x: hidden;
        color: var(--ink);
        background:
          linear-gradient(rgba(20, 103, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(20, 103, 255, 0.03) 1px, transparent 1px),
          linear-gradient(180deg, #edf5ff 0%, #f9fbff 34%, #ffffff 100%);
        background-size: 56px 56px, 56px 56px, auto;
      }

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

      img,
      svg {
        display: block;
      }

      button,
      input {
        font: inherit;
      }

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

      .site-header {
        position: sticky;
        top: 14px;
        z-index: 50;
        padding-top: 14px;
      }

      .header-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 70px;
        padding: 12px 14px 12px 18px;
        border: 1px solid rgba(255, 255, 255, 0.84);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 18px 46px rgba(35, 68, 124, 0.1);
        backdrop-filter: blur(18px);
      }

      .header-shell.is-scrolled {
        background: rgba(255, 255, 255, 0.94);
        border-color: var(--line);
      }

      .brand-link {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
      }

      .brand-link img {
        width: 176px;
        height: auto;
      }

      .site-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #243253;
        font-size: 14px;
        font-weight: 760;
      }

      .site-nav a {
        border-radius: 999px;
        padding: 11px 13px;
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      }

      .site-nav a:hover,
      .site-nav a.active {
        color: var(--blue);
        background: rgba(20, 103, 255, 0.09);
        transform: translateY(-1px);
      }

      .header-actions {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 10px;
      }

      .button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 18px;
        border: 1px solid transparent;
        border-radius: 999px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 850;
        white-space: nowrap;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
      }

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

      .button-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--blue), var(--blue-dark));
        box-shadow: 0 16px 32px rgba(20, 103, 255, 0.24);
      }

      .button-ghost {
        color: #243253;
        background: rgba(255, 255, 255, 0.74);
        border-color: var(--line);
      }

      .button-ghost:hover {
        border-color: rgba(20, 103, 255, 0.28);
        box-shadow: var(--soft-shadow);
      }

      .button.android-download-button {
        gap: 8px;
      }

      .button-ghost.android-download-button {
        color: #0b5965;
        border-color: rgba(40, 220, 190, 0.32);
        background: rgba(240, 255, 251, 0.84);
      }

      .button-ghost.android-download-button:hover {
        border-color: rgba(40, 220, 190, 0.54);
        box-shadow: 0 16px 34px rgba(16, 184, 161, 0.16);
      }

      .button-ghost.ios-install-button {
        color: #3c276c;
        border-color: rgba(143, 96, 255, 0.3);
        background: rgba(248, 244, 255, 0.84);
      }

      .button-ghost.ios-install-button:hover {
        border-color: rgba(143, 96, 255, 0.5);
        box-shadow: 0 16px 34px rgba(87, 68, 194, 0.16);
      }

      .hero {
        padding: 70px 0 50px;
      }

      .hero-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(560px, 1.14fr);
        gap: 48px;
        align-items: center;
      }

      .hero-copy h1 {
        margin: 0;
        max-width: 600px;
        font-size: clamp(46px, 7vw, 88px);
        line-height: 0.96;
        letter-spacing: 0;
        font-weight: 920;
      }

      .hero-copy p {
        max-width: 650px;
        margin: 26px 0 0;
        color: #51617e;
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.58;
        font-weight: 620;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 32px;
      }

      .hero-points {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        max-width: 650px;
        margin-top: 32px;
      }

      .hero-point {
        min-height: 88px;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: var(--soft-shadow);
      }

      .hero-point strong {
        display: block;
        font-size: 18px;
        line-height: 1.1;
      }

      .hero-point span {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 700;
      }

      .hero-media {
        margin: 0;
        min-width: 0;
      }

      .hero-media img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center;
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: var(--shadow);
      }

      .demo-shell {
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .demo-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 66px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(124, 144, 183, 0.18);
        background: rgba(255, 255, 255, 0.82);
      }

      .demo-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .demo-brand img {
        width: 38px;
        height: auto;
      }

      .demo-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
      }

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

      .demo-tab {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 36px;
        padding: 0 9px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: #273756;
        cursor: pointer;
        font-size: 11px;
        font-weight: 850;
        transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
      }

      .demo-tab svg {
        width: 15px;
        height: 15px;
      }

      .demo-tab.is-active {
        color: var(--blue);
        background: var(--blue-soft);
        border-color: rgba(20, 103, 255, 0.18);
      }

      .demo-user {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 96px;
        justify-content: flex-end;
      }

      .avatar {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(135deg, #18c7b4, #109ccf);
        font-size: 12px;
        font-weight: 900;
      }

      .avatar:after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 1px;
        width: 9px;
        height: 9px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: var(--green);
      }

      .avatar.orange {
        background: linear-gradient(135deg, #ff7a1a, #ff9c3f);
      }

      .avatar.pink {
        background: linear-gradient(135deg, #ea3f95, #d72c7f);
      }

      .avatar.blue {
        background: linear-gradient(135deg, #1467ff, #5797ff);
      }

      .avatar.gray {
        color: var(--blue);
        background: #eef4ff;
      }

      .demo-user strong {
        display: block;
        font-size: 12px;
        line-height: 1.1;
      }

      .demo-user span {
        display: block;
        margin-top: 2px;
        color: var(--muted);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      .demo-body {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        min-height: 610px;
      }

      .demo-sidebar {
        min-width: 0;
        border-right: 1px solid rgba(124, 144, 183, 0.2);
        background: rgba(255, 255, 255, 0.74);
        overflow: hidden;
      }

      .sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 20px 20px 12px;
      }

      .sidebar-head h2 {
        margin: 0;
        font-size: 19px;
        line-height: 1;
      }

      .icon-row {
        display: flex;
        gap: 8px;
      }

      .icon-button {
        display: inline-grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        color: #395072;
        cursor: pointer;
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      }

      .icon-button:hover {
        color: var(--blue);
        background: var(--blue-soft);
        transform: translateY(-1px);
      }

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

      .search-box {
        margin: 0 20px 12px;
        display: flex;
        align-items: center;
        gap: 9px;
        height: 42px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        color: #7d8ba8;
        font-size: 13px;
        font-weight: 700;
      }

      .search-box svg {
        width: 15px;
        height: 15px;
      }

      .filter-row {
        display: flex;
        gap: 8px;
        padding: 0 20px 14px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .filter-row::-webkit-scrollbar {
        display: none;
      }

      .chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.86);
        color: #70809f;
        font-size: 11px;
        font-weight: 850;
        white-space: nowrap;
      }

      .chip.is-active {
        color: var(--blue);
        border-color: rgba(20, 103, 255, 0.22);
        background: var(--blue-soft);
      }

      .chat-list {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 12px;
      }

      .chat-item {
        display: grid;
        grid-template-columns: 38px 1fr auto;
        gap: 10px;
        align-items: center;
        width: 100%;
        min-height: 74px;
        border: 1px solid transparent;
        border-radius: 18px;
        background: transparent;
        cursor: pointer;
        padding: 12px 11px;
        text-align: left;
        transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
      }

      .chat-item:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.78);
      }

      .chat-item.is-active {
        border-color: rgba(20, 103, 255, 0.22);
        background: #eef5ff;
        box-shadow: inset 0 0 0 1px rgba(20, 103, 255, 0.08);
      }

      .chat-title {
        display: block;
        color: var(--ink);
        font-size: 13px;
        line-height: 1.2;
        font-weight: 900;
      }

      .chat-preview {
        display: block;
        margin-top: 4px;
        color: #74829d;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 720;
      }

      .chat-meta {
        align-self: start;
        padding-top: 2px;
        color: #8491aa;
        font-size: 10px;
        font-weight: 750;
      }

      .badge {
        display: inline-grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        color: #fff;
        background: var(--blue);
        font-size: 10px;
        font-weight: 900;
      }

      .demo-main {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-width: 0;
        background:
          linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)),
          url("/chat-backgrounds/alviyo-wallpaper-02.webp") center / cover no-repeat;
      }

      .chat-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 72px;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(124, 144, 183, 0.2);
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(12px);
      }

      .chat-person {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .chat-person h3 {
        margin: 0;
        font-size: 17px;
        line-height: 1.16;
      }

      .presence {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        color: #6d7c98;
        font-size: 11px;
        font-weight: 760;
      }

      .presence:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--green);
      }

      .chat-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .messages {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 30px 22px 22px;
        overflow: hidden;
      }

      .day-divider {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 16px;
        color: #8794ad;
        font-size: 11px;
        font-weight: 850;
      }

      .day-divider:before,
      .day-divider:after {
        content: "";
        height: 1px;
        background: rgba(124, 144, 183, 0.24);
      }

      .message-row {
        display: flex;
        align-items: flex-end;
        gap: 9px;
        min-width: 0;
      }

      .message-row.out {
        justify-content: flex-end;
      }

      .bubble {
        max-width: min(450px, 72%);
        min-width: 0;
        border: 1px solid rgba(124, 144, 183, 0.18);
        border-radius: 8px;
        padding: 12px 14px 9px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 12px 34px rgba(22, 54, 112, 0.08);
        color: #233151;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 650;
        overflow-wrap: anywhere;
      }

      .message-row.out .bubble {
        background: #e9f2ff;
        border-color: rgba(20, 103, 255, 0.16);
      }

      .bubble-foot {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 6px;
        color: #8190ad;
        font-size: 10px;
        font-weight: 800;
      }

      .composer {
        padding: 16px 20px 20px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 40%);
      }

      .compose-shell {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        padding: 7px 8px;
        border: 1px solid rgba(124, 144, 183, 0.24);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 18px 48px rgba(22, 54, 112, 0.1);
      }

      .compose-shell input {
        width: 100%;
        min-width: 0;
        height: 38px;
        border: 0;
        outline: 0;
        color: #223250;
        background: transparent;
        font-size: 13px;
        font-weight: 700;
      }

      .compose-shell input::placeholder {
        color: #98a5bd;
      }

      .send-button {
        display: inline-grid;
        grid-template-columns: 36px auto;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        min-width: 128px;
        padding: 0 16px 0 4px;
        border: 0;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, #8eb0f7, #6895f2);
        cursor: pointer;
        font-size: 13px;
        font-weight: 900;
        overflow: hidden;
      }

      .send-knob {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #fff;
        color: #5b86ed;
        box-shadow: 0 8px 18px rgba(35, 74, 150, 0.16);
      }

      .send-button.is-sending .send-knob {
        animation: send-slide 520ms ease both;
      }

      @keyframes send-slide {
        0% {
          transform: translateX(0);
        }
        52% {
          transform: translateX(76px);
        }
        100% {
          transform: translateX(0);
        }
      }

      .mode-panel {
        display: none;
        min-width: 0;
        padding: 26px;
        overflow: hidden;
      }

      .mode-panel.is-active {
        display: block;
      }

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

      .mode-card {
        min-height: 138px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--soft-shadow);
      }

      .mode-card strong {
        display: block;
        font-size: 16px;
      }

      .mode-card span {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
        font-weight: 650;
      }

      .call-stage {
        display: grid;
        grid-template-columns: 1.5fr 0.9fr;
        gap: 14px;
        min-height: 440px;
      }

      .video-tile {
        position: relative;
        min-height: 420px;
        overflow: hidden;
        border-radius: 18px;
        background: linear-gradient(140deg, #111f3d, #162a55);
      }

      .video-tile:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, rgba(20, 103, 255, 0.38), transparent 42%),
          linear-gradient(0deg, rgba(0, 0, 0, 0.4), transparent 45%);
      }

      .video-person {
        position: absolute;
        left: 28px;
        bottom: 28px;
        color: #fff;
      }

      .video-person strong {
        display: block;
        font-size: 22px;
      }

      .video-person span {
        display: block;
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 13px;
        font-weight: 760;
      }

      .call-controls {
        position: absolute;
        left: 50%;
        bottom: 24px;
        display: flex;
        gap: 10px;
        transform: translateX(-50%);
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(7, 20, 53, 0.48);
        backdrop-filter: blur(18px);
      }

      .call-button {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        color: #fff;
        background: rgba(255, 255, 255, 0.14);
      }

      .call-button.danger {
        background: #e93d5e;
      }

      .feature-section,
      .flow-section,
      .faq-section,
      .ios-guide-section,
      .ios-note-section,
      .final-cta {
        padding: 62px 0;
      }

      .section-heading {
        max-width: 760px;
        margin-bottom: 28px;
      }

      .section-heading h2,
      .final-cta h2 {
        margin: 0;
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.08;
        letter-spacing: 0;
      }

      .section-heading p,
      .final-cta p {
        margin: 16px 0 0;
        color: #5e6d88;
        font-size: 18px;
        line-height: 1.58;
        font-weight: 620;
      }

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

      .feature-grid--compact {
        max-width: 960px;
        margin: 0 auto;
      }

      .feature-card {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: var(--soft-shadow);
      }

      .feature-icon {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
        border-radius: 14px;
        color: var(--blue);
        background: var(--blue-soft);
      }

      .feature-card h3 {
        margin: 0;
        font-size: 18px;
      }

      .feature-card p {
        margin: 10px 0 0;
        color: #64728c;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 620;
      }

      .functions-anchor-grid {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
      }

      .functions-anchor-grid a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        padding: 10px 14px;
        border: 1px solid rgba(122, 150, 190, 0.22);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 16px 44px rgba(19, 46, 108, 0.08);
        color: #1d2c4e;
        font-size: 13px;
        font-weight: 850;
        text-align: center;
        transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
      }

      .functions-anchor-grid a:hover {
        transform: translateY(-2px);
        border-color: rgba(20, 103, 255, 0.3);
        box-shadow: 0 20px 50px rgba(20, 103, 255, 0.12);
      }

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

      .function-detail-card {
        min-height: 230px;
        padding: 24px;
        border: 1px solid rgba(122, 150, 190, 0.2);
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 255, 0.92)),
          radial-gradient(circle at 88% 10%, rgba(20, 103, 255, 0.08), transparent 30%);
        box-shadow: 0 20px 60px rgba(19, 46, 108, 0.1);
      }

      .function-detail-card h3 {
        margin: 16px 0 0;
        color: #071435;
        font-size: 21px;
        line-height: 1.16;
      }

      .function-detail-card p {
        margin: 12px 0 0;
        color: #64728c;
        font-size: 14px;
        line-height: 1.58;
        font-weight: 650;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
      }

      .status-badge--ready {
        color: #075c42;
        background: rgba(30, 191, 117, 0.14);
      }

      .status-badge--next {
        color: #3146a5;
        background: rgba(20, 103, 255, 0.12);
      }

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

      .functions-roadmap article {
        padding: 24px;
        border: 1px solid rgba(122, 150, 190, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 20px 60px rgba(19, 46, 108, 0.1);
      }

      .functions-roadmap h3 {
        margin: 0;
        font-size: 21px;
      }

      .functions-roadmap ul {
        display: grid;
        gap: 10px;
        margin: 18px 0 0;
        padding: 0;
        list-style: none;
      }

      .functions-roadmap li {
        position: relative;
        padding-left: 22px;
        color: #5e6d88;
        font-size: 14px;
        line-height: 1.45;
        font-weight: 700;
      }

      .functions-roadmap li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--teal), var(--blue));
        box-shadow: 0 0 18px rgba(20, 103, 255, 0.28);
      }

      .ios-guide-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        gap: 32px;
        align-items: center;
      }

      .ios-guide-copy {
        min-width: 0;
      }

      .ios-step-list {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .ios-step-list li {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: var(--soft-shadow);
      }

      .ios-step-number {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, #4776ff, #9b5cff);
        font-size: 18px;
        font-weight: 920;
        box-shadow: 0 14px 26px rgba(83, 92, 220, 0.22);
      }

      .ios-step-list strong {
        display: block;
        color: #0d1a3a;
        font-size: 17px;
        line-height: 1.25;
      }

      .ios-step-list small {
        display: block;
        margin-top: 6px;
        color: #60708c;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 640;
      }

      .ios-phone-card {
        display: grid;
        place-items: center;
        min-width: 0;
      }

      .ios-phone-frame {
        position: relative;
        width: min(100%, 360px);
        min-height: 660px;
        overflow: hidden;
        padding: 22px;
        border: 1px solid rgba(126, 151, 205, 0.3);
        border-radius: 34px;
        background:
          radial-gradient(circle at 74% 12%, rgba(255, 74, 207, 0.22), transparent 28%),
          radial-gradient(circle at 20% 0%, rgba(52, 203, 255, 0.24), transparent 34%),
          linear-gradient(160deg, #081a52 0%, #184ac5 50%, #7c3dff 100%);
        box-shadow: 0 34px 80px rgba(19, 32, 82, 0.24);
      }

      .ios-phone-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-size: 13px;
        font-weight: 900;
      }

      .ios-phone-status span:last-child {
        width: 64px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.74);
      }

      .ios-safari-bar {
        margin-top: 20px;
        padding: 12px 14px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 16px;
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.12);
        font-size: 14px;
        font-weight: 820;
      }

      .ios-app-preview {
        display: grid;
        justify-items: center;
        gap: 8px;
        margin: 34px auto 0;
        padding: 26px;
        border-radius: 28px;
        color: #101b3a;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 24px 42px rgba(8, 14, 40, 0.18);
      }

      .ios-app-preview img {
        width: 74px;
        height: 74px;
        object-fit: contain;
      }

      .ios-app-preview strong {
        font-size: 22px;
        font-weight: 920;
      }

      .ios-app-preview span {
        color: #64728c;
        font-size: 13px;
        font-weight: 760;
      }

      .ios-store-section {
        padding-bottom: 0;
      }

      .ios-store-card {
        align-self: stretch;
      }

      .ios-app-store-preview {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 14px;
        width: min(100%, 390px);
        min-height: 420px;
        padding: 32px;
        border: 1px solid rgba(126, 151, 205, 0.28);
        border-radius: 28px;
        text-align: center;
        background:
          radial-gradient(circle at 70% 16%, rgba(116, 76, 255, 0.16), transparent 34%),
          radial-gradient(circle at 24% 0%, rgba(52, 203, 255, 0.18), transparent 30%),
          linear-gradient(145deg, #fff, #f6f9ff);
        box-shadow: 0 28px 72px rgba(19, 32, 82, 0.14);
      }

      .ios-app-store-preview img {
        width: 96px;
        height: 96px;
        object-fit: contain;
        border-radius: 22px;
        box-shadow: 0 18px 34px rgba(50, 72, 130, 0.16);
      }

      .ios-app-store-preview span {
        color: #315dff;
        font-size: 12px;
        font-weight: 920;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .ios-app-store-preview strong {
        color: #071435;
        font-size: 30px;
        font-weight: 940;
      }

      .ios-app-store-preview p {
        max-width: 280px;
        margin: 0;
        color: #60708c;
        font-size: 15px;
        line-height: 1.55;
        font-weight: 650;
      }

      .ios-share-panel {
        position: absolute;
        right: 14px;
        bottom: 16px;
        left: 14px;
        padding: 14px;
        border: 1px solid rgba(218, 226, 246, 0.86);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 22px 42px rgba(8, 14, 40, 0.22);
      }

      .ios-share-title {
        margin-bottom: 10px;
        color: #6a7892;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
      }

      .ios-share-action {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        color: #101b3a;
        font-size: 15px;
        font-weight: 880;
      }

      .ios-share-action + .ios-share-action {
        border-top: 1px solid rgba(122, 150, 190, 0.16);
      }

      .ios-share-action.muted {
        color: #6a7892;
      }

      .ios-share-icon {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 9px;
        color: #fff;
        background: linear-gradient(135deg, #4776ff, #9b5cff);
        font-size: 18px;
        font-weight: 900;
      }

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

      .ios-note-grid article {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: var(--soft-shadow);
      }

      .ios-note-icon {
        display: inline-grid;
        place-items: center;
        min-width: 42px;
        height: 42px;
        margin-bottom: 18px;
        padding: 0 10px;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, #00b8c7, #4776ff);
        font-size: 13px;
        font-weight: 920;
      }

      .ios-note-grid h3 {
        margin: 0;
        font-size: 18px;
      }

      .ios-note-grid p {
        margin: 10px 0 0;
        color: #64728c;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 620;
      }

      .flow-panel {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 30px;
        align-items: start;
        padding: 32px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: var(--shadow);
      }

      .flow-list {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .flow-list li {
        display: grid;
        grid-template-columns: 38px 1fr;
        gap: 14px;
        align-items: start;
        padding: 15px;
        border: 1px solid rgba(124, 144, 183, 0.18);
        border-radius: 8px;
        background: #fff;
      }

      .flow-num {
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        color: var(--blue);
        background: var(--blue-soft);
        font-size: 13px;
        font-weight: 900;
      }

      .flow-list strong {
        display: block;
        font-size: 15px;
      }

      .flow-list span {
        display: block;
        margin-top: 5px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
        font-weight: 620;
      }

      .quote-box {
        padding: 24px;
        border-radius: 8px;
        color: #fff;
        background: linear-gradient(135deg, #071435, #173269);
      }

      .quote-box strong {
        display: block;
        font-size: 22px;
        line-height: 1.25;
      }

      .quote-box p {
        margin: 14px 0 0;
        color: rgba(255, 255, 255, 0.76);
        line-height: 1.58;
      }

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

      details {
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: var(--soft-shadow);
      }

      summary {
        cursor: pointer;
        padding: 18px 20px;
        color: var(--ink);
        font-size: 16px;
        font-weight: 850;
      }

      details p {
        margin: 0;
        padding: 0 20px 20px;
        color: var(--muted);
        line-height: 1.55;
        font-weight: 620;
      }

      .final-cta {
        padding-bottom: 86px;
      }

      .cta-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
        padding: 34px;
        border-radius: 18px;
        color: #fff;
        background:
          linear-gradient(135deg, rgba(20, 103, 255, 0.92), rgba(7, 20, 53, 0.96)),
          linear-gradient(90deg, rgba(24, 199, 180, 0.28), transparent);
        box-shadow: var(--shadow);
      }

      .cta-panel p {
        color: rgba(255, 255, 255, 0.78);
      }

      .cta-panel .button-ghost {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.32);
        background: rgba(255, 255, 255, 0.12);
      }

      .site-footer {
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.7);
      }

      .footer-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 80px;
        color: #64728c;
        font-size: 13px;
        font-weight: 700;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 12px 18px;
      }

      .footer-links a {
        color: inherit;
      }

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

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

        .hero-layout,
        .flow-panel,
        .release-grid {
          grid-template-columns: 1fr;
        }

        .hero-copy h1,
        .hero-copy p {
          max-width: none;
        }

        .demo-body {
          grid-template-columns: 250px minmax(0, 1fr);
        }
      }

      @media (max-width: 760px) {
        .container {
          width: min(100% - 24px, 1180px);
        }

        .site-header {
          top: 0;
          padding-top: 8px;
        }

        .header-shell {
          border-radius: 16px;
          gap: 8px;
          padding: 10px;
        }

        .brand-link img {
          width: 116px;
        }

        .header-actions .button-ghost {
          display: none;
        }

        .header-actions .button-primary {
          min-height: 40px;
          padding: 0 11px;
          font-size: 11px;
        }

        .hero {
          padding-top: 46px;
        }

        .hero-layout {
          gap: 30px;
        }

        .hero-media img {
          aspect-ratio: 4 / 3;
        }

        .hero-points,
        .feature-grid,
        .faq-grid,
        .mode-grid,
        .call-stage {
          grid-template-columns: 1fr;
        }

        .demo-shell {
          border-radius: 18px;
        }

        .demo-topbar {
          align-items: flex-start;
          flex-direction: column;
        }

        .demo-nav {
          flex-wrap: wrap;
          overflow: visible;
        }

        .demo-user {
          display: none;
        }

        .demo-body {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .demo-sidebar {
          min-width: 0;
          max-width: 100%;
          border-right: 0;
          border-bottom: 1px solid rgba(124, 144, 183, 0.2);
        }

        .chat-list {
          grid-auto-flow: column;
          grid-auto-columns: minmax(220px, 1fr);
          overflow-x: auto;
          padding-bottom: 16px;
        }

        .chat-top {
          min-height: 66px;
          padding: 12px;
        }

        .chat-actions {
          display: none;
        }

        .messages {
          min-height: 430px;
          padding: 22px 12px 16px;
        }

        .bubble {
          max-width: 84%;
        }

        .composer {
          padding: 12px;
        }

        .compose-shell {
          grid-template-columns: auto minmax(0, 1fr) auto;
          border-radius: 20px;
        }

        .compose-shell .icon-button:nth-child(2),
        .compose-shell .icon-button:nth-child(4) {
          display: none;
        }

        .send-button {
          min-width: 46px;
          grid-template-columns: 36px;
          padding: 0 4px;
        }

        .send-button span:last-child {
          display: none;
        }

        .feature-section,
        .flow-section,
        .faq-section,
        .final-cta {
          padding: 42px 0;
        }

        .flow-panel,
        .cta-panel {
          padding: 22px;
          grid-template-columns: 1fr;
        }

        .cta-panel .hero-actions {
          margin-top: 0;
        }

        .footer-shell {
          align-items: flex-start;
          flex-direction: column;
          justify-content: center;
          padding: 20px 0;
        }

        .footer-links {
          justify-content: flex-start;
        }
      }

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

      .hero-layout--solo {
        grid-template-columns: minmax(0, 920px);
        align-items: start;
      }

      .hero-layout--solo .hero-copy h1,
      .hero-layout--solo .hero-copy p,
      .hero-layout--solo .hero-points {
        max-width: 920px;
      }

      .page-hero {
        padding: 58px 0 26px;
      }

      .page-heading {
        max-width: 920px;
      }

      .page-heading h1 {
        margin: 0;
        font-size: clamp(36px, 5vw, 64px);
        line-height: 1;
        letter-spacing: 0;
        font-weight: 920;
      }

      .page-heading p {
        margin: 20px 0 0;
        color: #51617e;
        font-size: clamp(17px, 2vw, 21px);
        line-height: 1.58;
        font-weight: 620;
      }

      .page-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        margin-bottom: 16px;
        padding: 0 12px;
        border: 1px solid rgba(20, 103, 255, 0.16);
        border-radius: 999px;
        color: var(--blue);
        background: rgba(20, 103, 255, 0.08);
        font-size: 12px;
        font-weight: 900;
      }

      .index-links {
        padding-top: 22px;
      }

      .feature-card-link {
        display: block;
        height: 100%;
      }

      .feature-card-link .feature-card {
        height: 100%;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
      }

      .feature-card-link:hover .feature-card {
        border-color: rgba(20, 103, 255, 0.28);
        box-shadow: var(--shadow);
        transform: translateY(-2px);
      }

      .content-page .feature-section,
      .content-page .flow-section,
      .content-page .faq-section,
      .content-page .ios-guide-section,
      .content-page .ios-note-section {
        padding-top: 30px;
      }

      .emulator-page {
        display: flex;
        min-height: calc(100dvh - 108px);
        padding: 14px 0 18px;
      }

      .emulator-wide {
        width: min(100% - 32px, 1760px);
        margin: 0 auto;
        display: flex;
        min-width: 0;
      }

      .demo-shell--wide {
        width: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: calc(100dvh - 136px);
      }

      .demo-shell--wide .demo-body {
        grid-template-columns: minmax(290px, 380px) minmax(0, 1fr);
        min-height: 0;
      }

      .demo-shell--wide .messages {
        min-height: 0;
        height: 100%;
        overflow: auto;
      }

      @media (max-width: 1080px) {
        .demo-shell--wide .demo-body {
          grid-template-columns: 280px minmax(0, 1fr);
        }
      }

      @media (max-width: 760px) {
        .page-hero {
          padding-top: 34px;
        }

        .emulator-page {
          min-height: auto;
          padding: 8px 0 12px;
        }

        .page-heading h1 {
          font-size: 36px;
        }

        .emulator-wide {
          width: min(100% - 12px, 1760px);
        }

        .demo-shell--wide {
          min-height: calc(100dvh - 98px);
        }

        .demo-shell--wide .demo-body {
          grid-template-columns: 1fr;
          min-height: auto;
        }

        .demo-shell--wide .demo-main,
        .demo-shell--wide .mode-panel,
        .demo-shell--wide .messages {
          width: 100%;
          max-width: 100%;
          min-width: 0;
        }

        .demo-shell--wide .messages {
          overflow: visible;
        }

        .demo-shell--wide .message-row {
          width: 100%;
        }

        .demo-shell--wide .bubble {
          max-width: calc(100% - 48px);
        }
      }

      /* Main product page redesign */
      body[data-page="home"] {
        color: #071435;
        background: #f7faff;
      }

      body[data-page="home"] .site-header {
        position: fixed;
        inset: 0 0 auto;
        top: 0;
        z-index: 80;
        padding-top: 22px;
        pointer-events: none;
      }

      body[data-page="home"] .home-header-shell {
        position: relative;
        min-height: 70px;
        overflow: hidden;
        padding: 12px 16px 12px 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        background: rgba(4, 14, 72, 0.28);
        box-shadow: 0 20px 70px rgba(0, 13, 70, 0.16);
        backdrop-filter: blur(22px);
        pointer-events: auto;
      }

      body[data-page="home"] .home-header-shell.is-scrolled {
        background: rgba(6, 16, 86, 0.82);
        border-color: rgba(116, 174, 255, 0.24);
      }

      .header-line {
        position: absolute;
        left: 18px;
        right: 18px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 224, 255, 0.78), rgba(245, 91, 255, 0.84), transparent);
        background-size: 220% 100%;
        opacity: 0.78;
        animation: home-line-flow 4.6s linear infinite;
        pointer-events: none;
      }

      .header-line--top {
        top: 0;
      }

      .header-line--bottom {
        bottom: 0;
        animation-direction: reverse;
        opacity: 0.48;
      }

      body[data-page="home"] .home-brand {
        position: relative;
        z-index: 2;
      }

      body[data-page="home"] .home-brand img {
        width: 156px;
        height: auto;
      }

      body[data-page="home"] .home-nav {
        position: relative;
        z-index: 2;
        gap: 4px;
        color: rgba(255, 255, 255, 0.86);
      }

      body[data-page="home"] .home-nav a {
        padding: 10px 12px;
        color: inherit;
        background: transparent;
      }

      body[data-page="home"] .home-nav a:hover,
      body[data-page="home"] .home-nav a.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
      }

      body[data-page="home"] .home-header-actions {
        position: relative;
        z-index: 2;
      }

      .language-switcher {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .language-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 38px;
        min-width: 54px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        font-size: 13px;
        font-weight: 850;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      }

      .language-toggle:hover,
      .language-switcher.is-open .language-toggle {
        border-color: rgba(78, 184, 255, 0.76);
        background: rgba(255, 255, 255, 0.14);
        box-shadow: 0 0 0 3px rgba(0, 178, 255, 0.14), 0 12px 28px rgba(14, 67, 255, 0.18);
      }

      .language-toggle svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s ease;
      }

      .language-switcher.is-open .language-toggle svg {
        transform: rotate(180deg);
      }

      .language-menu {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 20;
        display: grid;
        min-width: 98px;
        gap: 4px;
        padding: 6px;
        border: 1px solid rgba(186, 210, 255, 0.34);
        border-radius: 14px;
        background: rgba(7, 14, 61, 0.9);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(16px);
      }

      .language-menu[hidden] {
        display: none;
      }

      .language-menu button {
        min-height: 34px;
        border: 0;
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.72);
        background: transparent;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.04em;
        cursor: pointer;
      }

      .language-menu button:hover,
      .language-menu button.is-active {
        color: #fff;
        background: linear-gradient(135deg, rgba(240, 91, 189, 0.82), rgba(45, 140, 255, 0.8));
      }

      .language-menu button:disabled {
        cursor: default;
        opacity: 0.48;
      }

      body[data-page="home"] .home-stand-button,
      body[data-page="home"] .hero-main-button,
      body[data-page="home"] .home-cta-panel .button-primary {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.28);
        background: linear-gradient(135deg, #f05bbd, #7b5cff 58%, #2d8cff);
        box-shadow: 0 18px 38px rgba(106, 76, 255, 0.34);
      }

      .label-short {
        display: none;
      }

      .home-hero {
        position: relative;
        isolation: isolate;
        min-height: 740px;
        overflow: hidden;
        padding: 136px 0 96px;
        color: #fff;
        background:
          radial-gradient(ellipse at 78% 22%, rgba(255, 83, 226, 0.72), transparent 30%),
          radial-gradient(ellipse at 44% 38%, rgba(0, 241, 255, 0.48), transparent 33%),
          radial-gradient(ellipse at 18% 76%, rgba(28, 96, 255, 0.78), transparent 38%),
          linear-gradient(124deg, #020428 0%, #061062 34%, #0834c5 62%, #4012b4 100%);
      }

      .home-hero:before {
        content: "";
        position: absolute;
        inset: -18% -8% 16%;
        z-index: 0;
        background:
          linear-gradient(105deg, transparent 8%, rgba(0, 232, 255, 0.08) 18%, rgba(63, 255, 198, 0.2) 28%, rgba(101, 84, 255, 0.13) 42%, transparent 58%),
          linear-gradient(72deg, transparent 22%, rgba(255, 73, 220, 0.2) 42%, rgba(35, 183, 255, 0.22) 57%, transparent 76%);
        filter: blur(28px) saturate(1.28);
        opacity: 0.96;
        mix-blend-mode: screen;
        transform: skewY(-8deg);
        animation: aurora-field-drift 13s ease-in-out infinite alternate;
        pointer-events: none;
      }

      .home-hero:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 128px;
        background: linear-gradient(180deg, rgba(247, 250, 255, 0), #f7faff 82%);
        pointer-events: none;
      }

      .hero-bg-lines {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
      }

      .aurora-ribbon {
        position: absolute;
        display: block;
        width: min(1320px, 112vw);
        height: 190px;
        border-radius: 999px;
        opacity: 0.86;
        filter: blur(18px) saturate(1.42);
        mix-blend-mode: screen;
        background:
          linear-gradient(90deg, transparent 0%, rgba(0, 216, 255, 0.1) 11%, rgba(46, 255, 203, 0.68) 29%, rgba(76, 105, 255, 0.54) 52%, rgba(255, 79, 223, 0.62) 73%, transparent 100%);
        transform-origin: center;
        will-change: transform, opacity, filter;
      }

      .aurora-ribbon:after {
        content: "";
        position: absolute;
        inset: 43% 4% 36%;
        border-radius: inherit;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), rgba(116, 243, 255, 0.7), transparent);
        filter: blur(7px);
        opacity: 0.72;
      }

      .aurora-ribbon--one {
        top: 76px;
        left: -14%;
        transform: rotate(-14deg) skewX(-14deg);
        animation: aurora-ribbon-one 12s ease-in-out infinite alternate;
      }

      .aurora-ribbon--two {
        top: 224px;
        left: 22%;
        height: 230px;
        opacity: 0.72;
        transform: rotate(-30deg) skewX(-18deg);
        animation: aurora-ribbon-two 15s ease-in-out infinite alternate;
      }

      .aurora-ribbon--three {
        right: -24%;
        bottom: 104px;
        height: 172px;
        background:
          linear-gradient(90deg, transparent 0%, rgba(42, 100, 255, 0.2) 12%, rgba(0, 236, 255, 0.64) 32%, rgba(104, 70, 255, 0.58) 62%, rgba(255, 80, 197, 0.5) 82%, transparent 100%);
        transform: rotate(-7deg) skewX(-20deg);
        animation: aurora-ribbon-three 14s ease-in-out infinite alternate;
      }

      .aurora-ribbon--four {
        left: -32%;
        bottom: -10px;
        height: 126px;
        opacity: 0.68;
        filter: blur(15px) saturate(1.55);
        transform: rotate(5deg) skewX(-18deg);
        animation: aurora-ribbon-four 10s ease-in-out infinite alternate;
      }

      .hero-line {
        position: absolute;
        width: 980px;
        height: 184px;
        border: 2px solid rgba(95, 240, 255, 0.66);
        border-left-color: transparent;
        border-right-color: rgba(255, 99, 229, 0.7);
        border-radius: 50%;
        filter: drop-shadow(0 0 22px rgba(66, 219, 255, 0.72)) drop-shadow(0 0 46px rgba(150, 76, 255, 0.42));
        opacity: 0.92;
        mix-blend-mode: screen;
        will-change: transform, opacity, filter;
      }

      .hero-line--one {
        top: 190px;
        left: 32%;
        transform: rotate(-14deg);
        animation: home-orbit-line 8s ease-in-out infinite;
      }

      .hero-line--two {
        right: -160px;
        bottom: 118px;
        width: 760px;
        height: 120px;
        transform: rotate(-5deg);
        animation: home-orbit-line 9s ease-in-out infinite reverse;
      }

      .hero-line--three {
        left: -220px;
        bottom: 70px;
        width: 780px;
        height: 110px;
        transform: rotate(8deg);
        border-color: rgba(85, 136, 255, 0.38);
        animation: home-orbit-line 10s ease-in-out infinite;
      }

      .hero-glow {
        position: absolute;
        width: 720px;
        height: 260px;
        border-radius: 999px;
        filter: blur(86px);
        opacity: 0.46;
        mix-blend-mode: screen;
        transform: rotate(-16deg);
      }

      .hero-glow--blue {
        left: -190px;
        top: 270px;
        background: #19b6ff;
      }

      .hero-glow--pink {
        right: -4%;
        top: 28px;
        background: #cc4bff;
      }

      .home-hero-layout {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(560px, 0.96fr) minmax(500px, 1.04fr);
        gap: 44px;
        align-items: center;
      }

      .home-hero-copy {
        min-width: 0;
      }

      .home-hero-copy h1 {
        margin: 0;
        max-width: 680px;
        font-size: clamp(40px, 3.9vw, 56px);
        line-height: 1.03;
        letter-spacing: 0;
        font-weight: 920;
      }

      .home-hero-copy p {
        max-width: 560px;
        margin: 24px 0 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(17px, 1.7vw, 21px);
        line-height: 1.54;
        font-weight: 620;
      }

      .home-hero-actions {
        margin-top: 32px;
      }

      .home-hero-actions .button {
        min-height: 52px;
        padding: 0 22px;
        border-radius: 8px;
      }

      .home-hero-actions svg,
      .cta-actions svg {
        width: 19px;
        height: 19px;
        margin-left: 10px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .hero-trust-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        max-width: 620px;
        margin-top: 18px;
      }

      .hero-trust-list span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(177, 214, 255, 0.28);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.86);
        background: rgba(5, 14, 62, 0.24);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        font-size: 12px;
        font-weight: 820;
      }

      .hero-trust-list span:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #31e7d5;
        box-shadow: 0 0 14px rgba(49, 231, 213, 0.8);
      }

      body[data-page="home"] .hero-download-button {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.1);
      }

      body[data-page="home"] .hero-download-button.android-download-button {
        border-color: rgba(71, 255, 221, 0.48);
        background: rgba(14, 189, 166, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(10, 74, 118, 0.16);
      }

      body[data-page="home"] .hero-download-button.ios-install-button {
        color: #fff;
        border-color: rgba(194, 154, 255, 0.5);
        background: rgba(116, 76, 255, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 34px rgba(49, 28, 125, 0.18);
      }

      .home-product-stage {
        position: relative;
        isolation: isolate;
        min-width: 0;
        max-width: 100%;
        min-height: 430px;
      }

      .desktop-frame {
        position: relative;
        z-index: 1;
        overflow: hidden;
        max-width: 100%;
        border: 1px solid rgba(187, 213, 255, 0.36);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow:
          0 34px 86px rgba(0, 8, 70, 0.34),
          0 0 50px rgba(80, 169, 255, 0.32);
      }

      .desktop-toolbar {
        display: grid;
        grid-template-columns: auto 1fr repeat(3, 20px);
        gap: 10px;
        align-items: center;
        min-height: 48px;
        padding: 0 18px;
        color: #14204b;
        background: linear-gradient(180deg, #ffffff, #f3f7ff);
        font-size: 13px;
        font-weight: 850;
      }

      .desktop-toolbar span:not(.desktop-logo-dot) {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #e9efff;
      }

      .desktop-logo-dot {
        width: 16px;
        height: 16px;
        border-radius: 6px;
        background: linear-gradient(135deg, #0cd0ff, #8b42ff);
      }

      .desktop-frame img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9.8;
        object-fit: cover;
        object-position: top left;
      }

      .phone-frame {
        position: absolute;
        z-index: 3;
        right: -34px;
        bottom: -14px;
        width: 172px;
        min-height: 310px;
        padding: 14px 12px 16px;
        border: 4px solid #243461;
        border-radius: 28px;
        color: #10204e;
        background: #fff;
        box-shadow: 0 24px 64px rgba(0, 8, 70, 0.32);
      }

      .phone-status {
        color: #6a789a;
        font-size: 10px;
        font-weight: 900;
      }

      .phone-frame > strong {
        display: block;
        margin-top: 10px;
        font-size: 16px;
      }

      .phone-search {
        height: 28px;
        margin: 10px 0;
        padding: 7px 10px;
        border-radius: 999px;
        color: #8a96b0;
        background: #f2f5fb;
        font-size: 10px;
        font-weight: 800;
      }

      .phone-chat {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        min-height: 48px;
        margin-top: 6px;
        padding: 7px;
        border-radius: 8px;
      }

      .phone-chat.is-active {
        background: #eef4ff;
      }

      .phone-chat span {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(135deg, #126dff, #7e5cff);
        font-size: 9px;
        font-weight: 900;
      }

      .phone-chat b,
      .phone-chat small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .phone-chat b {
        font-size: 10px;
      }

      .phone-chat small,
      .phone-chat em {
        color: #7a87a2;
        font-size: 8px;
        font-style: normal;
        font-weight: 760;
      }

      .phone-tabbar {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-top: 18px;
      }

      .phone-tabbar i {
        height: 18px;
        border-radius: 8px;
        background: #eef3ff;
      }

      .home-module-section {
        position: relative;
        z-index: 4;
        margin-top: -58px;
        padding-bottom: 28px;
      }

      .home-module-grid {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 18px;
      }

      .module-tile {
        display: grid;
        place-items: center;
        position: relative;
        min-height: 114px;
        overflow: hidden;
        padding: 18px 10px 16px;
        border: 1px solid rgba(119, 147, 190, 0.18);
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94)),
          radial-gradient(circle at 50% 16%, rgba(78, 132, 255, 0.16), transparent 45%);
        box-shadow: 0 18px 44px rgba(18, 47, 112, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
      }

      .module-tile:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.74) 28%, transparent 47%);
        opacity: 0;
        transform: translateX(-80%);
        transition: transform 520ms ease, opacity 220ms ease;
        pointer-events: none;
      }

      .module-tile:hover {
        transform: translateY(-6px);
        border-color: rgba(61, 120, 255, 0.28);
        box-shadow: 0 28px 64px rgba(18, 47, 112, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }

      .module-tile:hover:before {
        opacity: 1;
        transform: translateX(80%);
      }

      .module-icon {
        display: grid;
        place-items: center;
        position: relative;
        width: 58px;
        height: 58px;
        margin-bottom: 10px;
        border-radius: 18px;
        color: var(--icon-main, #216cff);
        background:
          radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.34) 28%, transparent 52%),
          linear-gradient(145deg, var(--icon-surface-a, #eef5ff), var(--icon-surface-b, #ffffff));
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.78),
          inset 0 -10px 24px rgba(44, 79, 180, 0.1),
          0 16px 28px var(--icon-shadow, rgba(31, 104, 255, 0.18));
        transform: translateZ(0);
      }

      .module-icon:before,
      .module-icon:after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .module-icon:before {
        inset: 7px 8px auto 9px;
        height: 14px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.14));
        opacity: 0.78;
      }

      .module-icon:after {
        inset: auto 7px 5px 7px;
        height: 12px;
        border-radius: 999px;
        background: radial-gradient(ellipse at center, var(--icon-main, #216cff), transparent 68%);
        filter: blur(8px);
        opacity: 0.36;
      }

      .module-icon svg {
        position: relative;
        z-index: 2;
        width: 31px;
        height: 31px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.35;
        filter: drop-shadow(0 5px 8px var(--icon-shadow, rgba(31, 104, 255, 0.24)));
      }

      .module-icon svg * {
        fill: color-mix(in srgb, currentColor 14%, transparent);
        vector-effect: non-scaling-stroke;
      }

      .module-icon--api svg *,
      .module-icon--calendar svg path,
      .module-icon--mail svg path,
      .module-icon--notes svg path + path {
        fill: none;
      }

      .module-icon--messages {
        --icon-main: #436cff;
        --icon-surface-a: #e9efff;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(67, 108, 255, 0.28);
      }

      .module-icon--calls {
        --icon-main: #27c47f;
        --icon-surface-a: #e8fff3;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(39, 196, 127, 0.28);
      }

      .module-icon--mail {
        --icon-main: #2788ff;
        --icon-surface-a: #e6f3ff;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(39, 136, 255, 0.28);
      }

      .module-icon--calendar {
        --icon-main: #5471ff;
        --icon-surface-a: #edf1ff;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(84, 113, 255, 0.28);
      }

      .module-icon--notes {
        --icon-main: #d99c16;
        --icon-surface-a: #fff7db;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(217, 156, 22, 0.28);
      }

      .module-icon--onec {
        --icon-main: #e5342e;
        --icon-surface-a: #fff0ee;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(229, 52, 46, 0.28);
      }

      .module-icon--api {
        --icon-main: #266bff;
        --icon-surface-a: #eef4ff;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(38, 107, 255, 0.28);
      }

      .module-icon--license {
        --icon-main: #8150ff;
        --icon-surface-a: #f3edff;
        --icon-surface-b: #ffffff;
        --icon-shadow: rgba(129, 80, 255, 0.3);
      }

      .module-tile strong {
        color: #071435;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
      }

      .home-benefits,
      .home-tools,
      .home-deployment,
      .home-final-cta {
        padding: 34px 0;
      }

      .benefit-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid rgba(122, 150, 190, 0.2);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 20px 55px rgba(19, 46, 108, 0.08);
      }

      .benefit-strip article {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 16px;
        min-height: 132px;
        padding: 26px 22px;
      }

      .benefit-strip article + article {
        border-left: 1px solid rgba(122, 150, 190, 0.18);
      }

      .benefit-icon {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        color: #315dff;
        background: linear-gradient(135deg, #edf4ff, #ffffff);
        box-shadow: inset 0 0 0 1px rgba(61, 105, 255, 0.12);
      }

      .benefit-icon svg {
        width: 27px;
        height: 27px;
      }

      .benefit-strip h2 {
        margin: 0;
        font-size: 17px;
        line-height: 1.24;
      }

      .benefit-strip p {
        margin: 9px 0 0;
        color: #5f6f8c;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 650;
      }

      .home-section-heading {
        max-width: 780px;
        margin: 0 auto 28px;
        text-align: center;
      }

      .home-section-heading h2 {
        margin: 0;
        color: #071435;
        font-size: clamp(28px, 3.2vw, 42px);
        line-height: 1.1;
        letter-spacing: 0;
      }

      .home-section-heading p {
        margin: 14px 0 0;
        color: #62728f;
        font-size: 17px;
        line-height: 1.55;
        font-weight: 620;
      }

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

      .tool-card {
        min-height: 330px;
        padding: 12px 12px 18px;
        border: 1px solid rgba(122, 150, 190, 0.18);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 18px 46px rgba(19, 46, 108, 0.08);
      }

      .tool-preview {
        position: relative;
        height: 144px;
        overflow: hidden;
        margin-bottom: 18px;
        border-radius: 8px;
        background: linear-gradient(135deg, #eef4ff, #ffffff);
      }

      .tool-card--chat .tool-preview {
        background: linear-gradient(135deg, #dfeaff, #f6f9ff);
      }

      .tool-preview--chat span {
        position: absolute;
        left: 18px;
        right: 18px;
        height: 18px;
        border-radius: 8px;
        background: rgba(42, 102, 255, 0.14);
      }

      .tool-preview--chat span:nth-child(1) {
        top: 26px;
        width: 60%;
      }

      .tool-preview--chat span:nth-child(2) {
        top: 56px;
        width: 76%;
      }

      .tool-preview--chat span:nth-child(3) {
        top: 86px;
        width: 48%;
      }

      .tool-preview--chat span:nth-child(4) {
        top: 116px;
        width: 70%;
      }

      .tool-preview--calls {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 14px;
        background: #111b3d;
      }

      .tool-preview--calls i {
        border-radius: 8px;
        background:
          radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.34), transparent 20%),
          linear-gradient(135deg, #2545a7, #0b1538);
      }

      .tool-preview--mail {
        padding: 20px 18px;
        background: linear-gradient(135deg, #dcfff2, #eff9ff);
      }

      .tool-preview--mail b,
      .tool-preview--mail span {
        display: block;
        height: 16px;
        margin-bottom: 14px;
        border-radius: 8px;
        background: rgba(29, 166, 126, 0.16);
      }

      .tool-preview--mail b {
        width: 46%;
        background: rgba(29, 166, 126, 0.32);
      }

      .tool-preview--calendar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        padding: 18px;
        background: linear-gradient(135deg, #fff3ee, #f8efff);
      }

      .tool-preview--calendar span {
        display: grid;
        place-items: center;
        height: 34px;
        border-radius: 8px;
        color: #6d587d;
        background: rgba(255, 255, 255, 0.7);
        font-size: 10px;
        font-weight: 900;
      }

      .tool-preview--calendar i {
        grid-column: 2 / 5;
        height: 34px;
        border-radius: 8px;
        background: rgba(119, 94, 255, 0.22);
      }

      .tool-preview--notes {
        padding: 20px;
        background: linear-gradient(135deg, #f2ecff, #fff9ff);
      }

      .tool-preview--notes span {
        display: block;
        height: 18px;
        margin-bottom: 13px;
        border-radius: 8px;
        background: rgba(126, 92, 255, 0.16);
      }

      .tool-preview--notes span:before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        margin: 3px 10px 0 0;
        border: 2px solid #7b5cff;
        border-radius: 4px;
        vertical-align: top;
      }

      .tool-preview--onec {
        padding: 20px;
        background: linear-gradient(135deg, #fff7dc, #fff);
      }

      .tool-preview--onec strong {
        display: block;
        margin-bottom: 16px;
        color: #e2332f;
        font-size: 28px;
        line-height: 1;
      }

      .tool-preview--onec span {
        display: block;
        width: 82%;
        height: 16px;
        margin-bottom: 12px;
        border-radius: 8px;
        background: rgba(226, 51, 47, 0.12);
      }

      .tool-preview.tool-preview--chat,
      .tool-preview.tool-preview--calls,
      .tool-preview.tool-preview--mail,
      .tool-preview.tool-preview--calendar,
      .tool-preview.tool-preview--notes,
      .tool-preview.tool-preview--onec {
        display: block;
        padding: 0;
        background: #f6f8ff;
      }

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

      .premium-motion .home-product-stage,
      .premium-motion .desktop-frame,
      .premium-motion .phone-frame,
      .premium-motion .module-tile,
      .premium-motion .tool-card,
      .premium-motion .deployment-card,
      .premium-motion .home-cta-panel {
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }

      .premium-motion .module-tile,
      .premium-motion .tool-card,
      .premium-motion .tool-preview img {
        will-change: transform;
      }

      .tool-card h3 {
        margin: 0;
        color: #071435;
        font-size: 17px;
        line-height: 1.25;
      }

      .tool-card p {
        margin: 10px 0 0;
        color: #62728f;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 620;
      }

      .tool-card a {
        display: inline-flex;
        margin-top: 16px;
        color: #255fff;
        font-size: 13px;
        font-weight: 850;
      }

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

      .deployment-card {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 22px;
        min-height: 260px;
        overflow: hidden;
        padding: 34px;
        border: 1px solid rgba(122, 150, 190, 0.18);
        border-radius: 8px;
        background: linear-gradient(135deg, #f5f8ff, #ffffff);
        box-shadow: 0 18px 46px rgba(19, 46, 108, 0.08);
      }

      .deployment-card h2 {
        margin: 0;
        color: #071435;
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.12;
        letter-spacing: 0;
      }

      .deployment-card ul {
        display: grid;
        gap: 12px;
        margin: 22px 0 0;
        padding: 0;
        list-style: none;
      }

      .deployment-card li {
        position: relative;
        padding-left: 28px;
        color: #334363;
        font-size: 14px;
        line-height: 1.42;
        font-weight: 720;
      }

      .deployment-card li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: linear-gradient(135deg, #315dff, #8b52ff);
      }

      .server-cube {
        position: relative;
        align-self: center;
        width: 170px;
        height: 170px;
        border-radius: 22px;
        background: linear-gradient(145deg, #0b1b64, #614bff);
        box-shadow: 0 28px 58px rgba(67, 73, 216, 0.26);
      }

      .server-cube:after {
        content: "";
        position: absolute;
        inset: 18px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 14px;
      }

      .server-cube span {
        position: absolute;
        left: 36px;
        right: 36px;
        height: 10px;
        border-radius: 999px;
        background: rgba(58, 255, 205, 0.75);
      }

      .server-cube span:nth-child(1) {
        top: 52px;
      }

      .server-cube span:nth-child(2) {
        top: 80px;
      }

      .server-cube span:nth-child(3) {
        top: 108px;
      }

      .deployment-card--api {
        grid-template-columns: minmax(0, 0.82fr) minmax(260px, 0.9fr);
      }

      .deployment-card pre {
        align-self: center;
        overflow: auto;
        margin: 0;
        padding: 22px;
        border-radius: 8px;
        color: #d9f2ff;
        background:
          linear-gradient(135deg, rgba(58, 32, 173, 0.62), transparent 42%),
          #09132e;
        box-shadow: 0 20px 42px rgba(8, 14, 48, 0.18);
        font-size: 12px;
        line-height: 1.55;
      }

      .home-final-cta {
        padding-bottom: 56px;
      }

      body[data-page="home"] .home-cta-panel {
        position: relative;
        grid-template-columns: minmax(260px, 1fr) minmax(320px, 0.9fr) auto;
        overflow: hidden;
        border-radius: 8px;
        background:
          radial-gradient(circle at 82% 18%, rgba(240, 91, 189, 0.54), transparent 22%),
          linear-gradient(135deg, #793bff 0%, #0e43ff 48%, #06147a 100%);
      }

      body[data-page="home"] .home-cta-panel:before {
        content: "";
        position: absolute;
        inset: auto -80px -88px 28%;
        height: 190px;
        border: 2px solid rgba(70, 232, 255, 0.48);
        border-radius: 50%;
        transform: rotate(-6deg);
        filter: drop-shadow(0 0 18px rgba(66, 202, 255, 0.7));
      }

      .home-cta-panel > * {
        position: relative;
        z-index: 1;
      }

      .home-cta-panel h2 {
        max-width: 520px;
        font-size: clamp(28px, 3.2vw, 42px);
      }

      .cta-features {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        color: rgba(255, 255, 255, 0.84);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 800;
        text-align: center;
      }

      .cta-features span {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
      }

      .cta-features svg {
        width: 34px;
        height: 34px;
        margin: 0 auto 10px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 50%;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        box-shadow: 0 0 22px rgba(68, 216, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.85;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .cta-actions {
        justify-content: flex-end;
        margin-top: 0;
      }

      body[data-page="home"] .home-cta-panel .button {
        min-height: 52px;
        border-radius: 8px;
      }

      body[data-page="home"] .home-footer {
        border-top: 1px solid rgba(122, 150, 190, 0.18);
        background: #fff;
      }

      .home-footer-grid {
        display: grid;
        grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, 0.8fr));
        gap: 36px;
        padding: 34px 0 40px;
      }

      .footer-brand img {
        width: 150px;
        height: auto;
      }

      .footer-brand p,
      .home-footer-grid a,
      .home-footer-grid h2 {
        margin: 0;
      }

      .footer-brand p {
        margin-top: 12px;
        color: #50617e;
        font-size: 14px;
        font-weight: 650;
      }

      .home-footer-grid h2 {
        margin-bottom: 12px;
        color: #14204b;
        font-size: 13px;
        line-height: 1.2;
      }

      .home-footer-grid a {
        display: block;
        margin-top: 8px;
        color: #5f6f8c;
        font-size: 13px;
        font-weight: 650;
      }

      .social-row {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }

      .social-row i {
        width: 26px;
        height: 26px;
        border: 1px solid rgba(122, 150, 190, 0.22);
        border-radius: 50%;
        background: linear-gradient(135deg, #f7faff, #ffffff);
      }

      .security-grid .feature-card h3,
      .release-card h2,
      .release-card h3 {
        margin-top: 0;
      }

      .release-section {
        padding: 0 0 76px;
      }

      .release-warning {
        display: grid;
        gap: 6px;
        margin-bottom: 18px;
        padding: 18px 20px;
        border: 1px solid rgba(20, 103, 255, 0.16);
        border-radius: 8px;
        color: #15234f;
        background: linear-gradient(135deg, rgba(238, 245, 255, 0.96), rgba(255, 255, 255, 0.96));
        box-shadow: 0 16px 38px rgba(18, 47, 112, 0.08);
      }

      .release-warning strong {
        color: #07143d;
        font-size: 16px;
      }

      .release-warning span {
        color: #5c6d8b;
        font-size: 14px;
        font-weight: 650;
      }

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

      .release-card {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 16px;
        padding: 24px;
        border: 1px solid rgba(122, 150, 190, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 48px rgba(18, 47, 112, 0.1);
      }

      .release-tag {
        align-self: flex-start;
        padding: 7px 10px;
        border-radius: 999px;
        color: #126dff;
        background: #eef5ff;
        font-size: 12px;
        font-weight: 900;
      }

      .release-card h2 {
        color: #07143d;
        font-size: 24px;
        line-height: 1.12;
      }

      .release-meta {
        display: grid;
        gap: 10px;
        margin: 0;
      }

      .release-meta div {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
        align-items: baseline;
      }

      .release-meta dt {
        color: #6a7894;
        font-size: 12px;
        font-weight: 820;
      }

      .release-meta dd {
        min-width: 0;
        margin: 0;
        color: #172342;
        font-size: 13px;
        font-weight: 780;
        overflow-wrap: anywhere;
      }

      .sha-placeholder,
      .changelog-box {
        margin: 0;
        padding: 14px;
        border: 1px solid rgba(122, 150, 190, 0.16);
        border-radius: 8px;
        color: #52627e;
        background: #f8fbff;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 650;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .changelog-box h3 {
        margin-bottom: 6px;
        color: #172342;
        font-size: 14px;
      }

      .release-card .button {
        margin-top: auto;
        border-radius: 8px;
      }

      .account-section {
        padding: 0 0 76px;
      }

      .account-note {
        display: grid;
        gap: 8px;
        margin-bottom: 22px;
        padding: 18px 20px;
        border: 1px solid rgba(20, 103, 255, 0.16);
        border-radius: 8px;
        background:
          radial-gradient(circle at 92% 10%, rgba(24, 199, 180, 0.12), transparent 34%),
          linear-gradient(135deg, rgba(238, 245, 255, 0.96), rgba(255, 255, 255, 0.96));
        box-shadow: 0 16px 38px rgba(18, 47, 112, 0.08);
      }

      .account-note strong {
        color: #07143d;
        font-size: 17px;
        line-height: 1.3;
      }

      .account-note span {
        color: #5c6d8b;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.55;
      }

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

      .account-overview-card,
      .account-download-card,
      .account-flow-panel {
        min-width: 0;
        border: 1px solid rgba(122, 150, 190, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 48px rgba(18, 47, 112, 0.1);
      }

      .account-overview-card {
        padding: 22px;
      }

      .account-card-icon {
        display: inline-grid;
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
        place-items: center;
        border-radius: 8px;
        color: #126dff;
        background: linear-gradient(135deg, #eef5ff, #ffffff);
        box-shadow: inset 0 0 0 1px rgba(20, 103, 255, 0.12), 0 14px 28px rgba(20, 103, 255, 0.12);
        font-size: 12px;
        font-weight: 920;
      }

      .account-overview-card h2,
      .account-download-card h3,
      .account-flow-panel h2 {
        margin: 0;
        color: #07143d;
        line-height: 1.12;
      }

      .account-overview-card h2 {
        font-size: 20px;
      }

      .account-overview-card p,
      .account-download-card p,
      .account-flow-panel p {
        margin: 12px 0 0;
        color: #5c6d8b;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.55;
      }

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

      .account-download-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px;
      }

      .account-download-card--server {
        border-color: rgba(20, 103, 255, 0.24);
        background:
          radial-gradient(circle at 86% 12%, rgba(24, 199, 180, 0.16), transparent 34%),
          linear-gradient(135deg, rgba(238, 245, 255, 0.98), rgba(255, 255, 255, 0.94));
      }

      .account-download-card h3 {
        font-size: 24px;
      }

      .account-download-card .button {
        align-self: flex-start;
        margin-top: auto;
        border-radius: 8px;
      }

      .account-flow-panel {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 28px;
        padding: 30px;
        overflow: hidden;
        background:
          radial-gradient(circle at 84% 18%, rgba(234, 63, 149, 0.12), transparent 32%),
          radial-gradient(circle at 12% 88%, rgba(20, 103, 255, 0.12), transparent 34%),
          rgba(255, 255, 255, 0.94);
      }

      .account-kicker {
        margin-bottom: 12px;
      }

      .account-flow-list {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .account-flow-list li {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 14px;
        border: 1px solid rgba(122, 150, 190, 0.16);
        border-radius: 8px;
        background: rgba(248, 251, 255, 0.88);
      }

      .account-flow-list span {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 8px;
        color: #ffffff;
        background: linear-gradient(135deg, var(--blue), #7b4dff);
        font-size: 13px;
        font-weight: 920;
      }

      .account-flow-list strong {
        display: block;
        color: #172342;
        font-size: 15px;
        line-height: 1.3;
      }

      .account-flow-list small {
        display: block;
        margin-top: 5px;
        color: #63718d;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.45;
      }

      /* Reference fidelity pass: match the supplied one-page Alviyo concept more tightly. */
      body[data-page="home"] .container {
        width: min(1320px, calc(100% - 88px));
      }

      body[data-page="home"] .site-header {
        padding-top: 18px;
      }

      body[data-page="home"] .home-header-shell {
        min-height: 58px;
        padding: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
      }

      body[data-page="home"] .home-header-shell.is-scrolled {
        border-color: rgba(139, 189, 255, 0.24);
        background: rgba(4, 13, 69, 0.72);
        box-shadow: 0 18px 52px rgba(0, 12, 66, 0.2);
        backdrop-filter: blur(18px);
      }

      body[data-page="home"] .home-brand img {
        width: 148px;
      }

      body[data-page="home"] .home-nav {
        gap: 10px;
      }

      body[data-page="home"] .home-nav a {
        padding: 9px 2px;
        font-size: 13px;
        font-weight: 820;
      }

      body[data-page="home"] .home-nav a:hover,
      body[data-page="home"] .home-nav a.active {
        background: transparent;
        text-shadow: 0 0 16px rgba(92, 210, 255, 0.7);
      }

      .header-line {
        left: 0;
        right: 0;
        opacity: 0.42;
      }

      .home-stand-button {
        min-width: 174px;
        min-height: 48px;
        border-radius: 8px;
        background: linear-gradient(135deg, #ed5cc9 0%, #496fff 100%);
        box-shadow: 0 18px 38px rgba(103, 86, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
      }

      .home-hero {
        min-height: 650px;
        padding: 102px 0 76px;
        background:
          radial-gradient(ellipse at 64% 22%, rgba(146, 88, 255, 0.7), transparent 25%),
          radial-gradient(ellipse at 37% 46%, rgba(0, 210, 255, 0.48), transparent 31%),
          radial-gradient(ellipse at 16% 76%, rgba(0, 94, 255, 0.72), transparent 35%),
          linear-gradient(126deg, #02052a 0%, #071064 35%, #0733ca 62%, #4311a7 100%);
      }

      .home-hero:after {
        height: 98px;
      }

      .home-hero:before {
        inset: -20% -6% 12%;
        filter: blur(22px) saturate(1.38);
      }

      .aurora-ribbon--one {
        top: 132px;
        left: 30%;
        width: 820px;
        height: 170px;
        opacity: 0.9;
        filter: blur(13px) saturate(1.55);
      }

      .aurora-ribbon--two {
        top: 270px;
        left: 34%;
        width: 760px;
        height: 155px;
        opacity: 0.82;
        filter: blur(15px) saturate(1.55);
      }

      .aurora-ribbon--three {
        right: -12%;
        bottom: 92px;
        width: 970px;
        opacity: 0.82;
      }

      .aurora-ribbon--four {
        left: -18%;
        bottom: 24px;
        width: 980px;
      }

      .hero-line--one {
        top: 134px;
        left: 38%;
        width: 960px;
        height: 150px;
      }

      .hero-line--two {
        right: -80px;
        bottom: 92px;
        width: 820px;
      }

      .hero-line--three {
        left: -150px;
        bottom: 68px;
      }

      .home-hero-layout {
        grid-template-columns: minmax(470px, 0.82fr) minmax(620px, 1.18fr);
        gap: 34px;
      }

      .home-hero-copy h1 {
        max-width: 540px;
        margin-top: 0;
        font-size: clamp(44px, 3.8vw, 58px);
        line-height: 1.03;
      }

      .home-hero-copy p {
        max-width: 520px;
        margin-top: 20px;
        font-size: 16px;
        line-height: 1.52;
      }

      .home-hero-actions {
        margin-top: 28px;
      }

      .home-hero-actions .button {
        min-width: 188px;
        min-height: 50px;
      }

      .home-product-stage {
        min-height: 410px;
        margin-top: -2px;
      }

      .home-product-stage:before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 18%;
        right: -6%;
        bottom: -12px;
        height: 84px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34), rgba(87, 111, 255, 0.16) 42%, transparent 74%);
        box-shadow: 0 0 38px rgba(88, 209, 255, 0.34);
        pointer-events: none;
      }

      .desktop-frame {
        max-width: 640px;
        margin-left: auto;
        border-radius: 20px;
        box-shadow: 0 34px 86px rgba(0, 8, 70, 0.3), 0 0 62px rgba(100, 169, 255, 0.38);
      }

      .desktop-toolbar {
        min-height: 40px;
        grid-template-columns: auto 1fr repeat(3, 18px);
        padding: 0 16px;
      }

      .desktop-frame img {
        aspect-ratio: 16 / 9.5;
      }

      .phone-frame {
        right: -8px;
        bottom: -2px;
        width: 160px;
        min-height: 292px;
        border-width: 4px;
      }

      .home-module-section {
        margin-top: -50px;
        padding-bottom: 20px;
      }

      .home-module-grid {
        gap: 20px;
      }

      .module-tile {
        min-height: 108px;
        padding: 16px 10px 14px;
        border-radius: 8px;
        box-shadow: 0 22px 52px rgba(19, 44, 110, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      }

      .module-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
      }

      .module-icon svg {
        width: 33px;
        height: 33px;
      }

      .module-tile strong {
        font-size: 13.5px;
      }

      .home-benefits,
      .home-tools,
      .home-deployment,
      .home-final-cta {
        padding: 28px 0;
      }

      .benefit-strip {
        border-radius: 8px;
        box-shadow: 0 18px 50px rgba(19, 46, 108, 0.08);
      }

      .benefit-strip article {
        min-height: 124px;
        grid-template-columns: 54px minmax(0, 1fr);
        padding: 24px 28px;
      }

      .benefit-icon {
        width: 50px;
        height: 50px;
        color: #486bff;
        background:
          radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 38%, transparent 60%),
          linear-gradient(145deg, #edf3ff, #fff);
        box-shadow: inset 0 0 0 1px rgba(66, 98, 255, 0.12), 0 12px 26px rgba(66, 98, 255, 0.16);
      }

      .home-section-heading {
        margin-bottom: 26px;
      }

      .home-section-heading h2 {
        font-size: clamp(25px, 2.7vw, 32px);
      }

      .home-section-heading p {
        margin-top: 8px;
        font-size: 15px;
      }

      .tool-grid {
        gap: 12px;
      }

      .tool-card {
        min-height: 292px;
        padding: 10px 10px 16px;
        border-radius: 8px;
      }

      .tool-preview {
        height: 148px;
        margin-bottom: 15px;
      }

      .tool-card h3 {
        font-size: 15.5px;
      }

      .tool-card p {
        font-size: 12px;
        line-height: 1.48;
      }

      .tool-card a {
        margin-top: 12px;
        font-size: 12px;
      }

      .deployment-grid {
        gap: 12px;
      }

      .deployment-card {
        min-height: 246px;
        padding: 30px;
        border-radius: 8px;
      }

      .deployment-card h2 {
        font-size: clamp(24px, 2.4vw, 31px);
      }

      .server-cube {
        width: 168px;
        height: 168px;
      }

      body[data-page="home"] .home-cta-panel {
        min-height: 154px;
        border-radius: 8px;
        background:
          radial-gradient(circle at 84% 20%, rgba(236, 82, 202, 0.7), transparent 21%),
          radial-gradient(circle at 38% 110%, rgba(0, 221, 255, 0.28), transparent 33%),
          linear-gradient(135deg, #8146ff 0%, #0b43ff 48%, #06106a 100%);
      }

      .home-cta-panel h2 {
        font-size: clamp(26px, 2.8vw, 36px);
      }

      .home-footer-grid {
        padding-top: 30px;
        padding-bottom: 34px;
      }

      @keyframes home-line-flow {
        from {
          background-position: 0% 50%;
        }
        to {
          background-position: 220% 50%;
        }
      }

      @keyframes home-orbit-line {
        0%,
        100% {
          opacity: 0.62;
          filter: drop-shadow(0 0 14px rgba(66, 202, 255, 0.44));
        }
        50% {
          opacity: 0.92;
          filter: drop-shadow(0 0 28px rgba(127, 92, 255, 0.76));
        }
      }

      @keyframes aurora-field-drift {
        0% {
          transform: translate3d(-2%, -1%, 0) skewY(-8deg) scale(1);
          opacity: 0.76;
        }
        100% {
          transform: translate3d(4%, 2%, 0) skewY(-5deg) scale(1.06);
          opacity: 1;
        }
      }

      @keyframes aurora-ribbon-one {
        0% {
          transform: translate3d(-7%, -8px, 0) rotate(-16deg) skewX(-16deg) scaleX(0.98);
          opacity: 0.72;
        }
        100% {
          transform: translate3d(8%, 18px, 0) rotate(-10deg) skewX(-10deg) scaleX(1.08);
          opacity: 0.95;
        }
      }

      @keyframes aurora-ribbon-two {
        0% {
          transform: translate3d(8%, -18px, 0) rotate(-33deg) skewX(-18deg) scaleX(0.94);
          opacity: 0.58;
        }
        100% {
          transform: translate3d(-5%, 24px, 0) rotate(-25deg) skewX(-10deg) scaleX(1.12);
          opacity: 0.82;
        }
      }

      @keyframes aurora-ribbon-three {
        0% {
          transform: translate3d(6%, 16px, 0) rotate(-9deg) skewX(-20deg) scaleX(1.04);
          opacity: 0.62;
        }
        100% {
          transform: translate3d(-9%, -14px, 0) rotate(-3deg) skewX(-12deg) scaleX(0.98);
          opacity: 0.9;
        }
      }

      @keyframes aurora-ribbon-four {
        0% {
          transform: translate3d(-4%, 8px, 0) rotate(4deg) skewX(-20deg) scaleX(0.94);
          opacity: 0.42;
        }
        100% {
          transform: translate3d(7%, -10px, 0) rotate(8deg) skewX(-12deg) scaleX(1.06);
          opacity: 0.72;
        }
      }

      @media (max-width: 1180px) {
        .home-hero-layout {
          grid-template-columns: 1fr;
          gap: 38px;
        }

        .home-product-stage {
          max-width: 790px;
        }

        .home-module-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .benefit-strip,
        .tool-grid,
        .functions-stage-grid,
        .functions-roadmap,
        .deployment-grid,
        body[data-page="home"] .home-cta-panel {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .functions-anchor-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .deployment-card--api {
          grid-template-columns: 1fr;
        }

        .cta-actions {
          justify-content: flex-start;
        }
      }

      @media (max-width: 900px) {
        body[data-page="home"] .site-header {
          padding-top: 10px;
        }

        body[data-page="home"] .home-header-shell {
          min-height: 62px;
        }

        body[data-page="home"] .home-brand img {
          width: 138px;
        }

        .language-switcher {
          display: none;
        }

        .home-hero {
          min-height: 0;
          padding: 104px 0 86px;
        }

        .home-hero-copy h1 {
          font-size: clamp(40px, 9vw, 62px);
        }

        .phone-frame {
          right: 12px;
          bottom: -42px;
          width: 154px;
          min-height: 286px;
        }

        .benefit-strip,
        .tool-grid,
        .functions-stage-grid,
        .functions-roadmap,
        .deployment-grid,
        .ios-guide-grid,
        .ios-note-grid,
        body[data-page="home"] .home-cta-panel,
        .home-footer-grid {
          grid-template-columns: 1fr;
        }

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

        .ios-phone-frame {
          min-height: 600px;
        }

        .benefit-strip article + article {
          border-left: 0;
          border-top: 1px solid rgba(122, 150, 190, 0.18);
        }

        .tool-card {
          min-height: 0;
        }

        .home-footer-grid {
          gap: 22px;
        }
      }

      @media (max-width: 640px) {
        body[data-page="home"] .home-header-shell {
          padding: 9px 10px;
        }

        body[data-page="home"] .home-brand img {
          width: 116px;
        }

        body[data-page="home"] .home-stand-button {
          min-height: 40px;
          min-width: 88px;
          padding: 0 12px;
          font-size: 12px;
        }

        body[data-page="home"] .home-header-actions {
          display: none;
        }

        .home-stand-button .label-full {
          display: none;
        }

        .home-stand-button .label-short {
          display: inline;
        }

        .home-hero {
          padding: 92px 0 70px;
        }

        .home-hero-copy h1 {
          max-width: 340px;
          font-size: 33px;
          line-height: 1.08;
          overflow-wrap: normal;
        }

        .home-hero-copy p {
          max-width: 340px;
          font-size: 15px;
          line-height: 1.5;
          overflow-wrap: anywhere;
        }

        .hero-trust-list {
          display: grid;
          grid-template-columns: 1fr;
          max-width: 340px;
        }

        .hero-trust-list span {
          width: 100%;
          min-width: 0;
          justify-content: flex-start;
          white-space: normal;
        }

        .home-hero-actions .button {
          width: 100%;
          min-height: 50px;
        }

        .ios-step-list li {
          grid-template-columns: 40px minmax(0, 1fr);
          padding: 14px;
        }

        .ios-step-number {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          font-size: 16px;
        }

        .ios-phone-frame {
          width: min(100%, 330px);
          min-height: 570px;
          padding: 18px;
          border-radius: 28px;
        }

        .ios-app-preview {
          margin-top: 24px;
          padding: 20px;
        }

        .ios-share-panel {
          right: 10px;
          bottom: 10px;
          left: 10px;
        }

        .home-product-stage {
          min-height: 270px;
        }

        .desktop-frame {
          border-radius: 16px;
        }

        .desktop-toolbar {
          min-height: 38px;
          grid-template-columns: auto 1fr repeat(3, 14px);
          font-size: 11px;
        }

        .desktop-toolbar span:not(.desktop-logo-dot) {
          width: 12px;
          height: 12px;
        }

        .phone-frame {
          display: none;
        }

        .home-module-section {
          margin-top: -42px;
        }

        .home-module-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }

        .module-tile {
          min-height: 96px;
        }

        .benefit-strip article,
        .deployment-card,
        body[data-page="home"] .home-cta-panel {
          padding: 22px;
        }

        .benefit-strip article {
          grid-template-columns: 44px minmax(0, 1fr);
        }

        .benefit-icon {
          width: 40px;
          height: 40px;
        }

        .tool-grid {
          gap: 12px;
        }

        .functions-anchor-grid {
          grid-template-columns: 1fr;
        }

        .function-detail-card,
        .functions-roadmap article {
          min-height: 0;
          padding: 20px;
        }

        .deployment-card {
          grid-template-columns: 1fr;
        }

        .server-cube {
          width: 132px;
          height: 132px;
        }

        .deployment-card pre {
          font-size: 11px;
        }

        .cta-features {
          grid-template-columns: 1fr;
          text-align: center;
        }
      }

      @media (max-width: 760px) {
        body[data-page="home"] .container {
          width: min(100% - 24px, 1180px);
        }

        body[data-page="home"] .home-header-shell {
          min-height: 62px;
          padding: 9px 10px;
          border-color: rgba(255, 255, 255, 0.2);
          background: rgba(4, 14, 72, 0.22);
          backdrop-filter: blur(18px);
        }

        body[data-page="home"] .home-brand img {
          width: 116px;
        }

        .home-hero {
          padding-top: 92px;
        }
      }

      /* Hero background correction: darker top and reference-like aurora arcs. */
      .home-hero {
        background:
          linear-gradient(180deg, #020426 0%, rgba(3, 8, 49, 0.98) 18%, rgba(4, 16, 88, 0.72) 42%, rgba(7, 43, 187, 0.38) 72%, rgba(66, 24, 153, 0.48) 100%),
          radial-gradient(ellipse at 62% 43%, rgba(0, 217, 255, 0.42), transparent 31%),
          radial-gradient(ellipse at 84% 28%, rgba(190, 72, 255, 0.52), transparent 32%),
          radial-gradient(ellipse at 18% 80%, rgba(0, 116, 255, 0.62), transparent 37%),
          linear-gradient(126deg, #02042b 0%, #061063 35%, #0737d0 65%, #4112a5 100%);
      }

      .home-hero:before {
        inset: 3% -8% 22%;
        background:
          radial-gradient(ellipse at 67% 42%, rgba(77, 255, 242, 0.42), transparent 19%),
          linear-gradient(115deg, transparent 19%, rgba(31, 223, 255, 0.08) 33%, rgba(122, 93, 255, 0.2) 44%, rgba(255, 82, 225, 0.18) 54%, transparent 69%),
          linear-gradient(73deg, transparent 36%, rgba(0, 204, 255, 0.24) 50%, rgba(100, 68, 255, 0.22) 63%, transparent 78%);
        filter: blur(24px) saturate(1.32);
        opacity: 0.72;
      }

      .hero-glow {
        opacity: 0.28;
      }

      .hero-glow--blue {
        left: 16%;
        top: 310px;
        width: 560px;
        height: 180px;
      }

      .hero-glow--pink {
        right: -14%;
        top: 86px;
        width: 680px;
        height: 220px;
      }

      .aurora-ribbon {
        background:
          linear-gradient(90deg, transparent 0%, rgba(15, 142, 255, 0.04) 12%, rgba(52, 241, 255, 0.46) 33%, rgba(97, 92, 255, 0.5) 56%, rgba(255, 82, 221, 0.42) 75%, transparent 100%);
        filter: blur(10px) saturate(1.52);
      }

      .aurora-ribbon:after {
        inset: 46% 4% 42%;
        opacity: 0.58;
      }

      .aurora-ribbon--one {
        top: 176px;
        left: 31%;
        width: 760px;
        height: 118px;
        opacity: 0.64;
        transform: rotate(-30deg) skewX(-18deg);
      }

      .aurora-ribbon--two {
        top: 310px;
        left: 32%;
        width: 930px;
        height: 116px;
        opacity: 0.58;
        transform: rotate(-8deg) skewX(-18deg);
      }

      .aurora-ribbon--three {
        right: -8%;
        bottom: 122px;
        width: 980px;
        height: 112px;
        opacity: 0.62;
        transform: rotate(-5deg) skewX(-16deg);
      }

      .aurora-ribbon--four {
        left: -24%;
        bottom: 56px;
        width: 950px;
        height: 94px;
        opacity: 0.46;
        transform: rotate(4deg) skewX(-16deg);
      }

      .hero-line {
        opacity: 0.68;
        filter: drop-shadow(0 0 13px rgba(66, 219, 255, 0.48)) drop-shadow(0 0 28px rgba(150, 76, 255, 0.28));
      }

      .hero-line--one {
        top: 148px;
        left: 41%;
        width: 900px;
        height: 128px;
      }

      .hero-line--two {
        right: -6%;
        bottom: 116px;
        width: 880px;
        height: 104px;
      }

      .hero-line--three {
        left: -18%;
        bottom: 82px;
        width: 820px;
        height: 94px;
      }

      @media (max-width: 760px) {
        .home-hero {
          background:
            linear-gradient(180deg, #12094e 0%, rgba(31, 17, 104, 0.96) 24%, rgba(9, 69, 184, 0.74) 56%, rgba(4, 38, 151, 0.88) 100%),
            radial-gradient(ellipse at 76% 34%, rgba(200, 72, 255, 0.44), transparent 30%),
            radial-gradient(ellipse at 58% 48%, rgba(0, 218, 255, 0.36), transparent 36%),
            linear-gradient(150deg, #08063d, #0a2fc5 62%, #3210a0);
        }

        .home-hero:before {
          inset: 10% -40% 28% -28%;
          opacity: 0.58;
        }

        .aurora-ribbon--one {
          top: 210px;
          left: -4%;
          width: 650px;
          opacity: 0.46;
        }

        .aurora-ribbon--two {
          top: 330px;
          left: -28%;
          width: 760px;
          opacity: 0.42;
        }
      }

      /* 2026-07 redesign: calmer B2B hero, product story, audience and security contour. */
      body[data-page="home"] .site-nav {
        gap: 2px;
      }

      body[data-page="home"] .site-nav a {
        padding-inline: 11px;
      }

      .hero-eyebrow,
      .section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid rgba(171, 216, 255, 0.24);
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.86);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        font-size: 12px;
        font-weight: 860;
        letter-spacing: 0.02em;
      }

      .hero-eyebrow:before,
      .section-kicker:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #2ef0d1;
        box-shadow: 0 0 16px rgba(46, 240, 209, 0.7);
      }

      .home-hero-copy .hero-eyebrow {
        margin-bottom: 18px;
      }

      .home-hero-copy h1 {
        max-width: 720px;
      }

      .hero-proof-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        max-width: 680px;
        margin-top: 22px;
      }

      .hero-proof-row span {
        display: grid;
        min-height: 76px;
        align-content: center;
        padding: 14px 16px;
        border: 1px solid rgba(186, 218, 255, 0.18);
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.72);
        background: rgba(4, 13, 56, 0.24);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 760;
      }

      .hero-proof-row strong {
        display: block;
        margin-bottom: 3px;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        font-weight: 940;
      }

      .product-scenario {
        position: absolute;
        z-index: 4;
        left: -18px;
        right: 28px;
        bottom: -34px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        pointer-events: none;
      }

      .scenario-card {
        min-width: 0;
        padding: 12px 13px;
        border: 1px solid rgba(191, 216, 255, 0.38);
        border-radius: 8px;
        color: #17264d;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 18px 42px rgba(4, 10, 54, 0.22);
        backdrop-filter: blur(12px);
      }

      .scenario-card span {
        display: block;
        color: #7182a2;
        font-size: 10px;
        font-weight: 900;
      }

      .scenario-card strong {
        display: block;
        margin-top: 4px;
        color: #071435;
        font-size: 13px;
        line-height: 1.12;
      }

      .scenario-card p {
        margin: 6px 0 0;
        color: #5f6f8c;
        font-size: 11px;
        line-height: 1.3;
        font-weight: 700;
      }

      .scenario-card--message {
        border-color: rgba(46, 136, 255, 0.34);
      }

      .scenario-card--call {
        border-color: rgba(32, 199, 132, 0.34);
        transform: translateY(-10px);
      }

      .scenario-card--task {
        border-color: rgba(232, 163, 31, 0.36);
        transform: translateY(8px);
      }

      .scenario-card--calendar {
        border-color: rgba(132, 92, 255, 0.34);
        transform: translateY(-4px);
      }

      .home-download-strip {
        position: relative;
        z-index: 6;
        margin-top: -38px;
        padding: 0 0 26px;
      }

      .download-strip-grid {
        display: grid;
        grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(150px, 0.8fr));
        gap: 12px;
        align-items: stretch;
        padding: 14px;
        border: 1px solid rgba(123, 154, 204, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 20px 58px rgba(20, 46, 108, 0.12);
        backdrop-filter: blur(16px);
      }

      .download-strip-copy,
      .download-card {
        min-height: 76px;
        border-radius: 8px;
      }

      .download-strip-copy {
        display: grid;
        align-content: center;
        padding: 12px 18px;
        background: linear-gradient(135deg, #f5f8ff, #ffffff);
      }

      .download-strip-copy span,
      .download-card span {
        color: #6d7d9d;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .download-strip-copy strong,
      .download-card strong {
        display: block;
        margin-top: 6px;
        color: #071435;
        font-size: 15px;
        line-height: 1.25;
      }

      .download-card {
        display: grid;
        align-content: center;
        padding: 12px 16px;
        border: 1px solid rgba(121, 151, 196, 0.2);
        background: #fff;
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }

      .download-card:hover {
        transform: translateY(-3px);
        border-color: rgba(20, 103, 255, 0.3);
        box-shadow: 0 16px 36px rgba(23, 54, 123, 0.12);
      }

      .download-card--ios {
        border-color: rgba(116, 76, 255, 0.24);
        background: linear-gradient(135deg, rgba(248, 244, 255, 0.96), #fff);
      }

      .download-card--ios:hover {
        border-color: rgba(116, 76, 255, 0.42);
        box-shadow: 0 18px 38px rgba(80, 59, 180, 0.14);
      }

      .home-download-strip + .home-module-section {
        margin-top: 0;
        padding-top: 10px;
      }

      .section-kicker {
        margin-bottom: 14px;
        color: #315dff;
        border-color: rgba(49, 93, 255, 0.18);
        background: rgba(238, 244, 255, 0.9);
      }

      .section-kicker:before {
        background: #315dff;
        box-shadow: 0 0 14px rgba(49, 93, 255, 0.42);
      }

      .home-audience,
      .home-security-contour {
        padding: 42px 0;
      }

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

      .audience-grid article {
        position: relative;
        min-height: 260px;
        overflow: hidden;
        padding: 24px;
        border: 1px solid rgba(122, 150, 190, 0.18);
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96)),
          radial-gradient(circle at 86% 12%, rgba(49, 93, 255, 0.18), transparent 38%);
        box-shadow: 0 18px 46px rgba(19, 46, 108, 0.08);
      }

      .audience-grid article:after {
        content: "";
        position: absolute;
        right: -36px;
        bottom: -46px;
        width: 126px;
        height: 126px;
        border: 1px solid rgba(49, 93, 255, 0.12);
        border-radius: 28px;
        transform: rotate(18deg);
      }

      .audience-grid article span {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        color: #315dff;
        background: #eef4ff;
        font-size: 13px;
        font-weight: 940;
      }

      .audience-grid h3 {
        position: relative;
        z-index: 1;
        margin: 28px 0 0;
        color: #071435;
        font-size: 20px;
        line-height: 1.16;
      }

      .audience-grid p {
        position: relative;
        z-index: 1;
        margin: 14px 0 0;
        color: #62728f;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 650;
      }

      .security-contour-grid {
        display: grid;
        grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
        gap: 34px;
        align-items: center;
        padding: 34px;
        border: 1px solid rgba(122, 150, 190, 0.18);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96)),
          linear-gradient(90deg, rgba(49, 93, 255, 0.06), transparent);
        box-shadow: 0 22px 58px rgba(19, 46, 108, 0.09);
      }

      .security-copy h2 {
        margin: 0;
        color: #071435;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1.08;
      }

      .security-copy p {
        margin: 18px 0 0;
        color: #5d6d8a;
        font-size: 16px;
        line-height: 1.58;
        font-weight: 650;
      }

      .security-copy ul {
        display: grid;
        gap: 10px;
        margin: 22px 0 0;
        padding: 0;
        list-style: none;
      }

      .security-copy li {
        position: relative;
        padding-left: 24px;
        color: #26395f;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 760;
      }

      .security-copy li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #20c784;
        box-shadow: 0 0 0 5px rgba(32, 199, 132, 0.12);
      }

      .security-map {
        position: relative;
        min-height: 430px;
        border: 1px solid rgba(88, 123, 196, 0.16);
        border-radius: 8px;
        background:
          linear-gradient(rgba(20, 103, 255, 0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(20, 103, 255, 0.05) 1px, transparent 1px),
          radial-gradient(circle at center, rgba(49, 93, 255, 0.12), transparent 56%),
          #f8fbff;
        background-size: 42px 42px, 42px 42px, auto, auto;
        overflow: hidden;
      }

      .security-map:before,
      .security-map:after {
        content: "";
        position: absolute;
        inset: 84px;
        border: 1px solid rgba(49, 93, 255, 0.18);
        border-radius: 42px;
      }

      .security-map:after {
        inset: 134px;
        border-color: rgba(32, 199, 132, 0.18);
        transform: rotate(9deg);
      }

      .security-node {
        position: absolute;
        z-index: 1;
        display: grid;
        align-content: center;
        min-width: 150px;
        min-height: 76px;
        padding: 12px 15px;
        border: 1px solid rgba(122, 150, 190, 0.2);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 16px 34px rgba(19, 46, 108, 0.12);
        backdrop-filter: blur(12px);
      }

      .security-node strong {
        color: #071435;
        font-size: 14px;
        line-height: 1.15;
      }

      .security-node span {
        display: block;
        margin-top: 5px;
        color: #6d7d9d;
        font-size: 11px;
        font-weight: 800;
      }

      .security-node--center {
        left: 50%;
        top: 50%;
        min-width: 190px;
        min-height: 104px;
        color: #fff;
        background: linear-gradient(135deg, #0d42f2, #182264);
        border-color: rgba(255, 255, 255, 0.28);
        transform: translate(-50%, -50%);
      }

      .security-node--center strong,
      .security-node--center span {
        color: #fff;
      }

      .security-node--top {
        left: 50%;
        top: 38px;
        transform: translateX(-50%);
      }

      .security-node--right {
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
      }

      .security-node--bottom {
        left: 50%;
        bottom: 38px;
        transform: translateX(-50%);
      }

      .security-node--left {
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
      }

      @media (max-width: 1180px) {
        .hero-proof-row,
        .download-strip-grid,
        .audience-grid,
        .security-contour-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .product-scenario {
          left: 18px;
          right: 18px;
        }

        .download-strip-copy {
          grid-column: 1 / -1;
        }
      }

      @media (max-width: 900px) {
        .hero-proof-row,
        .download-strip-grid,
        .audience-grid,
        .security-contour-grid {
          grid-template-columns: 1fr;
        }

        .product-scenario {
          position: relative;
          left: auto;
          right: auto;
          bottom: auto;
          margin-top: 14px;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .scenario-card,
        .scenario-card--call,
        .scenario-card--task,
        .scenario-card--calendar {
          transform: none;
        }

        .security-map {
          min-height: 380px;
        }
      }

      @media (max-width: 640px) {
        .hero-eyebrow {
          font-size: 11px;
        }

        .hero-proof-row {
          gap: 8px;
        }

        .hero-proof-row span {
          min-height: 62px;
        }

        .home-download-strip {
          margin-top: -24px;
        }

        .download-strip-grid,
        .security-contour-grid {
          padding: 12px;
        }

        .download-strip-copy,
        .download-card {
          min-height: 68px;
        }

        .product-scenario {
          grid-template-columns: 1fr;
        }

        .scenario-card {
          padding: 11px 12px;
        }

        .audience-grid article {
          min-height: 0;
          padding: 22px;
        }

        .security-map {
          min-height: auto;
          display: grid;
          gap: 10px;
          padding: 12px;
        }

        .security-map:before,
        .security-map:after {
          display: none;
        }

        .security-node,
        .security-node--center,
        .security-node--top,
        .security-node--right,
        .security-node--bottom,
        .security-node--left {
          position: relative;
          inset: auto;
          left: auto;
          right: auto;
          top: auto;
          bottom: auto;
          width: 100%;
          min-width: 0;
          min-height: 74px;
          transform: none;
        }
      }

      body[data-page="home"] .home-hero-copy,
      body[data-page="home"] .home-hero-copy .hero-eyebrow,
      body[data-page="home"] .home-hero-copy h1,
      body[data-page="home"] .home-hero-copy p,
      body[data-page="home"] .home-hero-actions,
      body[data-page="home"] .hero-trust-list,
      body[data-page="home"] .home-product-stage,
      body[data-page="home"] .desktop-frame,
      body[data-page="home"] .phone-frame,
      body[data-page="home"] .product-scenario {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
      }

      @media (min-width: 1181px) {
        body[data-page="home"] .home-hero {
          min-height: 760px;
        }

        body[data-page="home"] .home-hero-layout {
          grid-template-columns: minmax(410px, 0.74fr) minmax(610px, 1.26fr) !important;
          gap: 44px;
        }

        body[data-page="home"] .home-hero-copy h1 {
          max-width: 520px;
          font-size: clamp(42px, 3.45vw, 54px);
        }

        body[data-page="home"] .home-product-stage {
          display: block;
          min-height: 470px;
          align-self: center;
          transform: none !important;
        }

        body[data-page="home"] .desktop-frame {
          width: min(100%, 690px);
          max-width: 690px;
          transform: none !important;
        }

        body[data-page="home"] .phone-frame {
          transform: none !important;
        }
      }

      /* Unified product subpage theme: match the homepage aurora direction. */
      body:not([data-page="home"]) {
        background:
          linear-gradient(180deg, #020426 0, #07105b 440px, #f4f8ff 980px, #f8fbff 100%);
      }

      body:not([data-page="home"]) .site-header {
        top: 18px;
        padding-top: 0;
      }

      body:not([data-page="home"]) .header-shell {
        position: relative;
        min-height: 64px;
        overflow: hidden;
        padding: 10px 14px 10px 18px;
        border-color: rgba(112, 170, 255, 0.24);
        border-radius: 8px;
        background: rgba(5, 16, 80, 0.66);
        box-shadow: 0 20px 70px rgba(0, 13, 70, 0.18);
        backdrop-filter: blur(20px);
      }

      body:not([data-page="home"]) .header-shell:before,
      body:not([data-page="home"]) .header-shell:after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 224, 255, 0.72), rgba(245, 91, 255, 0.82), transparent);
        background-size: 220% 100%;
        opacity: 0.7;
        animation: home-line-flow 4.8s linear infinite;
        pointer-events: none;
      }

      body:not([data-page="home"]) .header-shell:before {
        top: 0;
      }

      body:not([data-page="home"]) .header-shell:after {
        bottom: 0;
        opacity: 0.42;
        animation-direction: reverse;
      }

      body:not([data-page="home"]) .brand-link,
      body:not([data-page="home"]) .site-nav,
      body:not([data-page="home"]) .header-actions {
        position: relative;
        z-index: 2;
      }

      body:not([data-page="home"]) .brand-link img {
        width: 148px;
      }

      body:not([data-page="home"]) .site-nav {
        gap: 10px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 13px;
        font-weight: 820;
      }

      body:not([data-page="home"]) .site-nav a {
        padding: 9px 4px;
        color: inherit;
        background: transparent;
      }

      body:not([data-page="home"]) .site-nav a:hover,
      body:not([data-page="home"]) .site-nav a.active {
        color: #fff;
        background: transparent;
        text-shadow: 0 0 16px rgba(92, 210, 255, 0.7);
      }

      body:not([data-page="home"]) .header-actions {
        gap: 8px;
      }

      body:not([data-page="home"]) .header-actions .button {
        min-height: 42px;
        padding: 0 15px;
        border-radius: 8px;
        font-size: 12px;
      }

      body:not([data-page="home"]) .header-actions .button-ghost {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.08);
      }

      body:not([data-page="home"]) .header-actions .button-primary {
        background: linear-gradient(135deg, #f35fd8, #4776ff);
        box-shadow: 0 18px 34px rgba(32, 74, 255, 0.24);
      }

      .page-hero {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        margin-top: -96px;
        padding: 174px 0 116px;
        color: #fff;
        background:
          linear-gradient(180deg, #020426 0%, rgba(3, 8, 49, 0.98) 18%, rgba(4, 16, 88, 0.78) 45%, rgba(7, 43, 187, 0.48) 73%, rgba(66, 24, 153, 0.56) 100%),
          radial-gradient(ellipse at 62% 43%, rgba(0, 217, 255, 0.42), transparent 31%),
          radial-gradient(ellipse at 84% 28%, rgba(190, 72, 255, 0.52), transparent 32%),
          radial-gradient(ellipse at 18% 80%, rgba(0, 116, 255, 0.62), transparent 37%),
          linear-gradient(126deg, #02042b 0%, #061063 35%, #0737d0 65%, #4112a5 100%);
      }

      .page-hero:before {
        content: "";
        position: absolute;
        inset: 6% -12% 18%;
        z-index: -2;
        background:
          radial-gradient(ellipse at 68% 40%, rgba(77, 255, 242, 0.42), transparent 19%),
          linear-gradient(115deg, transparent 18%, rgba(31, 223, 255, 0.08) 33%, rgba(122, 93, 255, 0.2) 45%, rgba(255, 82, 225, 0.18) 55%, transparent 69%),
          linear-gradient(73deg, transparent 34%, rgba(0, 204, 255, 0.24) 49%, rgba(100, 68, 255, 0.22) 63%, transparent 78%);
        filter: blur(24px) saturate(1.32);
        opacity: 0.76;
        animation: aurora-breathe 8s ease-in-out infinite alternate;
        pointer-events: none;
      }

      .page-hero:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(166deg, transparent 26%, rgba(42, 220, 255, 0.28) 38%, transparent 51%),
          linear-gradient(8deg, transparent 55%, rgba(184, 86, 255, 0.26) 69%, transparent 82%),
          radial-gradient(circle at 84% 10%, rgba(246, 91, 255, 0.18), transparent 24%);
        opacity: 0.72;
        pointer-events: none;
      }

      .page-heading {
        position: relative;
        z-index: 1;
        max-width: 980px;
      }

      .page-heading h1 {
        max-width: 920px;
        color: #fff;
        font-size: clamp(52px, 6.4vw, 88px);
        line-height: 0.98;
        text-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
      }

      .page-heading p {
        max-width: 760px;
        color: rgba(255, 255, 255, 0.82);
        font-size: clamp(18px, 2vw, 22px);
      }

      .page-kicker {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
      }

      .page-hero .button {
        min-height: 52px;
        border-radius: 8px;
      }

      .page-hero .button-primary {
        background: linear-gradient(135deg, #f35fd8, #4776ff);
        box-shadow: 0 22px 42px rgba(35, 70, 255, 0.26);
      }

      .page-hero .button-ghost {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.1);
      }

      .content-page {
        position: relative;
        z-index: 2;
        margin-top: -42px;
      }

      .content-page .feature-section,
      .content-page .flow-section,
      .content-page .faq-section,
      .content-page .ios-guide-section,
      .content-page .ios-note-section {
        padding-top: 72px;
      }

      .feature-card,
      .flow-panel,
      .faq-grid details,
      .ios-step-list li,
      .ios-note-grid article {
        border-color: rgba(122, 150, 190, 0.2);
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 20px 60px rgba(19, 46, 108, 0.1);
      }

      .final-cta {
        padding-top: 44px;
      }

      .final-cta .cta-panel {
        position: relative;
        overflow: hidden;
        border-color: rgba(139, 189, 255, 0.22);
        background:
          radial-gradient(circle at 78% 22%, rgba(255, 95, 224, 0.26), transparent 28%),
          radial-gradient(circle at 24% 78%, rgba(0, 218, 255, 0.24), transparent 32%),
          linear-gradient(135deg, #3810c4 0%, #0a4fe0 50%, #6b1bd8 100%);
        box-shadow: 0 28px 80px rgba(24, 53, 162, 0.24);
      }

      .final-cta .cta-panel:before {
        content: "";
        position: absolute;
        inset: -20% -8%;
        background:
          linear-gradient(115deg, transparent 20%, rgba(43, 225, 255, 0.16) 39%, rgba(255, 98, 224, 0.14) 58%, transparent 76%);
        filter: blur(14px);
        opacity: 0.84;
        pointer-events: none;
      }

      .final-cta .cta-panel > * {
        position: relative;
        z-index: 1;
      }

      .final-cta h2,
      .final-cta p {
        color: #fff;
      }

      .final-cta p {
        color: rgba(255, 255, 255, 0.78);
      }

      .final-cta .button-primary {
        background: linear-gradient(135deg, #f35fd8, #4776ff);
        box-shadow: 0 22px 42px rgba(3, 12, 74, 0.22);
      }

      .final-cta .button-ghost {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.28);
        background: rgba(255, 255, 255, 0.1);
      }

      body[data-page="emulator"] {
        background:
          radial-gradient(circle at 75% 8%, rgba(238, 82, 255, 0.28), transparent 28%),
          radial-gradient(circle at 18% 36%, rgba(0, 204, 255, 0.22), transparent 34%),
          linear-gradient(160deg, #020426 0%, #061063 46%, #190c68 100%);
      }

      body[data-page="emulator"] .emulator-page {
        margin-top: -92px;
        padding-top: 116px;
      }

      body[data-page="emulator"] .demo-shell--wide {
        border-color: rgba(139, 189, 255, 0.24);
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 30px 90px rgba(0, 12, 66, 0.28);
      }

      @media (max-width: 1080px) {
        .account-overview-grid,
        .account-download-grid,
        .account-flow-panel {
          grid-template-columns: 1fr;
        }

        .account-overview-grid {
          gap: 12px;
        }
      }

      @media (max-width: 1080px) {
        body:not([data-page="home"]) .header-actions .button-ghost.android-download-button {
          display: none;
        }
      }

      @media (max-width: 900px) {
        body:not([data-page="home"]) .site-header {
          top: 10px;
        }

        body:not([data-page="home"]) .header-shell {
          min-height: 62px;
        }

        body:not([data-page="home"]) .site-nav {
          display: none;
        }

        body:not([data-page="home"]) .brand-link img {
          width: 136px;
        }

        body:not([data-page="home"]) .header-actions .button-ghost {
          display: none;
        }

        .page-hero {
          margin-top: -82px;
          padding: 142px 0 86px;
        }

        .page-heading h1 {
          font-size: clamp(38px, 9.5vw, 60px);
          line-height: 1.06;
        }

        .page-heading p {
          font-size: 16px;
          line-height: 1.55;
        }

        .content-page {
          margin-top: -26px;
        }
      }

      @media (max-width: 640px) {
        body:not([data-page="home"]) .header-shell {
          padding: 9px 10px;
        }

        body:not([data-page="home"]) .brand-link img {
          width: 116px;
        }

        body:not([data-page="home"]) .header-actions .button-primary {
          min-height: 40px;
          padding: 0 12px;
          font-size: 11px;
        }

        .page-hero {
          padding: 128px 0 76px;
        }

        .page-hero .hero-actions .button {
          width: 100%;
          min-height: 50px;
        }

        .final-cta .hero-actions .button {
          width: 100%;
        }

        .account-section {
          padding-bottom: 54px;
        }

        .account-note,
        .account-overview-card,
        .account-download-card,
        .account-flow-panel {
          padding: 18px;
        }

        .account-flow-list li {
          grid-template-columns: 1fr;
        }

        .account-download-card .button {
          width: 100%;
        }
      }

      /* PC-version emulator page */
      body[data-page="emulator"] {
        min-height: 100dvh;
        color: #18233b;
        background:
          radial-gradient(circle at 8% 0%, rgba(189, 211, 255, 0.75), transparent 30%),
          radial-gradient(circle at 94% 5%, rgba(255, 225, 188, 0.56), transparent 28%),
          linear-gradient(135deg, #edf4ff 0%, #f8fbff 42%, #eef5ff 100%);
      }

      body[data-page="emulator"] .pc-emulator-page {
        min-height: 100dvh;
        padding: 24px;
      }

      body[data-page="emulator"] .pc-window {
        display: grid;
        grid-template-rows: 66px minmax(0, 1fr);
        gap: 12px;
        width: min(100%, 1920px);
        height: calc(100dvh - 48px);
        min-height: 760px;
        margin: 0 auto;
      }

      body[data-page="emulator"] .pc-app-top {
        display: grid;
        grid-template-columns: 292px minmax(0, 1fr) 238px;
        gap: 12px;
        min-width: 0;
      }

      body[data-page="emulator"] .pc-logo-card,
      body[data-page="emulator"] .pc-module-bar,
      body[data-page="emulator"] .pc-user-card,
      body[data-page="emulator"] .pc-sidebar,
      body[data-page="emulator"] .pc-main-panel {
        border: 1px solid rgba(202, 217, 244, 0.94);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 24px 80px rgba(56, 83, 132, 0.1);
      }

      body[data-page="emulator"] .pc-logo-card {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        text-decoration: none;
        background: linear-gradient(145deg, rgba(240, 247, 255, 0.92), rgba(226, 238, 255, 0.76));
      }

      body[data-page="emulator"] .pc-logo-card img {
        width: 152px;
        height: auto;
      }

      body[data-page="emulator"] .pc-module-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 10px 14px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      body[data-page="emulator"] .pc-module-bar::-webkit-scrollbar {
        display: none;
      }

      body[data-page="emulator"] .pc-module-tab {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 14px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: #26334f;
        background: transparent;
        cursor: pointer;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 850;
        transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
      }

      body[data-page="emulator"] .pc-module-tab:hover {
        background: rgba(236, 244, 255, 0.86);
        transform: translateY(-1px);
      }

      body[data-page="emulator"] .pc-module-tab.is-active {
        color: #1467ff;
        border-color: rgba(20, 103, 255, 0.12);
        background: #e6f0ff;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
      }

      body[data-page="emulator"] .pc-module-icon {
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        font-size: 12px;
        line-height: 1;
      }

      body[data-page="emulator"] .pc-badge {
        display: inline-grid;
        place-items: center;
        min-width: 22px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        color: #fff;
        background: #ef445f;
        font-size: 10px;
        font-weight: 950;
      }

      body[data-page="emulator"] .pc-badge-blue {
        background: #2f74ff;
      }

      body[data-page="emulator"] .pc-user-card {
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: linear-gradient(145deg, rgba(246, 250, 255, 0.92), rgba(230, 239, 253, 0.72));
      }

      body[data-page="emulator"] .pc-icon-button,
      body[data-page="emulator"] .pc-round-button,
      body[data-page="emulator"] .pc-tool-button,
      body[data-page="emulator"] .pc-compose-icon,
      body[data-page="emulator"] .pc-compose-smile {
        display: inline-grid;
        place-items: center;
        border: 1px solid rgba(197, 213, 243, 0.78);
        color: #6f7f9c;
        background: rgba(255, 255, 255, 0.88);
        cursor: pointer;
      }

      body[data-page="emulator"] .pc-icon-button,
      body[data-page="emulator"] .pc-round-button,
      body[data-page="emulator"] .pc-tool-button {
        width: 36px;
        height: 36px;
        border-radius: 12px;
      }

      body[data-page="emulator"] .pc-user-avatar {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(145deg, #f3aa1d, #2c83ff);
        font-size: 16px;
        font-weight: 950;
      }

      body[data-page="emulator"] .pc-user-card strong {
        display: block;
        font-size: 13px;
        line-height: 1.05;
      }

      body[data-page="emulator"] .pc-user-card span:not(.pc-user-avatar) {
        display: block;
        margin-top: 4px;
        color: #7a8aa8;
        font-size: 9px;
        font-weight: 950;
        letter-spacing: 0.28em;
        text-transform: uppercase;
      }

      body[data-page="emulator"] .pc-workspace {
        display: grid;
        grid-template-columns: 292px minmax(0, 1fr);
        gap: 12px;
        min-height: 0;
      }

      body[data-page="emulator"] .pc-sidebar {
        display: grid;
        grid-template-rows: auto auto auto minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.7);
      }

      body[data-page="emulator"] .pc-sidebar-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: start;
      }

      body[data-page="emulator"] .pc-sidebar-head h1 {
        margin: 0;
        color: #26334f;
        font-size: 20px;
        line-height: 1.1;
      }

      body[data-page="emulator"] .pc-sidebar-head p {
        margin: 4px 0 0;
        color: #8b9abb;
        font-size: 11px;
        font-weight: 800;
      }

      body[data-page="emulator"] .pc-sidebar-actions {
        display: flex;
        gap: 7px;
      }

      body[data-page="emulator"] .pc-round-button {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: #2f74ff;
      }

      body[data-page="emulator"] .pc-search {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 42px;
        margin-top: 16px;
        padding: 0 12px;
        border: 1px solid rgba(206, 220, 245, 0.84);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.94);
      }

      body[data-page="emulator"] .pc-search span {
        color: #8aa0c5;
      }

      body[data-page="emulator"] .pc-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #26334f;
        font-size: 13px;
        font-weight: 750;
      }

      body[data-page="emulator"] .pc-filter-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
      }

      body[data-page="emulator"] .pc-filter-strip button {
        min-height: 36px;
        border: 1px solid rgba(206, 220, 245, 0.88);
        border-radius: 999px;
        color: #7385a6;
        background: rgba(244, 249, 255, 0.9);
        cursor: pointer;
        font-size: 12px;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-filter-strip button.is-active {
        color: #1467ff;
        background: #e3efff;
      }

      body[data-page="emulator"] .pc-chat-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        margin-top: 18px;
        overflow: auto;
      }

      body[data-page="emulator"] .pc-chat-item {
        position: relative;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        min-height: 72px;
        padding: 12px;
        border: 1px solid transparent;
        border-radius: 18px;
        color: #26334f;
        background: rgba(255, 255, 255, 0.7);
        cursor: pointer;
        text-align: left;
        box-shadow: none;
      }

      body[data-page="emulator"] .pc-chat-item.is-active,
      body[data-page="emulator"] .pc-chat-item:hover {
        border-color: rgba(99, 151, 255, 0.32);
        background: #e8f3ff;
        box-shadow: 0 16px 36px rgba(82, 126, 196, 0.14);
      }

      body[data-page="emulator"] .pc-chat-text {
        display: block;
        min-width: 0;
      }

      body[data-page="emulator"] .pc-chat-text strong,
      body[data-page="emulator"] .pc-chat-text small,
      body[data-page="emulator"] .pc-chat-text em {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body[data-page="emulator"] .pc-chat-text strong {
        font-size: 13px;
        font-weight: 950;
      }

      body[data-page="emulator"] .pc-chat-text small {
        margin-top: 4px;
        color: #5f718f;
        font-size: 11px;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-chat-text em,
      body[data-page="emulator"] .pc-chat-time {
        margin-top: 3px;
        color: #9aa8c1;
        font-size: 10px;
        font-style: normal;
        font-weight: 800;
      }

      body[data-page="emulator"] .pc-main-panel {
        display: grid;
        grid-template-rows: 66px minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.92);
      }

      body[data-page="emulator"] .pc-chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-width: 0;
        padding: 12px 18px 12px 20px;
        border-bottom: 1px solid rgba(208, 222, 247, 0.82);
        background: rgba(255, 255, 255, 0.92);
      }

      body[data-page="emulator"] .pc-chat-title {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      body[data-page="emulator"] .pc-chat-title h2 {
        margin: 0;
        color: #26334f;
        font-size: 17px;
        line-height: 1.12;
      }

      body[data-page="emulator"] .pc-chat-title p {
        margin: 4px 0 0;
        color: #7b8dac;
        font-size: 11px;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-chat-tools {
        display: flex;
        align-items: center;
        gap: 9px;
        flex: 0 0 auto;
      }

      body[data-page="emulator"] .pc-tool-button {
        color: #58729c;
        background: rgba(250, 253, 255, 0.92);
      }

      body[data-page="emulator"] .pc-tool-button.is-active {
        color: #1467ff;
        background: #e6f0ff;
      }

      body[data-page="emulator"] .pc-participants {
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(197, 213, 243, 0.84);
        border-radius: 14px;
        color: #65799c;
        background: rgba(250, 253, 255, 0.94);
        cursor: pointer;
        font-size: 12px;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-panel-content {
        min-width: 0;
        min-height: 0;
      }

      body[data-page="emulator"] .mode-panel {
        padding: 0;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      body[data-page="emulator"] .pc-chat-panel.is-active {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
      }

      body[data-page="emulator"] .pc-chat-scene {
        position: relative;
        min-height: 0;
        overflow: hidden;
        background: linear-gradient(180deg, #f6fbff 0%, #eff9ff 48%, #ddf8e8 100%);
      }

      body[data-page="emulator"] .pc-wallpaper,
      body[data-page="emulator"] .pc-wallpaper span {
        position: absolute;
        pointer-events: none;
      }

      body[data-page="emulator"] .pc-wallpaper {
        inset: 0;
        overflow: hidden;
      }

      body[data-page="emulator"] .pc-sun {
        top: 8%;
        right: 15%;
        width: 236px;
        height: 236px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255, 238, 179, 0.94), rgba(255, 204, 151, 0.72));
        opacity: 0.72;
      }

      body[data-page="emulator"] .pc-mountain {
        bottom: 24%;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        background: linear-gradient(135deg, rgba(123, 169, 248, 0.38), rgba(56, 122, 239, 0.28));
      }

      body[data-page="emulator"] .pc-mountain-one {
        left: 9%;
        width: 42%;
        height: 42%;
      }

      body[data-page="emulator"] .pc-mountain-two {
        left: 42%;
        width: 48%;
        height: 52%;
        background: linear-gradient(135deg, rgba(91, 144, 244, 0.5), rgba(46, 102, 219, 0.32));
      }

      body[data-page="emulator"] .pc-hill {
        left: -5%;
        right: -5%;
        border-radius: 50% 50% 0 0;
        background: rgba(122, 228, 170, 0.34);
      }

      body[data-page="emulator"] .pc-hill-one {
        bottom: 0;
        height: 28%;
      }

      body[data-page="emulator"] .pc-hill-two {
        bottom: -10%;
        height: 26%;
        background: rgba(88, 215, 151, 0.3);
      }

      body[data-page="emulator"] .pc-tree {
        bottom: 16%;
        width: 52px;
        height: 96px;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
        background: rgba(83, 134, 127, 0.25);
      }

      body[data-page="emulator"] .pc-tree-one {
        left: 14%;
      }

      body[data-page="emulator"] .pc-tree-two {
        right: 14%;
        bottom: 17%;
        transform: scale(1.24);
      }

      body[data-page="emulator"] .pc-message-stream {
        position: relative;
        z-index: 1;
        height: 100%;
        min-height: 0;
        padding: 34px 34px 26px;
        overflow: auto;
      }

      body[data-page="emulator"] .pc-message-stream .day-divider {
        opacity: 0.72;
      }

      body[data-page="emulator"] .pc-message-stream .message-row {
        width: 100%;
      }

      body[data-page="emulator"] .pc-message-stream .bubble {
        width: min(54vw, 530px);
        max-width: 72%;
        border-color: rgba(172, 205, 246, 0.78);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 10px 28px rgba(48, 91, 157, 0.08);
        font-size: 13px;
      }

      body[data-page="emulator"] .pc-message-stream .message-row.out .bubble {
        background: rgba(220, 237, 255, 0.94);
      }

      body[data-page="emulator"] .pc-composer {
        padding: 12px 18px 16px;
        border-top: 1px solid rgba(211, 225, 247, 0.82);
        background: rgba(255, 255, 255, 0.94);
      }

      body[data-page="emulator"] .pc-compose-shell {
        grid-template-columns: auto auto auto auto minmax(0, 1fr) auto auto;
        min-height: 58px;
        border-radius: 18px;
        padding: 7px;
        background: rgba(248, 253, 255, 0.98);
      }

      body[data-page="emulator"] .pc-compose-icon,
      body[data-page="emulator"] .pc-compose-smile {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      body[data-page="emulator"] .pc-compose-shell textarea {
        width: 100%;
        min-width: 0;
        max-height: 110px;
        resize: none;
        border: 0;
        outline: 0;
        color: #26334f;
        background: transparent;
        font: inherit;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.45;
      }

      body[data-page="emulator"] .pc-send-button {
        min-width: 132px;
        background: linear-gradient(135deg, #91b0ff, #6f91f5);
      }

      body[data-page="emulator"] .pc-module-panel.is-active {
        display: block;
        padding: 28px;
        overflow: auto;
        background:
          linear-gradient(180deg, rgba(247, 251, 255, 0.96), rgba(236, 245, 255, 0.96));
      }

      body[data-page="emulator"] .pc-module-header {
        max-width: 780px;
        margin-bottom: 22px;
      }

      body[data-page="emulator"] .pc-module-header span {
        display: inline-flex;
        min-height: 28px;
        align-items: center;
        padding: 0 10px;
        border-radius: 999px;
        color: #1467ff;
        background: #e7f0ff;
        font-size: 11px;
        font-weight: 950;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      body[data-page="emulator"] .pc-module-header h2 {
        margin: 14px 0 0;
        color: #21304f;
        font-size: clamp(28px, 3vw, 44px);
        line-height: 1.06;
      }

      body[data-page="emulator"] .pc-module-header p {
        max-width: 660px;
        margin: 12px 0 0;
        color: #6d7f9e;
        font-size: 15px;
        line-height: 1.55;
        font-weight: 700;
      }

      body[data-page="emulator"] .pc-grid-cards,
      body[data-page="emulator"] .pc-note-board,
      body[data-page="emulator"] .pc-file-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      body[data-page="emulator"] .pc-grid-cards article,
      body[data-page="emulator"] .pc-note-board article,
      body[data-page="emulator"] .pc-file-grid article,
      body[data-page="emulator"] .pc-call-list article {
        min-height: 132px;
        padding: 18px;
        border: 1px solid rgba(205, 220, 245, 0.9);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 18px 48px rgba(64, 93, 143, 0.08);
      }

      body[data-page="emulator"] .pc-grid-cards strong,
      body[data-page="emulator"] .pc-note-board strong,
      body[data-page="emulator"] .pc-file-grid strong {
        display: block;
        color: #26334f;
        font-size: 17px;
      }

      body[data-page="emulator"] .pc-grid-cards p,
      body[data-page="emulator"] .pc-note-board p {
        margin: 8px 0 0;
        color: #7283a2;
        line-height: 1.5;
        font-weight: 700;
      }

      body[data-page="emulator"] .pc-calls-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
        gap: 16px;
      }

      body[data-page="emulator"] .pc-live-call {
        display: grid;
        align-content: space-between;
        min-height: 420px;
        padding: 28px;
        border-radius: 24px;
        color: #fff;
        background:
          radial-gradient(circle at 75% 22%, rgba(83, 182, 255, 0.45), transparent 26%),
          linear-gradient(145deg, #14203c, #0c1428);
        box-shadow: 0 24px 70px rgba(18, 32, 61, 0.22);
      }

      body[data-page="emulator"] .pc-call-kind {
        color: #9fd3ff;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      body[data-page="emulator"] .pc-live-call h3 {
        margin: 10px 0 0;
        font-size: 34px;
      }

      body[data-page="emulator"] .pc-live-call p {
        margin: 8px 0 0;
        color: rgba(255, 255, 255, 0.68);
        font-weight: 750;
      }

      body[data-page="emulator"] .pc-call-avatar {
        place-self: center;
        display: grid;
        place-items: center;
        width: 132px;
        height: 132px;
        border-radius: 50%;
        background: linear-gradient(145deg, #35b9ff, #2567ff);
        font-size: 48px;
        font-weight: 950;
      }

      body[data-page="emulator"] .pc-call-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      body[data-page="emulator"] .pc-call-controls button {
        min-height: 42px;
        padding: 0 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        color: #fff;
        background: rgba(255, 255, 255, 0.12);
        cursor: pointer;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-call-controls .danger {
        background: #ee405f;
      }

      body[data-page="emulator"] .pc-call-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      body[data-page="emulator"] .pc-call-list article {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        min-height: 92px;
      }

      body[data-page="emulator"] .pc-call-list article span {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
      }

      body[data-page="emulator"] .pc-call-list article .ok {
        color: #0f9a68;
        background: #dff8ee;
      }

      body[data-page="emulator"] .pc-call-list article .missed {
        color: #d93c58;
        background: #ffe6eb;
      }

      body[data-page="emulator"] .pc-call-list strong,
      body[data-page="emulator"] .pc-call-list em {
        display: block;
        min-width: 0;
      }

      body[data-page="emulator"] .pc-call-list em,
      body[data-page="emulator"] .pc-file-grid em {
        margin-top: 5px;
        color: #7d8fab;
        font-style: normal;
        font-size: 12px;
        font-weight: 750;
      }

      body[data-page="emulator"] .pc-calendar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
      }

      body[data-page="emulator"] .pc-calendar-day {
        min-height: 260px;
        padding: 16px;
        border: 1px solid rgba(205, 220, 245, 0.9);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.84);
      }

      body[data-page="emulator"] .pc-calendar-day.is-today {
        border-color: rgba(20, 103, 255, 0.22);
        background: #eaf3ff;
      }

      body[data-page="emulator"] .pc-calendar-day strong,
      body[data-page="emulator"] .pc-calendar-day span,
      body[data-page="emulator"] .pc-calendar-day em {
        display: block;
      }

      body[data-page="emulator"] .pc-calendar-day span {
        margin-top: 10px;
        font-size: 34px;
        font-weight: 950;
      }

      body[data-page="emulator"] .pc-calendar-day em {
        margin-top: 26px;
        padding: 10px;
        border-radius: 12px;
        color: #315fa8;
        background: rgba(255, 255, 255, 0.78);
        font-style: normal;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-file-grid span {
        display: inline-grid;
        place-items: center;
        width: 50px;
        height: 50px;
        margin-bottom: 16px;
        border-radius: 16px;
        color: #1467ff;
        background: #e7f0ff;
        font-weight: 950;
      }

      body[data-page="emulator"] .pc-browser-card {
        overflow: hidden;
        border: 1px solid rgba(205, 220, 245, 0.9);
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 18px 48px rgba(64, 93, 143, 0.08);
      }

      body[data-page="emulator"] .pc-browser-address {
        padding: 14px 18px;
        border-bottom: 1px solid rgba(205, 220, 245, 0.72);
        color: #6e7f9d;
        background: #f6f9ff;
        font-size: 13px;
        font-weight: 850;
      }

      body[data-page="emulator"] .pc-browser-page {
        min-height: 300px;
        padding: 34px;
        background:
          radial-gradient(circle at 82% 20%, rgba(255, 208, 128, 0.38), transparent 24%),
          linear-gradient(135deg, #f7fbff, #eaf4ff);
      }

      body[data-page="emulator"] .pc-browser-page strong {
        display: block;
        color: #253354;
        font-size: 32px;
      }

      body[data-page="emulator"] .pc-browser-page p {
        max-width: 520px;
        margin: 12px 0 0;
        color: #6f809f;
        font-size: 15px;
        line-height: 1.55;
        font-weight: 750;
      }

      @media (max-width: 1280px) {
        body[data-page="emulator"] .pc-emulator-page {
          padding: 14px;
        }

        body[data-page="emulator"] .pc-window {
          height: calc(100dvh - 28px);
          min-height: 720px;
        }

        body[data-page="emulator"] .pc-app-top {
          grid-template-columns: 220px minmax(0, 1fr) 220px;
        }

        body[data-page="emulator"] .pc-workspace {
          grid-template-columns: 270px minmax(0, 1fr);
        }
      }

      @media (max-width: 980px) {
        body[data-page="emulator"] .pc-window {
          grid-template-rows: auto minmax(0, 1fr);
          height: auto;
          min-height: 100dvh;
        }

        body[data-page="emulator"] .pc-app-top,
        body[data-page="emulator"] .pc-workspace {
          grid-template-columns: 1fr;
        }

        body[data-page="emulator"] .pc-logo-card {
          min-height: 62px;
        }

        body[data-page="emulator"] .pc-user-card {
          display: none;
        }

        body[data-page="emulator"] .pc-sidebar {
          max-height: none;
        }

        body[data-page="emulator"] .pc-main-panel {
          min-height: 760px;
        }

        body[data-page="emulator"] .pc-calls-layout,
        body[data-page="emulator"] .pc-grid-cards,
        body[data-page="emulator"] .pc-note-board,
        body[data-page="emulator"] .pc-file-grid,
        body[data-page="emulator"] .pc-calendar {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 620px) {
        body[data-page="emulator"] .pc-emulator-page {
          padding: 8px;
        }

        body[data-page="emulator"] .pc-module-tab {
          min-height: 38px;
          padding: 0 11px;
          font-size: 12px;
        }

        body[data-page="emulator"] .pc-sidebar {
          padding: 12px;
        }

        body[data-page="emulator"] .pc-sidebar-head {
          grid-template-columns: 1fr;
        }

        body[data-page="emulator"] .pc-chat-header {
          align-items: flex-start;
          flex-direction: column;
        }

        body[data-page="emulator"] .pc-chat-tools {
          width: 100%;
          overflow-x: auto;
        }

        body[data-page="emulator"] .pc-message-stream {
          padding: 22px 12px;
        }

        body[data-page="emulator"] .pc-message-stream .bubble {
          width: auto;
          max-width: calc(100% - 46px);
        }

        body[data-page="emulator"] .pc-compose-shell {
          grid-template-columns: auto auto auto auto;
        }

        body[data-page="emulator"] .pc-compose-shell textarea {
          grid-column: 1 / -1;
          min-height: 48px;
          padding: 8px;
        }

        body[data-page="emulator"] .pc-compose-smile {
          grid-column: 1;
        }

        body[data-page="emulator"] .pc-send-button {
          grid-column: 2 / -1;
          width: 100%;
        }
      }

      /* Product-site demo request */
      .home-demo-request {
        position: relative;
        padding: 92px 0 32px;
      }

      .demo-request-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
        gap: 28px;
        align-items: stretch;
      }

      .demo-request-copy,
      .demo-request-form {
        border: 1px solid rgba(189, 207, 237, 0.86);
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 28px 90px rgba(64, 89, 138, 0.1);
        backdrop-filter: blur(18px);
      }

      .demo-request-copy {
        padding: clamp(28px, 4vw, 48px);
      }

      .demo-request-copy h2 {
        max-width: 620px;
        margin: 12px 0 16px;
        color: #12213a;
        font-size: clamp(34px, 4.2vw, 62px);
        line-height: 0.98;
      }

      .demo-request-copy p {
        max-width: 640px;
        color: #52627a;
        font-size: 18px;
        line-height: 1.62;
      }

      .demo-request-points {
        display: grid;
        gap: 12px;
        margin: 26px 0 0;
        padding: 0;
        list-style: none;
      }

      .demo-request-points li {
        position: relative;
        padding-left: 28px;
        color: #243653;
        font-weight: 700;
        line-height: 1.45;
      }

      .demo-request-points li:before {
        position: absolute;
        left: 0;
        top: 0.4em;
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: linear-gradient(135deg, #2f7dff, #8aa9ff);
        box-shadow: 0 0 0 5px rgba(47, 125, 255, 0.12);
        content: "";
      }

      .demo-request-form {
        display: grid;
        gap: 18px;
        padding: clamp(22px, 3vw, 34px);
      }

      .demo-request-form label {
        display: grid;
        gap: 8px;
        min-width: 0;
        color: #23324a;
        font-weight: 800;
      }

      .demo-request-form label span {
        font-size: 13px;
        letter-spacing: 0;
      }

      .demo-request-form input,
      .demo-request-form select,
      .demo-request-form textarea {
        width: 100%;
        border: 1px solid rgba(191, 206, 230, 0.95);
        border-radius: 16px;
        background: rgba(247, 251, 255, 0.88);
        color: #16243a;
        font: inherit;
        font-weight: 700;
        outline: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
        transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
      }

      .demo-request-form input,
      .demo-request-form select {
        min-height: 52px;
        padding: 0 16px;
      }

      .demo-request-form textarea {
        min-height: 126px;
        padding: 15px 16px;
        resize: vertical;
      }

      .demo-request-form input:focus,
      .demo-request-form select:focus,
      .demo-request-form textarea:focus {
        border-color: rgba(47, 125, 255, 0.76);
        background: #fff;
        box-shadow: 0 0 0 5px rgba(47, 125, 255, 0.12);
      }

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

      .demo-request-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .demo-request-footer p {
        margin: 0;
        color: #687993;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.45;
      }

      .demo-request-footer p[data-tone="success"] {
        color: #0c8a58;
      }

      .demo-request-footer p[data-tone="error"] {
        color: #c0394e;
      }

      .demo-request-form .button[disabled] {
        cursor: wait;
        opacity: 0.68;
      }

      /* Security trust sections */
      .security-model-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .security-model-grid article,
      .security-boundary-card {
        border: 1px solid rgba(190, 206, 234, 0.88);
        border-radius: 24px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.72));
        box-shadow: 0 24px 70px rgba(57, 82, 130, 0.08);
      }

      .security-model-grid article {
        padding: 26px;
      }

      .security-model-grid span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: #e6f0ff;
        color: #2f7dff;
        font-weight: 900;
      }

      .security-model-grid h3 {
        margin: 18px 0 10px;
        color: #15243d;
        font-size: 21px;
      }

      .security-model-grid p,
      .security-boundary-card p,
      .security-checklist-layout p {
        color: #52627a;
        line-height: 1.62;
      }

      .security-checklist-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
        gap: 28px;
        align-items: start;
      }

      .security-checklist-layout h2 {
        margin: 12px 0 14px;
        color: #14233c;
        font-size: clamp(30px, 3.6vw, 54px);
        line-height: 1.02;
      }

      .security-checklist {
        display: grid;
        gap: 12px;
        padding: 20px;
        border: 1px solid rgba(190, 206, 234, 0.86);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.78);
      }

      .security-checklist label {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(239, 246, 255, 0.7);
        color: #22334f;
        font-weight: 800;
      }

      .security-checklist input {
        width: 18px;
        height: 18px;
        accent-color: #2f7dff;
      }

      .security-boundary {
        padding: 8px 0 36px;
      }

      .security-boundary-card {
        display: grid;
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
        gap: 28px;
        align-items: center;
        padding: clamp(24px, 4vw, 42px);
      }

      .security-boundary-card h2 {
        margin: 10px 0 0;
        color: #14233c;
        font-size: clamp(28px, 3.1vw, 44px);
        line-height: 1.04;
      }

      /* Interactive PC emulator tour */
      body[data-page="emulator"] .pc-window {
        position: relative;
      }

      body[data-page="emulator"] .pc-tour-start {
        min-height: 34px;
        border: 0;
        border-radius: 999px;
        padding: 0 14px;
        background: #eaf2ff;
        color: #2368e8;
        font-weight: 900;
        cursor: pointer;
      }

      body[data-page="emulator"] [data-tour-key] {
        position: relative;
        transition: box-shadow 180ms ease, outline-color 180ms ease, transform 180ms ease;
      }

      body[data-page="emulator"] .is-tour-focus {
        z-index: 4;
        outline: 3px solid rgba(47, 125, 255, 0.52);
        outline-offset: 5px;
        box-shadow: 0 0 0 10px rgba(47, 125, 255, 0.08), 0 24px 80px rgba(42, 85, 155, 0.2);
      }

      body[data-page="emulator"] .pc-tour-card {
        position: absolute;
        right: 28px;
        bottom: 28px;
        z-index: 10;
        width: min(420px, calc(100% - 56px));
        border: 1px solid rgba(168, 190, 227, 0.9);
        border-radius: 22px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.93);
        box-shadow: 0 30px 90px rgba(45, 72, 123, 0.22);
        backdrop-filter: blur(18px);
      }

      body[data-page="emulator"] .pc-tour-card[hidden] {
        display: none;
      }

      body[data-page="emulator"] .pc-tour-step {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 26px;
        border-radius: 999px;
        padding: 0 10px;
        background: #eaf2ff;
        color: #2368e8;
        font-size: 12px;
        font-weight: 900;
      }

      body[data-page="emulator"] .pc-tour-card h2 {
        margin: 12px 0 8px;
        color: #172640;
        font-size: 24px;
        line-height: 1.1;
      }

      body[data-page="emulator"] .pc-tour-card p {
        margin: 0;
        color: #52627a;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5;
      }

      body[data-page="emulator"] .pc-tour-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 18px;
      }

      body[data-page="emulator"] .pc-tour-actions button {
        min-height: 40px;
        border: 1px solid rgba(189, 207, 237, 0.94);
        border-radius: 999px;
        padding: 0 14px;
        background: #fff;
        color: #26374f;
        font-weight: 900;
        cursor: pointer;
      }

      body[data-page="emulator"] .pc-tour-actions button:nth-child(2) {
        border-color: transparent;
        background: linear-gradient(135deg, #2f7dff, #8aa9ff);
        color: #fff;
      }

      @media (max-width: 980px) {
        .demo-request-layout,
        .security-checklist-layout,
        .security-boundary-card {
          grid-template-columns: 1fr;
        }

        .demo-request-layout {
          gap: 18px;
        }

        .security-model-grid {
          grid-template-columns: 1fr;
        }

        body[data-page="emulator"] .pc-tour-card {
          left: 16px;
          right: 16px;
          bottom: 16px;
          width: auto;
        }
      }

      @media (max-width: 620px) {
        .home-demo-request {
          padding-top: 56px;
        }

        .form-grid,
        .demo-request-footer {
          grid-template-columns: 1fr;
          flex-direction: column;
          align-items: stretch;
        }

        .demo-request-footer .button {
          width: 100%;
        }
      }