:root {
  --cf-orange: #f6821f;
  --cf-orange-dark: #d96c0d;
  --cf-amber: #fbad41;
  --cf-ink: #1a1a2e;
  --cf-muted: #5f6672;
}

.cf-page p { font-size: 1rem; color: var(--cf-muted); }
.cf-page h2 { font-size: 1.65rem; font-weight: 700; color: var(--cf-ink); }
.cf-page h3 { font-weight: 700; color: var(--cf-ink); }
.cf-page .cf-title { text-align: center; }
.cf-page .cf-lead { max-width: 720px; margin: .75rem auto 1.75rem; text-align: center; }

/* Hero */
.cf-hero {
  position: relative; min-height: 420px; display: flex; align-items: center;
  background: #000 url('/images/cloudflare/hero-poster.webp') center / cover no-repeat;
}
.cf-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.3)); }
.cf-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--cf-orange), transparent 80%); }
.cf-hero .container { position: relative; z-index: 1; }
.cf-page .cf-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; max-width: 780px; margin: 0 0 1rem; }
.cf-page .cf-hero p { color: #e9ecf1; max-width: 560px; margin-bottom: 1.5rem; }

/* Buttons */
.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.5rem; border: 2px solid var(--cf-orange); border-radius: 8px;
  background: var(--cf-orange); color: #fff !important; font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.cf-btn:hover, .cf-btn:focus-visible { border-color: var(--cf-orange-dark); background: var(--cf-orange-dark); }
.cf-btn:focus-visible, .cf-link:focus-visible { outline: 3px solid rgba(246,130,31,.35); outline-offset: 3px; }

/* Feature strip */
.cf-feats { background: #0e0f14; }
.cf-feat { height: 100%; padding: 1.5rem; text-align: center; }
.cf-feat i { color: var(--cf-orange); font-size: 1.6rem; margin-bottom: .75rem; }
.cf-page .cf-feat h3 { color: #fff; font-size: 1.2rem; margin-bottom: .5rem; }
.cf-page .cf-feat p { color: rgba(255,255,255,.72); font-size: .94rem; margin: 0; }

/* Category tabs */
.cf-tabbar { padding: 0; background: #fff; border-bottom: 1px solid #e6e6e9; }
.cf-tabbar .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .25rem; }
.cf-tabbar .nav::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .cf-tabbar .nav { justify-content: center; } }
.cf-tabbar .nav-link {
  position: relative; white-space: nowrap; display: flex; align-items: center; gap: .55rem;
  padding: 1.1rem 1.15rem; border-radius: 0; background: none; color: #52545c; font-weight: 600; font-size: .95rem;
  transition: color .2s ease;
}
.cf-tabbar .nav-link::after {
  content: ''; position: absolute; left: 1.15rem; right: 1.15rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--cf-orange), var(--cf-amber)); transform: scaleX(0); transition: transform .25s ease;
}
.cf-tabbar .nav-link i { color: #9a9ca4; transition: color .2s ease; }
.cf-tabbar .nav-link:hover { color: var(--cf-ink); background: none; }
.cf-tabbar .nav-link:hover::after { transform: scaleX(.4); }
.cf-tabbar .nav-link.active { color: var(--cf-ink); background: none; }
.cf-tabbar .nav-link.active::after { transform: scaleX(1); }
.cf-tabbar .nav-link.active i { color: var(--cf-orange); }
.cf-count {
  min-width: 1.5rem; padding: .05rem .45rem; border-radius: 999px; background: #f0f0f2; color: #6b6d75;
  font-size: .72rem; font-weight: 700; text-align: center; transition: background-color .2s ease, color .2s ease;
}
.cf-tabbar .nav-link.active .cf-count { background: rgba(246,130,31,.14); color: var(--cf-orange-dark); }

/* Dotted panel background, as on cloudflare.com */
.cf-panel {
  background-color: #fafafa;
  background-image: radial-gradient(#dcdce0 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Product groups */
.cf-page .cf-group-title {
  margin-bottom: 1.75rem; font-size: 1.35rem; letter-spacing: -.01em;
}
.cf-prod {
  position: relative; height: 100%; display: flex; flex-direction: column; padding: 1.35rem; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(26,26,46,.06), 0 6px 20px rgba(26,26,46,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cf-prod:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(246,130,31,.12), 0 14px 32px rgba(246,130,31,.18); }
.cf-prod-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 1rem;
  border-radius: 10px; background: linear-gradient(135deg, var(--cf-orange), var(--cf-amber)); color: #fff; font-size: 1rem;
  box-shadow: 0 4px 10px rgba(246,130,31,.3);
}
.cf-prod h4 { font-size: 1.05rem; font-weight: 700; color: var(--cf-ink); margin-bottom: .4rem; }
.cf-page .cf-prod p { font-size: .9rem; line-height: 1.5; margin: 0 0 1.1rem; }
.cf-link {
  display: inline-flex; align-items: center; margin-top: auto; align-self: flex-start; padding: .55rem 1.1rem; border: 2px solid rgba(246,130,31,.55); border-radius: 8px; background: none;
  color: var(--cf-orange-dark); font-size: .9rem; font-weight: 600; line-height: 1.3; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cf-link i { font-size: .8em; margin-left: .45rem; transition: transform .2s ease; }
.cf-link:hover { background: var(--cf-orange); border-color: var(--cf-orange); color: #fff; }
.cf-link:hover i { transform: translateX(3px); }

/* CTA */
.cf-cta { position: relative; background: #000 url('/images/cloudflare/hero-poster.webp') center / cover no-repeat; }
.cf-cta::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.cf-cta .container { position: relative; z-index: 1; }
.cf-page .cf-cta h2 { color: #fff; }
.cf-page .cf-cta p { color: #fff; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cf-btn, .cf-prod, .cf-link, .cf-link i, .cf-tabbar .nav-link::after { transition: none; }
}

/* Hero logo */
.cf-hero-logo {
  display: block;
  width: auto;
  height: 44px;
  margin: 0 0 1.5rem;
}