/* Scoped styles for Dragons Community */
#dc-community-offer{ --dragon-red:#e11d48; --dragon-red-700:#be123c; --ink:#0b0b0c; --ink-2:#14151a; --ring:0 0 0 3px rgba(225,29,72,.25); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif; color:#f9fafb; background:linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 60%, #16181e 100%);}
#dc-community-offer *{ box-sizing:border-box }
#dc-community-offer a{ color:inherit; text-decoration:none }
#dc-community-offer img{ max-width:100%; display:block }

/* HERO */
#dc-community-offer header.hero{ position:relative; height:600px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; text-align:center; color:white }
#dc-community-offer .hero video{ position:absolute; inset:0; width:100%; height:600px; object-fit:cover; z-index:-2 }
#dc-community-offer .scrim{ position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.9) 100%); z-index:-1 }

#dc-community-offer .topbar{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; z-index:5 }
#dc-community-offer .brand{ display:flex; align-items:center; gap:12px }
#dc-community-offer .brand img{ width:44px; height:44px; border-radius:12px; box-shadow:0 6px 24px rgba(225,29,72,.45) }
#dc-community-offer .brand h1{ font-size:18px; margin:0 }
#dc-community-offer .navlinks{ display:flex; gap:10px; flex-wrap:wrap }
#dc-community-offer .btn{ appearance:none; border:none; background:var(--dragon-red); color:white; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer; transition:.2s transform,.2s box-shadow; display:inline-flex; align-items:center; gap:10px }
#dc-community-offer .btn.secondary{ background:transparent; border:1px solid rgba(255,255,255,.35) }
#dc-community-offer .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 24px rgba(225,29,72,.35) }
#dc-community-offer .btn:focus{ outline:none; box-shadow:var(--ring) }

#dc-community-offer .hero-content{ position:relative; z-index:4; max-width:980px; margin:0 auto; padding:0 16px }
#dc-community-offer .hero-logo{ width:min(200px,30vw); margin:0 auto 16px; border-radius:20px; box-shadow:0 0 40px rgba(225,29,72,.6) }
#dc-community-offer .hero h2, #dc-community-offer .hero-content h2{ font-size:clamp(36px,5vw,64px); line-height:1.08; margin:6px 0 8px }
#dc-community-offer .tagline{ font-size:clamp(16px,2vw,20px); color:#e2e8f0; max-width:72ch; margin:0 auto 18px }

/* RIBBON */
#dc-community-offer .ribbon{ position:relative; isolation:isolate }
#dc-community-offer .ribbon::before{ content:""; position:absolute; inset:-1px; z-index:-1; background:linear-gradient(135deg, rgba(225,29,72,.25), rgba(255,255,255,.05)); filter:blur(18px) }
#dc-community-offer .ribbon-inner{ background:radial-gradient(120% 100% at 50% 0%, rgba(225,29,72,.18), rgba(255,255,255,.06) 40%, rgba(0,0,0,.2) 100%); border:1px solid rgba(255,255,255,.12); border-radius:18px; margin:-34px auto 0; max-width:1200px; padding:18px 16px }
#dc-community-offer .ribbon-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center }
@media (max-width:900px){ #dc-community-offer .ribbon-grid{ grid-template-columns:1fr } }
#dc-community-offer .ribbon h3{ margin:0; font-size:clamp(22px,3.2vw,34px) }
#dc-community-offer .ribbon .chips{ display:flex; flex-wrap:wrap; gap:8px }
#dc-community-offer .chip{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); font-weight:700 }
#dc-community-offer .ribbon .cta{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap }
@media (max-width:900px){ #dc-community-offer .ribbon .cta{ justify-content:flex-start } }

/* CONTAINER */
#dc-community-offer .container{ max-width:1200px; margin-inline:auto; padding:clamp(16px,2.5vw,24px) }

/* SECTION TITLE */
#dc-community-offer .section-title{ font-size:clamp(22px,3vw,28px); margin:0 0 10px }

/* PRICING */
#dc-community-offer .price-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
@media (max-width:760px){ #dc-community-offer .price-cards{ grid-template-columns:1fr } }
#dc-community-offer .dc-card{ position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); padding:20px; border-radius:18px }
#dc-community-offer .dc-card::after{ content:""; position:absolute; inset:-2px; z-index:-1; background:radial-gradient(200px 90px at 20% 0%, rgba(225,29,72,.25), transparent 60%) }
#dc-community-offer .dc-card h4{ margin:0 0 8px; font-size:18px }
#dc-community-offer .prices{ display:flex; align-items:baseline; gap:10px }
#dc-community-offer .strike{ opacity:.65; text-decoration:line-through }
#dc-community-offer .big{ font-size:40px; font-weight:900 }
#dc-community-offer .kicker{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15); margin-bottom:12px }

/* CAROUSEL (scoped to our gallery and fixtures only) */
#dc-community-offer #gallery, #dc-community-offer .dc-fixtures-carousel{ position:relative; margin-top:22px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0e0f12; padding:12px }
#dc-community-offer #gallery .track{ display:flex; transition:transform .6s ease; will-change:transform }
#dc-community-offer .dc-fixtures-carousel .track{ display:flex; transition:transform .4s ease; will-change:transform }
#dc-community-offer #gallery .slide, #dc-community-offer .dc-fixtures-carousel .slide{ flex:0 0 25%; max-width:25%; min-width:25%; padding:6px }
#dc-community-offer #gallery .frame{ position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:#0f1116 }
#dc-community-offer #gallery .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
@media (max-width:900px){ #dc-community-offer #gallery .slide, #dc-community-offer .dc-fixtures-carousel .slide{ flex-basis:50%; max-width:50%; min-width:50% } }
@media (max-width:640px){ #dc-community-offer #gallery .slide, #dc-community-offer .dc-fixtures-carousel .slide{ flex-basis:100%; max-width:100%; min-width:100% } }
#dc-community-offer #gallery .controls, #dc-community-offer .dc-fixtures-carousel .controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 6px; pointer-events:none; z-index:10 }
#dc-community-offer #gallery .arrow, #dc-community-offer .dc-fixtures-carousel .arrow{ pointer-events:auto; width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.45); display:grid; place-items:center; cursor:pointer }
#dc-community-offer #gallery .dots, #dc-community-offer .dc-fixtures-carousel .dots{ display:flex; gap:8px; justify-content:center; margin-top:10px }
#dc-community-offer #gallery .dot, #dc-community-offer .dc-fixtures-carousel .dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.65); cursor:pointer }
#dc-community-offer #gallery .dot.active, #dc-community-offer .dc-fixtures-carousel .dot.active{ background:var(--dragon-red); border-color:rgba(255,255,255,.9) }

/* WHY + STEPS */
#dc-community-offer .ribbon, #dc-community-offer #gallery, #dc-community-offer .why, #dc-community-offer #contact, #dc-community-offer .fixtures{ padding:56px 0 }
#dc-community-offer .pill-grid{ display:flex; flex-wrap:wrap; gap:10px }
#dc-community-offer .pill{ padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.03) }
#dc-community-offer .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:900px){ #dc-community-offer .grid-3{ grid-template-columns:1fr } }
#dc-community-offer .why .item{ padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)) }
#dc-community-offer .why svg{ width:28px; height:28px }

/* FORM */
#dc-community-offer form{ display:grid; gap:14px }
#dc-community-offer .form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
@media (max-width:800px){ #dc-community-offer .form-grid{ grid-template-columns:1fr } }
#dc-community-offer label{ font-weight:700; font-size:14px }
#dc-community-offer input, #dc-community-offer select, #dc-community-offer textarea{ width:100%; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0f1116; color:#f1f5f9 }
#dc-community-offer input:focus, #dc-community-offer select:focus, #dc-community-offer textarea:focus{ outline:none; box-shadow:var(--ring); border-color:var(--dragon-red) }
#dc-community-offer .disclaimer{ font-size:12px; color:#cbd5e1 }

/* FOOTER */
#dc-community-offer footer{ border-top:1px solid rgba(255,255,255,.08); background:#0c0d10; color:#cbd5e1 }

/* MOBILE TWEAKS: hero buttons smaller and right-aligned */
@media (max-width:640px){
  #dc-community-offer .topbar{ justify-content:flex-start; padding:10px 12px }
  #dc-community-offer .brand h1{ font-size:14px }
  #dc-community-offer .navlinks{ margin-left:auto; gap:6px; flex-wrap:nowrap; justify-content:flex-end }
  #dc-community-offer .topbar .btn{ padding:6px 10px; border-radius:10px; font-size:13px; line-height:1.1 }
}

/* Ensure carousel arrows are clearly visible */
#dc-community-offer #gallery .controls, #dc-community-offer .dc-fixtures-carousel .controls{ z-index:10 }