:root {
    --jlo-bg: #130b18;
    --jlo-bg-2: #1f1026;
    --jlo-card: rgba(255, 255, 255, .08);
    --jlo-card-strong: rgba(255, 255, 255, .13);
    --jlo-text: #fff8ff;
    --jlo-muted: #d9c7dd;
    --jlo-line: rgba(255, 255, 255, .18);
    --jlo-accent: #f3a7cb;
    --jlo-accent-2: #a6e3d7;
    --jlo-max-page: 1200px;
    --jlo-max-content: 1060px;
    --jlo-max-text: 790px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.jlo-page { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--jlo-text); background: radial-gradient(circle at top left, rgba(243, 167, 203, .22), transparent 34%), radial-gradient(circle at 80% 5%, rgba(166, 227, 215, .18), transparent 28%), linear-gradient(180deg, var(--jlo-bg), #09070b 72%); line-height: 1.65; }
a { color: inherit; }
.jlo-wrap { width: min(var(--jlo-max-page), calc(100% - 40px)); margin: 0 auto; }
.jlo-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; border-bottom: 1px solid var(--jlo-line); background: rgba(12, 7, 16, .82); backdrop-filter: blur(18px); }
.jlo-brand { font-weight: 850; letter-spacing: .03em; text-decoration: none; }
.jlo-nav { display: flex; flex-wrap: wrap; gap: 12px; }
.jlo-nav a { padding: 8px 12px; border: 1px solid var(--jlo-line); border-radius: 999px; text-decoration: none; color: var(--jlo-muted); font-size: .92rem; }
.jlo-nav a:hover { color: var(--jlo-text); border-color: var(--jlo-accent); }
.jlo-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: 720px; padding: 72px 0 54px; }
.jlo-eyebrow { margin: 0 0 12px; color: var(--jlo-accent); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 800; }
.jlo-hero h1 { margin: 0; max-width: 760px; font-size: clamp(3.6rem, 8vw, 7.4rem); line-height: .86; letter-spacing: -.08em; }
.jlo-lead { max-width: 680px; margin: 28px 0 0; color: var(--jlo-muted); font-size: clamp(1.12rem, 1.7vw, 1.38rem); }
.jlo-hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.jlo-button, .jlo-link-card, .jlo-ad-link { text-decoration: none; }
.jlo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border-radius: 999px; background: #ffffff; color: #150c18; font-weight: 800; }
.jlo-hero-media, .jlo-side-media { margin: 0; }
.jlo-hero-media img, .jlo-side-media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 34px; border: 1px solid var(--jlo-line); box-shadow: 0 30px 100px rgba(0, 0, 0, .42); }
.jlo-links, .jlo-section, .jlo-split, .jlo-stats { max-width: var(--jlo-max-content); margin-top: 72px; margin-bottom: 72px; }
.jlo-links { padding: 32px; border: 1px solid var(--jlo-line); border-radius: 32px; background: var(--jlo-card); }
.jlo-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.jlo-link-card { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 14px 18px; border-radius: 18px; background: var(--jlo-card-strong); border: 1px solid var(--jlo-line); font-weight: 800; text-align: center; }
.jlo-link-card:hover { border-color: var(--jlo-accent); background: rgba(255, 255, 255, .18); }
.jlo-section-head { max-width: var(--jlo-max-text); margin-bottom: 26px; }
.jlo-section h2, .jlo-split h2, .jlo-links h2, .jlo-stats h2 { margin: 0; font-size: clamp(2rem, 4.5vw, 4.2rem); line-height: .98; letter-spacing: -.055em; }
.jlo-section p, .jlo-split p { max-width: var(--jlo-max-text); color: var(--jlo-muted); }
.jlo-profile-grid, .jlo-card-grid, .jlo-stat-grid { display: grid; gap: 16px; }
.jlo-profile-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.jlo-profile-grid div, .jlo-card-grid article, .jlo-stat-grid div, .jlo-faq-item, .jlo-timeline div { padding: 22px; border: 1px solid var(--jlo-line); border-radius: 24px; background: var(--jlo-card); }
.jlo-profile-grid strong, .jlo-stat-grid strong, .jlo-timeline strong { display: block; color: var(--jlo-accent-2); }
.jlo-profile-grid span, .jlo-stat-grid span, .jlo-timeline span { color: var(--jlo-muted); }
.jlo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .54fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.jlo-ad { max-width: var(--jlo-max-content); margin: 72px auto; padding: 0; min-height: 150px; overflow: hidden; border-radius: 28px; border: 1px solid var(--jlo-line); background: #050505; }
.jlo-ad-link { display: flex; width: 100%; min-height: 150px; align-items: center; justify-content: center; padding: 28px 32px; background: linear-gradient(135deg, #050505, #27152d 62%, #f3a7cb 180%); color: #fff; font-size: 1.18rem; font-weight: 900; text-align: center; }
.jlo-card-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.jlo-card-grid h3, .jlo-faq-item h3 { margin-top: 0; }
.jlo-stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.jlo-stat-grid strong { font-size: 2rem; }
.jlo-timeline { display: grid; gap: 14px; }
.jlo-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.jlo-thumb { display: block; overflow: hidden; border-radius: 24px; background: transparent; border: 1px solid var(--jlo-line); filter: none; opacity: 1; mix-blend-mode: normal; }
.jlo-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .25s ease; filter: none; opacity: 1; mix-blend-mode: normal; }
.jlo-thumb:hover img { transform: scale(1.04); }
.jlo-faq-list { display: grid; gap: 18px; }
.jlo-inline-link { color: var(--jlo-accent-2); font-weight: 800; }
.jlo-language-links { display: flex; flex-wrap: wrap; gap: 10px; }
.jlo-language-links a { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--jlo-line); text-decoration: none; color: var(--jlo-muted); }
@media (max-width: 860px) { .jlo-header { position: static; align-items: flex-start; flex-direction: column; } .jlo-hero, .jlo-split { grid-template-columns: 1fr; min-height: auto; } .jlo-hero-media { order: -1; } .jlo-hero h1 { font-size: clamp(3rem, 16vw, 5rem); } }