/* SecureSan Technologies — shared component styles for the four service pages
   (vapt-services.html, audit-compliance.html, trainings.html, resources.html)
   Loads AFTER res.css and reuses its tokens, adding only the few extra tokens
   and the section-specific components that were previously inline in index.html.
   Single source of truth, so these pages can't drift from the main site. */
:root{
  --bg:#ffffff;
  --bg-3:#EEEEEE;
  --highlight:#0CC485;
  --grad:linear-gradient(to right,#191C89 0%,#3E4095 51%,#3E4095 100%);
  --sh-lg:0 26px 60px rgba(40,40,80,.16);
}

/* ---- in-page block heading (secondary section within a page) ---- */
.block-head{max-width:760px;margin:64px 0 30px}
.block-head:first-of-type{margin-top:8px}
.block-head h2{font-family:var(--display);font-weight:700;color:var(--heading);
  font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.2;margin-bottom:10px}
.block-head p{color:var(--muted);font-size:1rem}

/* ---- shared "lightning edge" (same as the main site) ---- */
.svc-card,.comp-card{position:relative;isolation:isolate}
.svc-card::after,.comp-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;
  background:linear-gradient(135deg,var(--edge-1),var(--edge-2) 45%,rgba(62,64,149,0) 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.30;transition:opacity .3s ease;pointer-events:none;z-index:2}
.svc-card:hover::after,.comp-card:hover::after,.svc-card:focus-visible::after{opacity:1}
.svc-card:hover,.comp-card:hover{box-shadow:0 0 0 3px var(--edge-glow),var(--sh)}

/* ---- buttons ---- */
.btn{font-family:'Open Sans',sans-serif;font-weight:600;font-size:.95rem;padding:12px 30px;border-radius:10px;
  cursor:pointer;border:1px solid transparent;transition:.25s;display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 28px rgba(62,64,149,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(62,64,149,.44)}

/* ================= VAPT SERVICES ================= */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 26px;cursor:pointer;transition:box-shadow .3s;position:relative;overflow:hidden;box-shadow:var(--sh-sm)}
.svc-card:hover{box-shadow:var(--sh-lg)}
.svc-card:hover .svc-ic{transform:scale(1.06);box-shadow:0 8px 22px rgba(62,64,149,.35)}
.svc-num{font-family:var(--mono);font-size:.74rem;color:var(--muted);position:absolute;top:24px;right:26px;letter-spacing:.1em}
.svc-ic{width:56px;height:56px;border-radius:14px;background:var(--grad);display:grid;place-items:center;margin-bottom:20px;transition:.32s;color:#fff}
.svc-ic svg{width:27px;height:27px}
.svc-card h3{font-family:var(--display);font-weight:600;color:var(--heading);font-size:1.16rem;margin-bottom:9px}
.svc-card p{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.svc-more{font-family:var(--mono);font-size:.78rem;color:var(--primary);display:flex;align-items:center;gap:7px;transition:.25s;font-weight:600}
.svc-card:hover .svc-more{gap:12px}

/* ---- service detail modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(8,18,40,.45);backdrop-filter:blur(6px);z-index:2000;display:none;align-items:center;justify-content:center;padding:24px}
.modal-bg.open{display:flex}
.modal{background:var(--bg);border:1px solid var(--line);border-radius:22px;max-width:820px;width:100%;max-height:88vh;overflow-y:auto;position:relative;box-shadow:var(--sh-lg)}
.modal-hero{padding:38px 40px 26px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
.modal-hero .mh-ic{width:52px;height:52px;border-radius:13px;background:var(--grad);display:grid;place-items:center;color:#fff;margin-bottom:16px}
.modal-hero .mh-ic svg{width:26px;height:26px}
.modal-hero h3{font-family:var(--display);font-weight:700;color:var(--heading);font-size:1.7rem;margin-bottom:8px}
.modal-hero p{color:var(--muted);font-size:.95rem}
.modal-close{position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line);color:var(--heading);cursor:pointer;display:grid;place-items:center;transition:.2s}
.modal-close:hover{background:#ffe4e6;border-color:#fda4af;color:#e11d48}
.modal-body{padding:30px 40px 40px}
.mblock{margin-bottom:26px}
.mblock h4{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin-bottom:12px;font-weight:600}
.mblock p{color:var(--ink);font-size:.94rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:.76rem;padding:6px 12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted)}
.mlist{display:grid;gap:9px}
.mlist li{list-style:none;display:flex;gap:11px;align-items:flex-start;color:var(--ink);font-size:.92rem}
.mlist li svg{flex:none;width:17px;height:17px;color:var(--highlight);margin-top:3px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* ================= AUDIT & COMPLIANCE ================= */
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:52px}
.comp-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--sh-sm);transition:.3s;position:relative;overflow:hidden}
.comp-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--line-2)}
.comp-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.05em;padding:6px 12px;border-radius:100px;background:var(--grad-soft);border:1px solid var(--line);color:var(--primary);margin-bottom:16px}
.comp-badge svg{width:15px;height:15px}
.comp-card h3{font-family:var(--display);font-weight:600;color:var(--heading);font-size:1.16rem;margin-bottom:8px}
.comp-card p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.comp-tags{display:flex;flex-wrap:wrap;gap:7px}
.comp-tag{font-family:var(--mono);font-size:.72rem;padding:5px 10px;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted)}
.audit-band{background:linear-gradient(125deg,#3E4095,#191C89);border-radius:22px;padding:44px 46px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.audit-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 70% 90% at 82% 25%,#000,transparent 72%);opacity:.6}
.audit-band>*{position:relative;z-index:1}
.audit-band .eyebrow{color:#E4E4F8}
.audit-band .eyebrow::before{background:#E4E4F8}
.audit-band h3{font-family:var(--display);font-weight:700;color:#fff;font-size:clamp(1.5rem,2.5vw,2rem);margin-bottom:12px}
.audit-band p{color:#E9E9F6;font-size:.98rem;margin-bottom:24px}
.audit-band .btn-primary{background:#fff;color:var(--primary);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.audit-band .btn-primary:hover{background:#eef3ff}
.audit-list{display:grid;gap:12px}
.audit-item{display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:15px 17px;transition:.25s}
.audit-item:hover{background:rgba(255,255,255,.1);transform:translateX(5px)}
.audit-item .aic{flex:none;width:38px;height:38px;border-radius:10px;background:rgba(228,228,248,.18);display:grid;place-items:center;color:#E4E4F8}
.audit-item .aic svg{width:19px;height:19px}
.audit-item b{color:#fff;font-family:var(--display);font-weight:600;font-size:.95rem;display:block}
.audit-item small{color:#D6D7F2;font-size:.8rem;display:block;margin-top:2px}

/* ================= TRAININGS ================= */
.train-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.train-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:var(--sh-sm);transition:.3s;position:relative;isolation:isolate}
.train-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;background:linear-gradient(135deg,var(--edge-1),var(--edge-2) 45%,rgba(62,64,149,0) 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.30;transition:opacity .3s;pointer-events:none;z-index:2}
.train-card:hover::after{opacity:1}
.train-card:hover{transform:translateY(-5px);box-shadow:0 0 0 3px var(--edge-glow),var(--sh)}
.train-ic{width:48px;height:48px;border-radius:13px;background:var(--grad-soft);border:1px solid rgba(62,64,149,.2);display:grid;place-items:center;color:var(--primary);margin-bottom:16px}
.train-card h3{font-family:var(--display);font-weight:600;color:var(--heading);font-size:1.12rem;margin-bottom:8px}
.train-card p{color:var(--muted);font-size:.92rem}
.train-for{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);background:var(--grad-soft);border:1px solid rgba(62,64,149,.18);border-radius:6px;padding:4px 9px}
.tech-train{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:38px 40px;display:grid;grid-template-columns:0.92fr 1.15fr;gap:44px;align-items:center;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.tech-train::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad)}
.tt-ic{width:52px;height:52px;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;margin-bottom:16px;box-shadow:0 8px 20px rgba(62,64,149,.3)}
.tt-ic svg{width:26px;height:26px}
.tech-train-info h3{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.2;margin:4px 0 12px;color:var(--heading)}
.tech-train-info p{color:var(--muted);line-height:1.62;margin-bottom:18px;font-size:.95rem}
.tech-train-domains{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tt-chip{display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;transition:.25s}
.tt-chip:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--sh-sm);background:var(--card)}
.tt-chip-ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--grad-soft);border:1px solid rgba(62,64,149,.18);display:grid;place-items:center;color:var(--primary)}
.tt-chip-ic svg{width:18px;height:18px}
.tt-txt{display:flex;flex-direction:column;min-width:0}
.tt-chip-t{font-family:var(--display);font-weight:600;font-size:.86rem;color:var(--heading);line-height:1.2}
.tt-chip-d{font-family:var(--mono);font-size:.63rem;letter-spacing:.02em;color:var(--muted);margin-top:3px}

/* ================= RESOURCES ================= */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.res-card{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 24px;box-shadow:var(--sh-sm);transition:.3s;position:relative;isolation:isolate}
.res-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;background:linear-gradient(135deg,var(--edge-1),var(--edge-2) 45%,rgba(62,64,149,0) 75%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.30;transition:opacity .3s;pointer-events:none;z-index:2}
.res-card:hover::after{opacity:1}
.res-card:hover{transform:translateY(-6px);box-shadow:0 0 0 3px var(--edge-glow),var(--sh)}
.res-ic{width:46px;height:46px;border-radius:12px;background:var(--grad-soft);border:1px solid rgba(62,64,149,.2);display:grid;place-items:center;color:var(--primary);margin-bottom:15px}
.res-card h3{font-family:var(--display);font-weight:600;color:var(--heading);font-size:1.08rem;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.res-card p{color:var(--muted);font-size:.88rem;margin-bottom:14px}
.res-go{font-family:var(--mono);font-size:.75rem;font-weight:600;color:var(--primary);display:inline-flex;align-items:center;gap:6px}
.res-card:hover .res-go{gap:11px}

/* ---- CTA row that sends people back to a free consult ---- */
.page-cta{margin-top:56px;background:var(--grad-soft);border:1px solid var(--line-2);border-radius:20px;
  padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.page-cta h3{font-family:var(--display);font-weight:700;color:var(--heading);font-size:1.3rem;margin-bottom:4px}
.page-cta p{color:var(--muted);font-size:.95rem;max-width:52ch}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  .two-col,.audit-band{grid-template-columns:1fr}
  .svc-grid,.comp-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .train-grid{grid-template-columns:1fr}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .tech-train{grid-template-columns:1fr;gap:26px;padding:30px 26px}
}
@media(max-width:640px){
  .svc-grid,.comp-grid,.res-grid{grid-template-columns:1fr}
  .modal-hero,.modal-body{padding-left:24px;padding-right:24px}
  .audit-band{padding:30px 26px}
  .tech-train-domains{grid-template-columns:1fr}
  .page-cta{padding:26px 22px}
}