/*
Theme Name: 228NetOps Future
Theme URI: https://228netops.com/
Author: 228NetOps
Description: Lightweight custom theme for 228NetOps.
Version: 1.2.0
Text Domain: netops-future
*/

:root {
  --bg: #050810;
  --panel: rgba(13, 23, 40, .72);
  --line: rgba(69, 198, 255, .2);
  --blue: #26a7ff;
  --cyan: #49e6ff;
  --green: #50efb3;
  --gold: #ffc76a;
  --text: #f4f8ff;
  --muted: #a9b8cf;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 10%, rgba(26, 136, 255, .15), transparent 32rem),
    radial-gradient(circle at 85% 30%, rgba(62, 236, 211, .08), transparent 28rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(20px);
  background: rgba(5, 8, 16, .78);
  border-bottom: 1px solid var(--line);
}
/* Prevent a legacy duplicate header from appearing on the Statement of Work page. */
body > header.site-header ~ header.site-header { display: none; }
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wordmark { text-decoration: none; font-weight: 900; font-size: 1.35rem; letter-spacing: -.04em; }
.wordmark span { color: var(--cyan); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: .9rem; }
.nav-links a:hover { color: var(--text); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(72, 213, 255, .55);
  border-radius: 12px;
  background: linear-gradient(135deg, #0877e7, #22b7ee);
  box-shadow: 0 12px 35px rgba(16, 157, 255, .22);
  color: white;
  text-decoration: none;
  font-weight: 850;
}
.button.ghost { background: rgba(11, 25, 43, .65); box-shadow: none; }
.button.small { min-height: 42px; padding-inline: 17px; font-size: .9rem; }
.hero { min-height: 760px; display: grid; align-items: center; padding: 90px 0 70px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.eyebrow { color: var(--cyan); font-size: .78rem; letter-spacing: .22em; font-weight: 900; text-transform: uppercase; }
.veteran-badge { display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; padding:8px 13px; border:1px solid rgba(255,199,106,.5); border-radius:999px; color:#ffe1a7; background:rgba(126,78,16,.18); font-size:.78rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.veteran-badge span { color:var(--gold); }
h1 { max-width: 760px; margin: 14px 0 22px; font-size: clamp(3.3rem, 7vw, 6.6rem); line-height: .92; letter-spacing: -.07em; }
h1 .gradient { color: transparent; background: linear-gradient(90deg, #fff, #51d7ff 42%, #5ff0bd); background-clip: text; }
.hero-copy { max-width: 660px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.28rem); }
.actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.hero-art { position: relative; }
.hero-art::before { content:""; position:absolute; inset:12%; border-radius:50%; background:#168fff; filter:blur(80px); opacity:.25; }
.hero-art img { position: relative; border-radius: 28px; border: 1px solid rgba(84, 203, 255, .35); box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.trust-strip { border-block: 1px solid var(--line); background: rgba(10,18,32,.65); }
.trust { min-height: 86px; display: grid; grid-template-columns: repeat(4,1fr); align-items:center; }
.trust div { text-align:center; padding: 10px; color:#d4e2f4; font-weight:850; letter-spacing:.09em; text-transform:uppercase; font-size:.82rem; }
.trust div + div { border-left:1px solid var(--line); }
section { position: relative; padding: 110px 0; }
.section-head { max-width: 760px; margin-bottom: 45px; }
h2 { margin: 8px 0 15px; font-size: clamp(2.35rem, 4vw, 4rem); line-height: 1.04; letter-spacing: -.055em; }
.section-head p, .lead { color: var(--muted); font-size: 1.08rem; }
.cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.card { min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(18,34,58,.82), rgba(8,14,25,.8)); transition: .25s ease; }
.card:hover { transform: translateY(-7px); border-color: rgba(75,220,255,.65); }
.card-link { display:flex; flex-direction:column; text-decoration:none; }
.card-cta { margin-top:auto; padding-top:24px; color:var(--cyan); font-size:.82rem; font-weight:850; }
.card .num { color: var(--cyan); font: 800 .76rem/1 ui-monospace, monospace; }
.card h3 { margin: 52px 0 12px; font-size: 1.45rem; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }
.trust-proof { padding-block: 80px; background: rgba(8, 18, 31, .54); border-block: 1px solid var(--line); }
.trust-proof .section-head { margin-bottom: 28px; }
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.proof-grid article { min-height:142px; padding:24px; border:1px solid var(--line); border-radius:18px; background:rgba(11,24,42,.72); display:flex; flex-direction:column; justify-content:space-between; }
.proof-grid strong { color:var(--cyan); font-size:1.08rem; }
.proof-grid span { color:var(--muted); font-size:.9rem; }
.pricing-preview { overflow:hidden; background:radial-gradient(circle at 82% 35%,rgba(80,239,179,.13),transparent 24rem),linear-gradient(135deg,rgba(10,91,169,.26),rgba(8,14,25,.42)); }
.pricing-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.price-list { overflow:hidden; border:1px solid rgba(73,230,255,.42); border-radius:22px; background:linear-gradient(155deg,rgba(12,31,53,.94),rgba(5,14,26,.94)); box-shadow:0 28px 75px rgba(0,0,0,.3); }
.price-list div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 22px; border-bottom:1px solid var(--line); color:#dce8f8; }
.price-list .price-list-head { padding:16px 22px; color:var(--cyan); background:rgba(73,230,255,.08); font-size:.78rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.price-list .price-list-head strong { color:#dffcff; font-size:.74rem; }
.price-list div:not(.price-list-head):hover { background:rgba(73,230,255,.06); }
.price-list div:last-child { border-bottom:0; }
.price-list strong { color:var(--green); white-space:nowrap; font-size:.94rem; }
.ownership { padding-top:88px; }
.ownership-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ownership-grid article { padding:30px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(18,34,58,.82),rgba(8,14,25,.8)); }
.ownership-grid span { color:var(--green); font:800 .78rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.ownership-grid h3 { margin:28px 0 10px; font-size:1.45rem; }
.ownership-grid p { margin:0; color:var(--muted); }
.commercial { padding-top: 40px; }
.video-shell { overflow:hidden; border:1px solid rgba(73,224,255,.32); border-radius:28px; background:#000; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.video-shell video { width:100%; aspect-ratio:16/9; object-fit:cover; }
.split { display:grid; grid-template-columns:.9fr 1.1fr; gap:65px; align-items:center; }
.founder-banner { border-radius:24px; border:1px solid var(--line); box-shadow:0 20px 70px rgba(0,0,0,.5); }
.checklist { display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none; }
.checklist li { display:flex; gap:13px; align-items:flex-start; color:#d9e5f5; }
.checklist li::before { content:"✓"; flex:0 0 26px; display:grid; place-items:center; height:26px; border-radius:50%; color:#04101a; background:var(--green); font-weight:900; }
.search-services { padding-top: 35px; }
.service-area { padding-top:75px; }
.service-area-panel { display:grid; grid-template-columns:.95fr 1.05fr; overflow:hidden; border:1px solid rgba(73,230,255,.32); border-radius:28px; background:linear-gradient(135deg,rgba(11,27,47,.94),rgba(6,14,25,.95)); box-shadow:0 30px 90px rgba(0,0,0,.34); }
.area-copy { padding:clamp(32px,5vw,66px); }
.area-copy h2 { font-size:clamp(2.15rem,3.8vw,3.7rem); }
.area-map { min-height:390px; position:relative; display:grid; place-items:center; padding:34px; overflow:hidden; background:radial-gradient(circle at 50% 50%,rgba(73,230,255,.2),transparent 9rem),radial-gradient(circle at 85% 18%,rgba(80,239,179,.16),transparent 12rem),linear-gradient(145deg,rgba(10,49,82,.8),rgba(5,14,26,.95)); }
.area-map::before { content:""; position:absolute; inset:-25%; background:repeating-radial-gradient(ellipse at center,transparent 0 38px,rgba(73,230,255,.12) 39px 40px); transform:rotate(-12deg); opacity:.65; }
.area-map-label { position:relative; z-index:1; margin-bottom:20px; color:#e3faff; font-size:.8rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.city-cloud { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:440px; }
.city-cloud span { padding:9px 13px; border:1px solid rgba(117,231,255,.34); border-radius:999px; color:#e2f8ff; background:rgba(5,16,28,.56); font-size:.88rem; font-weight:750; box-shadow:0 8px 22px rgba(0,0,0,.18); }
.service-tags { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none; }
.service-tags li { padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:#dce8f8; background:rgba(15,32,54,.7); font-size:.88rem; font-weight:750; }
.consultation { padding-top: 55px; }
.consultation-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:start; }
.consultation-direct { display:flex; flex-direction:column; margin-top:30px; color:var(--muted); }
.consultation-direct a { color:var(--cyan); font-size:1.6rem; font-weight:900; text-decoration:none; }
.form-panel { padding:32px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(18,34,58,.88),rgba(8,14,25,.9)); box-shadow:0 24px 80px rgba(0,0,0,.35); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.consultation-form label { display:flex; flex-direction:column; gap:7px; color:#dce8f8; font-size:.9rem; font-weight:750; }
.consultation-form label span { color:var(--cyan); }
.consultation-form input, .consultation-form select, .consultation-form textarea { width:100%; min-height:48px; padding:11px 13px; border:1px solid rgba(126,164,200,.3); border-radius:10px; outline:none; color:#f5f9ff; background:#07111f; font:inherit; }
.consultation-form textarea { resize:vertical; }
.consultation-form input:focus, .consultation-form select:focus, .consultation-form textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(73,230,255,.1); }
.consultation-form .full { grid-column:1/-1; }
.consultation-form .consent { flex-direction:row; align-items:flex-start; margin:20px 0; color:var(--muted); font-weight:500; }
.consultation-form .consent input { width:18px; min-height:18px; margin-top:3px; }
.submit { border:0; cursor:pointer; }
.form-footnote { margin:13px 0 0; color:var(--muted); font-size:.78rem; }
.form-notice { margin-bottom:20px; padding:13px 15px; border-radius:10px; font-weight:700; }
.form-notice.success { color:#baffdf; background:rgba(40,190,126,.16); border:1px solid rgba(80,239,179,.35); }
.form-notice.error { color:#ffd3d3; background:rgba(220,70,70,.14); border:1px solid rgba(255,110,110,.3); }
.urgent-cta { padding: 30px 0 80px; }
.urgent-box { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:36px 42px; border:1px solid rgba(255,199,106,.42); border-radius:24px; background:linear-gradient(125deg,rgba(114,66,13,.28),rgba(18,31,53,.78)); }
.urgent-box h2 { margin-bottom:8px; font-size:clamp(1.8rem,3vw,2.8rem); }
.urgent-box p { margin:0; color:var(--muted); }
.hp-field { position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.cta { padding: 0 0 110px; }
.sow-hero { padding: 112px 0 76px; }
.sow-hero h1 { font-size: clamp(3.2rem, 6vw, 5.8rem); }
.sow-intro { padding: 42px 0; border-block: 1px solid var(--line); background: rgba(9, 18, 31, .55); }
.sow-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.sow-summary h2 { margin-bottom: 0; }
.sow-panel { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(18,34,58,.82), rgba(8,14,25,.8)); }
.sow-panel p { margin: 0; color: var(--muted); }
.sow-services { padding-top: 88px; }
.sow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sow-card { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(18,34,58,.82), rgba(8,14,25,.8)); }
.sow-card h3 { margin: 9px 0 12px; font-size: 1.4rem; }
.sow-card h4 { margin: 24px 0 5px; color: var(--cyan); font-size: .77rem; letter-spacing: .12em; text-transform: uppercase; }
.sow-card p { margin: 0; color: var(--muted); }
.sow-card .service-price { color: var(--green); font: 800 .78rem/1 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.sow-terms { padding-top: 50px; }
.terms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sow-records { padding-top: 55px; }
.records-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.record-card { padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: rgba(11, 24, 42, .7); }
.record-card span { color: var(--green); font: 800 .77rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.record-card h3 { margin: 28px 0 10px; font-size: 1.1rem; line-height: 1.2; }
.record-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.sow-panel h3 { margin: 0 0 14px; font-size: 1.2rem; }
.sow-panel ul { margin: 0; padding-left: 20px; color: var(--muted); }
.sow-panel li + li { margin-top: 10px; }
.cta-box { padding: clamp(35px,6vw,72px); border-radius:28px; border:1px solid rgba(78,217,255,.4); background:linear-gradient(125deg,rgba(14,92,170,.42),rgba(18,31,53,.78)); text-align:center; }
.cta-box h2 { max-width:780px; margin-inline:auto; }
.cta-box p { color:var(--muted); font-size:1.08rem; }
.site-footer { border-top:1px solid var(--line); padding:34px 0; color:var(--muted); }
.footer-row { display:flex; justify-content:space-between; gap:25px; align-items:center; }
.footer-links { display:flex; flex-wrap:wrap; gap:20px; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:white; }
@media (max-width: 900px) {
  .nav-links a:not(.button) { display:none; }
  .hero { min-height:auto; padding-top:70px; }
  .hero-grid, .split, .consultation-grid, .sow-summary, .pricing-layout, .service-area-panel { grid-template-columns:1fr; }
  .hero-art { max-width:560px; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .records-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 580px) {
  .wrap { width:min(calc(100% - 28px),var(--max)); }
  .nav { min-height:66px; }
  .nav-links { gap:0; }
  .hero { padding-top:55px; }
  .hero-grid { gap:42px; }
  h1 { font-size:3.3rem; }
  section { padding:78px 0; }
  .trust { grid-template-columns:repeat(2,1fr); }
  .trust div:nth-child(3) { border-left:0; }
  .trust div:nth-child(n+3) { border-top:1px solid var(--line); }
  .cards, .sow-grid, .terms-grid, .records-grid, .proof-grid, .ownership-grid { grid-template-columns:1fr; }
  .form-panel { padding:22px; }
  .form-grid { grid-template-columns:1fr; }
  .consultation-form .full { grid-column:auto; }
  .card { min-height:230px; }
  .footer-row { flex-direction:column; align-items:flex-start; }
  .urgent-box { flex-direction:column; align-items:flex-start; padding:30px; }
}


/* Banking services: extend the existing 228NetOps visual system. */
.banking { border-block:1px solid var(--line); background:linear-gradient(140deg,rgba(9,40,67,.65),rgba(5,8,16,.6) 55%); }
.banking-intro { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.banking-intro h2 { font-size:clamp(2.3rem,4.5vw,4rem); line-height:1.06; margin-top:18px; }
.banking-intro h2 span { color:var(--cyan); }
.banking-intro .lead { margin-top:0; }
.banking-jumps { display:flex; flex-wrap:wrap; gap:12px; margin:34px 0; }
.banking-jumps a { padding:9px 15px; border:1px solid var(--line); border-radius:999px; color:var(--cyan); text-decoration:none; font-weight:700; font-size:.9rem; }
.banking-jumps a:hover { background:rgba(38,167,255,.14); }
.banking-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.banking-card { padding:30px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(18,34,58,.9),rgba(8,14,25,.92)); }
.banking-card h3 { margin:16px 0 12px; font-size:1.45rem; line-height:1.25; }
.banking p,.banking li { color:var(--muted); }
.banking details { border-top:1px solid var(--line); margin-top:22px; padding-top:15px; }
.banking summary { cursor:pointer; color:var(--cyan); font-weight:750; padding:5px 0; }
.banking li + li { margin-top:8px; }
.banking ul { padding-left:20px; }
.banking-support { display:flex; gap:35px; align-items:center; justify-content:space-between; padding:32px; border:1px solid var(--line); border-radius:20px; margin-top:22px; background:rgba(11,25,43,.7); }
.banking-support > div { max-width:760px; }
.banking-support .button { flex-shrink:0; }
.banking-support h3,.banking-engagement h3,.banking-faq h3 { font-size:1.6rem; line-height:1.2; }
.banking-engagement { margin-top:58px; }
.banking-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:0; list-style:none; counter-reset:bank-step; }
.banking-steps li { counter-increment:bank-step; border-top:2px solid var(--cyan); padding-top:18px; margin:0!important; }
.banking-steps li::before { content:'0' counter(bank-step); display:block; color:var(--green); font-family:ui-monospace,monospace; margin-bottom:12px; }
.banking-steps strong { display:block; color:var(--text); margin-bottom:10px; }
.banking-steps span { font-size:.95rem; }
.banking-faq { margin-top:48px; max-width:850px; }
.banking-faq details { margin-top:14px; }
[id] { scroll-margin-top:110px; }
a:focus-visible,summary:focus-visible,button:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
@media (max-width:1100px) { .nav-links { gap:14px; flex-wrap:wrap; justify-content:flex-end; } }
@media (max-width:900px) { .banking-intro { grid-template-columns:1fr; gap:18px; } .banking-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .banking-support { align-items:flex-start; flex-direction:column; } .nav-links a.banking-nav { display:inline-flex; color:var(--cyan); } }
@media (max-width:580px) { .banking-grid,.banking-steps { grid-template-columns:1fr; } .banking-card,.banking-support { padding:24px; } .nav { gap:12px; flex-wrap:wrap; padding-block:10px; } .nav-links { gap:12px; } .nav-links .button.small { font-size:.78rem; padding-inline:12px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }