:root{color-scheme:dark;--bg:#14181e;--text:#f5f7fa;--sub:#bec6d2;--line:#393f4b;--panel:#20262d;--blue:#9cb8ff;--radius:18px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.5 'Inter',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #9cb8ff;outline-offset:4px}
.site{width:min(100% - 32px,930px);margin:24px auto 0}
.hero{position:relative;display:flex;align-items:center;min-height:420px;isolation:isolate;overflow:hidden;border:1px solid #444f62;border-radius:var(--radius);background:linear-gradient(114deg,#202730 0%,#222b36 56%,#1744b5 56%,#234bb5 100%)}
.hero-copy{z-index:1;padding:34px clamp(24px,6vw,64px)}
.logo{display:block;object-fit:contain;margin-bottom:32px}
.role{margin:0 0 9px;color:#c8d8ff;font-size:.72rem;font-weight:750;letter-spacing:.17em}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;line-height:1}
h1{font-size:clamp(3.1rem,8vw,6.15rem);font-weight:950;font-style:italic;letter-spacing:-.065em;text-transform:uppercase}
.location{margin-top:22px;color:#e1e8f6;font-size:.94rem}
.portrait{position:absolute;z-index:0;inset:auto 0 0 auto;width:57%;height:95%;object-fit:contain;object-position:center top}
.links{max-width:620px;margin:24px auto 54px}
.intro{font-size:1.04rem;color:var(--sub);margin-bottom:20px}
.link-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:var(--panel);margin:9px 0;min-height:62px}
.link-row:hover{border-color:#8baeff;background:#263144}
.link-row small{display:block;color:var(--sub);margin-top:3px;font-size:.84rem}
.arrow{color:var(--blue);font-size:1.45rem}
.motos{scroll-margin-top:16px}
h2{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.04em;margin:0 0 21px}
.models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.model{min-width:0;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:13px}
.model-header{padding:4px 3px 13px}
h3{font-size:1.55rem;letter-spacing:-.03em}
.type{display:block;color:var(--sub);font-size:.87rem;margin-top:5px}
.viewer{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#edf1f6;touch-action:pan-y;cursor:grab}
.viewer:active{cursor:grabbing}
.viewer img{width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.viewer.gallery img{object-fit:cover}
.viewer-controls{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:3px;margin-top:7px;text-align:center;color:var(--sub);font-size:.72rem}
.viewer-controls button{height:42px;border:1px solid #4a5569;border-radius:7px;color:#fff;background:#252f3e;font-size:1.05rem}
.viewer-controls button:hover{background:#344668}
.model-link{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:9px;padding:9px 3px;font-weight:720;font-size:.89rem;color:var(--blue)}
.model-link:hover,.official:hover{text-decoration:underline}
.official{display:inline-block;padding:5px 3px;font-size:.77rem;color:var(--sub)}
.photo-credit,footer{color:var(--sub);font-size:.79rem;margin-top:13px}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:16px 0 110px;margin-top:30px}
.footer-details{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
footer button{border:0;background:none;color:var(--sub);text-decoration:underline}
.creator-credit{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.creator-credit:hover span{text-decoration:underline}
.creator-credit img{display:block;object-fit:contain}
.contact-bar{position:fixed;z-index:2;bottom:0;left:0;right:0;padding:8px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));pointer-events:none}
.contact-bar a{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:470px;margin:auto;padding:13px 17px;min-height:54px;border-radius:12px;background:#27df86;color:#062417;font-weight:850;box-shadow:0 5px 25px #000a}
.contact-bar a:hover{background:#65eda8}
.wa-label{margin-left:auto;font-size:.74rem;font-weight:650}
dialog{width:min(420px,calc(100% - 32px));background:#20262d;color:var(--text);border:1px solid #657084;border-radius:14px;padding:24px}
dialog h2{font-size:1.6rem}
dialog::backdrop{background:#080b12bc}
dialog form{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
dialog button{background:#283b5e;color:#fff;border:1px solid #778db6;border-radius:6px;padding:7px 12px}
@media(max-width:700px){.models{grid-template-columns:minmax(0,420px);justify-content:center}.hero{min-height:335px}.hero-copy{padding:26px 20px}.logo{margin-bottom:23px;width:72px;height:auto}.portrait{width:56%;height:86%;object-fit:cover}.motos h2{text-align:center}.photo-credit{text-align:center}}
@media(max-width:390px){.site{width:calc(100% - 22px);margin-top:11px}.hero-copy{padding:23px 13px}.hero h1{font-size:2.72rem}.role{font-size:.61rem}.location{font-size:.83rem}.portrait{object-position:55% top}.intro{font-size:.96rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}