:root{--bg:#070a12;--panel:#0e1320;--line:#1c2538;--text:#e8edf6;--dim:#8d99b3;--acc:#4fb3ff;--glow:#2f7cff}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
body{margin:0;max-width:960px;padding:0 20px;margin-inline:auto}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;letter-spacing:.2px}
.brand:hover{text-decoration:none}
.mark{width:34px;height:34px;filter:drop-shadow(0 0 6px rgba(79,179,255,.6))}
nav a{color:var(--dim);margin-left:22px;font-size:15px}
.hero{padding:72px 0 56px;display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:center}
.hero-art{width:100%;max-width:340px;justify-self:end;filter:drop-shadow(0 0 28px rgba(79,179,255,.35))}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{max-width:260px;justify-self:center;order:-1}}
.kicker{color:var(--acc);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}
h1{font-size:clamp(32px,4.2vw,44px);line-height:1.12;margin:0 0 22px;font-weight:700;letter-spacing:-.02em}
.lede{font-size:19px;color:var(--dim);max-width:640px;margin:0 0 30px}
.cta{display:inline-block;background:var(--acc);color:#06101c;font-weight:700;padding:13px 22px;border-radius:10px;box-shadow:0 0 24px rgba(79,179,255,.35)}
.cta:hover{text-decoration:none;filter:brightness(1.08)}
h2{font-size:26px;margin:0 0 22px;letter-spacing:-.01em}
.grid{padding:48px 0;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cards article{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.cards h3{margin:0 0 8px;font-size:17px}
.cards p{margin:0;color:var(--dim);font-size:15px}
.approach{padding:48px 0;border-top:1px solid var(--line)}
.approach p{color:var(--dim);max-width:680px}
.approach ul{padding-left:20px;color:var(--dim)}
.approach li{margin:8px 0}
.approach b{color:var(--text)}
.contact{padding:48px 0;border-top:1px solid var(--line)}
.big{font-size:24px;font-weight:600}
.dim{color:var(--dim);font-size:14px}
footer{padding:34px 0 48px;border-top:1px solid var(--line);color:var(--dim);font-size:14px}
main.doc h1{font-size:34px}
main.doc{padding:40px 0}
main.doc h2{font-size:20px;margin-top:32px}
main.doc p,main.doc li{color:var(--dim)}
main.doc b{color:var(--text)}
@media (max-width:600px){nav a{margin-left:14px;font-size:14px}.hero{padding:56px 0 44px}}

.yuki{display:flex;align-items:center;gap:12px}
.yuki img{width:44px;height:44px;border-radius:50%;background:#fff}

.cform{max-width:560px;margin-top:18px}
.cform label{display:block;color:var(--dim);font-size:14px;margin-top:12px}
.cform input,.cform textarea{display:block;width:100%;margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px;font:inherit;font-size:16px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--acc)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.frow{grid-template-columns:1fr}}
.cform .cta{margin-top:16px;border:none;cursor:pointer;font:inherit;font-weight:700}
.hidden{display:none}