:root {
  --ink: #111111;
  --navy: #101a38;
  --navy-2: #151f42;
  --violet: #684df4;
  --violet-dark: #5538e9;
  --paper: #ffffff;
  --soft: #f5f6fa;
  --line: #e7e8ef;
  --muted: #737887;
  --admin-bg: #f4f5f9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Barlow", "Segoe UI", Arial, sans-serif; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* Public site */
.siteShell { min-height: 100vh; overflow: hidden; background: #fff; }
.siteHeader { height: 108px; background: #111; color: #fff; position: relative; z-index: 30; }
.navWrap { width: min(1120px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand img { display: block; width: 159px; height: auto; }
.siteNav { display: flex; align-items: center; gap: 29px; font-size: 14px; font-weight: 700; }
.siteNav a { color: #fff; opacity: .82; position: relative; transition: opacity .2s ease, color .2s ease; }
.siteNav a::after { content: ""; position: absolute; height: 2px; left: 0; right: 100%; bottom: -10px; background: var(--violet); transition: right .2s ease; }
.siteNav a:hover { opacity: 1; }
.siteNav a:hover::after { right: 0; }
.menuButton { display: none; border: 0; background: transparent; padding: 8px; }
.menuButton span { display: block; width: 25px; height: 2px; background: #fff; margin: 5px; }

.pageHero { min-height: 430px; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: hidden; }
.pageHero::before { content: ""; position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, transparent, #000 50%, transparent); }
.heroGlow { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: var(--violet); filter: blur(110px); opacity: .14; z-index: -1; }
.heroGlowOne { left: -140px; top: -80px; }
.heroGlowTwo { right: -170px; bottom: -120px; }
.eyebrow { margin: 0 0 18px; color: #bdb2ff; font-size: 11px; letter-spacing: .2em; font-weight: 800; }
.pageHero h1 { margin: 0; font-size: clamp(48px, 6vw, 74px); line-height: 1; letter-spacing: -.035em; font-weight: 800; }
.breadcrumbs { margin-top: 28px; display: flex; gap: 13px; align-items: center; color: rgba(255,255,255,.73); font-size: 14px; }
.breadcrumbs b { color: var(--violet); font-size: 19px; }

.blogSection { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 108px 0 118px; }
.sectionIntro { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 32px; }
.darkEyebrow { color: var(--violet); margin-bottom: 12px; }
.sectionIntro h2, .missionSection h2 { margin: 0; color: var(--navy); font-size: clamp(30px, 4vw, 45px); line-height: 1.12; letter-spacing: -.035em; max-width: 690px; }
.searchBox { width: 270px; height: 49px; border: 1px solid var(--line); display: flex; align-items: center; border-radius: 5px; padding: 0 15px; color: var(--muted); box-shadow: 0 8px 26px rgba(16, 26, 56, .04); }
.searchBox span { font-size: 25px; line-height: 0; transform: rotate(-15deg); }
.searchBox input { border: 0; outline: 0; width: 100%; min-width: 0; padding-left: 10px; color: var(--navy); background: transparent; }
.categoryBar { border-top: 1px solid var(--line); padding-top: 25px; display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 42px; }
.categoryChip { border: 1px solid var(--line); color: #696d79; background: #fff; padding: 9px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.categoryChip:hover, .categoryChip.active { color: #fff; background: var(--violet); border-color: var(--violet); }
.postGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.postCard { background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 12px 36px rgba(8, 14, 28, .09); border: 1px solid #eeeff4; animation: riseIn .55s both; transition: transform .25s ease, box-shadow .25s ease; }
.postCard:nth-child(even) { margin-top: 48px; }
.postCard:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(8,14,28,.14); }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.postImage, .modalImage, .miniThumb, .tableThumb, .coverPreview, .mediaImage { background-image: url('../images/security-atlas.png'); background-repeat: no-repeat; background-size: 200% 200%; }
.postImage { border: 0; padding: 0; width: 100%; height: 315px; position: relative; display: block; overflow: hidden; }
.postImage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(5,8,20,.65)); opacity: .25; transition: opacity .25s ease; }
.postCard:hover .postImage::after { opacity: .5; }
.postImage span { position: absolute; z-index: 2; left: 25px; bottom: 22px; color: #fff; background: rgba(104,77,244,.92); border: 1px solid rgba(255,255,255,.18); padding: 8px 11px; border-radius: 4px; font-weight: 800; font-size: 11px; letter-spacing: .04em; }
.imageTopLeft, .top-left { background-position: 0 0; }
.imageTopRight, .top-right { background-position: 100% 0; }
.imageBottomLeft, .bottom-left { background-position: 0 100%; }
.imageBottomRight, .bottom-right { background-position: 100% 100%; }
.postBody { padding: 29px 31px 32px; }
.postMeta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--violet); font-size: 11px; font-weight: 650; text-transform: uppercase; }
.postMeta i { width: 3px; height: 3px; background: #bbb4df; border-radius: 50%; }
.postBody h3 { margin: 18px 0 13px; color: var(--navy); font-size: 24px; line-height: 1.18; letter-spacing: -.025em; }
.postBody p { color: var(--muted); line-height: 1.72; font-size: 14px; margin: 0 0 24px; }
.readMore { border: 0; background: transparent; color: var(--violet); font-weight: 800; padding: 0; font-size: 13px; }
.readMore span { display: inline-block; margin-left: 6px; transition: transform .2s ease; }
.readMore:hover span { transform: translateX(5px); }
.emptyState { padding: 80px 20px; text-align: center; background: var(--soft); border-radius: 8px; color: var(--muted); }
.emptyState span { font-size: 42px; color: var(--violet); }
.emptyState h3 { color: var(--navy); font-size: 26px; margin: 10px 0; }
.emptyState p { margin: 0; }

.missionSection { background: var(--violet); color: #fff; width: min(1120px, calc(100% - 48px)); margin: 0 auto 105px; border-radius: 8px; padding: 54px 62px; display: grid; grid-template-columns: 100px 1.2fr 1fr; gap: 40px; align-items: center; box-shadow: 0 18px 50px rgba(104,77,244,.22); position: relative; overflow: hidden; }
.missionSection::after { content: ""; position: absolute; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; right: -130px; top: -150px; }
.missionMark { width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); font-weight: 900; font-size: 25px; }
.missionSection .eyebrow { color: #fff; opacity: .65; margin-bottom: 12px; }
.missionSection h2 { color: #fff; font-size: 30px; max-width: 520px; }
.missionSection > p { margin: 0; line-height: 1.75; font-size: 14px; color: rgba(255,255,255,.82); position: relative; z-index: 1; }

/* Homepage */
.homeHero { min-height: 710px; background: var(--navy); color: #fff; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; }
.homeGrid { position: absolute; inset: 0; z-index: -3; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 70% 50%, #000, transparent 72%); }
.homeGlow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.homeGlowOne { width: 450px; height: 450px; background: rgba(104,77,244,.24); right: 3%; top: 7%; }
.homeGlowTwo { width: 260px; height: 260px; background: rgba(40,154,213,.13); left: -7%; bottom: -5%; }
.homeHeroInner { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 90px 0 100px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 78px; }
.homeHeroCopy { position: relative; z-index: 2; }
.homeHeroCopy .eyebrow { margin-bottom: 24px; }
.homeHeroCopy h1 { margin: 0; max-width: 680px; font-size: clamp(48px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -.052em; font-weight: 800; }
.homeLead { margin: 25px 0 0; max-width: 610px; color: #aeb5c9; font-size: 17px; line-height: 1.75; }
.homeActions { display: flex; gap: 12px; align-items: center; margin-top: 35px; }
.homePrimary, .homeSecondary { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; padding: 0 22px; font-size: 12px; font-weight: 850; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.homePrimary { background: var(--violet); color: #fff; box-shadow: 0 12px 30px rgba(104,77,244,.32); }
.homePrimary span { margin-left: 18px; font-size: 17px; transition: transform .2s ease; }
.homePrimary:hover { background: var(--violet-dark); transform: translateY(-2px); }.homePrimary:hover span { transform: translateX(4px); }
.homeSecondary { border: 1px solid rgba(255,255,255,.18); color: #d4d8e5; }.homeSecondary:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.homeTrust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 33px; color: #81899f; font-size: 10px; font-weight: 700; letter-spacing: .025em; }
.homeTrust span { display: flex; align-items: center; gap: 7px; }.homeTrust i { width: 6px; height: 6px; background: #4dd5a0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(77,213,160,.08); }
.securityConsole { min-height: 480px; background: rgba(12,19,43,.88); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 23px; box-shadow: 0 35px 90px rgba(1,5,18,.42); backdrop-filter: blur(12px); position: relative; overflow: hidden; }
.securityConsole::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(104,77,244,.22); border-radius: inherit; clip-path: polygon(0 0, 34% 0, 34% 1px, 0 1px, 0 100%, 1px 100%, 1px 0, 100% 0, 100% 1px, 66% 1px, 66% 0); }
.consoleTop { display: flex; justify-content: space-between; gap: 14px; align-items: center; color: #69718b; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.consoleTop span i { display: inline-block; width: 6px; height: 6px; background: #48d19b; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 12px #48d19b; }
.consoleTop strong { color: #67dbaa; font-size: 8px; border: 1px solid rgba(72,209,155,.22); padding: 7px 9px; border-radius: 3px; }
.securityRadar { height: 340px; margin: 15px 0 5px; position: relative; display: grid; place-items: center; overflow: hidden; }
.securityRadar::before, .securityRadar::after { content: ""; position: absolute; background: rgba(139,127,255,.1); }.securityRadar::before { width: 1px; height: 82%; }.securityRadar::after { height: 1px; width: 82%; }
.radarRing { position: absolute; border: 1px solid rgba(139,127,255,.2); border-radius: 50%; }.radarRingOne { width: 115px; height: 115px; }.radarRingTwo { width: 220px; height: 220px; }.radarRingThree { width: 315px; height: 315px; border-style: dashed; opacity: .6; }
.radarSweep { position: absolute; width: 150px; height: 150px; left: 50%; top: 50%; transform-origin: 0 0; background: conic-gradient(from 270deg, rgba(104,77,244,.34), transparent 25%); animation: radarSpin 7s linear infinite; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
.radarCore { width: 82px; height: 82px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #171f46; border: 1px solid #7a66ff; box-shadow: 0 0 0 9px rgba(104,77,244,.08), 0 0 35px rgba(104,77,244,.32); z-index: 2; }
.radarCore span { color: #fff; font-size: 23px; font-weight: 900; }.radarCore small { color: #897aff; font-size: 7px; letter-spacing: .2em; margin-top: 3px; }
.radarNode { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: #58d8a6; box-shadow: 0 0 0 5px rgba(88,216,166,.09), 0 0 18px rgba(88,216,166,.8); }.nodeOne { left: 21%; top: 31%; }.nodeTwo { right: 19%; top: 44%; }.nodeThree { left: 35%; bottom: 16%; }
.consoleMetrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consoleMetrics div { border-top: 1px solid rgba(255,255,255,.08); padding: 15px 4px 0; }.consoleMetrics span, .consoleMetrics strong { display: block; }.consoleMetrics span { color: #59617a; font-size: 7px; font-weight: 850; letter-spacing: .13em; margin-bottom: 6px; }.consoleMetrics strong { color: #cbd0df; font-size: 10px; }

.homeServices { background: #f6f7fb; padding: 115px max(24px, calc((100% - 1120px)/2)); }
.homeSectionHead { display: flex; justify-content: space-between; align-items: end; gap: 55px; margin-bottom: 48px; }
.homeSectionHead h2, .aboutCopy h2 { color: var(--navy); font-size: clamp(34px, 4vw, 48px); line-height: 1.08; letter-spacing: -.04em; margin: 0; max-width: 690px; }
.homeSectionHead > p { max-width: 410px; color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 4px; }
.serviceGrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
.serviceCard { grid-column: span 2; min-height: 300px; background: #fff; border: 1px solid #e9eaf0; border-radius: 7px; padding: 30px; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.serviceCard:nth-child(4), .serviceCard:nth-child(5) { grid-column: span 3; }
.serviceCard:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(16,26,56,.09); }
.serviceCard > span { position: absolute; right: 27px; top: 29px; color: #d3d5de; font-size: 10px; font-weight: 850; }
.serviceIcon { width: 48px; height: 48px; display: grid; place-items: center; background: #eeeaff; color: var(--violet); border-radius: 6px; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.serviceCard h3 { color: var(--navy); margin: 26px 0 13px; font-size: 21px; letter-spacing: -.025em; }.serviceCard p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 22px; }.serviceCard a { color: var(--violet); font-size: 11px; font-weight: 850; }
.serviceCard.featured { color: #fff; background: var(--navy); border-color: var(--navy); }.serviceCard.featured h3 { color: #fff; }.serviceCard.featured p { color: #9da5ba; }.serviceCard.featured .serviceIcon { color: #fff; background: var(--violet); }.serviceCard.featured > span { color: #4f5874; }

.homeAbout { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 125px 0; display: grid; grid-template-columns: .95fr 1.05fr; gap: 92px; align-items: center; }
.aboutVisual { min-height: 490px; background: var(--navy); border-radius: 8px; padding: 48px; position: relative; display: flex; align-items: center; overflow: hidden; box-shadow: 0 30px 70px rgba(16,26,56,.2); }
.aboutVisual::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); right: -180px; top: -210px; box-shadow: 0 0 0 60px rgba(255,255,255,.018), 0 0 0 120px rgba(255,255,255,.012); }
.aboutPanel { width: 100%; position: relative; z-index: 1; }.aboutLabel { color: #7868dc; font-size: 8px; letter-spacing: .17em; font-weight: 900; }.aboutPanel > strong { display: block; color: #fff; margin: 18px 0 35px; font-size: 31px; line-height: 1.18; letter-spacing: -.03em; }
.aboutBars { display: grid; gap: 12px; }.aboutBars i { display: block; width: 100%; height: 8px; background: rgba(255,255,255,.06); position: relative; border-radius: 2px; overflow: hidden; }.aboutBars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value); background: var(--violet); }
.aboutPanelFoot { display: flex; justify-content: space-between; color: #788097; font-size: 9px; margin-top: 22px; }.aboutPanelFoot b { color: #51cea0; font-weight: 750; }
.experienceBadge { position: absolute; right: 27px; bottom: 27px; background: #fff; min-width: 150px; padding: 18px; border-radius: 6px; display: flex; align-items: center; gap: 12px; box-shadow: 0 16px 35px rgba(0,0,0,.2); }.experienceBadge strong { color: var(--violet); font-size: 26px; }.experienceBadge span { color: #747887; font-size: 9px; line-height: 1.35; font-weight: 750; }
.aboutCopy > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; font-size: 15px; margin: 25px 0 30px; }.aboutFeatures { display: grid; gap: 15px; margin-bottom: 31px; }.aboutFeatures > div { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }.aboutFeatures span { grid-row: span 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--violet); background: #f0edff; font-weight: 900; font-size: 11px; }.aboutFeatures strong { color: var(--navy); font-size: 13px; }.aboutFeatures small { color: #9094a1; font-size: 11px; margin-top: 4px; }.textArrow { color: var(--violet); font-size: 12px; font-weight: 850; }.textArrow span, .sectionLink span { display: inline-block; margin-left: 8px; transition: transform .2s ease; }.textArrow:hover span, .sectionLink:hover span { transform: translateX(5px); }

.securityNumbers { background: #111; color: #fff; padding: 0 max(24px, calc((100% - 1120px)/2)); display: grid; grid-template-columns: repeat(4,1fr); }
.securityNumbers div { min-height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 20px 35px; border-left: 1px solid #29292e; }.securityNumbers div:last-child { border-right: 1px solid #29292e; }.securityNumbers strong { font-size: 35px; letter-spacing: -.04em; }.securityNumbers span { color: #777b87; font-size: 10px; margin-top: 7px; }

.homePosts { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 120px 0; }.sectionLink { color: var(--violet); font-weight: 850; font-size: 12px; margin-bottom: 8px; }.homePostGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }.homePostGrid .postCard:nth-child(even) { margin-top: 0; }.homePostGrid .postImage { height: 215px; }.homePostGrid .postBody { padding: 24px; }.homePostGrid .postBody h3 { font-size: 20px; }.homePostGrid .postBody p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.homeCta { width: min(1120px, calc(100% - 48px)); margin: 0 auto 105px; background: var(--violet); color: #fff; padding: 58px 62px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; overflow: hidden; box-shadow: 0 20px 55px rgba(104,77,244,.24); }.homeCta::before { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; right: -120px; top: -150px; }.homeCta .eyebrow { color: rgba(255,255,255,.68); }.homeCta h2 { max-width: 720px; margin: 0; font-size: clamp(29px,3.5vw,43px); line-height: 1.1; letter-spacing: -.04em; }.homeCta > a { flex: 0 0 auto; min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; gap: 20px; background: #fff; color: var(--navy); border-radius: 5px; font-size: 11px; font-weight: 850; position: relative; z-index: 1; }.homeCta > a span { color: var(--violet); font-size: 18px; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(104,77,244,.45); outline-offset: 3px; }

.siteFooter { background: #101010; color: #fff; padding: 78px 0 0; }
.footerGrid { width: min(1120px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr .7fr; gap: 80px; padding-bottom: 65px; }
.footerGrid img { width: 159px; }
.footerGrid p { color: #9799a1; font-size: 14px; line-height: 1.75; max-width: 420px; }
.footerGrid h3 { font-size: 17px; margin: 0 0 23px; }
.footerGrid > div:not(.footerBrand) > a { display: block; color: #9d9fa7; font-size: 14px; margin: 0 0 13px; }
.footerGrid a:hover { color: #fff !important; }
.emailLink { color: #bcb1ff !important; }
.socials { display: flex; gap: 9px; margin-top: 25px; }
.socials a { width: 32px; height: 32px; border: 1px solid #2e2e32; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; color: #aaa; }
.footerBottom { border-top: 1px solid #252529; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 26px; display: flex; justify-content: space-between; color: #777980; font-size: 12px; }

.modalBackdrop { position: fixed; inset: 0; z-index: 100; background: rgba(5,8,20,.82); backdrop-filter: blur(7px); padding: 28px; display: grid; place-items: center; animation: fadeIn .2s both; }
@keyframes fadeIn { from { opacity: 0; } }
.postModal { background: #fff; border-radius: 8px; width: min(800px, 100%); max-height: calc(100vh - 56px); overflow: auto; position: relative; box-shadow: 0 30px 100px rgba(0,0,0,.4); }
.modalClose { position: absolute; z-index: 2; right: 16px; top: 16px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(10,13,25,.62); color: #fff; font-size: 24px; }
.modalImage { height: 350px; }
.modalContent { padding: 38px 44px 45px; }
.modalContent h2 { margin: 20px 0; color: var(--navy); font-size: 35px; line-height: 1.15; letter-spacing: -.03em; }
.modalContent > p { color: var(--muted); line-height: 1.85; font-size: 16px; }
.articleCallout { border-left: 3px solid var(--violet); padding: 17px 18px; margin-top: 28px; background: #f6f4ff; color: #5d5970; font-size: 13px; line-height: 1.6; }

/* Admin panel */
.adminShell { min-height: 100vh; background: var(--admin-bg); display: flex; color: #1b2033; }
.adminSidebar { position: fixed; inset: 0 auto 0 0; width: 244px; background: #111; color: #fff; display: flex; flex-direction: column; z-index: 50; box-shadow: 10px 0 30px rgba(10,12,24,.06); }
.adminBrand { height: 98px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 28px; border-bottom: 1px solid #242429; }
.adminBrand img { width: 142px; }
.adminBrand span { font-size: 8px; letter-spacing: .35em; color: #6e7180; padding-left: 3px; }
.adminSidebar nav { padding: 30px 14px; flex: 1; }
.adminSidebar nav > p { color: #565963; font-size: 9px; letter-spacing: .17em; font-weight: 800; padding: 0 14px; margin: 0 0 16px; }
.adminSidebar nav button { border: 0; background: transparent; color: #858894; width: 100%; height: 44px; border-radius: 5px; display: flex; align-items: center; gap: 13px; padding: 0 14px; font-size: 13px; text-align: left; margin-bottom: 4px; }
.adminSidebar nav a { border: 0; background: transparent; color: #858894; width: 100%; height: 44px; border-radius: 5px; display: flex; align-items: center; gap: 13px; padding: 0 14px; font-size: 13px; text-align: left; margin-bottom: 4px; }
.adminSidebar nav button > span { font-size: 17px; width: 20px; text-align: center; }
.adminSidebar nav a > span { font-size: 17px; width: 20px; text-align: center; }
.adminSidebar nav button b { margin-left: auto; font-size: 10px; background: #2a2a31; min-width: 23px; height: 20px; display: grid; place-items: center; border-radius: 10px; }
.adminSidebar nav a b { margin-left: auto; font-size: 10px; background: #2a2a31; min-width: 23px; height: 20px; display: grid; place-items: center; border-radius: 10px; }
.adminSidebar nav button:hover, .adminSidebar nav button.active { background: rgba(104,77,244,.14); color: #fff; }
.adminSidebar nav a:hover, .adminSidebar nav a.active { background: rgba(104,77,244,.14); color: #fff; }
.adminSidebar nav button.active { box-shadow: inset 3px 0 var(--violet); }
.adminSidebar nav a.active { box-shadow: inset 3px 0 var(--violet); }
.adminSidebar nav button.active > span { color: #9483ff; }
.adminSidebar nav a.active > span { color: #9483ff; }
.sidebarFoot { padding: 22px; border-top: 1px solid #242429; }
.sidebarFoot > a { font-size: 11px; color: #777a85; display: block; margin-bottom: 20px; }
.adminUser { display: flex; align-items: center; gap: 10px; }
.adminUser > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); font-size: 11px; font-weight: 900; }
.adminUser div { display: flex; flex-direction: column; gap: 3px; }
.adminUser strong { font-size: 11px; }
.adminUser small { color: #61636c; font-size: 9px; }

.adminMain { min-width: 0; flex: 1; margin-left: 244px; }
.adminTopbar { height: 98px; background: #fff; border-bottom: 1px solid #e6e7ec; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: sticky; top: 0; z-index: 25; }
.adminTopbar > div:first-of-type p { margin: 0 0 4px; color: #9a9ca7; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.adminTopbar h1 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.topbarActions { display: flex; align-items: center; gap: 17px; }
.topbarActions a { color: #777a88; font-size: 11px; font-weight: 650; }
.primaryAdminButton { border: 0 !important; background: var(--violet) !important; color: #fff !important; border-radius: 4px !important; padding: 12px 18px !important; font-size: 11px !important; font-weight: 800 !important; box-shadow: 0 8px 20px rgba(104,77,244,.22); }
.primaryAdminButton:hover { background: var(--violet-dark) !important; }
.adminMenuButton { display: none; border: 0; background: transparent; font-size: 22px; color: var(--navy); }
.adminContent { padding: 34px 40px 50px; max-width: 1450px; margin: 0 auto; }
.welcomeCard { background: var(--navy); min-height: 205px; border-radius: 7px; padding: 38px 44px; color: #fff; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.welcomeCard::after { content: ""; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.05); border-radius: 50%; right: -120px; top: -210px; box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 140px rgba(255,255,255,.012); }
.liveBadge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 6px 9px; font-size: 8px; letter-spacing: .12em; color: #a6a9b8; font-weight: 800; }
.liveBadge i { width: 6px; height: 6px; border-radius: 50%; background: #44d09c; box-shadow: 0 0 0 3px rgba(68,208,156,.12); }
.welcomeCard h2 { font-size: 31px; margin: 18px 0 8px; letter-spacing: -.03em; }
.welcomeCard p { margin: 0; color: #8b91a6; font-size: 13px; }
.welcomeMark { width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #9c8bff; font-size: 24px; font-weight: 900; position: relative; z-index: 1; margin-right: 50px; }
.statGrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 17px; margin: 23px 0; }
.statCard, .panelCard { background: #fff; border: 1px solid #e7e8ed; border-radius: 6px; box-shadow: 0 8px 26px rgba(20,25,45,.025); }
.statCard { padding: 22px 22px 20px; position: relative; min-height: 145px; }
.statIcon { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; }
.statIcon.violet { color: var(--violet); background: #f0edff; }.statIcon.green { color: #2ca777; background: #eaf8f2; }.statIcon.orange { color: #d98c32; background: #fff5e8; }.statIcon.blue { color: #477ad6; background: #edf3ff; }
.statCard p { margin: 0 0 10px; color: #8b8e9a; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.statCard strong { display: block; font-size: 28px; color: #202538; margin-bottom: 13px; }
.statCard small { color: #a7a9b2; font-size: 9px; }
.dashboardGrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; }
.panelCard { padding: 25px; }
.panelHeading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ececf1; padding-bottom: 18px; }
.panelHeading span, .settingsCard > span, .sitePreviewCard > span { color: var(--violet); font-weight: 800; font-size: 8px; letter-spacing: .15em; }
.panelHeading h2, .settingsCard h2 { margin: 5px 0 0; font-size: 16px; }
.panelHeading button { border: 0; background: transparent; color: var(--violet); font-size: 10px; font-weight: 750; }
.recentRow { display: grid; grid-template-columns: 45px minmax(0,1fr) auto 26px; gap: 12px; align-items: center; min-height: 72px; border-bottom: 1px solid #f0f0f4; }
.recentRow:last-child { border-bottom: 0; }
.miniThumb, .tableThumb { display: block; width: 45px; height: 38px; border-radius: 4px; }
.recentRow > div { min-width: 0; }
.recentRow strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; margin-bottom: 5px; }
.recentRow small { color: #a1a3ad; font-size: 8px; }
.recentRow > button { border: 0; background: transparent; color: #a2a4ad; }
.status { border: 0; border-radius: 13px; padding: 5px 9px; font-size: 8px; font-weight: 800; }
.status.live { color: #26966c; background: #e7f8f1; }.status.draft { color: #9b763d; background: #fff3df; }
.quickPanel > button { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 38px 1fr auto; text-align: left; align-items: center; gap: 12px; min-height: 72px; border-bottom: 1px solid #efeff3; color: #22263a; }
.quickPanel > a { width: 100%; border: 0; background: transparent; display: grid; grid-template-columns: 38px 1fr auto; text-align: left; align-items: center; gap: 12px; min-height: 72px; border-bottom: 1px solid #efeff3; color: #22263a; }
.quickPanel > button:last-child { border-bottom: 0; }
.quickPanel > a:last-child { border-bottom: 0; }
.quickPanel > button > span { width: 37px; height: 37px; border-radius: 5px; display: grid; place-items: center; color: var(--violet); background: #f0edff; }
.quickPanel > a > span { width: 37px; height: 37px; border-radius: 5px; display: grid; place-items: center; color: var(--violet); background: #f0edff; }
.quickPanel > button strong { display: block; font-size: 11px; margin-bottom: 4px; }.quickPanel > button small { font-size: 9px; color: #a0a2ab; }.quickPanel > button b { color: #b5b6bd; }
.quickPanel > a strong { display: block; font-size: 11px; margin-bottom: 4px; }.quickPanel > a small { font-size: 9px; color: #a0a2ab; }.quickPanel > a b { color: #b5b6bd; }

.postsPanel { padding: 0; overflow: hidden; }
.postsToolbar { min-height: 75px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ececf1; }
.postsToolbar label { width: 275px; height: 39px; border: 1px solid #e4e5ea; border-radius: 4px; display: flex; align-items: center; padding: 0 12px; color: #9a9ca6; }
.postsToolbar input { width: 100%; border: 0; outline: 0; padding-left: 8px; font-size: 11px; }
.postsToolbar > button { border: 0; background: var(--violet); color: #fff; padding: 11px 15px; border-radius: 4px; font-size: 10px; font-weight: 800; }
.tableWrap { overflow-x: auto; }
.tableWrap table { width: 100%; border-collapse: collapse; min-width: 790px; }
.tableWrap th { color: #989aa5; background: #fafafd; text-align: left; font-size: 8px; letter-spacing: .1em; padding: 13px 20px; }
.tableWrap td { border-top: 1px solid #eeeef2; padding: 14px 20px; color: #777a87; font-size: 10px; }
.tableWrap td:first-child { display: flex; align-items: center; gap: 12px; min-width: 340px; color: #292d40; }
.tableThumb { flex: 0 0 auto; }
.textAction, .deleteAction { border: 0; background: transparent; padding: 4px 6px; color: var(--violet); font-size: 9px; font-weight: 750; }.deleteAction { color: #d26373; }

.editorGrid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 20px; align-items: start; }
.editorMain label, .editorSide label, .settingsCard label { display: block; color: #696c79; font-size: 10px; font-weight: 750; margin-bottom: 22px; }
.editorMain input, .editorMain textarea, .editorSide input, .editorSide select, .settingsCard input, .settingsCard textarea { width: 100%; border: 1px solid #e1e2e8; border-radius: 4px; outline: 0; padding: 12px 13px; margin-top: 8px; color: #282d41; background: #fff; font-size: 12px; resize: vertical; }
.editorMain input:focus, .editorMain textarea:focus, .editorSide input:focus, .editorSide select:focus, .settingsCard input:focus, .settingsCard textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(104,77,244,.08); }
.editorMain > label:first-child input { font-size: 21px; font-weight: 700; }
.contentEditor { line-height: 1.75; }
.editorSide { display: flex; flex-direction: column; gap: 18px; }
.editorSide .panelCard h3 { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid #eeeef2; font-size: 13px; }
.editorButtons { display: flex; justify-content: space-between; gap: 8px; }
.editorButtons button { flex: 1; border: 1px solid #e1e2e7; background: #fff; color: #686b77; border-radius: 4px; padding: 11px 7px; font-size: 9px; font-weight: 750; }
.coverPreview { width: 100%; aspect-ratio: 16/9; border-radius: 5px; margin-top: 15px; }
.categoryAdminGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.categoryAdminCard { display: flex; align-items: center; gap: 14px; }
.categoryAdminCard > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 6px; background: #f0edff; color: var(--violet); }
.categoryAdminCard div { flex: 1; }.categoryAdminCard strong, .categoryAdminCard small { display: block; }.categoryAdminCard strong { font-size: 12px; }.categoryAdminCard small { color: #999ba6; font-size: 9px; margin-top: 5px; }
.categoryAdminCard button { border: 0; background: transparent; color: var(--violet); font-size: 9px; }
.addCategoryCard { min-height: 91px; border: 1px dashed #cfd0d8; border-radius: 6px; background: transparent; color: #898b97; font-size: 10px; }.addCategoryCard span { color: var(--violet); margin-right: 8px; }
.mediaPanel > p { color: #8b8e99; font-size: 11px; }
.mediaGrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-top: 22px; }
.mediaItem { border: 1px solid #e7e7ec; border-radius: 5px; overflow: hidden; }.mediaImage { aspect-ratio: 1; }.mediaItem strong { display: block; padding: 12px; font-size: 10px; }
.settingsGrid { display: grid; grid-template-columns: minmax(0,1fr) 430px; gap: 20px; align-items: start; }.settingsCard h2 { font-size: 21px; margin-bottom: 28px; }.settingsCard .primaryAdminButton { float: right; }
.previewMock { border: 1px solid #e1e2e8; border-radius: 5px; overflow: hidden; margin: 20px 0; background: #fff; }.previewBar { height: 42px; background: #111; display: flex; align-items: center; padding: 0 14px; }.previewBar img { width: 78px; }.previewHero { height: 130px; background: var(--navy); color: #fff; display: grid; place-items: center; }.previewHero strong { font-size: 20px; }.previewCards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }.previewCards i { height: 80px; background-image: url('../images/security-atlas.png'); background-size: 200% 200%; background-position: 0 0; }.previewCards i + i { background-position: 100% 0; }.sitePreviewCard > a { color: var(--violet); font-size: 10px; font-weight: 750; }
.adminToast { position: fixed; z-index: 90; right: 24px; bottom: 24px; background: #171a28; color: #fff; padding: 14px 18px; border-radius: 5px; box-shadow: 0 14px 40px rgba(0,0,0,.2); font-size: 11px; display: flex; align-items: center; gap: 10px; animation: toastIn .25s both; }.adminToast span { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; background: #42b989; font-size: 10px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
.sidebarBackdrop { display: none; }

@media (max-width: 1040px) {
  .siteNav { gap: 25px; }
  .homeHeroInner { gap: 42px; grid-template-columns: 1fr .85fr; }.homeHeroCopy h1 { font-size: 57px; }.securityConsole { min-height: 450px; }.securityRadar { height: 310px; }.radarRingThree { width: 285px; height: 285px; }
  .serviceGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }.serviceCard, .serviceCard:nth-child(4), .serviceCard:nth-child(5) { grid-column: auto; }.serviceCard:nth-child(5) { grid-column: 1 / -1; }
  .homeAbout { gap: 52px; }.aboutVisual { padding: 35px; }
  .missionSection { grid-template-columns: 80px 1fr; }.missionSection > p { grid-column: 2; }
  .statGrid { grid-template-columns: repeat(2,1fr); }
  .dashboardGrid { grid-template-columns: 1fr; }
  .categoryAdminGrid { grid-template-columns: repeat(2,1fr); }
  .mediaGrid { grid-template-columns: repeat(2,1fr); }
  .settingsGrid { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .siteHeader { height: 84px; }.navWrap { width: calc(100% - 34px); }.brand img { width: 138px; }
  .menuButton { display: block; }
  .siteNav { position: absolute; left: 17px; right: 17px; top: 76px; background: #171717; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 14px; border: 1px solid #2e2e32; border-radius: 6px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s ease; box-shadow: 0 20px 45px rgba(0,0,0,.35); }
  .siteNavOpen { opacity: 1; visibility: visible; transform: translateY(0); }
  .siteNav a { padding: 13px 11px; }
  .homeHero { min-height: auto; }.homeHeroInner { width: calc(100% - 34px); padding: 75px 0; grid-template-columns: 1fr; gap: 55px; }.homeHeroCopy h1 { font-size: clamp(45px,11vw,62px); }.securityConsole { width: min(520px,100%); justify-self: center; }
  .homeServices { padding: 82px 17px; }.homeSectionHead { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 36px; }.homeSectionHead > p { max-width: 620px; }.serviceGrid { grid-template-columns: 1fr; }.serviceCard, .serviceCard:nth-child(5) { grid-column: auto; min-height: 0; }
  .homeAbout { width: calc(100% - 34px); padding: 85px 0; grid-template-columns: 1fr; gap: 55px; }.aboutVisual { min-height: 450px; }.securityNumbers { padding: 0 17px; grid-template-columns: 1fr 1fr; }.securityNumbers div:nth-child(3) { border-top: 1px solid #29292e; }.securityNumbers div:nth-child(4) { border-top: 1px solid #29292e; }
  .homePosts { width: calc(100% - 34px); padding: 85px 0; }.homePostGrid { grid-template-columns: 1fr; }.homePostGrid .postImage { height: 310px; }.homeCta { width: calc(100% - 34px); margin-bottom: 75px; padding: 42px 35px; flex-direction: column; align-items: flex-start; gap: 28px; }
  .pageHero { min-height: 360px; }
  .blogSection { width: calc(100% - 34px); padding: 75px 0; }.sectionIntro { flex-direction: column; align-items: flex-start; }.searchBox { width: 100%; }.postGrid { grid-template-columns: 1fr; }.postCard:nth-child(even) { margin-top: 0; }.postImage { height: 290px; }
  .missionSection { width: calc(100% - 34px); padding: 38px 30px; grid-template-columns: 1fr; margin-bottom: 75px; }.missionMark { display: none; }.missionSection > p { grid-column: auto; }
  .footerGrid { width: calc(100% - 34px); grid-template-columns: 1fr; gap: 35px; }.footerBottom { width: calc(100% - 34px); }
  .modalBackdrop { padding: 14px; }.modalImage { height: 250px; }.modalContent { padding: 28px 25px 32px; }.modalContent h2 { font-size: 27px; }

  .adminSidebar { transform: translateX(-100%); transition: transform .25s ease; }.adminSidebarOpen { transform: translateX(0); }.adminMain { margin-left: 0; }.adminTopbar { padding: 0 20px; }.adminMenuButton { display: block; }.adminTopbar > div:first-of-type { margin-right: auto; }.topbarActions a { display: none; }.adminContent { padding: 25px 20px 40px; }.welcomeMark { margin-right: 15px; }.editorGrid { grid-template-columns: 1fr; }.sidebarBackdrop { display: block; position: fixed; inset: 0; z-index: 40; border: 0; background: rgba(9,11,20,.55); }
}

@media (max-width: 560px) {
  .homeHeroInner { padding: 58px 0 65px; }.homeHeroCopy h1 { font-size: 42px; }.homeLead { font-size: 15px; }.homeActions { align-items: stretch; flex-direction: column; }.homePrimary, .homeSecondary { width: 100%; }.homeTrust { flex-direction: column; gap: 12px; }.securityConsole { min-height: 365px; padding: 18px; }.securityRadar { height: 245px; }.radarRingOne { width: 90px; height: 90px; }.radarRingTwo { width: 165px; height: 165px; }.radarRingThree { width: 230px; height: 230px; }.radarCore { width: 68px; height: 68px; }.consoleMetrics { gap: 6px; }.consoleMetrics strong { font-size: 9px; }
  .homeServices { padding: 68px 17px; }.homeSectionHead h2, .aboutCopy h2 { font-size: 34px; }.serviceCard { padding: 25px; }.aboutVisual { min-height: 390px; padding: 27px; }.aboutPanel > strong { font-size: 27px; }.experienceBadge { right: 18px; bottom: 18px; min-width: 135px; }.securityNumbers { grid-template-columns: 1fr; }.securityNumbers div, .securityNumbers div:nth-child(3), .securityNumbers div:nth-child(4) { min-height: 115px; border: 0; border-bottom: 1px solid #29292e; padding-left: 20px; }.securityNumbers div:last-child { border-right: 0; }.homePostGrid .postImage { height: 230px; }.homeCta { padding: 36px 26px; }.homeCta h2 { font-size: 31px; }
  .pageHero h1 { font-size: 44px; }.pageHero { min-height: 310px; }.sectionIntro h2 { font-size: 31px; }.postImage { height: 230px; }.postBody { padding: 25px 23px 28px; }.postBody h3 { font-size: 21px; }.footerBottom { flex-direction: column; gap: 8px; }
  .adminTopbar { height: 84px; }.adminTopbar h1 { font-size: 18px; }.adminTopbar > div:first-of-type p { display: none; }.topbarActions .primaryAdminButton { padding: 10px 11px !important; }.adminContent { padding: 18px 14px 35px; }.welcomeCard { padding: 29px 25px; min-height: 185px; }.welcomeCard h2 { font-size: 25px; }.welcomeMark { display: none; }.statGrid { grid-template-columns: 1fr 1fr; gap: 10px; }.statCard { min-height: 130px; padding: 18px 16px; }.statIcon { right: 14px; top: 15px; }.statCard strong { font-size: 23px; }.recentRow { grid-template-columns: 42px minmax(0,1fr) auto; }.recentRow > button { display: none; }.status { font-size: 7px; padding: 5px 7px; }.postsToolbar { align-items: stretch; gap: 8px; }.postsToolbar label { width: 100%; }.postsToolbar > button { white-space: nowrap; }.categoryAdminGrid, .mediaGrid { grid-template-columns: 1fr; }.panelCard { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* PHP/MySQL edition */
.uploadedCover { width: 100%; height: 315px; object-fit: cover; display: block; }
.postDetail { width: min(860px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0 110px; }
.postDetailCover { height: 460px; border-radius: 8px; overflow: hidden; margin-bottom: 42px; box-shadow: 0 20px 55px rgba(8,14,28,.14); }
.postDetailCover .modalImage, .postDetailCover img { width: 100%; height: 100%; object-fit: cover; }
.postDetail h1, .postDetailTitle { color: var(--navy); font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.04em; margin: 20px 0 28px; }
.postDetailBody { color: #5e6472; font-size: 17px; line-height: 1.9; white-space: normal; }
.postDetailBody > :first-child { margin-top: 0; }
.postDetailBody > :last-child { margin-bottom: 0; }
.postDetailBody p { margin: 0 0 24px; }
.postDetailBody h2, .postDetailBody h3, .postDetailBody h4 { color: var(--navy); letter-spacing: -.025em; line-height: 1.25; }
.postDetailBody h2 { margin: 48px 0 20px; font-size: clamp(27px, 4vw, 36px); }
.postDetailBody h3 { margin: 38px 0 17px; font-size: clamp(22px, 3vw, 29px); }
.postDetailBody h4 { margin: 30px 0 14px; font-size: 20px; }
.postDetailBody ul, .postDetailBody ol { margin: 0 0 26px; padding-left: 28px; }
.postDetailBody li { margin: 7px 0; padding-left: 5px; }
.postDetailBody blockquote { margin: 32px 0; padding: 20px 24px; border-left: 4px solid var(--violet); background: #f6f4ff; color: #514d68; border-radius: 0 6px 6px 0; }
.postDetailBody a { color: var(--violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.postDetailBody strong, .postDetailBody b { color: #30364a; }
.postDetailBody pre { margin: 30px 0; padding: 20px; overflow-x: auto; border-radius: 7px; background: #10172e; color: #e8ebf5; font: 14px/1.7 Consolas, Monaco, monospace; white-space: pre-wrap; }
.postDetailBody code { border-radius: 4px; background: #f0f1f6; color: #4a3ac5; padding: 2px 5px; font: .88em/1.5 Consolas, Monaco, monospace; }
.postDetailBody pre code { background: transparent; color: inherit; padding: 0; }
.backLink { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-weight: 800; font-size: 13px; margin-bottom: 30px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.pagination span { background: var(--violet); border-color: var(--violet); color: #fff; }
.flash { border-radius: 5px; padding: 13px 15px; font-size: 11px; margin-bottom: 20px; }
.flashSuccess { color: #176e50; background: #e8f8f1; border: 1px solid #c9eedf; }
.flashError { color: #a44352; background: #fff0f2; border: 1px solid #f2d3d8; }
.authPage, .installPage { min-height: 100vh; display: grid; place-items: center; padding: 30px; background: var(--navy); position: relative; overflow: hidden; }
.authPage::before, .installPage::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(104,77,244,.18), transparent 32%), radial-gradient(circle at 85% 80%, rgba(25,165,220,.11), transparent 30%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; }
.authCard, .installCard { position: relative; z-index: 1; width: min(440px, 100%); background: #fff; border-radius: 8px; padding: 36px; box-shadow: 0 30px 90px rgba(0,0,0,.32); }
.installCard { width: min(760px, 100%); }
.authLogo { display: flex; justify-content: center; background: #111; margin: -36px -36px 30px; padding: 25px; border-radius: 8px 8px 0 0; }
.authLogo img { width: 155px; }
.authCard h1, .installCard h1 { color: var(--navy); font-size: 26px; letter-spacing: -.03em; margin: 0 0 8px; }
.authCard > p, .installCard > p { color: #8a8d99; font-size: 12px; line-height: 1.6; margin: 0 0 26px; }
.field { display: block; color: #656975; font-size: 10px; font-weight: 800; margin-bottom: 17px; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #dfe1e8; border-radius: 4px; padding: 12px 13px; outline: 0; color: #292d40; background: #fff; margin-top: 7px; font-size: 12px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(104,77,244,.08); }
.submitButton { width: 100%; border: 0; border-radius: 4px; background: var(--violet); color: #fff; padding: 13px 18px; font-weight: 800; font-size: 11px; box-shadow: 0 9px 22px rgba(104,77,244,.25); }
.authHelp { display: flex; justify-content: space-between; margin-top: 18px; font-size: 10px; color: #9395a0; }
.authHelp a { color: var(--violet); font-weight: 750; }
.installGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.installSection { grid-column: 1 / -1; color: var(--violet); font-size: 9px; font-weight: 900; letter-spacing: .14em; border-bottom: 1px solid #ececf1; padding-bottom: 9px; margin: 8px 0 18px; }
.requirements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 22px 0; }
.requirement { border: 1px solid #e5e6eb; border-radius: 5px; padding: 12px; font-size: 10px; color: #727582; }
.requirement.ok { border-color: #ccebdc; color: #23835f; background: #effaf5; }
.requirement.bad { border-color: #f1d1d6; color: #b24b5b; background: #fff2f4; }
.sidebarBackdrop[hidden] { display: none !important; }
.installDone { text-align: center; }
.installDone .doneMark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #e7f8f1; color: #24986d; font-size: 25px; margin: 0 auto 20px; }
.installDone a { display: inline-block; background: var(--violet); color: #fff; padding: 12px 18px; border-radius: 4px; font-size: 11px; font-weight: 800; }
.adminLogout { margin: 0; }
.adminLogout button { border: 0; background: transparent; color: #777a85; font-size: 10px; padding: 0; }
.adminFormGrid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.adminFormCard h2 { margin: 0 0 22px; font-size: 17px; }
.adminFormCard .field { margin-bottom: 20px; }
.adminFormCard textarea.editorTextarea { min-height: 340px; line-height: 1.7; resize: vertical; }
.richTextField { margin-bottom: 0 !important; }
.fieldLabel { display: block; margin-bottom: 7px; }
.richTextEditor { border: 1px solid #dfe1e8; border-radius: 6px; overflow: hidden; background: #fff; }
.richTextToolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding: 9px; border: 1px solid #dfe1e8; border-bottom: 0; border-radius: 6px 6px 0 0; background: #f7f7fa; }
.richTextToolbar select { width: auto; min-width: 132px; height: 34px; margin: 0; padding: 0 30px 0 10px; border: 1px solid #d9dbe3; border-radius: 4px; background: #fff; color: #363a4c; font-size: 11px; font-weight: 700; }
.richTextToolbar button { min-width: 34px; height: 34px; border: 1px solid transparent; border-radius: 4px; padding: 0 9px; background: transparent; color: #4f5362; font-size: 11px; font-weight: 700; }
.richTextToolbar button:hover, .richTextToolbar button.isActive { border-color: #d7d4ef; background: #ece9ff; color: var(--violet); }
.toolbarDivider { width: 1px; height: 22px; margin: 0 2px; background: #dfe1e8; }
.toolbarSpacer { flex: 1 1 auto; }
.richTextSurface { min-height: 420px; padding: 23px 25px; border: 1px solid #dfe1e8; border-radius: 0 0 6px 6px; outline: 0; color: #333849; background: #fff; font-size: 16px; line-height: 1.78; overflow-wrap: anywhere; }
.richTextSurface:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(104,77,244,.08); }
.richTextSurface:empty::before { content: attr(data-placeholder); color: #a4a7b1; pointer-events: none; }
.richTextSurface p { margin: 0 0 17px; }
.richTextSurface h2 { margin: 31px 0 15px; color: var(--navy); font-size: 28px; line-height: 1.25; letter-spacing: -.025em; }
.richTextSurface h3 { margin: 25px 0 13px; color: var(--navy); font-size: 22px; line-height: 1.3; letter-spacing: -.02em; }
.richTextSurface h4 { margin: 21px 0 11px; color: var(--navy); font-size: 18px; line-height: 1.35; }
.richTextSurface blockquote { margin: 22px 0; padding: 15px 18px; border-left: 4px solid var(--violet); background: #f6f4ff; color: #56516c; }
.richTextSurface ul, .richTextSurface ol { margin: 0 0 20px; padding-left: 27px; }
.richTextSurface a { color: var(--violet); text-decoration: underline; }
.richTextSurface pre { margin: 22px 0; padding: 16px; overflow-x: auto; border-radius: 6px; background: #10172e; color: #eef0f8; font: 13px/1.7 Consolas, Monaco, monospace; white-space: pre-wrap; }
.richTextSource { display: none; }
.editorHelp { display: block; margin-top: 9px; color: #8d909b; font-size: 10px; line-height: 1.55; font-weight: 500; }
.adminSideStack { display: flex; flex-direction: column; gap: 18px; }
.buttonRow { display: flex; gap: 9px; flex-wrap: wrap; }
.secondaryButton { border: 1px solid #dfe1e7; background: #fff; color: #686c79; border-radius: 4px; padding: 11px 15px; font-size: 10px; font-weight: 800; }
.dangerButton { border: 0; background: #fff0f2; color: #b34858; border-radius: 4px; padding: 8px 10px; font-size: 9px; font-weight: 800; }
.inlineForm { display: inline; }
.uploadDrop { border: 1px dashed #cfd1da; border-radius: 6px; padding: 22px; text-align: center; background: #fafafd; }
.uploadDrop input { margin: 12px 0; font-size: 10px; max-width: 100%; }
.mediaAdminGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.mediaAdminItem { border: 1px solid #e3e4e9; border-radius: 5px; overflow: hidden; background: #fff; }
.mediaAdminItem img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.mediaAdminItem div { padding: 10px; }
.mediaAdminItem strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.mediaAdminItem small { color: #9a9ca6; font-size: 8px; }
.settingsForm { max-width: 760px; }
.errorPage { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 25px; }
.errorPage strong { font-size: 90px; color: #eeeafd; }.errorPage h1 { color: var(--navy); }.errorPage a { color: var(--violet); font-weight: 800; }

@media (max-width: 800px) {
  .adminFormGrid { grid-template-columns: 1fr; }
  .mediaAdminGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .postDetailCover { height: 330px; }
  .installGrid { grid-template-columns: 1fr; }
  .installSection { grid-column: 1; }
}

@media (max-width: 560px) {
  .mediaAdminGrid { grid-template-columns: 1fr; }
  .authCard, .installCard { padding: 26px 22px; }
  .authLogo { margin: -26px -22px 26px; }
  .requirements { grid-template-columns: 1fr; }
  .postDetail { width: calc(100% - 34px); padding-top: 55px; }
  .postDetailCover { height: 250px; }
}


/* Homepage typography refresh */
.siteHeader,
.homeHero,
.homeServices,
.homeAbout,
.securityNumbers,
.homePosts,
.homeCta,
.siteFooter {
  font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  font-stretch: normal;
  font-variation-settings: normal;
  text-rendering: optimizeLegibility;
}

.siteNav {
  gap: 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .005em;
}

.homeHeroCopy .eyebrow,
.homeServices .eyebrow,
.homeAbout .eyebrow,
.homePosts .eyebrow,
.homeCta .eyebrow {
  margin-bottom: 18px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: .16em;
}

.homeHeroInner {
  grid-template-columns: 1.08fr .92fr;
  gap: 82px;
}

.homeHeroCopy h1 {
  max-width: 660px;
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: clamp(48px, 4.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 700;
  text-wrap: balance;
}

.homeLead {
  max-width: 600px;
  margin-top: 26px;
  color: #bac1d2;
  font-size: 17px;
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: 0;
}

.homeActions {
  margin-top: 34px;
}

.homePrimary,
.homeSecondary {
  min-height: 52px;
  padding: 0 23px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0;
}

.homeTrust {
  gap: 24px;
  margin-top: 30px;
  color: #929aaf;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
}

.homeSectionHead h2,
.aboutCopy h2,
.homeCta h2 {
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: clamp(36px, 3.5vw, 48px);
  line-height: 1.16;
  letter-spacing: -.03em;
  font-weight: 700;
  text-wrap: balance;
}

.homeSectionHead > p {
  max-width: 440px;
  color: #666d7d;
  font-size: 15.5px;
  line-height: 1.72;
  font-weight: 400;
}

.serviceCard h3 {
  margin: 26px 0 14px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 700;
}

.serviceCard p {
  font-size: 15px;
  line-height: 1.72;
}

.serviceCard a,
.textArrow,
.sectionLink {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.aboutPanel > strong {
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: 32px;
  line-height: 1.24;
  letter-spacing: -.025em;
  font-weight: 700;
}

.aboutCopy > p:not(.eyebrow) {
  margin: 25px 0 32px;
  font-size: 16px;
  line-height: 1.82;
}

.aboutFeatures {
  gap: 18px;
}

.aboutFeatures strong {
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 700;
}

.aboutFeatures small {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
}

.securityNumbers strong {
  font-family: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 700;
}

.securityNumbers span {
  margin-top: 10px;
  color: #9497a1;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

.homePostGrid .postBody h3 {
  font-size: 21px;
  line-height: 1.34;
  letter-spacing: -.018em;
  font-weight: 700;
}

.homePostGrid .postBody p {
  font-size: 14.5px;
  line-height: 1.72;
}

.homePostGrid .postMeta {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: .02em;
}

.homePostGrid .readMore {
  font-size: 13.5px;
  font-weight: 700;
}

.homeCta h2 {
  max-width: 730px;
  font-size: clamp(32px, 3.3vw, 44px);
  line-height: 1.18;
}

.homeCta > a {
  min-height: 53px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1040px) {
  .homeHeroInner {
    gap: 48px;
  }

  .homeHeroCopy h1 {
    font-size: 56px;
  }
}

@media (max-width: 800px) {
  .siteNav {
    gap: 0;
    font-size: 14.5px;
  }

  .homeHeroCopy h1 {
    max-width: 700px;
    font-size: clamp(44px, 8.5vw, 58px);
    line-height: 1.1;
  }

  .homeSectionHead h2,
  .aboutCopy h2 {
    font-size: clamp(34px, 7vw, 42px);
  }
}

@media (max-width: 560px) {
  .homeHeroCopy .eyebrow,
  .homeServices .eyebrow,
  .homeAbout .eyebrow,
  .homePosts .eyebrow,
  .homeCta .eyebrow {
    font-size: 10px;
    letter-spacing: .13em;
  }

  .homeHeroCopy h1 {
    font-size: 40px;
    line-height: 1.12;
    letter-spacing: -.028em;
  }

  .homeLead {
    font-size: 16px;
    line-height: 1.65;
  }

  .homeSectionHead h2,
  .aboutCopy h2 {
    font-size: 32px;
    line-height: 1.2;
  }

  .homeCta h2 {
    font-size: 30px;
    line-height: 1.22;
  }
}

@media (max-width: 800px) {
  .richTextSurface { min-height: 360px; padding: 19px 18px; }
  .toolbarSpacer { display: none; }
}

@media (max-width: 560px) {
  .richTextToolbar { gap: 4px; padding: 7px; }
  .richTextToolbar select { width: 100%; margin-bottom: 3px; }
  .richTextToolbar button { flex: 1 0 auto; padding: 0 7px; }
  .toolbarDivider { display: none; }
  .richTextSurface { min-height: 320px; font-size: 15px; }
}