/*
Theme Name: Threat Radar
Theme URI: https://example.com/threat-radar
Author: Threat Radar
Author URI: https://example.com
Description: Threat Radar marketing site — security intelligence, made operational. Classic PHP theme converted from the approved static design. Vulnerability management (VM) and DevSecOps product pages, plus About, Solutions, Resources, Careers, Contact, and Request-a-demo. Hand-off build for developer finalization.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: threat-radar
*/


    :root { --ink:#071b3a; --ink2:#10284e; --paper:#fbfcfc; --mist:#f1f5f5; --line:#dbe6e8; --slate:#64748b; --teal:#0bb9a4; --tealB:#36d9cf; --coral:#f56b5a; --ease:cubic-bezier(.23,1,.32,1); }
    * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } button { font:inherit; }
    .nav { align-items:center; background:rgba(251,252,252,.96); border-bottom:1px solid var(--line); display:flex; gap:25px; height:78px; justify-content:space-between; padding:0 4vw; position:sticky; top:0; z-index:10; }.brand { display:flex; align-items:center; gap:12px; }.brand img { display:block; width:145px; }.brand span { border-left:1px solid var(--line); color:#627187; font-size:9px; font-weight:700; letter-spacing:.12em; line-height:1.35; max-width:106px; padding-left:12px; text-transform:uppercase; }.navlinks { display:flex; gap:26px; margin-left:auto; }.navlinks a { color:#42536c; font-size:12px; font-weight:700; }.navlinks a:hover { color:var(--teal); }.navaction,.primary { align-items:center; background:var(--ink); color:#fff; display:inline-flex; font-size:12px; font-weight:700; gap:9px; justify-content:center; min-height:43px; padding:0 15px; }.navaction:hover,.primary:hover { background:var(--teal); }.hamburger { display:none; background:transparent; border:0; color:var(--ink); cursor:pointer; font-size:22px; }
    .hero { padding:77px 4vw 0; }.field-label,.rail { color:#718096; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.hero-grid { display:grid; gap:55px; grid-template-columns:1fr 1fr; margin:28px auto 0; max-width:1280px; min-height:500px; }.hero-copy { align-self:center; padding-bottom:45px; }.eyebrow { color:var(--teal); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.eyebrow::before { background:var(--teal); border-radius:50%; content:""; display:inline-block; height:6px; margin:0 8px 1px 0; width:6px; } h1,h2,h3 { font-family:Arial, Helvetica, sans-serif; letter-spacing:-.05em; margin:0; } h1 { font-size:clamp(3.2rem,5.5vw,5.55rem); font-weight:600; line-height:.98; margin:20px 0 23px; max-width:645px; } h1 span { color:var(--teal); display:block; }.bodycopy { color:#526279; font-size:17px; line-height:1.65; max-width:560px; }.buttons { display:flex; flex-wrap:wrap; gap:11px; margin-top:29px; }.secondary { align-items:center; border:1px solid var(--line); color:var(--ink); display:inline-flex; font-size:12px; font-weight:700; gap:9px; justify-content:center; min-height:43px; padding:0 15px; }.secondary:hover { background:#e7f5f3; border-color:var(--teal); }.proof { align-items:flex-start; color:#718095; display:flex; font-size:11px; gap:9px; line-height:1.5; margin-top:28px; max-width:485px; }.proof i { align-items:center; background:#d9f4f0; border-radius:50%; color:var(--teal); display:inline-flex; font-style:normal; height:24px; justify-content:center; width:24px; }.hero-art { background:var(--ink); min-height:500px; overflow:hidden; position:relative; }.hero-art>img { height:100%; inset:0; object-fit:cover; opacity:.84; position:absolute; width:100%; }.hero-art:after { background:linear-gradient(90deg,rgba(7,27,58,.66),transparent 54%),linear-gradient(0deg,rgba(7,27,58,.83),transparent 52%); content:""; inset:0; position:absolute; }.queue { background:rgba(6,22,45,.83); border:1px solid rgba(54,217,207,.25); bottom:24px; color:#fff; left:24px; padding:14px; position:absolute; width:64%; z-index:2; }.queuehead { color:#bdd0df; display:flex; font-size:9px; font-weight:700; justify-content:space-between; letter-spacing:.11em; text-transform:uppercase; }.queuehead b { color:var(--tealB); letter-spacing:0; text-transform:none; }.queueitem { align-items:center; border-top:1px solid rgba(255,255,255,.13); display:grid; font-size:10px; gap:8px; grid-template-columns:8px 1fr auto; margin-top:10px; padding-top:10px; }.dot { background:var(--coral); border-radius:50%; height:7px; width:7px; }.dot.m { background:#dfbd54; }.queueitem small { color:#aabccd; display:block; font-size:9px; margin-top:3px; }.queueitem em { color:var(--tealB); font-style:normal; font-weight:700; }.metrics { border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:1280px; }.metric { border-right:1px solid var(--line); padding:20px 28px 23px 0; }.metric+.metric { padding-left:28px; }.metric:last-child { border-right:0; }.metric strong { display:block; font-size:13px; }.metric span { color:var(--teal); display:block; font-size:12px; font-weight:700; margin-bottom:9px; }.metric p { color:#718095; font-size:11px; line-height:1.5; margin:7px 0 0; }
    .strip { align-items:center; background:var(--ink); color:#fff; display:flex; gap:30px; justify-content:space-between; padding:20px 4vw; }.strip p { color:#c2d2de; font-size:11px; font-weight:600; margin:0; }.strip p:before { background:var(--teal); border-radius:50%; content:""; display:inline-block; height:6px; margin-right:8px; width:6px; }.stripwords { color:#b9c8d6; display:flex; font-size:12px; font-weight:700; gap:22px; }.stripwords strong { color:var(--tealB); }.stripwords span+span:before { color:#8292a8; content:"/"; margin-right:22px; }
    .section { padding:116px 4vw; position:relative; }.rail { align-items:center; display:flex; gap:10px; margin:0 auto 31px; max-width:1280px; }.rail b { color:var(--teal); font-size:13px; }.rail span:before { background:var(--line); content:""; display:inline-block; height:1px; margin:0 11px 3px 0; width:34px; }.sectionhead { align-items:end; display:grid; gap:65px; grid-template-columns:1.2fr .8fr; margin:0 auto 48px; max-width:1280px; }.sectionhead h2,.commandcopy h2,.workflowtitle h2,.integrations h2,.closecopy h2 { font-size:clamp(2.2rem,4vw,4.15rem); font-weight:500; line-height:1.04; margin-top:14px; }.sectionhead p,.commandcopy>p,.integrations>p { color:#5e6f83; font-size:15px; line-height:1.7; margin:0; max-width:410px; }.cards { display:grid; grid-template-columns:repeat(3,1fr); margin:0 auto; max-width:1280px; }.card { border:1px solid var(--line); border-left:0; min-height:294px; padding:29px; position:relative; }.card:first-child { border-left:1px solid var(--line); }.card:hover { background:var(--ink); color:white; transition:.2s var(--ease); transform:translateY(-5px); }.cardnum { color:#6d7d90; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.card h3 { font-size:25px; font-weight:500; line-height:1.07; margin:49px 0 10px; max-width:260px; }.card p { color:#68788d; font-size:12px; line-height:1.63; margin:0; max-width:286px; }.card:hover p,.card:hover .cardnum { color:#b5c5d2; }.card i { bottom:25px; color:var(--teal); font-size:20px; font-style:normal; position:absolute; right:25px; }
    .command { background:var(--mist); display:grid; gap:7vw; grid-template-columns:1.05fr .95fr; padding:136px 8vw 104px; position:relative; }.commandrail { left:8vw; position:absolute; top:44px; }.map { min-height:390px; overflow:hidden; position:relative; }.map>img { height:100%; object-fit:cover; position:absolute; width:100%; }.map:after { background-image:linear-gradient(rgba(7,27,58,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(7,27,58,.13) 1px,transparent 1px); background-size:36px 36px; content:""; inset:0; position:absolute; }.pin { background:var(--coral); border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 6px rgba(245,107,90,.15); height:11px; left:48%; position:absolute; top:37%; width:11px; z-index:2; }.pin.b { background:var(--teal); bottom:22%; box-shadow:0 0 0 6px rgba(11,185,164,.15); left:68%; top:auto; }.route { color:var(--ink); font-size:9px; font-weight:700; left:8%; letter-spacing:.1em; position:absolute; text-transform:uppercase; top:16%; z-index:2; }.route:after { border-top:2px solid var(--teal); content:""; display:block; margin-top:7px; transform:rotate(-16deg); width:180px; }.caption { background:var(--ink); bottom:0; color:#fff; font-size:10px; font-weight:700; left:0; padding:11px 15px; position:absolute; z-index:3; }.commandcopy { align-self:center; }.commandcopy>p { margin:23px 0; max-width:500px; }.check { color:#43536a; display:grid; font-size:12px; gap:12px; line-height:1.55; }.check div:before { color:var(--teal); content:"✓"; font-weight:700; margin-right:9px; }
    .workflowtitle { margin:0 auto 47px; max-width:1280px; }.workflowtitle h2 { max-width:670px; }.steps { display:grid; grid-template-columns:repeat(4,1fr); margin:0 auto; max-width:1280px; }.step { border-top:1px solid var(--ink); min-height:222px; padding:16px 26px 16px 0; }.step+.step { padding-left:26px; }.step span { color:var(--teal); font-size:12px; font-weight:700; }.step h3 { font-size:22px; font-weight:500; margin:45px 0 7px; }.step p { color:#6a7a8c; font-size:11px; line-height:1.6; margin:0; max-width:220px; }.workflowart { height:355px; margin:55px auto 0; max-width:1280px; overflow:hidden; position:relative; }.workflowart>img { height:100%; object-fit:cover; width:100%; }.looplabel { background:rgba(7,27,58,.9); border:1px solid rgba(54,217,207,.48); bottom:18px; color:white; font-size:9px; font-weight:700; left:20px; letter-spacing:.1em; padding:12px; position:absolute; text-transform:uppercase; }.looplabel b { color:var(--tealB); margin-left:12px; }
    .integrationsection { display:grid; gap:9vw; grid-template-columns:.85fr 1.15fr; padding:142px 8vw 115px; position:relative; }.integrationrail { left:8vw; position:absolute; top:44px; }.board { align-self:center; background:var(--mist); border-top:3px solid var(--teal); padding:26px; }.boardhead,.boardfoot { align-items:center; color:#68788d; display:flex; font-size:10px; font-weight:700; gap:8px; letter-spacing:.1em; text-transform:uppercase; }.boardhead:after { background:var(--line); content:""; flex:1; height:1px; }.chips { display:grid; gap:10px; grid-template-columns:repeat(4,1fr); margin:25px 0; }.chip { align-items:center; background:#fff; display:flex; font-size:12px; font-weight:700; height:62px; justify-content:center; }.boardfoot { border-top:1px solid var(--line); font-size:10px; letter-spacing:0; padding-top:16px; text-transform:none; }.boardfoot:before { color:var(--teal); content:"●"; }
    .closing { padding:0 4vw 70px; }.closingcard { background:var(--ink); color:white; display:grid; grid-template-columns:1fr .55fr; margin:0 auto; max-width:1280px; min-height:380px; overflow:hidden; }.closecopy { align-self:center; padding:60px clamp(30px,6vw,85px); }.closecopy .eyebrow { color:var(--tealB); }.closecopy h2 { max-width:610px; }.closecopy p { color:#b8c7d6; font-size:15px; line-height:1.65; margin:18px 0 25px; max-width:460px; }.signalglyph { align-items:center; display:flex; justify-content:center; position:relative; }.signalglyph:before,.signalglyph:after { border:1px solid rgba(54,217,207,.33); border-radius:50%; content:""; height:300px; position:absolute; width:300px; }.signalglyph:after { height:450px; opacity:.6; width:450px; }.signalglyph img { border-radius:50%; max-width:165px; position:relative; z-index:1; }.footer { align-items:center; background:var(--mist); display:grid; gap:28px; grid-template-columns:1.2fr 1fr .75fr; padding:45px 4vw; }.footer img { display:block; width:145px; }.footer p { color:#718095; font-size:11px; margin:8px 0 0; }.footlinks { display:flex; flex-wrap:wrap; gap:14px 25px; justify-content:center; }.footlinks a { color:#53647b; font-size:11px; font-weight:700; }.footnote { color:#7a8999; font-size:10px; text-align:right; }
    @media (max-width:900px) { .navlinks,.navaction { display:none; }.hamburger { display:block; }.hero-grid,.command,.integrationsection,.sectionhead { grid-template-columns:1fr; }.hero-art { min-height:440px; }.commandcopy { order:-1; }.footer { grid-template-columns:1fr 1fr; }.footnote { text-align:left; } }
    @media (max-width:640px) { .nav { height:68px; padding:0 20px; }.brand img { width:138px; }.brand span { display:none; }.hero { padding:47px 20px 0; }.hero-grid { gap:32px; margin-top:20px; }.hero-copy { padding:0; }.bodycopy { font-size:16px; }.buttons { flex-direction:column; }.primary,.secondary { width:100%; }.hero-art { margin:0 -20px; min-height:375px; }.queue { bottom:18px; left:18px; width:76%; }.metrics,.cards,.steps { grid-template-columns:1fr; }.metric,.metric+.metric { border-bottom:1px solid var(--line); border-right:0; padding:17px 0; }.metric:last-child { border-bottom:0; }.strip { align-items:flex-start; flex-direction:column; gap:15px; padding:20px; }.stripwords { flex-wrap:wrap; gap:8px 16px; }.stripwords span+span:before { margin-right:16px; }.section { padding:78px 20px; }.sectionhead { gap:22px; margin-bottom:32px; }.card,.card:first-child { border-left:1px solid var(--line); }.card { border-bottom:0; min-height:242px; }.card:last-child { border-bottom:1px solid var(--line); }.command { padding:111px 20px 72px; }.commandrail { left:20px; top:42px; }.map { min-height:305px; }.steps .step+.step { padding-left:0; }.step { min-height:165px; padding:15px 0; }.step h3 { margin-top:26px; }.workflowart { height:250px; margin-top:36px; }.integrationsection { padding:112px 20px 76px; }.integrationrail { left:20px; top:42px; }.chips { grid-template-columns:repeat(2,1fr); }.closing { padding:0 20px 64px; }.closingcard { grid-template-columns:1fr; }.closecopy { padding:48px 27px; }.signalglyph { height:200px; }.signalglyph:before { height:200px; width:200px; }.signalglyph:after { height:300px; width:300px; }.signalglyph img { max-width:110px; }.footer { grid-template-columns:1fr; padding:40px 20px; }.footlinks { justify-content:flex-start; } }
  

/* ===== additions: nav interactions, pages, forms, image reuse ===== */
.nav .brand{cursor:pointer}
.brandmark{display:block;width:150px;height:47px;background:var(--logo) left center/contain no-repeat}
.footer .brandmark{width:150px}
.navlinks a{cursor:pointer;position:relative;background:transparent;border:0}
.navlinks a.on{color:var(--teal)}
.navlinks a.on:after{content:"";position:absolute;left:0;right:0;bottom:-27px;height:2px;background:var(--teal)}
/* dropdown */
.drop{position:relative}
.drop>a:after{content:"▾";font-size:9px;margin-left:6px;vertical-align:middle;color:#9aa9b8}
.dropmenu{position:absolute;top:calc(100% + 16px);left:-16px;min-width:250px;background:#fff;border:1px solid var(--line);
  padding:8px;box-shadow:0 26px 60px -26px rgba(7,27,58,.34);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.18s var(--ease);z-index:30}
.drop:hover .dropmenu,.drop:focus-within .dropmenu,.dropmenu.open{opacity:1;visibility:visible;transform:none}
.dropmenu a{display:block;padding:12px 13px;font-size:12.5px;font-weight:700;color:#42536c}
.dropmenu a small{display:block;font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;color:#8494a6;margin-top:3px}
.dropmenu a:hover{background:var(--mist);color:var(--teal)}
/* mobile menu */
.mobilemenu{display:none;position:sticky;top:78px;z-index:9;background:#fff;border-bottom:1px solid var(--line);padding:10px 4vw 18px}
.mobilemenu.open{display:block}
.mobilemenu a{display:block;padding:13px 6px;font-size:14px;font-weight:700;color:#33455e;border-bottom:1px solid var(--mist);cursor:pointer}
.mobilemenu a.sub{padding-left:22px;font-size:13px;color:#5b6d84}
.mobilemenu a:last-child{border-bottom:0}
.mobilemenu .mobcta{margin-top:12px;background:var(--ink);color:#fff;text-align:center;border-bottom:0}
/* pages */
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* image-backed elements (each data-uri defined once via :root var) */
.hero-art{background:var(--ink)}
.hero-art.art-hero:before{content:"";position:absolute;inset:0;background:var(--hero) center/cover;opacity:.84}
.map.art-map>span{position:absolute;inset:0;background:var(--map) center/cover}
.workflowart.art-loop>span{position:absolute;inset:0;background:var(--loop) center/cover}
.signalglyph .glyphimg{width:165px;height:165px;border-radius:50%;background:var(--glyph) center/cover;position:relative;z-index:1}
/* small glyph accent */
.glyphmini{width:38px;height:38px;border-radius:50%;background:var(--glyph) center/cover;flex:none}
/* generic interior page head */
.pagehead{padding:70px 4vw 0}
.pagehead .inner{max-width:1280px;margin:0 auto}
.pagehead h1{font-size:clamp(2.6rem,4.4vw,4.35rem);font-weight:600;line-height:1.02;margin:16px 0 18px;max-width:820px}
.pagehead h1 span{color:var(--teal)}
.pagehead .lead{color:#526279;font-size:17px;line-height:1.65;max-width:620px}
.pagehead .buttons{margin-top:26px}
/* two-column product split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1280px;margin:0 auto}
.splitcard{border:1px solid var(--line);border-left:0;padding:40px 38px;position:relative;min-height:330px;display:flex;flex-direction:column}
.splitcard:first-child{border-left:1px solid var(--line)}
.splitcard .k{color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.splitcard h3{font-size:31px;font-weight:500;margin:16px 0 12px;letter-spacing:-.03em}
.splitcard p{color:#5f7086;font-size:13.5px;line-height:1.65;margin:0 0 20px;max-width:420px}
.splitcard ul{list-style:none;margin:0 0 26px;padding:0;color:#43536a;font-size:12.5px;line-height:1.5;display:grid;gap:10px}
.splitcard ul li:before{color:var(--teal);content:"✓";font-weight:700;margin-right:9px}
.splitcard .go{margin-top:auto;color:var(--ink);font-size:12px;font-weight:700;display:inline-flex;gap:8px;cursor:pointer}
.splitcard:hover .go{color:var(--teal)}
/* industries grid */
.indgrid{display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:0 auto}
.ind{border:1px solid var(--line);border-left:0;padding:26px 24px;min-height:220px}
.ind:first-child{border-left:1px solid var(--line)}
.ind h4{font-size:17px;font-weight:600;margin:0 0 10px}
.ind p{color:#68788d;font-size:12px;line-height:1.6;margin:0}
.ind span{color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
/* resources */
.reslist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:1280px;margin:0 auto}
.rescard{border:1px solid var(--line);border-left:0;border-top:0;padding:34px 32px;position:relative;min-height:210px;cursor:pointer}
.reslist .rescard:nth-child(odd){border-left:1px solid var(--line)}
.reslist .rescard:nth-child(-n+2){border-top:1px solid var(--line)}
.rescard:hover{background:var(--ink);color:#fff;transition:.2s var(--ease)}
.rescard .rk{color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.rescard h3{font-size:23px;font-weight:500;margin:16px 0 10px;max-width:340px}
.rescard p{color:#68788d;font-size:12.5px;line-height:1.6;margin:0;max-width:400px}
.rescard:hover p,.rescard:hover .rk{color:#b5c5d2}
.rescard i{position:absolute;right:26px;bottom:24px;color:var(--teal);font-style:normal;font-size:19px}
/* roles */
.roles{max-width:1280px;margin:0 auto;border-top:1px solid var(--line)}
.role{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.role h4{font-size:18px;font-weight:600;margin:0}
.role span{color:#68788d;font-size:12px;font-weight:700}
.role .go{color:var(--teal);font-size:12px;font-weight:700}
.role:hover h4{color:var(--teal)}
/* forms */
.formwrap{display:grid;grid-template-columns:1fr .85fr;gap:60px;max-width:1280px;margin:0 auto;align-items:start}
.form .field{margin-bottom:17px}
.form label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5c6d82;margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:14px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,185,164,.12)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .primary{margin-top:8px;border:0;cursor:pointer}
.formside{background:var(--mist);border-top:3px solid var(--teal);padding:30px}
.formside h4{margin:0 0 6px;font-size:15px;font-weight:700}
.formside .fs{display:grid;gap:16px;margin-top:18px}
.formside .fs div{color:#4d5e73;font-size:12.5px;line-height:1.55}
.formside .fs b{display:block;color:var(--ink);font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.formok{display:none;background:#e7f7f4;border:1px solid var(--teal);color:#0a5c52;padding:16px 18px;font-size:13.5px;font-weight:600;margin-bottom:18px}
.formok.show{display:block}
/* prose blocks for about */
.prose{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.prose .pcol{border:1px solid var(--line);border-left:0;padding:30px 28px;min-height:210px}
.prose .pcol:first-child{border-left:1px solid var(--line)}
.prose .pcol span{color:var(--teal);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.prose .pcol h3{font-size:20px;font-weight:600;margin:14px 0 9px}
.prose .pcol p{color:#68788d;font-size:12.5px;line-height:1.62;margin:0}
@media (max-width:900px){
  .navlinks,.navaction{display:none}
  .hamburger{display:block}
  .split,.indgrid,.reslist,.prose,.formwrap{grid-template-columns:1fr}
  .splitcard,.ind,.prose .pcol{border-left:1px solid var(--line)!important}
  .reslist .rescard{border-left:1px solid var(--line)!important}
  .role{grid-template-columns:1fr;gap:6px;align-items:start}
  .role span,.role .go{font-size:12px}
}
@media (max-width:640px){
  .mobilemenu{top:68px}
  .indgrid{grid-template-columns:1fr}
  .pagehead{padding:44px 20px 0}
}