/*
Theme Name: Levabet Orbit
Author: Site Owner
Description: Levabet için özgün, canlı düzenlenebilir ve AMP Transitional uyumlu WordPress teması.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: levabet
Tags: custom-colors, custom-menu, featured-images
*/

:root {
  --bg: #080a12;
  --surface: #111625;
  --surface-2: #171f34;
  --text: #f7f9fc;
  --muted: #96a2ba;
  --accent: #b7ff3c;
  --accent-2: #7c5cff;
  --warm: #ffb547;
  --border: #273047;
  --radius: 24px;
  --page-width: 1380px;
  --section-gap-config: 96px;
  --section-gap: var(--section-gap-config);
  --on-accent: #080a12;
  --on-accent-2: #ffffff;
  --font: Aptos, "Segoe UI", sans-serif;
  --shadow: 0 28px 80px rgba(0, 0, 0, .32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: var(--font); line-height: 1.55; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--warm); outline-offset: 4px; }
[hidden] { display: none; }
[data-bind] { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 500; top: 12px; left: 12px; padding: 12px 16px; color: var(--on-accent); background: var(--accent); border-radius: 10px; transform: translateY(-160%); text-decoration: none; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.page-shell { width: min(calc(100% - 48px), var(--page-width)); margin-inline: auto; }
.ambient { position: fixed; z-index: -1; width: 550px; height: 550px; border-radius: 50%; filter: blur(110px); opacity: .13; pointer-events: none; }
.ambient--one { top: 100px; right: -180px; background: var(--accent-2); }
.ambient--two { top: 760px; left: -260px; background: var(--accent); }

.announcement { position: relative; z-index: 80; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 35%); background: #070910; }
.announcement__inner { min-height: 42px; width: min(calc(100% - 48px), var(--page-width)); margin: auto; display: flex; align-items: center; gap: 18px; font-size: 12px; letter-spacing: .02em; }
.announcement p { margin: 0; color: var(--muted); flex: 1; }
.announcement strong { margin-left: 6px; color: var(--text); font-weight: 750; }
.announcement a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; color: var(--accent); font-weight: 800; text-decoration: none; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 10px; letter-spacing: .15em; font-weight: 850; }
.live-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent), transparent 86%); }

.site-header { position: sticky; z-index: 70; top: 0; padding: 16px 0 0; }
body.no-sticky .site-header { position: relative; }
.nav-shell { width: min(calc(100% - 48px), var(--page-width)); min-height: 72px; margin: auto; padding: 10px 12px 10px 22px; display: flex; align-items: center; gap: 28px; border: 1px solid color-mix(in srgb, var(--border), transparent 18%); border-radius: calc(var(--radius) - 5px); background: color-mix(in srgb, var(--surface), transparent 14%); box-shadow: 0 18px 60px rgba(0,0,0,.22); backdrop-filter: blur(22px); }
.brand { position: relative; max-width: 100%; display: inline-flex; align-items: baseline; flex: 0 1 auto; color: var(--text); font-size: 23px; line-height: 1; font-weight: 900; letter-spacing: -.06em; text-decoration: none; }
.brand b { color: var(--accent); }
.brand i { width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent-2); }
.desktop-nav { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1; }
.desktop-nav a { padding: 12px 14px; color: var(--muted); border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; }
.desktop-nav a:hover { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.text-action { padding: 11px 12px; color: var(--text); font-size: 13px; font-weight: 750; text-decoration: none; }
.button { min-height: 50px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid var(--accent); border-radius: 14px; color: var(--on-accent); background: var(--accent); box-shadow: 0 12px 32px color-mix(in srgb, var(--accent), transparent 84%); font-weight: 850; text-decoration: none; cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--compact { min-height: 44px; padding-inline: 18px; font-size: 13px; }
.button--ghost { color: var(--text); border-color: var(--border); background: color-mix(in srgb, var(--surface-2), transparent 20%); box-shadow: none; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { width: 44px; height: 44px; display: grid; place-content: center; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span, .mobile-menu summary span::before, .mobile-menu summary span::after { content: ""; width: 20px; height: 2px; display: block; border-radius: 2px; background: var(--text); }
.mobile-menu summary span::before { transform: translateY(-6px); }
.mobile-menu summary span::after { transform: translateY(4px); }
.mobile-menu nav { position: absolute; top: 54px; right: 0; width: 240px; padding: 10px; display: grid; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.mobile-menu nav a { padding: 12px; border-radius: 9px; color: var(--muted); font-weight: 700; text-decoration: none; }

.hero { min-height: 710px; padding-top: 58px; display: grid; grid-template-columns: minmax(0, .93fr) minmax(520px, 1.07fr); align-items: center; gap: 62px; }
.hero__copy { position: relative; z-index: 2; padding-bottom: 28px; }
.eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.eyebrow > span:first-child { width: 26px; height: 26px; display: grid; place-content: center; border: 1px solid color-mix(in srgb, var(--accent), transparent 58%); border-radius: 50%; font-size: 10px; letter-spacing: 0; }
.hero h1 { max-width: 680px; margin: 0; font-size: clamp(64px, 7vw, 112px); line-height: .89; letter-spacing: -.075em; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero__description { max-width: 590px; margin: 30px 0 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__signals { margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; }
.hero__signals li { padding-top: 12px; display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.35; }
.hero__signals i { color: var(--accent-2); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .08em; }

.hero__visual { position: relative; min-height: 610px; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.45); background: radial-gradient(circle at 54% 46%, color-mix(in srgb, var(--accent-2), transparent 68%) 0, transparent 26%), linear-gradient(145deg, color-mix(in srgb, var(--surface-2), transparent 2%), color-mix(in srgb, var(--surface), #05070d 34%)); box-shadow: var(--shadow); }
.hero__visual::before { content: ""; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(120deg, transparent 0 58px, color-mix(in srgb, var(--border), transparent 55%) 59px 60px); }
.hero__visual::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -70px; border: 42px solid color-mix(in srgb, var(--accent), transparent 85%); border-radius: 50%; }
.orbit-stage { position: absolute; width: 500px; aspect-ratio: 1; left: 50%; top: 46%; transform: translate(-50%, -50%); }
.orbit { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--text), transparent 78%); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit--outer { width: 100%; border-style: dashed; }
.orbit--mid { width: 72%; border-color: color-mix(in srgb, var(--accent-2), transparent 48%); }
.orbit--inner { width: 44%; border: 20px solid color-mix(in srgb, var(--accent), transparent 90%); box-shadow: inset 0 0 70px color-mix(in srgb, var(--accent), transparent 86%), 0 0 80px color-mix(in srgb, var(--accent-2), transparent 80%); }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 142px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 1px solid color-mix(in srgb, var(--accent), transparent 30%); border-radius: 50%; color: var(--text); background: color-mix(in srgb, var(--bg), transparent 8%); box-shadow: 0 0 0 12px color-mix(in srgb, var(--surface), transparent 58%); transform: translate(-50%, -50%) rotate(-8deg); }
.orbit-core span { font-size: 20px; font-weight: 900; letter-spacing: -.05em; }
.orbit-core b { color: var(--accent); font-size: 20px; line-height: .8; letter-spacing: -.05em; }
.orbit-node { position: absolute; width: 18px; height: 18px; border: 4px solid var(--surface); border-radius: 50%; background: var(--accent); box-shadow: 0 0 30px color-mix(in srgb, var(--accent), transparent 22%); }
.orbit-node--one { left: 9%; top: 48%; }
.orbit-node--two { right: 17%; top: 21%; background: var(--accent-2); }
.orbit-node--three { right: 25%; bottom: 13%; background: var(--warm); }
.floating-card { position: absolute; z-index: 2; border: 1px solid color-mix(in srgb, var(--border), transparent 4%); border-radius: 18px; background: color-mix(in srgb, var(--surface), transparent 4%); box-shadow: 0 22px 55px rgba(0,0,0,.34); backdrop-filter: blur(18px); }
.floating-card--address { left: 26px; bottom: 26px; width: min(330px, calc(100% - 52px)); padding: 18px 20px; display: grid; gap: 5px; }
.floating-card--address > strong { min-width: 0; font-size: 22px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.mini-label { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.verified { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.verified i, .domain-box__check i { width: 18px; height: 18px; display: grid; place-content: center; color: var(--on-accent); background: var(--accent); border-radius: 50%; font-size: 10px; font-style: normal; }
.floating-card--note { top: 32px; right: 28px; width: 230px; padding: 13px; display: flex; gap: 12px; align-items: center; }
.note-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-content: center; color: var(--text); border-radius: 12px; background: var(--accent-2); font-size: 17px; font-weight: 900; }
.floating-card--note p { margin: 0; display: grid; line-height: 1.3; }
.floating-card--note strong { font-size: 12px; }
.floating-card--note p span { margin-top: 3px; color: var(--muted); font-size: 10px; }

.quick-rail { position: relative; z-index: 4; margin-top: -24px; padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: color-mix(in srgb, var(--surface), transparent 4%); box-shadow: var(--shadow); }
.quick-card { min-height: 96px; padding: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; border: 1px solid transparent; border-radius: calc(var(--radius) - 8px); text-decoration: none; transition: transform .2s ease, opacity .2s ease; }
.quick-card:hover { transform: translateY(-3px); border-color: var(--border); background: var(--surface-2); }
.quick-card__index { width: 38px; height: 38px; display: grid; place-content: center; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent), transparent 65%); border-radius: 50%; font-size: 9px; font-weight: 900; }
.quick-card > span:nth-child(2) { display: grid; gap: 4px; }
.quick-card b { font-size: 14px; }
.quick-card small { color: var(--muted); font-size: 11px; }
.quick-card > i { color: var(--accent); font-style: normal; }

.section { padding-top: var(--section-gap); }
.section-heading { max-width: 720px; }
.section-heading h2, .access-panel h2, .closing-card h2 { margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: .97; letter-spacing: -.055em; }
.section-heading > p:last-child, .access-panel > p, .closing-card > div > p:last-child { margin: 22px 0 0; color: var(--muted); font-size: 17px; }
.section-heading--split { max-width: none; display: grid; grid-template-columns: 1fr 420px; gap: 50px; align-items: end; }
.section-heading--split > p { margin: 0 0 7px; color: var(--muted); font-size: 17px; }

.category-dock { margin-top: 34px; display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; }
.category-dock::-webkit-scrollbar { display: none; }
.category-chip { min-height: 44px; padding: 0 18px; flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: 12px; font-weight: 750; }
.category-chip.is-active { color: var(--on-accent); border-color: var(--accent); background: var(--accent); }
.discovery-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.34fr) minmax(360px, .66fr); gap: 20px; }
.radar-card { position: relative; min-height: 540px; padding: clamp(28px, 4vw, 54px); overflow: hidden; display: grid; grid-template-columns: .72fr 1.28fr; align-items: end; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.1); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2), var(--surface) 82%), var(--surface)); }
.radar-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 38%, color-mix(in srgb, var(--accent-2), transparent 52%), transparent 26%), linear-gradient(100deg, transparent 0 65%, color-mix(in srgb, var(--accent), transparent 91%)); }
.radar-card__copy { position: relative; z-index: 3; }
.radar-card h3, .route-card h3, .pulse-card h3, .benefit-card h3, .check-card h3, .responsible-card h3, .journal-card h3 { margin: 10px 0 0; font-size: clamp(25px, 3vw, 42px); line-height: 1.02; letter-spacing: -.035em; }
.radar-card__copy p { margin: 18px 0 24px; color: var(--muted); }
.radar-card__copy a, .responsible-card > a, .journal-card a { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); font-size: 12px; font-weight: 850; text-decoration: none; }
.radar-art { position: relative; z-index: 2; min-height: 420px; }
.radar-art__halo { position: absolute; width: 340px; height: 340px; left: 50%; top: 44%; border: 1px dashed color-mix(in srgb, var(--text), transparent 70%); border-radius: 50%; transform: translate(-50%,-50%); }
.radar-art__halo::before, .radar-art__halo::after { content: ""; position: absolute; inset: 44px; border: 1px solid color-mix(in srgb, var(--accent), transparent 52%); border-radius: 50%; }
.radar-art__halo::after { inset: 90px; background: color-mix(in srgb, var(--accent-2), transparent 80%); }
.stack-card { position: absolute; left: 50%; bottom: 38px; width: 200px; height: 285px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid color-mix(in srgb, var(--text), transparent 66%); border-radius: 24px; box-shadow: 0 30px 50px rgba(0,0,0,.28); transform-origin: 50% 100%; }
.stack-card small { font-size: 10px; font-weight: 900; }
.stack-card b { font-size: 30px; letter-spacing: -.06em; }
.stack-card--back { color: var(--on-accent); background: var(--accent); transform: translateX(-15%) rotate(16deg); }
.stack-card--mid { background: var(--accent-2); transform: translateX(-62%) rotate(-12deg); }
.stack-card--front { color: var(--text); background: linear-gradient(145deg, var(--surface-2), #0d1020); transform: translateX(-38%) rotate(2deg); }
.stack-card--front i { width: 46px; height: 46px; border: 10px solid var(--accent); border-radius: 50%; align-self: flex-end; }
.side-stack { display: grid; grid-template-rows: 1.15fr .85fr; gap: 20px; }
.route-card, .pulse-card { padding: 30px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.1); background: var(--surface); }
.route-card ol { margin: 24px 0 0; padding: 0; display: grid; list-style: none; }
.route-card li { min-height: 56px; display: grid; grid-template-columns: 38px 1fr 24px; gap: 10px; align-items: center; border-top: 1px solid var(--border); font-size: 13px; }
.route-card li b { color: var(--accent-2); font-size: 9px; }
.route-card li i { color: var(--accent); font-style: normal; }
.pulse-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 15px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent), var(--surface) 91%), var(--surface-2)); }
.pulse-card::after { content: ""; position: absolute; width: 170px; height: 170px; right: -90px; bottom: -100px; border: 24px solid color-mix(in srgb, var(--accent), transparent 82%); border-radius: 50%; }
.pulse-card__icon { width: 50px; height: 50px; display: grid; place-content: center; color: var(--on-accent); border-radius: 15px; background: var(--accent); font-size: 19px; }
.pulse-card h3 { font-size: 25px; }
.pulse-card p { grid-column: 1 / -1; margin: 10px 0 0; color: var(--muted); font-size: 13px; }

.benefit-grid { margin-top: 38px; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: repeat(2, minmax(235px, auto)); gap: 20px; }
.benefit-card { position: relative; padding: 32px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.1); background: var(--surface); }
.benefit-card--wide { grid-row: 1 / 3; min-height: 490px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); }
.benefit-card--accent { color: var(--on-accent); border-color: var(--accent); background: var(--accent); }
.benefit-card__number { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.benefit-card--accent .benefit-card__number, .benefit-card--accent p { color: rgba(8,10,18,.67); }
.benefit-card h3 { max-width: 560px; font-size: clamp(28px, 3vw, 44px); }
.benefit-card p { max-width: 540px; margin: 12px 0 0; color: var(--muted); }
.signal-bars { height: 170px; display: flex; align-items: flex-end; gap: 14px; }
.signal-bars i { width: 52px; border-radius: 13px 13px 4px 4px; background: var(--accent-2); transform: skewY(-5deg); }
.signal-bars i:nth-child(1) { height: 35%; opacity: .42; }
.signal-bars i:nth-child(2) { height: 58%; opacity: .63; }
.signal-bars i:nth-child(3) { height: 78%; opacity: .82; }
.signal-bars i:nth-child(4) { height: 100%; background: var(--accent); }
.support-orb { align-self: flex-end; width: 100px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 15px solid color-mix(in srgb, var(--accent-2), transparent 72%); border-top-color: var(--accent-2); border-radius: 50%; transform: rotate(12deg); }
.support-orb span, .support-orb small { transform: rotate(-12deg); }
.support-orb span { font-size: 30px; font-weight: 900; line-height: .8; }
.support-orb small { color: var(--muted); }
.limit-meter { width: 100%; height: 10px; margin: 40px 0 18px; border-radius: 99px; background: rgba(8,10,18,.18); }
.limit-meter span { width: 62%; height: 100%; display: block; border-radius: inherit; background: var(--on-accent); }
.limit-meter span::after { content: ""; width: 20px; height: 20px; display: block; float: right; margin-top: -5px; border: 4px solid var(--accent); border-radius: 50%; background: var(--on-accent); }

.access-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; }
.access-panel { min-height: 610px; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent-2), transparent 70%), transparent 30%), linear-gradient(145deg, var(--surface-2), var(--surface)); }
.access-panel > p { max-width: 650px; }
.domain-box { width: min(100%, 620px); margin: 34px 0 24px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid color-mix(in srgb, var(--accent), transparent 65%); border-radius: 18px; background: color-mix(in srgb, var(--bg), transparent 26%); }
.domain-box > span:first-child { display: grid; gap: 3px; }
.domain-box small { color: var(--muted); font-size: 10px; }
.domain-box strong { font-size: 24px; }
.domain-box__check { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 11px; }
.trust-stack { display: grid; grid-template-rows: 1.05fr .95fr; gap: 20px; }
.check-card, .responsible-card { padding: 34px; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2); background: var(--surface); }
.check-card h3 { font-size: 31px; }
.check-card ul { margin: 26px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.check-card li { display: grid; grid-template-columns: 26px 1fr; gap: 11px; color: var(--muted); font-size: 13px; }
.check-card li i { width: 23px; height: 23px; display: grid; place-content: center; color: var(--on-accent); border-radius: 8px; background: var(--accent); font-size: 10px; font-style: normal; font-weight: 900; }
.responsible-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 64px 1fr; gap: 16px; background: color-mix(in srgb, var(--accent-2), var(--surface) 84%); }
.responsible-card__mark { width: 58px; height: 58px; display: grid; place-content: center; border: 1px solid color-mix(in srgb, var(--accent-2), transparent 36%); border-radius: 18px; }
.responsible-card__mark span { width: 25px; height: 25px; border: 7px solid var(--accent-2); border-radius: 50%; }
.responsible-card h3 { font-size: 27px; }
.responsible-card p { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.responsible-card > a { grid-column: 2; }

.journal-grid { margin-top: 38px; display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 20px; }
.journal-card { min-height: 380px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.1); background: var(--surface); }
.journal-card--feature { padding: 0; display: grid; grid-template-columns: .8fr 1.2fr; overflow: hidden; }
.journal-card--feature > div:last-child { padding: 34px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.journal-card__art { position: relative; min-height: 100%; overflow: hidden; display: grid; place-content: center; background: linear-gradient(140deg, var(--accent-2), color-mix(in srgb, var(--accent-2), #080a12 68%)); }
.journal-card__art::before, .journal-card__art::after { content: ""; position: absolute; width: 220px; height: 220px; border: 1px solid color-mix(in srgb, var(--text), transparent 60%); border-radius: 50%; }
.journal-card__art::after { width: 120px; height: 120px; border: 18px solid color-mix(in srgb, var(--accent), transparent 30%); }
.journal-card__art span { position: relative; z-index: 2; font-size: 74px; font-weight: 950; letter-spacing: -.08em; }
.journal-card__index { margin-bottom: auto; color: var(--accent-2); font-size: 38px; font-weight: 900; letter-spacing: -.06em; }
.journal-card h3 { margin-top: 14px; font-size: 27px; }
.journal-card p { margin: 14px 0 24px; color: var(--muted); font-size: 13px; }
.journal-card a { margin-top: auto; }

.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: start; }
.faq-list { display: grid; border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 22px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 750; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-content: center; color: var(--accent); border: 1px solid var(--border); border-radius: 50%; font-style: normal; transition: transform .2s ease; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { max-width: 720px; margin: -6px 54px 25px 0; color: var(--muted); }

.closing-card { position: relative; min-height: 420px; padding: clamp(34px, 6vw, 78px); overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center; border: 1px solid color-mix(in srgb, var(--accent), transparent 58%); border-radius: calc(var(--radius) * 1.35); background: linear-gradient(115deg, color-mix(in srgb, var(--accent), var(--surface) 84%), var(--surface) 58%, color-mix(in srgb, var(--accent-2), var(--surface) 78%)); }
.closing-card > div:not(.closing-card__orbit) { position: relative; z-index: 2; }
.closing-card > div:nth-child(2) { max-width: 700px; }
.closing-card__actions { display: grid; gap: 10px; }
.closing-card__orbit { position: absolute; width: 520px; height: 520px; right: -160px; top: -90px; border: 1px dashed color-mix(in srgb, var(--accent), transparent 50%); border-radius: 50%; }
.closing-card__orbit i { position: absolute; inset: 65px; border: 1px solid color-mix(in srgb, var(--accent-2), transparent 45%); border-radius: 50%; }
.closing-card__orbit i:nth-child(2) { inset: 145px; border: 28px solid color-mix(in srgb, var(--accent), transparent 82%); }
.closing-card__orbit i:nth-child(3) { width: 18px; height: 18px; inset: auto; left: 38px; top: 140px; border: 0; background: var(--accent); box-shadow: 0 0 30px var(--accent); }

.site-footer { margin-top: var(--section-gap); padding: 70px 0 24px; border-top: 1px solid var(--border); background: #070910; }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 50px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-brand p { max-width: 360px; margin: 12px 0; color: var(--muted); }
.age-badge { width: 42px; height: 42px; display: grid; place-content: center; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); font-size: 11px; font-weight: 900; }
.footer-grid h3 { margin: 0 0 9px; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.footer-grid a:not(.brand) { color: var(--muted); font-size: 13px; text-decoration: none; }
.footer-bottom { margin-top: 55px; padding-top: 22px; display: flex; justify-content: space-between; gap: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }

.customizer-fab { position: fixed; z-index: 120; right: 24px; bottom: 24px; min-height: 54px; padding: 0 18px 0 9px; display: flex; align-items: center; gap: 10px; color: var(--on-accent); border: 0; border-radius: 999px; background: var(--accent); box-shadow: 0 18px 48px rgba(0,0,0,.42); cursor: pointer; transition: transform .2s ease, opacity .2s ease; }
.customizer-fab:hover { transform: translateY(-3px); }
.customizer-fab span { width: 38px; height: 38px; display: grid; place-content: center; border-radius: 50%; background: rgba(8,10,18,.12); font-size: 16px; }
.customizer-fab b { font-size: 12px; }
.customizer-backdrop { position: fixed; z-index: 130; inset: 0; background: rgba(4,5,9,.62); backdrop-filter: blur(5px); opacity: 0; transition: opacity .22s ease; }
body.is-customizing .customizer-backdrop { opacity: 1; }
.customizer { position: fixed; z-index: 140; top: 0; right: 0; width: min(440px, 100%); height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; color: #f7f9fc; border-left: 1px solid #2d3549; background: #0e1220; box-shadow: -30px 0 80px rgba(0,0,0,.42); transform: translateX(104%); transition: transform .26s ease; }
body.is-customizing .customizer { transform: translateX(0); }
.customizer__header { min-height: 86px; padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #293146; }
.customizer__header span { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.customizer__header h2 { margin: 3px 0 0; font-size: 22px; }
.customizer__header button { width: 42px; height: 42px; color: #f7f9fc; border: 1px solid #30384c; border-radius: 12px; background: #171d2d; font-size: 24px; cursor: pointer; }
.customizer__tabs { padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; border-bottom: 1px solid #293146; }
.customizer__tabs button { min-height: 38px; padding: 0 4px; color: #96a2ba; border: 0; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.customizer__tabs button.is-active { color: var(--on-accent); background: var(--accent); }
.customizer__body { min-height: 0; overflow-y: auto; padding: 16px; }
.customizer__pane { display: none; }
.customizer__pane.is-active { display: block; }
.control-group { padding: 18px; margin-bottom: 12px; display: grid; gap: 13px; border: 1px solid #293146; border-radius: 16px; background: #141929; }
.control-group h3 { margin: 0; font-size: 13px; }
.control-group > p { margin: -4px 0 3px; color: #8e9ab0; font-size: 11px; }
.control-group label { display: grid; gap: 7px; color: #aab3c4; font-size: 11px; font-weight: 700; }
.control-group input[type="text"], .control-group textarea, .control-group select { width: 100%; padding: 10px 11px; color: #f7f9fc; border: 1px solid #343c51; border-radius: 10px; background: #0d111d; font-size: 12px; }
.control-group textarea { resize: vertical; line-height: 1.5; }
.color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.color-grid label { padding: 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #293146; border-radius: 10px; background: #0f1421; }
.color-grid input { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.range-control { display: grid; gap: 8px; }
.range-control > div { display: flex; align-items: center; justify-content: space-between; }
.range-control output { color: var(--accent); font-size: 11px; }
.range-control input { width: 100%; accent-color: var(--accent); }
.switch-row { padding: 11px 0; display: flex; align-items: center; justify-content: space-between; }
.switch-row input { width: 38px; height: 21px; accent-color: var(--accent); }
.section-controls, .section-order { display: grid; gap: 7px; }
.section-control { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #2d3549; border-radius: 10px; background: #0f1421; color: #dbe1eb; font-size: 11px; }
.section-control label { display: flex; align-items: center; gap: 8px; }
.section-control input { accent-color: var(--accent); }
.order-actions { display: flex; gap: 5px; }
.order-actions button { width: 30px; height: 30px; color: #f7f9fc; border: 1px solid #343c51; border-radius: 8px; background: #171d2d; cursor: pointer; }
.json-editor { min-height: 340px; font-family: Consolas, monospace; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.panel-button { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; color: #f7f9fc; border: 1px solid #343c51; border-radius: 10px; background: #171d2d; font-size: 11px; font-weight: 800; cursor: pointer; }
.panel-button--primary { color: var(--on-accent); border-color: var(--accent); background: var(--accent); }
.panel-button--file { position: relative; overflow: hidden; }
.panel-button--file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.panel-button--file:focus-within { outline: 3px solid var(--warm); outline-offset: 3px; }
.form-message { min-height: 18px; margin: 0; color: var(--accent); font-size: 11px; }
.customizer__footer { min-height: 74px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #293146; background: #0d111d; }
.customizer__footer span { color: #8e9ab0; font-size: 9px; line-height: 1.35; }
body.is-customizing { overflow: hidden; }

@media (max-width: 1120px) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; order: 3; }
  .nav-actions { margin-left: auto; }
  .hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hero h1 { font-size: clamp(60px, 8vw, 88px); }
  .hero__visual { min-height: 550px; }
  .orbit-stage { width: 430px; }
  .discovery-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .journal-card--feature { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .page-shell, .nav-shell, .announcement__inner { width: min(calc(100% - 28px), var(--page-width)); }
  .announcement__inner { gap: 10px; }
  .announcement p { display: none; }
  .site-header { padding-top: 10px; }
  .nav-shell { min-height: 64px; padding: 8px 9px 8px 16px; }
  .text-action { display: none; }
  .hero { min-height: auto; padding-top: 62px; grid-template-columns: 1fr; gap: 32px; }
  .hero__copy { text-align: center; }
  .hero .eyebrow, .hero__actions { justify-content: center; }
  .hero__description { margin-inline: auto; }
  .hero__signals { text-align: left; }
  .hero__visual { min-height: 560px; }
  .quick-rail { margin-top: 22px; grid-template-columns: 1fr; }
  .quick-card { min-height: 80px; }
  .section-heading--split { grid-template-columns: 1fr; gap: 20px; }
  .section-heading--split > p { max-width: 620px; }
  .benefit-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .benefit-card--wide { grid-row: auto; min-height: 420px; }
  .access-layout { grid-template-columns: 1fr; }
  .access-panel { min-height: 540px; }
  .faq-layout { grid-template-columns: 1fr; gap: 46px; }
  .closing-card { grid-template-columns: 1fr; }
  .closing-card__actions { display: flex; flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}
@media (max-width: 600px) {
  :root { --section-gap: min(var(--section-gap-config), 72px); }
  .page-shell, .nav-shell, .announcement__inner { width: min(calc(100% - 20px), var(--page-width)); }
  .announcement__inner { min-height: 38px; }
  .announcement a { min-height: 38px; margin-left: auto; }
  .brand { font-size: 20px; }
  .nav-actions .button { min-height: 42px; padding-inline: 13px; }
  .nav-actions .button span:last-child { display: none; }
  .hero { padding-top: 50px; }
  .hero h1 { font-size: clamp(54px, 17vw, 78px); }
  .hero__description { font-size: 16px; }
  .hero__actions { display: grid; }
  .hero__signals { margin-top: 35px; grid-template-columns: 1fr; }
  .hero__visual { min-height: 470px; border-radius: calc(var(--radius) + 5px); }
  .orbit-stage { width: 390px; }
  .floating-card--note { right: 16px; top: 16px; width: 205px; }
  .floating-card--address { left: 16px; bottom: 16px; width: calc(100% - 32px); }
  .section-heading h2, .access-panel h2, .closing-card h2 { font-size: clamp(38px, 12vw, 55px); }
  .category-dock { margin-right: -10px; }
  .radar-card { min-height: 590px; padding: 28px; grid-template-columns: 1fr; align-items: start; }
  .radar-art { min-height: 320px; }
  .stack-card { width: 155px; height: 225px; bottom: 4px; }
  .stack-card b { font-size: 24px; }
  .side-stack { grid-template-columns: 1fr; }
  .benefit-card, .route-card, .pulse-card, .check-card, .responsible-card { padding: 25px; }
  .signal-bars i { width: 36px; }
  .access-panel { min-height: 0; padding: 34px 24px; }
  .domain-box { align-items: flex-start; flex-direction: column; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-card--feature { grid-column: auto; grid-template-columns: 1fr; }
  .journal-card__art { min-height: 230px; }
  .journal-card { min-height: 330px; }
  .closing-card { padding: 38px 24px; }
  .closing-card__actions { display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .customizer-fab { right: 14px; bottom: 14px; }
  .customizer { top: 8vh; width: 100%; height: 92dvh; border-top: 1px solid #2d3549; border-left: 0; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  body.is-customizing .customizer { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms; transition-delay: 0s; }
}


/* WordPress integration */
.admin-bar .site-header { top: 32px; }
.admin-bar .customizer { top: 32px; height: calc(100dvh - 32px); }
.wp-shell { width: min(calc(100% - 40px), 1080px); margin: 0 auto; padding: 48px 0 80px; }
.wp-site-header { padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); }
.wp-site-brand { color: var(--text); font-size: 24px; font-weight: 900; text-decoration: none; }
.wp-primary-nav ul { margin: 0; padding: 0; display: flex; gap: 18px; list-style: none; }
.wp-primary-nav a { color: var(--muted); text-decoration: none; }
.wp-content { padding-top: 48px; }
.wp-entry { margin-bottom: 28px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.wp-entry-title { margin-top: 0; line-height: 1.08; }
.wp-entry-title a { color: inherit; text-decoration: none; }
.wp-entry-content { color: var(--muted); }
.wp-entry-content a { color: var(--accent); }
html[amp] .customizer-fab,
html[amp] .customizer-backdrop,
html[amp] .customizer { display: none; }
html[amp] .ambient { filter: none; opacity: .05; }
html[amp] .button,
html[amp] .quick-card,
html[amp] .faq-list summary i { transition: none; }

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .customizer { top: 46px; height: calc(100dvh - 46px); }
}
@media (max-width: 600px) {
  .wp-site-header { align-items: flex-start; flex-direction: column; }
  .wp-primary-nav ul { flex-wrap: wrap; }
}