/* audience.css — shared styles for Perdida Security audience pages + dropdown nav */
:root{
  --ink:#0A0E13; --raised:#11161F; --raised2:#161D27; --line:#20303F; --line2:#222C38;
  --mist:#96A5B6; --mist2:#7C8A9C; --paper:#E9EEF3; --amber:#F0B34A; --green:#2EFF6B;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink); color:var(--paper); font-family:'IBM Plex Sans',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 1.25rem}

/* ---------- Header + nav ---------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(10,14,19,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:.55rem; font-family:'Chakra Petch',sans-serif; font-weight:700; letter-spacing:.05em; font-size:1.05rem}
.brand .amb{color:var(--amber)}
.menu{display:flex; align-items:center; gap:.15rem; list-style:none}
.menu > li > a, .drop-t{display:block; padding:.55rem .8rem; color:var(--mist); font-family:'IBM Plex Mono',monospace; font-size:.85rem; letter-spacing:.02em; background:none; border:none; cursor:pointer}
.menu > li > a:hover, .drop-t:hover, .menu a.active{color:var(--paper)}
.drop{position:relative}
.drop-t .caret{margin-left:.25rem; font-size:.65rem; color:var(--amber)}
.drop-menu{position:absolute; top:calc(100% + 4px); left:0; min-width:250px; background:var(--raised2); border:1px solid var(--line); border-radius:12px; padding:.4rem; list-style:none; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s, transform .15s, visibility .15s; box-shadow:0 14px 34px rgba(0,0,0,.45)}
.drop:hover .drop-menu, .drop:focus-within .drop-menu, .drop-menu.open{opacity:1; visibility:visible; transform:none}
.drop-menu a{display:block; padding:.6rem .7rem; border-radius:8px; color:var(--paper); font-size:.92rem}
.drop-menu a:hover{background:var(--raised)}
.drop-menu a .d{display:block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--mist2); margin-top:.15rem; letter-spacing:.02em}
.btn-mini{background:var(--amber); color:#0A0E13 !important; font-family:'Chakra Petch',sans-serif; font-weight:700; padding:.5rem .95rem !important; border-radius:9px; font-size:.82rem !important}
.btn-mini:hover{filter:brightness(1.07)}
.burger{display:none; background:none; border:none; color:var(--paper); font-size:1.5rem; cursor:pointer; line-height:1}

/* ---------- Hero ---------- */
.hero{padding:4.5rem 0 3rem; text-align:center}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin-bottom:1rem}
.hero h1{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:clamp(2rem,5vw,3.15rem); line-height:1.12; margin-bottom:1rem}
.lede{color:var(--mist); font-size:1.12rem; max-width:60ch; margin:0 auto}
.hero .lede{margin-bottom:1.9rem}

/* ---------- Buttons ---------- */
.btn{display:inline-block; background:var(--amber); color:#0A0E13; font-family:'Chakra Petch',sans-serif; font-weight:700; padding:.85rem 1.7rem; border-radius:12px; letter-spacing:.02em}
.btn:hover{filter:brightness(1.06)}

/* ---------- Sections ---------- */
section{padding:2.8rem 0}
.section-h{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:1.7rem; margin-bottom:.45rem}
.section-sub{color:var(--mist); margin-bottom:1.7rem; max-width:62ch}
.grid{display:grid; gap:1rem}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--raised); border:1px solid var(--line); border-radius:14px; padding:1.4rem}
.card .label{font-family:'IBM Plex Mono',monospace; color:var(--amber); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase}
.card h3{font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:1.12rem; margin:.5rem 0 .4rem}
.card p{color:var(--mist); font-size:.94rem}

/* ---------- Highlight (offer) box ---------- */
.highlight{background:rgba(240,179,74,.08); border:1px solid var(--amber); border-radius:16px; padding:1.7rem}
.highlight h3{font-family:'Chakra Petch',sans-serif; font-size:1.2rem; margin-bottom:.35rem}
.highlight p{color:var(--mist)}
.highlight .tag{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber)}

/* ---------- CTA band ---------- */
.cta-band{text-align:center; background:var(--raised); border:1px solid var(--line); border-radius:18px; padding:2.6rem 1.5rem}
.cta-band h2{font-family:'Chakra Petch',sans-serif; font-size:1.6rem; margin-bottom:.6rem}
.cta-band p{color:var(--mist); max-width:52ch; margin:0 auto 1.4rem}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line); padding:2.2rem 0; color:var(--mist2); font-size:.85rem; margin-top:1.5rem}
.foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-family:'IBM Plex Mono',monospace; letter-spacing:.02em}

@media (max-width:820px){
  .burger{display:block}
  .menu{display:none; position:absolute; top:66px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--raised2); border-bottom:1px solid var(--line); padding:.5rem}
  .menu.open{display:flex}
  .drop-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:0 0 .3rem 1rem; min-width:0; display:none}
  .drop-menu.open{display:block}
  .g3,.g2{grid-template-columns:1fr}
  .foot{justify-content:center; text-align:center}
}