/* =====================================================================
   Pagina Securitate Web (securitate-web.php) + ilustrația (includes/illus/security.php)
   ===================================================================== */
.hero--sec { background: radial-gradient(1000px 600px at 85% 10%, rgba(124,58,237,.32), transparent 62%), radial-gradient(800px 520px at -5% 20%, rgba(225,29,72,.2), transparent 60%), linear-gradient(180deg, #0d0b16, var(--bg)); }
.hero--sec h1 .grad { background: linear-gradient(90deg, #a78bfa, #e11d48); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Ilustrația: scut + inele + atacuri oprite --- */
.scx { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / .95; margin-left: auto; }
.scx__glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.55), rgba(225,29,72,.22) 55%, transparent 72%); filter: blur(40px); animation: wdxPulse 5s ease-in-out infinite; }
.scx__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(167,139,250,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(167,139,250,.08) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%); mask-image: radial-gradient(circle, #000 25%, transparent 68%); }
.scx__hex { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: linear-gradient(135deg, rgba(167,139,250,.35), rgba(225,29,72,.18)); animation: stxSpin 24s linear infinite; }
.scx__hex::after { content: ''; position: absolute; inset: 2px; clip-path: inherit; background: #110f1c; }
.scx__hex--1 { width: 58%; margin: -29% 0 0 -29%; }
.scx__hex--2 { width: 44%; margin: -22% 0 0 -22%; animation-direction: reverse; animation-duration: 16s; background: linear-gradient(135deg, rgba(225,29,72,.5), rgba(167,139,250,.3)); }
.scx__hex--2::after { background: #15122a; }
.scx__ring { position: absolute; left: 50%; top: 50%; width: 76%; aspect-ratio: 1; margin: -38% 0 0 -38%; border-radius: 50%; border: 2px solid rgba(167,139,250,.45); box-shadow: 0 0 30px rgba(124,58,237,.35), inset 0 0 30px rgba(124,58,237,.25); animation: stxSpin 20s linear infinite; }
.scx__ring span { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 16px #a78bfa; }
.scx__ring--2 { width: 92%; margin: -46% 0 0 -46%; border: 1.5px dashed rgba(255,255,255,.14); box-shadow: none; animation-duration: 40s; animation-direction: reverse; }
.scx__ring--2 span { background: #fb7185; box-shadow: 0 0 16px #e11d48; top: auto; bottom: -6px; }
.scx__core { position: absolute; left: 37%; top: 33%; width: 26%; filter: drop-shadow(0 18px 40px rgba(124,58,237,.7)); animation: wdxFloat 5s ease-in-out infinite; }
.scx__shield { width: 100%; height: auto; overflow: visible; }
.scx__check { stroke-dasharray: 80; stroke-dashoffset: 80; animation: scxCheck 4s ease-in-out infinite; }
@keyframes scxCheck { 0%, 10% { stroke-dashoffset: 80; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
.scx__field { position: absolute; inset: 0; pointer-events: none; }
.scx__p { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; }
.scx__p--bad { background: #fb4d6d; box-shadow: 0 0 12px #e11d48, 0 0 3px #fff; animation: scxIn 1.5s cubic-bezier(.4,0,.8,.6) forwards; }
.scx__p--good { width: 7px; height: 7px; background: #4ade80; box-shadow: 0 0 10px #22c55e; animation: scxPass 2.2s linear forwards; }
@keyframes scxIn { from { transform: rotate(var(--a)) translateY(-62cqw); opacity: 0; } 15% { opacity: 1; } to { transform: rotate(var(--a)) translateY(-38cqw); opacity: 1; } }
@keyframes scxPass { from { transform: rotate(var(--a)) translateY(-62cqw) scale(.8); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } to { transform: rotate(var(--a)) translateY(-6cqw) scale(.5); opacity: 0; } }
.scx { container-type: inline-size; }
.scx__boom { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px solid #fb7185; transform: rotate(var(--a)) translateY(-38cqw); animation: scxBoom .6s ease-out forwards; }
@keyframes scxBoom { from { opacity: 1; scale: .3; } to { opacity: 0; scale: 1.8; } }
.scx__server { position: absolute; right: 2%; bottom: 6%; z-index: 3; display: grid; gap: 4px; width: 112px; padding: 10px; border-radius: 14px; background: rgba(17,16,26,.94); border: 1px solid rgba(74,222,128,.35); box-shadow: 0 18px 40px -14px rgba(0,0,0,.8), 0 0 24px -8px rgba(34,197,94,.5); }
.scx__server i { height: 9px; border-radius: 4px; background: #23212f; position: relative; }
.scx__server i::after { content: ''; position: absolute; right: 5px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; animation: rsrvBlinkS 1.4s ease-in-out infinite; }
.scx__server i:nth-child(2)::after { animation-delay: .4s; } .scx__server i:nth-child(3)::after { animation-delay: .8s; }
@keyframes rsrvBlinkS { 50% { opacity: .2; } }
.scx__server b { margin-top: 3px; font: 700 11px/1 var(--display); color: #86efac; text-align: center; }
.scx__chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; border-radius: 14px; background: rgba(255,255,255,.96); color: #12121a; box-shadow: 0 16px 36px -12px rgba(0,0,0,.7); animation: wdxFloat 6s ease-in-out infinite; }
.scx__chip > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #e11d48); }
.scx__chip > span.scx__ok { background: linear-gradient(135deg, #22c55e, #16a34a); }
.scx__chip b { display: block; font: 700 13px/1.2 var(--display); }
.scx__chip small { font-size: 11px; color: #5c5d70; }
.scx__chip--waf { left: 0; top: 6%; }
.scx__chip--ddos { right: 0; top: 14%; animation-delay: -2s; }
.scx__chip--bk { left: 2%; bottom: 10%; animation-delay: -4s; }
.scx__counter { position: absolute; left: 50%; top: 0; z-index: 4; transform: translateX(-50%); text-align: center; padding: 7px 14px; border-radius: 12px; background: rgba(17,16,26,.85); border: 1px solid rgba(251,113,133,.35); }
.scx__counter small { display: block; font-size: 10.5px; color: #c4c3d2; }
.scx__counter b { font: 800 20px/1.1 var(--display); color: #fb7185; }
.scx__counter em { display: block; font-style: normal; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #77768a; }

/* --- Cifre --- */
.sec-stats { background: var(--bg); padding: 0 0 70px; margin-top: -10px; }
.sec-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sec-stats__item { padding: 22px; border-radius: 18px; text-align: center; background: linear-gradient(160deg, rgba(167,139,250,.12), rgba(255,255,255,.02)); border: 1px solid rgba(167,139,250,.2); }
.sec-stats__item b { display: block; font: 800 clamp(26px, 2.8vw, 36px)/1.1 var(--display); background: linear-gradient(180deg, #fff, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-stats__item span { color: var(--muted); font-size: 14px; }

/* --- Monitor --- */
.sec-live { overflow: hidden; }
.sec-live__bg { position: absolute; inset: 0; background: radial-gradient(700px 400px at 90% 50%, rgba(225,29,72,.16), transparent 60%), radial-gradient(700px 500px at 0% 0%, rgba(124,58,237,.2), transparent 60%); }
.sec-live__grid { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.sec-live h2 { margin: 18px 0; }
.sec-chip { color: #fda4af; border-color: rgba(225,29,72,.4); background: rgba(225,29,72,.12); }
.dot--red { background: #fb4d6d; animation: pulseRed 1.6s infinite; }
@keyframes pulseRed { 70% { box-shadow: 0 0 0 8px rgba(251,77,109,0); } 0% { box-shadow: 0 0 0 0 rgba(251,77,109,.6); } }
.sec-live__meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.sec-live__meters > div { padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.sec-live__meters small { display: block; color: var(--muted); font-size: 12.5px; }
.sec-live__meters b { font: 800 24px/1.2 var(--display); }
.sec-live__meters b.is-red { color: #fb7185; }
.sec-live__meters b.is-green { color: #4ade80; }
.sec-note { margin-top: 12px; font-size: 12px; color: #6f6e80; }
.sec-term { border-radius: 20px; overflow: hidden; background: #0b0a12; border: 1px solid rgba(167,139,250,.25); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 60px -30px rgba(124,58,237,.7); }
.sec-term__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 12.5px ui-monospace, Consolas, monospace; color: var(--muted); }
.sec-term__body { height: 330px; overflow: hidden; padding: 10px 16px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; display: flex; flex-direction: column; justify-content: flex-end; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
.sec-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.06); animation: secRow .45s ease-out; }
@keyframes secRow { from { opacity: 0; transform: translateY(10px); background: rgba(251,77,109,.12); } }
.sec-row time { color: #6f6e80; }
.sec-row span { color: #e4e3ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-row span small { color: #8e8da0; }
.sec-row code { color: #c4b5fd; font-family: inherit; }
.sec-row em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px; color: #fff; background: #e11d48; letter-spacing: .04em; }
.sec-row em.ok { background: #16a34a; }
.sec-term__foot { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.sec-term__foot span { display: inline-flex; align-items: center; gap: 6px; }
.sec-term__foot .ico { color: #4ade80; }

/* --- Straturi --- */
.sec-layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sec-layer { position: relative; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--l-line); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.sec-layer::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tone); }
.sec-layer:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(18,18,26,.3); }
.sec-layer__top { display: flex; align-items: center; justify-content: space-between; }
.sec-layer__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--tone); box-shadow: 0 10px 22px -10px var(--tone-s); }
.sec-layer__top em { font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; color: var(--tone-d); background: var(--tone-l); }
.sec-layer h3 { margin: 18px 0 8px; font-size: 18px; }
.sec-layer p { color: var(--ink-2); font-size: 14.5px; }
.sec-layer__ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: #15803d; }
.sec-tone--cyan   { --tone: linear-gradient(135deg, #22d3ee, #0284c7); --tone-s: rgba(14,165,233,.8); --tone-d: #0369a1; --tone-l: #e0f2fe; }
.sec-tone--violet { --tone: linear-gradient(135deg, #a78bfa, #7c3aed); --tone-s: rgba(124,58,237,.8); --tone-d: #6d28d9; --tone-l: #ede9fe; }
.sec-tone--red    { --tone: linear-gradient(135deg, #fb7185, #e11d48); --tone-s: rgba(225,29,72,.8); --tone-d: #be123c; --tone-l: #ffe4e6; }
.sec-tone--amber  { --tone: linear-gradient(135deg, #fbbf24, #f97316); --tone-s: rgba(249,115,22,.8); --tone-d: #c2410c; --tone-l: #ffedd5; }
.sec-tone--pink   { --tone: linear-gradient(135deg, #f472b6, #db2777); --tone-s: rgba(219,39,119,.8); --tone-d: #be185d; --tone-l: #fce7f3; }
.sec-tone--green  { --tone: linear-gradient(135deg, #4ade80, #16a34a); --tone-s: rgba(22,163,74,.8); --tone-d: #15803d; --tone-l: #dcfce7; }

/* --- Atacuri oprite --- */
.sec-att { background: radial-gradient(800px 400px at 50% 0%, rgba(124,58,237,.18), transparent 60%), var(--bg); }
.sec-att__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sec-att__item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.sec-att__item:hover { border-color: rgba(251,113,133,.45); background: rgba(251,113,133,.06); }
.sec-att__x { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fb7185; background: rgba(225,29,72,.14); }
.sec-att__item b { display: block; font: 700 15px/1.25 var(--display); }
.sec-att__item div span { font-size: 13px; color: var(--muted); }
.sec-att__item em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 8px; color: #fff; background: var(--tone); white-space: nowrap; }
.sec-att__status { font: 800 11px/1 var(--display); letter-spacing: .08em; color: #4ade80; padding: 5px 9px; border-radius: 8px; border: 1px solid rgba(74,222,128,.4); }

/* --- Seif cu copii de siguranță --- */
.vault { padding: 22px; border-radius: 24px; background: #0f0e16; color: #fff; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -36px rgba(18,18,26,.8); }
.vault__head { display: flex; align-items: center; gap: 12px; }
.vault__head > div { flex: 1; }
.vault__head b { display: block; font: 700 16px/1.2 var(--display); }
.vault__head small { color: var(--muted); font-size: 12.5px; }
.vault__lock { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 10px 24px -8px rgba(34,197,94,.8); }
.vault__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 22px 0; }
.vault__day { text-align: center; }
.vault__bar { position: relative; display: block; height: 70px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.vault__bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, #4ade80, #16a34a); transform-origin: bottom; animation: vaultGrow 1.2s calc(var(--i) * .12s) cubic-bezier(.2,.8,.2,1) both; }
@keyframes vaultGrow { from { transform: scaleY(0); } }
.vault__day small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.vault__day em { font-style: normal; font-size: 12px; color: #4ade80; }
.vault__files { display: grid; gap: 8px; }
.vault__file { display: grid; grid-template-columns: auto 1fr auto 70px auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); font-size: 13.5px; }
.vault__file > span:first-child { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(167,139,250,.16); color: #c4b5fd; }
.vault__file small { color: var(--muted); }
.vault__file > .ico:last-child { color: #4ade80; }
.vault__prog { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.vault__prog i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a78bfa, #22c55e); animation: vaultProg 3s calc(var(--i) * .5s) ease-in-out infinite; }
@keyframes vaultProg { 0% { width: 0; } 60%, 100% { width: 100%; } }
.vault__restore { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #86efac; background: rgba(34,197,94,.08); border: 1px dashed rgba(34,197,94,.35); }
.sec-data__list { margin-top: 22px; }

/* --- Îndemn final --- */
.sec-cta { overflow: hidden; }
.sec-cta__box { position: relative; max-width: 760px; text-align: center; }
.sec-cta__ic { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #e11d48); box-shadow: 0 20px 50px -14px rgba(124,58,237,.9); animation: wdxFloat 5s ease-in-out infinite; }
.sec-cta__box h2 { margin-bottom: 12px; }

@media (max-width: 980px) {
  .scx { margin: 0 auto; }
  .sec-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .sec-live__grid { grid-template-columns: 1fr; gap: 36px; }
  .sec-layers { grid-template-columns: repeat(2, 1fr); }
  .sec-att__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sec-layers { grid-template-columns: 1fr; }
  .sec-live__meters { grid-template-columns: 1fr 1fr; }
  .sec-row { grid-template-columns: 1fr auto; }
  .sec-row time, .sec-row code { display: none; }
  .sec-att__item { grid-template-columns: auto 1fr; }
  .sec-att__item em, .sec-att__status { grid-column: 2; justify-self: start; }
  .scx__chip { padding: 7px 10px 7px 7px; }
  .scx__chip small { display: none; }
  .scx__server { width: 92px; }
  .vault__file { grid-template-columns: auto 1fr auto; }
  .vault__prog, .vault__file > .ico:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scx__check { stroke-dashoffset: 0; } }