/* ============================================================
   IC7 Game — Homepage
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 80px));
  padding-bottom: clamp(56px, 8vw, 96px);
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
}

/* Layered animated glow backdrop */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--grad-hero-glow);
}

.hero__bg .glow-orb--1 {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  top: -8%; left: -6%;
  background: radial-gradient(circle, rgba(225,6,0,0.42), transparent 65%);
  animation-duration: 8s;
}
.hero__bg .glow-orb--2 {
  width: 40vw; height: 40vw;
  max-width: 540px; max-height: 540px;
  bottom: -12%; right: -4%;
  background: radial-gradient(circle, rgba(255,30,45,0.3), transparent 65%);
  animation-duration: 10s;
  animation-delay: -3s;
}

/* Faint hex/grid texture */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(225,6,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225,6,0,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}

/* Drifting embers (injected by main.js) */
.hero__embers { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ember {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #FF6B4A 0%, var(--color-accent) 55%, transparent 75%);
  box-shadow: 0 0 8px rgba(255,80,50,0.9);
  animation-name: ember-drift;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  .hero__copy { text-align: left; }
}

.hero__copy { text-align: center; }

.hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
  text-shadow: 0 0 40px rgba(225,6,0,0.35);
}

.hero h1 .line { display: block; }

.hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  max-width: 560px;
  margin: 0 auto var(--sp-6);
  color: var(--color-text-secondary);
}
@media (min-width: 992px) { .hero__sub { margin-inline: 0; } }

.hero__sub .bonus-inline {
  color: var(--color-gold);
  font-weight: 700;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  margin-bottom: var(--sp-6);
}
@media (min-width: 992px) { .hero__actions { justify-content: flex-start; } }

/* Hero trust row (animated counters) */
.hero__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  max-width: 520px;
  margin-inline: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 992px) { .hero__trust { margin-inline: 0; } }

.hero__trust-item { text-align: center; }
@media (min-width: 992px) { .hero__trust-item { text-align: left; } }

.hero__trust-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
}
.hero__trust-num--gold { color: var(--color-gold); }
.hero__trust-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* Hero phone mockup */
.hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__phone {
  position: relative;
  width: min(320px, 78vw);
  border-radius: 34px;
  padding: 10px;
  background: linear-gradient(160deg, #2A2A30 0%, #101012 55%, #1C1C20 100%);
  border: 1px solid var(--color-border-strong);
  box-shadow:
    0 40px 90px rgba(0,0,0,0.7),
    0 0 60px rgba(225,6,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: float 6s var(--ease-in-out) infinite;
  z-index: 1;
}

.hero__phone img {
  width: 100%;
  border-radius: 26px;
  display: block;
}

/* notch */
.hero__phone::before {
  content: "";
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 86px; height: 6px;
  border-radius: var(--radius-full);
  background: rgba(0,0,0,0.75);
  z-index: 2;
}

/* Glow ring behind phone */
.hero__phone-glow {
  position: absolute;
  width: min(420px, 90vw);
  height: min(420px, 90vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,6,0,0.35) 0%, transparent 62%);
  filter: blur(40px);
  animation: glow-breathe 6s var(--ease-in-out) infinite;
  z-index: 0;
}

/* Floating badges around the phone */
.hero__badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: rgba(24,24,27,0.9);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  animation: float 5s var(--ease-in-out) infinite;
}

.hero__badge--bonus {
  top: 12%; left: -4%;
  color: var(--color-gold);
  border-color: rgba(255,184,0,0.4);
  box-shadow: var(--shadow-glow-gold);
  animation-delay: -1.5s;
}
.hero__badge--secure {
  bottom: 16%; right: -6%;
  color: var(--color-success);
  border-color: rgba(0,200,83,0.35);
  box-shadow: 0 0 20px rgba(0,200,83,0.22);
  animation-delay: -3s;
}
.hero__badge svg { width: 16px; height: 16px; }

/* Keep the floating badges fully inside the viewport on small screens —
   negative offsets here are what pushed the page wide on mobile. */
@media (max-width: 640px) {
  .hero__badge { font-size: 0.78rem; padding: 8px 12px; }
  .hero__badge--bonus { left: 0; }
  .hero__badge--secure { right: 0; }
}

/* ---------- OG BANNER SECTION ---------- */
.og-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(225,6,0,0.4);
  box-shadow: var(--shadow-card-lg), var(--shadow-glow-red);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.og-banner:hover { box-shadow: var(--shadow-card-lg), var(--shadow-glow-red-strong); }

/* animated glowing frame */
.og-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--color-accent-hot), transparent 30%, transparent 70%, var(--color-gold));
  background-size: 200% 200%;
  animation: bg-pan 6s var(--ease-in-out) infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.og-banner__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.og-banner:hover .og-banner__img { transform: scale(1.03); }

/* The banner artwork already carries its own headline and feature strip, so the
   overlay scrim has to be strong enough at the bottom that our CTA text reads
   cleanly against it rather than competing with the art behind it. */
.og-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: clamp(20px, 3vw, 36px);
  background: linear-gradient(to top,
    rgba(8,8,10,0.97) 0%,
    rgba(8,8,10,0.88) 16%,
    rgba(8,8,10,0.55) 30%,
    rgba(8,8,10,0.12) 44%,
    transparent 58%);
  text-align: center;
}

.og-banner__overlay h2 {
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}
.og-banner__overlay p {
  color: var(--color-text-primary);
  font-size: clamp(0.85rem, 1.4vw, 1.02rem);
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
  max-width: 560px;
}

/* On very small screens keep the CTA readable */
@media (max-width: 560px) {
  .og-banner__overlay { gap: var(--sp-3); }
  .og-banner__overlay p { display: none; }
}

/* ---------- FEATURES GRID ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* 6 cards: force 3x2 on desktop so we never leave dead cells in a 4-up row */
@media (min-width: 992px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card { text-align: left; }

.feature-card__icon {
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid rgba(225,6,0,0.3);
  color: var(--color-accent-hot);
  margin-bottom: var(--sp-4);
  transition: all var(--dur-med) var(--ease-out);
}
.feature-card__icon svg { width: 28px; height: 28px; }

.feature-card:hover .feature-card__icon {
  background: var(--grad-crimson);
  color: #fff;
  box-shadow: var(--shadow-glow-red);
  transform: scale(1.06) rotate(-4deg);
}

.feature-card h3 { margin-bottom: var(--sp-2); font-size: 1.15rem; }
.feature-card p { font-size: 0.94rem; margin: 0; }

/* ---------- HOW IT WORKS ---------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

/* animated connecting line (desktop only) */
@media (min-width: 992px) {
  .steps::before {
    content: "";
    position: absolute;
    top: 34px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(225,6,0,0.1), var(--color-accent) 20%, var(--color-accent-hot) 50%, var(--color-accent) 80%, rgba(225,6,0,0.1));
    background-size: 200% 100%;
    animation: bg-pan 4s linear infinite;
    box-shadow: 0 0 14px rgba(225,6,0,0.5);
    z-index: 0;
  }
}

.step { position: relative; z-index: 1; text-align: center; }

.step__num {
  width: 68px; height: 68px;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-crimson);
  border: 4px solid var(--color-bg);
  box-shadow: var(--shadow-glow-red);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.step:hover .step__num {
  transform: scale(1.1) translateY(-4px);
  box-shadow: var(--shadow-glow-red-strong);
}

.step h3 { margin-bottom: var(--sp-2); font-size: 1.12rem; }
.step p { font-size: 0.93rem; margin: 0; }

/* ---------- BONUS HIGHLIGHT ---------- */
.bonus {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,184,0,0.35);
  background:
    radial-gradient(75% 130% at 50% 0%, rgba(255,184,0,0.16), transparent 62%),
    radial-gradient(60% 100% at 50% 100%, rgba(225,6,0,0.22), transparent 60%),
    var(--grad-surface);
  padding: clamp(40px, 7vw, 84px) var(--container-pad);
  text-align: center;
  box-shadow: var(--shadow-glow-gold);
}

.bonus::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 90deg, transparent, rgba(255,184,0,0.1), transparent 28%);
  animation: spin-slow 18s linear infinite;
  pointer-events: none;
}

.bonus > * { position: relative; z-index: 1; }

.bonus__amount {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(255,184,0,0.45));
  margin-block: var(--sp-3);
}

.bonus h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
.bonus p { max-width: 620px; margin: 0 auto var(--sp-6); }

.bonus__terms {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* NOTE: the screenshot gallery (.gallery / .shot) lives in main.css —
   it is shared by the homepage, download page and game detail page. */

/* ---------- TESTIMONIALS ---------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.testimonial__stars {
  display: flex;
  gap: 3px;
  color: var(--color-gold);
  margin-bottom: var(--sp-3);
}
.testimonial__stars svg { width: 17px; height: 17px; }

.testimonial blockquote {
  font-size: 0.98rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--sp-4);
}
.testimonial blockquote::before { content: "\201C"; color: var(--color-accent); font-size: 1.4em; line-height: 0; }
.testimonial blockquote::after  { content: "\201D"; color: var(--color-accent); font-size: 1.4em; line-height: 0; }

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-crimson);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}
.testimonial__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---------- RESPONSIBLE GAMING ---------- */
.responsible {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  grid-template-columns: 1fr;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--grad-surface);
}
@media (min-width: 860px) {
  .responsible { grid-template-columns: auto 1fr; }
}

.responsible__icon {
  width: 84px; height: 84px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  border: 1px solid rgba(225,6,0,0.3);
  color: var(--color-accent-hot);
  flex-shrink: 0;
}
.responsible__icon svg { width: 40px; height: 40px; }

.responsible h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.responsible p { margin: 0; font-size: 0.96rem; }

.responsible__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.responsible__list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: rgba(255,255,255,0.03);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.responsible__list li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-accent-hot);
}

/* ---------- Section header with "view all" link ---------- */
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  text-align: left;
  max-width: none;
}
.section-head--split .section-head__text { max-width: 640px; }