:root {
    --bg:#f5f8ff;
    --surface:#fff;
    --surface-soft:#f8fafc;
    --line:#e5e7eb;
    --text:#111827;
    --muted:#6b7280;
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --shadow:0 18px 45px rgba(15,23,42,.08);
    --container:1180px
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    font-family:Inter,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.09),transparent 30%),
        var(--bg);
    line-height:1.6
}

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

.container {
    width:min(var(--container),calc(100% - 32px));
    margin:0 auto
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    padding:14px 20px;
    font-size:15px;
    font-weight:700
}

.btn-primary {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff
}

.btn-outline {
    background:#fff;
    border:1px solid var(--line)
}

.tag {
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    color:var(--primary-dark);
    font-weight:700;
    font-size:13px
}

header {
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(14px);
    background:rgba(245,248,255,.84);
    border-bottom:1px solid rgba(229,231,235,.7)
}

.nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
    gap:18px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    font-size:20px
}

.brand-mark {
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--primary),#60a5fa);
    color:#fff;
    display:grid;
    place-items:center
}

.nav-links {
    display:flex;
    gap:24px;
    color:var(--muted);
    font-weight:600
}

.nav-actions {
    display:flex;
    gap:12px
}

.page-hero {
    padding:70px 0 28px
}

.page-hero h1 {
    font-size:clamp(34px,5vw,56px);
    line-height:1.05;
    margin:16px 0;
    letter-spacing:-.03em;
    max-width:920px
}

.page-hero p {
    color:var(--muted);
    font-size:18px;
    max-width:820px;
    margin:0
}

.content-section {
    padding:28px 0 56px
}

.content-card {
    background:var(--surface);
    border:1px solid rgba(229,231,235,.9);
    border-radius:26px;
    padding:28px;
    box-shadow:var(--shadow)
}

.content-card h2 {
    margin:0 0 12px;
    font-size:28px
}

.content-card h3 {
    margin:24px 0 10px;
    font-size:21px
}

.content-card p,
.content-card li {
    color:var(--muted);
    font-size:16px
}

.content-card p {
    margin:0 0 14px
}

.content-card ul {
    margin:0 0 16px;
    padding-left:22px;
    display:grid;
    gap:8px
}

.contact-box {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:22px
}

.contact-item {
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px
}

.contact-item strong {
    display:block;
    margin-bottom:6px
}

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

footer {
    border-top:1px solid rgba(229,231,235,.9);
    padding:26px 0 40px;
    background:rgba(255,255,255,.5)
}

.footer-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:18px;
    align-items:center
}

.footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    color:var(--muted);
    font-weight:600
}

.footer-note {
    color:var(--muted);
    font-size:14px;
    max-width:620px
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(229, 231, 235, 0.9);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.nav-avatar,
.nav-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}

.nav-avatar-fallback {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

@media(max-width:900px) {
    .contact-box {
        grid-template-columns:1fr
    }
    .nav-links {
        display:none
    }
    .nav-actions .btn-outline {
        display:none
    }
    .page-hero {
        padding-top:36px
    }
}