/*
Theme Name: NG Cybersecurity
Theme URI: https://ngcybersecurity.io
Author: NG Cybersecurity
Description: Custom block theme for NG Cybersecurity. Lightweight, fast and SEO-ready.
Version: 1.0.4
Requires at least: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: ngcyber
*/

:root{--ng-radius:18px;--ng-ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
::selection{background:var(--wp--preset--color--mint);color:var(--wp--preset--color--ink)}
:focus-visible{outline:2px solid var(--wp--preset--color--signal);outline-offset:3px;border-radius:4px}
a{text-underline-offset:.18em;text-decoration-thickness:1px}
img{height:auto}

/* ---------- Header ---------- */
.ng-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--wp--preset--color--line)}
.ng-header .wp-block-navigation{font-size:var(--wp--preset--font-size--sm);font-weight:500}
.ng-header .wp-block-navigation a:hover{color:var(--wp--preset--color--signal)}
.ng-header .wp-block-navigation__submenu-container{border-radius:14px!important;border:1px solid var(--wp--preset--color--line)!important;box-shadow:0 18px 40px -18px rgba(10,22,40,.35);padding:.5rem!important;min-width:260px!important}
.ng-header .wp-block-navigation__submenu-container a{padding:.55rem .8rem!important;border-radius:10px}
.ng-header .wp-block-navigation__submenu-container a:hover{background:var(--wp--preset--color--mist)}
.ng-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none!important;color:var(--wp--preset--color--ink)!important;font-weight:700;letter-spacing:-.02em;font-size:1.05rem;white-space:nowrap}
.ng-logo svg{flex:none}
.ng-logo small{display:block;font-family:var(--wp--preset--font-family--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--slate);font-weight:500;margin-top:1px}
.ng-header .wp-block-button__link{padding:.6rem 1.1rem}

/* ---------- Eyebrow / tags ---------- */
.ng-eyebrow{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--signal);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.25rem!important}
.ng-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 22%,transparent)}
.ng-refs{display:flex;flex-wrap:wrap;gap:.5rem;padding:0!important;list-style:none}
.ng-refs li{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);padding:.3rem .65rem;border:1px solid var(--wp--preset--color--line);border-radius:999px;color:var(--wp--preset--color--slate);background:var(--wp--preset--color--white)}
.ng-dark .ng-refs li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:#b9c6d6}

/* ---------- Sections ---------- */
.ng-section{padding-top:var(--wp--preset--spacing--60)!important;padding-bottom:var(--wp--preset--spacing--60)!important}
.ng-mist{background:var(--wp--preset--color--mist)}
.ng-dark{background:var(--wp--preset--color--ink);color:#c9d4e1}
.ng-dark h1,.ng-dark h2,.ng-dark h3,.ng-dark h4,.ng-dark strong{color:#fff}
.ng-dark a:not(.wp-block-button__link){color:var(--wp--preset--color--mint)}
.ng-lead{font-size:var(--wp--preset--font-size--lg)!important;line-height:1.55;color:var(--wp--preset--color--slate);max-width:62ch}
.ng-dark .ng-lead{color:#b9c6d6}
.ng-center{text-align:center}.ng-center .ng-lead{margin-left:auto;margin-right:auto}

/* ---------- Hero ---------- */
.ng-hero{position:relative;overflow:hidden;background:var(--wp--preset--color--ink);color:#c9d4e1;padding-top:clamp(4.5rem,10vw,8.5rem)!important;padding-bottom:clamp(4rem,9vw,7.5rem)!important;isolation:isolate}
.ng-hero::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000 30%,transparent 75%)}
.ng-hero::after{content:"";position:absolute;z-index:-1;width:900px;height:900px;right:-260px;top:-420px;background:radial-gradient(circle,rgba(47,91,234,.42),rgba(0,179,134,.16) 45%,transparent 70%);filter:blur(10px);animation:ng-float 14s var(--ng-ease) infinite alternate}
@keyframes ng-float{to{transform:translate(-60px,50px) scale(1.06)}}
.ng-hero h1{color:#fff;max-width:17ch;margin-top:.6rem!important}
.ng-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--wp--preset--color--mint),#8fb1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ng-hero .ng-lead{color:#b9c6d6;font-size:var(--wp--preset--font-size--lg)!important}
.ng-hero .ng-eyebrow{color:var(--wp--preset--color--mint)}
.ng-hero .wp-block-button__link{background:var(--wp--preset--color--mint);color:var(--wp--preset--color--ink)}
.ng-hero .wp-block-button__link:hover{background:#fff}
.ng-hero .is-style-outline .wp-block-button__link,.ng-dark .is-style-outline .wp-block-button__link{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.ng-hero .is-style-outline .wp-block-button__link:hover,.ng-dark .is-style-outline .wp-block-button__link:hover{border-color:var(--wp--preset--color--mint);color:var(--wp--preset--color--mint)}
.ng-hero--page h1{font-size:var(--wp--preset--font-size--xxl)!important;max-width:22ch}

/* Hero stats */
.ng-stats{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0!important;margin-top:clamp(2.5rem,6vw,4.5rem)!important;border-top:1px solid rgba(255,255,255,.12)}
.ng-stats>*{margin:0!important;padding:1.4rem 1.2rem 0 0}
.ng-stats p{margin:0!important}
.ng-stats .ng-num{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:650;color:#fff;letter-spacing:-.03em;line-height:1}
.ng-stats .ng-label{font-size:var(--wp--preset--font-size--sm);color:#8ea0b6;margin-top:.4rem!important}
@media(max-width:700px){.ng-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Trust strip ---------- */
.ng-trust{border-bottom:1px solid var(--wp--preset--color--line);padding-top:1.4rem!important;padding-bottom:1.4rem!important}
.ng-trust ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;list-style:none;padding:0!important;margin:0!important}
.ng-trust li{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--slate);display:flex;align-items:center;gap:.5rem}
.ng-trust li::before{content:"";width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--wp--preset--color--signal),var(--wp--preset--color--eu));mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5.1-5.1L12.7 5z'/%3E%3C/svg%3E") center/100% no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5.1-5.1L12.7 5z'/%3E%3C/svg%3E") center/100% no-repeat}

/* ---------- Cards ---------- */
.ng-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.25rem!important}
.ng-grid>*{margin:0!important}
.ng-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.ng-card{position:relative;background:var(--wp--preset--color--white);border:1px solid var(--wp--preset--color--line);border-radius:var(--ng-radius);padding:clamp(1.4rem,3vw,2rem)!important;transition:transform .35s var(--ng-ease),box-shadow .35s var(--ng-ease),border-color .35s}
.ng-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(10,22,40,.35);border-color:color-mix(in srgb,var(--wp--preset--color--signal) 45%,var(--wp--preset--color--line))}
.ng-card h3{margin-top:.2rem!important}
.ng-card p{color:var(--wp--preset--color--slate)}
.ng-card .ng-k{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);color:var(--wp--preset--color--signal);letter-spacing:.1em}
.ng-card a.ng-more,.ng-more a{font-weight:600;text-decoration:none;color:var(--wp--preset--color--ink)}
.ng-more a::after{content:" →";transition:margin .25s}
.ng-more a:hover::after{margin-left:.25rem}
.ng-card--link{cursor:pointer}
.ng-card--feature{background:linear-gradient(160deg,var(--wp--preset--color--navy),var(--wp--preset--color--ink));border-color:transparent;color:#c9d4e1}
.ng-card--feature h3,.ng-card--feature .ng-more a{color:#fff}
.ng-card--feature p{color:#b9c6d6}
.ng-dark .ng-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.1)}
.ng-dark .ng-card p{color:#b9c6d6}

/* Icon chip */
.ng-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--wp--preset--color--mist);margin-bottom:.4rem!important}
.ng-ico svg{width:22px;height:22px;stroke:var(--wp--preset--color--navy)}

/* ---------- Checklist ---------- */
.ng-check{list-style:none;padding:0!important}
.ng-check li{position:relative;padding-left:1.9rem;margin:.55rem 0}
.ng-check li::before{content:"";position:absolute;left:0;top:.28em;width:1.15rem;height:1.15rem;border-radius:50%;background:color-mix(in srgb,var(--wp--preset--color--signal) 18%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300B386'%3E%3Cpath d='M6.5 11.2 3.3 8l1.1-1.1 2.1 2.1 5.1-5.1L12.7 5z'/%3E%3C/svg%3E") center/80% no-repeat}

/* ---------- Steps ---------- */
.ng-steps{counter-reset:ng;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1.25rem!important}
.ng-steps>*{counter-increment:ng;position:relative;margin:0!important;padding:1.6rem 0 0!important;border-top:2px solid var(--wp--preset--color--line)}
.ng-steps>*::before{content:"0" counter(ng);font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);color:var(--wp--preset--color--signal);letter-spacing:.1em;position:absolute;top:.5rem}
.ng-steps>*::after{content:"";position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--wp--preset--color--signal)}
.ng-steps h3{margin-top:.6rem!important}
.ng-steps p{color:var(--wp--preset--color--slate);font-size:var(--wp--preset--font-size--sm)}
.ng-dark .ng-steps>*{border-color:rgba(255,255,255,.14)}.ng-dark .ng-steps p{color:#b9c6d6}

/* ---------- Split ---------- */
.ng-split{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem)!important;align-items:start}
.ng-split>*{margin:0!important}
.ng-split--sticky>*:first-child{position:sticky;top:110px}
@media(max-width:860px){.ng-split{grid-template-columns:1fr}.ng-split--sticky>*:first-child{position:static}}

/* ---------- Callout / table ---------- */
.ng-callout{border-left:3px solid var(--wp--preset--color--signal);background:var(--wp--preset--color--mist);padding:1.2rem 1.4rem!important;border-radius:0 12px 12px 0}
.ng-callout p{margin:0!important}
.wp-block-table table{border-collapse:separate;border-spacing:0;border:1px solid var(--wp--preset--color--line);border-radius:14px;overflow:hidden;font-size:var(--wp--preset--font-size--sm)}
.wp-block-table th{background:var(--wp--preset--color--mist);text-align:left;font-weight:600}
.wp-block-table td,.wp-block-table th{border:0;border-bottom:1px solid var(--wp--preset--color--line);padding:.85rem 1rem}
.wp-block-table tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
.ng-faq .wp-block-details{border-bottom:1px solid var(--wp--preset--color--line);padding:1.15rem 0;margin:0!important}
.ng-faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:var(--wp--preset--font-size--lg);display:flex;justify-content:space-between;gap:1rem;letter-spacing:-.01em}
.ng-faq summary::-webkit-details-marker{display:none}
.ng-faq summary::after{content:"+";font-weight:400;color:var(--wp--preset--color--signal);font-size:1.5rem;line-height:1;transition:transform .3s var(--ng-ease)}
.ng-faq details[open] summary::after{transform:rotate(45deg)}
.ng-faq details p{color:var(--wp--preset--color--slate);margin-top:.8rem}

/* ---------- CTA band ---------- */
.ng-cta{position:relative;overflow:hidden;isolation:isolate}
.ng-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 85% 0%,rgba(95,242,196,.18),transparent 70%),radial-gradient(500px 300px at 0% 100%,rgba(47,91,234,.3),transparent 70%)}
.ng-cta .wp-block-button__link{background:var(--wp--preset--color--mint);color:var(--wp--preset--color--ink)}
.ng-cta .wp-block-button__link:hover{background:#fff}

/* ---------- Case ---------- */
.ng-case dl,.ng-case .ng-rows{margin:0}
.ng-case .ng-row{display:grid;grid-template-columns:110px 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--wp--preset--color--line)}
.ng-case .ng-row strong{font-family:var(--wp--preset--font-family--mono);font-size:var(--wp--preset--font-size--xs);text-transform:uppercase;letter-spacing:.1em;color:var(--wp--preset--color--signal);font-weight:500}

/* ---------- Footer ---------- */
.ng-footer{background:var(--wp--preset--color--ink);color:#8ea0b6;font-size:var(--wp--preset--font-size--sm)}
.ng-footer h4,.ng-footer .ng-logo{color:#fff!important}
.ng-footer h4{font-size:var(--wp--preset--font-size--xs);font-family:var(--wp--preset--font-family--mono);text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.ng-footer a{color:#c9d4e1;text-decoration:none}
.ng-footer a:hover{color:var(--wp--preset--color--mint)}
.ng-footer ul{list-style:none;padding:0!important}
.ng-footer li{margin:.45rem 0}
.ng-footer .ng-logo small{color:#8ea0b6}
.ng-footer-bottom{border-top:1px solid rgba(255,255,255,.1)}

/* ---------- Blog ---------- */
.ng-post-card{border:1px solid var(--wp--preset--color--line);border-radius:var(--ng-radius);padding:1.6rem!important;height:100%;transition:transform .35s var(--ng-ease),box-shadow .35s}
.ng-post-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(10,22,40,.35)}
.ng-post-card .wp-block-post-title a{text-decoration:none;color:var(--wp--preset--color--ink)}
.ng-article .wp-block-post-content>*{max-width:760px}
.ng-article .wp-block-post-content h2{font-size:var(--wp--preset--font-size--xl);margin-top:2.6rem}
.ng-article .wp-block-post-content h3{margin-top:1.8rem}

/* ---------- Forms (WPForms) ---------- */
.ng-form .wpforms-container input,.ng-form .wpforms-container textarea,.ng-form .wpforms-container select{border-radius:10px!important;border:1px solid var(--wp--preset--color--line)!important;padding:.75rem .9rem!important;font:inherit!important}
.ng-form .wpforms-submit{background:var(--wp--preset--color--ink)!important;color:#fff!important;border-radius:999px!important;padding:.85rem 1.6rem!important;font-weight:600!important;border:0!important}
.ng-form .wpforms-submit:hover{background:var(--wp--preset--color--signal)!important;color:var(--wp--preset--color--ink)!important}

/* ---------- Reveal on scroll (CSS only) ---------- */
@supports (animation-timeline:view()){
  .ng-grid>*,.ng-steps>*,.ng-reveal{animation:ng-in linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@keyframes ng-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Full-width sections stack without gaps */
.wp-block-post-content>.alignfull{margin-top:0!important;margin-bottom:0!important}
main.wp-block-group{margin-top:0}

.ng-hero .ng-refs{margin-top:1.6rem!important}
.ng-hero .ng-refs li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);color:#b9c6d6}
.ng-dark .wp-block-table table{border-color:rgba(255,255,255,.14)}
.ng-dark .wp-block-table th{background:rgba(255,255,255,.06);color:#fff}
.ng-dark .wp-block-table td,.ng-dark .wp-block-table th{border-color:rgba(255,255,255,.12)}

.ng-header .wp-block-button__link{white-space:nowrap}
@media(max-width:600px){.ng-header .wp-block-buttons{display:none}.ng-logo small{display:none}.ng-hero h1{font-size:2.3rem!important}}

.ng-form .wpforms-field{padding-left:0!important;padding-right:0!important}
.ng-form .wpforms-field-label{font-weight:600!important;font-size:.9rem!important}
.ng-form .wpforms-field-checkbox label{font-size:.85rem!important;line-height:1.5}