/* ============================================================
   TrustMonitor — Trust Automation (product styles)
   Dark sections inspired by the TrustMonitor UI, harmonised
   with the corporate light sections. Brand palette:
   #3498db primary · #1d4362 / #1b3145 deep navy · #18d26e accent
   ============================================================ */

:root{
  --tm-navy:#0f172a;
  --tm-navy2:#1d4362;
  --tm-panel:#172033;
  --tm-border:rgba(148,163,184,.22);
  --tm-text:#e8eef6;
  --tm-dim:#a9b8c9;
  --tm-primary:#3498db;
  --tm-accent:#18d26e;
}

/* ---------- Shared ---------- */
.tm-section{background:linear-gradient(150deg,#0f172a 0%,#132038 55%,#1d4362 100%);color:var(--tm-text);padding:84px 0;position:relative;overflow:hidden}
.tm-section:before{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(52,152,219,.25),transparent 65%)}
.tm-section .container{position:relative;z-index:2}
.tm-section--tight{padding:64px 0}
.tm-badge{display:inline-block;font-family:"Poppins",sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#06281a;background:var(--tm-accent);border-radius:999px;padding:6px 14px;margin-bottom:18px}
.tm-title{font-family:"Poppins",sans-serif;font-weight:700;font-size:34px;line-height:1.2;color:#fff;margin:0 0 14px}
.tm-title span{color:var(--tm-primary)}
.tm-lead{font-size:16px;line-height:1.65;color:var(--tm-dim);margin:0 0 22px}
.tm-benefits{list-style:none;padding:0;margin:0 0 26px}
.tm-benefits li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:15px;color:var(--tm-text)}
.tm-benefits li i{color:var(--tm-accent);font-size:20px;line-height:1.2}
.tm-benefits li b{color:#fff;font-weight:600}
.tm-cta{display:flex;gap:12px;flex-wrap:wrap}
.tm-btn{display:inline-flex;align-items:center;gap:8px;font-family:"Poppins",sans-serif;font-weight:600;font-size:14px;border-radius:10px;padding:12px 22px;text-decoration:none;transition:.2s ease;border:1px solid transparent}
.tm-btn-primary{background:var(--tm-primary);color:#fff;box-shadow:0 10px 24px rgba(52,152,219,.28)}
.tm-btn-primary:hover{background:#2383c4;color:#fff;transform:translateY(-1px)}
.tm-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.tm-btn-ghost:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateY(-1px)}
.tm-shot{border:1px solid var(--tm-border);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(2,6,23,.55);background:#0b1220}
.tm-shot img{width:100%;height:auto;display:block}
.tm-shot--float{margin-top:26px}
.tm-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;color:var(--tm-dim);font-size:13px}
.tm-meta span{display:inline-flex;align-items:center;gap:7px}
.tm-meta i{color:var(--tm-primary)}

/* ---------- Product page ---------- */
.tm-hero{background:radial-gradient(circle at 78% 22%,rgba(52,152,219,.30),transparent 42%),linear-gradient(160deg,#0b1220 0%,#132038 60%,#1d4362 100%);color:var(--tm-text);padding:120px 0 70px}
.tm-hero h1{font-family:"Poppins",sans-serif;font-weight:700;font-size:40px;color:#fff;margin:0 0 14px}
.tm-hero p{font-size:16.5px;color:var(--tm-dim);max-width:620px;line-height:1.65}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.tm-card{background:rgba(23,32,51,.85);border:1px solid var(--tm-border);border-radius:14px;padding:22px;transition:.2s ease}
.tm-card:hover{transform:translateY(-3px);border-color:rgba(52,152,219,.55)}
.tm-card i{font-size:22px;color:var(--tm-primary);display:block;margin-bottom:10px}
.tm-card h3{font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}
.tm-card p{font-size:13.5px;color:var(--tm-dim);margin:0;line-height:1.6}
.tm-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:26px}
.tm-gallery figure{margin:0;border:1px solid var(--tm-border);border-radius:12px;overflow:hidden;background:#0b1220}
.tm-gallery img{width:100%;height:auto;display:block}
.tm-gallery figcaption{font-size:12px;color:var(--tm-dim);padding:9px 12px;border-top:1px solid var(--tm-border)}
.tm-cta-band{background:linear-gradient(120deg,#1d4362,#0f172a);color:#fff;border-radius:16px;padding:34px 30px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tm-cta-band h3{font-family:"Poppins",sans-serif;font-weight:700;font-size:22px;margin:0}
.tm-cta-band p{margin:6px 0 0;color:var(--tm-dim);font-size:14px}

/* Ensure readability of dark text on light corporate sections stays intact */
.tm-section a,.tm-hero a,.tm-cta-band a{text-decoration:none}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .tm-title{font-size:28px}
  .tm-hero h1{font-size:31px}
  .tm-hero{padding:104px 0 54px}
  .tm-section{padding:64px 0}
}
@media (max-width:575px){
  .tm-title{font-size:24px}
  .tm-hero h1{font-size:26px}
  .tm-cta .tm-btn,.tm-cta-band .tm-btn{width:100%;justify-content:center}
  .tm-section{padding:52px 0}
  .tm-meta{gap:14px}
}


/* TrustMonitor visual refinements: tablet hero + bright screenshot gallery.
   Scope is limited to product pages; Genio's copy and other sections remain unchanged. */
.tm-hero .tm-shot {
  position: relative;
  padding: 11px;
  border: 1px solid rgba(182,214,235,.32);
  border-radius: 22px;
  background: linear-gradient(145deg,#294761,#172c42);
  box-shadow: 0 24px 50px rgba(1,9,22,.35), inset 0 1px 0 rgba(255,255,255,.10);
  overflow: hidden;
}
.tm-hero .tm-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(7,12,23,.85);
}
#gallery.tm-section {
  background: #eaf2f7;
  color: #17354b;
}
#gallery.tm-section::before { display:none; }
#gallery .tm-title { color:#17354b; }
#gallery .tm-lead { color:#607990; }
#gallery .tm-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:30px;
}
#gallery .tm-gallery figure {
  min-width:0;
  padding:10px 10px 0;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 26px rgba(24,50,75,.07);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
#gallery .tm-gallery figure:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(24,50,75,.13);
}
#gallery .tm-gallery img {
  width:100%;height:auto;display:block;
  border-radius:10px;
}
#gallery .tm-gallery figcaption {
  border:0;
  padding:15px 12px 17px;
  color:#17354b;
  font-weight:700;
  font-size:15px;
}
@media(max-width:767px){
  #gallery .tm-gallery{grid-template-columns:1fr;gap:18px}
  .tm-hero .tm-shot{padding:7px;border-radius:16px}
  .tm-hero .tm-shot img{border-radius:9px}
}