/* == Dark theme base styles for TPS Security == */
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --bg:#020617;
  --accent:#22c55e;
  --accent-soft:rgba(34,197,94,0.14);
  --accent-strong:#16a34a;
  --accent-alt:#38bdf8;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#1f2937;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  --shadow-soft:0 20px 45px rgba(15,23,42,0.95);
}

html,body { scroll-behavior:smooth; }

body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at top left,#0f172a 0,#020617 55%),
    radial-gradient(circle at bottom right,#111827 0,#020617 65%);
  color:var(--text);
  min-height:100vh;
}

a { color:inherit; text-decoration:none; }

.page { max-width:1200px; margin:0 auto; padding:1.1rem 1rem 3rem; }

/* Header */
header {
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(18px);
  background:linear-gradient(to bottom,rgba(2,6,23,0.96),rgba(2,6,23,0.9),transparent);
  border-bottom:1px solid rgba(31,41,55,0.9);
  margin:-1.1rem -1rem 1.7rem;
  padding:0.75rem 1rem 0.85rem;
}
.header-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand { display:flex; align-items:center; gap:0.65rem; }
.brand-mark {
  width:36px; height:36px; border-radius:14px;
  border:1px solid rgba(148,163,184,0.65);
  background:
    radial-gradient(circle at 15% 0%,rgba(34,197,94,0.4),transparent 60%),
    radial-gradient(circle at 90% 100%,rgba(56,189,248,0.35),transparent 60%),
    #020617;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 26px rgba(34,197,94,0.6);
  font-size:0.95rem; font-weight:800; color:var(--accent);
}
.brand-main { font-weight:700; letter-spacing:0.08em; font-size:1rem; text-transform:uppercase; }
.brand-sub { font-size:0.7rem; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; }

nav { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; justify-content:flex-end; }
.nav-link {
  font-size:0.8rem; padding:0.3rem 0.7rem;
  border-radius:var(--radius-pill); border:1px solid transparent;
  background:transparent; color:var(--muted); cursor:pointer;
  transition:all .16s ease-out;
}
.nav-link:hover {
  border-color:rgba(148,163,184,0.5);
  color:var(--text); background:rgba(15,23,42,0.98);
}
.nav-link.active {
  border-color:rgba(34,197,94,0.7);
  background:var(--accent-soft); color:var(--accent);
}
.nav-cta {
  padding:0.38rem 0.95rem;
  border-radius:var(--radius-pill); border:none;
  font-size:0.8rem; font-weight:600; cursor:pointer;
  background:linear-gradient(to right,#22c55e,#16a34a);
  color:#022c22; box-shadow:0 0 22px rgba(34,197,94,0.55);
  display:flex; align-items:center; gap:0.25rem;
}

/* Hero */
.hero {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:1.7rem; align-items:center; margin-bottom:2rem;
}
.hero-eyebrow {
  font-size:0.75rem; text-transform:uppercase;
  letter-spacing:0.18em; color:var(--accent); margin-bottom:0.4rem;
}
.hero-title {
  font-size:clamp(2rem,3vw,2.5rem);
  font-weight:800; letter-spacing:0.02em; margin-bottom:0.5rem;
}
.hero-title span { color:var(--accent); }
.hero-subtitle { font-size:0.95rem; color:var(--muted); max-width:32rem; margin-bottom:1rem; }
.hero-subtitle strong { color:#e5e7eb; }

.hero-actions { display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1rem; }

.btn {
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:rgba(15,23,42,0.96);
  color:var(--text); font-size:0.9rem;
  padding:0.55rem 1.1rem;
  display:inline-flex; align-items:center; gap:0.4rem;
  cursor:pointer; transition:all .17s ease-out;
}
.btn-primary {
  background:linear-gradient(to right,#22c55e,#16a34a);
  border-color:transparent; color:#022c22; font-weight:600;
  box-shadow:0 18px 45px rgba(22,163,74,0.7);
}
.btn-primary:hover { filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 22px 55px rgba(22,163,74,0.9); }
.btn-secondary:hover { border-color:rgba(148,163,184,0.5); background:rgba(15,23,42,0.98); transform:translateY(-1px); }

.hero-meta { display:flex; flex-wrap:wrap; gap:0.7rem; font-size:0.8rem; color:var(--muted); }
.meta-pill {
  border-radius:var(--radius-pill); border:1px solid var(--border);
  background:rgba(15,23,42,0.96); padding:0.35rem 0.8rem;
}
.meta-pill strong { color:var(--accent); }

.hero-right { display:flex; justify-content:center; }

.hero-card {
  position:relative; width:100%; max-width:370px;
  border-radius:var(--radius-xl); padding:1.1rem 1rem;
  background:
    radial-gradient(circle at 0% 0%,rgba(34,197,94,0.2),transparent 60%),
    radial-gradient(circle at 120% 0%,rgba(56,189,248,0.22),transparent 60%),
    #020617;
  border:1px solid rgba(148,163,184,0.45);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.hero-card-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:0.6rem;
}
.hero-card-title { font-size:0.9rem; font-weight:600; }
.badge {
  font-size:0.7rem; padding:0.25rem 0.6rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(34,197,94,0.7);
  background:var(--accent-soft); color:var(--accent);
}
.hero-card-body { font-size:0.8rem; color:var(--muted); margin-bottom:0.6rem; }
.hero-card-row { display:flex; justify-content:space-between; font-size:0.8rem; margin-bottom:0.25rem; }
.status-dot { width:7px; height:7px; border-radius:999px; display:inline-block; margin-right:0.25rem; }
.status-online { background:#22c55e; box-shadow:0 0 10px rgba(34,197,94,0.9); }
.hero-note { font-size:0.75rem; color:var(--muted); margin-top:0.35rem; }

/* Sections */
section { margin-bottom:2rem; }
.section-card {
  border-radius:var(--radius-lg);
  background:linear-gradient(to bottom right,rgba(15,23,42,0.98),rgba(2,6,23,0.98));
  border:1px solid rgba(31,41,55,0.95);
  box-shadow:var(--shadow-soft); padding:1.3rem 1.1rem;
}
.section-header { margin-bottom:0.8rem; }
.section-eyebrow { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--muted); margin-bottom:0.2rem; }
.section-title { font-size:1.2rem; font-weight:700; margin-bottom:0.3rem; }
.section-subtitle { font-size:0.9rem; color:var(--muted); }

.grid { display:grid; gap:0.9rem; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }

.pill {
  display:inline-block; padding:0.2rem 0.6rem; font-size:0.75rem;
  border-radius:var(--radius-pill);
  background:rgba(15,23,42,0.98);
  border:1px solid rgba(55,65,81,0.9);
  color:var(--muted); margin-bottom:0.4rem;
}
.pill-accent {
  background:var(--accent-soft);
  border-color:rgba(34,197,94,0.75); color:var(--accent);
}

.card-soft {
  border-radius:var(--radius-lg);
  border:1px solid rgba(31,41,55,0.96);
  background:#020617; padding:0.9rem 0.9rem;
}

h3 { font-size:0.98rem; font-weight:600; margin-bottom:0.3rem; }
p { font-size:0.9rem; color:var(--muted); margin-bottom:0.35rem; }
ul { padding-left:1.1rem; margin-bottom:0.3rem; }
li { font-size:0.88rem; color:var(--muted); margin-bottom:0.2rem; }
.note { font-size:0.78rem; color:var(--muted); }

/* Tables */
table { width:100%; border-collapse:collapse; margin-top:0.4rem; margin-bottom:0.4rem; font-size:0.8rem; }
th,td { border:1px solid rgba(31,41,55,0.96); padding:0.4rem 0.5rem; text-align:left; }
th { background:#020617; font-weight:600; color:#e5e7eb; }
td { color:var(--muted); }

/* Forms */
.form-row { display:grid; gap:0.6rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:0.5rem; }
label {
  font-size:0.78rem; color:var(--muted); display:block;
  margin-bottom:0.15rem; text-transform:uppercase; letter-spacing:0.08em;
}
input,select,textarea {
  width:100%; border-radius:10px;
  border:1px solid rgba(31,41,55,0.96);
  background:rgba(2,6,23,0.98); color:var(--text);
  padding:0.45rem 0.55rem; font-size:0.86rem;
  outline:none; transition:all .14s ease-out;
}
input:focus,select:focus,textarea:focus {
  border-color:rgba(34,197,94,0.7);
  box-shadow:0 0 0 1px rgba(34,197,94,0.3);
}
textarea { resize:vertical; min-height:80px; }
.btn-small { font-size:0.8rem; padding:0.4rem 0.8rem; margin-top:0.35rem; }

.quote-result {
  border-radius:var(--radius-lg);
  border:1px solid rgba(34,197,94,0.75);
  background:rgba(22,163,74,0.12);
  padding:0.7rem 0.8rem; font-size:0.84rem;
  margin-top:0.5rem;
}
.quote-result strong { color:var(--accent); }

/* Footer */
footer { margin-top:1.6rem; font-size:0.76rem; color:var(--muted); text-align:center; }
footer span { color:var(--accent); }

/* Anchor offset */
.section-anchor { position:relative; top:-80px; visibility:hidden; }

/* Responsive tweaks */
@media (max-width:900px){ .grid-2{grid-template-columns:minmax(0,1fr);} }
@media (max-width:860px){ .hero{grid-template-columns:minmax(0,1fr);} }
@media (max-width:700px){ .form-row{grid-template-columns:minmax(0,1fr);} }
@media (max-width:600px){
  header{padding-inline:0.8rem;}
  .page{padding-inline:0.85rem;}
}