:root {
  color-scheme: dark;
  --navy:#0b1729; --navy-2:#101f35; --navy-3:#172c46; --ink:#13243c;
  --paper:#f3f5f7; --white:#fff; --blue:#2b60f3; --ice:#a8c8ff;
  --soft:#b7c4d7; --muted:#526178; --line:#d9e1e8;
  --heading:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Inter",Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem }
body { margin:0; background:var(--navy); color:white; font:16px/1.6 var(--body) }
[hidden] { display:none !important }
img { max-width:100%; display:block }
a { color:inherit; text-underline-offset:.2em }
a:hover { text-decoration-thickness:2px }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #7db0ff; outline-offset:4px }
h1,h2,h3,p,ul { margin:0 }
h1,h2,h3 { font-family:var(--heading); font-weight:700; line-height:1.01 }
h2 { font-size:clamp(2.65rem,5.4vw,5.25rem); letter-spacing:-.015em }
h3 { font-size:clamp(1.7rem,3.2vw,2.6rem) }
.wrap { width:min(1270px, calc(100% - 108px)); margin-inline:auto }
.section { padding-block:clamp(3.8rem,7vw,7.5rem) }
.sr-only,.skip:not(:focus) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip:focus { position:absolute; background:#fff; color:#000; z-index:12; padding:10px }
.eyebrow { display:flex; align-items:center; gap:.66rem; color:var(--ice); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.17em; line-height:1.45 }
.eyebrow span:first-child { display:inline-block; width:20px; height:2px; background:#7ba6ff; border-radius:2px; flex:none }
.eyebrow b { opacity:.5 }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:.8rem; text-align:center; text-decoration:none; border:1px solid transparent; border-radius:7px; background:var(--blue); color:#fff; font-size:.86rem; font-weight:750; padding:.76rem 1.15rem; min-height:48px; transition:background .2s,border-color .2s }
.btn:hover { background:#1747ce }
.btn-ghost { background:#0a19374d; border-color:#92a6c087 }
.btn-ghost:hover { background:#263f65; border-color:#b9d0ec }
.btn-outline { background:transparent; border-color:#3153a1; color:#19419c }
.btn-outline:hover { background:#dae7ff }
.btn-small { min-height:41px; padding:.48rem .85rem }
.actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center }
.spark { color:#cfe3ff; font-size:1.15em }
header { position:relative; z-index:3; background:#0a172a; border-bottom:1px solid #62788a44 }
.mast { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:1.2rem }
.brand { display:inline-flex; align-items:center; text-decoration:none; gap:10px; flex:none }
.brand img { object-fit:contain; width:94px; height:auto }
.brand span { margin-left:1px; padding-left:10px; border-left:1px solid #6c809c; color:var(--ice); font-size:1.25rem; font-weight:800; line-height:1.3; letter-spacing:-.055em }
nav { display:flex; align-items:center; gap:clamp(.8rem,2.6vw,2.35rem) }
nav a { color:#e0e8f4; text-decoration:none; font-weight:650; font-size:.84rem }
nav a:hover { color:var(--ice) }
.menu-button { display:none; background:none; border:1px solid #8195af70; border-radius:6px; padding:.5rem .8rem; color:white; font-weight:700 }

.hero { position:relative; isolation:isolate; min-height:clamp(460px,45vw,690px); display:flex; align-items:center; overflow:hidden; background:#10223b }
.hero-image,.hero-shade { position:absolute; z-index:-1; inset:0; width:100%; height:100% }
.hero-image { object-fit:cover; object-position:center 47% }
.hero-shade { background:linear-gradient(90deg,#091528 1%,#0a192df5 23%,#10233ac9 45%,#0d1b3448 74%,#0a19342a),linear-gradient(0deg,#0b1729e8 0%,transparent 38%) }
.hero-inner { padding-block:4.8rem 5.5rem }
.hero h1 { margin:.72rem 0 1.15rem; font-size:clamp(4.2rem,9.3vw,9.1rem); line-height:.87; letter-spacing:-.025em; text-transform:uppercase }
.hero h1 em { font-style:normal; color:var(--ice) }
.hero-copy { color:#e0e8f3; max-width:490px; font-size:clamp(1rem,1.42vw,1.28rem); margin-bottom:1.65rem }
.worlds { padding-block:2rem clamp(3.8rem,7vw,7rem) }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1.2rem; margin-bottom:1.8rem }
.section-heading h2,.split h2,.assistant-zone h2,.info-grid h2 { margin-top:.43rem }
.section-heading > p { max-width:300px; color:var(--soft); font-size:.94rem; padding-bottom:.2rem }
.world-grid,.inventory-grid,.retail-grid,.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem }
.world-card { display:flex; flex-direction:column; overflow:hidden; background:var(--navy-2); border:1px solid #7b99b43d; border-radius:13px; text-decoration:none; transition:transform .2s,border-color .2s }
.world-card:hover { transform:translateY(-4px); border-color:#7ca9ff }
.world-card img { width:100%; height:clamp(125px,15.5vw,215px); object-fit:cover }
.world-event img { filter:contrast(1.18) brightness(.91); object-position:50% 65% }
.world-card > div { display:flex; flex-direction:column; flex:1; padding:1.2rem 1.3rem 1.28rem }
.world-card p { color:var(--soft); margin:.4rem 0 1rem; font-size:.9rem; flex:1 }
.world-card span { display:flex; justify-content:space-between; color:var(--ice); font-size:.79rem; font-weight:750 }
.world-card span b { font-size:1rem }

.light { color-scheme:light; color:var(--ink); background:var(--paper) }
.light .section-heading > p,.light .fine { color:var(--muted) }
.light .eyebrow { color:#214792 }
.light .eyebrow span:first-child { background:#3166e3 }
.text-link { color:#204aa2; font-weight:750; font-size:.85rem; display:inline-block }
.finder { background:white; border:1px solid var(--line); border-radius:13px; padding:clamp(1rem,3vw,2rem) }
.finder-top { display:flex; justify-content:space-between; align-items:end; gap:1rem }
.finder-top label { width:min(100%,460px) }
label,legend { font-weight:700; font-size:.83rem }
input,select,textarea { background:white; color:var(--ink); border:1px solid #bbc9db; border-radius:6px; min-height:43px; padding:.52rem .65rem; width:100%; font-size:.92rem }
label > input,label > select,label > textarea { display:block; margin-top:.32rem }
textarea { resize:vertical }
.finder-status { min-height:1.55rem; color:var(--muted); margin:.7rem 0 .15rem; font-size:.81rem }
.market-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem }
.market-card { padding:.75rem .9rem; border:1px solid var(--line); border-radius:7px; background:#f8fafc }
.market-card summary { cursor:pointer; font-weight:750; font-size:.86rem }
.market-card address { margin:.55rem 0 .3rem; font-style:normal; font-size:.86rem }
.market-card p { font-size:.8rem; color:var(--muted) }
.market-links { display:flex; gap:.7rem; flex-wrap:wrap; padding-top:.55rem }
.market-links a { font-size:.75rem }
.fine { color:var(--soft); font-size:.78rem; margin-top:.7rem }
.retail-grid { margin-top:1rem }
.retail-grid article,.info-grid article { padding:1.25rem; border:1px solid var(--line); border-radius:12px; background:white }
.retail-grid p,.info-grid p { color:var(--muted); margin:.6rem 0 .7rem; font-size:.9rem }
.retail-grid a+ a { margin-left:.45rem }
.tags { display:flex; gap:.35rem; flex-wrap:wrap }
.tags span { padding:.18rem .55rem; background:#edf2fa; border-radius:20px; font-size:.72rem; font-weight:700 }

.split { display:grid; grid-template-columns:1.02fr 1fr; align-items:center; gap:clamp(1.5rem,6vw,6rem) }
.split-image { position:relative; border-radius:13px; overflow:hidden; background:#17273f; border:1px solid #657fa55e }
.split-image img { width:100%; height:100%; min-height:320px; object-fit:cover }
.split-image span { position:absolute; left:1rem; bottom:1rem; background:#09182ee8; border:1px solid #6c81a8; color:white; border-radius:6px; padding:.32rem .6rem; font-size:.76rem; font-weight:700 }
.split-copy > p:not(.eyebrow),.assistant-zone p:not(.eyebrow) { color:var(--soft); margin:1rem 0 }
.tick-list { list-style:none; padding:0; margin:0 0 1.2rem; font-size:.91rem }
.tick-list li { padding:.19rem 0 }
.tick-list li::before { content:"✓"; color:var(--ice); margin-right:.58rem }
.inline-links { display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:1rem; color:var(--ice); font-size:.78rem; font-weight:700 }

.inventory-grid article { border:1px solid var(--line); background:white; border-radius:12px; overflow:hidden }
.inventory-grid article img { width:100%; height:155px; object-fit:contain; padding:.75rem; background:#e8edf5 }
.inventory-grid article > div { padding:1rem }
.inventory-grid h3 { margin-bottom:.36rem }
.inventory-grid .inventory-more { display:flex; align-items:center; background:#e7eefc }
.inventory-more .eyebrow { margin-bottom:.5rem }
.inventory-more p:not(.eyebrow) { font-size:.85rem; color:var(--muted); margin-bottom:.45rem }
.planner { margin-top:2rem; display:grid; grid-template-columns:.8fr 1.45fr; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white }
.planner-intro { background:radial-gradient(ellipse at 44% 62%,#213e64,#0b192f 72%); padding:clamp(1.3rem,3vw,2.5rem); color:white }
.light .planner-intro .eyebrow { color:var(--ice) }
.planner-intro h3 { margin:.6rem 0 }
.planner-intro p:not(.eyebrow) { font-size:.86rem; color:#d6e2f0 }
.planner-intro img { margin:.75rem auto; width:min(165px,80%); height:auto }
.planner form { padding:clamp(1rem,3vw,2.35rem) }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.72rem }
.planner form fieldset { border:0; margin:.85rem 0 .65rem; padding:0; min-width:0 }
.planner form legend { margin-bottom:.25rem }
.checks { display:flex; flex-wrap:wrap; gap:.32rem .85rem }
.checks label { white-space:nowrap; display:flex; align-items:center; gap:.3rem; font-weight:500 }
.checks input { display:inline; width:1rem; min-height:1rem; margin:0; accent-color:var(--blue) }
.planner form > .btn { margin-top:.7rem }
.plan-result { border-top:1px solid var(--line); margin-top:1rem; padding-top:.6rem }
.plan-result .actions { margin-top:.6rem }
.plan-result textarea { display:block; margin-top:.3rem }
.assistant-zone { display:flex; justify-content:space-between; align-items:center; gap:1.8rem }
.assistant-zone > div { max-width:640px }
.assistant-zone img { object-fit:contain; width:min(29%,254px); height:auto }
.info-grid { grid-template-columns:1.35fr 1fr 1fr; align-items:stretch }
.info-grid h2 { font-size:clamp(2.4rem,4vw,3.5rem) }
footer { padding:2.4rem 0 5.7rem; background:#080f1d }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1rem; font-size:.89rem }
.footer-grid > div { display:flex; flex-direction:column; align-items:flex-start; gap:.28rem }
.footer-grid address,.footer-grid a:not(.brand) { color:var(--soft); font-style:normal }

.chat-fab { position:fixed; z-index:4; bottom:clamp(.75rem,2vw,1.4rem); right:clamp(.75rem,2vw,1.4rem); display:flex; align-items:center; gap:.46rem; min-height:48px; padding:0 .85rem 0 .35rem; border-radius:35px; border:1px solid #a6c2ff; background:#123470; color:white; box-shadow:0 6px 22px #0005; font-size:.84rem; font-weight:800 }
.chat-fab b { margin-left:.24rem; color:#bed6fb }
.chat-fab img { width:39px; height:42px; object-fit:contain }
#chat { position:fixed; inset:auto 1rem 1rem auto; margin:0; padding:0; width:min(420px,calc(100% - 2rem)); color:var(--ink); color-scheme:light; background:white; border:1px solid #a7bce1; border-radius:15px; box-shadow:0 10px 70px #02071070; overflow:hidden }
#chat::backdrop { background:#02071078 }
.chat-head { background:#12284a; color:white; min-height:70px; padding:.65rem .85rem; display:flex; align-items:center; gap:.55rem }
.chat-head img { object-fit:contain }
.chat-head strong,.chat-head small { display:block; line-height:1.3 }
.chat-head small { color:#bdd2f3 }
#chat-close { border:0; background:none; color:white; margin-left:auto; font-size:1.7rem; line-height:1; padding:.4rem }
.chat-tools { display:flex; align-items:center; justify-content:flex-end; gap:.4rem; padding:.45rem .75rem; border-bottom:1px solid #dce5f3 }
.chat-tools label { font-size:.72rem }
.chat-tools select { width:auto; min-height:30px; padding:.14rem .35rem; font-size:.72rem }
#chat-log { height:min(31vh,270px); min-height:100px; overflow:auto; display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:.7rem }
.bubble { max-width:94%; background:#ecf2fd; border-radius:8px; padding:.48rem .61rem; font-size:.84rem; overflow-wrap:anywhere }
.bubble.user { align-self:flex-end; background:#1d429c; color:white }
.bubble a { display:block; margin-top:.25rem; color:#173f98; font-weight:750 }
.quick-topics { display:flex; gap:.3rem; flex-wrap:wrap; padding:.3rem .7rem }
.quick-topics button { border:1px solid #b2c3e3; border-radius:15px; color:#23478d; padding:.25rem .45rem; background:white; font-size:.7rem; font-weight:700 }
#chat-form { display:flex; gap:.45rem; padding:.4rem .7rem }
#chat-form button { background:var(--blue); color:white; border:0; border-radius:6px; min-width:43px }
.chat-note { padding:.1rem .7rem .65rem; font-size:.7rem; color:#51617b }
.legal-page { max-width:780px }
.legal-page h1 { margin:1rem 0; font-size:clamp(2.4rem,6vw,5rem) }
.legal-page h2 { margin:1rem 0 .55rem; font-size:2rem }
.noscript { margin:1rem }

@media (max-width:940px) {
  .wrap { width:calc(100% - 60px) }
  .mast { gap:.7rem }
  nav { gap:1rem }
  .hero h1 { font-size:clamp(4.45rem,10vw,7.5rem) }
}
@media (max-width:720px) {
  .wrap { width:calc(100% - 32px) }
  .mast { min-height:62px }
  .brand img { width:80px }
  .mast-action { display:none }
  .menu-button { display:block }
  nav { display:none; position:absolute; top:100%; left:0; right:0; background:#0d1c32; padding:.55rem 1rem; border-bottom:1px solid #3a5275 }
  nav.open { display:flex; align-items:stretch; flex-direction:column; gap:0 }
  nav a { padding:.7rem .35rem }
  .hero { min-height:490px }
  .hero-inner { padding-block:4.2rem }
  .hero h1 { font-size:clamp(3.3rem,10.7vw,5.15rem) }
  .hero-image { object-position:58% center }
  .hero-shade { background:linear-gradient(90deg,#091628f5,#0d1d36ad 58%,#0c172b54),linear-gradient(0deg,#0a172ce5,transparent 50%) }
  .section-heading { align-items:flex-start; flex-direction:column; gap:.48rem; margin-bottom:1.2rem }
  .section-heading > p { max-width:none }
  .world-grid,.retail-grid,.info-grid,.footer-grid,.split,.planner { grid-template-columns:1fr }
  .world-card { display:grid; grid-template-columns:38% 1fr }
  .world-card img { height:100%; min-height:138px }
  .world-card > div { padding:.75rem }
  .world-card p { margin:.25rem 0 .4rem; font-size:.79rem }
  .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .finder-top { align-items:flex-start; flex-direction:column; gap:.35rem }
  .split-image img { min-height:230px }
  .inventory-grid { grid-template-columns:1fr 1fr; gap:.6rem }
  .inventory-more { grid-column:1/-1 }
  .inventory-grid article img { height:115px }
  .planner-intro img { display:none }
  .planner-intro button { margin-top:.6rem }
  .footer-grid { gap:1.25rem }
}
@media (max-width:390px) {
  .hero h1 { font-size:3.01rem }
  .market-grid,.form-grid { grid-template-columns:1fr }
  .assistant-zone { gap:.4rem }
  .assistant-zone img { width:24% }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none !important }
}
@font-face { font-family:"Barlow Condensed"; src:url("/assets/barlow-condensed.woff2") format("woff2"); font-weight:700; font-display:swap }
@font-face { font-family:"Inter"; src:url("/assets/inter.woff2") format("woff2"); font-weight:400 800; font-display:swap }
.arrow { display:inline-block; flex:none; width:.85em; height:.85em; position:relative; transform:rotate(-45deg); margin-inline:.2em }
.arrow::before,.arrow::after { content:""; position:absolute; top:50%; right:0 }
.arrow::before { border-top:1.5px solid currentColor; width:100% }
.arrow::after { width:.46em; height:.46em; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:translateY(-45%) rotate(45deg) }
.arrow-down { transform:rotate(45deg) }
.arrow-right { transform:none }
.arrow-up { transform:rotate(-90deg) }
.world-card span .arrow { align-self:center }