/* ============================================================
   omnibevel.css — OmniBevel product page
   Imports: tokens.css + base.css must be loaded first
   ============================================================ */

/* ── Page hero ─────────────────────────────────────────────────── */
.page-hero {
  min-height: 52vh;
  background: linear-gradient(145deg, #0e0820 0%, #1a1040 55%, #2d1060 100%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 72px;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 75% 40%, rgba(180,0,255,0.15) 0%, transparent 65%),
    repeating-linear-gradient(-45deg, transparent, transparent 32px, rgba(200,100,255,0.04) 32px, rgba(200,100,255,0.04) 33px);
  pointer-events: none;
}
.page-hero-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--section-px);
  position: relative;
  z-index: 1;
  max-width: 740px;
}
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.page-hero-eyebrow::before {
  content: '';
  width: 20px; height: 2px;
  background: #cc44ff;
  border-radius: 2px;
}
.page-hero h1 { color: #fff; margin-bottom: 16px; }
.page-hero-sub {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 580px;
}

/* ── Section eyebrow ─────────────────────────────────────────── */
.section-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #512da8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

/* ── Why OmniBevel ───────────────────────────────────────────── */
.why-section { background: var(--bg2); }
.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.why-text h2  { color: var(--text); margin-bottom: 20px; }
.why-text > p { color: var(--text2); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 32px; }
.feature-bullets { display: flex; flex-direction: column; gap: 14px; }
.feature-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--text2);
  line-height: 1.5;
}
.feature-bullet-dot {
  width: 20px; height: 20px;
  background: #512da8;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-bullet-dot svg { color: #fff; }
.why-visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 16px 56px rgba(81,45,168,0.18);
  background: linear-gradient(135deg, #0e0820, #1a1040);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
.why-visual-icon {
  width: 52%; height: auto;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.5));
}

/* ── Features grid ────────────────────────────────────────────── */
.features-section { background: var(--bg); }
.features-header { text-align: center; max-width: 600px; margin-inline: auto; margin-bottom: 56px; }
.features-header h2 { margin-bottom: 12px; }
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 28px;
  transition: box-shadow var(--duration-base), transform var(--duration-base);
}
.feature-card:hover { box-shadow: 0 10px 36px rgba(81,45,168,0.12); transform: translateY(-2px); }
.feature-card h3 { color: var(--text); margin-bottom: 10px; }
.feature-card p  { color: var(--text2); font-size: 0.9375rem; line-height: 1.65; }

/* ── Compatibility ────────────────────────────────────────────── */
.compat-section { background: var(--bg); padding-block: 64px; }
.compat-inner { text-align: center; }
.compat-inner h2  { margin-bottom: 12px; }
.compat-inner > p { color: var(--text2); font-size: 1.0625rem; margin-bottom: 48px; }
.compat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.compat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.9rem; font-weight: 600;
  color: var(--text);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.compat-chip:hover { border-color: #512da8; box-shadow: 0 2px 12px rgba(81,45,168,0.12); }
.compat-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #512da8;
  flex-shrink: 0;
}

/* ── Page CTA ─────────────────────────────────────────────────── */
.page-cta {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
  text-align: center;
  padding-block: 72px;
}
.page-cta h2 { color: #fff; margin-bottom: 12px; }
.page-cta p  { color: rgba(255,255,255,0.65); font-size: 1.0625rem; margin-bottom: 28px; }
.page-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.page-cta .btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-white);
  outline-offset: var(--focus-ring-offset);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .why-inner { grid-template-columns: 1fr; gap: 40px; }
  .why-visual { display: none; }
}
@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr; }
}