* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: #07111c; color: #eaf1f7; line-height: 1.6; }
header { height: 78px; padding: 0 max(5vw, 24px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #21384b; position: sticky; top: 0; background: rgba(7,17,28,.95); z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; color: #eaf1f7; text-decoration: none; letter-spacing: .06em; font-size: 13px; }
.mark { display: grid; place-items: center; width: 42px; height: 36px; border: 1px solid #56d7e7; color: #56d7e7; font-weight: 800; font-size: 11px; }
.brand b { color: #56d7e7; }
nav { display: flex; gap: 28px; align-items: center; }
nav a { color: #c9d5de; text-decoration: none; font-size: 14px; }
.navcta { border: 1px solid #56d7e7; padding: 9px 14px !important; color: #56d7e7 !important; }
.hero { min-height: 650px; padding: 110px max(8vw, 32px) 80px; background: radial-gradient(circle at 80% 35%, rgba(86,215,231,.12), transparent 28%), linear-gradient(145deg, #07111c, #0a1825); }
.eyebrow, .kicker { font-size: 12px; letter-spacing: .18em; color: #56d7e7; font-weight: 800; }
.hero h1 { font-size: clamp(44px, 6vw, 78px); line-height: 1.04; max-width: 1000px; margin: 22px 0; }
.hero h1 span { color: #9eb3c2; font-weight: 500; }
.lede { max-width: 720px; font-size: 20px; color: #bdcbd5; }
.actions { display: flex; gap: 14px; margin: 36px 0 65px; }
.button { display: inline-block; text-decoration: none; padding: 13px 20px; font-weight: 750; font-size: 14px; }
.primary { background: #56d7e7; color: #041018; }
.secondary { border: 1px solid #456175; color: #eaf1f7; }
.techline { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 11px; letter-spacing: .12em; color: #7f97a8; }
.techline i { width: 4px; height: 4px; border-radius: 50%; background: #56d7e7; }
.section { padding: 100px max(8vw, 32px); background: #f5f8fa; color: #0b1722; }
.section h2, .band h2, .contact h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.12; margin: 14px 0 20px; max-width: 820px; }
.intro { max-width: 760px; color: #536675; font-size: 18px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ccd7df; margin-top: 50px; border: 1px solid #ccd7df; }
.cards article { background: white; padding: 30px; min-height: 300px; }
.num { font-size: 12px; color: #6a8495; font-weight: 800; }
.cards h3 { font-size: 21px; margin-top: 42px; }
.cards p { color: #5a6c79; }
.cards small { display: block; margin-top: 28px; font-weight: 800; color: #2a7180; letter-spacing: .08em; }
.band { padding: 90px max(8vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; background: #0b1a28; }
.service-list { display: grid; }
.service-list span { padding: 16px 0; border-bottom: 1px solid #21384b; color: #c8d4dd; }
.experience { background: #e9eff3; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 55px; border-top: 2px solid #9fb3c1; }
.timeline div { padding: 25px 28px 10px 0; }
.timeline b { font-size: 12px; color: #167b8a; }
.timeline p, .about p { color: #5c6e7b; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.about p { font-size: 18px; }
.callout { border-left: 3px solid #16899a; font-weight: 650; padding-left: 22px !important; color: #1c3546 !important; }
.contact { text-align: center; padding: 110px max(8vw, 32px); }
.contact h2 { margin: 14px auto; }
.contact p { max-width: 700px; margin: 0 auto 30px; color: #a9bac6; font-size: 18px; }
footer { padding: 48px max(8vw, 32px); border-top: 1px solid #21384b; color: #8fa3b2; }
footer > p { font-size: 13px; }
.legal { max-width: 1000px; font-size: 11px; color: #6f8494; }
@media (max-width: 850px) { nav a:not(.navcta) { display: none; } .cards { grid-template-columns: 1fr 1fr; } .band, .about { grid-template-columns: 1fr; gap: 30px; } .timeline { grid-template-columns: 1fr; } .actions { flex-wrap: wrap; } }
@media (max-width: 540px) { .cards { grid-template-columns: 1fr; } .hero h1 { font-size: 42px; } .section, .band, .contact { padding: 70px 24px; } .hero { padding: 80px 24px; } }