/*

Theme Name: Secnuro

Author: Secnuro

Description: Custom cybersecurity theme (OT/IT/SOC)

Version: 1.0

Text Domain: secnuro

*/



:root{

  --bg:#0D1B2A;

  --bg2:#0B1724;

  --card:#0F2236;

  --text:#EAF2FF;

  --muted:#B9C7DD;

  --accent:#00BFFF;

  --accent2:#2EE6A6;

  --white:#ffffff;

  --soft:#F5F7FB;

  --shadow: 0 10px 25px rgba(0,0,0,.25);

  --radius: 18px;

}



*{box-sizing:border-box}

body{

  margin:0;

  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color:#101828;

  background: var(--soft);

}

a{color:inherit;text-decoration:none}

img{max-width:100%;height:auto;display:block}



.container{width:min(1140px, 92%); margin:0 auto;}

.btn{

  display:inline-flex; align-items:center; justify-content:center;

  gap:.5rem; padding:12px 18px; border-radius:999px;

  font-weight:600; border:1px solid transparent;

  transition:transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;

}

.btn:hover{transform:translateY(-1px); opacity:.96}

.btn-primary{background:var(--accent); color:var(--white)}

.btn-ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,.35)}



.site-header{

  background: linear-gradient(180deg, var(--bg), var(--bg2));

  color:var(--white);

  position:sticky; top:0; z-index:50;

  border-bottom:1px solid rgba(255,255,255,.08);

}

.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}

.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}

.brand-badge{

  width:34px; height:34px; border-radius:10px;

  background: radial-gradient(circle at 30% 30%, var(--accent), #2e6bff);

  box-shadow: 0 10px 18px rgba(0,191,255,.18);

}

.nav ul{list-style:none; padding:0; margin:0; display:flex; gap:16px; flex-wrap:wrap}

.nav a{color:rgba(255,255,255,.92); font-weight:500}

.nav a:hover{color:var(--white)}



.hero{

  background: radial-gradient(1200px 500px at 20% 10%, rgba(0,191,255,.25), transparent 60%),

              radial-gradient(900px 450px at 90% 20%, rgba(46,230,166,.18), transparent 60%),

              linear-gradient(180deg, var(--bg), var(--bg2));

  color:var(--white);

  padding:80px 0 70px;

}

.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:34px; align-items:center}

.kicker{

  color:rgba(255,255,255,.78);

  font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:.82rem;

}

.h1{

  margin:12px 0 12px;

  font-size: clamp(2rem, 4.2vw, 3.1rem);

  line-height:1.12;

  text-transform:uppercase;

}

.lead{color:rgba(255,255,255,.82); font-size:1.05rem; line-height:1.65; margin:0 0 22px}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

.hero-card{

  background: rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.10);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  overflow:hidden;

}

.hero-card img{width:100%; height:320px; object-fit:cover}

.hero-card .cap{padding:14px 16px; color:rgba(255,255,255,.85); font-size:.95rem}



.section{padding:72px 0}

.section h2{

  margin:0 0 12px; font-size: clamp(1.4rem, 2.5vw, 2rem);

}

.section p.section-sub{margin:0 0 26px; color:#41536b}



.cards{

  display:grid; grid-template-columns: repeat(4, 1fr);

  gap:16px;

}

.card{

  background: var(--white);

  border-radius: var(--radius);

  box-shadow: 0 10px 25px rgba(16,24,40,.08);

  padding:18px;

  border:1px solid rgba(16,24,40,.06);

}

.card .icon{

  width:44px; height:44px; border-radius:14px;

  background: rgba(0,191,255,.12);

  display:grid; place-items:center;

  margin-bottom:12px;

}

.card h3{margin:0 0 6px; font-size:1.05rem}

.card p{margin:0; color:#52667f; font-size:.95rem; line-height:1.55}



.posts-grid{

  display:grid; grid-template-columns: repeat(3, 1fr);

  gap:16px;

}

.post-card{

  background: var(--white);

  border-radius: var(--radius);

  overflow:hidden;

  border:1px solid rgba(16,24,40,.06);

  box-shadow: 0 10px 25px rgba(16,24,40,.08);

}

.post-card .thumb{height:180px; background:#dfe7f6}

.post-card .thumb img{width:100%; height:100%; object-fit:cover}

.post-card .body{padding:16px}

.post-card .meta{color:#6b7f99; font-size:.82rem; margin-bottom:8px}

.post-card h3{margin:0 0 10px; font-size:1.05rem}

.post-card p{margin:0; color:#52667f; font-size:.95rem; line-height:1.55}



.split{

  display:grid; grid-template-columns: 1fr 1fr; gap:22px; align-items:center;

}

.panel{

  background: var(--white);

  border-radius: var(--radius);

  box-shadow: 0 10px 25px rgba(16,24,40,.08);

  border:1px solid rgba(16,24,40,.06);

  padding:22px;

}



.newsletter{

  background: linear-gradient(180deg, var(--bg), var(--bg2));

  color:var(--white);

  border-radius: var(--radius);

  padding:34px;

  box-shadow: var(--shadow);

  overflow:hidden;

  position:relative;

}

.newsletter p{color:rgba(255,255,255,.82); margin:0 0 18px}

.news-form{display:flex; gap:12px; flex-wrap:wrap}

.news-form input{

  flex:1; min-width:220px;

  padding:12px 14px; border-radius:999px;

  border:1px solid rgba(255,255,255,.22);

  background: rgba(255,255,255,.08);

  color:var(--white);

  outline:none;

}

.news-form input::placeholder{color:rgba(255,255,255,.65)}

.news-form button{cursor:pointer}



.site-footer{

  margin-top:70px;

  background: linear-gradient(180deg, var(--bg), var(--bg2));

  color:rgba(255,255,255,.9);

  padding:46px 0;

}

.footer-grid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:16px}

.footer-grid h4{margin:0 0 10px; color:var(--white)}

.footer-grid a{color:rgba(255,255,255,.8)}

.footer-grid a:hover{color:var(--white)}

.small{font-size:.9rem; color:rgba(255,255,255,.75)}

hr.footer-line{border:none; border-top:1px solid rgba(255,255,255,.10); margin:18px 0}



@media (max-width: 980px){

  .hero-grid{grid-template-columns: 1fr; }

  .cards{grid-template-columns: repeat(2, 1fr)}

  .posts-grid{grid-template-columns: 1fr}

  .split{grid-template-columns: 1fr}

  .footer-grid{grid-template-columns: 1fr}

}