:root{
  --page:#ffffff;
  --page-soft:#f8fafc;
  --page-border:#e2e8f0;
  --page-text:#0f172a;
  --page-muted:#475569;

  /* Softer slate/navy palette: lighter than the original dark panels, but still high contrast */
  --panel:#41516a;
  --panel-2:#34445b;
  --panel-3:#526783;
  --muted:#edf4ff;
  --text:#ffffff;

  --accent:#2563eb;
  --accent-2:#3b82f6;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --ring:rgba(59,130,246,.25);
  --shadow:0 10px 26px rgba(15,23,42,.10);
  --panel-shadow:0 10px 26px rgba(15,23,42,.18);
  --radius:14px;
  --w:980px;
}

*{box-sizing:border-box}

html,body{min-height:100%}

body{
  margin:0;
  color:var(--page-text);
  background:
    radial-gradient(900px 420px at 8% -10%, rgba(37,99,235,.08), transparent 60%),
    radial-gradient(900px 420px at 110% 0%, rgba(34,197,94,.06), transparent 60%),
    var(--page);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}

.wrap{max-width:var(--w);margin:0 auto;padding:28px 20px 60px}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:6px 0 18px 0;
  padding:14px 16px;
  border:1px solid var(--page-border);
  border-radius:var(--radius);
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(15,23,42,.07);
}

.brand{display:flex;align-items:center;gap:12px}
.brand img{height:36px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(15,23,42,.16))}
.brand .name{font-weight:700;letter-spacing:.3px;color:var(--page-text)}

nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px}
nav a{color:var(--page-muted);margin-left:0}
nav a.active,nav a:hover{color:var(--page-text);font-weight:600}

.hero{
  margin:16px 0 24px;
  padding:28px;
  border-radius:var(--radius);
  color:var(--text);
  background:
    radial-gradient(700px 260px at 0% 0%, rgba(59,130,246,.14), transparent 65%),
    linear-gradient(180deg, #506987, var(--panel));
  box-shadow:var(--panel-shadow);
  border:1px solid rgba(51,65,85,.28);
}

.hero h1{margin:0 0 8px;font-size:28px;letter-spacing:.2px;color:var(--text)}
.hero p{margin:6px 0 0;color:var(--muted)}
.hero a{color:#bfdbfe}
.hero a:hover{color:#dbeafe}

.grid{display:grid;grid-template-columns:1fr;gap:18px;margin:26px 0}

.card{
  color:var(--text);
  background:linear-gradient(180deg, #506178, var(--panel));
  border:1px solid rgba(51,65,85,.24);
  border-radius:var(--radius);
  box-shadow:var(--panel-shadow);
  padding:20px;
}

.card h2{margin:0 0 8px;font-size:20px;color:var(--text)}
.card h3{margin:14px 0 8px;font-size:16px;color:#e2e8f0}
.card a{color:#bfdbfe}
.card a:hover{color:#dbeafe}
.card p{color:var(--text)}
.card ul,.card ol{color:var(--text)}

.muted{color:var(--muted)}
ul{margin:8px 0 8px 22px}
ol{margin:8px 0 8px 22px}

.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,.14);
  padding:2px 6px;
  border-radius:6px;
  color:var(--text);
}

.footer{
  margin-top:26px;
  padding:18px;
  text-align:center;
  color:var(--page-muted);
  font-size:14px;
}

.notice{
  border-left:3px solid var(--warn);
  padding:12px 14px;
  background:rgba(245,158,11,.08);
  border-radius:10px;
  color:#78350f;
}

.links{display:flex;gap:14px;flex-wrap:wrap}

.banner{
  margin:0 0 16px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--page-border);
  box-shadow:var(--shadow);
  background:#fff;
}

.banner img{display:block;width:100%;height:auto}

.site-banner{
  background:var(--panel);
}

.site-banner img{
  aspect-ratio:24/5;
  object-fit:cover;
}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}

.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff !important;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  box-shadow:0 6px 14px rgba(37,99,235,.24);
  font-weight:600;
  cursor:pointer;
}

.btn:hover{
  background:var(--accent-2);
  color:#fff !important;
  text-decoration:none;
}

.btn.secondary{
  background:#6b7f9b;
  color:#fff !important;
}

.btn.secondary:hover{
  background:#7890ad;
  color:#fff !important;
}

.toc ul{margin:0 0 0 18px}

.pill{
  display:inline-block;
  background:rgba(219,234,254,.18);
  color:#eff6ff;
  border:1px solid rgba(219,234,254,.35);
  padding:4px 8px;
  border-radius:999px;
  font-size:12px;
  margin-left:8px;
}

/* Responsive YouTube embeds used by product pages */
.video-wrapper,
.video-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  height:0;
  margin-top:16px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.35);
  box-shadow:var(--panel-shadow);
  background:#1e293b;
}

.video-wrapper iframe,
.video-frame{
  position:absolute;
  inset:0;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

.video-caption{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}

@media (max-width:720px){
  .wrap{padding:18px 14px 44px}
  header{align-items:flex-start;flex-direction:column}
  nav{justify-content:flex-start;gap:12px}
  .hero{padding:22px}
  .hero h1{font-size:24px}
}


/* Trust and corporate polish */
.meta-note{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
}

.trust-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-top:12px;
}

.trust-item{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:12px;
}

.trust-item strong{
  display:block;
  color:#fff;
  margin-bottom:3px;
}

.trust-item span{
  color:var(--muted);
  font-size:14px;
}

.card.compact p{margin-bottom:0}

.small-print{
  color:var(--muted);
  font-size:14px;
}