:root { --ink:#060b16; --midnight:#0b1322; --pulse:#1e6df0; --pulse-dark:#1557c8; --cyan:#6fe7ff; --paper:#f4f7fb; --line:rgba(6,11,22,.14); --display:"Bebas Neue",Impact,sans-serif; --body:"Source Sans 3","Segoe UI",sans-serif; --mono:"JetBrains Mono",Consolas,monospace; --ease:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--pulse); outline-offset:3px; }
.skip-link { position:fixed; top:10px; left:10px; z-index:1000; padding:12px 16px; background:white; color:var(--ink); font-weight:700; transform:translateY(-150%); transition:transform .2s var(--ease); }
.skip-link:focus { transform:translateY(0); }
.wrap { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }
.mono { font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.kicker { margin:0 0 18px; color:var(--pulse); }
.utility { height:34px; background:#02050b; color:#bdc8d6; }
.utility .wrap { height:100%; display:flex; align-items:center; justify-content:space-between; }
.utility span { display:flex; align-items:center; gap:8px; }
.utility i { width:6px; height:6px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.topbar { position:sticky; top:0; z-index:40; color:white; background:rgba(6,11,22,.96); border-bottom:1px solid rgba(255,255,255,.11); backdrop-filter:blur(14px); }
.nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-family:var(--display); font-size:1.75rem; letter-spacing:.035em; }
.brand-mark { width:32px; height:32px; border:1px solid rgba(255,255,255,.35); position:relative; overflow:hidden; }
.brand-mark::before { content:""; position:absolute; inset:7px 5px; background:linear-gradient(90deg,var(--pulse) 0 54%,transparent 54%); box-shadow:8px 5px 0 -1px var(--cyan),0 10px 0 var(--pulse); }
nav { display:flex; align-items:center; gap:28px; color:#c5cfdd; }
nav a { transition:color .2s; }
nav a:hover,nav a.active { color:white; }
nav a.active { position:relative; }
nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-11px; height:2px; background:var(--cyan); }
.menu-btn { display:none; border:0; background:transparent; color:white; min-height:48px; font-weight:700; }
.contact-hero { background:var(--ink); color:white; position:relative; overflow:hidden; }
.contact-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,black,transparent); }
.hero-grid { min-height:440px; padding:58px 0; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:68px; position:relative; }
.hero-copy h1 { margin:0; font-family:var(--display); font-size:clamp(4.5rem,8vw,7.8rem); font-weight:400; line-height:.86; text-transform:uppercase; }
.hero-copy h1 span { color:var(--cyan); }
.hero-copy>p:last-child { max-width:620px; margin-top:28px; color:#aeb9c9; font-size:1.12rem; }
.signal-card { min-height:310px; border:1px solid rgba(111,231,255,.36); display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; background:radial-gradient(circle at center,rgba(30,109,240,.2),transparent 62%); }
.signal-label { position:absolute; left:22px; top:20px; color:var(--cyan); }
.signal-status { position:absolute; bottom:24px; color:#9ba8ba; }
.signal-rings { width:230px; height:230px; position:relative; display:grid; place-items:center; }
.signal-rings i { position:absolute; border:1px solid rgba(111,231,255,.38); border-radius:50%; animation:pulse-ring 3s ease-out infinite; }
.signal-rings i:nth-child(1) { width:90px; height:90px; }
.signal-rings i:nth-child(2) { width:150px; height:150px; animation-delay:.45s; }
.signal-rings i:nth-child(3) { width:220px; height:220px; animation-delay:.9s; }
.signal-rings b { width:18px; height:18px; background:var(--cyan); box-shadow:0 0 32px var(--cyan); }
@keyframes pulse-ring { 0%,100% { transform:scale(.92); opacity:.35; } 50% { transform:scale(1.05); opacity:1; } }
.contact-body { padding:88px 0 110px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:34px; align-items:start; }
.inquiry-form { background:white; border:1px solid var(--line); padding:42px; box-shadow:0 20px 70px rgba(18,35,60,.08); }
.form-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:30px; border-bottom:1px solid var(--line); }
.form-head h2 { margin:0; font-family:var(--display); font-weight:400; font-size:4.2rem; line-height:.9; text-transform:uppercase; }
.form-type { padding:8px 10px; border:1px solid var(--line); font-family:var(--mono); color:var(--pulse-dark); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-top:30px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
label { font-weight:700; font-size:.92rem; }
.required { color:#b42318; font-weight:700; }
.field-help { margin:0; color:#657285; font-size:.84rem; }
input,select,textarea { width:100%; border:1px solid #c6d0dd; background:white; color:var(--ink); border-radius:0; padding:14px 15px; transition:border-color .2s,box-shadow .2s; }
input:focus,select:focus,textarea:focus { border-color:var(--pulse); box-shadow:0 0 0 3px rgba(47,125,255,.12); outline:0; }
textarea { min-height:160px; resize:vertical; }
.form-footer { margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.form-footer p { margin:0; color:#677487; font-size:.88rem; max-width:430px; }
.btn { min-height:54px; padding:0 24px; border-radius:999px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; white-space:nowrap; touch-action:manipulation; transition:transform .22s var(--ease),box-shadow .22s,background .22s,color .22s; }
.btn:hover { transform:translateY(-3px); box-shadow:0 16px 42px rgba(0,0,0,.18); }
.btn:active { transform:translateY(0) scale(.98); }
.btn svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.btn.primary { background:var(--pulse); color:white; }
.btn.secondary { background:var(--ink); color:white; margin-top:22px; }
.result { margin-top:18px; color:#147245; font-weight:700; }
.inquiry-output { margin-top:18px; }
.inquiry-output[hidden] { display:none; }
.inquiry-output label { display:block; margin-bottom:8px; }
.inquiry-output textarea { min-height:210px; background:#f7f9fc; font-family:var(--mono); font-size:.8rem; }
.output-actions { display:flex; align-items:center; gap:14px; margin-top:12px; }
.output-actions .btn { min-height:46px; }
.contact-aside { display:grid; gap:18px; }
.aside-block { border:1px solid var(--line); background:white; padding:30px; }
.aside-block.dark { background:var(--midnight); color:white; border-color:var(--midnight); }
.aside-block.dark .kicker { color:var(--cyan); }
.aside-block dl { margin:0; }
.aside-block dl div { padding:14px 0; border-bottom:1px solid var(--line); }
.aside-block dl div:last-child { border:0; }
dt { color:#748093; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
dd { margin:4px 0 0; font-weight:600; }
.aside-block dd a { color:var(--pulse-dark); text-decoration:underline; text-decoration-color:rgba(30,109,240,.3); text-underline-offset:3px; }
.aside-block dd a:hover { text-decoration-color:currentColor; }
.text-link { margin-top:22px; display:inline-flex; align-items:center; gap:9px; font-weight:700; }
.text-link span { width:28px; height:1px; background:var(--pulse); }
.aside-block ul { margin:0; padding:0; list-style:none; }
.aside-block li { padding:12px 0 12px 22px; border-bottom:1px solid rgba(255,255,255,.12); position:relative; color:#aeb9c9; }
.aside-block li::before { content:""; width:7px; height:7px; background:var(--cyan); position:absolute; left:0; top:20px; }
.aside-block h3 { margin:0; font-family:var(--display); font-weight:400; font-size:2.7rem; line-height:.95; text-transform:uppercase; }
footer { background:#02050b; color:white; padding:50px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; }
.footer-grid p { margin:12px 0 0; color:#7f8b9d; }
.footer-links { display:flex; align-items:center; justify-content:flex-end; gap:24px; color:#b7c1cf; }
.footer-links a,.footer-links button { min-height:44px; display:inline-flex; align-items:center; }
.footer-links button { border:0; padding:0; background:transparent; color:inherit; cursor:pointer; }
.copyright { margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); color:#6f7b8d; font-size:.85rem; }
@media (max-width:850px) { .hero-grid,.contact-layout { grid-template-columns:minmax(0,1fr); } .inquiry-form,.contact-aside { min-width:0; } .signal-card { min-height:300px; } nav { display:none; position:absolute; top:100%; left:0; right:0; padding:22px 24px; background:var(--midnight); flex-direction:column; align-items:stretch; } nav.open { display:flex; } .menu-btn { display:block; } .form-footer { align-items:stretch; flex-direction:column; } }
@media (max-width:600px) { .wrap { width:min(100% - 28px,1200px); } .utility span:nth-child(n+2) { display:none; } .hero-grid { min-height:auto; padding:56px 0; gap:38px; } .hero-copy h1 { font-size:clamp(4.1rem,22vw,6.2rem); } .contact-body { padding:64px 0 78px; } .inquiry-form { padding:26px 20px; } .form-head { flex-direction:column; } .form-type { align-self:flex-start; } .fields { grid-template-columns:1fr; } .field.full { grid-column:auto; } .form-head h2 { font-size:3.3rem; } .form-footer .btn { width:100%; } .output-actions { align-items:stretch; flex-direction:column; } .output-actions .btn { width:100%; } .footer-grid { grid-template-columns:1fr; align-items:start; } .footer-links { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }