/* ═════════════════════════════════════════════════════════════════
   SeaFly Index 5.0 — on top of index3.css + index4.css (body.x5-ui · prefix x5-).
   Dark forwarding hero with photo slider (img/hero/), white composer pill, handwritten note, glass chips, trust row,
   Gemini-like phone start (key-fact cards, composer at the bottom). Sections: cool navy palette, light by day, dark at night.
   Fonts: Inter (index3.css) + Caveat 600 for the handwritten note (SIL Open Font License, assets/fonts/caveat-600.woff2).
═════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700 800; font-display: swap; src: url('../fonts/inter-bold.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-display: swap; src: url('../fonts/caveat-600.woff2') format('woff2'); }

body.x5-ui {
    --x5-bg: #ffffff; --x5-alt: #f3f6fb; --x5-card: #ffffff; --x5-line: #e3e8f2;
    --x5-ink: #0a1a3a; --x5-t2: #4a5878; --x5-t3: #7b87a3;
    --x5-acc: #1f6bff; --x5-acc2: #4fa3ff; --x5-navy: #061024; --x5-tint: rgba(31,107,255,.09);
    --x5-shadow: 0 24px 70px rgba(10,26,58,.10);
    /* shared tokens (chat, hub, video) follow the Index 5 palette */
    --bg-deep: var(--x5-bg); --bg-card: var(--x5-card); --bg-surface: var(--x5-alt); --x3-side: var(--x5-alt);
    --border: var(--x5-line); --border-lit: #d5dcea; --accent: var(--x5-acc); --accent-soft: var(--x5-acc);
    --text-1: var(--x5-ink); --text-2: var(--x5-t2); --text-3: var(--x5-t3);
    --header-bg: rgba(255,255,255,.9);
    background: var(--x5-bg);
}
html[data-theme="dark"] body.x5-ui {
    --x5-bg: #070d1c; --x5-alt: #0a1428; --x5-card: #0e1830; --x5-line: #1b2744;
    --x5-ink: #eef3ff; --x5-t2: #a6b3d0; --x5-t3: #6f7e9f;
    --x5-acc: #4a86ff; --x5-acc2: #7cc4ff; --x5-tint: rgba(74,134,255,.12);
    --x5-shadow: 0 24px 70px rgba(0,0,0,.45);
    --bg-deep: var(--x5-bg); --bg-card: var(--x5-card); --bg-surface: var(--x5-alt); --x3-side: var(--x5-alt);
    --border: var(--x5-line); --border-lit: #263456; --accent: var(--x5-acc); --accent-soft: var(--x5-acc2);
    --text-1: var(--x5-ink); --text-2: var(--x5-t2); --text-3: var(--x5-t3);
    --header-bg: rgba(7,13,28,.9);
}

/* ── header: transparent over the dark hero, solid after scrolling (.x5-solid, set in index5.php) ── */
body.x5-ui header { margin-bottom: -64px; transition: background .3s, border-color .3s, backdrop-filter .3s; }
body.x5-ui:not(.x5-solid) header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.x5-ui:not(.x5-solid) header .nav-link { color: rgba(255,255,255,.82); }
body.x5-ui:not(.x5-solid) header .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
body.x5-ui:not(.x5-solid) header .lang-btn { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.24); }
body.x5-ui:not(.x5-solid) header .theme-toggle { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
body.x5-ui:not(.x5-solid) header .btn-login { color: var(--x5-navy); background: #fff; border-color: #fff; }
body.x5-ui:not(.x5-solid) header .burger-line { background: #fff; }
body.x5-ui:not(.x5-solid) header .burger-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); box-shadow: none; }
body.x5-ui:not(.x5-solid) header .lang-dropdown .lang-option { color: var(--text-2); }

/* ── hero frame + photo slider ── */
body.x5-ui .hero { position: relative; overflow: hidden; min-height: min(100svh, 940px); padding: 132px 24px 150px; background: var(--x5-navy); color: #fff; justify-content: center; }
.x5-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.x5-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease, transform 8s ease-out; }
.x5-slide.on { opacity: 1; transform: scale(1); }
.x5-tint { position: absolute; inset: 0; background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(6,16,36,.35), rgba(6,16,36,.7) 70%),
    linear-gradient(180deg, rgba(4,11,28,.78) 0%, rgba(4,11,28,.45) 38%, rgba(4,11,28,.62) 72%, rgba(4,11,28,.92) 100%); }
.x5-dots { position: absolute; z-index: 2; right: 40px; bottom: 92px; display: flex; gap: 6px; }
.x5-dots span { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); transition: width .4s, background .4s; }
.x5-dots span.on { width: 22px; background: #fff; }
.x5-curve { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; width: 100%; height: 76px; fill: var(--x5-bg); }
body.x5-ui .hero-content { position: relative; z-index: 2; max-width: 980px; display: flex; flex-direction: column; align-items: center; text-align: center; }

/* order on screen: badge · H1 · lead · (facts) · note · chat field · chips · trust · scroll cue */
.x5-badge { order: 1; }
.x5-title { order: 2; }
.x5-lead { order: 3; }
.x5-facts { order: 4; }
.x5-annot { order: 5; }
body.x5-ui .hero-content > .chat-wrap { order: 6; }
body.x5-ui .hero-content > .chat-backdrop { order: 7; }
.x5-chips { order: 8; }
.x5-trust { order: 9; }
.x5-more { order: 10; }

.x5-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 26px; border-radius: 999px; font-size: .86rem; font-weight: 600; letter-spacing: .01em;
    color: #e3ecff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.x5-badge svg { color: #8fbcff; }
h1.x5-title { margin: 0 0 22px; font-weight: 800; font-size: clamp(2.5rem, 6.2vw, 4.75rem); line-height: 1.02; letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.x5-title span { display: block; }
.x5-title .x5-l2 { background: linear-gradient(92deg, #4d8dff 0%, #6fb6ff 55%, #9ad8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.x5-lead { max-width: 660px; margin: 0 auto 36px; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.6; color: rgba(226,234,255,.84); text-wrap: pretty; }
.x5-facts { display: none; }

/* handwritten note next to the field (wide screens only) */
.x5-annot { position: relative; width: 100%; max-width: 760px; height: 0; pointer-events: none; }
.x5-annot span { position: absolute; right: -262px; top: -58px; width: 250px; font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600; font-size: 1.62rem; line-height: 1.05; color: #a9cbff; transform: rotate(-5deg); text-align: left; }
.x5-annot svg { position: absolute; right: -118px; top: 8px; width: 104px; height: 74px; color: #a9cbff; }
@media (max-width: 1300px) { .x5-annot { display: none; } }

/* composer: the real chat field as a big white pill (popped chat keeps its normal look) */
body.x5-ui .hero-content > .chat-wrap { width: 100%; max-width: 760px; }
body.x5-ui #chatInterface:not(.chat-popped) { background: #fff; border: 0; border-radius: 999px; box-shadow: 0 24px 70px rgba(0,0,0,.38), 0 0 0 6px rgba(255,255,255,.08); }
body.x5-ui #chatInterface:not(.chat-popped) .chat-input-area { padding: 8px 8px 8px 16px; background: transparent; border: 0; }
body.x5-ui #chatInterface:not(.chat-popped) .input-row { position: relative; padding-left: 34px; }
body.x5-ui #chatInterface:not(.chat-popped) .input-row::before { content: ''; position: absolute; left: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background: linear-gradient(135deg, #1f6bff, #5ab0ff);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 4Q9.5 12 17.5 12Q9.5 12 9.5 20Q9.5 12 1.5 12Q9.5 12 9.5 4Z'/%3E%3Cpath d='M19 2.5Q19 5.5 22 5.5Q19 5.5 19 8.5Q19 5.5 16 5.5Q19 5.5 19 2.5Z'/%3E%3Cpath d='M19 15.5Q19 18.5 22 18.5Q19 18.5 19 21.5Q19 18.5 16 18.5Q19 18.5 19 15.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 4Q9.5 12 17.5 12Q9.5 12 9.5 20Q9.5 12 1.5 12Q9.5 12 9.5 4Z'/%3E%3Cpath d='M19 2.5Q19 5.5 22 5.5Q19 5.5 19 8.5Q19 5.5 16 5.5Q19 5.5 19 2.5Z'/%3E%3Cpath d='M19 15.5Q19 18.5 22 18.5Q19 18.5 19 21.5Q19 18.5 16 18.5Q19 18.5 19 15.5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
body.x5-ui #chatInterface:not(.chat-popped) #messageInput { min-height: 56px; padding: 16px 10px; font-size: 17px; color: #0a1a3a; }
body.x5-ui #chatInterface:not(.chat-popped) #messageInput::placeholder { color: #6b7894; opacity: 1; }
body.x5-ui #chatInterface:not(.chat-popped) #sendBtn { width: 54px; height: 54px; background: linear-gradient(135deg, #1f6bff, #3f8cff) !important; box-shadow: 0 8px 22px rgba(31,107,255,.45); }
body.x5-ui #chatInterface:not(.chat-popped) #sendBtn svg { stroke: #fff; }

/* topic chips (glass) */
.x5-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 980px; margin: 26px auto 0; }
.x5-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px 10px 14px; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s, border-color .2s, transform .2s; }
.x5-chip svg { color: #8fbcff; flex-shrink: 0; }
.x5-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); transform: translateY(-1px); }
.x5-chip:focus-visible { outline: 3px solid #8fbcff; outline-offset: 2px; }

/* trust row */
.x5-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 34px 0 0; padding: 0; }
.x5-trust li { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 500; color: rgba(226,234,255,.9); }
.x5-trust svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(79,141,255,.18); color: #9cc6ff; flex-shrink: 0; }

/* scroll cue */
.x5-more { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 44px; font-size: .84rem; font-weight: 600; letter-spacing: .02em; color: rgba(226,234,255,.75); text-decoration: none; }
.x5-more:hover { color: #fff; }
.x5-more svg { animation: x5-bob 1.8s ease-in-out infinite; }
.x5-more-m { display: none; }
@keyframes x5-bob { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(6px); opacity: 1; } }

/* ── phone: Gemini-like start — greeting, key-fact cards, the field at the bottom, swipeable chips, animated arrow ── */
@media (max-width: 640px) {
    body.x5-home .hero { min-height: 100svh; padding: 84px 16px 64px; justify-content: stretch; }
    body.x5-home .hero-content { flex: 1; align-items: stretch; text-align: left; }
    .x5-dots { display: none; }
    .x5-curve { height: 34px; }
    .x5-badge { align-self: flex-start; margin-bottom: 18px; font-size: .8rem; padding: 7px 13px; }
    h1.x5-title { font-size: clamp(2.3rem, 10.6vw, 2.9rem); margin-bottom: 12px; }
    .x5-lead { display: none; }   /* phone: the key-fact cards say it shorter */
    .x5-facts { display: flex; gap: 10px; list-style: none; margin: 18px -16px 0; padding: 4px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .x5-facts::-webkit-scrollbar { display: none; }
    .x5-facts li { flex: 0 0 47%; max-width: 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 14px; border-radius: 18px;
        background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: x5-in .6s both; animation-delay: calc(var(--n, 0) * 80ms); }
    .x5-facts li:nth-child(2) { --n: 1; } .x5-facts li:nth-child(3) { --n: 2; } .x5-facts li:nth-child(4) { --n: 3; } .x5-facts li:nth-child(5) { --n: 4; }
    .x5-fi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px; background: rgba(79,141,255,.22); color: #a9cbff; }
    .x5-facts strong { font-size: .9rem; line-height: 1.25; font-weight: 700; color: #fff; }
    .x5-facts small { font-size: .78rem; line-height: 1.4; color: rgba(226,234,255,.75); }
    body.x5-home .hero-content > .chat-wrap { margin-top: auto; padding-top: 22px; }
    body.x5-ui #chatInterface:not(.chat-popped) .chat-input-area { padding: 6px 6px 6px 12px; }
    body.x5-ui #chatInterface:not(.chat-popped) #messageInput { min-height: 48px; padding: 13px 8px; font-size: 16px; }
    body.x5-ui #chatInterface:not(.chat-popped) #sendBtn { width: 46px; height: 46px; }
    .x5-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 14px -16px 0; padding: 2px 16px 4px; scroll-padding: 0 16px; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
    .x5-chips::-webkit-scrollbar { display: none; }
    .x5-chip { font-size: .86rem; min-height: 40px; padding: 8px 14px 8px 12px; }
    .x5-trust { display: none; }
    .x5-more { align-self: center; margin-top: 18px; }
    .x5-more-d { display: none; } .x5-more-m { display: inline; }
}
@keyframes x5-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .x5-slide { transition: opacity .3s; transform: none !important; } .x5-more svg, .x5-facts li { animation: none; } }

/* ═══ sections ═══ */
main.x5 { background: var(--x5-bg); color: var(--x5-ink); }
.x5-sec { padding: 104px 24px; background: var(--x5-bg); }
.x5-sec.x5-alt { background: var(--x5-alt); }
.x5-wrap { max-width: 1200px; margin: 0 auto; }
.x5-narrow { max-width: 860px; }
.x5-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.x5-head { max-width: 800px; margin: 0 auto 52px; text-align: center; }
.x5-head-row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: left; }
.x5-head-row h2 { margin-bottom: 0; }
.x5 .x5-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--x5-acc); }
.x5 .x5-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.x5 h2 { margin: 0 0 18px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--x5-ink); text-wrap: balance; }
.x5 p { color: var(--x5-t2); font-size: 1.04rem; line-height: 1.7; }
.x5 .x5-intro { font-size: 1.1rem; }
.x5 .x5-em { color: var(--x5-ink); font-weight: 700; }

.x5-checks { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 12px; }
.x5-checks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--x5-ink); }
.x5-checks svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--x5-tint); color: var(--x5-acc); flex-shrink: 0; stroke-width: 2.6; }
.x5-checks-2 { grid-template-columns: 1fr 1fr; }

.x5-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; text-decoration: none;
    color: #fff; background: linear-gradient(135deg, #1f6bff, #3f8cff); box-shadow: 0 12px 30px rgba(31,107,255,.3); transition: transform .2s, box-shadow .2s; }
.x5-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(31,107,255,.38); }
.x5-btn-ghost { color: var(--x5-ink); background: transparent; border: 1px solid var(--x5-line); box-shadow: none; }
.x5-btn-ghost:hover { border-color: var(--x5-acc); color: var(--x5-acc); box-shadow: none; }
.x5-btn-light { color: var(--x5-navy); background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); }

/* chat card (example) */
.x5-mock { margin: 0; border-radius: 26px; background: var(--x5-card); border: 1px solid var(--x5-line); box-shadow: var(--x5-shadow); overflow: hidden; }
.x5-mock-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--x5-line); }
.x5-mock-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f6bff, #5ab0ff); }
.x5-mock-top .x4-b { display: block; font-size: .95rem; color: var(--x5-ink); }
.x5-mock-top small { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--x5-t3); }
.x5-mock-top small i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.x5-mock-top em { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 600; color: var(--x5-t3); border: 1px solid var(--x5-line); padding: 3px 10px; border-radius: 999px; }
.x5-mock-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; }
.x5-msg { max-width: 86%; padding: 12px 16px; font-size: .92rem; line-height: 1.5; }
.x5-msg.me { align-self: flex-end; color: #fff; background: linear-gradient(135deg, #1f6bff, #3f8cff); border-radius: 18px 18px 6px 18px; }
.x5-msg.ai { align-self: flex-start; color: var(--x5-ink); background: var(--x5-alt); border-radius: 18px 18px 18px 6px; }
.x5-mock-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.x5-mock-opts span { font-size: .8rem; font-weight: 600; color: var(--x5-acc); border: 1px solid var(--x5-acc); border-radius: 999px; padding: 4px 11px; background: var(--x5-card); }
.x5-mock-in { display: flex; align-items: center; justify-content: space-between; margin: 0 20px 20px; padding: 6px 6px 6px 18px; border: 1px solid var(--x5-line); border-radius: 999px; font-size: .9rem; color: var(--x5-t3); }
.x5-send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #1f6bff, #3f8cff); flex-shrink: 0; }

/* film */
.x5 .x4-film .x4-video { max-width: 1100px; margin: 0 auto; }
.x5 .x4-vbox video { border-radius: 28px; box-shadow: 0 30px 80px rgba(10,26,58,.22); border: 0; }
.x5 .x4-play { border-radius: 28px; }

/* network hub */
.x5-hub { max-width: 520px; }
.x5-hub .x4-hub-core { box-shadow: 0 20px 60px rgba(31,107,255,.22), 0 0 0 10px var(--x5-tint); }
.x5-hub .x4-node span { width: 56px; height: 56px; border-radius: 18px; color: var(--x5-acc); background: var(--x5-card); box-shadow: 0 10px 26px rgba(10,26,58,.10); }
.x5-hub .x4-node { color: var(--x5-ink); font-size: .86rem; }

/* process: 6 steps with dotted connectors + info bar */
.x5-proc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; position: relative; }
.x5-proc::before { content: ''; position: absolute; left: 8%; right: 8%; top: 35px; border-top: 2px dashed color-mix(in srgb, var(--x5-acc) 40%, transparent); }
.x5-proc li { position: relative; text-align: center; }
.x5-pi { position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; color: var(--x5-acc); background: var(--x5-card); border: 1px solid var(--x5-line); box-shadow: 0 12px 30px rgba(10,26,58,.08);
    transition: transform .5s, opacity .5s; transition-delay: calc(var(--d) * 110ms); }
.x5-pi em { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .74rem; font-weight: 700; color: #fff; background: var(--x5-acc); border: 2px solid var(--x5-alt); }
.x5-proc h3 { margin: 0 0 6px; font-size: 1.04rem; font-weight: 700; color: var(--x5-ink); }
.x5-proc p { margin: 0; font-size: .88rem; line-height: 1.5; }
.x5-proc.x4-reveal:not(.x4-in) .x5-pi { opacity: 0; transform: scale(.7); }
.x5 .x5-bar { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 760px; margin: 52px auto 0; padding: 14px 22px; border-radius: 999px; background: var(--x5-tint); color: var(--x5-acc); font-weight: 700; font-size: .96rem; text-align: center; }
.x5-bar-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--x5-acc); flex-shrink: 0; }

/* inspiration cards */
.x5-ins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.x5-card { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: pointer; font: inherit; text-align: left; background: #0b1630; box-shadow: var(--x5-shadow); }
.x5-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.x5-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,11,28,0) 28%, rgba(4,11,28,.55) 55%, rgba(4,11,28,.94) 100%); }
.x5-card:hover img { transform: scale(1.07); }
.x5-card:focus-visible { outline: 3px solid var(--x5-acc); outline-offset: 3px; }
.x5-card-tx { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 22px; color: #fff; }
.x5-card-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.x5-card-tx .x4-b { font-size: 1.2rem; letter-spacing: -.02em; }
.x5-card-tx small { font-size: .86rem; line-height: 1.45; color: rgba(226,234,255,.82); }
.x5-card-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .84rem; font-weight: 700; color: #9cc6ff; transition: gap .2s; }
.x5-card:hover .x5-card-go { gap: 10px; color: #fff; }
.x5-all { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.x5-all[hidden] { display: none; }
.x5-all a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--x5-line); background: var(--x5-card); color: var(--x5-ink); font-weight: 600; font-size: .94rem; text-decoration: none; transition: border-color .2s, color .2s; }
.x5-all a svg:first-child { color: var(--x5-acc); }
.x5-all a svg:last-child { margin-left: auto; color: var(--x5-t3); }
.x5-all a:hover { border-color: var(--x5-acc); color: var(--x5-acc); }

/* partner */
.x5-partner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.x5-pcard { position: relative; overflow: hidden; padding: 44px 40px; border-radius: 30px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #1b4dc4 0%, #0a1d44 45%, #061024 100%); box-shadow: 0 30px 80px rgba(6,16,36,.35); }
.x5-pcard::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); box-shadow: 0 0 0 40px rgba(255,255,255,.03), 0 0 0 80px rgba(255,255,255,.02); }
.x5-pcard-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
.x5-pcard h3 { margin: 0 0 10px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.x5 .x5-pcard p { color: rgba(226,234,255,.8); margin: 0 0 28px; }

/* FAQ */
.x5-faq { border-bottom: 1px solid var(--x5-line); }
.x5-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; }
.x5-faq summary::-webkit-details-marker { display: none; }
.x5-faq summary h3 { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--x5-ink); }
.x5-faq summary svg { flex-shrink: 0; color: var(--x5-acc); transition: transform .3s; }
.x5-faq[open] summary svg { transform: rotate(180deg); }
.x5 .x5-faq p { margin: -6px 0 22px; }

/* final CTA */
.x5-cta { position: relative; overflow: hidden; padding: 112px 24px; text-align: center; color: #fff; background: var(--x5-navy); }
.x5-cta::before { content: ''; position: absolute; inset: 0; background: url('../../img/hero/hero-1.webp') center / cover no-repeat; opacity: .28; }
.x5-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,36,.7), rgba(6,16,36,.92)); }
.x5-cta .x5-wrap { position: relative; z-index: 1; }
.x5 .x5-cta h2 { color: #fff; }
.x5 .x5-cta p { color: rgba(226,234,255,.82); margin: 0 auto 32px; max-width: 620px; }
.x5-fake { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 700px; margin: 0 auto; padding: 8px 8px 8px 22px; border: 0; border-radius: 999px; cursor: text; font: inherit; font-size: 1.02rem; color: #6b7894; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.35); text-align: left; }
.x5-fake > svg { color: #1f6bff; flex-shrink: 0; }
.x5-fake > span:not(.x5-send) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x5-fake .x5-send { width: 50px; height: 50px; }
.x5-cta small { display: block; margin-top: 16px; font-size: .86rem; color: rgba(226,234,255,.7); }

/* ── tablet / phone ── */
@media (max-width: 1000px) {
    .x5-two, .x5-partner { grid-template-columns: 1fr; gap: 48px; }
    .x5-proc { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
    .x5-proc::before { display: none; }
    .x5-ins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .x5-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .x5-sec { padding: 72px 16px; }
    .x5-head { margin-bottom: 36px; text-align: left; }
    .x5-head-row { flex-direction: column; align-items: flex-start; }
    .x5 h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
    .x5-checks-2 { grid-template-columns: 1fr; }
    .x5-proc { grid-template-columns: 1fr; gap: 0; }
    .x5-proc::before { display: block; left: 35px; right: auto; top: 36px; bottom: 36px; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--x5-acc) 40%, transparent); }
    .x5-proc li { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; text-align: left; padding-bottom: 22px; }
    .x5-pi { grid-row: span 2; margin: 0; }
    .x5-proc h3 { align-self: end; margin-top: 12px; }
    .x5 .x5-bar { border-radius: 18px; text-align: left; justify-content: flex-start; }
    .x5-ins { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; scrollbar-width: none; }
    .x5-ins::-webkit-scrollbar { display: none; }
    .x5-ins li { flex: 0 0 76%; scroll-snap-align: start; }
    .x5-all { grid-template-columns: 1fr; }
    .x5-pcard { padding: 32px 26px; }
    .x5-cta { padding: 80px 16px; }
    .x5-fake { font-size: .94rem; padding-left: 16px; }
    .x5-fake .x5-send { width: 44px; height: 44px; }
}

/* ═══ footer (Index 5): faded ship · plane · truck photo, four advantages, legal links + language in the bottom bar ═══ */
body.x5-ui footer.sf-foot { position: relative; overflow: hidden; --foot-bg: #f3f6fb; --foot-line: #e1e7f1; --foot-t1: #0a1a3a; --foot-t2: #4a5878; --foot-t3: #7b87a3; }
html[data-theme="dark"] body.x5-ui footer.sf-foot { --foot-bg: #050b18; --foot-line: #17213a; --foot-t1: #eef3ff; --foot-t2: #a6b3d0; --foot-t3: #6f7e9f; }
body.x5-ui footer.sf-foot::before { content: ''; position: absolute; inset: auto 0 0 0; height: 70%; background: url('../../img/hero/hero-2.webp') center 70% / cover no-repeat; opacity: .1; filter: grayscale(1);
    -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 100%); mask-image: linear-gradient(0deg, #000 10%, transparent 100%); pointer-events: none; }
html[data-theme="dark"] body.x5-ui footer.sf-foot::before { opacity: .14; }
body.x5-ui footer.sf-foot > * { position: relative; z-index: 1; }
body.x5-ui .foot-brand .foot-social { align-self: start; grid-row: 1 / span 4; }
.foot-feat { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.foot-feat li { display: flex; align-items: flex-start; gap: 12px; }
.foot-feat li > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: var(--accent); background: var(--x5-tint, rgba(31,107,255,.1)); }
.foot-feat svg { width: 19px; height: 19px; }
.foot-feat strong { display: block; font-size: .93rem; color: var(--foot-t1); }
.foot-feat small { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.45; color: var(--foot-t3); }
body.x5-ui .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.foot-legal a, .foot-legal > button { background: none; border: 0; padding: 0; font: inherit; font-size: .82rem; color: var(--foot-t3); text-decoration: none; cursor: pointer; }
.foot-legal a:hover, .foot-legal > button:hover { color: var(--accent); }
.foot-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--foot-line); background: transparent; font: inherit; font-size: .8rem; font-weight: 600; color: var(--foot-t2); cursor: pointer; }
.foot-lang-btn:hover { border-color: var(--accent); color: var(--accent); }
.foot-lang .foot-lang-dd { top: auto; bottom: calc(100% + 8px); right: 0; max-height: 320px; overflow-y: auto; }
@media (max-width: 960px) { .foot-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot-feat { grid-template-columns: 1fr 1fr; gap: 16px; } .foot-feat li { flex-direction: column; gap: 8px; } body.x5-ui .footer-bottom { flex-direction: column-reverse; align-items: flex-start; } }


/* ═════════════════════════════════════════════════════════════════
   Content pages (body.x5-ui.pg-ui): dark photo hero (page photo), white composer, sections in the Index 5 palette.
   Only looks — the texts and structure of templates/front/pages/*.php stay the same.
═════════════════════════════════════════════════════════════════ */
body.x5-ui.pg-ui .hero { min-height: 0; padding: 128px 24px 128px; }
body.x5-ui.pg-ui .hero-content { max-width: 880px; }
body.x5-ui.pg-legal-ui .hero { padding: 120px 24px 96px; }
.x5-ui .pg-crumbs { color: rgba(226,234,255,.78); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.x5-ui .pg-crumbs a { color: #fff; }
.x5-ui .pg-crumbs span[aria-hidden] { color: rgba(226,234,255,.5); }
.x5-ui h1.pg-title { color: #fff; font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 3.8rem); letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.x5-ui .pg-lead { color: rgba(226,234,255,.84); }
.x5-ui .hero .x4-chatlabel { color: #9cc6ff; }
body.x5-ui.pg-ui .x5-tint { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(6,16,36,.4), rgba(6,16,36,.72) 70%),
    linear-gradient(180deg, rgba(4,11,28,.8) 0%, rgba(4,11,28,.55) 40%, rgba(6,16,36,.82) 80%, #061024 100%); }
/* service pages: the topic chips sit in a navy band below the hero — the curve moves there */
body.x5-ui.pg-ui:has(.pg > .x4-start:first-child) .x5-curve { display: none; }
body.x5-ui.pg-ui:has(.pg > .x4-start:first-child) .hero { padding-bottom: 28px; }
.x5-ui .pg > .x4-start:first-child { position: relative; margin-top: -1px; padding: 6px 24px 104px; background: #061024; }
.x5-ui .pg > .x4-start:first-child::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; background: var(--x5-alt);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C240 72 480 80 720 80S1200 72 1440 40v40z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C240 72 480 80 720 80S1200 72 1440 40v40z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.x5-ui .pg > .x4-start:first-child .x4-chips-h { color: rgba(226,234,255,.75); }
.x5-ui .pg > .x4-start:first-child .x4-chip, body.x5-ui.pg-ui .hero .x4-chip { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.x5-ui .pg > .x4-start:first-child .x4-chip svg { color: #8fbcff; }
.x5-ui .pg > .x4-start:first-child .x4-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); box-shadow: none; }
@media (max-width: 640px) {
    body.x5-ui.pg-ui .hero { padding: 96px 16px 76px; }
    .x5-ui .pg > .x4-start:first-child { padding: 4px 16px 64px; }
    .x5-ui .pg > .x4-start:first-child::after { height: 32px; }
    .x5-ui .pg > .x4-start:first-child .x4-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}

/* sections of the content pages (and every x3 section on an Index 5 page) */
.x5-ui .x3-sec { padding: 100px 24px; background: var(--x5-bg); }
.x5-ui .x3-sec.x3-alt { background: var(--x5-alt); border-color: transparent; }
.x5-ui .x3-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem !important; font-weight: 700; letter-spacing: .14em; }
.x5-ui .x3-kicker::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.x5-ui .x3 h2 { font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -.035em; line-height: 1.1; color: var(--x5-ink); }
.x5-ui .x3 p { color: var(--x5-t2); line-height: 1.7; }
.x5-ui .x3-btn { color: #fff; background: linear-gradient(135deg, #1f6bff, #3f8cff); padding: 14px 24px; font-weight: 700; box-shadow: 0 12px 30px rgba(31,107,255,.3); transition: transform .2s, box-shadow .2s; }
.x5-ui .x3-btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(31,107,255,.38); }
.x5-ui .x3-ic { background: var(--x5-tint); border-color: transparent; color: var(--x5-acc); }
.x5-ui .x3-go:hover { background: var(--x5-acc); border-color: var(--x5-acc); color: #fff; }
.x5-ui .x3-steps .x4-n { background: var(--x5-acc); border-color: var(--x5-acc); color: #fff; border-radius: 50%; }
.x5-ui .pg-cards li, .x5-ui .pg-facts li, .x5-ui .pg-links a, .x5-ui .x3-three article { border-radius: 20px; border-color: var(--x5-line); background: var(--x5-card); box-shadow: 0 10px 30px rgba(10,26,58,.05); transition: transform .25s, box-shadow .25s, border-color .25s; }
.x5-ui .pg-cards li:hover, .x5-ui .pg-links a:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(10,26,58,.10); border-color: color-mix(in srgb, var(--x5-acc) 40%, var(--x5-line)); background: var(--x5-card); }
.x5-ui .pg-needs { border-radius: 24px; background: var(--x5-card); border-color: var(--x5-line); box-shadow: var(--x5-shadow); }
.x5-ui .pg-needs .x3-btn, .x5-ui .pg-btn { color: #fff; background: linear-gradient(135deg, #1f6bff, #3f8cff); }
.x5-ui .pg-photo img { border-radius: 24px; box-shadow: var(--x5-shadow); }
.x5-ui .x3-faq summary::after { color: var(--x5-acc); }
.x5-ui .x3-faq h3 { color: var(--x5-ink); }
html[data-theme="dark"] .x5-ui .pg-cards li, html[data-theme="dark"] .x5-ui .pg-facts li, html[data-theme="dark"] .x5-ui .pg-links a { box-shadow: none; }
/* closing call to action of the content pages: navy with a faded photo, white field */
.x5-ui .x3-sec.x3-end { position: relative; overflow: hidden; padding: 112px 24px; background: var(--x5-navy); }
.x5-ui .x3-end::before { content: ''; position: absolute; inset: 0; background: url('../../img/hero/hero-1.webp') center / cover no-repeat; opacity: .28; }
.x5-ui .x3-end::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,16,36,.7), rgba(6,16,36,.92)); }
.x5-ui .x3-end > * { position: relative; z-index: 1; }
.x5-ui .x3 .x3-end h2 { color: #fff; }
.x5-ui .x3 .x3-end p { color: rgba(226,234,255,.82); }
.x5-ui .x3-end small { color: rgba(226,234,255,.7); }
.x5-ui .x3-end .x3-fake-input { max-width: 700px; border: 0; border-radius: 999px; background: #fff; color: #6b7894; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.x5-ui .x3-end .x3-send { width: 48px; height: 48px; color: #fff; background: linear-gradient(135deg, #1f6bff, #3f8cff); }
@media (max-width: 640px) { .x5-ui .x3-sec { padding: 72px 16px; } .x5-ui .x3-sec.x3-end { padding: 80px 16px; } }

/* ═════════════════════════════════════════════════════════════════
   Partner page (body.x5-ui.x5-pl, templates/front/partner-landing.php): navy photo hero, Inter, Index 5 palette.
═════════════════════════════════════════════════════════════════ */
body.x5-pl { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; color: var(--x5-ink); }
body.x5-pl h1, body.x5-pl h2, body.x5-pl h3, body.x5-pl h4, body.x5-pl .pl-kpi strong, body.x5-pl .chat-header-info h3 { font-family: 'Inter', system-ui, sans-serif; }
body.x5-pl h2 { font-weight: 800; letter-spacing: -.035em; color: var(--x5-ink); }
.x5-pl .pl-hero { position: relative; padding: 150px 24px 150px; color: #fff; background: #061024; }
.x5-pl .pl-hero::before { inset: 0; height: auto; background: linear-gradient(180deg, rgba(4,11,28,.84) 0%, rgba(4,11,28,.62) 45%, rgba(4,11,28,.9) 100%), url('../../img/hero/hero-2.webp') center / cover no-repeat; }
.x5-pl .pl-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 76px; background: var(--x5-bg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C240 72 480 80 720 80S1200 72 1440 40v40z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V40C240 72 480 80 720 80S1200 72 1440 40v40z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.x5-pl .pl-hero .section-label { color: #e3ecff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.x5-pl .pl-hero h1 { color: #fff; font-weight: 800; letter-spacing: -.045em; }
.x5-pl .pl-hero h1 span { background: linear-gradient(92deg, #4d8dff, #9ad8ff); -webkit-background-clip: text; background-clip: text; }
.x5-pl .pl-lead { color: rgba(226,234,255,.84); font-weight: 400; }
.x5-pl .pl-facts li { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.x5-pl .pl-facts li svg { color: #6fe3a5; }
.x5-pl .pl-btn { border-radius: 999px; }
.x5-pl .pl-btn--primary { background: linear-gradient(135deg, #1f6bff, #3f8cff); }
.x5-pl .pl-hero .pl-btn--ghost { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.x5-pl .pl-hero .pl-btn--ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.x5-pl .pl-visual { border-color: rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.45); background: linear-gradient(160deg, rgba(14,28,64,.92), rgba(6,16,36,.95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.x5-pl .pl-kpis { margin-top: -86px; z-index: 2; }
.x5-pl .pl-kpi { border-radius: 22px; border-color: var(--x5-line); background: var(--x5-card); box-shadow: var(--x5-shadow); }
.x5-pl .pl-kpi strong { font-weight: 800; color: var(--x5-acc); }
.x5-pl .pl-sec { background: var(--x5-bg); }
.x5-pl .pl-sec--card { background: var(--x5-alt); border-color: transparent; }
.x5-pl .section-label { color: var(--x5-acc); background: var(--x5-tint); border-color: transparent; font-weight: 700; letter-spacing: .1em; }
.x5-pl .pl-feat, .x5-pl .pl-mini { border-radius: 20px; border-color: var(--x5-line); background: var(--x5-card); box-shadow: 0 10px 30px rgba(10,26,58,.05); }
.x5-pl .pl-sec--card .pl-feat, .x5-pl .pl-sec--card .pl-mini { background: var(--x5-card); }
.x5-pl .pl-fi { background: var(--x5-tint); color: var(--x5-acc); }
.x5-pl .pl-final { border-radius: 30px; background: radial-gradient(120% 90% at 100% 0%, #1b4dc4 0%, #0a1d44 45%, #061024 100%); box-shadow: 0 30px 80px rgba(6,16,36,.35); }
html[data-theme="dark"] .x5-pl .pl-feat, html[data-theme="dark"] .x5-pl .pl-mini { box-shadow: none; }
@media (max-width: 640px) { .x5-pl .pl-hero { padding: 110px 16px 110px; } .x5-pl .pl-hero::after { height: 34px; } .x5-pl .pl-kpis { margin-top: -60px; } }

/* legal texts: calm reading page (headings smaller than marketing headings) */
.x5-ui .x3 .pg-legal-body h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; margin: 38px 0 10px; max-width: none; }
.x5-ui .pg-legal .x3-sec { padding-top: 64px; }
/* the field's example text stays on one line (phones) */
body.x5-ui #chatInterface:not(.chat-popped) #messageInput::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }