
.ifs-page {
  --ifs-purple:       #7c3aed;
  --ifs-purple-dark:  #6d28d9;
  --ifs-purple-light: #a78bfa;
  --ifs-ink:          #101424;
  --ifs-line:         #e9e8ef;
  --ifs-wa:           #25d366;
  --ifs-wa-dark:      #1ebe5d;
  --ifs-amber:        #f59e0b;
  --ifs-red:          #ef4444;
  --ifs-green:        #22c55e;
  color: var(--ifs-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ── SHARED ── */
.ifs-eyebrow {
  display: inline-block; margin-bottom: 14px;
  color: var(--ifs-purple); font-size: 11px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase;
}
.ifs-section-title {
  margin: 0; color: var(--ifs-ink);
  font-size: clamp(34px, 3.2vw, 48px); font-weight: 800;
  line-height: 1.04; letter-spacing: -.045em;
}
.ifs-section-text { margin: 16px 0 0; color: #6f7584; font-size: 14px; line-height: 1.72; }
.ifs-text-link { color: var(--ifs-purple-dark); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.ifs-text-link:hover { color: #5b21b6; text-decoration: underline; }
.ifs-wa-svg { flex: 0 0 18px; width: 18px; height: 18px; }
.ifs-wa-icon { flex: 0 0 20px; width: 20px; height: 20px; }

/* ── BUTTONS ── */
.ifs-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 52px; padding: 0 26px;
  color: #fff !important; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--ifs-purple-dark), var(--ifs-purple) 55%, #9333ea);
  box-shadow: 0 10px 26px rgba(124,58,237,.22);
  font-size: 14px; font-weight: 700; text-decoration: none !important;
  transition: transform .2s, box-shadow .2s;
}
.ifs-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124,58,237,.3); }

.ifs-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 52px; padding: 0 26px;
  color: #1a2030 !important; border: 1.5px solid #c4b8f7;
  border-radius: 10px; background: rgba(255,255,255,.9);
  font-size: 14px; font-weight: 700; text-decoration: none !important;
  transition: transform .2s, border-color .2s;
}
.ifs-btn-outline:hover { border-color: var(--ifs-purple); transform: translateY(-2px); }

.ifs-wa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 52px; padding: 0 26px;
  color: #fff !important; border: 0; border-radius: 10px;
  background: var(--ifs-wa); box-shadow: 0 10px 28px rgba(37,211,102,.26);
  font-size: 14px; font-weight: 700; text-decoration: none !important;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.ifs-wa-btn:hover { background: var(--ifs-wa-dark); transform: translateY(-2px); }
.ifs-wa-btn-lg { min-height: 56px; padding: 0 32px; font-size: 15px; border-radius: 12px; }

.ifs-outline-dark {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 50px; padding: 0 24px;
  color: rgba(255,255,255,.86) !important; border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 10px; background: rgba(255,255,255,.06);
  font-size: 13.5px; font-weight: 700; text-decoration: none !important;
  transition: background .2s, border-color .2s, transform .2s;
}
.ifs-outline-dark:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.38); transform: translateY(-2px); }

/* ── HERO ── */
.ifs-hero { position: relative; overflow: hidden; background: #fff; isolation: isolate; }
.ifs-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("/wp-content/uploads/2026/09/iptv-firestick-uk.webp") center right / cover no-repeat;
}
.ifs-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(255,255,255,1) 0%, rgba(255,255,255,.99) 28%,
    rgba(255,255,255,.93) 42%, rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 82%);
  pointer-events: none;
}
.ifs-hero-title {
  margin: 0; color: var(--ifs-ink);
  font-size: clamp(44px, 4.8vw, 66px); font-weight: 800;
  line-height: .98; letter-spacing: -.05em;
}
.ifs-hero-title span {
  display: block; margin-top: 8px; font-size: .66em;
  font-weight: 700; line-height: 1.06; letter-spacing: -.04em; color: #3a4258;
}
.ifs-hero-desc { max-width: 570px; margin: 24px 0 0; color: #596174; font-size: 17px; line-height: 1.65; }

/* pills */
.ifs-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 1px solid #e4e2ef; border-radius: 50px;
  background: #faf8ff; color: #2b3044; font-size: 12px; font-weight: 700;
}
.ifs-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ifs-green); flex: 0 0 8px; }

/* ── REQUIREMENTS BAR ── */
.ifs-req-bar { background: #0f0c1d; border-top: 1px solid #1e1830; }
.ifs-req-item { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 700; }
.ifs-req-icon { color: var(--ifs-purple-light); font-size: 15px; line-height: 1; }
.ifs-req-divider { width: 1px; height: 16px; background: rgba(255,255,255,.15); }

/* ── PREREQ CARDS ── */
.ifs-prereqs { background: linear-gradient(180deg, #fff 0%, #faf9ff 100%); }
.ifs-prereq-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 24px 20px; height: 100%;
  border: 1px solid var(--ifs-line); border-radius: 14px;
  background: #fff; box-shadow: 0 6px 20px rgba(22,27,44,.038);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.ifs-prereq-card:hover { transform: translateY(-3px); border-color: rgba(124,58,237,.18); box-shadow: 0 14px 30px rgba(22,27,44,.07); }
.ifs-prereq-num {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 13px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--ifs-purple-dark), var(--ifs-purple));
  margin-bottom: 14px;
}
.ifs-prereq-card h3 { margin: 0 0 7px; color: var(--ifs-ink); font-size: 14px; font-weight: 800; line-height: 1.3; }
.ifs-prereq-card p { margin: 0; color: #757b89; font-size: 12.5px; line-height: 1.6; }
.ifs-tip { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: #f0eaff; color: var(--ifs-purple-dark); font-size: 11.5px; font-weight: 700; line-height: 1.4; }

/* ── STEP GUIDE ── */
.ifs-guide { background: #fff; }
.ifs-step { display: grid; grid-template-columns: 64px 1fr; gap: 0 28px; padding-bottom: 44px; position: relative; }
.ifs-step:not(:last-child)::after {
  content: ""; position: absolute; left: 31px; top: 64px; bottom: 0;
  width: 2px; background: linear-gradient(180deg, rgba(124,58,237,.3), rgba(124,58,237,.05));
}
.ifs-step-num-wrap {
  flex: 0 0 64px; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 22px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--ifs-purple-dark), var(--ifs-purple) 55%, #9333ea);
  box-shadow: 0 8px 22px rgba(124,58,237,.26);
  position: relative; z-index: 1; flex-shrink: 0; align-self: flex-start;
}
.ifs-step-body { padding-top: 12px; }
.ifs-step-body h3 { margin: 0 0 10px; color: var(--ifs-ink); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.ifs-step-body p { margin: 0; color: #6f7584; font-size: 14px; line-height: 1.7; }
.ifs-step-body p + p { margin-top: 10px; }

.ifs-path {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  margin: 12px 0 4px; padding: 10px 14px;
  border: 1px solid #e4e2ef; border-radius: 9px;
  background: #faf8ff; font-size: 12.5px;
}
.ifs-path-step { color: var(--ifs-purple-dark); font-weight: 800; white-space: nowrap; }
.ifs-path-arrow { color: #a0a6b8; font-size: 11px; }

.ifs-option-card { padding: 16px; border: 1px solid #e8e7ef; border-radius: 12px; background: #faf8ff; height: 100%; }
.ifs-option-card h4 { margin: 0 0 7px; color: var(--ifs-ink); font-size: 13px; font-weight: 800; }
.ifs-option-card p { margin: 0; color: #757b89; font-size: 12px; line-height: 1.6; }
.ifs-option-card code { display: inline-block; margin-top: 8px; padding: 4px 8px; border-radius: 5px; background: #ede8ff; color: var(--ifs-purple-dark); font-size: 11px; font-family: monospace; font-weight: 700; line-height: 1.4; }

.ifs-option-badge { display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 20px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ifs-badge-recommended { background: #f0fdf6; color: #15803d; border: 1px solid #bbf7d0; }
.ifs-badge-alt { background: #faf8ff; color: var(--ifs-purple-dark); border: 1px solid #ddd6fe; }

.ifs-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--ifs-amber); border-radius: 0 8px 8px 0; background: #fffbeb;
}
.ifs-note-icon { color: var(--ifs-amber); font-size: 15px; flex: 0 0 18px; margin-top: 1px; }
.ifs-note p { margin: 0; color: #78350f; font-size: 12px; font-weight: 600; line-height: 1.55; }

/* ── PLAYER CARDS ── */
.ifs-players { background: linear-gradient(180deg, #faf9ff 0%, #fff 100%); }
.ifs-player-card {
  padding: 26px 22px; height: 100%;
  border: 1px solid var(--ifs-line); border-radius: 15px;
  background: #fff; box-shadow: 0 7px 22px rgba(22,27,44,.042);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.ifs-player-card:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.2); box-shadow: 0 16px 34px rgba(22,27,44,.078); }
.ifs-player-card-best { border: 2px solid var(--ifs-purple); background: linear-gradient(180deg, #faf7ff 0%, #fff 30%); }
.ifs-player-name { color: var(--ifs-ink); font-size: 16px; font-weight: 900; letter-spacing: -.02em; }
.ifs-player-badge { flex: 0 0 auto; padding: 3px 10px; border-radius: 20px; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ifs-pb-popular { background: linear-gradient(135deg, var(--ifs-purple-dark), #8b5cf6); color: #fff; }
.ifs-pb-premium  { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.ifs-pb-simple   { background: #f0fdf6; color: #15803d; border: 1px solid #bbf7d0; }
.ifs-player-desc { color: #757b89; font-size: 12.5px; line-height: 1.6; margin: 0 0 16px; }
.ifs-player-features { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; margin: 0 0 18px; }
.ifs-player-features li { display: flex; align-items: flex-start; gap: 9px; color: #545b6a; font-size: 12px; line-height: 1.45; }
.ifs-player-check { flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f0eaff; color: var(--ifs-purple); font-size: 8px; font-weight: 900; margin-top: 1px; }
.ifs-device-tag { padding: 3px 9px; border-radius: 20px; border: 1px solid #e4e2ef; background: #faf8ff; color: #404654; font-size: 10px; font-weight: 700; }

/* ── BUFFERING FIX CARDS ── */
.ifs-fixes { background: #fff; }
.ifs-fix-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 20px; height: 100%;
  border: 1px solid #e8e7ef; border-radius: 13px; background: #fff;
  box-shadow: 0 5px 16px rgba(18,23,38,.035);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ifs-fix-card:hover { border-color: rgba(124,58,237,.16); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18,23,38,.065); }
.ifs-fix-icon { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 19px; line-height: 1; background: #faf8ff; border: 1px solid rgba(124,58,237,.12); }
.ifs-fix-card h3 { margin: 0 0 6px; color: var(--ifs-ink); font-size: 14px; font-weight: 800; line-height: 1.28; }
.ifs-fix-card p { margin: 0; color: #757b89; font-size: 12.5px; line-height: 1.6; }
.ifs-fix-path { display: block; margin-top: 9px; padding: 7px 11px; border-radius: 7px; background: #faf8ff; border: 1px solid #e4e2ef; color: var(--ifs-purple-dark); font-size: 11px; font-weight: 700; line-height: 1.5; font-family: monospace; }

/* ── SUB CTA ── */
.ifs-sub-cta { background: linear-gradient(180deg, #faf9ff 0%, #fff 100%); }
.ifs-sub-shell {
  padding: 40px; border: 2px solid var(--ifs-purple); border-radius: 20px;
  background: linear-gradient(135deg, #faf7ff 0%, #fff 50%);
  box-shadow: 0 18px 46px rgba(124,58,237,.12);
}
.ifs-sub-copy h2 { margin: 0 0 12px; color: var(--ifs-ink); font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.ifs-sub-copy p { margin: 0; color: #6f7584; font-size: 14px; line-height: 1.68; }
.ifs-sub-feature { display: inline-flex; align-items: center; gap: 6px; color: #404654; font-size: 11.5px; font-weight: 700; }
.ifs-sub-feature-dot { color: var(--ifs-green); font-size: 13px; }
.ifs-sub-actions .ifs-wa-btn, .ifs-sub-actions .ifs-btn-outline { min-height: 46px; padding: 0 22px; font-size: 13px; border-radius: 9px; width: 100%; justify-content: center; }

/* ── FAQ ── */
.ifs-faq { background: linear-gradient(180deg, #fbfaff 0%, #fff 100%); }
.ifs-faq-accordion .accordion-item { overflow: hidden; border: 1px solid #e8e7ef !important; border-radius: 11px !important; background: #fff; box-shadow: 0 5px 16px rgba(18,23,38,.03); }
.ifs-faq-accordion .accordion-button { min-height: 62px; padding: 16px 18px; color: #1b1f2d; background: #fff; box-shadow: none !important; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.ifs-faq-accordion .accordion-button:not(.collapsed) { color: var(--ifs-purple-dark); background: #fbf9ff; }
.ifs-faq-accordion .accordion-button::after { width: 25px; height: 25px; flex: 0 0 25px; margin-left: 14px; display: flex; align-items: center; justify-content: center; content: "+"; color: #343947; border-radius: 50%; background: #f5f4f8; background-image: none !important; font-size: 17px; font-weight: 500; transform: none !important; }
.ifs-faq-accordion .accordion-button:not(.collapsed)::after { content: "−"; color: #fff; background: var(--ifs-purple); }
.ifs-faq-accordion .accordion-body { padding: 0 18px 19px; color: #6f7583; background: #fbf9ff; font-size: 12.5px; line-height: 1.7; }
.ifs-faq-accordion .accordion-body p { margin: 0; }
.ifs-faq-accordion .accordion-body p + p { margin-top: 8px; }
.ifs-faq-accordion .accordion-body a { display: inline-flex; margin-top: 10px; color: var(--ifs-purple); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.ifs-faq-accordion .accordion-body a:hover { color: #5b21b6; text-decoration: underline; }
.ifs-faq-accordion .accordion-body .ifs-path { margin: 10px 0 4px; padding: 8px 12px; font-size: 11.5px; }

/* ── FINAL CTA ── */
.ifs-final {
  background: linear-gradient(135deg, #0d0b1a 0%, #1a0e35 48%, #0f1324 100%);
  position: relative; overflow: hidden; isolation: isolate;
}
.ifs-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 55% 65% at 78% 50%, rgba(124,58,237,.2), transparent 68%),
              radial-gradient(ellipse 38% 48% at 18% 60%, rgba(37,211,102,.07), transparent 64%);
}
.ifs-final-eyebrow { display: inline-block; margin-bottom: 16px; color: var(--ifs-purple-light); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ifs-final-title { margin: 0; color: #fff; font-size: clamp(34px, 3.8vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.ifs-final-text { max-width: 560px; margin: 18px auto 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.68; }
.ifs-final-note { margin-top: 16px; color: rgba(255,255,255,.42); font-size: 11.5px; font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 991.98px) {
  .ifs-hero-bg, .ifs-hero::before { display: none; }
  .ifs-sub-shell { padding: 32px 28px; }
}
@media (max-width: 767.98px) {
  .ifs-hero-title { font-size: clamp(38px, 10.5vw, 52px); }
  .ifs-step { grid-template-columns: 48px 1fr; gap: 0 18px; }
  .ifs-step-num-wrap { width: 48px; height: 48px; font-size: 18px; }
  .ifs-step:not(:last-child)::after { left: 23px; }
  .ifs-sub-shell { padding: 28px 22px; }
}
@media (max-width: 575.98px) {
  .ifs-step-body h3 { font-size: 17px; }
  .ifs-faq-accordion .accordion-button { min-height: 56px; padding: 14px 15px; font-size: 12px; }
  .ifs-faq-accordion .accordion-body { padding: 0 15px 17px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ifs-page *, .ifs-page *::before, .ifs-page *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}
