/* Public YoPyDo marketing pages, fully independent from Chat UI. */
:root { color-scheme:dark; font: 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; background:#07162d; color:#f3f8ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 52% 0%,#153a77 0%,#08182e 38%,#061126 95%); min-height:100vh; }
a { color:inherit; text-decoration:none; }
a:focus-visible,summary:focus-visible { outline:3px solid #8bcaff; outline-offset:3px; }
.yp-skip { position:absolute; top:-100px; inset-inline-start:12px; background:#fff; color:#123; padding:8px; }
.yp-skip:focus { top:12px; z-index:99; }
.yp-header { display:flex; align-items:center; justify-content:space-between; padding:16px clamp(18px,4vw,60px); gap:24px; border-bottom:1px solid #27466d; background:#08162cee; position:sticky; top:0; z-index:20; }
.yp-logo { color:#d7b48b; font-size:22px; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.yp-mark { font-size:10px; vertical-align:super; margin-inline-start:2px; }
.yp-nav { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.yp-nav a { color:#c6d6ea; padding:6px 9px; border-radius:10px; font-size:13px; transition:background .15s; }
.yp-nav a:hover,.yp-nav a[aria-current=page] { background:#1a3966; color:#fff; }
.yp-actions { display:flex; align-items:center; gap:12px; }
.yp-chat,.yp-primary { background:linear-gradient(110deg,#1668e7,#1345b5); color:#fff; border:1px solid #477ced; border-radius:999px; padding:10px 19px; font-weight:650; white-space:nowrap; }
.yp-chat:hover,.yp-primary:hover { filter:brightness(1.18); }
.yp-languages { position:relative; font-size:12px; }
.yp-languages summary { cursor:pointer; list-style:none; padding:7px 8px; }
.yp-language-list { position:absolute; inset-inline-end:0; top:100%; display:flex; flex-direction:column; gap:2px; min-width:100px; padding:9px; border-radius:12px; background:#17355c; box-shadow:0 16px 25px #0006; }
.yp-language-list a { padding:5px 8px; border-radius:5px; }
.yp-language-list a:hover,.yp-language-list a[aria-current=true] { background:#2f6093; }
.yp-hero { max-width:1060px; margin:0 auto; padding:clamp(52px,8vw,112px) 24px 60px; }
.yp-eyebrow { color:#a3caff; font-size:12px; font-weight:700; letter-spacing:.18em; }
.yp-hero h1 { font-size:clamp(34px,5.2vw,68px); line-height:1.13; letter-spacing:-.045em; max-width:920px; margin:12px 0 18px; }
.yp-lead { color:#c4d5e9; font-size:clamp(17px,2vw,22px); line-height:1.65; max-width:800px; }
.yp-hero-actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.yp-secondary { border:1px solid #46698c; padding:10px 20px; border-radius:999px; font-weight:600; }
.yp-secondary:hover { background:#1a3455; }
.yp-grid { max-width:1100px; margin:0 auto; padding:0 24px 45px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.yp-card { border:1px solid #2b4b72; border-radius:18px; background:linear-gradient(180deg,#102c52c9,#0c2343ed); padding:27px; }
.yp-card h2 { font-size:20px; margin:0 0 9px; }
.yp-card p { color:#c1d0e3; margin:0; }
.yp-trust,.yp-discover { max-width:1052px; margin:16px auto 40px; padding:25px 30px; border-radius:18px; border:1px solid #315173; background:#122b4a; }
.yp-trust h2,.yp-discover h2 { font-size:21px; margin:0 0 10px; }
.yp-trust p { color:#c6d9ed; margin:0; }
.yp-related { display:flex; gap:14px; flex-wrap:wrap; }
.yp-related a { border:1px solid #45688f; border-radius:999px; padding:7px 15px; color:#d6e9ff; }
.yp-related a:hover { background:#245284; }
.yp-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:28px clamp(24px,5vw,64px); margin-top:54px; background:#061023; border-top:1px solid #284264; color:#b5c9dc; }
.yp-footer strong { font-size:19px; color:#e2c49c; }
.yp-footer p { margin:6px 0; font-size:13px; }
.yp-footer nav { display:flex; gap:16px; flex-wrap:wrap; }
@media (max-width:1180px) { .yp-header { align-items:flex-start; flex-wrap:wrap; } .yp-nav { order:3; width:100%; } }
@media (max-width:720px) {
 .yp-header { padding:12px 16px; gap:8px; }
 .yp-logo { font-size:19px; }
 .yp-nav { overflow-x:auto; flex-wrap:nowrap; white-space:nowrap; padding-bottom:5px; }
 .yp-nav a { flex:0 0 auto; font-size:12px; }
 .yp-chat { padding:8px 13px; }
 .yp-hero { padding:43px 19px 28px; }
 .yp-grid { padding:0 18px 16px; grid-template-columns:1fr; }
 .yp-card { padding:21px; }
 .yp-trust,.yp-discover { margin:16px 18px 32px; padding:20px; }
}
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} }