/* GTS·W1 Advisory — styles.css */
:root {
  --bg: #0b1324;
  --panel: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #00b3a4; /* teal */
  --accent-2: #d4af37; /* gold */
  --card: #0f172a;
  --border: #1f2937;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(11,19,36,0.8); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text); }
.brand img { width: 28px; height: 28px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border); color: var(--text); padding: .5rem .6rem; border-radius: .4rem; }
nav#primary-nav { display: flex; gap: 1rem; }
nav#primary-nav a { padding: .5rem .75rem; border-radius: .4rem; }
nav#primary-nav a.cta { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #0b1324; font-weight: 600; }

@media (max-width: 860px) {
  nav#primary-nav { display: none; }
  .nav-toggle { display: inline-block; }
}


/* Centered logo above headline */
.hero-stack {
  text-align: center; /* centers inline elements like <img> and <h1> */
}

.hero-logo-centered {
  display: block;      /* ensures margin auto works */
  margin: 0 auto 1rem; /* centers horizontally + adds spacing below */
  width: 100%;
  max-width: 560px;    /* keep the @2x crisp but not oversized */
  filter: drop-shadow(0 16px 48px rgba(0,0,0,0.35)); /* optional depth */
}

/* Mobile tune: slightly smaller max width on small screens */
@media (max-width: 480px) {
  .hero-logo-centered { max-width: 420px; }
}

.hero { background: radial-gradient(1200px 600px at 10% -10%, rgba(0,179,164,0.25), transparent), radial-gradient(900px 500px at 90% 10%, rgba(212,175,55,0.22), transparent); border-bottom: 1px solid var(--border); }
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 5rem 1.25rem; text-align: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.25rem); margin: 0 0 .75rem; }
.lead { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--muted); }
.hero-ctas { margin-top: 1.25rem; display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.btn { display: inline-block; padding: .7rem 1rem; border-radius: .5rem; border: 1px solid var(--border); }
.btn-primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #0b1324; font-weight: 700; }
.btn-secondary { background: var(--panel); color: var(--text); }
.btn-link { color: var(--accent); }

section { padding: 3rem 1.25rem; max-width: 1100px; margin: 0 auto; }
section h2 { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }

.region-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.badge { background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: .4rem .7rem; color: var(--muted); }

.content { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem; }
.content h1 { margin-top: 0; }
.region-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps li { margin: .5rem 0; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: .5rem; }
.steps-large li { font-size: 1.05rem; }

.post { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; margin-bottom: 1rem; }
.post .date { color: var(--muted); }

.contact-form { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; }
.form-row { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
input, select, textarea { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: .6rem; border-radius: .4rem; }
.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-note { color: var(--muted); }

footer { border-top: 1px solid var(--border); padding-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; padding: 0 1.25rem 1.25rem; }
footer h4 { margin: 0 0 .5rem 0; }
.legal { border-top: 1px solid var(--border); padding: 1rem 1.25rem; color: var(--muted); }