/* Okitel — static website v1. No frameworks, remote fonts, trackers, or JavaScript. */
:root {
  --ink: #14292f;
  --body: #526168;
  --muted: #64747b;
  --blue: #099ac7;
  --blue-dark: #007a9e;
  --red: #ed2724;
  --line: #e2e9ec;
  --pale: #f2f8fa;
  --white: #ffffff;
  --max-width: 1180px;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; text-underline-offset: 4px; }
a:hover { color: var(--blue-dark); }
img { max-width: 100%; height: auto; vertical-align: middle; }
svg { flex: none; }
button, input, textarea { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 650; }
.icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; }
.container { width: min(var(--max-width), calc(100% - 80px)); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 5px; border-radius: 3px; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 20px; padding: 12px 20px; color: white; background: var(--ink); }
.skip-link:focus { top: 10px; color: white; }
.site-header { background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-inner { min-height: 88px; display: flex; align-items: center; gap: 48px; }
.brand { display: inline-flex; flex: none; align-items: center; }
.brand img { width: 140px; height: auto; }
.primary-nav { display: flex; gap: 34px; margin-left: auto; font-size: 14px; font-weight: 550; }
.primary-nav a { padding-block: 12px; }
.header-cta { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--pale); border: 1px solid #dfecef; border-radius: 10px; font-size: 14px; font-weight: 650; }
.header-cta .icon { width: 17px; height: 17px; }
.header-cta:hover { background: #e6f2f7; }
.eyebrow { font-size: 10.5px; line-height: 1.5; font-weight: 700; letter-spacing: 1.65px; color: var(--blue-dark); }
.tiny-dot { display: inline-block; height: 6px; width: 6px; border-radius: 50%; background: var(--red); margin-right: 9px; vertical-align: middle; }
.hero { display: grid; grid-template-columns: 1.04fr 1fr; align-items: center; gap: 34px; padding-top: 62px; padding-bottom: 54px; }
.hero-copy { padding-bottom: 16px; }
.hero h1 { font-size: clamp(58px, 5.5vw, 78px); line-height: 1.05; letter-spacing: -4.4px; margin-top: 24px; font-weight: 650; }
.hero h1 span { color: var(--blue); }
.hero-description { max-width: 470px; color: var(--body); font-size: 18px; line-height: 1.75; margin-top: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; gap: 18px; padding: 15px 21px; font-size: 14px; line-height: 1.4; font-weight: 600; border-radius: 11px; transition: background .15s, transform .15s; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #234750; color: white; transform: translateY(-2px); }
.button .icon { width: 19px; height: 19px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.5; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { width: 20px; height: 20px; }
.hero-footnote { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; margin-top: 22px; }
.hero-footnote .icon { width: 14px; height: 14px; }
.hero-visual { min-width: 0; }
.preview-stage { height: 552px; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; }
.preview-stage::before { content: ""; position: absolute; z-index: -2; inset: 30px 0 18px 12px; background: #f0f7fa; border-radius: 32px; }
.orbit { position: absolute; z-index: -1; border: 1px solid #dcebef; border-radius: 50%; width: 440px; height: 440px; left: calc(50% - 220px); top: 66px; }
.orbit-two { width: 348px; height: 348px; left: calc(50% - 174px); top: 112px; }
.orbit-dot { position: absolute; right: 42px; top: 148px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.phone-mockup { width: 282px; height: 522px; border: 5px solid #fff; border-radius: 36px; background: white; box-shadow: 0 20px 42px #28495415, 0 0 0 1px #d7e2e7, inset 0 0 0 1px #eef2f4; position: relative; overflow: hidden; display: flex; flex-direction: column; transform: rotate(-3deg); }
.phone-status { display: flex; padding: 14px 19px 10px; align-items: center; font-size: 10px; font-weight: 750; line-height: 1; justify-content: space-between; position: relative; }
.phone-camera { height: 8px; width: 8px; border-radius: 50%; background: #233c45; position: absolute; top: 13px; left: calc(50% - 4px); }
.status-icons svg { width: 30px; height: 12px; display: block; }
.phone-heading { padding: 17px 15px 12px; display: flex; align-items: center; justify-content: space-between; }
.phone-heading h2 { font-size: 25px; line-height: 1.1; letter-spacing: -.8px; }
.red-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); margin: 0 0 3px 5px; }
.compose { color: var(--blue-dark); }
.compose .icon { width: 19px; height: 19px; }
.preview-search { display: flex; align-items: center; gap: 7px; margin: 0 13px 12px; border-radius: 9px; padding: 9px 10px; background: #f3f6f7; color: #607179; font-size: 10px; line-height: 1; }
.preview-search .icon { width: 13px; height: 13px; }
.preview-tabs { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #607179; margin-inline: 13px; padding-bottom: 12px; border-bottom: 1px solid #edf1f3; }
.preview-tabs span { padding: 5px 10px; border-radius: 7px; }
.preview-tabs .selected { color: var(--blue-dark); font-weight: 600; background: #eaf7fc; }
.preview-chat { display: flex; align-items: center; min-height: 59px; gap: 9px; padding: 10px 13px; position: relative; }
.preview-chat::after { content: ""; position: absolute; bottom: 0; height: 1px; background: #edf1f3; left: 59px; right: 13px; }
.avatar { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.avatar .icon { width: 18px; height: 18px; }
.cyan { background: #e0f3fa; color: #157493; }
.sand { background: #f4eddf; color: #8d7041; }
.lavender { background: #eeedf9; color: #777193; }
.rose { background: #faeeec; color: #bb6960; }
.chat-copy { min-width: 0; flex: 1; }
.chat-name { font-size: 11px; font-weight: 650; line-height: 1.5; }
.chat-message { font-size: 9px; color: #66767d; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-message .icon { width: 9px; height: 9px; margin-right: 2px; }
.chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font-size: 7px; color: #66767d; }
.chat-meta .icon { width: 14px; height: 14px; color: var(--blue-dark); }
.unread { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--blue-dark); color: #fff; font-weight: 600; font-size: 8px; }
.preview-bottom { display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #e9eef0; padding: 12px 5px 8px; margin-top: auto; }
.preview-bottom span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 7px; color: #64747c; line-height: 1.3; }
.preview-bottom .icon { width: 18px; height: 18px; }
.preview-bottom .active { color: var(--blue-dark); }
.phone-home-bar { width: 75px; height: 3px; border-radius: 4px; background: #172e35; margin: 6px auto 6px; flex: none; }
.id-note { position: absolute; right: 2px; top: 1px; z-index: 3; display: flex; gap: 12px; padding: 15px 19px; background: white; border-radius: 14px; box-shadow: 0 10px 24px #2444530c; border: 1px solid #e0ebf0; transform: rotate(3deg); }
.id-note-icon { background: #edf8fc; color: var(--blue-dark); border-radius: 10px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.id-note-icon .icon { height: 21px; width: 21px; }
.mini-label { display: block; font-size: 8px; font-weight: 700; letter-spacing: 1.35px; color: #52656d; }
.masked-id { font-size: 19px; font-weight: 700; line-height: 1.55; letter-spacing: 3px; color: var(--ink); }
.id-note-caption { font-size: 9px; color: #64747b; }
.privacy-note { position: absolute; bottom: 20px; left: 0; z-index: 3; background: white; border: 1px solid #e0ebf0; border-radius: 13px; box-shadow: 0 10px 24px #2444530c; padding: 15px 20px; display: flex; align-items: center; gap: 13px; }
.privacy-note > .icon { color: var(--blue-dark); width: 21px; height: 21px; }
.privacy-note strong { display: block; font-size: 11px; font-weight: 650; }
.privacy-note div > span { display: block; font-size: 9px; color: #64747b; }
.hero-visual figcaption { text-align: center; font-size: 9px; color: #65737b; margin-top: 9px; }
.principles { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; padding-block: 29px; gap: 24px; }
.principles > div { display: flex; justify-content: center; align-items: center; gap: 22px; }
.principles > div + div { border-left: 1px solid var(--line); }
.principles > div > .icon { width: 32px; height: 32px; color: var(--blue-dark); }
.principles p { font-size: 12px; line-height: 1.7; color: var(--muted); }
.principles strong { color: var(--ink); font-weight: 600; }
.principle-symbol { font-size: 32px; letter-spacing: -2px; font-weight: 650; line-height: .9; color: var(--blue-dark); }
.principle-symbol > span { display: block; font-size: 8px; letter-spacing: 1px; line-height: 1.4; text-align: center; font-weight: 500; margin-top: 5px; }
.section { padding-block: 90px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 44px; }
h2 { font-size: 42px; letter-spacing: -1.65px; line-height: 1.18; }
.section-heading h2 { margin-top: 16px; }
.section-heading > p { max-width: 310px; color: var(--body); font-size: 15px; padding-bottom: 4px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; row-gap: 32px; }
.feature { padding: 10px 0 24px; border-bottom: 1px solid var(--line); }
.feature-icon { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; background: #f0f7fa; color: var(--blue-dark); margin-bottom: 20px; }
.feature-icon .icon { width: 23px; height: 23px; }
h3 { font-size: 18px; line-height: 1.4; letter-spacing: -.25px; }
.feature p { margin-top: 10px; font-size: 14px; line-height: 1.8; color: var(--body); max-width: 320px; }
.privacy-section { background: #f6f9fa; padding-block: 72px; }
.privacy-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 105px; }
.privacy-layout > * { min-width: 0; }
.identity-visual { min-height: 380px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 25px; border-radius: 24px; border: 1px solid #e1ecf0; background: #eaf4f8; }
.visual-label { font-size: 8px; letter-spacing: 1.8px; color: #4e6f7c; font-weight: 650; margin-bottom: 25px; }
.identity-card { width: 315px; max-width: 100%; background: white; border: 1px solid #e0eaef; padding: 24px 27px; border-radius: 18px; box-shadow: 0 12px 28px #1b4d6410; }
.identity-card > img { display: block; width: 39px; height: auto; margin-bottom: 21px; }
.identity-card .mini-label { font-size: 8px; }
.large-masked-id { font-size: 27px; letter-spacing: 4px; margin-top: 7px; white-space: nowrap; }
.identity-divider { display: block; height: 1px; background: var(--line); margin-block: 18px 14px; }
.identity-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; color: var(--body); margin-top: 10px; }
.identity-row span:last-child { color: var(--blue-dark); }
.identity-row .icon { width: 12px; height: 12px; }
.visual-caption { font-size: 10px; color: #58727d; margin-top: 22px; }
.privacy-copy h2 { font-size: 48px; margin-top: 18px; line-height: 1.1; }
.privacy-copy > p:not(.eyebrow) { color: var(--body); font-size: 15px; margin-top: 24px; }
.privacy-copy > p.secondary-copy { font-size: 13px; margin-top: 17px; }
.privacy-copy .text-link { margin-top: 25px; color: var(--blue-dark); }
.how-section { padding-bottom: 70px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.step-number { display: block; font-size: 12px; color: var(--blue-dark); border-bottom: 1px solid #cadde6; padding-bottom: 16px; margin-bottom: 24px; letter-spacing: 1px; font-weight: 650; }
.steps-grid h3 { font-size: 20px; }
.steps-grid p { color: var(--body); font-size: 14px; margin-top: 11px; }
.faq-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 85px; padding-top: 50px; }
.faq-intro h2 { margin-top: 16px; }
.faq-intro > p:not(.eyebrow) { margin-top: 24px; color: var(--body); font-size: 14px; }
.faq-intro .text-link { margin-top: 10px; color: var(--blue-dark); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 21px; font-size: 14px; font-weight: 600; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-symbol { display: inline-flex; }
.faq-symbol .icon { height: 18px; width: 18px; color: var(--blue-dark); transition: transform .2s; }
.faq-item[open] .faq-symbol .icon { transform: rotate(45deg); }
.faq-answer { padding: 0 35px 23px 0; font-size: 14px; color: var(--body); }
.faq-answer a { text-decoration: underline; color: var(--blue-dark); }
.download-section { padding-bottom: 80px; }
.download-panel { display: flex; align-items: center; justify-content: space-between; gap: 45px; padding: 48px; background: #eaf6fa; border: 1px solid #dfedf2; border-radius: 24px; }
.download-panel h2 { margin-top: 14px; font-size: 34px; letter-spacing: -1.2px; }
.download-panel p:not(.eyebrow) { font-size: 14px; color: var(--body); margin-top: 12px; }
.download-panel p.download-note { font-size: 11px; margin-top: 10px; }
.download-actions { display: flex; flex-direction: column; align-items: center; gap: 13px; flex: none; }
.download-help { font-size: 11px; text-decoration: underline; color: var(--body); }
.site-footer { border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.5fr .8fr 1fr 1.1fr; padding-block: 48px; gap: 36px; }
.footer-brand .brand img { width: 118px; }
.footer-brand > p { font-size: 12px; line-height: 1.8; color: var(--muted); margin-top: 19px; }
.footer-top h2 { font-size: 11px; line-height: 1.5; letter-spacing: 0; font-weight: 650; margin: 5px 0 17px; }
.footer-top nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer-top nav a { font-size: 12px; color: var(--body); padding-block: 5px; }
.footer-top a:hover { color: var(--blue-dark); text-decoration: underline; }
.footer-contact > a { color: var(--blue-dark); font-size: 12px; font-weight: 550; }
.footer-contact > p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 15px; }
.footer-bottom { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; color: var(--muted); font-size: 10px; }
.footer-bottom span:last-child { display: flex; align-items: center; gap: 6px; }
.footer-bottom .icon { width: 13px; height: 13px; color: var(--blue-dark); }
.email-address { overflow-wrap: anywhere; }
/* Policy and support pages */
.legal-main, .support-main { padding-bottom: 84px; }
.page-intro { padding: 42px 0 42px; border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 39px; font-size: 12px; color: var(--muted); }
.back-link .icon { transform: rotate(180deg); width: 15px; height: 15px; }
.page-intro h1 { margin-top: 15px; font-size: 58px; letter-spacing: -2.5px; line-height: 1.1; }
.page-description { max-width: 710px; font-size: 17px; color: var(--body); margin-top: 21px; line-height: 1.8; }
.updated { margin-top: 24px; font-size: 11px; color: var(--muted); }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 80px; padding-top: 44px; }
.legal-sidebar { align-self: start; position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; padding-right: 10px; scrollbar-width: thin; }
.legal-sidebar nav { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.legal-sidebar nav h2 { font-size: 9px; letter-spacing: 1.8px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.legal-sidebar nav a { font-size: 12px; line-height: 1.6; padding-block: 3px; }
.legal-sidebar nav a:hover { text-decoration: underline; }
.sidebar-contact { display: flex; flex-direction: column; font-size: 11px; gap: 7px; padding-top: 25px; margin-top: 25px; border-top: 1px solid var(--line); }
.sidebar-contact span { color: var(--muted); }
.sidebar-contact a { color: var(--blue-dark); }
.legal-content { min-width: 0; max-width: 800px; }
.legal-note { display: flex; align-items: flex-start; gap: 14px; background: #eff7fa; padding: 20px 23px; border: 1px solid #dfecf1; border-radius: 12px; font-size: 13px; color: #355864; margin-bottom: 34px; }
.legal-note .icon { color: var(--blue-dark); width: 20px; height: 20px; margin-top: 2px; }
.legal-section { padding-bottom: 33px; margin-bottom: 31px; border-bottom: 1px solid var(--line); scroll-margin-top: 113px; }
.legal-section h2 { font-size: 24px; line-height: 1.35; letter-spacing: -.7px; margin-bottom: 17px; }
.legal-section h3 { font-size: 16px; line-height: 1.6; margin-top: 22px; margin-bottom: 8px; letter-spacing: -.1px; }
.legal-section p { font-size: 14px; color: var(--body); line-height: 1.9; margin-top: 13px; overflow-wrap: anywhere; }
.legal-section strong { color: var(--ink); font-weight: 650; }
.legal-section a:not(.button) { color: var(--blue-dark); text-decoration: underline; }
.definition-row { padding: 1px 0 6px; }
.definition-row h3 { margin-bottom: 0; }
.definition-row p { margin-top: 5px; }
.legal-end { display: flex; flex-wrap: wrap; gap: 15px; justify-content: space-between; font-size: 12px; color: var(--muted); }
.legal-end > span { font-weight: 650; color: var(--ink); }
.legal-end .icon { width: 14px; height: 14px; margin-left: 4px; }
.request-panel { padding: 28px; margin-block: 24px; border: 1px solid #ddeaf0; border-radius: 16px; background: #f7fafb; }
.request-icon { display: inline-flex; width: 41px; height: 41px; border: 1px solid #d6e8f0; color: var(--blue-dark); background: white; align-items: center; justify-content: center; border-radius: 12px; }
.request-panel h3 { font-size: 20px; margin-top: 17px; }
.request-panel .button { margin-top: 20px; }
.request-panel p.small-note { font-size: 12px; line-height: 1.85; margin-top: 18px; }
.support-main .page-intro { max-width: 100%; }
.support-main-email { display: inline-flex; align-items: center; gap: 14px; color: var(--blue-dark); font-size: 22px; font-weight: 550; margin-top: 25px; overflow-wrap: anywhere; }
.support-main-email:hover { text-decoration: underline; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 44px; }
.support-card { padding: 30px; border: 1px solid var(--line); border-radius: 16px; }
.support-card h2 { font-size: 23px; letter-spacing: -.6px; }
.support-card > p { font-size: 14px; line-height: 1.8; color: var(--body); margin-top: 15px; }
.support-card .text-link { margin-top: 24px; color: var(--blue-dark); }
.support-guidance { border-top: 1px solid var(--line); padding-top: 35px; max-width: 850px; }
.support-guidance h2 { font-size: 26px; letter-spacing: -.6px; }
.support-guidance p { font-size: 14px; color: var(--body); margin-top: 17px; }
.support-guidance strong { color: var(--ink); }
.not-found { padding-block: 110px 130px; }
.not-found h1 { font-size: 64px; line-height: 1.1; letter-spacing: -3px; margin-top: 25px; }
.not-found p:not(.eyebrow) { margin-top: 23px; color: var(--body); }
.not-found .button { margin-top: 32px; }
@media (min-width: 1600px) { .hero { padding-top: 78px; padding-bottom: 70px; } }
@media (max-width: 1100px) {
  .container { width: calc(100% - 64px); }
  .hero { gap: 25px; }
  .hero h1 { font-size: 64px; letter-spacing: -3.6px; }
  .hero-description { font-size: 16px; }
  .hero-actions { gap: 20px; }
  .hero-actions .text-link { font-size: 12px; }
  .hero-actions .button { font-size: 12px; padding-inline: 16px; gap: 13px; }
  .preview-stage { height: 530px; }
  .phone-mockup { width: 267px; height: 510px; }
  .orbit { width: 340px; height: 340px; left: calc(50% - 170px); top: 93px; }
  .orbit-two { width: 280px; height: 280px; left: calc(50% - 140px); top: 123px; }
  .id-note { right: -3px; top: 0; padding: 12px; }
  .privacy-note { left: -8px; bottom: 18px; padding: 14px; }
  .principles > div { gap: 15px; }
  .principles p { font-size: 11px; }
  .privacy-layout { gap: 55px; }
  .identity-visual { padding-inline: 20px; }
  .features-grid { column-gap: 35px; }
  .faq-section { gap: 55px; }
  .download-panel { padding: 36px; gap: 30px; }
  .download-panel h2 { font-size: 30px; }
  .footer-top { gap: 25px; grid-template-columns: 1.25fr .7fr 1fr 1.1fr; }
  .legal-layout { gap: 45px; grid-template-columns: 210px minmax(0,1fr); }
}
@media (max-width: 850px) {
  .header-inner { gap: 26px; }
  .primary-nav { gap: 22px; }
  .hero { grid-template-columns: 1fr; gap: 37px; padding-top: 58px; }
  .hero-copy { max-width: 600px; }
  .hero h1 { font-size: 78px; letter-spacing: -4px; }
  .hero-description { font-size: 18px; max-width: 500px; }
  .hero-actions .button { font-size: 14px; padding-inline: 21px; }
  .hero-actions .text-link { font-size: 14px; }
  .hero-visual { width: min(100%, 520px); margin-inline: auto; }
  .preview-stage { height: 545px; }
  .phone-mockup { width: 282px; height: 522px; }
  .id-note { right: 0; }
  .privacy-note { left: 0; }
  .principles { gap: 16px; }
  .principles > div { flex-direction: column; text-align: center; gap: 16px; }
  .principles > div > .icon { height: 35px; }
  .principle-symbol { font-size: 29px; }
  .principle-symbol > span { font-size: 7px; }
  .section { padding-block: 64px; }
  .section-heading { gap: 25px; }
  .section-heading > p { max-width: 245px; font-size: 14px; }
  h2 { font-size: 36px; }
  .features-grid { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .privacy-layout { gap: 34px; }
  .privacy-section { padding-block: 56px; }
  .privacy-copy h2 { font-size: 41px; }
  .privacy-copy > p:not(.eyebrow) { font-size: 14px; }
  .identity-visual { padding-inline: 15px; min-height: 365px; }
  .identity-card { padding: 23px 20px; }
  .large-masked-id { font-size: 24px; letter-spacing: 3px; }
  .visual-label { font-size: 7px; letter-spacing: 1.1px; }
  .visual-caption { font-size: 9px; }
  .identity-row { font-size: 9px; }
  .steps-grid { gap: 35px; }
  .faq-section { grid-template-columns: 1fr; gap: 32px; padding-top: 30px; }
  .faq-intro > p:not(.eyebrow) { margin-top: 16px; }
  .download-panel { flex-direction: column; align-items: flex-start; }
  .download-actions { align-items: flex-start; }
  .download-section { padding-bottom: 56px; }
  .footer-top { grid-template-columns: 1.2fr 1fr; gap: 32px; }
  .footer-contact { grid-column: 2; grid-row: 2; }
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-sidebar { position: static; max-height: none; overflow: visible; padding: 0; }
  .legal-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 8px 21px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .legal-sidebar nav h2 { width: 100%; margin-bottom: 6px; }
  .legal-sidebar nav a { font-size: 12px; text-decoration: underline; text-decoration-color: #cadce4; }
  .sidebar-contact { display: none; }
  .page-intro h1 { font-size: 50px; }
  .page-description { font-size: 16px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 25px; }
  .container { width: calc(100% - 40px); }
  .site-header { position: static; }
  .header-inner { min-height: 0; padding-block: 18px 0; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; }
  .brand img { width: 118px; }
  .header-cta { font-size: 12px; padding: 9px 13px; gap: 10px; min-height: 40px; grid-column: 2; grid-row: 1; }
  .header-cta .icon { width: 15px; height: 15px; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; margin-left: 0; gap: 28px; font-size: 12px; }
  .primary-nav a { padding-block: 8px 14px; }
  .hero { padding-top: 40px; padding-bottom: 34px; gap: 35px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.25px; }
  .hero h1 { font-size: clamp(49px, 12.5vw, 72px); letter-spacing: -2.8px; margin-top: 19px; }
  .hero-description { font-size: 16px; line-height: 1.75; margin-top: 23px; }
  .hero-actions { gap: 20px; margin-top: 25px; }
  .hero-actions .button { font-size: 12px; padding: 15px 17px; gap: 12px; min-height: 50px; }
  .hero-actions .text-link { font-size: 12px; gap: 7px; }
  .hero-actions .text-link .icon { width: 18px; height: 18px; }
  .hero-footnote { font-size: 10px; margin-top: 20px; }
  .hero-copy { padding-bottom: 0; }
  .preview-stage { height: 516px; }
  .preview-stage::before { inset: 18px 0; border-radius: 22px; }
  .phone-mockup { width: 264px; height: 498px; border-radius: 33px; }
  .phone-status { padding-top: 13px; }
  .phone-heading { padding-top: 17px; }
  .preview-chat { min-height: 57px; padding-inline: 11px; }
  .chat-message { font-size: 8.5px; }
  .avatar { width: 33px; height: 33px; }
  .phone-heading h2 { font-size: 24px; }
  .preview-bottom { padding-top: 10px; }
  .orbit { width: 280px; height: 280px; left: calc(50% - 140px); top: 123px; }
  .orbit-two { width: 220px; height: 220px; left: calc(50% - 110px); top: 153px; }
  .orbit-dot { right: 9px; width: 8px; height: 8px; }
  .id-note { top: -3px; right: 0; padding: 10px 12px; gap: 8px; border-radius: 12px; }
  .id-note-icon { width: 29px; height: 29px; margin-top: 7px; }
  .id-note-icon .icon { width: 18px; height: 18px; }
  .id-note .mini-label { font-size: 6px; }
  .masked-id { font-size: 16px; letter-spacing: 2px; }
  .id-note-caption { font-size: 8px; }
  .privacy-note { bottom: 9px; left: 0; padding: 12px 14px; gap: 9px; }
  .privacy-note strong { font-size: 10px; }
  .privacy-note div > span { font-size: 8px; }
  .hero-visual figcaption { font-size: 8px; margin-top: 10px; }
  .principles { padding-block: 23px; gap: 10px; }
  .principles > div { gap: 12px; }
  .principles > div > .icon { width: 26px; height: 30px; }
  .principles p { font-size: 9px; line-height: 1.75; }
  .principle-symbol { font-size: 25px; }
  .principle-symbol > span { font-size: 6px; margin-top: 3px; }
  .section { padding-block: 50px; }
  h2 { font-size: 32px; letter-spacing: -1.2px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 25px; }
  .section-heading h2 { margin-top: 13px; }
  .section-heading > p { max-width: 100%; font-size: 14px; }
  .features-grid { column-gap: 23px; row-gap: 20px; }
  .feature { padding-bottom: 21px; }
  .feature-icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 16px; }
  .feature-icon .icon { width: 21px; height: 21px; }
  .feature h3 { font-size: 15px; letter-spacing: -.2px; }
  .feature p { font-size: 12px; line-height: 1.85; margin-top: 9px; }
  .privacy-section { padding-block: 40px; }
  .privacy-layout { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .identity-visual { min-height: 350px; padding-inline: 25px; }
  .identity-card { width: min(295px, 100%); max-width: 100%; padding: 23px 25px; }
  .visual-label { font-size: 8px; }
  .visual-caption { font-size: 10px; }
  .identity-row { font-size: 10px; }
  .large-masked-id { font-size: 26px; }
  .privacy-copy h2 { font-size: 38px; }
  .privacy-copy > p:not(.eyebrow) { font-size: 14px; margin-top: 19px; }
  .privacy-copy > p.secondary-copy { font-size: 12px; margin-top: 17px; }
  .privacy-copy .text-link { font-size: 13px; margin-top: 21px; }
  .steps-grid { grid-template-columns: 1fr; gap: 27px; }
  .steps-grid article { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .step-number { border: 0; padding: 4px 0 0; margin: 0; grid-row: span 2; }
  .steps-grid h3 { font-size: 18px; }
  .steps-grid p { margin-top: 8px; font-size: 13px; }
  .faq-section { padding-top: 20px; gap: 28px; }
  .faq-intro > p:not(.eyebrow) { font-size: 13px; }
  .faq-intro .text-link { font-size: 13px; }
  .faq-item summary { font-size: 13px; padding-block: 19px; gap: 16px; }
  .faq-answer { font-size: 13px; padding-right: 12px; }
  .download-panel { padding: 29px 23px; gap: 25px; border-radius: 18px; }
  .download-panel .eyebrow { font-size: 8px; }
  .download-panel h2 { font-size: 29px; line-height: 1.15; }
  .download-panel p:not(.eyebrow) { font-size: 13px; }
  .download-panel p.download-note { font-size: 10px; }
  .download-actions .button { font-size: 13px; }
  .download-section { padding-bottom: 40px; }
  .footer-top { padding-block: 33px; gap: 28px 20px; grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand > p { margin-top: 13px; }
  .footer-contact { grid-column: 1 / -1; grid-row: auto; padding-top: 7px; }
  .footer-top h2 { margin-top: 0; margin-bottom: 11px; }
  .footer-contact > p { margin-top: 8px; }
  .footer-bottom { font-size: 9px; flex-direction: column; align-items: flex-start; gap: 9px; padding-block: 19px; }
  .page-intro { padding: 25px 0 30px; }
  .back-link { margin-bottom: 28px; font-size: 11px; }
  .page-intro h1 { font-size: 39px; letter-spacing: -1.8px; line-height: 1.1; overflow-wrap: anywhere; }
  .page-description { font-size: 15px; margin-top: 18px; }
  .updated { font-size: 10px; margin-top: 20px; }
  .legal-layout { padding-top: 28px; gap: 27px; }
  .legal-sidebar nav { gap: 7px 17px; }
  .legal-sidebar nav a { font-size: 11px; }
  .legal-note { gap: 11px; padding: 16px; font-size: 12px; margin-bottom: 28px; }
  .legal-note .icon { width: 18px; height: 18px; }
  .legal-section { scroll-margin-top: 25px; padding-bottom: 25px; margin-bottom: 24px; }
  .legal-section h2 { font-size: 22px; letter-spacing: -.5px; }
  .legal-section h3 { font-size: 15px; }
  .legal-section p { font-size: 13px; line-height: 1.9; }
  .request-panel { padding: 22px 18px; }
  .request-panel .button { font-size: 12px; gap: 10px; padding-inline: 16px; width: 100%; }
  .request-panel h3 { font-size: 18px; }
  .request-panel p.small-note { font-size: 11px; }
  .legal-main, .support-main { padding-bottom: 45px; }
  .support-main-email { font-size: 20px; gap: 10px; }
  .support-main-email .icon { width: 18px; height: 18px; }
  .support-grid { grid-template-columns: 1fr; padding-block: 29px; gap: 18px; }
  .support-card { padding: 25px; }
  .support-card h2 { font-size: 23px; }
  .support-card > p { font-size: 13px; }
  .support-card .text-link { font-size: 13px; }
  .support-guidance h2 { font-size: 24px; }
  .support-guidance p { font-size: 13px; }
  .not-found { padding-block: 70px 90px; }
  .not-found h1 { font-size: 43px; letter-spacing: -1.8px; }
}
@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .hero h1 { font-size: 45px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .8px; }
  .hero-actions { gap: 16px; }
  .hero-actions .button { font-size: 11px; padding-inline: 14px; gap: 8px; }
  .hero-actions .text-link { font-size: 11px; }
  .hero-footnote { font-size: 9px; }
  .phone-mockup { width: 251px; }
  .features-grid { gap: 20px; }
  .feature h3 { font-size: 14px; }
  .principles p { font-size: 8px; }
  .page-intro h1 { font-size: 34px; }
  .large-masked-id { font-size: 24px; letter-spacing: 2px; }
  .identity-row { font-size: 9px; }
  .visual-label { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .legal-sidebar, .back-link, .skip-link { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .container { width: 100%; }
  .legal-layout { display: block; }
  .page-intro { padding-top: 0; }
  .page-intro h1 { font-size: 30pt; }
  .legal-content { max-width: none; }
  .legal-section p { font-size: 11pt; color: #111; }
  .legal-note, .request-panel { background: #fff; border-color: #aaa; }
  .legal-section h2 { break-after: avoid; }
  .request-panel { break-inside: avoid; }
  .legal-section { margin-bottom: 18pt; padding-bottom: 18pt; }
}

/* Homepage v2 — cleaner, more modern layout inspired by the clarity of contemporary fintech landing pages. */
.page-home-modern {
  background:
    radial-gradient(circle at top left, rgba(9,154,199,.12), transparent 28%),
    radial-gradient(circle at 90% 14%, rgba(237,39,36,.08), transparent 24%),
    #ffffff;
}
.page-home-modern .site-header {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: rgba(213,226,234,.9);
}
.page-home-modern .header-inner {
  min-height: 84px;
}
.page-home-modern .primary-nav {
  gap: 28px;
  font-size: 14px;
}
.page-home-modern .header-cta {
  background: linear-gradient(180deg, #ffffff 0%, #eff7fb 100%);
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: 0 6px 20px rgba(16,42,54,.06);
}
.button-light,
.button-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
}
.button-light {
  background: #ffffff;
  border: 1px solid #dce8ee;
  color: var(--ink);
  box-shadow: 0 10px 25px rgba(20,41,47,.06);
}
.button-light:hover {
  background: #f7fbfc;
  color: var(--ink);
}
.button-soft {
  background: #edf7fb;
  color: var(--blue-dark);
  border: 1px solid #daebf2;
}
.button-soft:hover {
  background: #e3f3f9;
  color: var(--blue-dark);
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid #dce8ee;
  box-shadow: 0 8px 20px rgba(20,41,47,.05);
  font-size: 11px;
  letter-spacing: 1.25px;
  font-weight: 750;
  color: var(--blue-dark);
}
.home-hero {
  padding: 42px 0 34px;
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
  align-items: center;
  gap: 48px;
}
.home-hero-copy h1 {
  margin-top: 22px;
  font-size: clamp(52px, 5vw, 78px);
  line-height: 1.01;
  letter-spacing: -3.8px;
  max-width: 680px;
}
.home-hero-copy h1 span {
  color: var(--blue);
}
.hero-lead {
  max-width: 610px;
  margin-top: 24px;
  color: var(--body);
  font-size: 19px;
  line-height: 1.8;
}
.modern-actions {
  margin-top: 34px;
  gap: 14px;
}
.hero-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
}
.hero-proof-grid div {
  background: rgba(255,255,255,.85);
  border: 1px solid #e2edf2;
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 12px 30px rgba(15,33,40,.05);
}
.hero-proof-grid strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
}
.hero-proof-grid span {
  display: block;
  margin-top: 7px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.7;
}
.home-hero-visual {
  position: relative;
  min-height: 700px;
}
.hero-device-shell {
  position: relative;
  min-height: 700px;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
}
.hero-glow-one {
  width: 340px;
  height: 340px;
  top: 28px;
  right: 22px;
  background: radial-gradient(circle, rgba(9,154,199,.22) 0%, rgba(9,154,199,0) 70%);
}
.hero-glow-two {
  width: 280px;
  height: 280px;
  bottom: 30px;
  left: 18px;
  background: radial-gradient(circle, rgba(237,39,36,.14) 0%, rgba(237,39,36,0) 72%);
}
.hero-phone-large {
  position: absolute;
  inset: 76px 66px 78px 94px;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
  border: 1px solid #dbe8ee;
  border-radius: 38px;
  box-shadow: 0 36px 80px rgba(18,39,50,.16);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.phone-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #6d7c82;
  padding: 0 8px 8px;
}
.phone-pill {
  width: 78px;
  height: 8px;
  border-radius: 999px;
  background: #152c31;
}
.phone-screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 12px 16px;
}
.small-kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 750;
  color: #6a7c83;
}
.phone-screen-head h2 {
  margin-top: 8px;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -1.2px;
}
.screen-badge {
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #edf8fc;
  color: var(--blue-dark);
}
.screen-search {
  margin: 0 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f5f9fb;
  color: #708088;
  font-size: 13px;
}
.screen-chip-row {
  display: flex;
  gap: 10px;
  padding: 16px 10px 14px;
}
.screen-chip-row span {
  padding: 9px 14px;
  border-radius: 999px;
  background: #f3f7f9;
  color: #678;
  font-size: 12px;
  font-weight: 650;
}
.screen-chip-row .active {
  background: #0b98c51a;
  color: var(--blue-dark);
}
.chat-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 10px 0;
}
.chat-row-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e4edf1;
  box-shadow: 0 10px 24px rgba(17,37,48,.05);
}
.chat-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
}
.chat-avatar.cyan { background: #ddf2fa; color: #136e89; }
.chat-avatar.coral { background: #ffefed; color: #b8534f; }
.chat-avatar.mint { background: #e4f8f0; color: #3a7f67; }
.chat-info { min-width: 0; flex: 1; }
.chat-info strong {
  display: block;
  font-size: 15px;
  line-height: 1.35;
}
.chat-info span {
  display: block;
  margin-top: 4px;
  color: #6a7c83;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-size: 11px;
  color: #7a8a91;
}
.chat-side b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-dark);
  color: #fff;
  font-size: 11px;
}
.screen-bottom-nav {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 14px 12px;
  color: #6f7f86;
  font-size: 12px;
  border-top: 1px solid #e6eef2;
}
.screen-bottom-nav .active {
  color: var(--blue-dark);
  font-weight: 700;
}
.hero-device-card {
  position: absolute;
  background: rgba(255,255,255,.92);
  border: 1px solid #dce8ee;
  box-shadow: 0 24px 50px rgba(18,39,50,.12);
  backdrop-filter: blur(8px);
}
.top-card {
  top: 12px;
  left: 0;
  z-index: 3;
  width: 240px;
  border-radius: 24px;
  padding: 18px 20px;
}
.top-card strong {
  display: block;
  margin-top: 8px;
  font-size: 20px;
}
.big-code {
  display: block;
  margin-top: 8px;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 750;
}
.small-text {
  display: block;
  margin-top: 10px;
  color: var(--body);
  font-size: 12px;
  line-height: 1.65;
}
.side-card {
  right: 0;
  bottom: 54px;
  z-index: 3;
  width: 266px;
  border-radius: 26px;
  padding: 18px;
}
.feature-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
}
.feature-check + .feature-check {
  border-top: 1px solid #e7eef2;
}
.feature-check span {
  margin-top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--red), #ff706d);
  flex: none;
}
.feature-check strong {
  display: block;
  font-size: 14px;
}
.feature-check small {
  display: block;
  margin-top: 4px;
  color: var(--body);
  font-size: 12px;
  line-height: 1.6;
}
.home-logos-strip {
  padding: 6px 0 24px;
}
.logos-strip-inner {
  border: 1px solid #dce8ee;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(18,39,50,.05);
  border-radius: 24px;
  padding: 22px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.strip-label {
  margin: 0;
  color: #6b7b82;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 750;
  letter-spacing: 1.5px;
  flex: none;
}
.strip-points {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  justify-content: flex-end;
}
.strip-points span {
  padding: 10px 14px;
  border-radius: 999px;
  background: #f4f9fb;
  color: #3d5963;
  font-size: 13px;
  font-weight: 600;
}
.modern-section-intro {
  padding-top: 76px;
  padding-bottom: 52px;
}
.modern-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 36px;
  align-items: end;
}
.modern-heading h2,
.privacy-modern-grid h2,
.showcase-card h2,
.download-modern-panel h2 {
  font-size: clamp(36px, 3.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -2px;
  margin-top: 18px;
}
.section-side-copy {
  color: var(--body);
  font-size: 15px;
  line-height: 1.9;
  max-width: 430px;
  justify-self: end;
}
.modern-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.modern-feature-card {
  min-height: 220px;
  border-radius: 28px;
  padding: 26px;
  border: 1px solid #dfeaf0;
  background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
  box-shadow: 0 16px 40px rgba(18,39,50,.06);
}
.feature-card-large,
.feature-card-accent {
  background: linear-gradient(180deg, #f7fbfd 0%, #eef8fc 100%);
}
.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #eef8fc;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 750;
}
.modern-feature-card h3 {
  margin-top: 26px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.5px;
}
.modern-feature-card p {
  margin-top: 12px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.9;
}
.privacy-modern-section {
  padding: 24px 0 56px;
}
.privacy-modern-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr);
  gap: 40px;
  align-items: center;
}
.privacy-copy-block p:not(.eyebrow) {
  color: var(--body);
  font-size: 15px;
  line-height: 1.95;
  margin-top: 22px;
  max-width: 660px;
}
.privacy-modern-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 26px;
}
.privacy-modern-links .text-link {
  color: var(--blue-dark);
}
.privacy-panel-stack {
  position: relative;
  min-height: 450px;
}
.privacy-panel {
  border-radius: 30px;
  border: 1px solid #dfeaf0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: 0 24px 60px rgba(18,39,50,.08);
}
.main-panel {
  position: absolute;
  inset: 20px 20px 30px 0;
  padding: 30px;
}
.privacy-panel-number {
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 3px;
  font-weight: 750;
  margin-top: 20px;
}
.privacy-panel-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.privacy-panel-list div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #e7eef2;
  font-size: 14px;
}
.privacy-panel-list span {
  color: var(--body);
}
.privacy-panel-list strong {
  color: var(--blue-dark);
  font-size: 13px;
}
.mini-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 240px;
  padding: 22px 20px;
}
.mini-panel strong {
  display: block;
  font-size: 19px;
  line-height: 1.3;
}
.mini-panel p {
  margin-top: 10px;
  color: var(--body);
  font-size: 13px;
  line-height: 1.75;
}
.split-showcase {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 54px;
}
.showcase-card {
  border-radius: 30px;
  padding: 34px;
  border: 1px solid #dfeaf0;
}
.showcase-card-dark {
  background: linear-gradient(160deg, #11272f 0%, #1b3d48 100%);
  color: #fff;
  border-color: #11272f;
}
.eyebrow-light {
  color: #9ec8d6;
}
.showcase-card-dark h2 {
  color: #fff;
}
.timeline-steps {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.timeline-steps article {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.timeline-steps article:first-child {
  border-top: 0;
  padding-top: 0;
}
.timeline-steps article span {
  min-width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}
.timeline-steps h3 {
  font-size: 20px;
  line-height: 1.35;
}
.timeline-steps p {
  margin-top: 8px;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.8;
}
.showcase-card-light {
  background: linear-gradient(180deg, #fff 0%, #fbfdfe 100%);
  box-shadow: 0 16px 40px rgba(18,39,50,.05);
}
.showcase-card-light h2 {
  margin-top: 18px;
}
.showcase-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}
.showcase-checklist div {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 18px;
  background: #f4f9fb;
}
.showcase-checklist span {
  margin-top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
.showcase-checklist p {
  color: var(--body);
  font-size: 14px;
  line-height: 1.8;
}
.showcase-card-light .button-soft {
  margin-top: 24px;
}
.modern-faq {
  padding-top: 18px;
}
.download-modern {
  padding-top: 20px;
  padding-bottom: 84px;
}
.download-modern-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 34px;
  padding: 42px 44px;
  border-radius: 30px;
  background: linear-gradient(135deg, #132e37 0%, #0e788f 100%);
  color: #fff;
  box-shadow: 0 26px 60px rgba(17,44,54,.16);
}
.download-modern-panel .eyebrow {
  color: #a8d6e4;
}
.download-modern-panel h2 {
  color: #fff;
  max-width: 700px;
}
.download-modern-panel p:not(.eyebrow) {
  margin-top: 14px;
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.85;
  max-width: 700px;
}
.download-modern-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.download-modern-actions .button-dark {
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
}
.download-modern-actions .button-dark:hover {
  background: #f5f9fb;
  color: var(--ink);
}
.download-modern-actions .download-help {
  color: rgba(255,255,255,.82);
  font-size: 13px;
  text-decoration: underline;
}
@media (max-width: 1180px) {
  .home-hero-grid,
  .modern-heading,
  .privacy-modern-grid,
  .split-showcase,
  .download-modern-panel {
    grid-template-columns: 1fr;
  }
  .section-side-copy {
    justify-self: start;
    max-width: 700px;
  }
  .home-hero-visual {
    min-height: 640px;
  }
  .hero-device-shell {
    min-height: 640px;
    max-width: 720px;
    margin: 0 auto;
  }
  .download-modern-panel {
    align-items: flex-start;
  }
  .download-modern-actions {
    align-items: flex-start;
  }
}
@media (max-width: 980px) {
  .page-home-modern .primary-nav {
    display: none;
  }
  .home-hero {
    padding-top: 24px;
  }
  .hero-proof-grid,
  .modern-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
  .logos-strip-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .strip-points {
    justify-content: flex-start;
  }
  .hero-phone-large {
    inset: 74px 44px 74px 70px;
  }
  .top-card {
    width: 215px;
  }
  .side-card {
    width: 240px;
  }
}
@media (max-width: 760px) {
  .container {
    width: calc(100% - 36px);
  }
  .page-home-modern .header-inner {
    gap: 18px;
    min-height: 76px;
  }
  .page-home-modern .brand img {
    width: 124px;
  }
  .page-home-modern .header-cta {
    margin-left: auto;
    font-size: 13px;
    padding: 10px 14px;
  }
  .home-hero-copy h1 {
    font-size: clamp(40px, 11vw, 56px);
    letter-spacing: -2.5px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-proof-grid,
  .modern-feature-grid,
  .split-showcase,
  .faq-section,
  .footer-top {
    grid-template-columns: 1fr;
  }
  .hero-actions,
  .privacy-modern-links {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-hero-visual,
  .hero-device-shell,
  .privacy-panel-stack {
    min-height: auto;
  }
  .hero-device-shell {
    padding-top: 16px;
  }
  .hero-phone-large,
  .top-card,
  .side-card,
  .main-panel,
  .mini-panel {
    position: relative;
    inset: auto;
    width: 100%;
  }
  .hero-phone-large {
    min-height: 570px;
    padding: 14px;
  }
  .top-card,
  .side-card,
  .mini-panel {
    margin-bottom: 16px;
  }
  .home-hero-visual {
    order: 2;
  }
  .home-hero-copy {
    order: 1;
  }
  .screen-bottom-nav {
    font-size: 11px;
  }
  .modern-heading h2,
  .privacy-modern-grid h2,
  .showcase-card h2,
  .download-modern-panel h2 {
    font-size: clamp(31px, 8vw, 40px);
    letter-spacing: -1.3px;
  }
  .showcase-card,
  .download-modern-panel,
  .modern-feature-card,
  .logos-strip-inner,
  .hero-proof-grid div {
    padding-left: 22px;
    padding-right: 22px;
  }
  .download-modern-actions,
  .download-modern-actions .button-dark {
    width: 100%;
  }
  .download-modern-actions .button-dark {
    justify-content: space-between;
  }
  .faq-section {
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 520px) {
  .page-home-modern .header-cta {
    font-size: 12px;
    padding: 9px 12px;
  }
  .hero-proof-grid,
  .modern-feature-grid {
    grid-template-columns: 1fr;
  }
  .home-hero-copy h1 {
    margin-top: 18px;
  }
  .hero-lead {
    margin-top: 18px;
    line-height: 1.75;
  }
  .phone-screen-head h2 {
    font-size: 28px;
  }
  .privacy-panel-number,
  .big-code {
    font-size: 19px;
    letter-spacing: 1.5px;
  }
  .privacy-panel-list div {
    flex-direction: column;
    gap: 6px;
  }
  .screen-chip-row {
    flex-wrap: wrap;
  }
}

/* Homepage v3 — editorial/product-story layout inspired by Floaro's visual rhythm. */
.page-home-floaro {
  --f-ink: #132a30;
  --f-blue: #089ac8;
  --f-blue-dark: #037e9f;
  --f-red: #ef2926;
  --f-soft: #f2f7f9;
  --f-line: #dfe9ed;
  --f-paper: #ffffff;
  background: #fff;
}
.page-home-floaro .container { width: min(1240px, calc(100% - 72px)); }
.f-announcement {
  background: var(--f-ink);
  color: #fff;
  text-align: center;
  font-size: 12px;
  letter-spacing: .02em;
}
.f-announcement a { display: block; padding: 10px 20px; color: #fff; }
.f-announcement span { margin-left: 8px; color: #a7d9e6; }
.page-home-floaro .f-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--f-line);
}
.page-home-floaro .header-inner { min-height: 82px; gap: 30px; }
.page-home-floaro .brand img { width: 128px; }
.page-home-floaro .primary-nav { gap: 25px; margin-left: auto; font-size: 13px; }
.page-home-floaro .primary-nav a { color: #314c54; }
.f-header-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid #cfe0e6;
  border-radius: 10px;
  color: var(--f-ink);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
}
.f-header-cta:hover { background: #f3f8fa; color: var(--f-ink); }
.f-kicker {
  color: var(--f-blue-dark);
  font-size: 10.5px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 1.7px;
}
.f-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr);
  gap: 48px;
  align-items: center;
  min-height: 760px;
  padding-top: 50px;
  padding-bottom: 66px;
}
.f-hero-copy h1 {
  margin-top: 24px;
  max-width: 690px;
  color: var(--f-ink);
  font-size: clamp(60px, 6vw, 88px);
  line-height: .98;
  letter-spacing: -4.8px;
  font-weight: 650;
}
.f-hero-copy h1 span { color: var(--f-blue); }
.f-hero-text {
  margin-top: 28px;
  max-width: 580px;
  color: #52656c;
  font-size: 18px;
  line-height: 1.78;
}
.f-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 34px;
}
.f-primary-button,
.f-final-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 15px 21px;
  border-radius: 10px;
  background: var(--f-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.f-primary-button:hover,
.f-final-button:hover { color: #fff; background: #24454d; }
.f-plain-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--f-ink);
  font-size: 14px;
  font-weight: 700;
}
.f-plain-link:hover { color: var(--f-blue-dark); }
.f-hero-note {
  margin-top: 22px;
  color: #6d7c82;
  font-size: 12px;
}
.f-hero-art {
  position: relative;
  min-height: 650px;
}
.f-art-shape {
  position: absolute;
  border-radius: 50%;
}
.f-art-shape-blue {
  width: 460px;
  height: 460px;
  top: 88px;
  left: 72px;
  border: 1px solid #d9eaf0;
  background: radial-gradient(circle at 50% 50%, rgba(10,157,202,.12), rgba(10,157,202,0) 68%);
}
.f-art-shape-red {
  width: 180px;
  height: 180px;
  right: 4px;
  bottom: 46px;
  background: radial-gradient(circle, rgba(239,41,38,.13), rgba(239,41,38,0) 70%);
}
.f-phone {
  position: absolute;
  z-index: 2;
  top: 56px;
  left: 50%;
  width: 330px;
  height: 590px;
  transform: translateX(-50%) rotate(-2deg);
  background: #fff;
  border: 1px solid #d6e3e8;
  border-radius: 42px;
  box-shadow: 0 34px 72px rgba(26,58,67,.16);
  padding: 16px;
  overflow: hidden;
}
.f-phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 10px;
  color: #52646b;
  font-size: 10px;
}
.f-dynamic { width: 72px; height: 8px; background: #172f35; border-radius: 999px; }
.f-phone-title { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 8px 12px; }
.f-phone-title > div > span { color: #7b8b91; font-size: 8px; letter-spacing: 1.3px; font-weight: 800; }
.f-phone-title h2 { margin-top: 5px; font-size: 29px; letter-spacing: -1px; }
.f-phone-title > b { width: 34px; height: 34px; border-radius: 50%; background: #e9f6fb; color: var(--f-blue-dark); display: grid; place-items: center; font-size: 21px; }
.f-phone-search { margin: 0 6px; padding: 12px 14px; border-radius: 12px; background: #f3f7f9; color: #74858b; font-size: 11px; }
.f-phone-tabs { display: flex; gap: 6px; padding: 14px 6px 12px; border-bottom: 1px solid #e9eff2; }
.f-phone-tabs span { padding: 7px 10px; border-radius: 999px; color: #708087; font-size: 9px; }
.f-phone-tabs .active { background: #e8f6fb; color: var(--f-blue-dark); font-weight: 700; }
.f-chat-list { padding-top: 6px; }
.f-chat { display: flex; align-items: center; gap: 10px; min-height: 67px; padding: 10px 6px; border-bottom: 1px solid #edf2f4; }
.f-chat i { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; }
.f-chat i.blue { background: #dcf1f8; color: #18718a; }
.f-chat i.sand { background: #f3ecdd; color: #846d49; }
.f-chat i.mint { background: #e4f6ee; color: #4a7d69; }
.f-chat i.rose { background: #fae9e8; color: #ac5c58; }
.f-chat > div { min-width: 0; flex: 1; }
.f-chat strong { display: block; font-size: 12px; }
.f-chat div span { display: block; margin-top: 3px; color: #6d7d83; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-chat em { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; font-style: normal; color: #7b8a90; }
.f-chat em small { font-size: 8px; }
.f-chat em b { width: 16px; height: 16px; border-radius: 50%; background: var(--f-blue-dark); color: #fff; display: grid; place-items: center; font-size: 8px; }
.f-phone-nav { position: absolute; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: space-around; padding: 14px 4px 6px; border-top: 1px solid #e8eff1; color: #708087; font-size: 8px; }
.f-phone-nav .active { color: var(--f-blue-dark); font-weight: 700; }
.f-id-float,
.f-private-float {
  position: absolute;
  z-index: 3;
  background: rgba(255,255,255,.96);
  border: 1px solid #dce8ec;
  border-radius: 15px;
  box-shadow: 0 18px 36px rgba(17,41,50,.09);
}
.f-id-float { top: 0; right: 0; width: 250px; padding: 18px 20px; transform: rotate(2deg); }
.f-private-float { bottom: 18px; left: 0; width: 230px; padding: 18px 20px; transform: rotate(-2deg); }
.f-mini { display: block; color: #718188; font-size: 8px; letter-spacing: 1.25px; font-weight: 800; }
.f-id-float strong { display: block; margin-top: 6px; color: var(--f-ink); font-size: 20px; letter-spacing: 2px; }
.f-id-float small,
.f-private-float small { display: block; margin-top: 6px; color: #6d7d83; font-size: 10px; }
.f-private-float strong { display: block; margin-top: 7px; font-size: 16px; }
.f-intro { padding-top: 86px; padding-bottom: 70px; border-top: 1px solid var(--f-line); }
.f-intro-title { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 70px; align-items: end; margin-top: 22px; }
.f-intro-title h2,
.f-story-head h2,
.f-platform-inner h2,
.f-privacy h2,
.f-showcase-title h2,
.f-how h2,
.f-faq h2,
.f-final-card h2 {
  color: var(--f-ink);
  font-size: clamp(46px, 4.5vw, 66px);
  line-height: 1.03;
  letter-spacing: -3px;
}
.f-intro-title h2 span,
.f-privacy h2 span,
.f-final-card h2 span { color: var(--f-blue); }
.f-intro-title p { max-width: 470px; color: #55676e; font-size: 15px; line-height: 1.9; }
.f-word-row { display: flex; flex-wrap: wrap; gap: 12px 42px; margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--f-line); }
.f-word-row span { color: #27464e; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
.f-product-story { padding-top: 38px; padding-bottom: 90px; }
.f-story-head { max-width: 820px; }
.f-story-head h2 { margin-top: 18px; }
.f-story-grid { display: grid; grid-template-columns: 1.18fr .91fr .91fr; gap: 20px; margin-top: 38px; }
.f-story-card { min-width: 0; padding: 24px; border: 1px solid var(--f-line); border-radius: 18px; background: #fff; }
.f-card-label { color: #6e7e85; font-size: 9px; letter-spacing: 1.3px; font-weight: 800; }
.f-card-visual { min-height: 250px; margin-top: 18px; border-radius: 14px; background: #f2f7f9; padding: 22px; overflow: hidden; }
.f-story-card h3 { margin-top: 24px; font-size: 24px; line-height: 1.2; letter-spacing: -.6px; }
.f-story-card > p { margin-top: 12px; color: #5d6f76; font-size: 13px; line-height: 1.85; }
.chat-visual { display: flex; flex-direction: column; justify-content: center; gap: 16px; background: linear-gradient(150deg,#edf8fb,#f8fbfc); }
.f-message { max-width: 82%; padding: 13px 15px; border-radius: 16px; font-size: 12px; line-height: 1.6; }
.f-message.incoming { align-self: flex-start; background: #fff; border: 1px solid #e0eaee; }
.f-message.outgoing { align-self: flex-end; background: #099ac7; color: #fff; }
.f-voice-line { display: flex; gap: 11px; align-items: center; align-self: flex-end; width: 78%; padding: 13px 14px; border-radius: 16px; background: #fff; border: 1px solid #e0eaee; }
.f-voice-line span { color: var(--f-blue-dark); }
.f-voice-line div { height: 2px; flex: 1; background: linear-gradient(90deg,#0b98c6 42%,#d6e3e8 42%); }
.f-voice-line small { color: #6d7d83; font-size: 9px; }
.call-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #152f37; color: #fff; }
.f-call-person { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #dff3fa; color: #146f88; font-size: 23px; font-weight: 800; }
.call-visual strong { margin-top: 15px; font-size: 22px; }
.call-visual > span { margin-top: 5px; color: #aac1c9; font-size: 11px; }
.f-call-controls { display: flex; gap: 13px; margin-top: 26px; }
.f-call-controls b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 11px; }
.f-call-controls b.hang { background: #ef3c37; font-size: 22px; }
.share-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #fff7f6; }
.share-visual div { min-height: 92px; border-radius: 12px; padding: 14px; background: #fff; border: 1px solid #f1dfdd; display: flex; flex-direction: column; justify-content: space-between; }
.share-visual div:last-child { grid-column: 1 / -1; }
.share-visual span { color: #8b7270; font-size: 8px; letter-spacing: 1.2px; font-weight: 800; }
.share-visual b { color: var(--f-red); font-size: 26px; }
.f-platform-band { background: #122b33; color: #fff; }
.f-platform-inner { padding-top: 82px; padding-bottom: 82px; }
.f-platform-band .f-kicker { color: #9cd0dd; }
.f-platform-inner h2 { max-width: 830px; margin-top: 18px; color: #fff; }
.f-platform-lead { max-width: 720px; margin-top: 22px; color: #c0d0d5; font-size: 15px; line-height: 1.9; }
.f-platform-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.f-platform-pills span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #d9e7ea; font-size: 11px; }
.f-privacy { display: grid; grid-template-columns: 1.02fr .98fr; gap: 70px; align-items: center; padding-top: 94px; padding-bottom: 94px; }
.f-privacy h2 { margin-top: 18px; }
.f-privacy-copy > p:not(.f-kicker) { max-width: 650px; margin-top: 22px; color: #55676e; font-size: 15px; line-height: 1.9; }
.f-privacy-copy > p.f-small-copy { font-size: 13px; color: #6a7b82; }
.f-privacy-copy .f-plain-link { margin-top: 24px; color: var(--f-blue-dark); }
.f-identity-card { position: relative; padding: 34px; border: 1px solid var(--f-line); border-radius: 20px; background: linear-gradient(150deg,#fff,#f1f8fa); box-shadow: 0 22px 50px rgba(20,49,58,.07); }
.f-identity-number { display: block; margin-top: 15px; color: var(--f-ink); font-size: 36px; letter-spacing: 4px; }
.f-identity-lines { margin-top: 28px; }
.f-identity-lines div { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid #dfe8ec; font-size: 12px; }
.f-identity-lines span { color: #687a81; }
.f-identity-lines b { color: var(--f-blue-dark); font-weight: 700; }
.f-identity-card > p { margin-top: 24px; color: #607279; font-size: 12px; line-height: 1.8; }
.f-feature-showcase { padding-top: 78px; padding-bottom: 96px; border-top: 1px solid var(--f-line); }
.f-showcase-title { max-width: 860px; }
.f-showcase-title h2 { margin-top: 18px; }
.f-showcase-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 38px; }
.f-feature-panel { border: 1px solid var(--f-line); border-radius: 18px; padding: 22px; background: #fff; }
.f-panel-top { display: flex; justify-content: space-between; gap: 12px; color: #6f7e85; font-size: 9px; letter-spacing: 1.2px; font-weight: 800; }
.f-panel-top b { color: var(--f-blue-dark); font-size: 15px; }
.f-hidden-ui,
.f-decoy-ui,
.f-id-ui { min-height: 248px; margin-top: 18px; border-radius: 14px; padding: 24px; background: #f2f7f9; }
.f-hidden-ui { display: flex; flex-direction: column; justify-content: center; }
.f-hidden-eye { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #e4f4fa; color: var(--f-blue-dark); font-size: 28px; }
.f-hidden-ui strong { margin-top: 16px; font-size: 21px; }
.f-hidden-ui p { margin-top: 8px; color: #687a80; font-size: 12px; line-height: 1.75; }
.f-toggle-line { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid #dce6ea; font-size: 10px; color: #687a80; }
.f-toggle-line i { width: 35px; height: 19px; border-radius: 999px; background: var(--f-blue); position: relative; }
.f-toggle-line i::after { content: ""; position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; }
.f-decoy-ui { background: #152f37; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.f-decoy-ui .f-mini { color: #a9c5cd; }
.f-pin-dots { display: flex; gap: 14px; margin-top: 22px; }
.f-pin-dots i { width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.f-decoy-caption { margin-top: 24px; color: #c0d1d6; font-size: 11px; }
.f-id-ui { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #fff5f4; }
.f-id-ui span { color: var(--f-red); font-size: 38px; line-height: 1; font-weight: 750; letter-spacing: 2px; }
.f-id-ui span + span { margin-top: 5px; }
.f-id-ui small { margin-top: 18px; color: #8a7775; font-size: 10px; }
.f-feature-panel h3 { margin-top: 24px; color: var(--f-ink); font-size: 21px; line-height: 1.28; }
.f-feature-panel > p { margin-top: 11px; color: #61727a; font-size: 12.5px; line-height: 1.85; }
.f-how { padding-top: 76px; padding-bottom: 90px; border-top: 1px solid var(--f-line); }
.f-how-head { max-width: 820px; }
.f-how h2 { margin-top: 18px; }
.f-how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 58px; margin-top: 42px; }
.f-how-grid article { border-top: 1px solid #bed2da; padding-top: 18px; }
.f-how-grid article > span { color: var(--f-blue-dark); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; }
.f-how-grid h3 { margin-top: 24px; font-size: 20px; }
.f-how-grid p { margin-top: 10px; color: #607179; font-size: 13px; line-height: 1.85; }
.f-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-top: 70px; padding-bottom: 90px; border-top: 1px solid var(--f-line); }
.f-faq h2 { margin-top: 18px; font-size: clamp(40px,4vw,56px); }
.f-faq-copy .f-plain-link { margin-top: 26px; color: var(--f-blue-dark); }
.page-home-floaro .faq-item summary { font-size: 14px; }
.page-home-floaro .faq-symbol { color: var(--f-blue-dark); font-size: 22px; }
.f-final { padding-bottom: 90px; }
.f-final-card { padding: 64px 58px; border-radius: 24px; background: #eef7fa; border: 1px solid #dceaf0; }
.f-final-card h2 { margin-top: 18px; max-width: 760px; }
.f-final-button { margin-top: 30px; }
.f-footer .footer-brand > p { max-width: 260px; }

@media (max-width: 1120px) {
  .page-home-floaro .container { width: calc(100% - 56px); }
  .page-home-floaro .primary-nav { gap: 16px; }
  .f-hero { grid-template-columns: 1fr 1fr; gap: 24px; }
  .f-hero-copy h1 { font-size: 66px; letter-spacing: -3.8px; }
  .f-story-grid { grid-template-columns: 1fr 1fr; }
  .f-story-large { grid-column: 1 / -1; }
  .f-showcase-grid { grid-template-columns: 1fr 1fr; }
  .f-id-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .page-home-floaro .primary-nav { display: none; }
  .f-hero,
  .f-intro-title,
  .f-privacy,
  .f-faq { grid-template-columns: 1fr; }
  .f-hero { min-height: 0; padding-top: 44px; }
  .f-hero-art { min-height: 650px; max-width: 620px; width: 100%; margin: 0 auto; }
  .f-intro-title { gap: 24px; }
  .f-intro-title p { max-width: 650px; }
  .f-how-grid { gap: 26px; }
  .f-faq { gap: 32px; }
}
@media (max-width: 700px) {
  .page-home-floaro .container { width: calc(100% - 36px); }
  .page-home-floaro .header-inner { min-height: 72px; }
  .page-home-floaro .brand img { width: 116px; }
  .f-header-cta { font-size: 12px; padding: 8px 12px; }
  .f-announcement { font-size: 10.5px; }
  .f-announcement a { padding: 9px 14px; }
  .f-hero-copy h1 { font-size: clamp(46px, 13vw, 62px); letter-spacing: -2.7px; }
  .f-hero-text { font-size: 16px; }
  .f-hero-art { min-height: auto; padding-top: 8px; }
  .f-phone,
  .f-id-float,
  .f-private-float,
  .f-art-shape { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none; }
  .f-art-shape { display: none; }
  .f-id-float,
  .f-private-float { width: 100%; margin-bottom: 14px; }
  .f-phone { width: 100%; height: 560px; }
  .f-intro,
  .f-product-story,
  .f-feature-showcase,
  .f-how { padding-top: 64px; padding-bottom: 64px; }
  .f-intro-title h2,
  .f-story-head h2,
  .f-platform-inner h2,
  .f-privacy h2,
  .f-showcase-title h2,
  .f-how h2,
  .f-faq h2,
  .f-final-card h2 { font-size: clamp(38px, 10vw, 50px); letter-spacing: -2px; }
  .f-story-grid,
  .f-showcase-grid,
  .f-how-grid { grid-template-columns: 1fr; }
  .f-story-large,
  .f-id-panel { grid-column: auto; }
  .f-privacy { gap: 36px; padding-top: 66px; padding-bottom: 66px; }
  .f-identity-number { font-size: 27px; letter-spacing: 2px; }
  .f-identity-lines div { flex-direction: column; gap: 5px; }
  .f-platform-inner { padding-top: 60px; padding-bottom: 60px; }
  .f-final-card { padding: 42px 26px; }
  .f-faq { padding-top: 60px; padding-bottom: 66px; }
  .page-home-floaro .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .f-hero-actions { align-items: stretch; flex-direction: column; }
  .f-primary-button { justify-content: space-between; }
  .f-word-row { gap: 12px 24px; }
  .f-card-visual { min-height: 220px; }
  .page-home-floaro .footer-top { grid-template-columns: 1fr; }
}

/* Homepage v4 — matched to provided mockup style */
:root {
  --s-blue: #1ca0e2;
  --s-blue-dark: #0c4f86;
  --s-red: #f25a5d;
  --s-ink: #102b49;
  --s-body: #5c6b7e;
  --s-line: #dfe8f1;
  --s-soft: #eef6fb;
  --s-soft-2: #f7fbfe;
  --s-dark: #072748;
}
.page-home-showcase {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  color: var(--s-ink);
}
.page-home-showcase .container {
  width: min(1240px, calc(100% - 64px));
}
.s-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--s-line);
}
.s-header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.page-home-showcase .brand img {
  width: 112px;
}
.s-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.s-nav a {
  font-size: 12px;
  font-weight: 600;
  color: #44566b;
}
.s-nav a:hover {
  color: var(--s-blue-dark);
}
.s-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--s-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(28,160,226,.22);
}
.s-header-cta:hover { color: #fff; background: #148fd0; }
.s-hero {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 28px;
  padding-top: 34px;
  padding-bottom: 30px;
}
.s-kicker {
  font-size: 9.6px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 1.75px;
  color: var(--s-blue);
}
.s-kicker.light { color: #83c0f0; }
.s-hero-copy h1 {
  margin-top: 18px;
  font-size: clamp(52px, 5.4vw, 72px);
  line-height: .98;
  letter-spacing: -3.4px;
  font-weight: 800;
}
.s-hero-copy h1 span,
.s-section-copy h2 span,
.s-center-head h2 span,
.s-band-copy h2 span {
  color: var(--s-blue);
}
.s-hero-text {
  max-width: 420px;
  margin-top: 22px;
  color: var(--s-body);
  font-size: 15px;
  line-height: 1.85;
}
.s-store-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 148px;
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #050505;
  color: #fff;
  box-shadow: 0 10px 20px rgba(5,5,5,.13);
}
.store-badge:hover { color: #fff; background: #151515; }
.store-badge-secondary {
  background: #111;
}
.store-badge-icon {
  width: 22px;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  flex: none;
}
.store-badge-icon.play {
  width: 0;
  height: 0;
  border-left: 14px solid #63d86c;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  position: relative;
}
.store-badge-icon.play::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -10px;
  width: 0;
  height: 0;
  border-left: 12px solid rgba(63,148,243,.95);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.store-badge-text small {
  font-size: 9px;
  letter-spacing: .45px;
}
.store-badge-text strong {
  margin-top: 1px;
  font-size: 16px;
  font-weight: 700;
}
.s-hero-note {
  margin-top: 16px;
  font-size: 12px;
  color: #708095;
}
.s-hero-visual {
  min-height: 550px;
  position: relative;
}
.s-blue-cloud,
.s-red-cloud,
.s-cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.s-blue-cloud {
  width: 260px;
  height: 180px;
  bottom: 28px;
  right: 0;
  background: radial-gradient(circle, rgba(28,160,226,.22) 0%, rgba(28,160,226,0) 72%);
}
.s-red-cloud {
  width: 250px;
  height: 210px;
  bottom: 50px;
  left: 80px;
  background: radial-gradient(circle, rgba(242,90,93,.22) 0%, rgba(242,90,93,0) 72%);
}
.s-note-top {
  position: absolute;
  top: 12px;
  right: 10px;
  font-size: 16px;
  line-height: 1.22;
  color: var(--s-blue-dark);
  font-style: italic;
  text-align: right;
  transform: rotate(-3deg);
}
.s-note-top::after {
  content: "↘";
  position: absolute;
  right: 16px;
  bottom: -26px;
  font-size: 24px;
  color: #7db7dd;
}
.s-phone {
  position: absolute;
  border-radius: 32px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 25px 55px rgba(16,43,73,.18);
}
.s-phone-back {
  right: 18px;
  top: 82px;
  width: 228px;
  height: 410px;
  background: linear-gradient(180deg, #04172d 0%, #0a2745 100%);
  transform: rotate(-2deg);
}
.s-phone-front {
  left: 70px;
  top: 26px;
  width: 265px;
  height: 470px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  transform: rotate(-6deg);
  z-index: 2;
}
.s-phone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  color: #dae7f6;
  font-size: 10px;
  line-height: 1;
}
.s-phone-topbar.light { color: #7d8da0; }
.s-phone-topbar .dynamic {
  width: 62px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .95;
}
.s-dark-screen {
  padding: 28px 22px 20px;
  color: #fff;
  text-align: center;
}
.s-call-avatar,
.s-card-call-avatar {
  width: 86px;
  height: 86px;
  margin: 28px auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 28%, #ffe8db 0 18%, #b87a5e 18% 33%, #1b3554 34% 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.22);
}
.s-dark-screen strong {
  display: block;
  font-size: 26px;
}
.s-dark-screen > span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
}
.s-call-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 58px;
}
.s-call-actions i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  font-style: normal;
  font-size: 16px;
}
.s-front-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
}
.s-front-head img {
  width: 76px;
}
.s-front-head span {
  font-size: 12px;
  color: var(--s-blue-dark);
}
.s-search {
  margin: 0 14px 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f3f7fb;
  color: #7e8b9f;
  font-size: 11px;
}
.s-chat-list {
  padding: 0 12px;
}
.s-chat-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #eef3f8;
}
.s-chat-row b {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.s-chat-row b.cyan { background: #dbf1ff; color: #2577a0; }
.s-chat-row b.blue { background: #e5f0ff; color: #4669c1; }
.s-chat-row b.peach { background: #ffebe4; color: #bb6f4f; }
.s-chat-row b.mint { background: #dff7ef; color: #2d8266; }
.s-chat-row b.sky { background: #ecf7ff; color: #3b88ba; }
.s-chat-row b.rose { background: #ffe8ee; color: #bf5577; }
.s-chat-row strong { display: block; font-size: 12.5px; line-height: 1.3; }
.s-chat-row small { display: block; margin-top: 2px; color: #7d8ca0; font-size: 10px; }
.s-chat-row em { font-style: normal; color: #7d8ca0; font-size: 10px; }
.s-add-button {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--s-blue);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(28,160,226,.24);
}
.s-id-card {
  position: absolute;
  right: 40px;
  bottom: 50px;
  z-index: 3;
  min-width: 196px;
  padding: 16px 18px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  border: 1px solid #dde9f3;
  box-shadow: 0 18px 34px rgba(16,43,73,.12);
}
.s-id-label {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #7a8aa0;
}
.s-id-card strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
  letter-spacing: 2.2px;
}
.s-id-card small {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  color: #8090a3;
}
.s-trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-bottom: 36px;
}
.s-trust-row article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
  border: 1px solid #e5edf4;
}
.icon-box {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #edf6fd;
  font-size: 18px;
  flex: none;
}
.s-trust-row strong { display: block; font-size: 13px; line-height: 1.3; }
.s-trust-row small { display: block; margin-top: 3px; color: #728297; font-size: 11px; }
.s-connect-section {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 26px;
  align-items: center;
  padding-top: 28px;
  padding-bottom: 44px;
}
.s-section-copy h2,
.s-center-head h2,
.s-band-copy h2,
.s-cta-content h2 {
  margin-top: 12px;
  font-size: clamp(40px, 4vw, 60px);
  line-height: 1;
  letter-spacing: -2.6px;
  font-weight: 800;
}
.s-section-copy p:not(.s-kicker) {
  margin-top: 20px;
  max-width: 450px;
  color: var(--s-body);
  font-size: 15px;
  line-height: 1.85;
}
.s-feature-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.s-feature-icon-grid article {
  text-align: center;
  padding: 20px 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6eef5;
  box-shadow: 0 8px 20px rgba(16,43,73,.04);
}
.s-feature-icon-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #edf6fd;
  font-size: 22px;
}
.s-feature-icon-grid strong { display: block; margin-top: 12px; font-size: 14px; }
.s-feature-icon-grid small { display: block; margin-top: 6px; color: #74859a; font-size: 11px; }
.s-privacy-band {
  background: linear-gradient(135deg, #163d76 0%, #092746 100%);
  position: relative;
  overflow: hidden;
}
.s-privacy-band::before {
  content: "";
  position: absolute;
  inset: -10% auto auto -14%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,155,235,.25) 0%, rgba(70,155,235,0) 70%);
}
.s-privacy-band-inner {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 36px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}
.s-band-visual {
  position: relative;
  min-height: 420px;
}
.s-band-phone {
  position: absolute;
  left: 28px;
  top: 0;
  width: 270px;
  height: 400px;
  border-radius: 34px;
  border: 4px solid #fff;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  box-shadow: 0 28px 60px rgba(0,0,0,.25);
  transform: rotate(-5deg);
  overflow: hidden;
}
.s-band-chat-surface { padding: 20px 16px 16px; }
.s-band-bubble {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.55;
  margin-top: 12px;
}
.s-band-bubble.incoming { background: #f1f7fd; color: #4b607a; border-top-left-radius: 6px; }
.s-band-bubble.outgoing { margin-left: auto; background: #2f97ff; color: #fff; border-top-right-radius: 6px; }
.s-band-media-row,
.s-band-audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e7eef5;
  color: #4d6380;
  font-size: 12px;
}
.s-band-audio-row i {
  font-style: normal;
  color: var(--s-blue);
}
.s-band-audio-row div {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4ac0ff 0%, #9f79ff 50%, #4ac0ff 100%);
}
.s-band-lock-card {
  position: absolute;
  left: 0;
  bottom: 46px;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: linear-gradient(180deg, #19b2ff 0%, #2466ff 100%);
  box-shadow: 0 18px 30px rgba(13,108,197,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.s-band-copy {
  color: #fff;
}
.s-band-copy p:not(.s-kicker) {
  margin-top: 18px;
  max-width: 510px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.9;
}
.s-dark-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 13px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.s-dark-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.s-cards-section {
  padding-top: 56px;
  padding-bottom: 42px;
}
.s-center-head { text-align: center; }
.s-product-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.s-product-card {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid #e4ecf3;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16,43,73,.04);
}
.s-card-visual {
  height: 170px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.s-card-dark {
  background: linear-gradient(180deg, #03192e 0%, #0a2745 100%);
}
.s-secret-dots {
  position: absolute;
  left: 26px;
  top: 46px;
  display: flex;
  gap: 12px;
}
.s-secret-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dce6f4;
}
.s-mini-lock {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0ea5e9;
  color: #fff;
  font-size: 19px;
}
.s-card-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: #f2f8fd;
}
.s-card-gallery span {
  display: block;
  border-radius: 12px;
  background: linear-gradient(135deg, #7fcfff 0%, #4aa6db 40%, #1f6f99 100%);
}
.s-card-gallery span:first-child {
  grid-row: 1 / span 2;
  background: linear-gradient(135deg, #6ecbf8 0%, #87d1a6 44%, #5a7d2a 100%);
}
.s-card-call {
  background: linear-gradient(180deg, #f6fbff 0%, #e9f4fe 100%);
  text-align: center;
  padding-top: 10px;
}
.s-card-call-avatar {
  width: 84px;
  height: 84px;
  margin-top: 18px;
}
.s-card-call-bars {
  width: 88px;
  height: 12px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #48c4ff 0%, #5895ff 35%, #7c61ff 70%, #48c4ff 100%);
}
.s-card-groups {
  background: #f9fbfd;
  padding: 10px;
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 10px;
}
.s-mini-chat-col {
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e8eef4;
  padding: 12px;
}
.s-mini-chat-col b {
  display: block;
  font-size: 12px;
}
.s-mini-chat-col small {
  display: block;
  margin-top: 7px;
  color: #708094;
  font-size: 10px;
}
.s-mini-chat-col.right small {
  background: #eef4f9;
  padding: 6px 8px;
  border-radius: 999px;
}
.s-product-card h3 {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.35;
}
.s-product-card p {
  margin-top: 6px;
  color: var(--s-body);
  font-size: 12.5px;
  line-height: 1.7;
}
.s-cta-bottom {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #e4edf5;
  padding-top: 52px;
  padding-bottom: 40px;
}
.s-cta-glow-left {
  left: -50px;
  bottom: 12px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(67,179,255,.22) 0%, rgba(67,179,255,0) 72%);
}
.s-cta-glow-right {
  right: -30px;
  top: 8px;
  width: 210px;
  height: 180px;
  background: radial-gradient(circle, rgba(242,90,93,.24) 0%, rgba(242,90,93,0) 72%);
}
.s-cta-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.s-cta-content p:not(.s-kicker) {
  margin-top: 16px;
  color: var(--s-body);
  font-size: 15px;
}
.s-store-buttons.bottom {
  justify-content: center;
  margin-top: 24px;
}
.s-footer {
  border-top: 1px solid #e4edf5;
}
.s-footer-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0 18px;
}
.s-footer-brand .brand img { width: 100px; }
.s-footer-brand p {
  margin-top: 8px;
  color: #73849a;
  font-size: 11px;
}
.s-footer-top nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.s-footer-top nav a {
  font-size: 12px;
  color: #475a6f;
}
.s-footer-social {
  display: flex;
  gap: 8px;
}
.s-footer-social span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f6fb;
  color: #4a6079;
  font-size: 12px;
}
.page-home-showcase .footer-bottom {
  padding-block: 14px 24px;
  gap: 18px;
}
.page-home-showcase .footer-bottom span:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-home-showcase .footer-bottom a {
  color: #7a899b;
  font-size: 10px;
}
@media (max-width: 1180px) {
  .s-hero,
  .s-connect-section,
  .s-privacy-band-inner {
    grid-template-columns: 1fr;
  }
  .s-hero-visual {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
  .s-section-copy p:not(.s-kicker) {
    max-width: 650px;
  }
  .s-trust-row,
  .s-product-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 920px) {
  .s-nav { display: none; }
  .page-home-showcase .container { width: calc(100% - 40px); }
  .s-header-inner { min-height: 70px; }
  .s-hero { padding-top: 24px; }
  .s-feature-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .s-connect-section { gap: 22px; }
  .s-footer-top {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}
@media (max-width: 680px) {
  .s-hero-copy h1 { font-size: clamp(40px, 12vw, 56px); letter-spacing: -2.2px; }
  .s-section-copy h2,
  .s-center-head h2,
  .s-band-copy h2,
  .s-cta-content h2 { font-size: clamp(34px, 10vw, 46px); letter-spacing: -1.8px; }
  .s-store-buttons { flex-direction: column; align-items: flex-start; }
  .s-store-buttons.bottom { align-items: center; }
  .store-badge { width: 168px; }
  .s-hero-visual { min-height: auto; padding-top: 18px; }
  .s-phone, .s-id-card { position: relative; }
  .s-phone-back {
    right: auto;
    top: auto;
    width: 100%;
    max-width: 250px;
    height: 380px;
    margin-left: auto;
    margin-top: 120px;
  }
  .s-phone-front {
    left: auto;
    top: auto;
    width: 100%;
    max-width: 270px;
    height: 470px;
    margin-top: -360px;
    margin-left: 0;
  }
  .s-id-card {
    right: auto;
    bottom: auto;
    margin: 14px 0 0 auto;
    max-width: 220px;
  }
  .s-note-top {
    position: relative;
    top: auto;
    right: auto;
    text-align: left;
    margin-bottom: 12px;
  }
  .s-note-top::after { display: none; }
  .s-trust-row,
  .s-feature-icon-grid,
  .s-product-cards {
    grid-template-columns: 1fr;
  }
  .s-band-visual { min-height: 0; }
  .s-band-phone,
  .s-band-lock-card { position: relative; left: auto; top: auto; bottom: auto; }
  .s-band-phone { width: 100%; max-width: 270px; height: 400px; margin: 0 auto; }
  .s-band-lock-card { margin: -46px auto 0 0; }
  .s-footer-top nav { gap: 12px; }
  .page-home-showcase .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .page-home-showcase .container { width: calc(100% - 28px); }
  .page-home-showcase .brand img { width: 102px; }
  .s-header-cta { padding: 0 14px; }
  .s-hero-copy h1 { margin-top: 12px; }
  .s-hero-text { font-size: 14px; }
  .store-badge { width: 100%; max-width: 180px; }
}

/* Homepage v5 — closer match to provided reference screenshot */
:root {
  --m-blue: #179ee7;
  --m-blue-deep: #0b4d84;
  --m-text: #0f2845;
  --m-body: #607084;
  --m-line: #dbe5ef;
  --m-light: #f4f8fc;
  --m-soft: #eef5fb;
  --m-dark: #062948;
  --m-red: #f47d7f;
}
.page-home-match { background: #f6f9fc; color: var(--m-text); }
.page-home-match .container { width: min(1210px, calc(100% - 52px)); }
.m-header { background: #fff; border-bottom: 1px solid var(--m-line); position: sticky; top: 0; z-index: 30; }
.m-header-inner { min-height: 56px; display: flex; align-items: center; gap: 18px; }
.page-home-match .brand img { width: 96px; }
.m-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.m-nav a { font-size: 10.5px; font-weight: 600; color: #49596d; }
.m-header-cta { margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--m-blue); color: #fff; font-size: 10.5px; font-weight: 700; box-shadow: 0 10px 18px rgba(23,158,231,.2); }
.m-header-cta:hover { color: #fff; background: #0f93db; }
.m-hero { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; align-items: center; padding-top: 28px; padding-bottom: 20px; }
.m-kicker { font-size: 8.6px; line-height: 1.5; letter-spacing: 1.55px; font-weight: 800; color: var(--m-blue); }
.m-kicker.light { color: #8bc8f1; }
.m-hero-copy h1 { margin-top: 16px; font-size: clamp(44px, 6vw, 68px); line-height: .98; letter-spacing: -3.1px; font-weight: 800; }
.m-hero-copy h1 span, .m-feature-copy h2 span, .m-center-copy h2 span { color: var(--m-blue); }
.m-copy { max-width: 410px; margin-top: 18px; color: var(--m-body); font-size: 13px; line-height: 1.8; }
.m-store-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.m-note { margin-top: 14px; color: #7d8da1; font-size: 10.5px; }
.m-hero-visual { min-height: 420px; position: relative; }
.m-cloud { position: absolute; border-radius: 50%; }
.m-cloud.blue { right: -8px; top: 170px; width: 180px; height: 140px; background: radial-gradient(circle, rgba(79,197,255,.22) 0%, rgba(79,197,255,0) 70%); }
.m-cloud.red { left: 120px; top: 170px; width: 190px; height: 170px; background: radial-gradient(circle, rgba(243,126,126,.22) 0%, rgba(243,126,126,0) 72%); }
.m-scribble { position: absolute; right: 18px; top: 10px; color: var(--m-blue-deep); font-size: 15px; line-height: 1.2; font-style: italic; text-align: right; transform: rotate(-2deg); }
.m-scribble::after { content: "↘"; position: absolute; right: 18px; bottom: -22px; font-size: 26px; color: #7ebfe9; }
.m-phone { position: absolute; border: 4px solid #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 46px rgba(16,43,73,.18); }
.m-phone-back { right: 38px; top: 64px; width: 190px; height: 350px; background: linear-gradient(180deg, #021729 0%, #092948 100%); transform: rotate(-1deg); }
.m-phone-front { left: 60px; top: 18px; width: 225px; height: 390px; background: linear-gradient(180deg, #fff 0%, #f4f9fd 100%); transform: rotate(-7deg); z-index: 2; }
.m-phone-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; color: #d8e7f5; font-size: 9px; line-height: 1; }
.m-phone-status.light { color: #7b8b9f; }
.m-island { width: 56px; height: 8px; border-radius: 999px; background: currentColor; }
.m-back-body { padding: 18px 14px; text-align: center; color: #fff; }
.m-back-avatar { width: 72px; height: 72px; margin: 26px auto 16px; border-radius: 50%; background: radial-gradient(circle at 40% 26%, #ffe6db 0 19%, #b78061 19% 34%, #1c3555 35% 100%); }
.m-back-body strong { display: block; font-size: 24px; }
.m-back-body small { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 11px; }
.m-back-actions { display: flex; justify-content: center; gap: 10px; margin-top: 46px; }
.m-back-actions span { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); font-size: 14px; }
.m-front-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
.m-front-head img { width: 68px; margin-right: auto; }
.m-front-head span { font-size: 11px; color: var(--m-blue-deep); }
.m-search { margin: 0 12px 10px; padding: 10px 12px; border-radius: 12px; background: #f1f6fa; color: #8090a4; font-size: 10px; }
.m-front-list { padding: 0 10px; }
.m-front-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid #edf2f6; }
.m-front-row b { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.m-front-row b.blue { background: #e2f2fe; color: #2c7db3; }
.m-front-row b.softblue { background: #e8f0ff; color: #486dc4; }
.m-front-row b.peach { background: #ffebe4; color: #bc7252; }
.m-front-row b.mint { background: #dff7ef; color: #307d66; }
.m-front-row b.sky { background: #eaf7ff; color: #3e85b7; }
.m-front-row b.rose { background: #ffe9ef; color: #bc5b78; }
.m-front-row strong { display: block; font-size: 11px; line-height: 1.25; }
.m-front-row small { display: block; margin-top: 2px; color: #8292a4; font-size: 9px; }
.m-front-row em { font-style: normal; color: #8090a2; font-size: 9px; }
.m-plus { position: absolute; right: 14px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--m-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 10px 18px rgba(23,158,231,.24); }
.m-id-box { position: absolute; right: 14px; bottom: 24px; z-index: 3; min-width: 170px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.96); border: 1px solid #dfe8f0; box-shadow: 0 16px 28px rgba(16,43,73,.12); }
.m-box-kicker { display: block; font-size: 8px; letter-spacing: 1.3px; color: #75879d; font-weight: 800; }
.m-id-box strong { display: block; margin-top: 6px; font-size: 20px; letter-spacing: 1.7px; }
.m-id-box small { display: block; margin-top: 5px; color: #8392a6; font-size: 10px; }
.m-pill-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 10px; padding-bottom: 42px; }
.m-pill-row article { display: flex; align-items: center; gap: 10px; }
.m-pill-icon { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.m-pill-icon.blue { background: #e8f5ff; }
.m-pill-icon.mint { background: #e8faf1; }
.m-pill-row strong { display: block; font-size: 12px; line-height: 1.25; }
.m-pill-row small { display: block; margin-top: 3px; color: #7b8ca0; font-size: 11px; }
.m-feature-slab { display: grid; grid-template-columns: .94fr 1.06fr; gap: 24px; align-items: center; padding-top: 22px; padding-bottom: 42px; }
.m-feature-copy h2, .m-center-copy h2, .m-bottom-inner h2, .m-dark-copy h2 { margin-top: 10px; font-size: clamp(38px, 5vw, 56px); line-height: 1.02; letter-spacing: -2.4px; font-weight: 800; }
.m-feature-copy p:not(.m-kicker) { margin-top: 16px; max-width: 405px; color: var(--m-body); font-size: 13px; line-height: 1.8; }
.m-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m-feature-grid article { text-align: center; }
.m-feature-grid span { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
.m-feature-grid .c1 { background: #e8f7ff; }
.m-feature-grid .c2 { background: #e7faf2; }
.m-feature-grid .c3 { background: #ffefef; }
.m-feature-grid .c4 { background: #eef5ff; }
.m-feature-grid .c5 { background: #eaf8fb; }
.m-feature-grid .c6 { background: #ece9ff; }
.m-feature-grid .c7 { background: #f3f5f8; }
.m-feature-grid .c8 { background: #fff3d9; }
.m-feature-grid strong { display: block; margin-top: 10px; font-size: 14px; }
.m-feature-grid small { display: block; margin-top: 4px; color: #75869a; font-size: 10px; }
.m-dark-section { background: linear-gradient(135deg, #173f7a 0%, #052746 100%); margin-top: 6px; }
.m-dark-inner { display: grid; grid-template-columns: .98fr 1.02fr; gap: 34px; align-items: center; padding-top: 30px; padding-bottom: 30px; }
.m-dark-visual { position: relative; min-height: 300px; }
.m-chat-phone { position: absolute; left: 34px; top: -8px; width: 225px; height: 330px; border: 4px solid #fff; border-radius: 30px; background: linear-gradient(180deg, #fff 0%, #f5fbff 100%); box-shadow: 0 24px 50px rgba(0,0,0,.26); transform: rotate(-7deg); overflow: hidden; }
.m-chat-screen { padding: 16px 12px 12px; }
.m-bubble { max-width: 82%; padding: 9px 10px; border-radius: 14px; font-size: 10px; line-height: 1.55; margin-top: 10px; }
.m-bubble.left { background: #f0f6fb; color: #4b6078; border-top-left-radius: 6px; }
.m-bubble.right { margin-left: auto; background: #2b98ff; color: #fff; border-top-right-radius: 6px; }
.m-file-row, .m-audio-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid #e9eff5; color: #546a81; font-size: 10px; }
.m-audio-row i { font-style: normal; color: var(--m-blue); }
.m-audio-row div { flex: 1; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #46c4ff 0%, #688dff 50%, #46c4ff 100%); }
.m-lock-float { position: absolute; left: 0; bottom: 20px; width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(180deg, #22b7ff 0%, #2b67ff 100%); box-shadow: 0 18px 26px rgba(17,106,196,.34); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.m-dark-copy { color: #fff; }
.m-dark-copy p:not(.m-kicker) { margin-top: 16px; max-width: 440px; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.85; }
.m-dark-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 700; }
.m-dark-link:hover { color: #fff; background: rgba(255,255,255,.12); }
.m-cards { padding-top: 42px; padding-bottom: 44px; }
.m-center-copy { text-align: center; }
.m-card-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m-card { padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #e3ebf3; }
.m-card-visual { height: 165px; border-radius: 14px; position: relative; overflow: hidden; }
.m-card-visual.v1 { background: linear-gradient(180deg, #031b2f 0%, #092846 100%); }
.m-card-visual.v1 .dots { position: absolute; left: 28px; top: 48px; display: flex; gap: 10px; }
.m-card-visual.v1 .dots i { width: 11px; height: 11px; border-radius: 50%; background: #dce6f4; }
.m-card-visual.v1 .mini-lock { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 11px; background: var(--m-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.m-card-visual.v2 { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 5px; background: #f1f8fd; }
.m-card-visual.v2 span { display: block; border-radius: 12px; background: linear-gradient(135deg, #80d3ff 0%, #57a8d8 38%, #226688 100%); }
.m-card-visual.v2 span:first-child { grid-row: 1 / span 2; background: linear-gradient(135deg, #69cdf5 0%, #8dd4a6 44%, #65873a 100%); }
.m-card-visual.v3 { background: linear-gradient(180deg, #f4fbff 0%, #e7f3fd 100%); text-align: center; padding-top: 14px; }
.m-card-visual.v3 .avatar { width: 78px; height: 78px; margin: 22px auto 12px; border-radius: 50%; background: radial-gradient(circle at 40% 26%, #ffe5da 0 19%, #b78362 19% 34%, #1c3555 35% 100%); }
.m-card-visual.v3 .bars { width: 90px; height: 12px; margin: 0 auto; border-radius: 999px; background: linear-gradient(90deg, #47c4ff 0%, #6d8eff 50%, #47c4ff 100%); }
.m-card-visual.v4 { display: grid; grid-template-columns: 1.2fr .9fr; gap: 9px; padding: 10px; background: #f8fbfd; }
.m-card-visual.v4 .list { border-radius: 12px; background: #fff; border: 1px solid #e6edf4; padding: 10px; }
.m-card-visual.v4 b { display: block; font-size: 11px; }
.m-card-visual.v4 small { display: block; margin-top: 7px; color: #76879b; font-size: 9px; }
.m-card-visual.v4 .right small { background: #eef4f9; border-radius: 999px; padding: 6px 7px; }
.m-card h3 { margin-top: 12px; font-size: 16px; line-height: 1.35; }
.m-card p { margin-top: 6px; color: var(--m-body); font-size: 11.5px; line-height: 1.7; }
.m-bottom-cta { position: relative; overflow: hidden; padding-top: 34px; padding-bottom: 28px; }
.m-cloud.bottom-left { left: -40px; bottom: -10px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(86,197,255,.22) 0%, rgba(86,197,255,0) 70%); }
.m-cloud.bottom-right { right: -30px; top: 8px; width: 190px; height: 170px; background: radial-gradient(circle, rgba(243,126,126,.22) 0%, rgba(243,126,126,0) 70%); }
.m-bottom-inner { position: relative; z-index: 1; text-align: center; padding: 18px 0 8px; }
.m-bottom-inner p:not(.m-kicker) { margin-top: 12px; color: var(--m-body); font-size: 13px; }
.m-store-buttons.center { justify-content: center; margin-top: 18px; }
.m-footer { background: #fff; border-top: 1px solid var(--m-line); }
.m-footer-top { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: center; gap: 18px; padding-top: 18px; padding-bottom: 12px; }
.m-footer-brand .brand img { width: 92px; }
.m-footer-brand p { margin-top: 7px; color: #7a8ca0; font-size: 10px; }
.m-footer-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.m-footer-nav a { font-size: 10.5px; color: #485b70; }
.m-footer-social { display: flex; gap: 7px; align-items: center; }
.m-footer-social span { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f1f6fb; color: #4b6179; font-size: 10px; }
.page-home-match .footer-bottom { padding-top: 10px; padding-bottom: 18px; gap: 14px; }
.page-home-match .footer-bottom span:last-child { display: flex; flex-wrap: wrap; gap: 12px; }
.page-home-match .footer-bottom a { color: #7a8ca0; font-size: 10px; }
@media (max-width: 1024px) {
  .m-hero, .m-feature-slab, .m-dark-inner { grid-template-columns: 1fr; }
  .m-hero-visual { max-width: 500px; width: 100%; margin: 0 auto; }
  .m-pill-row, .m-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .m-nav { display: none; }
  .page-home-match .container { width: calc(100% - 34px); }
  .m-feature-grid { grid-template-columns: repeat(4, 1fr); }
  .m-footer-top { grid-template-columns: 1fr; align-items: flex-start; }
}
@media (max-width: 680px) {
  .m-hero-copy h1 { font-size: clamp(38px, 12vw, 52px); letter-spacing: -2.2px; }
  .m-feature-copy h2, .m-center-copy h2, .m-bottom-inner h2, .m-dark-copy h2 { font-size: clamp(31px, 10vw, 42px); letter-spacing: -1.7px; }
  .m-hero-visual { min-height: auto; padding-top: 8px; }
  .m-scribble { position: relative; right: auto; top: auto; text-align: left; margin-bottom: 10px; }
  .m-scribble::after { display: none; }
  .m-phone, .m-id-box { position: relative; }
  .m-phone-back { right: auto; top: auto; width: 180px; height: 330px; margin-left: auto; }
  .m-phone-front { left: auto; top: auto; width: 210px; height: 370px; margin-top: -305px; }
  .m-id-box { right: auto; bottom: auto; margin: 12px 0 0 auto; }
  .m-pill-row, .m-feature-grid, .m-card-grid { grid-template-columns: 1fr; }
  .m-feature-slab { padding-top: 8px; }
  .m-dark-visual { min-height: 0; }
  .m-chat-phone, .m-lock-float { position: relative; left: auto; top: auto; bottom: auto; }
  .m-chat-phone { width: 215px; height: 320px; margin: 0 auto; }
  .m-lock-float { margin: -42px auto 0 0; }
  .m-store-buttons.center { align-items: center; }
  .page-home-match .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .page-home-match .container { width: calc(100% - 24px); }
  .page-home-match .brand img { width: 90px; }
  .m-header-cta { height: 28px; padding: 0 11px; font-size: 10px; }
  .store-badge { width: 100%; max-width: 170px; }
}

/* Homepage v6 — closest build to the uploaded reference screenshot */
:root {
  --r-blue: #19a1eb;
  --r-blue-dark: #0a4f86;
  --r-text: #0f2540;
  --r-body: #69788a;
  --r-line: #dce5ee;
  --r-bg: #f4f8fb;
  --r-soft: #eef4f9;
  --r-dark: #072a48;
  --r-dark-2: #153b74;
  --r-red: #f28a8a;
}
.page-home-reference { background: var(--r-bg); color: var(--r-text); }
.page-home-reference .container { width: min(1180px, calc(100% - 52px)); }
.page-home-reference .site-header { background: #fff; border-bottom: 1px solid var(--r-line); }
.r-header-inner { min-height: 57px; display: flex; align-items: center; gap: 18px; }
.page-home-reference .brand img { width: 98px; }
.r-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.r-nav a { font-size: 10px; font-weight: 600; color: #4e5d6d; }
.r-nav a:hover { color: var(--r-blue-dark); }
.r-cta { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; height: 31px; padding: 0 14px; background: var(--r-blue); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; box-shadow: 0 10px 20px rgba(25,161,235,.22); }
.r-cta:hover { color: #fff; background: #1196de; }
.r-kicker { font-size: 8.5px; line-height: 1.5; letter-spacing: 1.7px; font-weight: 800; color: var(--r-blue); }
.r-kicker.light { color: #87c4ee; }
.r-hero { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 8px; padding-top: 32px; padding-bottom: 28px; }
.r-hero-copy h1 { margin-top: 16px; font-size: clamp(48px, 5.6vw, 74px); line-height: .95; letter-spacing: -3.2px; font-weight: 800; }
.r-hero-copy h1 span,
.r-connect-copy h2 span,
.r-center-head h2 span { color: var(--r-blue); }
.r-hero-text { max-width: 410px; margin-top: 18px; font-size: 13px; line-height: 1.8; color: var(--r-body); }
.r-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.r-badge { display: inline-flex; align-items: center; gap: 9px; min-width: 132px; min-height: 38px; padding: 6px 10px; border-radius: 8px; background: #0b0b0b; color: #fff; box-shadow: 0 10px 16px rgba(0,0,0,.12); }
.r-badge:hover { color: #fff; background: #181818; }
.r-badge-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; font-size: 19px; line-height: 1; }
.r-badge-icon.play { width: 0; height: 0; border-left: 13px solid #63d86b; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: relative; margin-left: 2px; }
.r-badge-icon.play::before { content: ""; position: absolute; left: -15px; top: -9px; width: 0; height: 0; border-left: 11px solid #46a2fb; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.r-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.r-badge-text small { font-size: 8px; letter-spacing: .45px; }
.r-badge-text strong { margin-top: 2px; font-size: 14px; font-weight: 700; }
.r-mini-note { margin-top: 12px; color: #7e8d9e; font-size: 10px; }
.r-hero-art { min-height: 470px; position: relative; }
.r-note { position: absolute; right: 4px; top: 10px; font-size: 14px; line-height: 1.2; color: var(--r-blue-dark); font-style: italic; text-align: right; transform: rotate(-2deg); }
.r-note::after { content: "↘"; position: absolute; right: 14px; bottom: -22px; font-size: 24px; color: #7fbde4; }
.r-blob { position: absolute; border-radius: 50%; }
.r-blob.blue { width: 180px; height: 150px; right: -20px; top: 145px; background: radial-gradient(circle, rgba(73,183,246,.22) 0%, rgba(73,183,246,0) 70%); }
.r-blob.red { width: 200px; height: 180px; left: 90px; top: 175px; background: radial-gradient(circle, rgba(242,138,138,.24) 0%, rgba(242,138,138,0) 72%); }
.r-phone { position: absolute; overflow: hidden; border-radius: 31px; border: 4px solid #fff; box-shadow: 0 22px 48px rgba(17,42,67,.18); }
.r-front-phone { left: 85px; top: 18px; width: 244px; height: 418px; background: linear-gradient(180deg, #fff 0%, #f5f9fd 100%); transform: rotate(-6deg); z-index: 2; }
.r-back-phone { right: 40px; top: 70px; width: 204px; height: 370px; background: linear-gradient(180deg, #04182c 0%, #0a2947 100%); transform: rotate(-1deg); }
.r-phone-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 8px; font-size: 9px; line-height: 1; color: #75879d; }
.r-phone-status.dark { color: #dbe7f4; }
.r-island { width: 58px; height: 8px; border-radius: 999px; background: currentColor; }
.r-front-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px; }
.r-front-head img { width: 68px; margin-right: auto; }
.r-front-head span { font-size: 10px; color: var(--r-blue-dark); }
.r-search { margin: 0 12px 10px; padding: 10px 12px; border-radius: 12px; background: #f0f5f9; color: #7e8ea2; font-size: 10px; }
.r-front-list { padding: 0 10px; }
.r-front-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 8px 2px; border-bottom: 1px solid #edf2f6; }
.r-front-row b { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; }
.r-front-row .c-blue { background: #e0f2ff; color: #2b7db6; }
.r-front-row .c-indigo { background: #e8efff; color: #5070c8; }
.r-front-row .c-peach { background: #ffebe4; color: #c17757; }
.r-front-row .c-mint { background: #def7ef; color: #2c7d65; }
.r-front-row .c-sky { background: #ebf7ff; color: #3e84b7; }
.r-front-row .c-rose { background: #ffe8ef; color: #be597b; }
.r-front-row strong { display: block; font-size: 11px; line-height: 1.25; }
.r-front-row small { display: block; margin-top: 1px; color: #8090a4; font-size: 9px; }
.r-front-row em { font-style: normal; color: #7d8ea2; font-size: 9px; }
.r-plus { position: absolute; right: 14px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--r-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 10px 20px rgba(25,161,235,.26); }
.r-back-body { color: #fff; text-align: center; padding: 18px 14px; }
.r-avatar-wrap { margin-top: 20px; }
.r-avatar-photo,
.mini-avatar { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; background: radial-gradient(circle at 40% 24%, #ffe5d9 0 19%, #b78163 19% 34%, #1d3554 35% 100%); box-shadow: 0 10px 24px rgba(0,0,0,.24); }
.r-back-body strong { display: block; margin-top: 16px; font-size: 24px; }
.r-back-body small { display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: 11px; }
.r-call-controls { display: flex; justify-content: center; gap: 10px; margin-top: 44px; }
.r-call-controls span { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.13); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.r-id-panel { position: absolute; right: 6px; bottom: 28px; z-index: 3; padding: 14px 16px; min-width: 170px; border-radius: 15px; background: rgba(255,255,255,.96); border: 1px solid #dee8f0; box-shadow: 0 16px 28px rgba(16,42,67,.12); }
.r-id-kicker { display: block; font-size: 8px; font-weight: 800; letter-spacing: 1.35px; color: #7a8ca0; }
.r-id-panel strong { display: block; margin-top: 6px; font-size: 20px; letter-spacing: 1.7px; }
.r-id-panel small { display: block; margin-top: 5px; color: #8393a6; font-size: 10px; }
.r-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 14px; padding-bottom: 42px; }
.r-trust article { display: flex; align-items: center; gap: 10px; }
.r-icon { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.r-icon.blue { background: #e7f4ff; }
.r-icon.mint { background: #e8faf2; }
.r-trust strong { display: block; font-size: 12px; line-height: 1.25; }
.r-trust small { display: block; margin-top: 3px; color: #7a8b9f; font-size: 11px; }
.r-connect { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 14px; padding-top: 16px; padding-bottom: 48px; }
.r-connect-copy h2,
.r-center-head h2,
.r-dark-copy h2,
.r-bottom-inner h2 { margin-top: 10px; font-size: clamp(40px, 4.8vw, 57px); line-height: 1.01; letter-spacing: -2.5px; font-weight: 800; }
.r-connect-copy p:not(.r-kicker) { max-width: 410px; margin-top: 16px; font-size: 13px; line-height: 1.8; color: var(--r-body); }
.r-connect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; }
.r-connect-grid article { text-align: center; }
.r-connect-grid span { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; font-size: 22px; }
.r-connect-grid .i-blue { background: #e8f5ff; }
.r-connect-grid .i-mint { background: #e7faf2; }
.r-connect-grid .i-red { background: #ffeeee; }
.r-connect-grid .i-cyan { background: #eaf8fb; }
.r-connect-grid .i-violet { background: #ece9ff; }
.r-connect-grid .i-dark { background: #eff2f5; }
.r-connect-grid .i-gold { background: #fff4d9; }
.r-connect-grid strong { display: block; margin-top: 10px; font-size: 14px; }
.r-connect-grid small { display: block; margin-top: 4px; color: #76879b; font-size: 10px; }
.r-dark-band { background: linear-gradient(135deg, #1b4583 0%, #052645 100%); }
.r-dark-inner { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 34px; padding-top: 28px; padding-bottom: 28px; }
.r-dark-visual { position: relative; min-height: 310px; }
.r-band-phone { position: absolute; left: 40px; top: -8px; width: 235px; height: 335px; background: linear-gradient(180deg, #fff 0%, #f5fbff 100%); border-radius: 30px; border: 4px solid #fff; overflow: hidden; box-shadow: 0 26px 52px rgba(0,0,0,.28); transform: rotate(-7deg); }
.r-band-screen { padding: 16px 12px 12px; }
.r-msg { max-width: 82%; margin-top: 10px; padding: 9px 10px; border-radius: 14px; font-size: 10px; line-height: 1.55; }
.r-msg.left { background: #eff6fb; color: #4e6078; border-top-left-radius: 6px; }
.r-msg.right { margin-left: auto; background: #2998ff; color: #fff; border-top-right-radius: 6px; }
.r-file-card,
.r-audio-card { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; border: 1px solid #e9eff5; color: #566d83; font-size: 10px; }
.r-audio-card i { font-style: normal; color: var(--r-blue); }
.r-audio-card div { flex: 1; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #48c5ff 0%, #628cff 48%, #48c5ff 100%); }
.r-lock-box { position: absolute; left: 0; bottom: 24px; width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(180deg, #1fb6ff 0%, #2967ff 100%); box-shadow: 0 18px 26px rgba(17,106,196,.36); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.r-dark-copy { color: #fff; }
.r-dark-copy p:not(.r-kicker) { max-width: 430px; margin-top: 16px; font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.82); }
.r-dark-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 12px; font-weight: 700; }
.r-dark-button:hover { color: #fff; background: rgba(255,255,255,.12); }
.r-cards { padding-top: 44px; padding-bottom: 42px; }
.r-center-head { text-align: center; }
.r-card-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.r-card { padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #e2ebf3; }
.r-card-visual { height: 165px; border-radius: 14px; overflow: hidden; position: relative; }
.r-card-visual.dark-visual { background: linear-gradient(180deg, #051b2f 0%, #082846 100%); }
.r-secret-dots { position: absolute; left: 28px; top: 50px; display: flex; gap: 10px; }
.r-secret-dots i { width: 11px; height: 11px; border-radius: 50%; background: #dbe6f3; }
.r-card-lock { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 11px; background: var(--r-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.r-card-visual.gallery-visual { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 5px; padding: 5px; background: #f2f8fd; }
.r-card-visual.gallery-visual span { display: block; border-radius: 12px; background: linear-gradient(135deg, #80d3ff 0%, #57a8d8 38%, #1e6689 100%); }
.r-card-visual.gallery-visual span:first-child { grid-row: 1 / span 2; background: linear-gradient(135deg, #69cdf5 0%, #91d8aa 44%, #64863b 100%); }
.r-card-visual.call-visual { background: linear-gradient(180deg, #f4fbff 0%, #e7f3fd 100%); text-align: center; padding-top: 14px; }
.r-card-visual.call-visual .mini-avatar { margin-top: 20px; }
.r-card-visual.call-visual .mini-bars { width: 90px; height: 12px; margin: 12px auto 0; border-radius: 999px; background: linear-gradient(90deg, #47c4ff 0%, #6d8eff 50%, #47c4ff 100%); }
.r-card-visual.groups-visual { display: grid; grid-template-columns: 1.2fr .9fr; gap: 9px; padding: 10px; background: #f8fbfd; }
.r-card-visual.groups-visual .list-a,
.r-card-visual.groups-visual .list-b { background: #fff; border: 1px solid #e6edf4; border-radius: 12px; padding: 10px; }
.r-card-visual.groups-visual b { display: block; font-size: 11px; }
.r-card-visual.groups-visual small { display: block; margin-top: 7px; color: #77889b; font-size: 9px; }
.r-card-visual.groups-visual .list-b small { background: #eef4f9; border-radius: 999px; padding: 6px 7px; }
.r-card h3 { margin-top: 12px; font-size: 16px; line-height: 1.35; }
.r-card p { margin-top: 6px; font-size: 11.5px; line-height: 1.7; color: var(--r-body); }
.r-bottom { position: relative; overflow: hidden; padding-top: 34px; padding-bottom: 30px; }
.r-bottom-blob { position: absolute; border-radius: 50%; }
.r-bottom-blob.left { left: -40px; bottom: -20px; width: 190px; height: 190px; background: radial-gradient(circle, rgba(86,197,255,.22) 0%, rgba(86,197,255,0) 72%); }
.r-bottom-blob.right { right: -25px; top: 8px; width: 190px; height: 170px; background: radial-gradient(circle, rgba(242,138,138,.24) 0%, rgba(242,138,138,0) 72%); }
.r-bottom-inner { position: relative; z-index: 1; text-align: center; padding: 18px 0; }
.r-bottom-inner p:not(.r-kicker) { margin-top: 12px; font-size: 13px; color: var(--r-body); }
.r-badges.center { justify-content: center; margin-top: 18px; }
.r-footer { background: #fff; border-top: 1px solid var(--r-line); }
.r-footer-top { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 18px; align-items: center; padding-top: 18px; padding-bottom: 12px; }
.r-footer-brand .brand img { width: 92px; }
.r-footer-brand p { margin-top: 7px; font-size: 10px; color: #7a8ca0; }
.r-footer-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.r-footer-nav a { font-size: 10px; color: #485b70; }
.r-footer-social { display: flex; align-items: center; gap: 7px; }
.r-footer-social span { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f1f6fb; color: #4a6079; font-size: 10px; }
.page-home-reference .footer-bottom { padding-top: 10px; padding-bottom: 18px; gap: 12px; }
.page-home-reference .footer-bottom span:last-child { display: flex; flex-wrap: wrap; gap: 12px; }
.page-home-reference .footer-bottom a { color: #7a8ca0; font-size: 10px; }
@media (max-width: 1024px) {
  .r-hero,
  .r-connect,
  .r-dark-inner { grid-template-columns: 1fr; }
  .r-hero-art { max-width: 520px; width: 100%; margin: 0 auto; }
  .r-trust,
  .r-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .r-nav { display: none; }
  .page-home-reference .container { width: calc(100% - 34px); }
  .r-connect-grid { grid-template-columns: repeat(4, 1fr); }
  .r-footer-top { grid-template-columns: 1fr; align-items: flex-start; }
}
@media (max-width: 680px) {
  .r-hero-copy h1 { font-size: clamp(38px, 12vw, 56px); letter-spacing: -2.1px; }
  .r-connect-copy h2,
  .r-center-head h2,
  .r-dark-copy h2,
  .r-bottom-inner h2 { font-size: clamp(31px, 10vw, 44px); letter-spacing: -1.7px; }
  .r-badges { flex-direction: column; align-items: flex-start; }
  .r-badges.center { align-items: center; }
  .r-hero-art { min-height: auto; padding-top: 8px; }
  .r-note { position: relative; right: auto; top: auto; text-align: left; margin-bottom: 12px; }
  .r-note::after { display: none; }
  .r-phone,
  .r-id-panel { position: relative; }
  .r-back-phone { right: auto; top: auto; width: 194px; height: 350px; margin-left: auto; }
  .r-front-phone { left: auto; top: auto; width: 224px; height: 390px; margin-top: -320px; }
  .r-id-panel { right: auto; bottom: auto; margin: 12px 0 0 auto; }
  .r-trust,
  .r-connect-grid,
  .r-card-grid { grid-template-columns: 1fr; }
  .r-dark-visual { min-height: 0; }
  .r-band-phone,
  .r-lock-box { position: relative; left: auto; top: auto; bottom: auto; }
  .r-band-phone { width: 225px; height: 330px; margin: 0 auto; }
  .r-lock-box { margin: -40px auto 0 0; }
  .page-home-reference .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
  .page-home-reference .container { width: calc(100% - 24px); }
  .page-home-reference .brand img { width: 90px; }
  .r-cta { height: 29px; padding: 0 11px; font-size: 10px; }
  .r-badge { width: 100%; max-width: 170px; }
}