:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --brand:#ff7a00;
  --brand2:#ffb000;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:18px;
}

html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(255,122,0,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(255,176,0,.10), transparent 55%),
    var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

.navbar-blur{
  background:rgba(11,18,32,.62)!important;
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.tb-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.tb-soft{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.badge-brand{
  background:rgba(255,122,0,.14);
  color:#ffd7b0;
  border:1px solid rgba(255,122,0,.25);
  border-radius:999px;
}

.tb-btn{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;
  color:#111;
  font-weight:800;
  border-radius:999px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.tb-btn:hover{filter:brightness(1.03)}

.tb-btn-outline{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:800;
  border-radius:999px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

.form-control, .form-select{
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:14px;
}
.form-control::placeholder{color:rgba(255,255,255,.55)}
.form-control:focus, .form-select:focus{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,122,0,.45);
  box-shadow:none;
}

.small-muted{color:var(--muted)}
.section-pad{padding:72px 0}
.container-narrow{max-width:980px}
hr{border-color:var(--border)}

.hero{
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(135deg, rgba(255,122,0,0.16), rgba(255,176,0,0.08));
  border: 1px solid rgba(255,122,0,0.20);
}

.icon-pill{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid var(--border);
}

.list-check li{
  margin-bottom:.5rem;
}
.list-check li::marker{
  color: rgba(255,122,0,.85);
}

.card-hover{
  transition: transform .15s ease, filter .15s ease;
}
.card-hover:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
}

.code-inline{
  padding:2px 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9em;
}
/* --- FIX: make form text visible on all browsers --- */
.form-control,
.form-select,
textarea.form-control{
  color: #ffffff !important;           /* typed text */
  caret-color: #ffffff !important;     /* cursor */
}

.form-control::placeholder,
textarea.form-control::placeholder{
  color: rgba(255,255,255,.65) !important;  /* placeholder */
  opacity: 1 !important;
}

/* Fix browser autofill (Chrome) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Optional: make labels stand out */
.form-label{
  color: rgba(255,255,255,.85) !important;
}