/* IAC colour scheme + hero color-field for the QuizVidya homepage. Loaded after index.css. */
/* ===== HERO ===== */
  .hero{position:relative!important;overflow:hidden!important;
    background:linear-gradient(160deg,#48628c 0%,#425b7e 52%,#3a5170 100%)!important}
  .hero::before{content:"";position:absolute;inset:-2%;z-index:0;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20393%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cpath%20d%3D%27M1460%20-30%20L800%20-30%20C1070%2090%201230%20160%201360%20235%20C1405%20262%201435%20285%201460%20305%20L1460%20-30%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3Cpath%20d%3D%27M-30%20423%20L600%20423%20C380%20355%20240%20320%20130%20305%20C70%20297%2015%20265%20-30%20225%20L-30%20423%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3Cpath%20d%3D%27M1460%20-30%20L1150%20-30%20C1280%2070%201360%20140%201460%20205%20L1460%20-30%20Z%27%20fill%3D%27%23f0837e%27%20opacity%3D%270.35%27%2F%3E%3C%2Fsvg%3E") center center/cover no-repeat;
    animation:heroiac 50s ease-in-out infinite alternate;will-change:transform}
  .hero .container{position:relative;z-index:1}
  @keyframes heroiac{from{transform:translate3d(0,0,0) scale(1.012)}to{transform:translate3d(-1%,0.6%,0) scale(1.024)}}
  @media (max-width:991px){.hero::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20768%20462%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cpath%20d%3D%27M788%20-20%20L360%20-20%20C520%2055%20640%2082%20788%20112%20L788%20-20%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3Cpath%20d%3D%27M-20%20482%20L380%20482%20C210%20400%20108%20386%20-20%20372%20L-20%20482%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3C%2Fsvg%3E")!important}}
  @media (max-width:600px){.hero::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20375%20460%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cpath%20d%3D%27M395%20-20%20L120%20-20%20C222%2032%20305%2052%20395%2066%20L395%20-20%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3Cpath%20d%3D%27M-20%20480%20L245%20480%20C140%20428%2078%20418%20-20%20406%20L-20%20480%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3C%2Fsvg%3E")!important}}
  @media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

  /* ===== COLOUR SCHEME ===== */
  /* Unify brand coral -> IAC coral (icons/prices/eyebrows). LOGO left ORIGINAL (not touched). */
  .benefit-card i,.benefit-card .price{color:#e86e6c!important}
  .tourf-feat-ic{color:#e86e6c!important;background:#fdeeee!important}
  .tourf-eyebrow,.pricing-highlight strong,.pricing-info strong{color:#e86e6c!important}
  .featured{border-color:#e86e6c!important}

  /* Blue -> slate on BUTTONS & non-link accents (text hyperlinks NOT touched -> stay default blue) */
  .btn-primary,.plan-button,.plan-button.btn-primary{background:#425b7e!important;border-color:#425b7e!important;color:#fff!important}
  .btn-primary:hover,.plan-button:hover,.plan-button.btn-primary:hover{background:#35496a!important;border-color:#35496a!important;color:#fff!important}
  .btn-outline{background:#fff!important;color:#425b7e!important;border:2px solid #425b7e!important}
  .btn-outline:hover{background:#425b7e!important;color:#fff!important}
  .user-initial-circle,.competition-tag.active{background:#425b7e!important}
  .child-avatar{background:linear-gradient(135deg,#4a6389,#35496a)!important}

  /* Tournament CTA: purple -> coral */
  .tourf-cta{background:#e86e6c!important;box-shadow:0 4px 12px rgba(44,62,80,.10)!important;transition:background .18s ease,transform .18s ease,box-shadow .18s ease!important}
  .tourf-cta:hover,.tourf-cta:focus{background:#dd5f5d!important;transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(44,62,80,.16)!important}
  .tourf-cta:active{transform:translateY(0)!important;box-shadow:0 3px 10px rgba(44,62,80,.10)!important}
  /* Pricing accent bars -> slate<->coral */
  .accent-purple{--accent:#5f7aa3!important} .accent-blue{--accent:#425b7e!important}
  .accent-sky{--accent:#e86e6c!important} .accent-slate{--accent:#d95d59!important}

  /* Included checkmarks -> slate */
  .features-list li i.fa-check,.feature-list li svg{color:#425b7e!important}
  /* Footer top divider: yellow -> slate */
  .footer{border-top-color:#425b7e!important}

/* IAC hero logo card fits small screens (iPhone SE / 320px) */
@media (max-width:576px){
  .hero .container > div > div{max-width:calc(100% - 8px)!important;box-sizing:border-box!important;padding:12px 14px!important}
  .hero .container > div > div img{max-width:100%!important;height:auto!important}
}

/* ---- Homepage icons: inline SVG (no Font Awesome / bootstrap-icons dependency) ---- */
/* ===== How QuizVidya Helps — feature section (senior UI/UX refinement) ===== */
#how-quizvidya-helps{padding:60px 0 56px}
#how-quizvidya-helps .container{max-width:1340px;width:93%}
/* Typographic hierarchy: small coral eyebrow -> strong dark heading */
#how-quizvidya-helps .how-eyebrow{display:block;text-align:center;color:#e86e6c;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
#how-quizvidya-helps h2{margin:0 0 34px;color:#2c3e50}
/* Grid: 5 across (desktop), 2 (tablet), 1 (mobile); all cards equal height */
#how-quizvidya-helps .benefits-grid{grid-template-columns:repeat(5,1fr);gap:20px;align-items:stretch;grid-auto-rows:1fr}
@media(max-width:1199px){#how-quizvidya-helps .benefits-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){#how-quizvidya-helps .benefits-grid{grid-template-columns:1fr;gap:16px;grid-auto-rows:auto}}
/* Card: one consistent component, TOP-anchored content (icons/titles align across row) */
#how-quizvidya-helps .benefit-card{display:flex;flex-direction:column;justify-content:flex-start;text-align:center;background:#fff;border:1px solid #e9edf3;border-radius:16px;box-shadow:0 4px 16px rgba(44,62,80,.05);padding:36px 24px 34px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),border-color .25s ease}
#how-quizvidya-helps .benefit-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(66,91,126,.15);border-color:#d3ddea}
/* Icon container: identical across all five cards */
#how-quizvidya-helps .benefit-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:#fdeeee;margin:0 auto 22px;transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s ease}
#how-quizvidya-helps .benefit-card:hover .benefit-ic{transform:scale(1.08);background:#fde2e0}
#how-quizvidya-helps .benefit-card svg{height:29px;width:auto;color:#e86e6c!important;margin:0;display:block}
/* Feature title (bold, scannable, slate) + description (subordinate body) */
#how-quizvidya-helps .benefit-card h3{color:#425b7e;font-weight:700;font-size:1.2rem;line-height:1.3;margin:0 0 14px}
#how-quizvidya-helps .benefit-card p{font-size:1rem;line-height:1.65;color:#556377;margin:0}
@media(min-width:641px){#how-quizvidya-helps .benefit-card{min-height:420px}}
@media(prefers-reduced-motion:reduce){#how-quizvidya-helps .benefit-card,#how-quizvidya-helps .benefit-ic{transition:none}}
.tourf-feat-ic svg{height:26px;width:auto}
.pricing-highlight svg{height:16px;width:auto;color:#e86e6c!important;flex:0 0 auto}
.toast-body svg{height:16px;width:auto;vertical-align:-2px;margin-right:5px;display:inline-block}

/* ---- YouTube facade (click-to-load, privacy-friendly; no YT until play) ---- */
.qv-video-facade{cursor:pointer;background-size:cover;background-position:center;background-color:#1a2436;position:relative;overflow:hidden;display:block}
.qv-video-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.32));transition:background .25s ease}
.qv-video-facade:hover::after,.qv-video-facade:focus-visible::after{background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.42))}
.qv-video-facade:focus-visible{outline:3px solid #425b7e;outline-offset:3px}
.qv-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;line-height:0;transition:transform .2s ease;pointer-events:none}
.qv-video-play svg{width:74px;height:74px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.qv-video-play circle{transition:fill .2s ease}
.qv-video-facade:hover .qv-video-play{transform:translate(-50%,-50%) scale(1.09)}
.qv-video-facade:hover .qv-video-play circle{fill:#d95d59}
.qv-video-loaded{cursor:default;background:none}
.qv-video-loaded::after,.qv-video-loaded .qv-video-play{display:none}
@media (prefers-reduced-motion:reduce){.qv-video-facade *,.qv-video-facade::after,.qv-video-play{transition:none}}

/* Restore the 16:9 video box after BS4->BS5 migration: the ratio came from BS4
   .embed-responsive-16by9 (removed in BS5). Own aspect-ratio = framework-agnostic. */
.qv-video-facade{aspect-ratio:16/9;width:100%}
.qv-video-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}