:root {
  --navy: #06152b;
  --navy2: #0b2344;
  --blue: #0ba8ef;
  --blue2: #1b78d0;
  --white: #fff;
  --ink: #10213d;
  --muted: #61708a;
  --light: #f4f8fc;
  --line: #dbe5ef;
  --shadow: 0 18px 55px rgba(5, 25, 55, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #fff; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 15px 5vw; background: rgba(4, 16, 33, .94); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }
.brand { display: inline-flex; flex-direction: column; line-height: .85; color: #fff; }
.brand-mark { font-size: 1.55rem; font-weight: 900; letter-spacing: .08em; }
.brand-mark span { color: var(--blue); }
.brand-sub { font-size: .53rem; letter-spacing: .34em; margin: 8px 0 0 1px; color: #cbd8e9; }
.nav { display: flex; gap: 28px; align-items: center; color: #dce9f8; font-size: .94rem; }
.nav a:hover { color: var(--blue); }
.nav-cta { padding: 10px 17px; border-radius: 999px; background: var(--blue); color: #03152a !important; font-weight: 800; }
.menu-toggle { display:none; border:0; background:none; color:#fff; font-size:1.7rem; }

.hero { background: radial-gradient(circle at 82% 15%, rgba(11,168,239,.22), transparent 34%), linear-gradient(135deg, #041329, #071f3e 58%, #020d1d); color:#fff; overflow:hidden; }
.hero-grid { min-height: 680px; display:grid; grid-template-columns: 1.02fr .98fr; max-width: 1500px; margin:auto; align-items:center; gap: 3vw; padding: 72px 5vw; }
.hero-copy { max-width: 700px; position:relative; z-index:2; }
.eyebrow { color: var(--blue); font-size: .83rem; letter-spacing: .18em; font-weight: 900; margin:0 0 14px; }
.hero h1 { font-size: clamp(3.1rem, 6vw, 6rem); line-height: .96; letter-spacing: -.045em; margin: 0 0 25px; text-transform: uppercase; }
.hero h1 span, h2 span { color: var(--blue); }
.hero-text { max-width: 630px; font-size: 1.15rem; color:#c8d8eb; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0; }
.button { padding:14px 22px; border-radius: 9px; font-weight:800; }
.primary { background:var(--blue); color:#02172d; box-shadow: 0 10px 28px rgba(11,168,239,.24); }
.secondary { border:1px solid rgba(255,255,255,.35); color:#fff; }
.hero-pills { display:flex; flex-wrap:wrap; gap:20px; color:#dbe8f7; font-weight:700; text-transform:uppercase; font-size:.78rem; letter-spacing:.1em; }
.hero-pills span:first-letter { color:var(--blue); }
.hero-visual { display:flex; justify-content:center; }
.hero-visual img { width:min(100%, 600px); border-radius:22px; box-shadow: 0 35px 100px rgba(0,0,0,.5); transform: rotate(1deg); border:1px solid rgba(255,255,255,.12); }
.trust-strip { display:flex; justify-content:center; gap:9px; flex-wrap:wrap; padding:18px 5vw; background:#071a34; color:#fff; font-size:.9rem; letter-spacing:.05em; }
.trust-strip b { color:var(--blue); }
.section { padding: 100px 5vw; max-width: 1400px; margin:auto; }
.section-heading { max-width:760px; margin:0 auto 50px; text-align:center; }
.section-heading h2, .split-copy h2, .cta h2 { font-size:clamp(2.3rem,4vw,4rem); line-height:1.02; letter-spacing:-.04em; margin:0 0 18px; }
.section-heading p:last-child, .split-copy > p:not(.eyebrow) { color:var(--muted); font-size:1.06rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card { padding:34px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.icon { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#e7f6fe; color:var(--blue2); font-size:1.7rem; font-weight:900; margin-bottom:22px; }
.card h3 { font-size:1.4rem; margin:0 0 10px; }
.card p { color:var(--muted); }
.card ul { padding:0; margin:22px 0 0; list-style:none; }
.card li { padding:7px 0; border-top:1px solid #edf1f5; font-weight:650; }
.card li::before, .check-grid span::first-letter { color:var(--blue2); }
.split-section { display:grid; grid-template-columns: 1fr 1fr; background:var(--light); }
.split-section.reverse .split-image { order:2; }
.split-section.reverse .split-copy { order:1; }
.split-image { min-height:570px; background-size:cover; background-position:center; }
.residential-bg { background-image:linear-gradient(90deg, rgba(3,19,39,.05), rgba(3,19,39,.2)), url("assets/it-net-consulting-ad.png"); }
.commercial-bg { background-image:linear-gradient(90deg, rgba(3,19,39,.2), rgba(3,19,39,.05)), url("assets/it-net-consulting-ad.png"); background-position: 100% 100%; }
.split-copy { padding:80px clamp(30px,6vw,100px); display:flex; flex-direction:column; justify-content:center; }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:25px 0; }
.check-grid span { font-weight:700; font-size:.93rem; }
.check-grid span::before { content:"✓"; color:var(--blue2); margin-right:8px; }
.text-link { color:var(--blue2); font-weight:900; }
.why { padding-bottom:90px; }
.why-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-grid > div { padding:34px 24px; border-right:1px solid var(--line); }
.why-grid > div:last-child { border-right:0; }
.why-grid strong { color:var(--blue2); font-size:1.7rem; }
.why-grid h3 { margin:10px 0 8px; font-size:1.15rem; }
.why-grid p { margin:0; color:var(--muted); font-size:.91rem; }
.cta { padding:80px 5vw; background:linear-gradient(125deg,#041329,#0b2a52); color:#fff; display:grid; grid-template-columns:1.3fr .7fr; gap:50px; align-items:center; }
.cta p:not(.eyebrow) { color:#b9cbe1; }
.contact-panel { display:flex; flex-direction:column; gap:13px; }
.contact-panel a { padding:19px 22px; border:1px solid rgba(255,255,255,.17); border-radius:12px; background:rgba(255,255,255,.05); }
.contact-panel a:hover { border-color:var(--blue); }
.contact-panel small { display:block; color:var(--blue); font-weight:900; letter-spacing:.12em; margin-bottom:3px; }
.contact-panel strong { font-size:1.15rem; }
footer { background:#020b18; color:#93a7bf; text-align:center; padding:35px 5vw; font-size:.8rem; }
.footer-brand { display:inline-flex; flex-direction:column; color:#fff; margin-bottom:12px; }
footer p { margin:8px 0; }

@media (max-width: 900px) {
  .menu-toggle { display:block; }
  .nav { display:none; position:absolute; top:70px; left:0; right:0; padding:20px 5vw 25px; background:#06152b; flex-direction:column; align-items:stretch; }
  .nav.open { display:flex; }
  .hero-grid, .split-section, .cta { grid-template-columns:1fr; }
  .hero-grid { padding-top:50px; }
  .hero-visual { margin-top:20px; }
  .cards { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .why-grid > div:nth-child(2n) { border-right:0; }
  .why-grid > div { border-bottom:1px solid var(--line); }
  .split-section.reverse .split-image { order:0; }
  .split-section.reverse .split-copy { order:0; }
}
@media (max-width: 600px) {
  .hero h1 { font-size:3rem; }
  .hero-grid { padding-left:6vw; padding-right:6vw; }
  .hero-visual img { transform:none; }
  .section { padding:70px 6vw; }
  .split-image { min-height:330px; }
  .split-copy { padding:60px 7vw; }
  .check-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .why-grid > div { border-right:0; }
  .cta { padding:65px 7vw; }
}


/* UniFi emphasis */
.unifi-section { position: relative; }
.unifi-cards .card { min-height: 100%; }
.unifi-highlight { margin-top: 2rem; padding: 1.4rem 1.6rem; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: rgba(255,255,255,.035); }
.unifi-highlight strong { font-size: 1.08rem; }
.unifi-highlight span { flex: 1 1 320px; opacity: .85; }
.unifi-mini { padding-top: 3rem; padding-bottom: 3rem; }
@media (max-width: 760px) { .unifi-highlight { align-items: flex-start; } }