:root{--primary:#2563eb;--primary-600:#1d4ed8;--text:#0b1220;--muted:#606a7a;--surface:#fff;--surface-2:#f6f8fb;--border:rgba(11,18,32,.12);--ring:0 0 0 3px rgba(37,99,235,.35);--hero-bg:#0b1020}
html[data-theme=dark]{--text:#e5e7eb;--muted:#9aa3b2;--surface:#0f172a;--surface-2:#0b132a;--border:rgba(229,231,235,.16)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--surface-2);transition:background-color .3s ease,color .3s ease}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin-inline:auto}
header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--border)}
header{background:rgba(255,255,255,.47)}html[data-theme=dark] header{background:rgba(11,19,42,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:none;box-shadow:none;border:1px solid var(--border);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
nav ul{display:flex;list-style:none;gap:18px;padding:0;margin:0}
nav a{padding:8px 10px;border-radius:10px}
nav a:hover,nav a:focus{outline:0;box-shadow:var(--ring);text-decoration:none}
nav a.active{background:rgba(37,99,235,.12);text-decoration:none}
:target{scroll-margin-top:82px}
.hero{padding:clamp(40px,6vw,96px) 0}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"title visual" "copy visual";gap:clamp(24px,4vw,48px);align-items:center}
.hero-title{grid-area:title}
.hero-copy{grid-area:copy}
.hero h1{font-size:clamp(28px,5vw,52px);line-height:1.1;margin:0 0 12px}
.hero p{margin:0 0 22px;color:var(--muted)}
.motto{font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.chip{border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:14px}
.cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;border:0;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:600;box-shadow:0 10px 24px rgba(37,99,235,.4)}
.cta:focus-visible{outline:0;box-shadow:var(--ring)}
.hero-visual{grid-area:visual;aspect-ratio:4/3;border-radius:20px;background:var(--hero-bg);border:none;padding:0;display:grid;place-items:center;overflow:hidden}
.hero-visual img{width:100%;height:100%;object-fit:contain;display:block;background:var(--hero-bg)}
@media (max-width:640px){.hero-inner{grid-template-columns:1fr;grid-template-areas:"title" "visual" "copy"}.hero-copy{margin-top:-6px}}
section{padding:clamp(36px,6vw,80px) 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head h2{font-size:clamp(22px,3.2vw,32px);margin:0}
.section-head p{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--surface);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(37,99,235,.18)}
.card .media{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,rgba(37,99,235,.18),transparent);display:grid;place-items:center;font-weight:600;border:1px solid rgba(0,0,0,.12)}
html[data-theme=dark] .card .media{border-color:rgba(255,255,255,.14)}
.card .media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}
.meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);margin:10px 0}
.title{font-weight:700;margin:10px 0 4px;font-size:18px}
.desc{color:var(--muted);margin:0 0 10px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12px;padding:4px 8px;border-radius:999px;border:1px dashed rgba(0,0,0,.18)}
html[data-theme=dark] .tag{border-color:rgba(255,255,255,.18)}
@media (min-width:640px){.card{grid-column:span 6}}
@media (min-width:960px){.card{grid-column:span 4}}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;border-radius:10px;background:var(--surface);color:inherit;text-decoration:none;font-weight:600}
.btn.primary{border:0;background:linear-gradient(135deg,var(--primary),var(--primary-600));color:#fff;box-shadow:0 8px 18px rgba(37,99,235,.25)}
.btn:hover{text-decoration:none;box-shadow:var(--ring)}
.icon-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.icon-link{width:38px;height:38px;border-radius:12px;display:inline-grid;place-items:center;border:1px solid var(--border);background:var(--surface);color:inherit}
.icon-link:hover{box-shadow:var(--ring);text-decoration:none}
.icon-link svg{width:20px;height:20px;display:block}
footer{padding:36px 0 60px;color:var(--muted);border-top:1px solid var(--border)}
.reveal{opacity:0;transform:translateY(8px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.theme-toggle{width:38px;height:38px;border-radius:12px;border:1px solid rgba(0,0,0,.16);background:none;cursor:pointer;display:inline-grid;place-items:center;color:#0b1220}
.theme-toggle:focus-visible{outline:0;box-shadow:var(--ring)}
.theme-toggle svg{width:20px;height:20px;display:block}
html[data-theme=dark] .theme-toggle{color:#94a3b8;border-color:rgba(148,163,184,.4);background:rgba(148,163,184,.07)}
#preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(255,255,255,.8);transition:opacity .6s ease,visibility .6s ease}
html[data-theme=dark] #preloader{background:rgba(11,19,42,.8)}
#preloader.hide{opacity:0;visibility:hidden}
.spinner{width:48px;height:48px;border-radius:50%;border:3px solid currentColor;border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.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}
#toTop{position:fixed;right:18px;bottom:18px;z-index:60;display:none}
#toTop.show{display:inline-grid}
@media print{header,#toTop,.theme-toggle,.cta,.icon-links{display:none!important}body{background:#fff!important;color:#000!important}a::after{content:" (" attr(href) ")";font-weight:400;font-size:12px}.card{page-break-inside:avoid;border-color:#ddd}.hero-visual{border:1px solid #ddd}.tag{border-color:#aaa}.grid{gap:12px}.section-head h2{margin-top:16px}footer{color:#666!important}}