/* ProNet Cyber - brand site styles.
   The brand home where services are explained and reports are bought. Its own identity:
   deep navy, a confident accent, structured cards. Operated by Leisure Websites Limited. */
:root{
  color-scheme: light;
  --ground:#F4F6FA; --panel:#FFFFFF; --ink:#0C1530; --body:#2E3647;
  --muted:#616B80; --rule:#DCE1EC; --brand:#1D4ED8; --brandink:#1636A6;
  --accent:#0E7C66; --warn:#B23A1E; --hi:#B45309; --lo:#1C7A4D;
  --hero:#0C1530;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#090D1A; --panel:#111830; --ink:#EDF1FA; --body:#B9C2D6;
    --muted:#7E89A1; --rule:#20283F; --brand:#5B8DEF; --brandink:#9CBAF6;
    --accent:#3FBFA0; --warn:#E8795F; --hi:#E0A54B; --lo:#4FB587;
    --hero:#070B16;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#090D1A; --panel:#111830; --ink:#EDF1FA; --body:#B9C2D6;
  --muted:#7E89A1; --rule:#20283F; --brand:#5B8DEF; --brandink:#9CBAF6;
  --accent:#3FBFA0; --warn:#E8795F; --hi:#E0A54B; --lo:#4FB587;
  --hero:#070B16;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:46rem; margin:0 auto; padding:0 16px 64px}
.inner{max-width:42rem; margin:0 auto}
h1{color:var(--ink); font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.1;
   letter-spacing:-.02em; font-weight:800; margin:0 0 18px; text-wrap:balance}
h2{color:var(--ink); font-size:1.3rem; font-weight:700; margin:36px 0 10px}
h3{color:var(--ink); font-size:1.05rem; font-weight:700; margin:0 0 6px}
p{margin:0 0 16px; max-width:64ch}
.eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.14em;
   text-transform:uppercase; color:var(--brand); margin:0 0 14px}
a{color:var(--brand)}
a:hover{text-decoration:none}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
   font-weight:700; font-size:.98rem; padding:13px 26px; border-radius:7px; margin:4px 0; border:0; cursor:pointer}
.btn:hover{background:var(--brandink)}
.btn.ghost{background:transparent; color:var(--brand); border:1px solid var(--brand)}
.btn.ghost:hover{color:var(--brandink); border-color:var(--brandink)}
ul{margin:0 0 16px; padding-left:20px}
li{margin:0 0 7px}
.note{font-size:.9rem; color:var(--muted)}
.lede{font-size:1.12rem; color:var(--body)}
dl{margin:0 0 16px}
dt{font-weight:700; color:var(--ink); margin-top:14px}
dd{margin:4px 0 0}
/* hero */
.hero{background:var(--hero); color:#EDF1FA; margin-bottom:8px}
.hero .inner{padding:54px 0 48px}
.hero h1{color:#fff}
.hero p{color:#C3CCE0}
.hero .eyebrow{color:#7FA6F4}
/* masthead */
.top{display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center;
   padding:16px 0; margin-bottom:0}
.hero .top{border-bottom:1px solid rgba(255,255,255,.12)}
.wordmark{font-weight:800; font-size:1.1rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.hero .wordmark{color:#fff}
.wordmark span{color:var(--brand)}
.hero .wordmark span{color:#7FA6F4}
nav{margin-left:auto; display:flex; flex-wrap:wrap; gap:18px; font-size:.9rem}
nav a{color:var(--muted); text-decoration:none}
.hero nav a{color:#AEB9D2}
nav a:hover,nav a[aria-current="page"]{color:var(--ink)}
.hero nav a:hover,.hero nav a[aria-current="page"]{color:#fff}
/* cards & grid */
.card{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:22px 24px; margin:22px 0}
.grid{display:grid; gap:16px; grid-template-columns:1fr; margin:22px 0}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
.svc{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:20px 22px}
.svc .tag{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:3px 10px; display:inline-block; margin-bottom:10px}
.tag.live{background:color-mix(in srgb,var(--lo) 16%,transparent); color:var(--lo)}
.tag.soon{background:color-mix(in srgb,var(--muted) 16%,transparent); color:var(--muted)}
.svc p{font-size:.96rem; margin-bottom:0}
.price{font-size:1.5rem; font-weight:800; color:var(--ink)}
.price small{font-size:.9rem; font-weight:500; color:var(--muted)}
.ph{background:color-mix(in srgb,var(--hi) 16%,transparent); color:var(--hi);
   font-weight:700; border-radius:4px; padding:0 6px}
footer{border-top:1px solid var(--rule); margin-top:48px; padding-top:22px; font-size:.86rem; color:var(--muted)}
footer p{margin:0 0 5px}
footer a{color:var(--muted)}