:root {
  --bg: #070a0e;
  --surface: #0d1218;
  --surface-2: #111820;
  --text: #f3f6f8;
  --muted: #98a3ad;
  --line: rgba(255,255,255,.10);
  --accent: #58d7ff;
  --accent-2: #9bf0ff;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.section { padding: 125px 0; }
.section-label {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
}
h1, h2, h3 { line-height: 1.02; letter-spacing: -.045em; }
h2 { font-size: clamp(2.7rem, 5vw, 5rem); }
h2 span, h1 em { color: var(--accent); font-style: normal; }

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(7,10,14,.78);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.05em; }
.brand > span > span { color: var(--accent); }
.brand-mark { width: 31px; height: 31px; fill: var(--text); }
.brand-cut { fill: var(--bg); }
.brand-accent { fill: var(--accent); }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: .88rem; font-weight: 650; }
.desktop-nav > a, .drop-btn { color: #c5cdd3; transition: color .2s; }
.desktop-nav > a:hover, .drop-btn:hover { color: #fff; }
.drop-btn { border: 0; background: none; cursor: pointer; padding: 28px 0; }
.chevron { color: var(--accent); margin-left: 4px; }
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 70px; left: -18px; min-width: 180px; padding: 9px;
  background: #0c1117; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-7px); pointer-events: none; transition: .2s ease;
}
.dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-menu a { display: block; padding: 11px 12px; border-radius: 7px; color: #bbc4cb; }
.dropdown-menu a:hover { background: rgba(88,215,255,.08); color: var(--accent); }
.nav-cta { border: 1px solid rgba(88,215,255,.45); border-radius: 999px; padding: 10px 17px; color: var(--accent) !important; }
.nav-cta:hover { background: rgba(88,215,255,.09); }
.mobile-toggle, .mobile-nav { display: none; }

/* Hero */
.hero { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-grid {
  position: absolute; inset: 0; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to right, black, transparent 90%);
}
.hero::after {
  content: ""; position: absolute; width: 650px; height: 650px; right: -170px; top: 90px;
  background: radial-gradient(circle, rgba(88,215,255,.12), transparent 68%);
}
.hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 70px; }
.eyebrow { color: #9aa7b1; font-size: .7rem; letter-spacing: .2em; font-weight: 800; margin-bottom: 27px; }
.eyebrow span { display: inline-block; width: 24px; height: 1px; background: var(--accent); vertical-align: middle; margin-right: 10px; }
.hero h1 { font-size: clamp(4.2rem, 8vw, 7.5rem); max-width: 800px; }
.hero-text { color: var(--muted); max-width: 570px; font-size: 1.05rem; margin: 30px 0 34px; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.button { display: inline-flex; align-items: center; gap: 20px; padding: 15px 21px; border-radius: 5px; font-weight: 750; font-size: .86rem; }
.button-primary { background: var(--accent); color: #031017; box-shadow: 0 0 35px rgba(88,215,255,.12); }
.button-primary:hover { background: #8ce7ff; transform: translateY(-2px); }
.button { transition: .2s ease; }
.text-link { color: #d1d9de; font-size: .86rem; font-weight: 700; }
.text-link span { color: var(--accent); margin-left: 6px; }
.hero-visual { min-height: 570px; position: relative; }
.hero-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 230px; height: 230px; display: grid; place-items: center;
  border: 1px solid rgba(88,215,255,.34); border-radius: 50%;
  color: var(--accent); font-size: 5.3rem; font-weight: 900; letter-spacing: -.1em;
  box-shadow: inset 0 0 50px rgba(88,215,255,.05), 0 0 70px rgba(88,215,255,.06);
}
.hero-logo::before, .hero-logo::after { content:""; position:absolute; border:1px solid rgba(88,215,255,.12); border-radius:50%; }
.hero-logo::before { inset:-34px; }
.hero-logo::after { inset:34px; }
.orb { position: absolute; border-radius: 50%; border: 1px solid rgba(88,215,255,.14); }
.orb-one { width: 420px; height: 420px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(25deg); }
.orb-two { width: 560px; height: 180px; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-32deg); }
.tech-card {
  position: absolute; padding: 13px 16px; border: 1px solid var(--line); background: rgba(13,18,24,.78);
  backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 2px; min-width: 115px;
}
.tech-card span { color: var(--accent); font-size: .62rem; letter-spacing: .15em; }
.tech-card strong { font-size: .7rem; letter-spacing: .12em; }
.card-one { top: 16%; right: 6%; }
.card-two { bottom: 19%; left: 3%; }
.card-three { bottom: 6%; right: 19%; }
.wire { position:absolute; height:1px; background: linear-gradient(90deg, transparent, rgba(88,215,255,.5), transparent); width: 240px; }
.wire-a { transform: rotate(28deg); top: 25%; left: 8%; }
.wire-b { transform: rotate(-22deg); top: 67%; right: 0; }
.wire-c { transform: rotate(78deg); top: 25%; right: 15%; width: 160px; }
.scroll-cue { position:absolute; bottom: 28px; left: max(24px, calc((100vw - var(--max))/2)); color:#68737c; font-size:.61rem; letter-spacing:.2em; }
.scroll-cue span { display:inline-block; width: 35px; height:1px; background:var(--accent); vertical-align:middle; margin-right:10px; }

/* Intro */
.intro { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns: .35fr 1fr; gap: 70px; }
.intro h2 { max-width: 800px; }
.lead { color:#9da8b0; max-width:700px; margin-top:25px; font-size:1.2rem; }

/* About */
.about { background: linear-gradient(180deg, #080c11, #0b1016); }
.about-grid { display:grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items:center; }
.about-panel {
  aspect-ratio: 1; max-width: 440px; position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding: 35px; overflow:hidden; border:1px solid var(--line);
  background: radial-gradient(circle at 70% 30%, rgba(88,215,255,.15), transparent 28%), #080c11;
}
.panel-number { font-size:10rem; line-height:.8; font-weight:900; letter-spacing:-.12em; color:rgba(255,255,255,.04); position:absolute; right:-8px; top:35px; }
.panel-line { width:75px; height:2px; background:var(--accent); margin-bottom:22px; }
.about-panel p { font-size:.72rem; font-weight:800; letter-spacing:.18em; color:#9da9b2; }
.about-copy > p:not(.section-label) { color:#9da8b0; max-width:650px; margin-top:25px; }
.stats { display:flex; gap:45px; margin-top:45px; border-top:1px solid var(--line); padding-top:25px; }
.stats div { display:flex; gap:12px; align-items:flex-start; }
.stats strong { color:var(--accent); font-size:.75rem; }
.stats span { color:#8e99a2; font-size:.7rem; line-height:1.35; text-transform:uppercase; letter-spacing:.08em; }

/* Services */
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:60px; }
.section-heading > p { color:#8f9aa3; max-width:330px; font-size:.9rem; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { position:relative; min-height:350px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:.25s; }
.service-card:hover { background:rgba(88,215,255,.035); transform:translateY(-5px); }
.service-no { color:#53616b; font-size:.67rem; letter-spacing:.15em; }
.service-icon { color:var(--accent); font-size:2rem; margin:65px 0 27px; font-family:monospace; }
.service-card h3 { font-size:1.45rem; max-width:220px; }
.service-card p { color:#7f8b94; font-size:.82rem; margin-top:18px; }
.service-card > a { position:absolute; right:25px; bottom:25px; color:var(--accent); }

/* Contact */
.contact { background: #0a0f14; border-top:1px solid var(--line); }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:100px; }
.contact-lead { color:#8f9ba4; max-width:520px; margin-top:25px; }
.contact-details { border-top:1px solid var(--line); }
.contact-item { min-height:78px; display:grid; grid-template-columns: .7fr 1.6fr auto; align-items:center; gap:15px; border-bottom:1px solid var(--line); }
.contact-item span { color:#66737d; text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; }
.contact-item strong { font-size:.92rem; font-weight:600; }
.contact-item b { color:var(--accent); font-weight:400; }
.contact-button { margin-top:27px; }

/* Footer */
footer { border-top:1px solid var(--line); padding:30px 0; }
.footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.footer-wrap p, .back-top { color:#65717a; font-size:.68rem; }
.back-top:hover { color:var(--accent); }

/* Responsive */
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .mobile-toggle { display:flex; flex-direction:column; gap:5px; border:0; background:none; cursor:pointer; }
  .mobile-toggle span { width:24px; height:2px; background:#fff; transition:.2s; }
  .mobile-nav { display:flex; flex-direction:column; position:absolute; top:82px; left:0; right:0; padding:12px 24px 22px; background:#0a0f14; border-bottom:1px solid var(--line); transform:translateY(-15px); opacity:0; pointer-events:none; transition:.2s; }
  .mobile-nav.open { transform:none; opacity:1; pointer-events:auto; }
  .mobile-nav > a, .mobile-company { padding:13px 0; border-bottom:1px solid var(--line); color:#cbd2d7; text-align:left; background:none; border-left:0; border-right:0; border-top:0; }
  .mobile-company { width:100%; display:flex; justify-content:space-between; cursor:pointer; }
  .mobile-submenu { display:none; padding-left:15px; }
  .mobile-submenu.open { display:block; }
  .mobile-submenu a { display:block; padding:10px 0; color:#89959e; font-size:.9rem; }
  .hero-content, .about-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-content { padding-top:100px; }
  .hero-visual { min-height:390px; margin-top:-20px; }
  .hero-logo { width:180px; height:180px; font-size:4rem; }
  .about-panel { max-width:none; width:100%; }
  .service-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { gap:60px; }
}
@media (max-width: 600px) {
  .container { width:min(calc(100% - 34px), var(--max)); }
  .section { padding:85px 0; }
  .hero h1 { font-size:clamp(3.7rem, 18vw, 5.2rem); }
  .hero-text { font-size:.95rem; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .hero-visual { min-height:300px; }
  .orb-one { width:270px; height:270px; }
  .orb-two { width:340px; height:120px; }
  .hero-logo { width:135px; height:135px; font-size:3rem; }
  .tech-card { transform:scale(.8); }
  .card-one { right:-4%; }
  .card-two { left:-5%; }
  .card-three { right:4%; }
  .intro-grid { grid-template-columns:1fr; gap:25px; }
  .section-heading { display:block; }
  .section-heading > p { margin-top:25px; }
  .service-grid { grid-template-columns:1fr; }
  .service-card { min-height:300px; }
  .stats { gap:18px; flex-wrap:wrap; }
  .contact-item { grid-template-columns:.8fr 1.7fr auto; }
  .contact-item strong { font-size:.78rem; overflow-wrap:anywhere; }
  .footer-wrap { flex-direction:column; align-items:flex-start; }
}