:root {
    --bg:#f3f6f8; --surface:#fff; --text:#182a3a; --muted:#536777;
    --border:#d8e2e8; --accent:#007f79; --soft:#e1f4f0;
    --shadow:0 12px 35px #132d4110;
    color-scheme:light;
}
:root[data-theme="dark"] {
    --bg:#0d1722; --surface:#162330; --text:#eef5fa; --muted:#adbfcd;
    --border:#2b3b4b; --accent:#59dfc7; --soft:#173c3b;
    --shadow:0 12px 35px #0002;
    color-scheme:dark;
}
@media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg:#0d1722; --surface:#162330; --text:#eef5fa; --muted:#adbfcd;
        --border:#2b3b4b; --accent:#59dfc7; --soft:#173c3b;
        --shadow:0 12px 35px #0002;
        color-scheme:dark;
    }
}
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.container { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:10; padding:12px; background:var(--surface); }
.skip-link:focus { top:12px; }
.site-header { background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; gap:32px; min-height:88px; }
.brand { display:inline-flex; align-items:center; font-size:25px; font-weight:800; letter-spacing:-1px; }
.brand > span:last-child { color:var(--accent); }
.brand-icon { display:grid; place-items:center; width:36px; height:36px; margin-right:10px; border-radius:10px; background:var(--accent); color:var(--surface); font-size:24px; font-style:italic; }
nav { display:flex; gap:28px; margin-left:auto; }
nav a { padding:10px 0; font-size:14px; font-weight:650; }
nav a:hover,.quick-links a:hover { color:var(--accent); }
.theme-control { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
select { padding:8px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--surface); }
.hero { position:relative; overflow:hidden; isolation:isolate; background:#112737; color:#fff; }
.hero-content { position:relative; padding-block:76px 64px; z-index:1; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:2px; }
.hero .eyebrow { color:#73e7d3; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-block:18px; font-size:clamp(44px,5.8vw,76px); line-height:1.08; letter-spacing:-3px; }
h1 span { color:#70e6d0; }
.hero-description { color:#c8d8e1; font-size:18px; margin-bottom:30px; }
.search-panel { width:min(660px,100%); background:var(--surface); color:var(--text); padding:22px; border:1px solid var(--border); border-radius:16px; box-shadow:0 18px 50px #0003; scroll-margin-top:24px; }
.search-panel label { display:block; font-size:14px; font-weight:700; margin-bottom:10px; }
.search-row { display:flex; gap:10px; }
input { width:100%; min-width:0; border:1px solid var(--border); background:var(--bg); color:var(--text); padding:13px; border-radius:9px; }
input::placeholder { color:var(--muted); opacity:1; }
button { flex-shrink:0; cursor:pointer; border:0; border-radius:9px; padding:13px 20px; background:#70e6d0; color:#102c32; font-weight:750; }
button:hover { background:#9ef3e2; }
.search-panel p { margin:10px 0 0; font-size:12px; color:var(--muted); }
#search-result { border-top:1px solid var(--border); padding-top:12px; font-size:14px; }
.quick-links { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:22px; font-size:12px; }
.quick-links > span { color:#bdd0dd; }
.quick-links a { border:1px solid #688190; padding:6px 12px; border-radius:30px; }
.hero-art { position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 85% 25%,#478082 0,transparent 46%),linear-gradient(115deg,#102331 35%,#203b4a); }
.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#102331 8%,#102331b8 48%,transparent); }
.train { position:absolute; width:650px; height:160px; right:-180px; top:42%; transform:rotate(-13deg); border-radius:140px 18px 25px 30px; background:linear-gradient(#d3e2e5,#7195a5); border-bottom:18px solid #2bc4b0; box-shadow:0 22px 0 #10222e; }
.train-windows { position:absolute; left:75px; right:0; top:24px; height:50px; border-radius:50px 0 0 5px; background:repeating-linear-gradient(90deg,#183747 0 65px,#91acb6 65px 77px); }
.rail { position:absolute; right:-10%; width:78%; height:4px; background:#7194a0; transform:rotate(-13deg); }
.rail-one { top:77%; }.rail-two { top:84%; }
.art-credit { position:absolute; bottom:12px; right:24px; color:#bdcfd8; font-size:10px; }
.section { padding-block:62px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px; }
h2 { font-size:clamp(26px,3vw,36px); line-height:1.2; letter-spacing:-1px; margin:10px 0 0; }
.section-heading p { font-size:14px; color:var(--muted); margin:0; }
.feature-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.feature-card { padding:24px 20px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
.feature-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--soft); color:var(--accent); font-size:27px; margin-bottom:22px; }
h3 { font-size:19px; line-height:1.3; margin-bottom:10px; }
.feature-card p { font-size:14px; color:var(--muted); min-height:90px; }
.badge { display:inline-block; font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:4px 8px; }
.community-section { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-bottom:70px; align-items:center; }
.community-copy > p { color:var(--muted); max-width:510px; margin-block:20px; }
.photo-card { display:flex; align-items:start; gap:20px; background:var(--soft); border:1px solid var(--border); border-radius:18px; padding:32px; }
.photo-card h3 { margin-top:12px; font-size:24px; }
.photo-card p { font-size:14px; color:var(--muted); }
.photo-symbol { font-size:42px; color:var(--accent); }
.site-footer { border-top:1px solid var(--border); background:var(--surface); padding-block:30px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-inner p,.footer-inner > span { font-size:12px; color:var(--muted); margin:8px 0 0; }
@media(max-width:1000px) {
    .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .header-inner { gap:20px; }
    nav { gap:18px; }
    .theme-control > span { display:none; }
    .community-section { gap:24px; }
}
@media(max-width:700px) {
    .container { width:calc(100% - 32px); }
    .header-inner { flex-wrap:wrap; gap:8px; padding-block:14px; }
    .theme-control { margin-left:auto; }
    nav { order:3; width:100%; margin:0; justify-content:space-between; }
    .hero-content { padding-block:48px 55px; }
    h1 { letter-spacing:-2px; }
    .hero-description { font-size:16px; }
    .train { opacity:.35; right:-430px; }
    .search-row { flex-direction:column; }
    .search-panel { padding:18px; }
    .section { padding-block:40px; }
    .section-heading { display:block; }
    .section-heading p { margin-top:12px; }
    .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .feature-card { padding:20px 16px; }
    .feature-card p { min-height:0; }
    .community-section { grid-template-columns:1fr; padding-bottom:40px; }
    .photo-card { padding:24px; }
    .footer-inner { align-items:start; flex-direction:column; }
}
@media(max-width:380px) {
    .feature-grid { grid-template-columns:1fr; }
    .photo-symbol { display:none; }
}
