:root { --navy:#0b3557; --deep:#06283f; --teal:#087e7b; --gold:#f3ba4e; --cream:#f7f5ef; --ink:#17384f; --muted:#667e8c; --line:#d9e5e5; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.shell { width:min(1160px,calc(100% - 44px)); margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:10px 15px; color:#fff; background:var(--navy); border-radius:9px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
body > header { position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(11,53,87,.09); background:rgba(247,245,239,.94); backdrop-filter:blur(16px); }
.header-inner { display:flex; min-height:78px; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand > span:last-child { display:grid; gap:2px; }
.brand strong { color:var(--navy); font-size:1.05rem; }
.brand small { color:var(--muted); font-size:.63rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.brand-mark { position:relative; display:grid; width:38px; height:38px; place-items:center; border:2px solid var(--teal); border-radius:50%; }
.brand-mark::before,.brand-mark::after { position:absolute; width:18px; height:2px; background:var(--teal); content:""; }
.brand-mark::before { transform:rotate(45deg); }.brand-mark::after { transform:rotate(-45deg); }
.brand-mark i { position:absolute; width:6px; height:6px; background:var(--gold); border:2px solid var(--cream); border-radius:50%; }
.brand-mark i:nth-child(1){top:-3px}.brand-mark i:nth-child(2){right:-3px}.brand-mark i:nth-child(3){bottom:-3px;left:2px}
nav { display:flex; gap:7px; }
nav a { display:inline-flex; min-height:42px; align-items:center; padding:8px 14px; color:var(--navy); border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.76rem; font-weight:800; text-decoration:none; }
nav a:first-child { color:var(--teal); border-color:#b9ded9; background:#edf8f5; }
.hero { padding:82px 0 74px; color:#fff; background:linear-gradient(145deg,var(--deep),#0b5e69); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:72px; }
.kicker { display:flex; align-items:center; gap:10px; margin:0 0 19px; color:#8edbd1; font-size:.68rem; font-weight:850; letter-spacing:.14em; }
.kicker span { width:28px; height:2px; background:currentColor; }
h1 { margin:0 0 22px; font-size:clamp(3.1rem,6vw,5.9rem); line-height:.92; letter-spacing:-.06em; }
h1 em { color:var(--gold); font-style:normal; }
.hero-grid > div:first-child > p:last-child { max-width:660px; margin:0; color:#c9dce3; font-size:1rem; line-height:1.7; }
.hero-map { display:grid; grid-template-columns:1fr 1fr; gap:12px; transform:rotate(2deg); }
.hero-map > span { display:grid; min-height:125px; place-items:center; align-content:center; gap:8px; color:var(--navy); border-radius:22px; background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.16); font-size:1.8rem; font-weight:900; }
.hero-map > span:nth-child(2),.hero-map > span:nth-child(3) { background:#c5ebe4; }
.hero-map small { color:var(--navy); font-size:.7rem; letter-spacing:.02em; }
.doors { padding:76px 0 96px; }
.door-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.door { position:relative; padding:29px; overflow:hidden; border:1px solid var(--line); border-radius:23px; background:#fff; box-shadow:0 14px 35px rgba(8,49,72,.07); }
.door::after { position:absolute; top:-45px; right:-45px; width:135px; height:135px; border:22px solid rgba(8,126,123,.055); border-radius:50%; content:""; }
.door > header { position:relative; z-index:1; display:flex; align-items:center; gap:14px; }
.door > header > span { display:grid; width:50px; height:50px; flex:0 0 auto; place-items:center; color:#fff; background:var(--teal); border-radius:15px; font-size:1.15rem; font-weight:900; }
.door > header small { color:var(--teal); font-size:.62rem; font-weight:850; letter-spacing:.12em; }
.door h2 { margin:3px 0 0; color:var(--navy); font-size:1.7rem; letter-spacing:-.045em; }
.door > p { min-height:70px; margin:18px 0; color:var(--muted); font-size:.82rem; line-height:1.6; }
.link-list { display:grid; gap:6px; }
.link-list a { display:flex; min-height:61px; align-items:center; justify-content:space-between; gap:13px; padding:10px 12px; border:1px solid #e0e8e8; border-radius:12px; background:#fbfcfa; text-decoration:none; }
.link-list a:hover { border-color:#a7d6d0; background:#edf8f5; transform:translateX(2px); }
.link-list a > span { display:grid; gap:3px; }
.link-list strong { color:var(--navy); font-size:.78rem; }
.link-list small { color:var(--muted); font-size:.66rem; }
.link-list b { color:var(--teal); }
.door-workshop > header > span { background:#735dc3; }.door-workshop > header small { color:#6654b0; }
.door-methods > header > span { color:var(--navy); background:var(--gold); }.door-methods > header small { color:#a36d0b; }
.door-book { color:#fff; border:0; background:linear-gradient(145deg,#092f4b,#087873); box-shadow:0 18px 45px rgba(7,66,77,.2); }
.door-book::after { border-color:rgba(255,255,255,.07); }
.door-book > header > span { color:var(--navy); background:var(--gold); }
.door-book > header small { color:#9be0d7; }.door-book h2 { color:#fff; }.door-book > p { min-height:0; color:#d1e1e6; }
.live-badge { position:absolute; top:18px; right:18px; z-index:2; padding:6px 9px; color:var(--navy); border-radius:999px; background:var(--gold); font-size:.57rem; font-weight:900; letter-spacing:.08em; }
.door-book ul { display:grid; gap:8px; margin:17px 0 21px; padding:0; list-style:none; color:#d9e9eb; font-size:.72rem; }
.door-book li::before { margin-right:8px; color:var(--gold); content:"✓"; font-weight:900; }
.book-action { display:flex; min-height:55px; align-items:center; justify-content:space-between; padding:12px 16px; color:var(--navy); border-radius:13px; background:var(--gold); font-size:.78rem; font-weight:850; text-decoration:none; }
.book-action:hover { background:#ffd174; }
.smart-route { padding:0 0 96px; }
.smart-route .shell { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:27px 31px; color:#fff; border-radius:20px; background:var(--navy); }
.smart-route .shell > div { display:flex; align-items:center; gap:18px; }
.smart-route .shell > div > span { display:grid; width:52px; height:52px; flex:0 0 auto; place-items:center; color:var(--navy); background:#bce8df; border-radius:15px; font-size:1.5rem; }
.smart-route small { color:#83d7cf; font-size:.61rem; font-weight:850; letter-spacing:.11em; }
.smart-route h2 { margin:4px 0; font-size:1.35rem; }.smart-route p { margin:0; color:#bfd0d9; font-size:.72rem; }
.smart-route .shell > a { flex:0 0 auto; padding:13px 17px; color:var(--navy); border-radius:11px; background:var(--gold); font-size:.75rem; font-weight:850; text-decoration:none; }
body > footer { color:#b9cbd4; background:var(--deep); }
body > footer .shell { display:grid; min-height:112px; grid-template-columns:1fr auto 1fr; align-items:center; gap:25px; font-size:.72rem; }
body > footer p { margin:0; }body > footer p:last-child { justify-self:end; }body > footer .brand strong { color:#fff; }
@media(max-width:800px){.hero-grid{grid-template-columns:1fr;gap:45px}.hero-map{max-width:560px}.door-grid{grid-template-columns:1fr}.door>p{min-height:0}.smart-route .shell{align-items:stretch;flex-direction:column}.smart-route .shell>a{text-align:center}body>footer .shell{grid-template-columns:1fr;text-align:center;padding:28px 0}body>footer p:last-child{justify-self:center}}
@media(max-width:520px){.shell{width:min(100% - 28px,1160px)}.header-inner{min-height:70px}.brand small{display:none}nav a:first-child{display:none}.hero{padding:58px 0}.hero-map>span{min-height:95px}.doors{padding:48px 0 68px}.door{padding:22px 18px}.live-badge{position:static;display:inline-block;margin-bottom:15px}.smart-route .shell{padding:23px}.smart-route .shell>div{align-items:flex-start}.smart-route .shell>div>span{display:none}}