:root { --accent: #b5179e; }
html { scroll-behavior: smooth; }
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:#0f172a; background:#ffffff; }

a, button { outline-color: var(--accent); outline-offset:2px; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent); }

.mouse-gradient { position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(600px circle at var(--mx,50vw) var(--my,40vh), rgba(181,23,158,.08), transparent 60%);
  transition: background 120ms linear; }
@media (prefers-reduced-motion: reduce){ .mouse-gradient{ background:none !important; } }

.site-header { position:sticky; top:0; z-index:5; backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75); border-bottom:1px solid #e5e7eb; }
.nav-inner { max-width:1200px; margin:0 auto; padding:12px 20px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; }
.brand { font-weight:800; letter-spacing:-.01em; color:#0f172a; text-decoration:none; justify-self:start; }
.nav { display:flex; gap:18px; justify-self:center; }
.nav a { color:#0f172a; opacity:.85; text-decoration:none; font-weight:500; }
.nav a:hover { opacity:1; }
.actions { justify-self:end; display:flex; gap:10px; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:6px; border:1px solid #e5e7eb; border-radius:999px; padding:4px 10px; font-size:12px; background:#fff; color:#0f172a }
.badge-accent { background: rgba(181,23,158,.08); border-color: rgba(181,23,158,.18); color:#7a0a60; }
.badge-available { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.btn { display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; transition: transform .12s ease, filter .12s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(.96); }
.btn-primary { background: var(--accent); color:#fff; }
.btn-outline { border:1px solid #111827; color:#111827; background:#fff; }
.btn-soft { border:1px solid #e5e7eb; background:#fff; color:#0f172a; border-radius:12px; padding:8px 12px; font-weight:600; text-decoration:none; }

.hamburger { display:none; cursor:pointer; border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:8px 10px; }
.mobile-panel {
  display: none;
  position:fixed; inset:0 0 auto 0; top:56px;
  background:#fff; border-bottom:1px solid #e5e7eb; z-index:6;
}

/* Mobile only: show when open */
@media (max-width: 820px){
  .nav { display:none; }
  .actions { display:none; }
  .hamburger { display:block; justify-self:end; }
  .nav-inner { grid-template-columns: 1fr 1fr; }

  .mobile-panel.open { display:block; }
}

/* Desktop safety */
@media (min-width: 821px){
  .mobile-panel { display:none !important; }
}

.mobile-inner { max-width:1200px; margin:0 auto; padding:16px 20px; display:grid; gap:12px; }
.mobile-links, .mobile-ctas { display:grid; gap:10px; }
.mobile-links a { padding:10px 0; color:#0f172a; text-decoration:none; font-weight:600; }
.mobile-ctas a { text-align:center; }

/* Mobile only: show when open */
@media (max-width: 820px){
  .nav { display:none; }
  .actions { display:none; }
  .hamburger { display:block; justify-self:end; }
  .nav-inner { grid-template-columns: 1fr 1fr; }

  }
/* Desktop safety: always hide the mobile panel */
@media (min-width: 821px){
  .mobile-panel { display: none !important; }
}
main { position:relative; z-index:1; }
.section { position:relative; z-index:1; padding:88px 20px; border-top:1px solid #f1f5f9; }
.container { max-width:1200px; margin:0 auto; }

.hero { min-height:70vh; display:flex; align-items:center; text-align:center; border-top:0; }
.hero h1 { font-size:56px; line-height:1.05; margin:0; font-weight:800; letter-spacing:-.02em; }
.hero p { margin:16px auto 0; max-width:auto; color:#334155; font-size:18px; white-space:pre-line; }
.cta { margin-top:1.5rem; display:flex; gap:1rem; justify-content:center; }
@media (max-width: 640px){ .hero h1 { font-size:36px; } }

.quickfacts { margin-top:14px; display:flex; gap:14px; justify-content:center; color:#475569; font-size:14px; flex-wrap:wrap }
.quickfacts span::after { content:"•"; margin:0 8px; color:#cbd5e1 }
.quickfacts span:last-child::after { content:"" }

h2.section-title { font-size:32px; margin:0 0 8px; font-weight:800; letter-spacing:-.02em; }
@media (max-width:640px){ h2.section-title{ font-size:22px; } }
p.section-lead { margin:8px 0 0; color:#475569; }
.tiny-caption { color:#64748b; font-size:12px; margin-top:2px; }

.filterbar { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 8px }
.filterbar .chip { padding:6px 12px; border-radius:999px; border:1px solid #e5e7eb; cursor:pointer; font-size:12px; background:#fff; color:#0f172a }
.filterbar .chip.active { background: var(--accent); color:#fff; border-color: var(--accent) }
.chiprow { display:flex; gap:6px; flex-wrap:wrap; }

.grid { margin-top:12px; display:grid; gap:16px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width:700px){ .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width:1024px){ .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { border:1px solid #e5e7eb; border-radius:18px; background:#fff; overflow:hidden; display:flex; flex-direction:column; transition: transform .25s ease, box-shadow .25s ease }
.thumb { aspect-ratio:16/9; width:100%; object-fit:cover; transition: transform .25s ease }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(2,8,23,.08) }
.card:hover .thumb { transform: scale(1.02) }
@media (prefers-reduced-motion: reduce){ .card:hover, .card:hover .thumb { transform:none !important; } }
.thumb-btn { all: unset; display:block; cursor:pointer; line-height:0; }
.thumb-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.card-body { padding:14px; display:grid; gap:8px; }
.card h3 { margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.card h3 a { color:#0f172a; text-decoration:none; }
.card h3 a:hover { text-decoration:underline; }
.desc dt { font-weight:600; color:#0f172a; }
.desc dd { margin:4px 0 10px; color:#334155; }

.modal { position:fixed; inset:0; z-index:50; background:rgba(2,8,23,.55); display:grid; place-items:center; padding:20px }
.modal-card { width:min(960px, 96vw); background:#000; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(2,8,23,.5) }
.modal-header { display:flex; justify-content:flex-end; padding:8px; background:#0b1220 }
.modal-close { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:700 }
.video-embed { aspect-ratio:16/9; width:100%; height:auto; display:block }

.tiles { margin-top:16px; display:grid; gap:12px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width:800px){ .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { border:1px solid #e5e7eb; border-radius:16px; padding:16px; background:#fff; }
.tile h4 { margin:0 0 8px; font-size:16px; font-weight:700; }
.chipset { margin-top:8px; }
.chipset ul { margin:0; padding-left:18px; }
.chipset li { margin:6px 0; color:#0f172a; }

.test-card { border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:18px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start }
.avatar { width:44px; height:44px; border-radius:999px; background:#f1f5f9; display:grid; place-items:center; font-size:18px; color:#64748b }
.stars { color:#cbd5e1; font-size:14px; letter-spacing:2px }
.quote { margin:6px 0 0 0; font-size:16px; line-height:1.7; }
.who { color:#64748b; font-size:13px }

.contact { background: #0f172a; color:#fff; }
.contact .btn-primary { background:#fff; color:#0f172a; }
.contact .btn-outline { border:1px solid #fff; color:#0f172a; background:#fff; }
.contact a.link { color:#fff; text-decoration:underline; }
.contactfacts { margin:10px 0 0 0; color:#e2e8f0 }

.backtop { position:fixed; right:16px; bottom:16px; z-index:7; display:grid; place-items:center; width:44px; height:44px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.08); }

.footer { padding:18px 20px; border-top:1px solid #e5e7eb; color:#64748b; }
.footer a { color:inherit; }

/* --- Desktop refinements to mirror React preview exactly --- */
@media (min-width: 900px){
  .hero { text-align:center; }
  .hero .container { display:grid; grid-template-columns: 1fr; }
  .cta { justify-content:center; }
  .quickfacts { justify-content:center; }
}


@media (min-width: 1200px){
  .container { max-width: 1200px; }
}

.card { box-shadow: 0 8px 24px rgba(2,8,23,.06); }
.card:hover { box-shadow: 0 16px 40px rgba(2,8,23,.10); }

/* tighter gutters like React */
.grid { gap: 18px; }
.tiles { gap: 14px; }

/* Header spacing */
.nav-inner { gap: 12px; }
.nav a { font-weight:600; letter-spacing: -0.01em; }
.actions .btn { padding:10px 14px; border-radius:10px; }

/* Section spacing parity */
.section { padding: 90px 20px; }
/* Featured card block above the grid */
.featured-card{
  display:grid;
  grid-template-columns: 1.2fr 1fr;   /* big media, text on right */
  gap:18px;
  border:1px solid #e5e7eb;
  border-radius:22px;
  background:#fff;
  padding:16px;
  margin-bottom:24px;                 /* special space above others */
  box-shadow: 0 22px 60px rgba(2,8,23,.06);
  position:relative;
}

.featured-card .feat-media{
  position:relative;
  overflow:hidden;
  border-radius:16px;
}

.featured-card .thumb{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  transition: transform .25s ease;
}
.featured-card:hover .thumb{ transform: scale(1.02); }

.ribbon{
  position:absolute;
  top:12px; left:12px;
  background: var(--accent);
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(181,23,158,.25);
}

.featured-card .feat-body{
  display:grid;
  align-content:start;
  gap:10px;
}

.featured-card .feat-top{
  display:flex; justify-content:space-between; align-items:center;
}

.featured-card .feat-title{
  margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em;
}

/* Mobile: stack */
@media (max-width: 900px){
  .featured-card{ grid-template-columns: 1fr; }
}
.thumb-btn {
  position: relative; /* ensure overlay positions correctly */
  display: block;
  line-height: 0;
  cursor: pointer;
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: rgba(0,0,0,0.25);
}

.thumb-btn:hover .play-overlay {
  opacity: 1;
}