/*
  NetLogik Session 2 — public visual consistency pass
  Scope: CSS-only polish for public homepage sections.
  No backend, auth, database, admin, routes, or content logic changes.
*/

:root{
  --s2-shell:1280px;
  --s2-radius:28px;
  --s2-radius-sm:20px;
  --s2-glass:linear-gradient(145deg,rgba(18,43,78,.78),rgba(7,18,38,.92));
  --s2-glass-soft:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012));
  --s2-border:rgba(93,239,255,.12);
  --s2-border-strong:rgba(93,239,255,.22);
  --s2-text-soft:rgba(221,233,248,.74);
  --s2-shadow:0 28px 86px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.045);
}

/* Keep the strong hero, then make every following block feel like the same product. */
.seo-foundation,
#services,
#about,
#process,
#intel,
#contact,
.cms-section{
  position:relative;
  isolation:isolate;
}

.seo-foundation::before,
#services::before,
#about::before,
#process::before,
#intel::before,
#contact::before,
.cms-section::before{
  background:
    radial-gradient(circle at 14% 18%,rgba(0,212,255,.11),transparent 30%),
    radial-gradient(circle at 86% 12%,rgba(138,99,255,.11),transparent 32%),
    radial-gradient(circle at 78% 86%,rgba(38,230,178,.055),transparent 30%),
    linear-gradient(180deg,#061326,#0a1d38 52%,#061326) !important;
}

#about::before{background:radial-gradient(circle at 86% 20%,rgba(138,99,255,.14),transparent 30%),radial-gradient(circle at 14% 78%,rgba(38,230,178,.09),transparent 34%),linear-gradient(180deg,#07162d,#0b2444 54%,#07182e) !important}
#process::before{background:radial-gradient(circle at 16% 18%,rgba(0,212,255,.12),transparent 30%),radial-gradient(circle at 82% 74%,rgba(255,94,168,.08),transparent 28%),linear-gradient(180deg,#07182e,#0a1f3b 50%,#07172d) !important}
#contact::before{background:radial-gradient(circle at 82% 10%,rgba(255,94,168,.12),transparent 30%),radial-gradient(circle at 14% 72%,rgba(38,230,178,.10),transparent 32%),linear-gradient(180deg,#061326,#091b34 48%,#061126) !important}

/* Shared header rhythm */
#process > .r:first-child,
#contact > .r:first-child,
.news-intro,
.svc-intro,
.seo-foundation-inner,
.cms-inner,
.cms-cta-row,
.pcms-shell{
  max-width:var(--s2-shell) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#process > .r:first-child,
#contact > .r:first-child,
.news-intro{
  padding:clamp(1.15rem,2.6vw,1.9rem);
  border:1px solid rgba(93,239,255,.09);
  border-radius:var(--s2-radius);
  background:var(--s2-glass-soft);
  box-shadow:0 22px 72px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.035);
}

.s-ey,
.cms-kicker,
.pcms-kicker,
.seo-foundation-kicker{
  color:#8ff4ff !important;
  font-weight:850;
  letter-spacing:.16em !important;
}

.s-ttl,
.cms-title,
.pcms-title,
.seo-foundation-title{
  text-wrap:balance;
}

.s-rule{
  width:52px !important;
  height:3px !important;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--mint)) !important;
  box-shadow:0 0 24px rgba(0,212,255,.28);
}

/* SEO foundation: make it a real premium section, not plain text. */
.seo-foundation-inner{
  border-color:var(--s2-border) !important;
  background:var(--s2-glass) !important;
  box-shadow:var(--s2-shadow) !important;
}
.seo-foundation-copy p{
  color:var(--s2-text-soft) !important;
}

/* CMS sections: align generic admin-created content with premium blocks. */
.cms-section:not(.is-premium_showcase):not(.is-live_pulse):not(.is-solution_matrix):not(.is-operations_blueprint):not(.is-trust_band):not(.is-service_assurance):not(.is-services_grid) .cms-inner,
.cms-section:not(.is-premium_showcase):not(.is-live_pulse):not(.is-solution_matrix):not(.is-operations_blueprint):not(.is-trust_band):not(.is-service_assurance):not(.is-services_grid) .cms-cta-row{
  border-color:var(--s2-border) !important;
  background:var(--s2-glass) !important;
  box-shadow:var(--s2-shadow) !important;
}
.cms-card,
.pcms-card,
.svc-card,
.news-card{
  border-color:var(--s2-border) !important;
  box-shadow:0 22px 66px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.cms-card:hover,
.pcms-card:hover,
.svc-card:hover,
.news-card:hover{
  border-color:var(--s2-border-strong) !important;
  transform:translateY(-4px);
}
.cms-body,
.cms-subtitle,
.pcms-copy,
.svc-intro-r,
.proc-ds,
.ab-focus-desc,
.c-vl,
.news-intro-r{
  color:var(--s2-text-soft) !important;
}

/* About: match the left text panel with the visual focus panel. */
.ab-lay{
  gap:clamp(1.25rem,4vw,4.2rem) !important;
  align-items:stretch !important;
}
.ab-txt,
.ab-vis-in{
  min-height:100%;
}
.ab-txt::before,
.ab-vis-in::before,
.ct-left::before,
.form-box::before,
.proc-step::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--mint),transparent);
  opacity:.75;
  pointer-events:none;
}
.ab-txt,
.ab-vis-in,
.ct-left,
.form-box{
  position:relative;
  overflow:hidden;
}
.ab-focus-card{
  min-height:132px;
}
.ab-focus-title,
.proc-nm,
.fm-ttl,
.ct-left h3{
  text-wrap:balance;
}

/* Process: card layout instead of old thin timeline feeling. */
.proc-grid{
  gap:18px !important;
}
.proc-step{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left !important;
  min-height:260px;
}
.proc-nw{
  width:58px !important;
  height:58px !important;
  margin:0 0 1.15rem !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(138,99,255,.10)) !important;
}
.proc-num{
  font-size:1.05rem !important;
}
.proc-nm{
  margin-bottom:.65rem !important;
  font-size:1.28rem !important;
  line-height:1.05 !important;
}
.proc-ds{
  font-size:.86rem !important;
  line-height:1.72 !important;
}

/* News: visually connect the header and carousel. */
.news-intro{
  margin-bottom:1.15rem !important;
}
.news-viewport{
  max-width:var(--s2-shell) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border-color:var(--s2-border) !important;
}
.news-controls{
  max-width:var(--s2-shell);
  margin-left:auto;
  margin-right:auto;
}
.news-card{
  min-height:360px;
}

/* Contact: make left info and form read like one designed block. */
.ct-wrap{
  gap:clamp(1.25rem,4vw,4rem) !important;
}
.ct-left,
.form-box{
  border-color:var(--s2-border) !important;
  background:var(--s2-glass) !important;
  box-shadow:var(--s2-shadow) !important;
}
.c-item{
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.c-item:hover{
  transform:translateX(4px);
  border-color:var(--s2-border-strong) !important;
}
.f-grp input,
.f-grp select,
.f-grp textarea{
  min-height:48px;
}
.f-sub,
.btn-p,
.cms-cta,
.pcms-cta{
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.f-sub:hover,
.btn-p:hover,
.cms-cta:hover,
.pcms-cta:hover{
  filter:saturate(1.08) brightness(1.05);
}

/* Mobile: keep it elegant without huge cards eating the screen. */
@media(max-width:1050px){
  #process > .r:first-child,
  #contact > .r:first-child,
  .news-intro{border-radius:24px}
  .proc-step{min-height:230px}
}

@media(max-width:680px){
  #process > .r:first-child,
  #contact > .r:first-child,
  .news-intro{
    padding:1.05rem !important;
    border-radius:20px !important;
  }
  .seo-foundation-inner,
  .cms-inner,
  .cms-cta-row,
  .ab-txt,
  .ab-vis-in,
  .proc-step,
  .news-viewport,
  .ct-left,
  .form-box{
    border-radius:20px !important;
  }
  .proc-grid{
    grid-template-columns:1fr !important;
    gap:1rem !important;
  }
  .proc-step{
    min-height:0;
    padding:1.1rem !important;
  }
  .proc-nw{
    width:48px !important;
    height:48px !important;
    border-radius:16px !important;
    margin-bottom:.85rem !important;
  }
  .news-card{
    min-height:0;
  }
  .ct-left h3 br{
    display:none;
  }
}

@media(max-width:420px){
  .cms-card,
  .pcms-card,
  .svc-card,
  .news-card,
  .ab-focus-card,
  .c-item{
    border-radius:18px !important;
  }
}