
:root{
  --bg:#061421;
  --surface:#0d2535;
  --surface2:#123448;
  --cyan:#5ce4f2;
  --cyan2:#9af2fa;
  --white:#f4f9ff;
  --muted:#bfd0de;
  --border:rgba(113,211,233,.24);
  --gold:#ffcf72;
  --max:1200px;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65;
}
a{color:var(--cyan2)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);outline-offset:4px
}
#network{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.85;
}
.site-shell{position:relative;z-index:1}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
header{
  position:sticky;top:0;z-index:10;
  background:rgba(5,18,30,.94);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(15px);
}
.nav{
  display:flex;align-items:center;
  justify-content:space-between;
  gap:20px;min-height:78px;
}
.brand{
  color:var(--white);
  font-weight:900;font-size:1.28rem;
  letter-spacing:.035em;text-decoration:none;
  white-space:nowrap;
}
.brand span{color:var(--cyan)}
nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
nav a{
  font-size:.86rem;color:var(--muted);
  text-decoration:none;font-weight:600;
}
nav a:hover,nav a[aria-current=page]{color:var(--cyan)}
.nav-cta,.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 21px;border-radius:9px;
  font-weight:800;text-decoration:none;
  transition:transform .2s,background .2s;
}
.nav-cta,.button.primary{background:var(--cyan);color:#06202b}
.button.secondary{border:1px solid var(--cyan);color:var(--cyan2);background:rgba(4,19,31,.6)}
.button:hover,.nav-cta:hover{transform:translateY(-2px)}
.hero{
  min-height:610px;display:grid;
  grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);
  gap:clamp(32px,5vw,75px);
  align-items:center;
  padding:105px 0 90px;
}
.eyebrow{
  color:var(--cyan2);
  text-transform:uppercase;letter-spacing:.17em;
  font-size:.8rem;font-weight:850;
}
h1,h2,h3{line-height:1.15;letter-spacing:-.025em}
h1{font-size:clamp(2.65rem,5.3vw,5.2rem);margin:18px 0 24px}
h2{font-size:clamp(2rem,3.4vw,3.3rem);margin:12px 0 23px}
h3{font-size:1.32rem;margin:0 0 12px}
p{color:var(--muted)}
.lead{font-size:clamp(1.08rem,1.4vw,1.24rem);max-width:680px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-panel{
  background:linear-gradient(145deg,rgba(17,54,72,.92),rgba(5,21,35,.87));
  padding:34px;border:1px solid var(--border);
  border-radius:22px;box-shadow:0 22px 80px rgba(0,0,0,.3);
}
.hero-panel .metric{border-bottom:1px solid var(--border);padding:12px 0}
.hero-panel .metric:last-child{border:0}
.metric strong{display:block;color:var(--cyan2);font-size:1.5rem}
.metric span{color:var(--muted);font-size:.92rem}
section.content-section{padding:80px 0}
.section-intro{max-width:760px;margin-bottom:32px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{
  background:rgba(10,35,52,.94);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:30px;
}
.card p,.card li{color:#d8e7ef}
.card a{font-weight:800;text-decoration:none}
.card ul{padding-left:21px}
.card li{margin:7px 0}
.tag{
  color:var(--cyan2);font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;margin-bottom:15px;
}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.step{background:rgba(13,37,53,.92);padding:25px;border:1px solid var(--border);border-radius:12px}
.step .num{color:var(--cyan);font-weight:900;font-size:1.5rem}
.pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.tier{
  background:rgba(14,43,61,.96);
  border:1px solid var(--border);
  border-radius:14px;
  padding:25px 19px;
}
.tier strong{display:block;font-size:1.2rem}
.tier .amount{
  font-size:clamp(2.2rem,3.5vw,3.2rem);
  color:var(--cyan2);font-weight:900;line-height:1.4
}
.tier small{display:block;color:var(--muted)}
.tier .range{margin-top:15px;font-weight:750;color:var(--white)}
.note{font-size:.88rem;color:var(--muted)}
.cta-band{
  background:rgba(15,45,63,.94);
  border:1px solid var(--border);
  border-radius:22px;padding:clamp(28px,5vw,58px);
  text-align:center;
}
.page-hero{padding:95px 0 45px;max-width:850px}
.page-hero h1{font-size:clamp(2.4rem,4.5vw,4.6rem)}
.prose{max-width:820px}
.faq details{
  background:rgba(14,43,61,.94);
  padding:20px 23px;border:1px solid var(--border);
  border-radius:11px;margin:12px 0
}
.faq summary{cursor:pointer;font-weight:800}
.faq p{margin-bottom:0}
footer{
  background:rgba(3,13,22,.95);
  margin-top:80px;padding:40px 0;
  border-top:1px solid var(--border)
}
.footer-flex{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}
.footer-flex p{margin:4px 0;font-size:.87rem}
@media(max-width:1000px){
  .pricing,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr;min-height:auto}
  nav{gap:11px}
}
@media(max-width:650px){
  .container{width:min(calc(100% - 30px),var(--max))}
  .nav{align-items:flex-start;flex-direction:column;padding:16px 0}
  nav{gap:11px}
  .hero{padding:65px 0}
  .grid,.pricing,.steps{grid-template-columns:1fr}
  section.content-section{padding:55px 0}
  .card{padding:24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button,.nav-cta{transition:none}
}


/* SITUP VISUAL REFINEMENT */
header {
  background: rgba(5, 20, 32, .54) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  border-bottom: 1px solid rgba(150,205,221,.19) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,.09);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.brand-tree {
  width: 31px;
  height: 31px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px rgba(120,202,222,.22));
}
:root {
  --cyan: #7cc9d5;
  --cyan2: #a6dce3;
  --muted: #c2d1d9;
  --border: rgba(146,190,204,.26);
}
.nav-cta, .button.primary {
  background: #88d0dc !important;
  color: #08212b !important;
}
.nav-cta:hover, .button.primary:hover {
  background: #a5e2e9 !important;
}
.hero-panel {
  background: rgba(12,37,52,.70) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(146,190,204,.25) !important;
}
.card, .step, .tier {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* SITUP ORIGINAL BRAND RESTORATION START */

:root {
  /* Original Secure I.T. U.P. branding */
  --green: #53f36e;
  --green-strong: #31d856;
  --green-dark: #0c7a34;

  /* Existing v2 theme variables */
  --cyan: #53f36e;
  --cyan2: #8bded5;

  --bg: #061421;
  --white: #f4f9ff;
  --muted: #c7d5df;
  --border: rgba(103, 214, 151, .23);
}

/* Original glass-clear navigation treatment */
header {
  background: rgba(9, 22, 29, .46) !important;
  border-bottom: 1px solid rgba(83, 243, 110, .18) !important;
  backdrop-filter: blur(17px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(17px) saturate(125%) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}

/* Original logo inside v2 navigation */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff !important;
  text-decoration: none;
}

.brand .situp-logo-v4 {
  display: block;
  width: 43px;
  height: 43px;
  max-width: 43px;
  max-height: 43px;
  flex: 0 0 43px;
  overflow: visible;
  filter: drop-shadow(0 2px 7px rgba(83,243,110,.12));
}

.brand span {
  color: var(--green) !important;
}

/* Navigation and interactive elements */
nav a:hover,
nav a[aria-current="page"] {
  color: var(--green) !important;
}

.eyebrow,
.tag,
.step .num {
  color: var(--green) !important;
}

.metric strong {
  color: #8bded5 !important;
}

.nav-cta,
.button.primary {
  background: linear-gradient(
    135deg,
    #53f36e,
    #65ff7c
  ) !important;
  color: #072018 !important;
  border: 1px solid rgba(120,255,146,.35);
  box-shadow: 0 6px 24px rgba(53,239,102,.14);
}

.nav-cta:hover,
.button.primary:hover {
  background: #92ffa3 !important;
  color: #072018 !important;
}

.button.secondary {
  border: 1px solid rgba(83,243,110,.7) !important;
  color: #b0f5bc !important;
  background: rgba(5,20,24,.52);
}

/* Pricing remains distinct but consistent with branding */
.tier .amount {
  color: #8bded5 !important;
}

/* Keep card text legible */
.card h3,
.step h3,
.tier strong {
  color: #f4f9ff;
}

.card p,
.card li,
.step p,
.tier small {
  color: #d8e7ef;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #53f36e;
  outline-offset: 4px;
}

@media(max-width:650px) {
  .brand .situp-logo-v4 {
    width: 35px;
    height: 35px;
    flex-basis: 35px;
  }
}

/* SITUP ORIGINAL BRAND RESTORATION END */
