:root { --ink:#081117; --ink-2:#0d1b23; --cyan:#21b9ea; --paper:#f1f3f2; --muted:#77828a; --line:rgba(8,17,23,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { position:fixed; inset:0 0 auto 0; z-index:50; height:88px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); transition:.25s ease; }
.site-header.is-scrolled { height:70px; background:rgba(8,17,23,.92); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; }
.brand-logo { display:block; width:auto; height:47px; }
nav { display:flex; align-items:center; gap:34px; font-size:14px; letter-spacing:.07em; }
nav a { opacity:.78; transition:.2s; }
nav a:hover { opacity:1; color:var(--cyan); }
.nav-contact { padding:13px 18px; border:1px solid rgba(255,255,255,.26); opacity:1; }
.nav-contact span,.button span,.text-link span { margin-left:12px; }
.menu-toggle { display:none; background:none; border:0; width:40px; height:40px; padding:10px; }
.menu-toggle span { display:block; height:1px; background:white; margin:7px 0; }
.hero { position:relative; min-height:760px; height:100vh; max-height:980px; background:var(--ink); color:#fff; padding:150px 7vw 75px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; isolation:isolate; overflow:hidden; }
.hero:before { content:""; position:absolute; width:640px; height:640px; right:-120px; top:40px; background:radial-gradient(circle,rgba(33,185,234,.12),transparent 66%); z-index:-1; }
.hero-grid { position:absolute; inset:0; z-index:-2; opacity:.15; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,transparent 5%,#000 55%,#000); }
.eyebrow { font-size:12px; letter-spacing:.18em; font-weight:700; color:#a7b3b8; display:flex; align-items:center; gap:12px; margin:0 0 28px; }
.eyebrow span { width:30px; height:1px; background:var(--cyan); }
.eyebrow.dark { color:#66747b; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(54px,6.25vw,98px); line-height:.96; letter-spacing:-.052em; font-weight:500; margin-bottom:30px; max-width:900px; }
h1 em,h2 em { color:var(--cyan); font-style:normal; }
.hero-lead { max-width:620px; color:#aab5ba; font-size:18px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:36px; margin-top:42px; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:18px 22px; font-size:13px; font-weight:700; letter-spacing:.07em; transition:.25s; }
.button.primary { background:var(--cyan); color:#041219; }
.button.primary:hover { background:#fff; }
.text-link { font-size:13px; border-bottom:1px solid rgba(255,255,255,.35); padding:12px 0; letter-spacing:.07em; }
.hero-visual { position:relative; width:min(40vw,610px); aspect-ratio:1; justify-self:end; }
.orbit { position:absolute; border:1px solid rgba(33,185,234,.26); border-radius:50%; inset:10%; animation:rotate 22s linear infinite; }
.orbit:before,.orbit:after { content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
.orbit:before { left:8%; top:20%; }
.orbit:after { right:5%; bottom:25%; }
.orbit-two { inset:23%; border-style:dashed; animation-direction:reverse; animation-duration:17s; }
.core { position:absolute; inset:37%; border:1px solid rgba(255,255,255,.3); background:rgba(8,17,23,.8); display:grid; place-content:center; text-align:center; transform:rotate(45deg); }
.core span,.core small { transform:rotate(-45deg); }
.core span { font:700 31px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--cyan); }
.core small { font-size:7px; letter-spacing:.25em; color:#7c8c93; margin-top:5px; }
.node { position:absolute; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.13em; color:#a6b4ba; display:flex; gap:8px; align-items:center; }
.node i { width:7px; height:7px; background:var(--cyan); border-radius:50%; box-shadow:0 0 12px var(--cyan); }
.n1 { top:14%; left:5%; }
.n2 { top:24%; right:1%; }
.n3 { bottom:18%; left:4%; }
.telemetry-card { position:absolute; right:0; bottom:3%; width:190px; border:1px solid rgba(255,255,255,.12); background:rgba(13,27,35,.86); padding:15px; }
.telemetry-card div:first-child { display:flex; justify-content:space-between; font:11px ui-monospace,SFMono-Regular,Consolas,monospace; color:#71838b; }
.telemetry-card b { color:#d7e2e6; }
.bars { height:36px; display:flex; gap:4px; align-items:end; margin-top:8px; }
.bars i { flex:1; background:var(--cyan); opacity:.75; }
.bars i:nth-child(1) { height:25%; }.bars i:nth-child(2) { height:65%; }.bars i:nth-child(3) { height:44%; }.bars i:nth-child(4) { height:90%; }.bars i:nth-child(5) { height:58%; }.bars i:nth-child(6) { height:78%; }.bars i:nth-child(7) { height:48%; }
.hero-foot { position:absolute; bottom:30px; left:7vw; right:7vw; display:flex; justify-content:space-between; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.18em; color:#708089; }
@keyframes rotate { to { transform:rotate(360deg); } }
.section { padding:130px 7vw; }
.section-intro { display:grid; grid-template-columns:1fr 1.2fr; gap:4vw; align-items:end; margin-bottom:70px; }
.section-intro .eyebrow { grid-column:1/-1; }
.section-intro h2,.section-head h2,.company h2,.footer-top h2 { font-size:clamp(42px,5vw,72px); line-height:1.04; letter-spacing:-.045em; font-weight:500; margin:0; }
.section-intro>p:last-child { color:#5f6c73; line-height:1.75; max-width:550px; margin:0 0 6px; }
.service-list { border-top:1px solid var(--line); }
.service-row { min-height:160px; display:grid; grid-template-columns:70px .8fr 1fr 40px; align-items:center; gap:28px; border-bottom:1px solid var(--line); transition:.25s; }
.service-row:hover { padding-left:18px; background:rgba(255,255,255,.5); }
.service-num { font:13px ui-monospace,SFMono-Regular,Consolas,monospace; color:#89949a; }
.service-row h3 { font-size:26px; font-weight:500; margin:0; }
.service-row p { font-size:16px; line-height:1.7; color:#66747b; margin:0; max-width:560px; }
.service-arrow { color:var(--cyan); font-size:22px; }
.hartak { background:var(--ink-2); color:white; padding:130px 7vw; display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; align-items:center; overflow:hidden; }
.hartak-logo { font-size:18px; letter-spacing:.25em; font-weight:700; margin-bottom:45px; }
.hartak-logo span { display:inline-grid; place-items:center; width:32px; height:32px; background:var(--cyan); color:var(--ink); margin-right:8px; clip-path:polygon(25% 0,100% 0,75% 100%,0 100%); }
.hartak h2 { font-size:clamp(43px,4.8vw,69px); line-height:1.02; letter-spacing:-.045em; font-weight:500; }
.hartak-copy>p { color:#9caab0; font-size:17px; line-height:1.75; max-width:620px; }
.hartak ul { list-style:none; padding:0; margin:32px 0; }
.hartak li { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:15px; }
.hartak li:before { content:"✓"; color:var(--cyan); margin-right:12px; }
.button.light { border:1px solid rgba(255,255,255,.25); margin-top:12px; }
.button.light:hover { border-color:var(--cyan); color:var(--cyan); }
.dashboard { background:#101f28; border:1px solid rgba(255,255,255,.13); box-shadow:0 35px 90px rgba(0,0,0,.35); transform:perspective(1200px) rotateY(-4deg); }
.dash-top { height:52px; border-bottom:1px solid rgba(255,255,255,.09); display:flex; align-items:center; padding:0 20px; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; color:#708089; letter-spacing:.14em; }
.dash-top span { margin-right:auto; }
.dash-top i { width:7px; height:7px; border-radius:50%; background:#29404a; margin-left:7px; }
.dash-kpis { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.08); }
.dash-kpis>div { background:#101f28; padding:25px; }
.dash-kpis small { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; color:#72838b; letter-spacing:.13em; }
.dash-kpis b { display:block; font-size:42px; font-weight:400; margin:8px 0; }
.dash-kpis b span { font-size:17px; color:#708089; }
.dash-kpis em { font:9px ui-monospace,SFMono-Regular,Consolas,monospace; color:#52d6a4; font-style:normal; }
.chart { height:255px; padding:25px; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px); background-size:100% 42px; }
.chart-label { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; color:#708089; letter-spacing:.13em; }
.chart svg { width:100%; height:190px; overflow:visible; }
.line { fill:none; stroke:var(--cyan); stroke-width:2; }
.area { fill:url(#fill); }
.dash-status { padding:17px 20px; display:flex; justify-content:space-between; font:9px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; color:#6e7e86; border-top:1px solid rgba(255,255,255,.08); }
.dash-status .ok { display:inline-block; width:6px; height:6px; border-radius:50%; background:#52d6a4; margin-right:7px; }
.section-head { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:end; margin-bottom:65px; }
.section-head>p { max-width:560px; color:#66747b; font-size:17px; line-height:1.75; margin:0; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.project-card { background:white; min-height:480px; display:grid; grid-template-rows:1.25fr .75fr; overflow:hidden; }
.project-art { position:relative; background:#dce2e2; overflow:hidden; isolation:isolate; }
.project-art:after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(5,15,21,.04),rgba(5,15,21,.5)); }
.project-art img { width:100%; height:100%; display:block; object-fit:cover; filter:saturate(.72) contrast(1.04); transition:transform .45s ease,filter .45s ease; }
.project-card:hover .project-art img { transform:scale(1.025); filter:saturate(.92) contrast(1.03); }
.project-index { position:absolute; right:18px; top:18px; z-index:2; font:11px ui-monospace,SFMono-Regular,Consolas,monospace; color:white; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.image-note { position:absolute; left:18px; bottom:16px; z-index:2; font:9px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.13em; color:rgba(255,255,255,.72); }
.project-copy { padding:34px 36px 38px; }
.project-copy small { font:10px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--cyan); letter-spacing:.17em; }
.project-copy h3 { font-size:27px; font-weight:500; margin:15px 0 13px; }
.project-copy p { color:#66747b; font-size:15px; line-height:1.7; max-width:540px; }
.company { background:#dce1e0; padding:130px 7vw; display:grid; grid-template-columns:1fr 1fr; gap:8vw; }
.company-copy>p { color:#536168; line-height:1.8; font-size:17px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; border-top:1px solid rgba(8,17,23,.15); margin-top:45px; padding-top:32px; }
.stats div { display:flex; align-items:center; gap:12px; }
.stats b { font-size:30px; font-weight:500; }
.stats span { font-size:10px; line-height:1.5; letter-spacing:.12em; color:#65737a; }
footer { background:#071016; color:#fff; padding:120px 7vw 35px; }
.footer-top { position:relative; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:70px; }
.footer-top h2 { font-size:clamp(48px,6.3vw,92px); }
.round-button { position:absolute; right:2%; bottom:65px; width:88px; height:88px; border-radius:50%; background:var(--cyan); color:var(--ink); display:grid; place-items:center; font-size:30px; transition:.25s; }
.round-button:hover { transform:rotate(45deg); background:white; }
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding:55px 0; }
.contact-grid small { display:block; color:#71858e; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.15em; margin-bottom:12px; }
.contact-grid a,.contact-grid p { font-size:17px; margin:0; }
.contact-grid a:hover { color:var(--cyan); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); padding-top:28px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; }
.footer-bottom>p { font-size:10px; letter-spacing:.12em; color:#71858e; text-align:center; margin:0; }
.footer-bottom>p:last-child { text-align:right; }
.footer-brand .brand-logo { height:58px; }
@media(max-width:900px) {
  .site-header { height:70px; }
  .menu-toggle { display:block; }
  .site-header nav { position:absolute; top:70px; left:0; right:0; background:#081117; display:none; flex-direction:column; align-items:stretch; padding:25px 7vw 35px; gap:0; border-top:1px solid rgba(255,255,255,.1); }
  .site-header nav.open { display:flex; }
  .site-header nav a { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .nav-contact { border:0; }
  .hero { height:auto; min-height:100vh; grid-template-columns:1fr; padding-top:130px; }
  .hero-copy { position:relative; z-index:2; }
  .hero-visual { position:absolute; width:620px; right:-300px; opacity:.42; }
  .hero-lead { max-width:560px; }
  .section-intro,.section-head,.company,.hartak { grid-template-columns:1fr; }
  .section-intro { gap:25px; }
  .hartak { gap:70px; }
  .service-row { grid-template-columns:50px 1fr 35px; padding:28px 0; }
  .service-row p { grid-column:2; }
  .service-arrow { grid-column:3; grid-row:1; }
  .project-card { min-height:390px; }
  .company { gap:45px; }
  .footer-top h2 { padding-right:100px; }
}
@media(max-width:620px) {
  .site-header { padding:0 5vw; }
  .brand-logo { height:40px; }
  .hero { padding:125px 6vw 72px; min-height:780px; align-items:start; }
  .hero h1 { font-size:52px; margin-top:55px; }
  .hero-lead { font-size:17px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:10px; margin-top:30px; }
  .hero-visual { width:460px; right:-280px; top:160px; }
  .telemetry-card { display:none; }
  .scroll-label { display:none; }
  .section,.hartak,.company { padding:90px 6vw; }
  .section-intro h2,.section-head h2,.company h2,.hartak h2 { font-size:42px; }
  .service-row { grid-template-columns:38px 1fr 25px; gap:12px; }
  .service-row h3 { font-size:22px; }
  .service-row p { font-size:15px; }
  .dashboard { transform:none; }
  .dash-kpis b { font-size:30px; }
  .chart { height:210px; }
  .chart svg { height:150px; }
  .project-grid { grid-template-columns:1fr; }
  .project-card { min-height:450px; }
  .section-head { gap:28px; }
  .stats { grid-template-columns:1fr; gap:22px; }
  .stats div { border-bottom:1px solid rgba(8,17,23,.1); padding-bottom:15px; }
  .footer-top h2 { padding:0 0 115px; }
  .round-button { left:0; right:auto; bottom:45px; width:70px; height:70px; }
  .contact-grid { grid-template-columns:1fr; gap:34px; }
  .footer-bottom { grid-template-columns:1fr; gap:30px; }
  .footer-bottom>p,.footer-bottom>p:last-child { text-align:left; }
  .footer-brand { margin-bottom:5px; }
  .footer-brand .brand-logo { height:56px; }
  .dash-status { gap:15px; }
  .dash-status span:last-child { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .orbit { animation:none; }
  .service-row,.round-button { transition:none; }
}