/* ═══════════════════════════════════════════════════
   CYBERKNOCKS SECURE LABS — MAIN THEME CSS v3.0
   Edit this file in WordPress: Appearance → Theme File Editor → css/theme.css
   Or duplicate styles in Appearance → Customize → Additional CSS
═══════════════════════════════════════════════════ */

/* ─── VARIABLES ─── */
:root {
  --black:  #020408;
  --dark:   #060d16;
  --dark2:  #0a1628;
  --panel:  #0d1f35;
  --border: #1a3a5c;
  --accent: #00d4ff;
  --acnt2:  #0099cc;
  --green:  #00ff88;
  --red:    #ff3d57;
  --text:   #c8dff0;
  --muted:  #7a9bb5;
  --white:  #eaf4ff;
  --fh: 'Syne', sans-serif;
  --fb: 'Rajdhani', sans-serif;
  --fm: 'JetBrains Mono', monospace;
}

/* ─── RESET ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--black); color:var(--text); font-family:var(--fb); font-size:1.06rem; line-height:1.75; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-decoration:none; transition:color .3s; }
a:hover { color:var(--green); }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:var(--fb); }
::selection { background:rgba(0,212,255,.22); color:var(--white); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--acnt2); border-radius:2px; }

/* Grid overlay */
body::after {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(rgba(0,212,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(0,212,255,.022) 1px,transparent 1px);
  background-size:64px 64px;
}

/* ─── LAYOUT ─── */
.cnx-wrap { max-width:1200px; margin:0 auto; padding:0 2.5rem; }
.cnx-section { position:relative; z-index:1; }
.cnx-pad { padding:7rem 0; }

/* ─── TYPOGRAPHY UTILS ─── */
.cnx-label {
  font-family:var(--fm); font-size:.72rem; color:var(--accent);
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:.9rem;
  display:flex; align-items:center; gap:.65rem;
}
.cnx-label::before { content:'//'; opacity:.42; }
.cnx-h2 { font-family:var(--fh); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); color:var(--white); line-height:1.1; margin-bottom:1.2rem; }
.cnx-h2 .hi { color:var(--accent); }
.cnx-sub { font-size:1.05rem; color:var(--muted); line-height:1.8; max-width:600px; }
.center { text-align:center; }
.center .cnx-label { justify-content:center; }
.center .cnx-sub { margin:0 auto; }

/* ─── REVEAL ANIMATIONS ─── */
.rv { opacity:0; transform:translateY(24px); transition:opacity .65s ease,transform .65s ease; }
.rv.in { opacity:1; transform:translateY(0); }
.rv-d1 { transition-delay:.08s; }
.rv-d2 { transition-delay:.16s; }
.rv-d3 { transition-delay:.24s; }
.rv-d4 { transition-delay:.32s; }
.rv-d5 { transition-delay:.40s; }
.rv-d6 { transition-delay:.48s; }

/* ─── BUTTONS ─── */
.btn, .btn-o {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--fb); font-weight:700; font-size:.95rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.82rem 2.1rem; border:none;
  clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition:all .3s; text-decoration:none; position:relative; overflow:hidden;
}
.btn::after, .btn-o::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%); transition:transform .5s;
}
.btn:hover::after, .btn-o:hover::after { transform:translateX(100%); }
.btn { background:var(--accent); color:var(--black); }
.btn:hover { background:var(--green); color:var(--black); }
.btn-o { background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-o:hover { border-color:var(--accent); color:var(--accent); }

/* ═══════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════ */
#cnx-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 2.5rem;
  background:rgba(2,4,8,.82); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(0,212,255,.07);
  transition:all .35s;
}
#cnx-nav.scrolled { padding:.85rem 2.5rem; background:rgba(2,4,8,.97); border-bottom-color:rgba(0,212,255,.13); }

.cnx-logo { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.cnx-logo-hex {
  width:40px; height:40px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--acnt2));
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:.62rem; font-weight:700; color:var(--black);
  transition:transform .3s;
}
.cnx-logo:hover .cnx-logo-hex { transform:rotate(30deg); }
.cnx-logo-name { font-family:var(--fh); font-weight:800; font-size:1.08rem; color:var(--white); }
.cnx-logo-name em { color:var(--accent); font-style:normal; }
.cnx-logo-tagline { font-family:var(--fm); font-size:.5rem; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; display:block; margin-top:.08rem; }
.cnx-logo-name em { color:var(--accent); font-style:normal; }

/* WordPress-generated menu */
#cnx-nav .menu, .cnx-nav-menu {
  display:flex; align-items:center; gap:2rem; list-style:none;
}
#cnx-nav .menu li a, .cnx-nav-menu a {
  font-family:var(--fb); font-weight:600; font-size:.84rem; color:var(--muted);
  text-decoration:none; letter-spacing:.09em; text-transform:uppercase;
  position:relative; transition:color .3s;
}
#cnx-nav .menu li a::after, .cnx-nav-menu a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--accent); transition:width .3s;
}
#cnx-nav .menu li a:hover, .cnx-nav-menu a:hover { color:var(--accent); }
#cnx-nav .menu li a:hover::after, .cnx-nav-menu a:hover::after { width:100%; }

.cnx-nav-cta {
  font-family:var(--fb); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem 1.4rem; background:transparent; border:1.5px solid var(--accent); color:var(--accent);
  text-decoration:none; clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%); transition:all .3s; white-space:nowrap;
}
.cnx-nav-cta:hover { background:var(--accent); color:var(--black); }

.cnx-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; }
.cnx-burger span { display:block; width:22px; height:2px; background:var(--accent); transition:all .3s; }

/* Mobile menu */
.cnx-mob { display:none; position:fixed; top:68px; left:0; right:0; background:rgba(2,4,8,.98); border-bottom:1px solid var(--border); padding:1.5rem 2.5rem; z-index:999; flex-direction:column; gap:.9rem; }
.cnx-mob.open { display:flex; }
.cnx-mob a { font-family:var(--fb); font-weight:600; font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; padding:.45rem 0; border-bottom:1px solid var(--border); text-decoration:none; transition:color .3s; }
.cnx-mob a:hover, .cnx-mob a.cta { color:var(--accent); }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
#hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:9rem 2.5rem 5rem; text-align:center;
}
.hero-glow {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 90% 60% at 50% 10%,rgba(0,212,255,.1) 0%,transparent 65%),
              radial-gradient(ellipse 50% 40% at 20% 80%,rgba(0,255,136,.05) 0%,transparent 60%),
              radial-gradient(ellipse 50% 40% at 80% 80%,rgba(0,153,204,.05) 0%,transparent 60%);
}
.hero-scan {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent 10%,var(--accent) 50%,transparent 90%);
  animation:scan 5s linear infinite; z-index:1; opacity:.22;
}
@keyframes scan { 0%{top:-2px} 100%{top:100%} }

.hero-inner { position:relative; z-index:2; max-width:1100px; width:100%; text-align:center; margin:0 auto; }

.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid rgba(0,212,255,.28); background:rgba(0,212,255,.05);
  padding:.36rem 1rem; font-family:var(--fm); font-size:.73rem; color:var(--accent); letter-spacing:.06em; margin-bottom:2rem;
}
.hero-badge::before { content:'▶'; font-size:.55rem; animation:blink 1.3s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

.hero-h1 { font-family:var(--fh); font-weight:800; font-size:clamp(3.8rem,9vw,8.5rem); color:var(--white); line-height:.92; letter-spacing:-.04em; margin-bottom:1.6rem; }
.hero-h1 .ln2 { color:var(--accent); display:block; text-shadow:0 0 60px rgba(0,212,255,.35); }
.hero-h1 .ln3 { display:block; font-size:.34em; font-weight:500; color:var(--muted); letter-spacing:.12em; margin-top:.9rem; text-shadow:none; }

.hero-desc { font-size:1.15rem; color:var(--muted); max-width:600px; line-height:1.82; margin:0 auto 2.8rem; }

.hero-btns { display:flex; gap:1.1rem; flex-wrap:wrap; margin-bottom:4rem; justify-content:center; }

.hero-stats { display:flex; gap:3.5rem; flex-wrap:wrap; padding-top:2.8rem; border-top:1px solid var(--border); justify-content:center; }
.hs-num { font-family:var(--fh); font-size:2.8rem; font-weight:800; color:var(--accent); line-height:1; display:block; }
.hs-lbl { font-family:var(--fm); font-size:.69rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; line-height:1.5; }

/* ═══════════════════════════════════════════════════
   TRUST TICKER
═══════════════════════════════════════════════════ */
.trust-bar { background:var(--dark); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1rem 0; overflow:hidden; position:relative; z-index:1; }
.trust-track { display:flex; gap:4.5rem; width:max-content; animation:ticker 24s linear infinite; padding:0 2rem; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.trust-item { display:flex; align-items:center; gap:.6rem; white-space:nowrap; font-family:var(--fm); font-size:.73rem; color:var(--muted); letter-spacing:.07em; }
.trust-item .ti { color:var(--accent); }

/* ═══════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════ */
#about { padding:7rem 0; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }

.profile-card { background:var(--panel); border:1px solid var(--border); padding:2.4rem; position:relative; overflow:hidden; }
.profile-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--green)); }
.profile-top { display:flex; align-items:center; gap:1.3rem; margin-bottom:1.8rem; }
.profile-hex { width:68px; height:68px; flex-shrink:0; background:linear-gradient(135deg,var(--accent),var(--acnt2)); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-weight:800; font-size:1.1rem; color:var(--black); }
.profile-name { font-family:var(--fh); font-weight:800; font-size:1.22rem; color:var(--white); }
.profile-role { font-family:var(--fm); font-size:.72rem; color:var(--accent); margin-top:.2rem; }
.profile-bio { font-size:.92rem; color:var(--muted); line-height:1.8; margin-bottom:1.5rem; }
.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:1.5rem; }
.ps { background:rgba(0,212,255,.05); border:1px solid rgba(0,212,255,.14); padding:.9rem; text-align:center; }
.ps-n { font-family:var(--fh); font-size:1.65rem; font-weight:800; color:var(--accent); display:block; }
.ps-l { font-family:var(--fm); font-size:.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; }
.h1-link { display:flex; align-items:center; gap:.8rem; background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.22); padding:.8rem 1.3rem; text-decoration:none; transition:all .3s; }
.h1-link:hover { background:rgba(0,212,255,.13); border-color:var(--accent); }
.h1-link .lt { font-family:var(--fb); font-weight:700; color:var(--white); font-size:.96rem; display:block; }
.h1-link .ls { font-family:var(--fm); font-size:.69rem; color:var(--acnt2); }
.h1-link .la { margin-left:auto; color:var(--accent); font-size:1.1rem; }

.about-text .cnx-sub { max-width:none; margin-bottom:2rem; }
.skills { display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.sk-row {}
.sk-hdr { display:flex; justify-content:space-between; margin-bottom:.32rem; }
.sk-name { font-family:var(--fb); font-weight:600; color:var(--text); font-size:.91rem; }
.sk-pct { font-family:var(--fm); font-size:.7rem; color:var(--accent); }
.sk-track { height:3px; background:var(--border); }
.sk-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--green)); width:0; transition:width 1.4s ease; position:relative; }
.sk-fill::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:6px; height:6px; background:var(--green); border-radius:50%; }

/* ═══════════════════════════════════════════════════
   SERVICES
═══════════════════════════════════════════════════ */
#services { padding:7rem 0; background:linear-gradient(180deg,transparent,rgba(6,13,22,.65) 50%,transparent); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--border); margin-top:3rem; }
.svc { background:var(--dark); padding:2.4rem; position:relative; overflow:hidden; transition:background .35s,transform .35s; }
.svc:hover { background:var(--panel); transform:scale(1.015); z-index:2; }
.svc::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,212,255,.07),transparent 60%); opacity:0; transition:opacity .4s; }
.svc:hover::before { opacity:1; }
.svc.feat { background:var(--dark); border-top:2px solid var(--green); }
.svc.feat:hover { background:var(--panel); }
.svc-num { font-family:var(--fm); font-size:.67rem; color:rgba(26,58,92,.9); letter-spacing:.1em; margin-bottom:1.3rem; }
.svc-icon { font-size:2.1rem; margin-bottom:1.1rem; display:block; filter:drop-shadow(0 0 10px rgba(0,212,255,.35)); }
.svc-title { font-family:var(--fh); font-size:1.2rem; font-weight:700; color:var(--white); margin-bottom:.7rem; }
.svc-desc { font-size:.9rem; color:var(--muted); line-height:1.75; margin-bottom:1.4rem; }
.svc-tags { display:flex; flex-wrap:wrap; gap:.42rem; }
.svc-tag { font-family:var(--fm); font-size:.64rem; color:var(--acnt2); border:1px solid rgba(0,153,204,.27); padding:.17rem .52rem; }
.new-tag { display:inline-block; background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.36); color:var(--green); font-family:var(--fm); font-size:.61rem; padding:.1rem .44rem; margin-left:.38rem; vertical-align:middle; }

/* ═══════════════════════════════════════════════════
   INDUSTRIES
═══════════════════════════════════════════════════ */
#industries { padding:6rem 0; }
.ind-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; }
.ind { background:var(--dark2); border:1px solid var(--border); padding:2rem 1.4rem; text-align:center; transition:all .3s; }
.ind:hover { border-color:var(--acnt2); background:var(--panel); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,212,255,.08); }
.ind-icon { font-size:2.1rem; margin-bottom:.9rem; display:block; }
.ind-name { font-family:var(--fh); font-weight:700; color:var(--white); font-size:.96rem; margin-bottom:.44rem; }
.ind-desc { font-size:.8rem; color:var(--muted); line-height:1.65; }

/* ═══════════════════════════════════════════════════
   METHODOLOGY
═══════════════════════════════════════════════════ */
#methodology { padding:7rem 0; background:linear-gradient(180deg,transparent,rgba(0,212,255,.018) 50%,transparent); }
.meth-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:5rem; align-items:start; margin-top:4rem; }
.phases { display:flex; flex-direction:column; }
.phase { border-left:2px solid var(--border); padding:0 0 2.4rem 2rem; position:relative; transition:border-color .3s; }
.phase:last-child { padding-bottom:0; }
.phase::before { content:attr(data-n); position:absolute; left:-1.05rem; top:0; width:1.95rem; height:1.95rem; background:var(--dark2); border:2px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-size:.67rem; color:var(--muted); transition:all .3s; }
.phase:hover { border-left-color:var(--accent); }
.phase:hover::before { background:var(--accent); border-color:var(--accent); color:var(--black); }
.phase-title { font-family:var(--fh); font-weight:700; font-size:1.04rem; color:var(--white); margin-bottom:.38rem; }
.phase-desc { font-size:.87rem; color:var(--muted); line-height:1.72; }
.phase-tools { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:.7rem; }
.pt { font-family:var(--fm); font-size:.61rem; background:rgba(0,212,255,.055); border:1px solid rgba(0,212,255,.14); color:var(--acnt2); padding:.13rem .46rem; }
.vuln-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-bottom:1.5rem; }
.vc { background:var(--dark2); border:1px solid var(--border); padding:1.1rem; transition:border-color .3s; }
.vc:hover { border-color:rgba(0,212,255,.38); }
.vc-icon { font-size:1.2rem; margin-bottom:.42rem; }
.vc-name { font-family:var(--fb); font-weight:700; color:var(--white); font-size:.9rem; margin-bottom:.28rem; }
.vc-list { font-family:var(--fm); font-size:.63rem; color:var(--muted); line-height:1.85; }
.standards-box { background:var(--panel); border:1px solid var(--border); padding:1.4rem; }
.std-title { font-family:var(--fm); font-size:.7rem; color:var(--accent); letter-spacing:.1em; margin-bottom:.85rem; }
.std-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.std { font-family:var(--fm); font-size:.65rem; background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.18); color:var(--accent); padding:.26rem .72rem; }

/* ═══════════════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════════════ */
#process { padding:7rem 0; }
.process-steps { display:grid; grid-template-columns:repeat(5,1fr); position:relative; margin-top:4rem; }
.process-steps::before { content:''; position:absolute; top:1.88rem; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,var(--border),var(--accent),var(--border),transparent); z-index:0; }
.pstep { text-align:center; position:relative; z-index:1; padding:0 .9rem; }
.pstep-hex { width:3.8rem; height:3.8rem; margin:0 auto 1.4rem; background:var(--dark2); border:1px solid var(--border); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:1.1rem; font-weight:800; color:var(--accent); transition:all .3s; }
.pstep:hover .pstep-hex { background:var(--accent); color:var(--black); }
.pstep-title { font-family:var(--fb); font-weight:700; color:var(--white); font-size:.96rem; margin-bottom:.4rem; }
.pstep-desc { font-size:.79rem; color:var(--muted); line-height:1.62; }

/* ═══════════════════════════════════════════════════
   HACKERONE
═══════════════════════════════════════════════════ */
#hackerone { padding:7rem 0; }
.h1-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:5rem; align-items:center; }
.terminal { background:var(--dark2); border:1px solid var(--border); font-family:var(--fm); overflow:hidden; }
.term-bar { background:var(--panel); padding:.72rem 1.1rem; display:flex; align-items:center; gap:.52rem; border-bottom:1px solid var(--border); }
.tdot { width:10px; height:10px; border-radius:50%; }
.tdot.r{background:#ff5f57}.tdot.y{background:#febc2e}.tdot.g{background:#28c840}
.term-ttl { font-size:.73rem; color:var(--muted); margin:0 auto; }
.term-body { padding:1.4rem; font-size:.75rem; line-height:2.1; }
.tl { display:flex; gap:.72rem; }
.tp{color:var(--green);flex-shrink:0}.tc{color:var(--white)}.to{color:var(--muted);padding-left:1.3rem}.th{color:var(--accent)}.tg{color:var(--green)}
.tcur { display:inline-block; width:7px; height:13px; background:var(--accent); animation:blink 1s step-end infinite; vertical-align:middle; }
.h1-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.4rem; }
.metric { background:var(--panel); border:1px solid var(--border); padding:1.7rem; position:relative; overflow:hidden; transition:all .3s; }
.metric:hover { border-color:var(--accent); transform:translateY(-2px); }
.metric::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .3s; transform-origin:left; }
.metric:hover::before { transform:scaleX(1); }
.metric.feat { grid-column:span 2; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(0,212,255,.02)); border-color:rgba(0,212,255,.38); }
.metric-icon{font-size:1.4rem;margin-bottom:.7rem}.metric-val{font-family:var(--fh);font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1}
.metric.feat .metric-val{font-size:3.2rem}.metric-lbl{font-family:var(--fm);font-size:.67rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.35rem}
.metric-badge{display:inline-block;background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.35);color:var(--green);font-family:var(--fm);font-size:.63rem;padding:.16rem .52rem;margin-top:.52rem}

/* ═══════════════════════════════════════════════════
   WHY US
═══════════════════════════════════════════════════ */
#why { padding:7rem 0; }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:4rem; }
.why { background:var(--dark2); border:1px solid var(--border); padding:1.9rem; transition:all .3s; }
.why:hover { border-color:rgba(0,212,255,.35); background:var(--panel); transform:translateY(-3px); box-shadow:0 20px 50px rgba(0,212,255,.08); }
.why-icon{font-size:1.75rem;margin-bottom:.9rem;display:block}
.why-title{font-family:var(--fh);font-size:1.08rem;font-weight:700;color:var(--white);margin-bottom:.48rem}
.why-desc{font-size:.87rem;color:var(--muted);line-height:1.72}

/* ═══════════════════════════════════════════════════
   BLOG — dynamically populated from WordPress Posts
═══════════════════════════════════════════════════ */
#blog { padding:7rem 0; background:linear-gradient(180deg,transparent,rgba(6,13,22,.55) 50%,transparent); }
.blog-hdr { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; gap:1rem; flex-wrap:wrap; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.blog-card { background:var(--dark2); border:1px solid var(--border); overflow:hidden; transition:all .3s; display:flex; flex-direction:column; }
.blog-card:hover { border-color:rgba(0,212,255,.38); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,212,255,.08); }
.blog-card a { text-decoration:none; display:flex; flex-direction:column; height:100%; color:inherit; }
.blog-thumb { height:185px; background:linear-gradient(135deg,var(--panel),var(--dark2)); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.blog-thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.blog-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,212,255,.06),transparent); }
.blog-emoji { position:relative; z-index:1; font-size:3.2rem; line-height:1; display:block; width:auto; height:auto; }
.blog-body { padding:1.4rem; flex:1; display:flex; flex-direction:column; }
.blog-cat { font-family:var(--fm); font-size:.63rem; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.52rem; display:block; }
.blog-title { font-family:var(--fh); font-weight:700; color:var(--white); font-size:1rem; line-height:1.4; margin-bottom:.72rem; }
.blog-excerpt { font-size:.85rem; color:var(--muted); line-height:1.65; margin-bottom:1rem; flex:1; }
.blog-foot { display:flex; justify-content:space-between; align-items:center; font-family:var(--fm); font-size:.64rem; color:var(--muted); margin-top:auto; }
.blog-read { color:var(--accent); }
.blog-no-posts { grid-column:span 3; text-align:center; padding:4rem; border:1px dashed var(--border); }
.blog-no-icon { font-size:2.8rem; margin-bottom:1rem; display:block; }
.blog-no-text { font-family:var(--fm); color:var(--muted); font-size:.85rem; line-height:1.8; }

/* ═══════════════════════════════════════════════════
   SINGLE POST & BLOG ARCHIVE
═══════════════════════════════════════════════════ */
.cnx-post-page { padding:9rem 2.5rem 6rem; max-width:820px; margin:0 auto; }
.cnx-post-back { font-family:var(--fm); font-size:.75rem; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; margin-bottom:2rem; transition:color .3s; }
.cnx-post-back:hover { color:var(--accent); }
.cnx-post-cats { font-family:var(--fm); font-size:.72rem; color:var(--accent); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.cnx-post-title { font-family:var(--fh); font-weight:800; font-size:clamp(2rem,4vw,3rem); color:var(--white); line-height:1.18; margin-bottom:1rem; }
.cnx-post-meta { font-family:var(--fm); font-size:.72rem; color:var(--muted); margin-bottom:2.5rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.cnx-post-meta a { color:var(--accent); }
.cnx-post-thumb { margin-bottom:2.5rem; border:1px solid var(--border); }
.entry-content { font-size:1.05rem; line-height:1.9; }
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4 { font-family:var(--fh); color:var(--white); margin:2.2rem 0 1rem; }
.entry-content h2 { font-size:1.6rem; color:var(--accent); }
.entry-content h3 { font-size:1.25rem; }
.entry-content p { color:var(--muted); margin-bottom:1.2rem; }
.entry-content a { color:var(--accent); }
.entry-content a:hover { text-decoration:underline; }
.entry-content strong { color:var(--white); }
.entry-content code { font-family:var(--fm); background:var(--dark2); border:1px solid var(--border); padding:.14rem .38rem; font-size:.84em; color:var(--green); }
.entry-content pre { background:var(--dark2); border:1px solid var(--border); border-left:3px solid var(--accent); padding:1.5rem; overflow-x:auto; margin:1.5rem 0; }
.entry-content pre code { background:none; border:none; padding:0; font-size:.9rem; }
.entry-content ul { padding-left:1.4rem; margin-bottom:1.2rem; }
.entry-content ul li { list-style:disc; color:var(--muted); margin-bottom:.4rem; }
.entry-content ol { padding-left:1.4rem; margin-bottom:1.2rem; }
.entry-content ol li { list-style:decimal; color:var(--muted); margin-bottom:.4rem; }
.entry-content img { border:1px solid var(--border); margin:1.5rem 0; max-width:100%; }
.entry-content blockquote { border-left:3px solid var(--accent); padding:.8rem 1.2rem; background:var(--dark2); margin:1.5rem 0; font-style:italic; color:var(--muted); }
.entry-content table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.92rem; }
.entry-content th { background:var(--panel); color:var(--accent); font-family:var(--fm); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.6rem 1rem; border:1px solid var(--border); text-align:left; }
.entry-content td { padding:.6rem 1rem; border:1px solid var(--border); color:var(--muted); }
.entry-content tr:hover td { background:rgba(0,212,255,.03); }

/* Archive page */
.cnx-archive { padding:9rem 2.5rem 6rem; max-width:1200px; margin:0 auto; }
.cnx-archive-title { font-family:var(--fh); font-weight:800; font-size:2.5rem; color:var(--white); margin-bottom:3rem; }
.cnx-archive-title em { color:var(--accent); font-style:normal; }
.cnx-archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cnx-pagination { display:flex; justify-content:center; gap:.6rem; margin-top:3rem; flex-wrap:wrap; }
.cnx-pagination a, .cnx-pagination span { font-family:var(--fm); font-size:.75rem; padding:.5rem .9rem; border:1px solid var(--border); color:var(--muted); text-decoration:none; transition:all .3s; }
.cnx-pagination a:hover, .cnx-pagination .current { border-color:var(--accent); color:var(--accent); background:rgba(0,212,255,.06); }

/* ═══════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════ */
#contact { padding:7rem 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:5rem; }
.ci { display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:1.8rem; }
.ci-icon { font-size:1.35rem; flex-shrink:0; margin-top:.18rem; }
.ci-label { font-family:var(--fm); font-size:.67rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.2rem; }
.ci-val { font-family:var(--fb); font-weight:600; color:var(--white); font-size:.95rem; }
.ci-val a { color:var(--accent); }
.ci-val a:hover { text-decoration:underline; }
.contact-form-card { background:var(--panel); border:1px solid var(--border); padding:2.4rem; position:relative; overflow:hidden; }
.contact-form-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--green)); }
.cnx-form { display:flex; flex-direction:column; gap:1.1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.fg { display:flex; flex-direction:column; gap:.36rem; }
.fl { font-family:var(--fm); font-size:.67rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.fi,.fs,.fta { background:var(--dark2); border:1px solid var(--border); color:var(--text); font-family:var(--fb); font-size:1rem; padding:.76rem 1rem; outline:none; transition:border-color .3s; width:100%; }
.fi:focus,.fs:focus,.fta:focus { border-color:var(--accent); }
.fta { resize:vertical; min-height:115px; }
.fs option { background:var(--dark2); }
.fsub { background:var(--accent); color:var(--black); font-family:var(--fb); font-weight:700; font-size:1rem; letter-spacing:.1em; text-transform:uppercase; padding:.92rem 2rem; border:none; cursor:pointer; width:100%; clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%); transition:background .3s; position:relative; overflow:hidden; }
.fsub::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); transform:translateX(-100%); transition:transform .5s; }
.fsub:hover::after { transform:translateX(100%); }
.fsub:hover { background:var(--green); }
.form-note { font-family:var(--fm); font-size:.64rem; color:var(--muted); text-align:center; margin-top:.2rem; }
.form-success { display:none; background:rgba(0,255,136,.09); border:1px solid rgba(0,255,136,.35); color:var(--green); padding:1rem; font-family:var(--fm); font-size:.8rem; text-align:center; }
.form-error { display:none; background:rgba(255,61,87,.09); border:1px solid rgba(255,61,87,.35); color:var(--red); padding:1rem; font-family:var(--fm); font-size:.8rem; text-align:center; }

/* CF7 overrides */
.wpcf7 input:not([type=submit]),.wpcf7 textarea,.wpcf7 select { background:var(--dark2)!important; border:1px solid var(--border)!important; color:var(--text)!important; font-family:var(--fb)!important; font-size:1rem!important; padding:.76rem 1rem!important; width:100%!important; outline:none!important; transition:border-color .3s!important; }
.wpcf7 input[type=submit] { background:var(--accent)!important; color:var(--black)!important; font-family:var(--fb)!important; font-weight:700!important; border:none!important; cursor:pointer!important; padding:.92rem 2rem!important; letter-spacing:.1em!important; text-transform:uppercase!important; }
.wpcf7-response-output { font-family:var(--fm)!important; font-size:.8rem!important; padding:.8rem!important; margin-top:.8rem!important; }

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
#footer { background:var(--dark); border-top:1px solid var(--border); padding:4rem 0 2rem; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand-logo { font-family:var(--fh); font-weight:800; font-size:1.15rem; color:var(--white); display:block; margin-bottom:.9rem; text-decoration:none; }
.footer-brand-logo em { color:var(--accent); font-style:normal; }
.footer-brand p { font-size:.87rem; color:var(--muted); line-height:1.75; max-width:270px; }
.footer-col-ttl { font-family:var(--fm); font-size:.66rem; color:var(--accent); letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.62rem; }
.footer-col ul li a { font-family:var(--fb); font-size:.9rem; color:var(--muted); text-decoration:none; transition:color .3s; }
.footer-col ul li a:hover { color:var(--accent); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:1.8rem; border-top:1px solid var(--border); flex-wrap:wrap; gap:.8rem; }
.footer-copy { font-family:var(--fm); font-size:.68rem; color:var(--muted); }
.footer-copy em { color:var(--accent); font-style:normal; }

/* ═══════════════════════════════════════════════════
   WORDPRESS ALIGNMENT & MISC
═══════════════════════════════════════════════════ */
.alignleft { float:left; margin:0 1.5rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1.5rem; }
.aligncenter { display:block; margin:0 auto 1rem; }
.wp-caption { max-width:100%; }
.screen-reader-text { position:absolute; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .cnx-wrap { padding:0 1.8rem; }
  .about-grid,.h1-grid,.contact-grid,.meth-grid { grid-template-columns:1fr; gap:3rem; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .ind-grid { grid-template-columns:repeat(2,1fr); }
  .why-grid { grid-template-columns:1fr 1fr; }
  .blog-grid { grid-template-columns:1fr 1fr; }
  .blog-no-posts { grid-column:span 2; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .cnx-archive-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  #cnx-nav { padding:1rem 1.5rem; }
  #cnx-nav .menu,.cnx-nav-menu,.cnx-nav-cta { display:none; }
  .cnx-burger { display:flex; }
  #hero { padding:8rem 1.5rem 4rem; }
  .cnx-wrap { padding:0 1.5rem; }
  .services-grid,.why-grid,.ind-grid { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-no-posts { grid-column:span 1; }
  .form-row { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr 1fr; gap:2rem; }
  .process-steps::before { display:none; }
  .h1-metrics { grid-template-columns:1fr; }
  .metric.feat { grid-column:span 1; }
  .vuln-grid { grid-template-columns:1fr; }
  .hero-stats { gap:1.8rem; }
  .footer-grid { grid-template-columns:1fr; }
  .blog-hdr { flex-direction:column; align-items:flex-start; }
  .cnx-archive-grid { grid-template-columns:1fr; }
  .cnx-post-page,.cnx-archive { padding:8rem 1.5rem 4rem; }
}
@media (max-width:480px) {
  .hero-h1 { font-size:2.8rem; }
  .profile-stats { grid-template-columns:1fr 1fr; }
  .h1-metrics { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════
   ENHANCED HERO — ADVANCED EFFECTS
═══════════════════════════════════════════════════ */
/* Glitch text effect on hero headline */
.hero-h1 .ln2 {
  position:relative;
  display:block;
  animation:glitch-color 8s infinite;
}
@keyframes glitch-color {
  0%,90%,100% { text-shadow:0 0 60px rgba(0,212,255,.35); }
  92% { text-shadow:-2px 0 rgba(255,61,87,.7), 2px 0 rgba(0,255,136,.7), 0 0 60px rgba(0,212,255,.35); }
  94% { text-shadow:2px 0 rgba(255,61,87,.7), -2px 0 rgba(0,255,136,.7), 0 0 60px rgba(0,212,255,.35); }
  96% { text-shadow:-2px 0 rgba(255,61,87,.7), 2px 0 rgba(0,255,136,.7), 0 0 60px rgba(0,212,255,.35); }
}

/* Hero corner decorations */
#hero::before, #hero::after {
  content:'';
  position:absolute;
  width:200px; height:200px;
  border:1px solid rgba(0,212,255,.07);
  pointer-events:none;
}
#hero::before { top:8rem; left:3rem; border-right:none; border-bottom:none; }
#hero::after  { bottom:4rem; right:3rem; border-left:none; border-top:none; }

/* Animated grid lines */
.hero-inner::before {
  content:'// SYSTEM: CYBERKNOCKS SECURE LABS v4.0 — ENCRYPTED';
  display:block;
  font-family:var(--fm); font-size:.63rem; color:rgba(0,212,255,.25);
  letter-spacing:.15em; margin-bottom:1.5rem;
  overflow:hidden; white-space:nowrap;
  animation:type-reveal 3s steps(50,end) forwards;
  max-width:0;
}
@keyframes type-reveal { to { max-width:100%; } }

/* Services section improvements */
.services-grid {
  border:1px solid var(--border);
  background:var(--border);
}

/* Better service card hover with left accent line */
.svc { border-left:3px solid transparent; transition:background .35s,transform .35s,border-color .35s; }
.svc:hover { border-left-color:var(--accent); }
.svc.feat { border-left:3px solid var(--green); }
.svc.feat:hover { border-left-color:var(--green); }

/* Pulsing effect on featured service icon */
.svc.feat .svc-icon { animation:pulse-glow 2.5s ease-in-out infinite; }
@keyframes pulse-glow {
  0%,100% { filter:drop-shadow(0 0 10px rgba(0,212,255,.35)); }
  50% { filter:drop-shadow(0 0 20px rgba(0,255,136,.6)); }
}

/* Services grid number improvements */
.svc-num { 
  font-family:var(--fm); font-size:.67rem; 
  color:var(--accent); 
  opacity:.3;
  letter-spacing:.1em; margin-bottom:1.3rem; 
}

/* Why grid improvements */
.why { position:relative; overflow:hidden; }
.why::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0); transition:transform .4s; transform-origin:center;
}
.why:hover::after { transform:scaleX(1); }

/* Industry cards improvement */
.ind { position:relative; overflow:hidden; }
.ind::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,212,255,.04),transparent);
  opacity:0; transition:opacity .3s;
}
.ind:hover::before { opacity:1; }

/* Metrics improvement */
.metric.feat {
  background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(0,212,255,.03));
}

/* Contact form enhancements */
.fi,.fs,.fta {
  border-radius:0;
  transition:border-color .3s, box-shadow .3s;
}
.fi:focus,.fs:focus,.fta:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(0,212,255,.2), inset 0 0 20px rgba(0,212,255,.02);
}

/* Mobile hero centering */
@media (max-width:768px) {
  .hero-inner::before { display:none; }
  #hero::before, #hero::after { width:80px; height:80px; }
}