:root{--bg:#0f1114;--ink:#f6f7f8;--muted:#c9cdd3;--accent:#6E775D}
*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial; color:var(--ink); background:var(--bg)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.fade-in{opacity:0;animation:fade .7s ease forwards}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
a{color:inherit;text-decoration:none}
header.sticky{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:rgba(15,17,20,.45);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:38px;width:auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.brand .name{font-weight:700;letter-spacing:.2px}
.hero{position:relative;min-height:68vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.6)),url('https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat}
.hero .inner{padding:84px 0;text-align:left}
h1{font-size:clamp(36px,6vw,60px);line-height:1.05;margin:0}
.tag{opacity:.92;margin-top:10px;font-size:clamp(16px,2.5vw,22px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);font-weight:600}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff}.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:#fff}
.section{padding:56px 0}
.cards{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px;margin-top:20px}
.card{background:#111418;border:1px solid rgba(255,255,255,.06);padding:20px;border-radius:18px;box-shadow:0 10px 22px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.24);border-color:rgba(255,255,255,.18)}
h2{font-size:clamp(24px,3.5vw,36px);margin:0 0 6px}.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:1fr;gap:20px}
label{display:block;margin:0 0 6px;font-size:14px}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#0c0e11;color:var(--ink);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,119,93,.25)}
button{cursor:pointer}
.notice{margin-top:8px;padding:10px 12px;border-radius:10px;font-size:14px;opacity:0}
.notice.show{animation:fade .4s ease forwards, fadeOut .4s ease forwards 6s}
.success{background:rgba(46,160,67,.15);border:1px solid rgba(46,160,67,.35);color:#8EF0A3}
.error{background:rgba(240,62,62,.12);border:1px solid rgba(240,62,62,.35);color:#ffbfbf;opacity:1}
footer{border-top:1px solid rgba(255,255,255,.08);padding:26px 0;color:var(--muted);font-size:14px}
footer .links a{margin-left:14px;color:var(--muted)}footer .links a:hover{color:#fff;text-decoration:underline}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr 1fr}.brand img{height:48px}}
@media (min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}.brand img{height:52px}}