/* ========================================================================== 
   HELLO SKY IPTV — SUPER PREMIUM LIGHT MULTI-COLOR THEME
   Complete replacement stylesheet for the uploaded index.html
   Mobile-first • Responsive desktop • Off-white + Sky Blue + Soft Red
   ========================================================================== */

/* ========================================================================== 
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  --white: #ffffff;
  --offwhite: #fffdf9;
  --offwhite-2: #faf8f3;
  --offwhite-3: #f5f3ed;

  --blue-25: #f7fcff;
  --blue-50: #eff9ff;
  --blue-100: #def2ff;
  --blue-150: #d3edfb;
  --blue-200: #bee5f7;
  --blue-300: #8fd0eb;
  --blue-400: #58b7dd;
  --blue-500: #2d9dcc;
  --blue-600: #197fae;
  --blue-700: #12658f;
  --blue-800: #104e6c;
  --blue-900: #12384e;

  --red-25: #fff9f8;
  --red-50: #fff3f1;
  --red-100: #ffe5e1;
  --red-200: #ffd0ca;
  --red-300: #f6aaa1;
  --red-400: #ef827a;
  --red-500: #e9635d;
  --red-600: #c94845;
  --red-700: #a63a38;

  --teal-25: #f6fffd;
  --teal-50: #ecfbf8;
  --teal-100: #d8f4ef;
  --teal-300: #83d8ca;
  --teal-500: #18aa98;
  --teal-600: #0b8578;
  --teal-700: #086c62;

  --gold-50: #fff9ed;
  --gold-100: #fff0c8;
  --gold-300: #f4ca6c;
  --gold-500: #dca13d;
  --green: #17875f;
  --danger: #c4474d;

  --ink: #152738;
  --heading: #13263b;
  --copy: #506577;
  --muted: #718290;
  --soft-ink: #344d5f;

  --line: rgba(31, 91, 119, 0.12);
  --line-strong: rgba(35, 130, 171, 0.22);
  --line-red: rgba(201, 72, 69, 0.18);

  --surface: rgba(255, 255, 255, 0.90);
  --surface-solid: #ffffff;
  --surface-blue: rgba(239, 249, 255, 0.88);
  --surface-red: rgba(255, 243, 241, 0.88);

  --shadow-xs: 0 3px 12px rgba(21, 55, 73, 0.045);
  --shadow-sm: 0 8px 24px rgba(21, 55, 73, 0.07);
  --shadow-md: 0 16px 42px rgba(21, 55, 73, 0.09);
  --shadow-lg: 0 26px 70px rgba(21, 55, 73, 0.13);
  --shadow-blue: 0 18px 42px rgba(45, 157, 204, 0.16);
  --shadow-red: 0 18px 42px rgba(233, 99, 93, 0.14);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --pill: 999px;

  --container: 1440px;
  --container-wide: 1600px;
  --section-space: clamp(4rem, 7vw, 7.2rem);
  --header-height: 76px;

  --ease: 220ms ease;
  --ease-slow: 480ms cubic-bezier(.22, 1, .36, 1);

  /* legacy aliases */
  --primary-dark: var(--blue-900);
  --primary-deep: var(--heading);
  --primary-navy: var(--blue-700);
  --accent-teal: var(--teal-500);
  --accent-teal-dark: var(--teal-600);
  --accent-gold: var(--gold-500);
  --accent-gold-dark: #b4771d;
  --gray-50: #f7f9fa;
  --gray-100: #edf2f4;
  --gray-200: #dfe7eb;
  --gray-300: #b9c6cd;
  --gray-400: #8797a2;
  --gray-500: var(--copy);
  --gray-600: #405665;
  --gray-700: #2d4251;
  --gray-800: var(--ink);
  --gray-900: var(--heading);
  --success: var(--green);
}

/* ========================================================================== 
   02. RESET / BASE / ACCESSIBILITY
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 18px);
  overflow-x: hidden;
  background: var(--offwhite);
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 2%, rgba(45, 157, 204, .055), transparent 28rem),
    radial-gradient(circle at 95% 13%, rgba(233, 99, 93, .045), transparent 26rem),
    var(--offwhite);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open,
body.nav-open {
  overflow: hidden;
}

main,
header,
footer,
section,
nav {
  display: block;
  width: 100%;
  max-width: 100%;
}

main {
  position: relative;
  overflow: clip;
}

section {
  position: relative;
}

section[id] {
  scroll-margin-top: calc(var(--header-height) + 18px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .78rem;
  color: var(--heading);
  font-family: "Sora", "Manrope", system-ui, sans-serif;
  font-weight: 750;
  line-height: 1.16;
  letter-spacing: -.028em;
  text-wrap: balance;
}

p {
  margin: 0 0 1rem;
  color: var(--copy);
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--ease),
    background var(--ease),
    border-color var(--ease),
    box-shadow var(--ease),
    transform var(--ease),
    opacity var(--ease);
}

a:hover {
  color: var(--blue-700);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg,
video,
picture,
iframe,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
textarea,
select {
  margin: 0;
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  outline: none;
}

strong {
  color: var(--heading);
  font-weight: 800;
}

[hidden] {
  display: none !important;
}

::selection {
  color: var(--heading);
  background: rgba(45, 157, 204, .22);
}

:focus-visible {
  outline: 3px solid rgba(45, 157, 204, .48);
  outline-offset: 3px;
}

.container {
  width: min(calc(100% - 28px), var(--container));
  margin-inline: auto;
}

.narrow {
  width: min(100%, 980px);
  margin-inline: auto;
}

.centered {
  text-align: center;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 99999;
  transform: translateY(-160%);
  padding: .72rem 1rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background: var(--blue-800);
  box-shadow: var(--shadow-md);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

.gradient-text {
  color: var(--blue-700);
  background: linear-gradient(118deg, var(--blue-700) 0%, var(--teal-600) 51%, var(--red-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal,
.reveal.is-pending {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms var(--ease-slow);
}

.js .reveal.visible,
.js .reveal.active,
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================================================== 
   03. PRELOADER
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(45,157,204,.08), transparent 18rem),
    rgba(255, 253, 249, .985);
  pointer-events: none;
  animation: preloader-fallback .35s ease .9s forwards;
}

.preloader.hidden,
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--blue-100);
  border-top-color: var(--blue-600);
  border-right-color: var(--red-500);
  border-bottom-color: var(--teal-500);
  border-radius: 50%;
  animation: spin .78s linear infinite;
  box-shadow: 0 8px 24px rgba(45,157,204,.14);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes preloader-fallback {
  to { opacity: 0; visibility: hidden; }
}

/* ========================================================================== 
   04. SHARED BUTTONS / LINKS
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .58rem;
  min-height: 46px;
  padding: .76rem 1.22rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: .93rem;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
  cursor: pointer;
  transition:
    transform var(--ease),
    box-shadow var(--ease),
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 520ms ease, opacity 220ms ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:hover::before {
  opacity: 1;
  transform: translateX(120%);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  color: #fff;
  border-color: rgba(18,101,143,.18);
  background: linear-gradient(125deg, var(--blue-700), var(--blue-600) 46%, var(--teal-600));
  box-shadow: var(--shadow-blue);
}

.btn-primary:hover {
  color: #fff;
  background: linear-gradient(125deg, var(--blue-800), var(--blue-700) 48%, var(--teal-700));
  box-shadow: 0 18px 38px rgba(18,101,143,.22);
}

.btn-outline {
  color: var(--blue-700);
  border-color: rgba(45,157,204,.30);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
}

.btn-outline:hover {
  color: #fff;
  border-color: var(--blue-700);
  background: var(--blue-700);
  box-shadow: var(--shadow-blue);
}

.btn-ghost {
  color: var(--red-700);
  border-color: rgba(233,99,93,.16);
  background: linear-gradient(135deg, rgba(255,243,241,.9), rgba(255,255,255,.78));
}

.btn-ghost:hover {
  color: #fff;
  border-color: var(--red-600);
  background: linear-gradient(125deg, var(--red-600), var(--red-500));
  box-shadow: var(--shadow-red);
}

.btn-sm {
  min-height: 40px;
  padding: .6rem .9rem;
  border-radius: 12px;
  font-size: .81rem;
}

.btn-large {
  min-height: 54px;
  padding: .92rem 1.45rem;
  border-radius: 15px;
  font-size: .98rem;
}

.btn-block {
  width: 100%;
}

.inline-actions,
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .72rem;
}

.inline-actions {
  margin-top: 1.45rem;
}

.inline-actions.centered,
.section-inline-cta {
  justify-content: center;
  text-align: center;
}

.section-inline-cta {
  margin-top: 2rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--blue-700);
  font-weight: 800;
}

.text-link::after {
  content: "→";
  transition: transform var(--ease);
}

.text-link:hover::after {
  transform: translateX(4px);
}

/* ========================================================================== 
   05. HEADER / DESKTOP NAV / MOBILE NAV
   ========================================================================== */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(31,91,119,.10);
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 8px 28px rgba(21,55,73,.055);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  gap: .75rem;
}

.logo,
.mobile-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-brand-logo {
  width: auto;
  height: 48px;
  max-width: 205px;
  object-fit: contain;
  object-position: left center;
  transition: transform var(--ease);
}

.logo:hover .site-brand-logo {
  transform: scale(1.025);
}

.nav-links,
.header-actions {
  display: none;
}

.mobile-menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-xs);
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--pill);
  background: var(--heading);
  transition: transform var(--ease), opacity var(--ease);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 1200;
  width: min(92vw, 420px);
  height: 100dvh;
  overflow-y: auto;
  transform: translateX(106%);
  visibility: hidden;
  color: var(--ink);
  border-left: 1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0, rgba(45,157,204,.12), transparent 18rem),
    radial-gradient(circle at 0 100%, rgba(233,99,93,.08), transparent 18rem),
    var(--offwhite);
  box-shadow: -24px 0 70px rgba(21,55,73,.18);
  transition: transform 320ms var(--ease-slow), visibility 320ms ease;
}

.mobile-nav::before {
  content: "";
  position: fixed;
  inset: 0;
  right: min(92vw, 420px);
  background: rgba(19,38,59,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.mobile-nav.active,
.mobile-nav[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav.active::before,
.mobile-nav[aria-hidden="false"]::before {
  opacity: 1;
}

.mobile-nav-container {
  min-height: 100%;
  padding: 1rem 1rem 1.5rem;
}

.mobile-nav-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: -1rem -1rem 1rem;
  padding: .78rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255,253,249,.96);
  backdrop-filter: blur(15px);
}

.mobile-logo img {
  width: auto;
  height: 48px;
  max-width: 205px;
  object-fit: contain;
}

.mobile-nav-close {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--heading);
  background: #fff;
  box-shadow: var(--shadow-xs);
  font-size: 1.35rem;
  line-height: 1;
}

.mobile-nav-links {
  display: grid;
  gap: .34rem;
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: .78rem;
  min-height: 48px;
  padding: .72rem .84rem;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--soft-ink);
  font-weight: 760;
}

.mobile-nav-links a i {
  display: grid;
  place-items: center;
  width: 25px;
  color: var(--blue-600);
  font-size: .95rem;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
  color: var(--blue-700);
  border-color: var(--line);
  background: linear-gradient(135deg, var(--blue-50), var(--red-25));
}

.mobile-nav-actions {
  display: grid;
  gap: .62rem;
  margin: 1.15rem 0;
}

.mobile-nav-contact {
  display: grid;
  gap: .44rem;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
}

.mobile-nav-contact a {
  display: flex;
  align-items: center;
  gap: .62rem;
  min-width: 0;
  padding: .36rem .1rem;
  color: #243a49;
  font-size: .88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mobile-nav-contact a i {
  width: 22px;
  color: var(--teal-600);
}

/* ========================================================================== 
   06. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.4rem, 7vw, 6.8rem) 0 clamp(4.6rem, 8vw, 7.5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(45,157,204,.16), transparent 31%),
    radial-gradient(circle at 92% 10%, rgba(233,99,93,.13), transparent 29%),
    radial-gradient(circle at 78% 92%, rgba(24,170,152,.10), transparent 28%),
    linear-gradient(145deg, #fffdfa 0%, #eff9ff 52%, #fff3f1 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  top: -105px;
  left: -115px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(45,157,204,.14);
  box-shadow: inset 0 0 0 48px rgba(45,157,204,.022);
}

.hero::after {
  right: -135px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(233,99,93,.14);
  box-shadow: inset 0 0 0 58px rgba(233,99,93,.022);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}

.hero-content {
  min-width: 0;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.15rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  min-height: 34px;
  padding: .48rem .78rem;
  border: 1px solid rgba(45,157,204,.22);
  border-radius: var(--pill);
  color: var(--blue-700);
  background: rgba(255,255,255,.76);
  box-shadow: var(--shadow-xs);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1.05;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.hero-badge.secondary {
  color: var(--red-700);
  border-color: rgba(233,99,93,.2);
  background: rgba(255,243,241,.82);
}

.hero-title {
  max-width: 920px;
  margin-bottom: 1.15rem;
  font-size: clamp(2.35rem, 8vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.hero-subtitle {
  max-width: 850px;
  margin-bottom: 1.45rem;
  color: #455e70;
  font-size: clamp(1rem, 2.3vw, 1.16rem);
  line-height: 1.75;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
  margin: 1.45rem 0;
}

.stat-item {
  display: grid;
  min-width: 0;
  gap: .12rem;
  padding: .9rem .85rem;
  border: 1px solid rgba(31,91,119,.11);
  border-radius: 15px;
  background: rgba(255,255,255,.74);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
}

.stat-item:nth-child(2n) {
  background: linear-gradient(140deg, rgba(255,255,255,.88), rgba(255,243,241,.72));
}

.stat-number {
  display: block;
  color: var(--heading);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
}

.hero-cta {
  margin-top: 1.5rem;
}

.hero-cta .btn {
  flex: 1 1 100%;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .9rem;
  margin-top: 1.35rem;
  color: #4a6172;
  font-size: .78rem;
  font-weight: 720;
}

.trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.trust-badges i {
  color: var(--teal-600);
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 400px;
  padding: 1.4rem;
}

.sky-orbit {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(88vw, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(45,157,204,.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(45,157,204,.07), transparent 52%),
    conic-gradient(from 0deg, rgba(45,157,204,.12), rgba(233,99,93,.08), rgba(24,170,152,.1), rgba(45,157,204,.12));
  box-shadow:
    inset 0 0 0 34px rgba(255,255,255,.28),
    inset 0 0 0 72px rgba(255,255,255,.16);
  animation: orbit 16s linear infinite;
}

.sky-orbit::before,
.sky-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.sky-orbit::before {
  top: 10%;
  right: 12%;
  width: 16px;
  height: 16px;
  background: var(--red-400);
  box-shadow: 0 0 0 8px rgba(233,99,93,.10);
}

.sky-orbit::after {
  left: 8%;
  bottom: 18%;
  width: 13px;
  height: 13px;
  background: var(--blue-500);
  box-shadow: 0 0 0 8px rgba(45,157,204,.10);
}

@keyframes orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 440px);
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(31,91,119,.14);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  transform: perspective(900px) rotateY(-2deg) rotateX(1deg);
}

.hero-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem .15rem .85rem;
  color: var(--soft-ink);
  font-size: .8rem;
  font-weight: 800;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: .34rem .62rem;
  border-radius: var(--pill);
  color: var(--teal-700);
  background: var(--teal-50);
  border: 1px solid rgba(24,170,152,.17);
  font-size: .67rem;
  letter-spacing: .06em;
}

.panel-screen {
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(18,101,143,.14);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,255,255,.20), transparent 26%),
    linear-gradient(135deg, var(--blue-800), var(--blue-600) 52%, var(--red-500));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

.panel-screen i {
  font-size: 4rem;
  filter: drop-shadow(0 12px 22px rgba(19,38,59,.24));
  transition: transform var(--ease-slow);
}

.hero-panel:hover .panel-screen i {
  transform: scale(1.08);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .62rem;
  margin-top: .72rem;
}

.panel-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  padding: .72rem .7rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--soft-ink);
  background: linear-gradient(140deg, #fff, var(--blue-25));
  font-size: .75rem;
  font-weight: 780;
}

.panel-chip:nth-child(even) {
  background: linear-gradient(140deg, #fff, var(--red-25));
}

.panel-chip i {
  color: var(--blue-600);
}

/* ========================================================================== 
   07. INFORMATION STRIP
   ========================================================================== */
.info-strip {
  z-index: 5;
  margin-top: -2rem;
  padding: 0 0 1.25rem;
}

.info-strip .container {
  position: relative;
}

.info-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .62rem;
  padding: .72rem;
  border: 1px solid rgba(31,91,119,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
}

.info-strip-item {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .65rem;
  padding: .75rem .65rem;
  border-radius: 14px;
}

.info-strip-item:nth-child(odd) {
  background: rgba(239,249,255,.62);
}

.info-strip-item:nth-child(even) {
  background: rgba(255,243,241,.48);
}

.info-strip-item i {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(45,157,204,.14);
  border-radius: 11px;
  color: var(--blue-600);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.info-strip-item div {
  min-width: 0;
}

.info-strip-item strong,
.info-strip-item span {
  display: block;
}

.info-strip-item strong {
  margin-bottom: .08rem;
  font-size: .78rem;
  line-height: 1.25;
}

.info-strip-item span {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
}

/* ========================================================================== 
   08. SECTION HEADERS / GENERIC SECTIONS
   ========================================================================== */
.premium-section,
section#features,
section#channels,
section#experience,
section#guides,
.faq-section {
  padding: var(--section-space) 0;
}

.premium-section {
  background:
    radial-gradient(circle at 4% 0%, rgba(45,157,204,.05), transparent 22rem),
    linear-gradient(180deg, var(--offwhite-2), var(--offwhite));
}

.premium-section:nth-of-type(even) {
  background:
    radial-gradient(circle at 96% 0%, rgba(233,99,93,.05), transparent 22rem),
    linear-gradient(180deg, #fff, var(--offwhite-2));
}

.section-header {
  width: min(100%, 900px);
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
  text-align: center;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 34px;
  margin-bottom: .8rem;
  padding: .48rem .78rem;
  border: 1px solid rgba(45,157,204,.18);
  border-radius: var(--pill);
  color: var(--blue-700);
  background: linear-gradient(135deg, var(--blue-50), rgba(255,255,255,.88));
  box-shadow: var(--shadow-xs);
  font-size: .71rem;
  font-weight: 850;
  letter-spacing: .075em;
  line-height: 1;
  text-transform: uppercase;
}

.section-tag i {
  color: var(--red-500);
}

.section-title {
  margin-bottom: .9rem;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  letter-spacing: -.04em;
}

.section-description {
  max-width: 820px;
  margin: 0 auto;
  color: var(--copy);
  font-size: clamp(.96rem, 2vw, 1.08rem);
  line-height: 1.78;
}

/* ========================================================================== 
   09. THREE-ROW MEDIA SHOWCASE / FULL-WIDTH MARQUEE
   ========================================================================== */
.media-showcase {
  padding: var(--section-space) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(45,157,204,.08), transparent 30rem),
    linear-gradient(180deg, #fff, #f7fbfd 55%, var(--offwhite));
}

.media-showcase > .container {
  margin-bottom: 1.5rem;
}

.media-marquee {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: .38rem 0;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.media-marquee + .media-marquee {
  margin-top: .2rem;
}

.media-marquee::before,
.media-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(18px, 5vw, 90px);
  pointer-events: none;
}

.media-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--offwhite), transparent);
}

.media-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--offwhite), transparent);
}

.media-marquee-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  animation: marquee-left 46s linear infinite;
}

.media-marquee.reverse .media-marquee-track {
  animation-name: marquee-right;
  animation-duration: 52s;
}

.media-marquee:hover .media-marquee-track {
  animation-play-state: paused;
}

.media-marquee-group {
  display: flex;
  align-items: stretch;
  flex: none;
  gap: .52rem;
  padding-right: .52rem;
}

.logo-slide-item,
.poster-slide-item {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(31,91,119,.10);
  background: #fff;
  box-shadow: 0 8px 22px rgba(21,55,73,.07);
  transform: translateZ(0);
}

.logo-slide-item {
  display: grid;
  place-items: center;
  width: clamp(118px, 24vw, 190px);
  height: clamp(66px, 12vw, 98px);
  padding: .45rem;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, var(--blue-25));
}

.logo-slide-item:nth-child(3n+2) {
  background: linear-gradient(145deg, #fff, var(--red-25));
}

.logo-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.poster-slide-item {
  width: clamp(110px, 27vw, 190px);
  aspect-ratio: 2 / 3;
  border-radius: 16px;
}

.poster-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-slow), filter 300ms ease;
}

.poster-slide-item:hover img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

@keyframes marquee-left {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

@keyframes marquee-right {
  from { transform: translate3d(-50%,0,0); }
  to { transform: translate3d(0,0,0); }
}

/* ========================================================================== 
   10. OVERVIEW TABLE
   ========================================================================== */
.overview-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-md);
}

.overview-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.overview-table thead {
  display: none;
}

.overview-table tbody,
.overview-table tr,
.overview-table td {
  display: block;
  width: 100%;
}

.overview-table tr {
  padding: .55rem;
  border-bottom: 1px solid var(--line);
}

.overview-table tr:last-child {
  border-bottom: 0;
}

.overview-table td {
  position: relative;
  padding: .65rem .75rem .65rem 42%;
  color: var(--copy);
  font-size: .86rem;
  line-height: 1.55;
}

.overview-table td::before {
  content: attr(data-label);
  position: absolute;
  top: .65rem;
  left: .75rem;
  width: 36%;
  color: var(--blue-700);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.overview-table td:first-child {
  border-radius: 13px 13px 0 0;
  background: var(--blue-50);
}

.overview-table td:nth-child(3) {
  background: var(--red-25);
}

/* ========================================================================== 
   11. FEATURE GRID
   ========================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
}

.feature-card {
  position: relative;
  min-width: 0;
  padding: 1.3rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.feature-card::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -48px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(45,157,204,.055);
  pointer-events: none;
}

.feature-card:nth-child(3n+2)::after {
  background: rgba(233,99,93,.05);
}

.feature-card:nth-child(3n)::after {
  background: rgba(24,170,152,.05);
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.feature-card > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border: 1px solid rgba(45,157,204,.16);
  border-radius: 15px;
  color: var(--blue-700);
  background: linear-gradient(145deg, var(--blue-50), #fff);
  box-shadow: var(--shadow-xs);
  font-size: 1.15rem;
}

.feature-card:nth-child(3n+2) > i {
  color: var(--red-600);
  border-color: rgba(233,99,93,.15);
  background: linear-gradient(145deg, var(--red-50), #fff);
}

.feature-card:nth-child(3n) > i {
  color: var(--teal-600);
  border-color: rgba(24,170,152,.15);
  background: linear-gradient(145deg, var(--teal-50), #fff);
}

.feature-card h3 {
  font-size: 1.04rem;
}

.feature-card p {
  margin-bottom: .85rem;
  font-size: .88rem;
}

.feature-card a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--blue-700);
  font-size: .82rem;
  font-weight: 800;
}

/* ========================================================================== 
   12. STATS
   ========================================================================== */
.stats-section {
  padding: clamp(2.6rem, 5vw, 4.2rem) 0;
  background:
    radial-gradient(circle at 10% 50%, rgba(45,157,204,.14), transparent 22rem),
    radial-gradient(circle at 90% 50%, rgba(233,99,93,.11), transparent 22rem),
    linear-gradient(135deg, #edf8fd, #fff9f7 52%, #effaf8);
  border-block: 1px solid rgba(31,91,119,.09);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}

.counter-card {
  display: grid;
  align-content: center;
  min-height: 122px;
  padding: 1rem;
  border: 1px solid rgba(31,91,119,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  box-shadow: var(--shadow-sm);
  text-align: center;
  backdrop-filter: blur(12px);
}

.counter-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.counter-number {
  color: var(--blue-700);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.65rem, 6vw, 2.55rem);
  font-weight: 820;
  line-height: 1;
}

.counter-card:nth-child(2n) .counter-number {
  color: var(--red-600);
}

.counter-label {
  margin-top: .35rem;
  color: var(--soft-ink);
  font-size: .74rem;
  font-weight: 760;
  line-height: 1.35;
}

/* ========================================================================== 
   13. CHANNEL GRID
   ========================================================================== */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 210px;
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: linear-gradient(150deg, rgba(255,255,255,.94), var(--blue-25));
  box-shadow: var(--shadow-sm);
}

.channel-card:nth-child(4n+2),
.channel-card:nth-child(4n+3) {
  background: linear-gradient(150deg, rgba(255,255,255,.94), var(--red-25));
}

.channel-card::before {
  content: "";
  position: absolute;
  top: -38px;
  right: -38px;
  width: 108px;
  height: 108px;
  border: 20px solid rgba(45,157,204,.045);
  border-radius: 50%;
}

.channel-card > i {
  color: var(--blue-600);
  font-size: 1.42rem;
  margin-bottom: .8rem;
}

.channel-card h3 {
  font-size: .99rem;
}

.channel-card p {
  flex: 1;
  margin-bottom: .8rem;
  font-size: .81rem;
  line-height: 1.55;
}

.channel-card .count {
  display: inline-flex;
  align-self: flex-start;
  padding: .35rem .6rem;
  border: 1px solid rgba(45,157,204,.15);
  border-radius: var(--pill);
  color: var(--blue-700);
  background: #fff;
  font-size: .68rem;
  font-weight: 830;
}

.channel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* ========================================================================== 
   14. DEVICE GRID
   ========================================================================== */
.device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.device-card {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.device-card > i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto .85rem;
  border-radius: 17px;
  color: var(--blue-700);
  background: linear-gradient(145deg, var(--blue-100), #fff);
  box-shadow: inset 0 0 0 1px rgba(45,157,204,.12);
  font-size: 1.25rem;
}

.device-card:nth-child(3n+2) > i {
  color: var(--red-600);
  background: linear-gradient(145deg, var(--red-100), #fff);
}

.device-card:nth-child(3n) > i {
  color: var(--teal-600);
  background: linear-gradient(145deg, var(--teal-100), #fff);
}

.device-card h3 {
  font-size: .93rem;
}

.device-card p {
  margin: 0;
  font-size: .79rem;
  line-height: 1.55;
}

.device-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* ========================================================================== 
   15. APP SCREENSHOTS / LIGHTBOX
   ========================================================================== */
.screenshot-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .95rem;
}

.screenshot-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.screenshot-card > button {
  display: block;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--blue-50);
}

.screenshot-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 520ms var(--ease-slow), filter 250ms ease;
}

.screenshot-card:hover img {
  transform: scale(1.025);
  filter: saturate(1.03);
}

.screenshot-card figcaption {
  display: grid;
  gap: .28rem;
  padding: 1rem 1.05rem 1.1rem;
}

.screenshot-card figcaption strong {
  font-family: "Sora", sans-serif;
  font-size: .9rem;
}

.screenshot-card figcaption span {
  color: var(--copy);
  font-size: .78rem;
  line-height: 1.55;
}

.image-dialog {
  width: min(94vw, 1120px);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 35px 100px rgba(19,38,59,.34);
}

.image-dialog::backdrop {
  background: rgba(11,26,38,.74);
  backdrop-filter: blur(8px);
}

.image-dialog img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #0e1c26;
}

.dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  color: #fff;
  background: rgba(19,38,59,.72);
  box-shadow: var(--shadow-md);
  font-size: 1.35rem;
}

.dialog-caption {
  margin: 0;
  padding: .9rem 1.1rem;
  color: var(--soft-ink);
  background: #fff;
  font-size: .82rem;
}

/* ========================================================================== 
   16. SUBSCRIPTION PRICING
   ========================================================================== */
.pricing {
  padding: var(--section-space) 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(45,157,204,.07), transparent 22rem),
    radial-gradient(circle at 92% 100%, rgba(233,99,93,.06), transparent 25rem),
    linear-gradient(180deg, #f8fcfe, #fff, #fff9f7);
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-md);
}

.pricing-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}

.pricing-card.popular {
  padding-top: 2.25rem;
  border-color: rgba(233,99,93,.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(233,99,93,.09), transparent 12rem),
    linear-gradient(160deg, #fff, var(--red-25));
  box-shadow: var(--shadow-red), var(--shadow-md);
}

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 30px;
  max-width: calc(100% - 30px);
  transform: translateX(-50%);
  padding: .42rem .8rem;
  border: 3px solid var(--offwhite);
  border-radius: var(--pill);
  color: #fff;
  background: linear-gradient(125deg, var(--red-600), var(--red-500));
  box-shadow: 0 9px 22px rgba(201,72,69,.22);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

.plan-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1rem;
  border: 1px solid rgba(45,157,204,.15);
  border-radius: 17px;
  color: var(--blue-700);
  background: linear-gradient(145deg, var(--blue-50), #fff);
  box-shadow: var(--shadow-xs);
  font-size: 1.2rem;
}

.pricing-card.popular .plan-icon {
  color: var(--red-600);
  border-color: rgba(233,99,93,.16);
  background: linear-gradient(145deg, var(--red-50), #fff);
}

.pricing-card h3 {
  font-size: 1.15rem;
}

.pricing-card > p {
  min-height: 1.5em;
  font-size: .82rem;
}

.price-box {
  display: grid;
  gap: .12rem;
  margin: .85rem 0 1rem;
  padding: .95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--blue-25), #fff);
}

.pricing-card.popular .price-box {
  background: linear-gradient(145deg, var(--red-25), #fff);
}

.price {
  color: var(--heading);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.8rem, 7vw, 2.45rem);
  font-weight: 830;
  line-height: 1;
}

.period {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 720;
}

.pricing-features {
  display: grid;
  gap: .62rem;
  margin: .35rem 0 1.2rem;
}

.pricing-features li {
  position: relative;
  padding-left: 1.55rem;
  color: var(--soft-ink);
  font-size: .82rem;
  line-height: 1.45;
}

.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .02rem;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--teal-700);
  background: var(--teal-50);
  font-size: .67rem;
  font-weight: 900;
}

.pricing-card .btn,
.reseller-card .btn {
  margin-top: auto;
}

/* ========================================================================== 
   17. RESELLER PRICING
   ========================================================================== */
.reseller-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.reseller-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-md);
}

.reseller-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 160px;
  height: 160px;
  border: 30px solid rgba(45,157,204,.035);
  border-radius: 50%;
  pointer-events: none;
}

.reseller-card.featured {
  border-color: rgba(45,157,204,.28);
  background:
    radial-gradient(circle at 100% 0%, rgba(45,157,204,.09), transparent 14rem),
    linear-gradient(160deg, #fff, var(--blue-25));
  box-shadow: var(--shadow-blue), var(--shadow-md);
}

.reseller-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.reseller-card h3 {
  font-size: 1.12rem;
}

.reseller-card > p {
  font-size: .83rem;
}

.credit-price {
  display: grid;
  gap: .12rem;
  margin: .85rem 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--red-25), #fff);
}

.reseller-card.featured .credit-price {
  background: linear-gradient(145deg, var(--blue-50), #fff);
}

.credit-price strong {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.8rem, 7vw, 2.35rem);
  line-height: 1;
}

.credit-price span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 720;
}

/* ========================================================================== 
   18. EXPERIENCE CAROUSEL
   ========================================================================== */
.experience-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow-md);
}

.experience-track {
  display: flex;
  gap: .8rem;
  width: 100%;
  padding: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.experience-track::-webkit-scrollbar {
  display: none;
}

.experience-card {
  flex: 0 0 min(84vw, 340px);
  scroll-snap-align: start;
  min-height: 225px;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, var(--blue-25));
  box-shadow: var(--shadow-sm);
}

.experience-card:nth-child(even) {
  background: linear-gradient(150deg, #fff, var(--red-25));
}

.experience-card .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  margin-bottom: 1rem;
  padding: 0 .6rem;
  border-radius: var(--pill);
  color: #fff;
  background: linear-gradient(125deg, var(--blue-700), var(--teal-600));
  font-family: "Sora", sans-serif;
  font-size: .77rem;
  font-weight: 850;
}

.experience-card:nth-child(even) .number {
  background: linear-gradient(125deg, var(--red-600), var(--red-500));
}

.experience-card h3 {
  font-size: 1rem;
}

.experience-card p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.58;
}

.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding: 0 1rem 1rem;
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--blue-700);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.carousel-btn:hover {
  color: #fff;
  border-color: var(--blue-700);
  background: var(--blue-700);
  transform: translateY(-2px);
}

/* ========================================================================== 
   19. HOW IT WORKS / STEPS
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  counter-reset: step;
}

.step-card {
  position: relative;
  min-width: 0;
  min-height: 180px;
  padding: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-sm);
  counter-increment: step;
}

.step-card::before {
  content: counter(step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 30px;
  margin-bottom: .75rem;
  padding: 0 .45rem;
  border-radius: var(--pill);
  color: var(--blue-700);
  background: var(--blue-50);
  font-family: "Sora", sans-serif;
  font-size: .69rem;
  font-weight: 850;
}

.step-card:nth-child(even)::before {
  color: var(--red-700);
  background: var(--red-50);
}

.step-card h3 {
  font-size: .92rem;
}

.step-card p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.55;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* ========================================================================== 
   20. BLOG / GUIDES
   ========================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}

.blog-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.blog-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: .9rem;
  border-radius: 15px;
  color: var(--blue-700);
  background: linear-gradient(145deg, var(--blue-100), #fff);
  box-shadow: inset 0 0 0 1px rgba(45,157,204,.13);
  font-size: 1.1rem;
}

.blog-card:nth-child(3n+2) .blog-icon {
  color: var(--red-600);
  background: linear-gradient(145deg, var(--red-100), #fff);
}

.blog-card:nth-child(3n) .blog-icon {
  color: var(--teal-600);
  background: linear-gradient(145deg, var(--teal-100), #fff);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  margin-bottom: .7rem;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 730;
}

.blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
}

.blog-card h2,
.blog-card h3 {
  font-size: 1.06rem;
  line-height: 1.35;
}

.blog-card p {
  flex: 1;
  font-size: .82rem;
  line-height: 1.58;
}

/* ========================================================================== 
   21. FAQ
   ========================================================================== */
.faq-section {
  background:
    radial-gradient(circle at 0 50%, rgba(45,157,204,.05), transparent 24rem),
    radial-gradient(circle at 100% 40%, rgba(233,99,93,.045), transparent 24rem),
    var(--offwhite-2);
}

.faq-item {
  overflow: hidden;
  margin-bottom: .7rem;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-xs);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item h3 {
  margin: 0;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  padding: 1rem 1.05rem;
  color: var(--heading);
  text-align: left;
  font-family: "Sora", sans-serif;
  font-size: .9rem;
  font-weight: 730;
  line-height: 1.4;
}

.faq-question i {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--blue-700);
  background: var(--blue-50);
  transition: transform var(--ease), color var(--ease), background var(--ease);
}

.faq-question[aria-expanded="true"] {
  color: var(--blue-800);
  background: linear-gradient(135deg, var(--blue-50), var(--red-25));
}

.faq-question[aria-expanded="true"] i {
  color: #fff;
  background: var(--red-500);
  transform: rotate(45deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: .4;
  transition: grid-template-rows 320ms var(--ease-slow), opacity 220ms ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer[aria-hidden="false"],
.faq-item.active .faq-answer,
.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-answer p {
  margin: 0;
  padding: 0 1.05rem 1.05rem;
  color: var(--copy);
  font-size: .82rem;
  line-height: 1.66;
}

/* ========================================================================== 
   22. NEWSLETTER
   ========================================================================== */
.newsletter {
  padding: clamp(3.4rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(45,157,204,.16), transparent 20rem),
    radial-gradient(circle at 85% 80%, rgba(233,99,93,.12), transparent 20rem),
    linear-gradient(135deg, #edf9ff, #fff9f7 55%, #effaf8);
  border-block: 1px solid rgba(31,91,119,.09);
}

.newsletter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.3rem;
  align-items: center;
  padding: 1.35rem;
  border: 1px solid rgba(31,91,119,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(15px);
}

.newsletter-grid > div .section-tag {
  margin-bottom: .7rem;
}

.newsletter-grid h2 {
  font-size: clamp(1.55rem, 5vw, 2.5rem);
}

.newsletter-grid p {
  margin-bottom: 0;
}

.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .65rem;
}

.newsletter-form input {
  min-height: 50px;
  padding: .78rem .95rem;
  border-color: rgba(31,91,119,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: inset 0 1px 2px rgba(21,55,73,.03);
}

.newsletter-form input:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(45,157,204,.10);
}

.status-message {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

/* ========================================================================== 
   23. FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 6vw, 5.2rem);
  color: #324a5a;
  border-top: 1px solid rgba(31,91,119,.11);
  background:
    radial-gradient(circle at 10% 0%, rgba(45,157,204,.10), transparent 25rem),
    radial-gradient(circle at 90% 100%, rgba(233,99,93,.08), transparent 23rem),
    linear-gradient(180deg, #f8fcfe, #f8f6f1);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-bottom: 2.2rem;
}

.footer-about {
  min-width: 0;
}

.footer-logo img {
  width: auto;
  height: 56px;
  max-width: 235px;
  object-fit: contain;
  object-position: left center;
}

.footer-about > p {
  max-width: 520px;
  margin: 1rem 0;
  color: #516979;
  font-size: .86rem;
}

.footer-contact {
  display: grid;
  gap: .5rem;
}

.footer-contact a {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #2b4658;
  font-size: .82rem;
  font-weight: 720;
  overflow-wrap: anywhere;
}

.footer-contact i {
  width: 22px;
  color: var(--blue-600);
}

.footer-heading {
  margin-bottom: .9rem;
  font-size: .98rem;
}

.footer-links {
  display: grid;
  gap: .54rem;
}

.footer-links a {
  position: relative;
  width: fit-content;
  color: #526978;
  font-size: .79rem;
  font-weight: 650;
}

.footer-links a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--blue-600);
  transition: width var(--ease);
}

.footer-links a:hover {
  color: var(--blue-700);
  transform: translateX(2px);
}

.footer-links a:hover::before {
  width: 100%;
}

.legal-note {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  padding: .75rem;
  border: 1px solid rgba(233,99,93,.12);
  border-radius: 13px;
  color: #6d5d5a;
  background: var(--red-25);
  font-size: .69rem;
  line-height: 1.5;
}

.legal-note i {
  flex: 0 0 auto;
  margin-top: .18rem;
  color: var(--red-500);
}

.footer-bottom {
  display: grid;
  gap: .6rem;
  padding: 1.15rem 0 1.4rem;
  border-top: 1px solid rgba(31,91,119,.11);
  color: #6a7c88;
  font-size: .7rem;
  line-height: 1.45;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
}

.footer-bottom-links a {
  color: #4b6474;
  font-weight: 720;
}

/* ========================================================================== 
   24. FLOATING WHATSAPP + BACK TO TOP
   ========================================================================== */
.whatsapp-float {
  position: fixed !important;
  right: 16px !important;
  bottom: 17px !important;
  z-index: 1100 !important;
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #1fbd6b !important;
  box-shadow: 0 13px 32px rgba(31,189,107,.30) !important;
  font-size: 1.55rem !important;
}

.whatsapp-float:hover {
  color: #fff !important;
  background: #16a45b !important;
  transform: translateY(-3px) scale(1.03);
}

.back-to-top {
  position: fixed;
  right: 21px;
  bottom: 84px;
  z-index: 1090;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(18,101,143,.20);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--ease), visibility var(--ease), transform var(--ease), background var(--ease);
}

.back-to-top.show,
.back-to-top.active,
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--red-600);
  transform: translateY(-2px);
}

/* ========================================================================== 
   25. SMALL MOBILE POLISH — 420PX+
   ========================================================================== */
@media (min-width: 420px) {
  .container {
    width: min(calc(100% - 34px), var(--container));
  }

  .hero-cta .btn {
    flex: 1 1 calc(50% - .72rem);
  }

  .hero-cta .btn-ghost {
    flex-basis: 100%;
  }

  .logo-slide-item {
    width: clamp(132px, 28vw, 190px);
  }

  .poster-slide-item {
    width: clamp(126px, 28vw, 190px);
  }
}

/* ========================================================================== 
   26. TABLET — 600PX+
   ========================================================================== */
@media (min-width: 600px) {
  .header-flex {
    min-height: 74px;
  }

  .site-brand-logo,
  .mobile-logo img {
    height: 52px;
    max-width: 225px;
  }

  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-cta .btn,
  .hero-cta .btn-ghost {
    flex: 0 1 auto;
  }

  .info-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .info-strip-item:last-child:nth-child(5) {
    grid-column: span 2;
  }

  .feature-grid,
  .screenshot-gallery,
  .pricing-grid,
  .reseller-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .device-grid,
  .channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .counter-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .newsletter-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .newsletter-form .status-message {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========================================================================== 
   27. TABLET / SMALL DESKTOP — 800PX+
   ========================================================================== */
@media (min-width: 800px) {
  :root {
    --header-height: 80px;
  }

  .container {
    width: min(calc(100% - 48px), var(--container));
  }

  .hero {
    padding-top: clamp(4.6rem, 8vw, 7rem);
  }

  .hero-content {
    padding-right: 1rem;
  }

  .hero-title {
    font-size: clamp(3.3rem, 7vw, 5.15rem);
  }

  .info-strip-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .45rem;
  }

  .info-strip-item:last-child:nth-child(5) {
    grid-column: auto;
  }

  .info-strip-item {
    min-height: 74px;
  }

  .overview-table-wrap {
    overflow-x: auto;
  }

  .overview-table {
    min-width: 760px;
  }

  .overview-table thead {
    display: table-header-group;
  }

  .overview-table tbody {
    display: table-row-group;
  }

  .overview-table tr {
    display: table-row;
    width: auto;
    padding: 0;
    border: 0;
  }

  .overview-table th,
  .overview-table td {
    display: table-cell;
    width: auto;
    padding: 1rem 1.05rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }

  .overview-table th {
    color: var(--heading);
    background: linear-gradient(135deg, var(--blue-50), var(--red-25));
    font-size: .78rem;
    font-weight: 850;
  }

  .overview-table td {
    position: static;
    background: #fff !important;
    font-size: .83rem;
  }

  .overview-table td::before {
    display: none;
  }

  .overview-table tbody tr:hover td {
    background: var(--blue-25) !important;
  }

  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .channel-grid,
  .device-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .screenshot-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reseller-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .newsletter-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    padding: 1.8rem;
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, .78fr));
    gap: 2rem 2.5rem;
  }

  .footer-bottom {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .footer-bottom > span:nth-child(2) {
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: flex-end;
  }
}

/* ========================================================================== 
   28. DESKTOP LAYOUT — 1024PX+
   ========================================================================== */
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
    gap: clamp(2.2rem, 5vw, 5rem);
  }

  .hero-visual {
    min-height: 520px;
  }

  .hero-panel {
    width: min(100%, 470px);
  }

  .panel-screen {
    min-height: 250px;
  }

  .feature-card,
  .pricing-card,
  .reseller-card,
  .blog-card {
    padding: 1.45rem;
  }

  .pricing-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
  }

  .pricing-card.popular {
    transform: translateY(-8px);
  }

  .pricing-card.popular:hover {
    transform: translateY(-13px);
  }

  .screenshot-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .experience-track {
    gap: 1rem;
    padding: 1.15rem;
  }

  .experience-card {
    flex-basis: calc((100% - 2rem) / 3);
  }

  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ========================================================================== 
   29. FULL DESKTOP HEADER — 1180PX+
   ========================================================================== */
@media (min-width: 1180px) {
  .header-flex {
    min-height: 82px;
    gap: .8rem;
  }

  .site-brand-logo {
    height: 56px;
    max-width: 235px;
  }

  .mobile-menu-toggle,
  .mobile-nav {
    display: none !important;
  }

  .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: .08rem;
  }

  .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .58rem .55rem;
    border-radius: 11px;
    color: #344d5f;
    font-size: clamp(.73rem, .76vw, .82rem);
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-links a:hover {
    color: var(--blue-700);
    background: var(--blue-50);
  }

  .nav-links a.active {
    color: var(--blue-700);
    border: 1px solid rgba(45,157,204,.12);
    background: linear-gradient(135deg, var(--blue-100), var(--red-25));
  }

  .header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .42rem;
  }

  .header-actions .btn {
    padding-inline: .84rem;
  }

  .hero {
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
  }

  .channel-card,
  .device-card {
    min-height: 225px;
  }
}

/* ========================================================================== 
   30. LARGE DESKTOP — 1320PX+
   ========================================================================== */
@media (min-width: 1320px) {
  .container {
    width: min(calc(100% - 64px), var(--container));
  }

  .header-flex {
    gap: 1.15rem;
  }

  .site-brand-logo {
    height: 60px;
    max-width: 250px;
  }

  .nav-links {
    gap: .14rem;
  }

  .nav-links a {
    padding-inline: .66rem;
    font-size: .81rem;
  }

  .header-actions .btn {
    padding-inline: 1rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(430px, .82fr);
  }

  .hero-title {
    font-size: clamp(4rem, 5vw, 5.5rem);
  }

  .hero-visual {
    min-height: 560px;
  }

  .hero-panel {
    width: 490px;
  }

  .info-strip-grid {
    padding: .82rem;
  }

  .feature-grid {
    gap: 1rem;
  }

  .media-marquee-group {
    gap: .65rem;
    padding-right: .65rem;
  }

  .poster-slide-item {
    width: 200px;
  }

  .logo-slide-item {
    width: 205px;
    height: 104px;
  }
}

/* ========================================================================== 
   31. EXTRA-WIDE DESKTOP — 1500PX+
   ========================================================================== */
@media (min-width: 1500px) {
  :root {
    --container: 1480px;
  }

  .nav-links a {
    padding-inline: .78rem;
    font-size: .84rem;
  }

  .hero-grid {
    gap: 5rem;
  }

  .hero-content {
    padding-left: .5rem;
  }

  .feature-card,
  .pricing-card,
  .reseller-card,
  .blog-card {
    padding: 1.55rem;
  }
}

/* ========================================================================== 
   32. VERY SMALL PHONES
   ========================================================================== */
@media (max-width: 380px) {
  .container {
    width: min(calc(100% - 22px), var(--container));
  }

  .site-brand-logo,
  .mobile-logo img {
    height: 43px;
    max-width: 180px;
  }

  .hero-title {
    font-size: 2.14rem;
  }

  .hero-stats,
  .info-strip-grid,
  .channel-grid,
  .device-grid,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-strip-item:last-child:nth-child(5),
  .counter-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .hero-visual {
    min-height: 360px;
    padding-inline: .25rem;
  }

  .panel-screen {
    min-height: 190px;
  }

  .panel-grid {
    grid-template-columns: 1fr;
  }

  .overview-table td {
    padding-left: .72rem;
    padding-top: 2.25rem;
  }

  .overview-table td::before {
    top: .58rem;
    left: .72rem;
    width: calc(100% - 1.44rem);
  }
}

/* ========================================================================== 
   33. POINTER / HOVER ENHANCEMENTS
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .feature-card,
  .channel-card,
  .device-card,
  .pricing-card,
  .reseller-card,
  .blog-card,
  .step-card,
  .screenshot-card {
    transition:
      transform 260ms var(--ease-slow),
      box-shadow 260ms ease,
      border-color 260ms ease,
      background 260ms ease;
  }

  .info-strip-item:hover {
    transform: translateY(-2px);
  }

  .panel-chip:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-xs);
  }
}

/* ========================================================================== 
   34. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .media-marquee-track {
    animation: none !important;
  }

  .media-marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .media-marquee::before,
  .media-marquee::after {
    display: none;
  }
}

/* ========================================================================== 
   35. PRINT
   ========================================================================== */
@media print {
  .sticky-header,
  .mobile-nav,
  .whatsapp-float,
  .back-to-top,
  .preloader,
  .hero-visual,
  .media-showcase,
  .carousel-controls,
  .newsletter {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .container {
    width: 100%;
  }

  .hero,
  .premium-section,
  .pricing,
  section#features,
  section#channels,
  section#experience,
  section#guides,
  .faq-section {
    padding: 1rem 0;
    background: #fff !important;
  }

  .feature-card,
  .channel-card,
  .device-card,
  .pricing-card,
  .reseller-card,
  .blog-card,
  .faq-item,
  .overview-table-wrap {
    break-inside: avoid;
    box-shadow: none !important;
  }
}

/* ========================================================================== 
   36. FINAL CTA FEATURE PANEL
   ========================================================================== */
.feature-panel {
  position: relative;
  width: min(100%, 980px);
  margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid rgba(31,91,119,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(45,157,204,.12), transparent 19rem),
    radial-gradient(circle at 100% 100%, rgba(233,99,93,.10), transparent 18rem),
    rgba(255,255,255,.88);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
}

.feature-panel::before,
.feature-panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.feature-panel::before {
  top: -75px;
  right: -75px;
  width: 180px;
  height: 180px;
  border: 24px solid rgba(45,157,204,.045);
}

.feature-panel::after {
  bottom: -70px;
  left: -70px;
  width: 160px;
  height: 160px;
  border: 22px solid rgba(233,99,93,.04);
}

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

.feature-panel h2 {
  margin-inline: auto;
  font-size: clamp(1.7rem, 5vw, 2.85rem);
}

.feature-panel p {
  width: min(100%, 720px);
  margin: 0 auto;
  font-size: .95rem;
}

.feature-panel .inline-actions {
  margin-top: 1.5rem;
}

/* ========================================================================== 
   HELLO SKY IPTV — ADDITIONAL INTERNAL-PAGE STYLES
   APPEND THIS BLOCK TO THE END OF css/style.css
   Covers page heroes, breadcrumbs, internal content cards, FAQ hub,
   free trial, contact/forms, search, sitemap, legal/blog prose and errors.
   Mobile-first | Light off-white / sky-blue / coral premium theme
   ========================================================================== */

/* ========================================================================== 
   01. INTERNAL PAGE HERO + BREADCRUMBS
   ========================================================================== */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.5rem, 9vw, 5rem) 0 clamp(3.2rem, 8vw, 4.6rem);
    border-bottom: 1px solid var(--hs-line);
    background:
        radial-gradient(circle at 10% 14%, rgba(43, 154, 199, 0.15), transparent 24rem),
        radial-gradient(circle at 91% 16%, rgba(236, 112, 107, 0.12), transparent 22rem),
        radial-gradient(circle at 55% 100%, rgba(18, 169, 159, 0.07), transparent 24rem),
        linear-gradient(145deg, #fffdfa 0%, #f0f8fc 49%, #fff4f2 100%);
}

.page-hero::before,
.page-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.page-hero::before {
    top: -95px;
    right: -80px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(43, 154, 199, 0.14);
    box-shadow: inset 0 0 0 34px rgba(43, 154, 199, 0.025);
}

.page-hero::after {
    left: -100px;
    bottom: -125px;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(236, 112, 107, 0.13);
    box-shadow: inset 0 0 0 42px rgba(236, 112, 107, 0.025);
}

.page-hero .container {
    position: relative;
    z-index: 2;
    width: min(100% - 28px, 1040px);
    text-align: center;
}

.page-hero .section-tag {
    margin-inline: auto;
}

.page-hero h1 {
    max-width: 960px;
    margin: 0.85rem auto 1rem;
    color: var(--hs-heading);
    font-size: clamp(2rem, 7vw, 4.15rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.page-hero > .container > p,
.page-hero .container > p {
    max-width: 820px;
    margin: 0 auto;
    color: var(--hs-copy);
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.78;
}

.page-hero .inline-actions {
    justify-content: center;
    margin-top: 1.55rem;
}

.breadcrumbs {
    margin: 0 0 1.15rem;
    color: var(--hs-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 0.38rem;
    color: rgba(79, 100, 117, 0.5);
    font-weight: 500;
}

.breadcrumbs a {
    color: var(--hs-blue-700);
    font-weight: 800;
}

.breadcrumbs a:hover {
    color: var(--hs-coral-600);
}

/* ========================================================================== 
   02. INTERNAL TWO-COLUMN CONTENT + SHARED PREMIUM PANELS
   ========================================================================== */
.seo-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

.summary-box,
.support-contact-card,
.toc,
.author-box,
.form-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 4vw, 1.65rem);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(43, 154, 199, 0.07), transparent 42%),
        rgba(255, 255, 255, 0.9);
    box-shadow: var(--hs-shadow-md);
}

.summary-box::before,
.support-contact-card::before,
.toc::before,
.author-box::before,
.form-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--hs-blue-500), var(--hs-teal-500), var(--hs-coral-500));
}

.summary-box h2,
.summary-box h3,
.support-contact-card h2,
.support-contact-card h3,
.toc h2,
.author-box h2,
.form-card h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.08rem, 3vw, 1.35rem);
}

.summary-box p:last-child,
.support-contact-card p:last-child,
.author-box p:last-child,
.form-card p:last-child {
    margin-bottom: 0;
}

.summary-box .check-list,
.support-contact-card .check-list {
    margin-top: 0.85rem;
}

/* ========================================================================== 
   03. CHECK LISTS + QUALITY PILLS
   ========================================================================== */
.check-list,
.feature-list,
.channel-list-mini {
    display: grid;
    gap: 0.45rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.check-list li,
.feature-list li,
.channel-list-mini li {
    position: relative;
    padding: 0.38rem 0 0.38rem 1.65rem;
    color: var(--hs-copy);
    line-height: 1.55;
}

.check-list li::before,
.feature-list li::before,
.channel-list-mini li::before {
    content: "\f058";
    position: absolute;
    top: 0.42rem;
    left: 0;
    color: var(--hs-teal-600);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.quality-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1rem 0 1.2rem;
}

.quality-points span {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-height: 38px;
    padding: 0.48rem 0.72rem;
    border: 1px solid rgba(20, 127, 174, 0.14);
    border-radius: var(--hs-radius-pill);
    color: var(--hs-blue-800);
    background: linear-gradient(135deg, var(--hs-blue-50), rgba(255, 255, 255, 0.9));
    box-shadow: var(--hs-shadow-sm);
    font-size: 0.78rem;
    font-weight: 800;
}

.quality-points span:nth-child(3n + 2) {
    border-color: rgba(236, 112, 107, 0.16);
    background: linear-gradient(135deg, var(--hs-coral-50), rgba(255, 255, 255, 0.92));
}

.quality-points span:nth-child(3n) {
    border-color: rgba(18, 169, 159, 0.16);
    background: linear-gradient(135deg, var(--hs-teal-50), rgba(255, 255, 255, 0.92));
}

.quality-points i {
    color: var(--hs-blue-600);
}

/* ========================================================================== 
   04. INFO CARD GRIDS — ABOUT / FEATURES / CHANNELS / SETUP / APPS
   ========================================================================== */
.info-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
}

.info-card {
    position: relative;
    min-width: 0;
    padding: 1.2rem;
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 252, 0.82));
    box-shadow: var(--hs-shadow-sm);
    transition:
        transform var(--hs-transition-slow),
        border-color var(--hs-transition),
        box-shadow var(--hs-transition);
}

.info-card::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -44px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(43, 154, 199, 0.055);
    pointer-events: none;
}

.info-card:nth-child(3n + 2) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 243, 241, 0.84));
}

.info-card:nth-child(3n + 2)::after {
    background: rgba(236, 112, 107, 0.06);
}

.info-card:nth-child(3n) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 248, 0.84));
}

.info-card:nth-child(3n)::after {
    background: rgba(18, 169, 159, 0.06);
}

.info-card > i:first-child {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 0.9rem;
    border: 1px solid rgba(20, 127, 174, 0.14);
    border-radius: 14px;
    color: var(--hs-blue-700);
    background: var(--hs-blue-50);
    font-size: 1.05rem;
}

.info-card h2,
.info-card h3 {
    margin-bottom: 0.55rem;
    font-size: 1.02rem;
}

.info-card p {
    margin: 0;
    font-size: 0.91rem;
}

.info-card a {
    position: relative;
    z-index: 1;
}

/* ========================================================================== 
   05. FREE TRIAL CARDS
   ========================================================================== */
.trial-card {
    position: relative;
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: var(--hs-shadow-sm);
}

.trial-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--hs-blue-500), var(--hs-teal-500), var(--hs-coral-500));
}

.trial-card > i:first-child {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.9rem;
    border-radius: 15px;
    color: var(--hs-blue-700);
    background: linear-gradient(145deg, var(--hs-blue-100), var(--hs-coral-50));
    box-shadow: inset 0 0 0 1px var(--hs-line);
    font-size: 1.1rem;
}

.trial-card h3 {
    margin-bottom: 0.45rem;
    font-size: 1.03rem;
}

.trial-card p {
    margin: 0;
    font-size: 0.9rem;
}

/* ========================================================================== 
   06. PRICING COMPARISON BAND
   ========================================================================== */
.comparison-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1.35rem;
}

.comparison-band .feature-panel {
    height: 100%;
    margin: 0;
}

.comparison-band .feature-panel h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.comparison-band .feature-panel h3 i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--hs-blue-700);
    background: var(--hs-blue-50);
}

.comparison-band .feature-panel:nth-child(even) h3 i {
    color: var(--hs-coral-600);
    background: var(--hs-coral-50);
}

/* ========================================================================== 
   07. FULL FAQ PAGE — CATEGORY NAV + GROUPS
   ========================================================================== */
.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1.15rem;
}

.faq-category-nav {
    position: relative;
    display: flex;
    gap: 0.55rem;
    padding: 0.8rem;
    overflow-x: auto;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-lg);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--hs-shadow-sm);
    scrollbar-width: thin;
}

.faq-category-nav a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0.56rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--hs-copy);
    background: var(--hs-offwhite);
    font-size: 0.79rem;
    font-weight: 800;
    white-space: nowrap;
}

.faq-category-nav a:hover {
    color: var(--hs-blue-700);
    border-color: rgba(20, 127, 174, 0.18);
    background: var(--hs-blue-50);
}

.faq-group {
    scroll-margin-top: 112px;
}

.faq-group + .faq-group {
    margin-top: 2rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--hs-line);
}

.faq-group > h2 {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 1rem;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
}

.faq-group > h2::before {
    content: "";
    position: absolute;
    top: 0.15em;
    bottom: 0.15em;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hs-blue-500), var(--hs-coral-500));
}

/* Keep full FAQ page compatible with the fixed main.js */
.faq-layout .faq-item {
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: var(--hs-shadow-sm);
}

.faq-layout .faq-item + .faq-item {
    margin-top: 0.65rem;
}

.faq-layout .faq-item h3 {
    margin: 0;
}

.faq-layout .faq-question {
    width: 100%;
    min-height: 58px;
    padding: 0.92rem 1rem;
}

.faq-layout .faq-answer > div {
    padding: 0 1rem 1rem;
}

.faq-layout .faq-answer p:last-child {
    margin-bottom: 0;
}

/* ========================================================================== 
   08. CONTACT PAGE — CONTACT CARDS
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

.contact-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 1.3rem;
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--hs-shadow-sm);
}

.contact-card::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -40px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(43, 154, 199, 0.06);
}

.contact-card:nth-child(2)::after {
    background: rgba(236, 112, 107, 0.06);
}

.contact-card:nth-child(3)::after {
    background: rgba(18, 169, 159, 0.06);
}

.contact-card > i:first-child {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.9rem;
    border-radius: 15px;
    color: var(--hs-blue-700);
    background: var(--hs-blue-50);
    font-size: 1.15rem;
}

.contact-card:nth-child(2) > i:first-child {
    color: var(--hs-coral-600);
    background: var(--hs-coral-50);
}

.contact-card:nth-child(3) > i:first-child {
    color: var(--hs-teal-700);
    background: var(--hs-teal-50);
}

.contact-card h2 {
    margin-bottom: 0.5rem;
    font-size: 1.12rem;
}

.contact-card p {
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}

.contact-card .text-link {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

.support-contact-card {
    margin-top: 1rem;
}

.support-contact-card .inline-actions {
    margin-top: 1rem;
}

/* ========================================================================== 
   09. CONTACT FORM
   ========================================================================== */
.form-card {
    padding: clamp(1.15rem, 4vw, 1.75rem);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
}

.form-field {
    min-width: 0;
}

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label {
    display: inline-block;
    margin-bottom: 0.4rem;
    color: var(--hs-heading);
    font-size: 0.82rem;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea {
    min-height: 48px;
    padding: 0.74rem 0.85rem;
    border: 1px solid rgba(17, 70, 96, 0.16);
    border-radius: 12px;
    color: var(--hs-ink);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 1px 2px rgba(17, 40, 58, 0.025);
    transition:
        border-color var(--hs-transition),
        box-shadow var(--hs-transition),
        background var(--hs-transition);
}

.form-field textarea {
    min-height: 145px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #8494a0;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(20, 127, 174, 0.5);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(43, 154, 199, 0.1);
    outline: 0;
}

.form-grid .btn {
    justify-self: start;
}

.form-grid .status-message {
    grid-column: 1 / -1;
    margin: 0;
}

/* ========================================================================== 
   10. SEARCH PAGE
   ========================================================================== */
.search-box {
    position: relative;
    width: min(100%, 860px);
    margin-inline: auto;
}

.search-box input[type="search"] {
    min-height: 60px;
    padding: 0.9rem 3.2rem 0.9rem 1rem;
    border: 1px solid rgba(20, 127, 174, 0.22);
    border-radius: 16px;
    color: var(--hs-ink);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--hs-shadow-md);
    font-size: 0.96rem;
}

.search-box input[type="search"]:focus {
    border-color: rgba(20, 127, 174, 0.5);
    box-shadow: var(--hs-shadow-md), 0 0 0 4px rgba(43, 154, 199, 0.1);
    outline: 0;
}

.search-box > i {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    color: var(--hs-blue-600);
    pointer-events: none;
}

.search-results {
    display: grid;
    gap: 0.8rem;
    width: min(100%, 920px);
    margin: 1.2rem auto 0;
}

.search-results .search-result {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    background: rgba(255, 255, 255, 0.93);
    box-shadow: var(--hs-shadow-sm);
}

.search-results .search-result small {
    display: inline-flex;
    margin-bottom: 0.42rem;
    padding: 0.22rem 0.5rem;
    border-radius: var(--hs-radius-pill);
    color: var(--hs-blue-700);
    background: var(--hs-blue-50);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.search-results .search-result h2 {
    margin-bottom: 0.42rem;
    font-size: 1.05rem;
}

.search-results .search-result h2 a:hover {
    color: var(--hs-blue-700);
}

.search-results .search-result p {
    margin: 0;
    font-size: 0.88rem;
}

.search-results > .status-message {
    padding: 1rem;
    border: 1px dashed rgba(20, 127, 174, 0.24);
    border-radius: 14px;
    background: var(--hs-blue-50);
    text-align: center;
}

/* ========================================================================== 
   11. HTML SITEMAP PAGE
   ========================================================================== */
.sitemap-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
}

.sitemap-card {
    position: relative;
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--hs-shadow-sm);
}

.sitemap-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--hs-blue-500), var(--hs-teal-500));
}

.sitemap-card:nth-child(even)::before {
    background: linear-gradient(90deg, var(--hs-coral-500), var(--hs-gold-500));
}

.sitemap-card h2 {
    margin-bottom: 0.75rem;
    font-size: 1.08rem;
}

.sitemap-card ul {
    display: grid;
    gap: 0.32rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitemap-card a {
    position: relative;
    display: block;
    padding: 0.42rem 0.6rem 0.42rem 1.25rem;
    border-radius: 9px;
    color: var(--hs-copy);
    font-size: 0.86rem;
    font-weight: 700;
}

.sitemap-card a::before {
    content: "\f105";
    position: absolute;
    top: 0.48rem;
    left: 0.45rem;
    color: var(--hs-blue-500);
    font-family: "Font Awesome 6 Free";
    font-size: 0.72rem;
    font-weight: 900;
}

.sitemap-card a:hover {
    color: var(--hs-blue-700);
    background: var(--hs-blue-50);
    transform: translateX(2px);
}

/* ========================================================================== 
   12. LEGAL + BLOG ARTICLE PROSE
   ========================================================================== */
.prose {
    color: var(--hs-copy);
    font-size: 0.98rem;
    line-height: 1.82;
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose h2,
.prose h3,
.prose h4 {
    color: var(--hs-heading);
    scroll-margin-top: 110px;
}

.prose h2 {
    margin-top: 2.4rem;
    margin-bottom: 0.8rem;
    font-size: clamp(1.45rem, 4vw, 2.15rem);
}

.prose h3 {
    margin-top: 1.8rem;
    margin-bottom: 0.65rem;
    font-size: clamp(1.12rem, 3vw, 1.4rem);
}

.prose h4 {
    margin-top: 1.45rem;
    font-size: 1rem;
}

.prose p,
.prose li {
    color: var(--hs-copy);
}

.prose p {
    margin-bottom: 1rem;
}

.prose a {
    color: var(--hs-blue-700);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(20, 127, 174, 0.25);
    text-underline-offset: 3px;
}

.prose a:hover {
    color: var(--hs-coral-600);
    text-decoration-color: currentColor;
}

.prose ul,
.prose ol {
    display: grid;
    gap: 0.42rem;
    margin: 0.9rem 0 1.25rem 1.2rem;
    padding-left: 0.7rem;
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li::marker {
    color: var(--hs-blue-600);
    font-weight: 800;
}

.prose strong {
    color: var(--hs-heading);
}

.prose hr {
    height: 1px;
    margin: 2rem 0;
    border: 0;
    background: var(--hs-line);
}

.prose blockquote {
    position: relative;
    margin: 1.4rem 0;
    padding: 1rem 1.1rem 1rem 1.25rem;
    border: 1px solid rgba(20, 127, 174, 0.13);
    border-left: 4px solid var(--hs-blue-500);
    border-radius: 0 14px 14px 0;
    color: var(--hs-ink);
    background: linear-gradient(135deg, var(--hs-blue-50), rgba(255, 255, 255, 0.9));
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose table {
    width: 100%;
    margin: 1.35rem 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--hs-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--hs-shadow-sm);
}

.prose th,
.prose td {
    padding: 0.78rem;
    border-right: 1px solid var(--hs-line);
    border-bottom: 1px solid var(--hs-line);
    text-align: left;
    vertical-align: top;
}

.prose tr > :last-child {
    border-right: 0;
}

.prose tbody tr:last-child > * {
    border-bottom: 0;
}

.prose th {
    color: var(--hs-heading);
    background: linear-gradient(135deg, var(--hs-blue-50), var(--hs-offwhite));
    font-weight: 850;
}

.prose code {
    padding: 0.15em 0.35em;
    border: 1px solid var(--hs-line);
    border-radius: 6px;
    color: var(--hs-blue-800);
    background: var(--hs-blue-50);
    font-size: 0.9em;
}

.prose pre {
    max-width: 100%;
    padding: 1rem;
    overflow-x: auto;
    border: 1px solid var(--hs-line);
    border-radius: 14px;
    background: #f4f8fa;
}

.prose img {
    width: 100%;
    height: auto;
    margin: 1.2rem 0;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-md);
    box-shadow: var(--hs-shadow-md);
}

.updated-line {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(20, 127, 174, 0.12);
    border-radius: var(--hs-radius-pill);
    color: var(--hs-muted);
    background: var(--hs-blue-50);
    font-size: 0.75rem;
    font-weight: 750;
}

/* ========================================================================== 
   13. ARTICLE TABLE OF CONTENTS
   ========================================================================== */
.toc {
    margin: 0 0 1.5rem;
}

.toc h2 {
    margin-bottom: 0.85rem;
}

.toc ol,
.toc ul {
    display: grid;
    gap: 0.38rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc-item;
}

.toc li {
    counter-increment: toc-item;
}

.toc a {
    position: relative;
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 9px;
    color: var(--hs-copy);
    font-size: 0.84rem;
    font-weight: 700;
}

.toc a::before {
    content: counter(toc-item, decimal-leading-zero);
    flex: 0 0 auto;
    color: var(--hs-blue-600);
    font-family: "Sora", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.toc a:hover {
    color: var(--hs-blue-700);
    background: var(--hs-blue-50);
}

/* ========================================================================== 
   14. ARTICLE AUTHOR BOX
   ========================================================================== */
.author-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    margin-top: 2rem;
}

.author-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(20, 127, 174, 0.14);
    border-radius: 16px;
    color: var(--hs-blue-700);
    background: linear-gradient(145deg, var(--hs-blue-100), var(--hs-coral-50));
    font-size: 1.15rem;
}

.author-box h2 {
    margin-bottom: 0.45rem;
    font-size: 1.08rem;
}

.author-box p {
    margin-bottom: 0.55rem;
    font-size: 0.86rem;
}

.author-box a {
    color: var(--hs-blue-700);
    font-size: 0.82rem;
    font-weight: 850;
}

.author-box a:hover {
    color: var(--hs-coral-600);
}

/* ========================================================================== 
   15. BLOG PAGINATION
   ========================================================================== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 2rem;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--hs-line);
    border-radius: 11px;
    color: var(--hs-copy);
    background: #fff;
    box-shadow: var(--hs-shadow-sm);
    font-size: 0.82rem;
    font-weight: 800;
}

.pagination a:hover,
.pagination .current,
.pagination span.current {
    color: #fff;
    border-color: var(--hs-blue-700);
    background: linear-gradient(135deg, var(--hs-blue-700), var(--hs-teal-700));
}

/* ========================================================================== 
   16. 403 / 404 / 405 ERROR PAGES
   ========================================================================== */
.error-page {
    position: relative;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 72px);
    padding: 4rem 0;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(43, 154, 199, 0.14), transparent 26rem),
        radial-gradient(circle at 82% 18%, rgba(236, 112, 107, 0.11), transparent 24rem),
        linear-gradient(145deg, #fffdfa, #eff8fc 50%, #fff4f2);
}

.error-page .container,
.error-page > div {
    width: min(100% - 28px, 760px);
    margin-inline: auto;
}

.error-code {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--hs-blue-700);
    background: linear-gradient(120deg, var(--hs-blue-700), var(--hs-teal-600) 50%, var(--hs-coral-600));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Sora", sans-serif;
    font-size: clamp(5rem, 26vw, 10rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.08em;
}

.error-page h1 {
    font-size: clamp(1.8rem, 6vw, 3rem);
}

.error-page p {
    max-width: 620px;
    margin: 0.8rem auto 1.4rem;
}

.error-page .inline-actions,
.error-page .hero-cta {
    justify-content: center;
}

/* ========================================================================== 
   17. INTERNAL-PAGE CARD HOVER POLISH
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .info-card:hover,
    .trial-card:hover,
    .contact-card:hover,
    .sitemap-card:hover,
    .search-results .search-result:hover,
    .summary-box:hover,
    .support-contact-card:hover,
    .author-box:hover {
        transform: translateY(-4px);
        border-color: rgba(20, 127, 174, 0.24);
        box-shadow: var(--hs-shadow-md);
    }

    .trial-card:hover > i:first-child,
    .contact-card:hover > i:first-child,
    .info-card:hover > i:first-child {
        transform: translateY(-2px) scale(1.03);
    }
}

/* ========================================================================== 
   18. RESPONSIVE INTERNAL PAGES — 600PX+
   ========================================================================== */
@media (min-width: 600px) {
    .info-card-grid,
    .sitemap-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comparison-band {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid .btn,
    .form-grid .status-message,
    .form-field.full {
        grid-column: 1 / -1;
    }

    .search-box input[type="search"] {
        min-height: 64px;
        padding-left: 1.15rem;
        font-size: 1rem;
    }
}

/* ========================================================================== 
   19. RESPONSIVE INTERNAL PAGES — 800PX+
   ========================================================================== */
@media (min-width: 800px) {
    .page-hero {
        padding: 5.2rem 0 4.5rem;
    }

    .page-hero .container {
        width: min(100% - 48px, 1080px);
    }

    .info-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sitemap-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .faq-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 1.5rem;
    }

    .faq-category-nav {
        position: sticky;
        top: 92px;
        display: grid;
        gap: 0.38rem;
        overflow: visible;
    }

    .faq-category-nav a {
        width: 100%;
        white-space: normal;
    }

    .prose table {
        font-size: 0.92rem;
    }
}

/* ========================================================================== 
   20. RESPONSIVE INTERNAL PAGES — 1024PX+
   ========================================================================== */
@media (min-width: 1024px) {
    .seo-two-column {
        grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
        gap: 2rem;
    }

    .seo-two-column > aside,
    .seo-two-column > .summary-box,
    .seo-two-column > .support-contact-card {
        position: sticky;
        top: 102px;
    }

    .sitemap-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
    }

    .page-hero h1 {
        font-size: clamp(3rem, 5vw, 4.3rem);
    }

    .page-hero .container > p {
        font-size: 1.08rem;
    }

    .prose {
        font-size: 1rem;
    }
}

/* ========================================================================== 
   21. RESPONSIVE INTERNAL PAGES — 1320PX+
   ========================================================================== */
@media (min-width: 1320px) {
    .page-hero .container {
        width: min(100% - 64px, 1120px);
    }

    .sitemap-columns {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .info-card-grid {
        gap: 1.05rem;
    }
}

/* ========================================================================== 
   22. SMALL PHONE FIXES
   ========================================================================== */
@media (max-width: 420px) {
    .page-hero {
        padding-top: 3.1rem;
    }

    .page-hero h1 {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }

    .breadcrumbs {
        font-size: 0.72rem;
    }

    .breadcrumbs ol {
        gap: 0.28rem;
    }

    .summary-box,
    .support-contact-card,
    .toc,
    .author-box,
    .form-card,
    .contact-card,
    .info-card,
    .trial-card,
    .sitemap-card {
        border-radius: 15px;
    }

    .author-box {
        grid-template-columns: 1fr;
    }

    .pagination a,
    .pagination span {
        min-width: 38px;
        min-height: 38px;
        padding: 0.45rem 0.62rem;
    }

    .prose th,
    .prose td {
        padding: 0.62rem;
        font-size: 0.83rem;
    }
}

/* ========================================================================== 
   23. REDUCED MOTION / ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .info-card,
    .trial-card,
    .contact-card,
    .sitemap-card,
    .summary-box,
    .support-contact-card,
    .author-box,
    .sitemap-card a {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   HELLO SKY — PREMIUM TRIAL CHECKLIST + TRIAL PROCESS
   Add at the END of style.css
   Mobile First | Off-white + Light Blue + Light Red + Teal
   ========================================================================== */


/* ==========================================================================
   1. TRIAL CHECKLIST SECTION
   ========================================================================== */

section:has(> .container > .feature-grid > .trial-card) {
    position: relative;
    isolation: isolate;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(43, 154, 199, 0.10),
            transparent 24rem
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(236, 112, 107, 0.09),
            transparent 25rem
        ),
        radial-gradient(
            circle at 75% 15%,
            rgba(18, 169, 159, 0.055),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #f4fafd 48%,
            #fff6f3 100%
        );
}


/* decorative premium glow */
section:has(> .container > .feature-grid > .trial-card)::before,
section:has(> .container > .feature-grid > .trial-card)::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

section:has(> .container > .feature-grid > .trial-card)::before {
    width: 280px;
    height: 280px;
    top: -130px;
    left: -100px;

    border: 1px solid rgba(43, 154, 199, 0.13);

    box-shadow:
        inset 0 0 0 45px rgba(43, 154, 199, 0.025);
}

section:has(> .container > .feature-grid > .trial-card)::after {
    width: 330px;
    height: 330px;
    right: -150px;
    bottom: -150px;

    border: 1px solid rgba(236, 112, 107, 0.12);

    box-shadow:
        inset 0 0 0 55px rgba(236, 112, 107, 0.025);
}


/* ==========================================================================
   2. CHECKLIST HEADER
   ========================================================================== */

section:has(.trial-card) .section-header {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto clamp(2rem, 5vw, 3.4rem);
    text-align: center;
}


section:has(.trial-card) .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    margin-bottom: 1rem;
    padding: 0.55rem 0.95rem;

    border:
        1px solid rgba(20, 127, 174, 0.16);

    border-radius: 999px;

    color: #09668f;

    background:
        linear-gradient(
            135deg,
            rgba(228, 242, 249, 0.90),
            rgba(255, 243, 241, 0.86)
        );

    box-shadow:
        0 7px 20px rgba(25, 63, 82, 0.055),
        inset 0 1px 0 rgba(255,255,255,0.9);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.075em;
}


section:has(.trial-card) .section-tag i {
    display: inline-grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #12a99f
        );

    box-shadow:
        0 6px 14px rgba(20, 127, 174, 0.20);

    font-size: 0.7rem;
}


section:has(.trial-card) .section-title {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: 0.9rem;

    color: #13223f;

    font-size:
        clamp(
            2rem,
            7vw,
            3.6rem
        );

    line-height: 1.08;
    letter-spacing: -0.04em;
}


section:has(.trial-card) .section-description {
    max-width: 710px;
    margin: 0 auto;

    color: #526b7c;

    font-size:
        clamp(
            0.98rem,
            2vw,
            1.08rem
        );

    line-height: 1.75;
}


/* ==========================================================================
   3. TRIAL CHECKLIST GRID
   ========================================================================== */

section:has(.trial-card) .feature-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 1rem;

    width: 100%;
}


/* ==========================================================================
   4. PREMIUM TRIAL CARD
   ========================================================================== */

.trial-card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 220px;

    padding: 1.5rem;

    overflow: hidden;

    border:
        1px solid rgba(16, 89, 125, 0.11);

    border-radius:
        clamp(
            18px,
            3vw,
            24px
        );

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(248,252,253,0.90)
        );

    box-shadow:
        0 12px 32px rgba(25, 63, 82, 0.075),
        inset 0 1px 0 rgba(255,255,255,0.98);

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        box-shadow 260ms ease,
        border-color 260ms ease;
}


/* colored top accent */
.trial-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2b9ac7,
            #12a99f
        );
}


/* decorative blurred orb */
.trial-card::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 120px;
    height: 120px;

    right: -52px;
    bottom: -58px;

    border-radius: 50%;

    background:
        rgba(43, 154, 199, 0.07);

    filter: blur(2px);

    transition:
        transform 300ms ease,
        background 300ms ease;
}


.trial-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(20, 127, 174, 0.25);

    box-shadow:
        0 20px 48px rgba(25, 63, 82, 0.13),
        inset 0 1px 0 rgba(255,255,255,1);
}


.trial-card:hover::after {
    transform:
        scale(1.3);

    background:
        rgba(43, 154, 199, 0.11);
}


/* ==========================================================================
   5. CHECKLIST ICONS
   ========================================================================== */

.trial-card > i {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    margin-bottom: 1.15rem;

    border:
        1px solid rgba(20, 127, 174, 0.10);

    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #12a99f
        );

    box-shadow:
        0 10px 22px rgba(20, 127, 174, 0.18);

    font-size: 1.16rem;

    transition:
        transform 260ms ease,
        box-shadow 260ms ease;
}


.trial-card:hover > i {
    transform:
        translateY(-2px)
        rotate(-3deg)
        scale(1.05);

    box-shadow:
        0 14px 28px rgba(20, 127, 174, 0.24);
}


/* alternate card accents */

.trial-card:nth-child(2)::before,
.trial-card:nth-child(6)::before {
    background:
        linear-gradient(
            90deg,
            #ec706b,
            #f6aaa2
        );
}

.trial-card:nth-child(2) > i,
.trial-card:nth-child(6) > i {
    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95d5a
        );

    box-shadow:
        0 10px 22px rgba(236, 112, 107, 0.20);
}


.trial-card:nth-child(3)::before,
.trial-card:nth-child(7)::before {
    background:
        linear-gradient(
            90deg,
            #12a99f,
            #2b9ac7
        );
}

.trial-card:nth-child(3) > i,
.trial-card:nth-child(7) > i {
    background:
        linear-gradient(
            135deg,
            #12a99f,
            #087c73
        );

    box-shadow:
        0 10px 22px rgba(18, 169, 159, 0.20);
}


.trial-card:nth-child(4)::before,
.trial-card:nth-child(8)::before {
    background:
        linear-gradient(
            90deg,
            #e9a23b,
            #ec706b
        );
}

.trial-card:nth-child(4) > i,
.trial-card:nth-child(8) > i {
    background:
        linear-gradient(
            135deg,
            #e9a23b,
            #d58a21
        );

    box-shadow:
        0 10px 22px rgba(233, 162, 59, 0.19);
}


/* ==========================================================================
   6. CHECKLIST CARD TEXT
   ========================================================================== */

.trial-card h3 {
    margin:
        0
        0
        0.62rem;

    color: #13223f;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.02rem,
            2vw,
            1.17rem
        );

    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -0.02em;
}


.trial-card p {
    margin: 0;

    color: #536b7d;

    font-size: 0.91rem;
    line-height: 1.68;
}


/* subtle lower line */
.trial-card p::after {
    content: "";

    display: block;

    width: 32px;
    height: 2px;

    margin-top: 1rem;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(43,154,199,0.65),
            rgba(18,169,159,0.20)
        );

    transition:
        width 260ms ease;
}


.trial-card:hover p::after {
    width: 54px;
}


/* ==========================================================================
   7. TRIAL PROCESS SECTION
   ========================================================================== */

.premium-section:has(.steps) {
    position: relative;
    isolation: isolate;

    padding:
        clamp(
            4.5rem,
            8vw,
            7rem
        )
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(236, 112, 107, 0.07),
            transparent 22rem
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(43, 154, 199, 0.08),
            transparent 24rem
        ),
        linear-gradient(
            145deg,
            #fff8f5,
            #f6fbfd 48%,
            #f0f9f8
        );
}


.premium-section:has(.steps)::before {
    content: "";

    position: absolute;
    z-index: -1;

    width: 400px;
    height: 400px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(43,154,199,0.045),
            transparent 68%
        );

    pointer-events: none;
}


/* ==========================================================================
   8. PROCESS GRID
   ========================================================================== */

.steps {
    counter-reset: trial-step;

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 1rem;

    width: 100%;
    max-width: 1250px;

    margin-inline: auto;
}


/* connecting line - desktop applied later */
.steps::before {
    display: none;
}


/* ==========================================================================
   9. PROCESS STEP CARD
   ========================================================================== */

.steps .step-card {
    counter-increment: trial-step;

    position: relative;
    isolation: isolate;

    min-width: 0;

    padding:
        4.6rem
        1.35rem
        1.45rem;

    overflow: hidden;

    border:
        1px solid rgba(17, 70, 96, 0.11);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.97),
            rgba(247,251,252,0.92)
        );

    box-shadow:
        0 12px 32px rgba(25, 63, 82, 0.07),
        inset 0 1px 0 rgba(255,255,255,0.96);

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        box-shadow 260ms ease,
        border-color 260ms ease;
}


.steps .step-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(43, 154, 199, 0.24);

    box-shadow:
        0 20px 46px rgba(25, 63, 82, 0.12),
        inset 0 1px 0 #fff;
}


/* process number */
.steps .step-card::before {
    content:
        "0"
        counter(trial-step);

    position: absolute;

    top: 1.2rem;
    left: 1.3rem;

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #12a99f
        );

    box-shadow:
        0 9px 20px rgba(20,127,174,0.20);

    font-family:
        "Sora",
        sans-serif;

    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}


/* decorative corner */
.steps .step-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -45px;
    top: -45px;

    border-radius: 50%;

    background:
        rgba(43,154,199,0.055);

    transition:
        transform 300ms ease;
}


.steps .step-card:hover::after {
    transform:
        scale(1.35);
}


/* different colors for process cards */

.steps .step-card:nth-child(2)::before {
    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95d5a
        );
}

.steps .step-card:nth-child(2)::after {
    background:
        rgba(236,112,107,0.065);
}


.steps .step-card:nth-child(3)::before {
    background:
        linear-gradient(
            135deg,
            #12a99f,
            #087c73
        );
}

.steps .step-card:nth-child(3)::after {
    background:
        rgba(18,169,159,0.065);
}


.steps .step-card:nth-child(4)::before {
    background:
        linear-gradient(
            135deg,
            #e9a23b,
            #d58a21
        );
}

.steps .step-card:nth-child(4)::after {
    background:
        rgba(233,162,59,0.07);
}


/* ==========================================================================
   10. PROCESS TYPOGRAPHY
   ========================================================================== */

.steps .step-card h3 {
    margin:
        0
        0
        0.65rem;

    color: #13223f;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.22rem
        );

    font-weight: 750;
    line-height: 1.28;
}


.steps .step-card p {
    margin: 0;

    color: #536b7d;

    font-size: 0.91rem;
    line-height: 1.7;
}


/* ==========================================================================
   11. TABLET — 2 CARDS PER ROW
   ========================================================================== */

@media (min-width: 640px) {

    section:has(.trial-card) .feature-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 1.15rem;
    }


    .trial-card {
        min-height: 235px;
        padding: 1.55rem;
    }


    .steps {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 1.15rem;
    }
}


/* ==========================================================================
   12. DESKTOP — 4 PREMIUM CARDS PER ROW
   ========================================================================== */

@media (min-width: 1024px) {

    section:has(.trial-card) .feature-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: 1.25rem;
    }


    .trial-card {
        min-height: 255px;
        padding: 1.7rem;
    }


    .trial-card > i {
        width: 56px;
        height: 56px;

        font-size: 1.22rem;
    }


    .steps {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: 1.3rem;
    }


    /* horizontal route line */
    .steps::before {
        content: "";

        position: absolute;

        top: 3.6rem;
        left: 7%;
        right: 7%;

        z-index: 0;

        display: block;

        height: 2px;

        background:
            linear-gradient(
                90deg,
                rgba(43,154,199,0.12),
                rgba(43,154,199,0.42),
                rgba(18,169,159,0.35),
                rgba(236,112,107,0.22)
            );
    }


    .steps .step-card {
        z-index: 1;

        min-height: 230px;

        padding:
            4.8rem
            1.55rem
            1.6rem;
    }
}


/* ==========================================================================
   13. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1280px) {

    section:has(.trial-card) .feature-grid {
        gap: 1.45rem;
    }


    .trial-card {
        min-height: 265px;

        padding:
            1.85rem
            1.7rem;
    }


    .trial-card h3 {
        font-size: 1.16rem;
    }


    .trial-card p,
    .steps .step-card p {
        font-size: 0.94rem;
    }


    .steps .step-card {
        padding:
            4.9rem
            1.7rem
            1.75rem;
    }
}


/* ==========================================================================
   14. SMALL PHONE OPTIMIZATION
   ========================================================================== */

@media (max-width: 420px) {

    section:has(.trial-card) .section-title {
        font-size: 1.95rem;
    }


    .trial-card {
        min-height: auto;
        padding: 1.25rem;
    }


    .trial-card > i {
        width: 46px;
        height: 46px;

        margin-bottom: 0.9rem;

        border-radius: 13px;

        font-size: 1rem;
    }


    .trial-card h3 {
        font-size: 1rem;
    }


    .trial-card p {
        font-size: 0.87rem;
    }


    .steps .step-card {
        padding:
            4.25rem
            1.2rem
            1.3rem;
    }


    .steps .step-card::before {
        width: 41px;
        height: 41px;

        border-radius: 12px;

        font-size: 0.74rem;
    }
}


/* ==========================================================================
   15. ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .trial-card,
    .trial-card::after,
    .trial-card > i,
    .trial-card p::after,
    .steps .step-card,
    .steps .step-card::after {
        transition: none !important;
    }


    .trial-card:hover,
    .steps .step-card:hover {
        transform: none !important;
    }
}

/* =========================================================
   HELLO SKY — STICKY / FROZEN HEADER
   Mobile + Tablet + Desktop
   Add at END of style.css
   ========================================================= */

.sticky-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    z-index: 9999 !important;

    background: rgba(255, 254, 251, 0.96) !important;

    border-bottom: 1px solid rgba(17, 70, 96, 0.10) !important;

    box-shadow:
        0 7px 25px rgba(25, 63, 82, 0.08),
        0 1px 0 rgba(255,255,255,0.9) inset !important;

    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    will-change: transform;
}


/* Prevent page content from going behind fixed header */
body {
    padding-top: 72px !important;
}


/* Keep anchor scrolling below header */
html {
    scroll-padding-top: 90px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sticky-header {
        height: 68px !important;
        min-height: 68px !important;
    }

    .sticky-header .header-flex {
        min-height: 68px !important;
        height: 68px !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body {
        padding-top: 68px !important;
    }

    html {
        scroll-padding-top: 82px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .sticky-header {
        height: 74px !important;
        min-height: 74px !important;
    }

    .sticky-header .header-flex {
        min-height: 74px !important;
        height: 74px !important;
    }

    body {
        padding-top: 74px !important;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1024px) {

    .sticky-header {
        height: 82px !important;
        min-height: 82px !important;
    }

    .sticky-header .header-flex {
        min-height: 82px !important;
        height: 82px !important;
    }

    body {
        padding-top: 82px !important;
    }

    html {
        scroll-padding-top: 100px !important;
    }

}


/* =========================================================
   EXTRA LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .sticky-header {
        height: 86px !important;
        min-height: 86px !important;
    }

    .sticky-header .header-flex {
        min-height: 86px !important;
        height: 86px !important;
    }

    body {
        padding-top: 86px !important;
    }

}


/* =========================================================
   MOBILE NAV MUST STAY ABOVE HEADER
   ========================================================= */

.mobile-nav {
    z-index: 10050 !important;
}

.mobile-nav-close {
    position: relative;
    z-index: 10060 !important;
}


/* =========================================================
   STABLE IOS / MOBILE BROWSER FIX
   ========================================================= */

@supports (-webkit-touch-callout: none) {

    .sticky-header {
        position: fixed !important;
        top: env(safe-area-inset-top, 0px) !important;
    }

}


/* =========================================================
   PREVENT CONTENT FLASH / SHIFT
   ========================================================= */

main {
    position: relative;
    z-index: 1;
}

.sticky-header {
    isolation: isolate;
}

/* ==========================================================================
   HELLO SKY — PREMIUM RESELLER OVERVIEW
   Targets:
   .seo-two-column
   .summary-box
   .check-list
   Add at END of style.css
   ========================================================================== */


/* ==========================================================================
   1. RESELLER OVERVIEW SECTION
   ========================================================================== */

section:has(.seo-two-column) {
    position: relative;
    isolation: isolate;

    padding:
        clamp(4.5rem, 8vw, 7rem)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 7% 10%,
            rgba(43, 154, 199, 0.11),
            transparent 26rem
        ),
        radial-gradient(
            circle at 94% 88%,
            rgba(236, 112, 107, 0.09),
            transparent 25rem
        ),
        radial-gradient(
            circle at 72% 16%,
            rgba(18, 169, 159, 0.055),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            #fffdfa 0%,
            #f3fafd 48%,
            #fff5f2 100%
        );
}


/* decorative background rings */

section:has(.seo-two-column)::before,
section:has(.seo-two-column)::after {
    content: "";

    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}


section:has(.seo-two-column)::before {
    width: 300px;
    height: 300px;

    top: -145px;
    left: -115px;

    border:
        1px solid rgba(43, 154, 199, 0.12);

    box-shadow:
        inset 0 0 0 48px
        rgba(43, 154, 199, 0.025);
}


section:has(.seo-two-column)::after {
    width: 340px;
    height: 340px;

    right: -155px;
    bottom: -165px;

    border:
        1px solid rgba(236, 112, 107, 0.12);

    box-shadow:
        inset 0 0 0 55px
        rgba(236, 112, 107, 0.025);
}


/* ==========================================================================
   2. MAIN TWO-COLUMN LAYOUT
   ========================================================================== */

.seo-two-column {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    align-items: stretch;

    gap: 1.25rem;
}


/* ==========================================================================
   3. LEFT CONTENT PANEL
   ========================================================================== */

.seo-two-column > div:first-child {
    position: relative;
    isolation: isolate;

    min-width: 0;

    padding:
        clamp(1.5rem, 4vw, 2.8rem);

    overflow: hidden;

    border:
        1px solid rgba(17, 70, 96, 0.11);

    border-radius:
        clamp(22px, 3vw, 32px);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(43, 154, 199, 0.075),
            transparent 32%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(236, 112, 107, 0.055),
            transparent 32%
        ),
        rgba(255,255,255,0.90);

    box-shadow:
        0 20px 55px rgba(25, 63, 82, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.98);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* top premium accent */

.seo-two-column > div:first-child::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2b9ac7 0%,
            #12a99f 48%,
            #ec706b 100%
        );
}


/* decorative orb */

.seo-two-column > div:first-child::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -90px;

    border-radius: 50%;

    background:
        rgba(43,154,199,0.055);
}


/* ==========================================================================
   4. RESELLER OVERVIEW TAG
   ========================================================================== */

.seo-two-column .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    margin-bottom: 1.2rem;

    padding:
        0.55rem
        0.95rem;

    border:
        1px solid rgba(20, 127, 174, 0.16);

    border-radius: 999px;

    color: #09668f;

    background:
        linear-gradient(
            135deg,
            rgba(228,242,249,0.95),
            rgba(255,243,241,0.90)
        );

    box-shadow:
        0 7px 18px rgba(25, 63, 82, 0.055),
        inset 0 1px 0 rgba(255,255,255,0.95);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.075em;
}


/* tag icon */

.seo-two-column .section-tag i {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #12a99f
        );

    box-shadow:
        0 6px 14px rgba(20, 127, 174, 0.20);

    font-size: 0.7rem;
}


/* ==========================================================================
   5. MAIN TITLE
   ========================================================================== */

.seo-two-column > div:first-child > h2 {
    max-width: 760px;

    margin:
        0
        0
        1.2rem;

    color: #13223f;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.9rem,
            6vw,
            3.15rem
        );

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


/* small accent under title */

.seo-two-column > div:first-child > h2::after {
    content: "";

    display: block;

    width: 62px;
    height: 4px;

    margin-top: 1rem;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2b9ac7,
            #12a99f,
            #ec706b
        );
}


/* ==========================================================================
   6. BODY COPY
   ========================================================================== */

.seo-two-column > div:first-child > p {
    max-width: 820px;

    margin:
        0
        0
        1.05rem;

    color: #526b7c;

    font-size:
        clamp(
            0.96rem,
            1.7vw,
            1.04rem
        );

    line-height: 1.78;
}


.seo-two-column > div:first-child > p:last-child {
    margin-bottom: 0;
}


/* first paragraph slightly stronger */

.seo-two-column > div:first-child > p:first-of-type {
    color: #405d71;

    font-weight: 520;
}


/* ==========================================================================
   7. PREMIUM SUMMARY BOX
   ========================================================================== */

.summary-box {
    position: relative;
    isolation: isolate;

    min-width: 0;

    padding:
        clamp(1.4rem, 4vw, 2rem);

    overflow: hidden;

    border:
        1px solid rgba(236, 112, 107, 0.16);

    border-radius:
        clamp(20px, 3vw, 28px);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(236, 112, 107, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(43,154,199,0.06),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(255,247,244,0.93)
        );

    box-shadow:
        0 18px 46px rgba(25,63,82,0.09),
        inset 0 1px 0 rgba(255,255,255,1);

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        box-shadow 260ms ease,
        border-color 260ms ease;
}


.summary-box:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(236,112,107,0.28);

    box-shadow:
        0 24px 55px rgba(25,63,82,0.13),
        inset 0 1px 0 #fff;
}


/* premium colored bar */

.summary-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #ec706b,
            #f6aaa2,
            #e9a23b
        );
}


/* decorative background circle */

.summary-box::after {
    content: "\f058";

    position: absolute;
    z-index: -1;

    right: -12px;
    bottom: -30px;

    color:
        rgba(236,112,107,0.055);

    font-family:
        "Font Awesome 6 Free";

    font-size: 9rem;
    font-weight: 900;

    transform:
        rotate(-12deg);

    pointer-events: none;
}


/* ==========================================================================
   8. SUMMARY TITLE
   ========================================================================== */

.summary-box h3 {
    position: relative;

    display: flex;
    align-items: center;

    gap: 0.75rem;

    margin:
        0
        0
        1.3rem;

    padding-bottom: 1rem;

    border-bottom:
        1px solid rgba(17,70,96,0.09);

    color: #13223f;

    font-size:
        clamp(
            1.18rem,
            3vw,
            1.45rem
        );

    font-weight: 800;
}


/* checklist title icon */

.summary-box h3::before {
    content: "\f46c";

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95d5a
        );

    box-shadow:
        0 9px 20px rgba(236,112,107,0.21);

    font-family:
        "Font Awesome 6 Free";

    font-size: 0.95rem;
    font-weight: 900;
}


/* ==========================================================================
   9. SIX-ITEM CHECKLIST
   ========================================================================== */

.check-list {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 0.7rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* checklist item */

.check-list li {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 52px;

    gap: 0.75rem;

    padding:
        0.72rem
        0.8rem;

    border:
        1px solid rgba(17, 70, 96, 0.085);

    border-radius: 13px;

    color: #405d71;

    background:
        rgba(255,255,255,0.77);

    box-shadow:
        0 5px 15px rgba(25,63,82,0.035);

    font-size: 0.9rem;
    font-weight: 700;

    line-height: 1.4;

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}


/* check icon */

.check-list li::before {
    content: "\f00c";

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #12a99f,
            #087c73
        );

    box-shadow:
        0 6px 13px rgba(18,169,159,0.18);

    font-family:
        "Font Awesome 6 Free";

    font-size: 0.62rem;
    font-weight: 900;
}


.check-list li:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(20,127,174,0.20);

    background: #fff;

    box-shadow:
        0 9px 20px rgba(25,63,82,0.065);
}


/* alternate checklist accent colors */

.check-list li:nth-child(2)::before,
.check-list li:nth-child(5)::before {
    background:
        linear-gradient(
            135deg,
            #147fae,
            #2b9ac7
        );
}


.check-list li:nth-child(3)::before,
.check-list li:nth-child(6)::before {
    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95d5a
        );
}


.check-list li:nth-child(4)::before {
    background:
        linear-gradient(
            135deg,
            #e9a23b,
            #d58a21
        );
}


/* ==========================================================================
   10. TABLET
   ========================================================================== */

@media (min-width: 640px) {

    .check-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================================
   11. DESKTOP
   ========================================================================== */

@media (min-width: 900px) {

    .seo-two-column {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(320px, 0.75fr);

        gap:
            clamp(
                1.5rem,
                3vw,
                2.4rem
            );
    }


    .seo-two-column > div:first-child {
        padding:
            clamp(
                2.3rem,
                4vw,
                3.2rem
            );
    }


    .summary-box {
        align-self: stretch;

        padding:
            2rem;
    }


    /* Keep checklist single column in desktop sidebar */
    .summary-box .check-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

}


/* ==========================================================================
   12. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

    .seo-two-column {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(360px, 0.72fr);

        gap: 2.5rem;
    }


    .seo-two-column > div:first-child {
        padding:
            3rem
            3.2rem;
    }


    .summary-box {
        padding:
            2.2rem;
    }


    .check-list li {
        min-height: 56px;

        padding:
            0.78rem
            0.9rem;

        font-size: 0.92rem;
    }

}


/* ==========================================================================
   13. MOBILE OPTIMIZATION
   ========================================================================== */

@media (max-width: 639px) {

    .seo-two-column {
        gap: 1rem;
    }


    .seo-two-column > div:first-child {
        padding:
            1.35rem;

        border-radius:
            20px;
    }


    .seo-two-column > div:first-child > h2 {
        font-size:
            clamp(
                1.75rem,
                8vw,
                2.25rem
            );

        line-height: 1.12;
    }


    .seo-two-column > div:first-child > p {
        font-size: 0.91rem;

        line-height: 1.7;
    }


    .summary-box {
        padding:
            1.25rem;

        border-radius:
            19px;
    }


    .summary-box h3 {
        font-size: 1.12rem;
    }


    .summary-box h3::before {
        width: 39px;
        height: 39px;

        border-radius: 11px;

        font-size: 0.82rem;
    }


    .check-list li {
        min-height: 49px;

        padding:
            0.65rem
            0.7rem;

        font-size: 0.86rem;
    }


    .check-list li::before {
        width: 26px;
        height: 26px;

        border-radius: 8px;
    }

}


/* ==========================================================================
   14. VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 360px) {

    .seo-two-column > div:first-child,
    .summary-box {
        padding: 1rem;
    }


    .seo-two-column > div:first-child > h2 {
        font-size: 1.65rem;
    }


    .check-list li {
        gap: 0.55rem;

        padding:
            0.58rem
            0.62rem;

        font-size: 0.82rem;
    }

}


/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .summary-box,
    .check-list li {
        transition: none !important;
    }


    .summary-box:hover,
    .check-list li:hover {
        transform: none !important;
    }

}

/* =========================================================
   FIX — CHECKLIST ICON / TEXT OVERLAP
   Desktop + Tablet + Mobile
   ========================================================= */

.summary-box .check-list li {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;

    column-gap: 14px !important;
    row-gap: 0 !important;

    min-height: 56px !important;

    padding:
        0.75rem
        1rem !important;

    text-indent: 0 !important;
}


/* Check icon gets its own fixed column */

.summary-box .check-list li::before {
    position: static !important;

    display: grid !important;
    place-items: center !important;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    inset: auto !important;

    transform: none !important;

    justify-self: start !important;
    align-self: center !important;

    line-height: 1 !important;
}


/* Make sure text never enters icon area */

.summary-box .check-list li {
    overflow: visible !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    color: #405d71 !important;

    line-height: 1.45 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 640px) {

    .summary-box .check-list li {
        grid-template-columns:
            32px
            minmax(0, 1fr) !important;

        column-gap: 15px !important;

        padding:
            0.8rem
            1rem !important;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    .summary-box .check-list li {
        grid-template-columns:
            34px
            minmax(0, 1fr) !important;

        column-gap: 16px !important;

        min-height: 58px !important;

        padding:
            0.8rem
            1.05rem !important;
    }


    .summary-box .check-list li::before {
        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 639px) {

    .summary-box .check-list li {
        grid-template-columns:
            28px
            minmax(0, 1fr) !important;

        column-gap: 12px !important;

        min-height: 52px !important;

        padding:
            0.68rem
            0.8rem !important;

        font-size: 0.86rem !important;
    }


    .summary-box .check-list li::before {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;
    }

}


/* Very small phones */

@media (max-width: 360px) {

    .summary-box .check-list li {
        grid-template-columns:
            26px
            minmax(0, 1fr) !important;

        column-gap: 11px !important;

        padding:
            0.62rem
            0.72rem !important;

        font-size: 0.82rem !important;
    }


    .summary-box .check-list li::before {
        width: 25px !important;
        height: 25px !important;

        min-width: 25px !important;
    }

}

/* ==========================================================================
   HELLO SKY — PREMIUM VIEWING TOOLS / FEATURE CARDS
   EPG • Catch-Up • Search • Favorites • Categories • Refresh
   Mobile First | Premium Light Theme
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION WRAPPER
   -------------------------------------------------------------------------- */

#viewing-tools {
    position: relative;
    isolation: isolate;

    padding:
        clamp(4.5rem, 8vw, 7rem)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(43, 154, 199, 0.12),
            transparent 25rem
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(236, 112, 107, 0.095),
            transparent 24rem
        ),
        radial-gradient(
            circle at 78% 14%,
            rgba(18, 169, 159, 0.06),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            #fffdfa 0%,
            #f3fafd 48%,
            #fff5f2 100%
        );
}


/* decorative background shapes */

#viewing-tools::before,
#viewing-tools::after {
    content: "";

    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}


#viewing-tools::before {
    width: 320px;
    height: 320px;

    top: -155px;
    left: -120px;

    border:
        1px solid rgba(43, 154, 199, 0.12);

    box-shadow:
        inset 0 0 0 52px
        rgba(43,154,199,0.023);
}


#viewing-tools::after {
    width: 360px;
    height: 360px;

    right: -170px;
    bottom: -170px;

    border:
        1px solid rgba(236,112,107,0.12);

    box-shadow:
        inset 0 0 0 58px
        rgba(236,112,107,0.025);
}


/* --------------------------------------------------------------------------
   SECTION HEADER
   -------------------------------------------------------------------------- */

#viewing-tools .section-header {
    position: relative;
    z-index: 2;

    max-width: 850px;

    margin:
        0
        auto
        clamp(2rem, 5vw, 3.4rem);

    text-align: center;
}


#viewing-tools .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    margin-bottom: 1rem;

    padding:
        0.55rem
        0.95rem;

    border:
        1px solid rgba(20,127,174,0.16);

    border-radius: 999px;

    color: #09668f;

    background:
        linear-gradient(
            135deg,
            rgba(228,242,249,0.96),
            rgba(255,243,241,0.92)
        );

    box-shadow:
        0 7px 20px rgba(25,63,82,0.055),
        inset 0 1px 0 rgba(255,255,255,0.98);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.075em;
}


#viewing-tools .section-tag i {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #12a99f
        );

    box-shadow:
        0 6px 14px rgba(20,127,174,0.20);

    font-size: 0.72rem;
}


#viewing-tools .section-title {
    max-width: 800px;

    margin:
        0
        auto
        0.9rem;

    color: #13223f;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            2rem,
            6vw,
            3.55rem
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.04em;
}


#viewing-tools .section-description {
    max-width: 720px;

    margin: 0 auto;

    color: #526b7c;

    font-size:
        clamp(
            0.96rem,
            1.8vw,
            1.06rem
        );

    line-height: 1.75;
}


/* --------------------------------------------------------------------------
   FEATURE GRID
   -------------------------------------------------------------------------- */

#viewing-tools .info-card-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 1rem;

    width: 100%;
}


/* --------------------------------------------------------------------------
   FEATURE CARD
   -------------------------------------------------------------------------- */

#viewing-tools .info-card {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    min-height: 220px;

    padding:
        1.5rem;

    overflow: hidden;

    border:
        1px solid rgba(17,70,96,0.11);

    border-radius:
        clamp(
            19px,
            3vw,
            25px
        );

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(43,154,199,0.055),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.97),
            rgba(248,252,253,0.92)
        );

    box-shadow:
        0 12px 32px rgba(25,63,82,0.075),
        inset 0 1px 0 rgba(255,255,255,0.98);

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        box-shadow 260ms ease,
        border-color 260ms ease;
}


/* premium colored top line */

#viewing-tools .info-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2b9ac7,
            #12a99f
        );
}


/* decorative card glow */

#viewing-tools .info-card::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 130px;
    height: 130px;

    right: -62px;
    bottom: -65px;

    border-radius: 50%;

    background:
        rgba(43,154,199,0.065);

    transition:
        transform 300ms ease,
        background 300ms ease;
}


#viewing-tools .info-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(20,127,174,0.24);

    box-shadow:
        0 21px 50px rgba(25,63,82,0.13),
        inset 0 1px 0 #fff;
}


#viewing-tools .info-card:hover::after {
    transform:
        scale(1.35);

    background:
        rgba(43,154,199,0.10);
}


/* --------------------------------------------------------------------------
   ICON
   -------------------------------------------------------------------------- */

#viewing-tools .info-card > i {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    margin-bottom: 1.15rem;

    border:
        1px solid rgba(20,127,174,0.10);

    border-radius: 15px;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #2b9ac7
        );

    box-shadow:
        0 10px 22px rgba(20,127,174,0.20);

    font-size: 1.14rem;

    transition:
        transform 260ms ease,
        box-shadow 260ms ease;
}


#viewing-tools .info-card:hover > i {
    transform:
        translateY(-3px)
        rotate(-4deg)
        scale(1.05);
}


/* --------------------------------------------------------------------------
   ALTERNATE CARD COLORS
   -------------------------------------------------------------------------- */

/* EPG */
#viewing-tools .info-card:nth-child(1)::before {
    background:
        linear-gradient(
            90deg,
            #2b9ac7,
            #147fae
        );
}

#viewing-tools .info-card:nth-child(1) > i {
    background:
        linear-gradient(
            135deg,
            #147fae,
            #2b9ac7
        );
}


/* Catch-Up */
#viewing-tools .info-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #ec706b,
            #f6aaa2
        );
}

#viewing-tools .info-card:nth-child(2) > i {
    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95c58
        );

    box-shadow:
        0 10px 22px rgba(236,112,107,0.21);
}

#viewing-tools .info-card:nth-child(2)::after {
    background:
        rgba(236,112,107,0.07);
}


/* Search */
#viewing-tools .info-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #12a99f,
            #2b9ac7
        );
}

#viewing-tools .info-card:nth-child(3) > i {
    background:
        linear-gradient(
            135deg,
            #12a99f,
            #087c73
        );

    box-shadow:
        0 10px 22px rgba(18,169,159,0.20);
}

#viewing-tools .info-card:nth-child(3)::after {
    background:
        rgba(18,169,159,0.07);
}


/* Favorites */
#viewing-tools .info-card:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            #e9a23b,
            #f3c76e
        );
}

#viewing-tools .info-card:nth-child(4) > i {
    background:
        linear-gradient(
            135deg,
            #e9a23b,
            #d68b20
        );

    box-shadow:
        0 10px 22px rgba(233,162,59,0.20);
}

#viewing-tools .info-card:nth-child(4)::after {
    background:
        rgba(233,162,59,0.07);
}


/* Category Browsing */
#viewing-tools .info-card:nth-child(5)::before {
    background:
        linear-gradient(
            90deg,
            #8777db,
            #b5a8ee
        );
}

#viewing-tools .info-card:nth-child(5) > i {
    background:
        linear-gradient(
            135deg,
            #8777db,
            #6656bd
        );

    box-shadow:
        0 10px 22px rgba(119,101,206,0.20);
}

#viewing-tools .info-card:nth-child(5)::after {
    background:
        rgba(119,101,206,0.07);
}


/* Refresh */
#viewing-tools .info-card:nth-child(6)::before {
    background:
        linear-gradient(
            90deg,
            #34a46f,
            #12a99f
        );
}

#viewing-tools .info-card:nth-child(6) > i {
    background:
        linear-gradient(
            135deg,
            #34a46f,
            #16865c
        );

    box-shadow:
        0 10px 22px rgba(22,134,92,0.20);
}

#viewing-tools .info-card:nth-child(6)::after {
    background:
        rgba(22,134,92,0.07);
}


/* --------------------------------------------------------------------------
   CARD TITLE
   -------------------------------------------------------------------------- */

#viewing-tools .info-card h3 {
    margin:
        0
        0
        0.65rem;

    color: #13223f !important;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.04rem,
            2vw,
            1.2rem
        );

    font-weight: 780;

    line-height: 1.3;

    letter-spacing: -0.02em;
}


/* --------------------------------------------------------------------------
   CARD DESCRIPTION
   -------------------------------------------------------------------------- */

#viewing-tools .info-card p {
    margin: 0;

    color: #536b7d !important;

    font-size: 0.91rem;

    line-height: 1.7;
}


/* tiny premium accent at bottom */

#viewing-tools .info-card p::after {
    content: "";

    display: block;

    width: 34px;
    height: 2px;

    margin-top: 1rem;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(43,154,199,0.7),
            rgba(18,169,159,0.18)
        );

    transition:
        width 250ms ease;
}


#viewing-tools .info-card:hover p::after {
    width: 58px;
}


/* --------------------------------------------------------------------------
   TABLET — 2 COLUMNS
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {

    #viewing-tools .info-card-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 1.15rem;
    }


    #viewing-tools .info-card {
        min-height: 235px;
    }

}


/* --------------------------------------------------------------------------
   DESKTOP — 3 COLUMNS × 2 ROWS
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

    #viewing-tools .info-card-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            clamp(
                1.15rem,
                2vw,
                1.45rem
            );
    }


    #viewing-tools .info-card {
        min-height: 255px;

        padding:
            1.7rem;
    }


    #viewing-tools .info-card > i {
        width: 58px;
        height: 58px;

        font-size: 1.22rem;
    }

}


/* --------------------------------------------------------------------------
   LARGE DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {

    #viewing-tools .info-card-grid {
        gap: 1.55rem;
    }


    #viewing-tools .info-card {
        min-height: 265px;

        padding:
            1.9rem;
    }


    #viewing-tools .info-card h3 {
        font-size: 1.18rem;
    }


    #viewing-tools .info-card p {
        font-size: 0.94rem;
    }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 599px) {

    #viewing-tools {
        padding:
            4rem
            0;
    }


    #viewing-tools .section-header {
        margin-bottom: 1.8rem;
    }


    #viewing-tools .section-title {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.35rem
            );
    }


    #viewing-tools .info-card {
        min-height: auto;

        padding:
            1.3rem;

        border-radius: 19px;
    }


    #viewing-tools .info-card > i {
        width: 48px;
        height: 48px;

        margin-bottom: 0.95rem;

        border-radius: 13px;

        font-size: 1rem;
    }


    #viewing-tools .info-card h3 {
        font-size: 1.02rem;
    }


    #viewing-tools .info-card p {
        font-size: 0.87rem;
    }

}


/* --------------------------------------------------------------------------
   VERY SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {

    #viewing-tools .info-card {
        padding: 1.1rem;
    }


    #viewing-tools .info-card > i {
        width: 44px;
        height: 44px;
    }


    #viewing-tools .info-card h3 {
        font-size: 0.98rem;
    }


    #viewing-tools .info-card p {
        font-size: 0.84rem;
    }

}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #viewing-tools .info-card,
    #viewing-tools .info-card::after,
    #viewing-tools .info-card > i,
    #viewing-tools .info-card p::after {
        transition: none !important;
    }


    #viewing-tools .info-card:hover,
    #viewing-tools .info-card:hover > i {
        transform: none !important;
    }

}

/* =========================================================
   CHANNEL PAGE — FIX CHECKMARK / TEXT OVERLAP
   8,000 Series and Shows panel
   Mobile + Tablet + Desktop
   ========================================================= */

#series .check-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: 12px !important;

    margin: 1.25rem 0 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


/* Each checklist card */
#series .check-list li {
    position: relative !important;

    display: grid !important;

    /* dedicated icon column + text column */
    grid-template-columns:
        30px
        minmax(0, 1fr) !important;

    align-items: center !important;

    column-gap: 13px !important;
    row-gap: 0 !important;

    min-width: 0 !important;
    min-height: 68px !important;

    margin: 0 !important;

    padding:
        0.75rem
        0.85rem !important;

    text-indent: 0 !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;

    color: #3f6179 !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.96),
            rgba(249,252,253,0.92)
        ) !important;

    border:
        1px solid rgba(17,70,96,0.11) !important;

    border-radius: 14px !important;

    box-shadow:
        0 7px 20px rgba(25,63,82,0.055) !important;

    font-size: 0.89rem !important;
    font-weight: 700 !important;

    line-height: 1.45 !important;

    overflow: visible !important;
}


/* ---------------------------------------------------------
   CHECKMARK — OWN COLUMN
   --------------------------------------------------------- */

#series .check-list li::before {
    content: "\f00c" !important;

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    display: grid !important;
    place-items: center !important;

    width: 29px !important;
    height: 29px !important;

    min-width: 29px !important;
    max-width: 29px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    align-self: center !important;

    border-radius: 9px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #12a99f,
            #087c73
        ) !important;

    box-shadow:
        0 6px 14px rgba(18,169,159,0.20) !important;

    font-family: "Font Awesome 6 Free" !important;
    font-size: 0.62rem !important;
    font-weight: 900 !important;

    line-height: 1 !important;

    transform: none !important;
}


/* ---------------------------------------------------------
   ALTERNATING PREMIUM CHECK COLORS
   --------------------------------------------------------- */

#series .check-list li:nth-child(2)::before,
#series .check-list li:nth-child(5)::before {
    background:
        linear-gradient(
            135deg,
            #249bc5,
            #147fae
        ) !important;

    box-shadow:
        0 6px 14px rgba(36,155,197,0.20) !important;
}


#series .check-list li:nth-child(3)::before {
    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95d5a
        ) !important;

    box-shadow:
        0 6px 14px rgba(236,112,107,0.20) !important;
}


#series .check-list li:nth-child(4)::before {
    background:
        linear-gradient(
            135deg,
            #e9a23b,
            #d7891c
        ) !important;

    box-shadow:
        0 6px 14px rgba(233,162,59,0.20) !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#series .check-list li {
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease !important;
}


#series .check-list li:hover {
    transform: translateY(-3px) !important;

    border-color:
        rgba(43,154,199,0.22) !important;

    box-shadow:
        0 12px 27px rgba(25,63,82,0.09) !important;
}


/* =========================================================
   MOBILE
   Keep 2 columns but give icon/text proper separation
   ========================================================= */

@media (max-width: 639px) {

    #series .check-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 10px !important;
    }


    #series .check-list li {
        grid-template-columns:
            27px
            minmax(0, 1fr) !important;

        column-gap: 11px !important;

        min-height: 72px !important;

        padding:
            0.68rem
            0.7rem !important;

        font-size: 0.82rem !important;
        line-height: 1.42 !important;
    }


    #series .check-list li::before {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;

        font-size: 0.58rem !important;
    }

}


/* =========================================================
   VERY SMALL PHONE
   Switch to one column for proper readability
   ========================================================= */

@media (max-width: 390px) {

    #series .check-list {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    #series .check-list li {
        grid-template-columns:
            27px
            minmax(0, 1fr) !important;

        column-gap: 12px !important;

        min-height: 54px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 640px) and (max-width: 899px) {

    #series .check-list li {
        grid-template-columns:
            30px
            minmax(0, 1fr) !important;

        column-gap: 13px !important;

        min-height: 64px !important;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    #series .check-list {
        gap: 12px !important;
    }


    #series .check-list li {
        grid-template-columns:
            31px
            minmax(0, 1fr) !important;

        column-gap: 14px !important;

        min-height: 62px !important;

        padding:
            0.75rem
            0.85rem !important;

        font-size: 0.88rem !important;
    }


    #series .check-list li::before {
        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
    }

}

/* ==========================================================================
   HELLO SKY — COMPLETE PREMIUM FAQ PAGE FIX
   Fixes:
   - answers visible while closed
   - proper accordion states
   - premium FAQ cards
   - premium category sidebar
   - mobile + desktop
   ========================================================================== */


/* =========================================================
   FAQ PAGE BACKGROUND
   ========================================================= */

.faq-layout {
    position: relative;
    z-index: 1;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    align-items: start !important;

    gap: 1.25rem !important;

    width: 100% !important;

    padding-top: 1rem;
    padding-bottom: clamp(4rem, 7vw, 6rem);
}


/* =========================================================
   CATEGORY NAVIGATION
   ========================================================= */

.faq-category-nav {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;

    gap: 0.55rem !important;

    width: 100% !important;

    padding: 0.75rem !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    border:
        1px solid rgba(23, 75, 105, 0.10) !important;

    border-radius: 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.97),
            rgba(246,251,253,0.94)
        ) !important;

    box-shadow:
        0 10px 30px rgba(30, 65, 90, 0.07) !important;

    scrollbar-width: thin;
}


/* category button */

.faq-category-nav a {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    min-height: 45px !important;

    padding:
        0.7rem
        0.9rem !important;

    border:
        1px solid rgba(20,127,174,0.08) !important;

    border-radius: 12px !important;

    color: #263d55 !important;

    background:
        rgba(248,252,253,0.94) !important;

    font-size: 0.82rem !important;
    font-weight: 750 !important;

    line-height: 1.35 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    transition:
        transform 200ms ease,
        background 200ms ease,
        border-color 200ms ease,
        color 200ms ease !important;
}


.faq-category-nav a:hover {
    transform: translateY(-2px);

    color: #116f9c !important;

    border-color:
        rgba(43,154,199,0.22) !important;

    background:
        linear-gradient(
            135deg,
            #edf9fe,
            #fff7f5
        ) !important;
}


/* =========================================================
   FAQ CONTENT COLUMN
   ========================================================= */

.faq-layout > div {
    min-width: 0 !important;
}


/* =========================================================
   FAQ CATEGORY GROUP
   ========================================================= */

.faq-group {
    position: relative;

    scroll-margin-top: 110px;

    padding:
        clamp(1.15rem, 3vw, 1.6rem);

    border:
        1px solid rgba(23,75,105,0.075);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(43,154,199,0.045),
            transparent 22rem
        ),
        rgba(255,255,255,0.48);
}


.faq-group + .faq-group {
    margin-top: 1.5rem !important;
}


/* category title */

.faq-group > h2 {
    position: relative;

    margin:
        0
        0
        1.1rem !important;

    padding:
        0
        0
        0.8rem
        0 !important;

    border-bottom:
        1px solid rgba(23,75,105,0.09);

    color: #142941 !important;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        ) !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    letter-spacing: -0.025em;
}


/* remove older left bar if present */

.faq-group > h2::before {
    display: none !important;
}


/* colored underline */

.faq-group > h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 70px;
    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #2b9ac7,
            #12a99f,
            #ec706b
        );
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.faq-layout .faq-item {
    position: relative;

    margin:
        0
        0
        0.75rem !important;

    overflow: hidden !important;

    border:
        1px solid rgba(23,75,105,0.10) !important;

    border-radius: 16px !important;

    background:
        rgba(255,255,255,0.96) !important;

    box-shadow:
        0 7px 22px rgba(30,65,90,0.045) !important;

    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease !important;
}


.faq-layout .faq-item:last-child {
    margin-bottom: 0 !important;
}


.faq-layout .faq-item:hover {
    border-color:
        rgba(43,154,199,0.21) !important;

    box-shadow:
        0 11px 28px rgba(30,65,90,0.075) !important;
}


/* Open card */

.faq-layout .faq-item.open {
    border-color:
        rgba(43,154,199,0.26) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,1),
            rgba(244,250,253,0.96)
        ) !important;

    box-shadow:
        0 13px 34px rgba(30,65,90,0.09) !important;
}


/* =========================================================
   REMOVE DEFAULT H3 SPACING
   ========================================================= */

.faq-layout .faq-item h3 {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   FAQ QUESTION BUTTON
   ========================================================= */

.faq-layout .faq-question {
    position: relative;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        38px !important;

    align-items: center !important;

    gap: 1rem !important;

    width: 100% !important;
    min-height: 66px !important;

    margin: 0 !important;

    padding:
        0.95rem
        1rem
        0.95rem
        1.1rem !important;

    border: 0 !important;
    outline: 0;

    color: #142941 !important;

    background:
        transparent !important;

    text-align: left !important;

    font-family:
        "Sora",
        "Manrope",
        sans-serif !important;

    font-size:
        0.91rem !important;

    font-weight: 750 !important;

    line-height: 1.45 !important;

    cursor: pointer !important;

    transition:
        color 200ms ease,
        background 200ms ease !important;
}


.faq-layout .faq-question span {
    display: block;

    min-width: 0;

    padding: 0 !important;

    color: inherit !important;
}


/* =========================================================
   PLUS ICON
   ========================================================= */

.faq-layout .faq-question > i {
    display: grid !important;
    place-items: center !important;

    flex: none !important;

    width: 36px !important;
    height: 36px !important;

    margin: 0 !important;

    border-radius: 11px !important;

    color: #147fae !important;

    background:
        #edf8fd !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(43,154,199,0.05) !important;

    font-size: 0.82rem !important;

    transition:
        transform 280ms ease,
        background 220ms ease,
        color 220ms ease,
        box-shadow 220ms ease !important;
}


/* OPEN QUESTION */

.faq-layout
.faq-question[aria-expanded="true"] {
    color: #116f9c !important;

    background:
        linear-gradient(
            135deg,
            rgba(237,249,254,0.92),
            rgba(255,247,245,0.68)
        ) !important;
}


.faq-layout
.faq-question[aria-expanded="true"] > i {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #ec706b,
            #d95c58
        ) !important;

    box-shadow:
        0 7px 16px
        rgba(236,112,107,0.22) !important;

    transform: rotate(45deg) !important;
}


/* keyboard focus */

.faq-layout .faq-question:focus-visible {
    outline:
        3px solid rgba(43,154,199,0.18) !important;

    outline-offset: -3px !important;
}


/* =========================================================
   CRITICAL FIX:
   CLOSED ANSWERS MUST HAVE ZERO HEIGHT
   ========================================================= */

.faq-layout .faq-answer {
    display: grid !important;

    grid-template-rows: 0fr !important;

    min-height: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transition:
        grid-template-rows 320ms cubic-bezier(.22,1,.36,1),
        max-height 320ms cubic-bezier(.22,1,.36,1),
        opacity 180ms ease,
        visibility 0s linear 320ms !important;
}


/* VERY IMPORTANT:
   Previous CSS had padding here.
   That padding is what made closed answers visible.
*/

.faq-layout .faq-answer > div {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* CLOSED STATE */

.faq-layout
.faq-answer[aria-hidden="true"] {
    grid-template-rows: 0fr !important;

    max-height: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   OPEN ANSWER
   ========================================================= */

.faq-layout
.faq-answer[aria-hidden="false"],

.faq-layout
.faq-item.open
.faq-answer {
    grid-template-rows: 1fr !important;

    max-height: 500px !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transition:
        grid-template-rows 320ms cubic-bezier(.22,1,.36,1),
        max-height 320ms cubic-bezier(.22,1,.36,1),
        opacity 220ms ease,
        visibility 0s linear 0s !important;
}


/* =========================================================
   ANSWER TEXT
   Put spacing on P instead of .faq-answer > div
   This prevents closed-answer leakage
   ========================================================= */

.faq-layout .faq-answer p {
    margin: 0 !important;

    padding:
        0
        1.1rem
        1.15rem !important;

    color: #587083 !important;

    font-size: 0.87rem !important;

    font-weight: 450 !important;

    line-height: 1.72 !important;
}


/* small separator before answer */

.faq-layout
.faq-answer[aria-hidden="false"]
p::before,

.faq-layout
.faq-item.open
.faq-answer
p::before {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-bottom: 0.9rem;

    background:
        linear-gradient(
            90deg,
            rgba(43,154,199,0.15),
            rgba(236,112,107,0.08),
            transparent
        );
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    .faq-layout {
        grid-template-columns:
            220px
            minmax(0, 1fr) !important;

        gap:
            clamp(
                1.5rem,
                3vw,
                2.2rem
            ) !important;
    }


    /* sticky category sidebar */

    .faq-category-nav {
        position: sticky !important;

        top: 105px !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: visible !important;

        padding: 0.9rem !important;

        border-radius: 20px !important;
    }


    .faq-category-nav a {
        width: 100% !important;

        white-space: normal !important;

        min-height: 52px !important;

        padding:
            0.75rem
            0.85rem !important;
    }


    .faq-layout .faq-question {
        min-height: 70px !important;

        padding:
            1rem
            1.05rem
            1rem
            1.2rem !important;

        font-size: 0.94rem !important;
    }


    .faq-layout .faq-answer p {
        padding:
            0
            1.2rem
            1.25rem !important;

        font-size: 0.89rem !important;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .faq-layout {
        grid-template-columns:
            235px
            minmax(0, 1fr) !important;

        gap: 2.4rem !important;
    }


    .faq-group {
        padding: 1.6rem !important;
    }


    .faq-layout .faq-question {
        font-size: 0.96rem !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 599px) {

    .faq-layout {
        gap: 1rem !important;

        padding-top: 0.5rem;
    }


    .faq-category-nav {
        margin-bottom: 0.3rem;

        padding: 0.55rem !important;

        border-radius: 14px !important;
    }


    .faq-category-nav a {
        min-height: 41px !important;

        padding:
            0.55rem
            0.7rem !important;

        font-size: 0.76rem !important;
    }


    .faq-group {
        padding: 0.8rem !important;

        border-radius: 17px !important;
    }


    .faq-group > h2 {
        font-size: 1.35rem !important;

        margin-bottom: 0.85rem !important;
    }


    .faq-layout .faq-item {
        border-radius: 14px !important;

        margin-bottom: 0.6rem !important;
    }


    .faq-layout .faq-question {
        grid-template-columns:
            minmax(0, 1fr)
            34px !important;

        gap: 0.7rem !important;

        min-height: 62px !important;

        padding:
            0.82rem
            0.8rem
            0.82rem
            0.9rem !important;

        font-size: 0.84rem !important;
    }


    .faq-layout .faq-question > i {
        width: 32px !important;
        height: 32px !important;

        border-radius: 10px !important;

        font-size: 0.73rem !important;
    }


    .faq-layout .faq-answer p {
        padding:
            0
            0.9rem
            1rem !important;

        font-size: 0.82rem !important;

        line-height: 1.65 !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .faq-layout .faq-question {
        grid-template-columns:
            minmax(0, 1fr)
            30px !important;

        gap: 0.55rem !important;

        padding:
            0.75rem
            0.7rem !important;

        font-size: 0.8rem !important;
    }


    .faq-layout .faq-question > i {
        width: 29px !important;
        height: 29px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .faq-layout .faq-answer,
    .faq-layout .faq-question > i,
    .faq-layout .faq-item,
    .faq-category-nav a {
        transition: none !important;
    }

}

/* =========================================================
   BACK TO TOP — LEFT SIDE
   Uses existing HTML + existing main.js
   ========================================================= */

.back-to-top {
    position: fixed !important;

    left: 18px !important;
    right: auto !important;
    bottom: 22px !important;

    z-index: 9998 !important;

    display: grid !important;
    place-items: center !important;

    width: 48px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(20, 127, 174, 0.16) !important;
    border-radius: 15px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #147fae,
            #12a99f
        ) !important;

    box-shadow:
        0 10px 28px rgba(20, 127, 174, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;

    font-size: 1rem !important;

    cursor: pointer !important;

    opacity: 0 !important;
    visibility: hidden !important;

    transform: translateY(12px) scale(0.95) !important;

    transition:
        opacity 220ms ease,
        visibility 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease !important;
}


/* main.js adds this class when scrolling */

.back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(0)
        scale(1) !important;
}


.back-to-top:hover {
    transform:
        translateY(-4px)
        scale(1.04) !important;

    box-shadow:
        0 15px 34px rgba(20, 127, 174, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
}


.back-to-top:active {
    transform:
        translateY(-1px)
        scale(0.97) !important;
}


.back-to-top i {
    margin: 0 !important;

    color: #fff !important;

    font-size: 0.95rem !important;

    line-height: 1 !important;
}


/* MOBILE */

@media (max-width: 639px) {

    .back-to-top {
        left: 14px !important;
        right: auto !important;

        bottom: 16px !important;

        width: 44px !important;
        height: 44px !important;

        border-radius: 13px !important;

        font-size: 0.9rem !important;
    }

}


/* DESKTOP */

@media (min-width: 1024px) {

    .back-to-top {
        left: 22px !important;
        right: auto !important;

        bottom: 24px !important;

        width: 50px !important;
        height: 50px !important;
    }

}

/* =========================================================
   FINAL BACK TO TOP FIX
   Compatible with all existing JS state classes
   LEFT SIDE — MOBILE + DESKTOP
   ========================================================= */

.back-to-top {
    position: fixed !important;

    left: 20px !important;
    right: auto !important;
    bottom: 22px !important;

    z-index: 99999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 50px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid rgba(20, 127, 174, 0.18) !important;
    border-radius: 15px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #147fae 0%,
            #12a99f 100%
        ) !important;

    box-shadow:
        0 12px 30px rgba(20, 127, 174, 0.28) !important;

    cursor: pointer !important;

    /* hidden until scrolling */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform:
        translateY(12px)
        scale(.92) !important;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* =========================================================
   SUPPORT EVERY STATE CLASS USED BY OLD/NEW JS
   ========================================================= */

.back-to-top.is-visible,
.back-to-top.visible,
.back-to-top.show,
.back-to-top.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform:
        translateY(0)
        scale(1) !important;
}


/* ICON */

.back-to-top i {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 1rem !important;
    line-height: 1 !important;
}


/* HOVER */

.back-to-top:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #12658f,
            #0b8578
        ) !important;

    box-shadow:
        0 16px 35px rgba(20, 127, 174, 0.34) !important;

    transform:
        translateY(-4px)
        scale(1.05) !important;
}


/* MOBILE */

@media (max-width: 639px) {

    .back-to-top {
        left: 14px !important;
        right: auto !important;

        bottom: 16px !important;

        width: 45px !important;
        height: 45px !important;

        border-radius: 13px !important;
    }

}


/* DESKTOP */

@media (min-width: 1024px) {

    .back-to-top {
        left: 22px !important;
        right: auto !important;

        bottom: 24px !important;

        width: 50px !important;
        height: 50px !important;
    }

}

/* ==========================================================================
   HELLO SKY — SERVICE EXPERIENCE
   CONVERT CAROUSEL TO PREMIUM CARD SECTION
   1 column mobile • 2 tablet • 3 desktop
   ========================================================================== */


/* =========================================================
   SECTION
   ========================================================= */

#experience {
    position: relative;
    isolation: isolate;

    padding:
        clamp(4.5rem, 8vw, 7rem)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 7% 12%,
            rgba(45, 157, 204, 0.11),
            transparent 25rem
        ),
        radial-gradient(
            circle at 93% 85%,
            rgba(233, 99, 93, 0.09),
            transparent 25rem
        ),
        radial-gradient(
            circle at 75% 8%,
            rgba(24, 170, 152, 0.055),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #f2faff 50%,
            #fff5f2 100%
        );
}


/* decorative rings */

#experience::before,
#experience::after {
    content: "";

    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}


#experience::before {
    width: 310px;
    height: 310px;

    top: -155px;
    left: -120px;

    border:
        1px solid rgba(45, 157, 204, 0.12);

    box-shadow:
        inset 0 0 0 50px
        rgba(45, 157, 204, 0.025);
}


#experience::after {
    width: 360px;
    height: 360px;

    right: -170px;
    bottom: -175px;

    border:
        1px solid rgba(233, 99, 93, 0.12);

    box-shadow:
        inset 0 0 0 58px
        rgba(233, 99, 93, 0.025);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

#experience .section-header {
    position: relative;
    z-index: 2;

    max-width: 860px;

    margin:
        0
        auto
        clamp(2rem, 5vw, 3.3rem);

    text-align: center;
}


#experience .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    margin-bottom: 1rem;

    padding:
        0.55rem
        0.95rem;

    border:
        1px solid rgba(20, 127, 174, 0.16);

    border-radius: 999px;

    color: #12658f;

    background:
        linear-gradient(
            135deg,
            rgba(239,249,255,0.96),
            rgba(255,243,241,0.92)
        );

    box-shadow:
        0 7px 20px rgba(21,55,73,0.055),
        inset 0 1px 0 rgba(255,255,255,0.95);

    font-size: 0.76rem;
    font-weight: 850;

    letter-spacing: 0.07em;
}


#experience .section-tag i {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #197fae,
            #18aa98
        );

    box-shadow:
        0 6px 14px rgba(25,127,174,0.20);

    font-size: 0.72rem;
}


#experience .section-title {
    max-width: 820px;

    margin:
        0
        auto
        0.9rem;

    color: #13263b;

    font-size:
        clamp(
            2rem,
            6vw,
            3.5rem
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.04em;
}


#experience .section-description {
    max-width: 720px;

    margin: 0 auto;

    color: #506577;

    font-size:
        clamp(
            0.96rem,
            1.8vw,
            1.07rem
        );

    line-height: 1.75;
}


/* =========================================================
   REMOVE CAROUSEL BEHAVIOR
   ========================================================= */

#experience .experience-shell {
    position: relative !important;

    width: 100% !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* Turn slider track into normal grid */

#experience .experience-track {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) !important;

    gap: 1rem !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    scroll-snap-type: none !important;
    scroll-behavior: auto !important;

    scrollbar-width: auto !important;
}


#experience .experience-track::-webkit-scrollbar {
    display: none !important;
}


/* =========================================================
   REMOVE CAROUSEL BUTTONS
   ========================================================= */

#experience .carousel-controls {
    display: none !important;
}


#experience .carousel-btn {
    display: none !important;
}


/* =========================================================
   PREMIUM EXPERIENCE CARD
   ========================================================= */

#experience .experience-card {
    position: relative;
    isolation: isolate;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    flex:
        none !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 225px !important;

    margin: 0 !important;

    padding:
        1.5rem !important;

    overflow: hidden !important;

    scroll-snap-align: none !important;

    border:
        1px solid rgba(31, 91, 119, 0.11) !important;

    border-radius:
        clamp(
            20px,
            3vw,
            26px
        ) !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(45,157,204,0.06),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(247,252,255,0.94)
        ) !important;

    box-shadow:
        0 13px 34px rgba(21,55,73,0.075),
        inset 0 1px 0 rgba(255,255,255,0.98) !important;

    transition:
        transform 260ms cubic-bezier(.22,1,.36,1),
        box-shadow 260ms ease,
        border-color 260ms ease !important;
}


/* top color strip */

#experience .experience-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2d9dcc,
            #18aa98
        );
}


/* decorative orb */

#experience .experience-card::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 140px;
    height: 140px;

    right: -65px;
    bottom: -75px;

    border-radius: 50%;

    background:
        rgba(45,157,204,0.065);

    transition:
        transform 300ms ease,
        background 300ms ease;
}


#experience .experience-card:hover {
    transform:
        translateY(-7px) !important;

    border-color:
        rgba(45,157,204,0.24) !important;

    box-shadow:
        0 22px 52px rgba(21,55,73,0.13),
        inset 0 1px 0 #fff !important;
}


#experience .experience-card:hover::after {
    transform: scale(1.35);

    background:
        rgba(45,157,204,0.10);
}


/* =========================================================
   NUMBER BADGE
   ========================================================= */

#experience .experience-card .number {
    position: relative;

    display: grid !important;
    place-items: center !important;

    flex: 0 0 auto;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;

    margin:
        0
        0
        1.15rem !important;

    padding: 0 !important;

    border-radius: 15px !important;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #197fae,
            #18aa98
        ) !important;

    box-shadow:
        0 10px 22px
        rgba(25,127,174,0.20) !important;

    font-family:
        "Sora",
        sans-serif !important;

    font-size: 0.82rem !important;
    font-weight: 850 !important;

    line-height: 1 !important;

    letter-spacing: 0.02em;
}


/* =========================================================
   MULTI-COLOR CARDS
   ========================================================= */

/* 01 */
#experience .experience-card:nth-child(1)::before {
    background:
        linear-gradient(
            90deg,
            #2d9dcc,
            #197fae
        );
}


/* 02 */
#experience .experience-card:nth-child(2) {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(233,99,93,0.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #fff7f5
        ) !important;
}


#experience .experience-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #e9635d,
            #f6aaa1
        );
}


#experience .experience-card:nth-child(2) .number {
    background:
        linear-gradient(
            135deg,
            #e9635d,
            #c94845
        ) !important;

    box-shadow:
        0 10px 22px
        rgba(233,99,93,0.20) !important;
}


#experience .experience-card:nth-child(2)::after {
    background:
        rgba(233,99,93,0.07);
}


/* 03 */
#experience .experience-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #18aa98,
            #2d9dcc
        );
}


#experience .experience-card:nth-child(3) .number {
    background:
        linear-gradient(
            135deg,
            #18aa98,
            #0b8578
        ) !important;
}


/* 04 */
#experience .experience-card:nth-child(4) {
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(220,161,61,0.075),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf0
        ) !important;
}


#experience .experience-card:nth-child(4)::before {
    background:
        linear-gradient(
            90deg,
            #dca13d,
            #f4ca6c
        );
}


#experience .experience-card:nth-child(4) .number {
    background:
        linear-gradient(
            135deg,
            #dca13d,
            #b4771d
        ) !important;

    box-shadow:
        0 10px 22px
        rgba(220,161,61,0.20) !important;
}


/* 05 */
#experience .experience-card:nth-child(5)::before {
    background:
        linear-gradient(
            90deg,
            #8777db,
            #b4a7ef
        );
}


#experience .experience-card:nth-child(5) .number {
    background:
        linear-gradient(
            135deg,
            #8777db,
            #6656bd
        ) !important;

    box-shadow:
        0 10px 22px
        rgba(119,101,206,0.20) !important;
}


#experience .experience-card:nth-child(5)::after {
    background:
        rgba(119,101,206,0.07);
}


/* 06 */
#experience .experience-card:nth-child(6)::before {
    background:
        linear-gradient(
            90deg,
            #17875f,
            #18aa98
        );
}


#experience .experience-card:nth-child(6) .number {
    background:
        linear-gradient(
            135deg,
            #17875f,
            #0b6f51
        ) !important;

    box-shadow:
        0 10px 22px
        rgba(23,135,95,0.20) !important;
}


#experience .experience-card:nth-child(6)::after {
    background:
        rgba(23,135,95,0.065);
}


/* =========================================================
   CARD TITLE
   ========================================================= */

#experience .experience-card h3 {
    margin:
        0
        0
        0.7rem !important;

    color: #13263b !important;

    font-family:
        "Sora",
        "Manrope",
        sans-serif !important;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.22rem
        ) !important;

    font-weight: 780 !important;

    line-height: 1.3 !important;

    letter-spacing: -0.02em;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

#experience .experience-card p {
    margin: 0 !important;

    color: #506577 !important;

    font-size: 0.91rem !important;

    line-height: 1.7 !important;
}


/* small accent line */

#experience .experience-card p::after {
    content: "";

    display: block;

    width: 34px;
    height: 2px;

    margin-top: 1rem;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(45,157,204,0.7),
            rgba(24,170,152,0.18)
        );

    transition:
        width 250ms ease;
}


#experience .experience-card:hover p::after {
    width: 58px;
}


/* =========================================================
   TABLET — 2 COLUMNS
   ========================================================= */

@media (min-width: 640px) {

    #experience .experience-track {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap: 1.15rem !important;
    }


    #experience .experience-card {
        min-height: 245px !important;

        padding:
            1.6rem !important;
    }

}


/* =========================================================
   DESKTOP — 3 COLUMNS × 2 ROWS
   ========================================================= */

@media (min-width: 960px) {

    #experience .experience-track {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            clamp(
                1.2rem,
                2vw,
                1.5rem
            ) !important;
    }


    #experience .experience-card {
        min-height: 265px !important;

        padding:
            1.8rem !important;
    }


    #experience .experience-card .number {
        width: 56px !important;
        height: 56px !important;

        min-width: 56px !important;

        border-radius: 16px !important;

        font-size: 0.86rem !important;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1280px) {

    #experience .experience-track {
        gap: 1.6rem !important;
    }


    #experience .experience-card {
        min-height: 275px !important;

        padding:
            2rem !important;
    }


    #experience .experience-card h3 {
        font-size: 1.2rem !important;
    }


    #experience .experience-card p {
        font-size: 0.94rem !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 639px) {

    #experience {
        padding:
            4rem
            0;
    }


    #experience .section-header {
        margin-bottom: 1.8rem;
    }


    #experience .section-title {
        font-size:
            clamp(
                1.9rem,
                8vw,
                2.4rem
            );
    }


    #experience .experience-track {
        gap: 0.85rem !important;
    }


    #experience .experience-card {
        min-height: auto !important;

        padding:
            1.3rem !important;

        border-radius:
            19px !important;
    }


    #experience .experience-card .number {
        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;

        margin-bottom:
            1rem !important;

        border-radius:
            14px !important;

        font-size:
            0.76rem !important;
    }


    #experience .experience-card h3 {
        font-size:
            1.02rem !important;
    }


    #experience .experience-card p {
        font-size:
            0.87rem !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    #experience .experience-card {
        padding:
            1.1rem !important;
    }


    #experience .experience-card .number {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
    }


    #experience .experience-card h3 {
        font-size:
            0.98rem !important;
    }


    #experience .experience-card p {
        font-size:
            0.84rem !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #experience .experience-card,
    #experience .experience-card::after,
    #experience .experience-card p::after {
        transition: none !important;
    }


    #experience .experience-card:hover {
        transform: none !important;
    }

}

/* ==========================================================================
   HELLO SKY — SUPER PREMIUM BLOG ARTICLE THEME
   Add at the VERY BOTTOM of style.css

   Targets all article pages using:
   article.narrow.prose

   Includes:
   - Premium blog hero
   - Breadcrumbs
   - Article reading surface
   - Published / updated badge
   - Table of contents
   - Article headings
   - Paragraph typography
   - Links
   - Lists
   - Premium check lists
   - Article FAQ
   - Author box
   - Related guides
   - Final CTA
   - Mobile / tablet / desktop optimization
   ========================================================================== */


/* ==========================================================================
   01. BLOG ARTICLE PAGE BACKGROUND
   ========================================================================== */

body:has(article.prose) {
    background:
        radial-gradient(
            circle at 3% 12%,
            rgba(45,157,204,0.055),
            transparent 28rem
        ),
        radial-gradient(
            circle at 97% 42%,
            rgba(233,99,93,0.04),
            transparent 28rem
        ),
        #fffdf9;
}


/* ==========================================================================
   02. PREMIUM BLOG HERO
   ========================================================================== */

body:has(article.prose) .page-hero {
    position: relative;
    isolation: isolate;

    padding:
        clamp(3.5rem, 7vw, 6rem)
        0
        clamp(3.8rem, 7vw, 5.8rem);

    overflow: hidden;

    border-bottom:
        1px solid rgba(31,91,119,0.10);

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(45,157,204,0.16),
            transparent 28rem
        ),
        radial-gradient(
            circle at 92% 10%,
            rgba(233,99,93,0.13),
            transparent 27rem
        ),
        radial-gradient(
            circle at 70% 100%,
            rgba(24,170,152,0.075),
            transparent 23rem
        ),
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #eff9ff 53%,
            #fff3f1 100%
        ) !important;
}


body:has(article.prose) .page-hero::before,
body:has(article.prose) .page-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    border-radius: 50%;

    pointer-events: none;
}


body:has(article.prose) .page-hero::before {
    width: 310px;
    height: 310px;

    top: -150px;
    right: -115px;

    border:
        1px solid rgba(45,157,204,0.14);

    box-shadow:
        inset 0 0 0 48px
        rgba(45,157,204,0.025);
}


body:has(article.prose) .page-hero::after {
    width: 350px;
    height: 350px;

    left: -170px;
    bottom: -190px;

    border:
        1px solid rgba(233,99,93,0.13);

    box-shadow:
        inset 0 0 0 55px
        rgba(233,99,93,0.022);
}


body:has(article.prose) .page-hero .container {
    position: relative;
    z-index: 2;

    width:
        min(
            calc(100% - 28px),
            1060px
        );

    text-align: center;
}


/* BLOG CATEGORY BADGE */

body:has(article.prose) .page-hero .section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    margin:
        0 auto
        1rem;

    padding:
        0.55rem
        0.95rem;

    border:
        1px solid rgba(25,127,174,0.16);

    border-radius: 999px;

    color: #12658f;

    background:
        linear-gradient(
            135deg,
            rgba(239,249,255,0.96),
            rgba(255,243,241,0.92)
        );

    box-shadow:
        0 8px 22px rgba(21,55,73,0.065);

    font-size: 0.76rem;
    font-weight: 850;

    letter-spacing: 0.065em;

    text-transform: uppercase;
}


body:has(article.prose) .page-hero .section-tag i {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #197fae,
            #18aa98
        );

    box-shadow:
        0 7px 15px rgba(25,127,174,0.20);

    font-size: 0.72rem;
}


/* ARTICLE H1 */

body:has(article.prose) .page-hero h1 {
    max-width: 1000px;

    margin:
        0
        auto
        1.15rem !important;

    color: #13263b;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            2.1rem,
            6vw,
            4.25rem
        ) !important;

    font-weight: 800;

    line-height: 1.07 !important;

    letter-spacing: -0.045em;
}


/* HERO DESCRIPTION */

body:has(article.prose)
.page-hero
.container > p {
    max-width: 830px;

    margin:
        0
        auto !important;

    color: #486276;

    font-size:
        clamp(
            0.98rem,
            2vw,
            1.12rem
        );

    line-height: 1.78;
}


/* ==========================================================================
   03. PREMIUM BREADCRUMBS
   ========================================================================== */

body:has(article.prose) .breadcrumbs {
    margin-bottom: 1.4rem;
}


body:has(article.prose) .breadcrumbs ol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 0.4rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


body:has(article.prose) .breadcrumbs li {
    display: inline-flex;
    align-items: center;

    gap: 0.4rem;

    color: #718290;

    font-size: 0.78rem;
    font-weight: 700;
}


body:has(article.prose)
.breadcrumbs li:not(:last-child)::after {
    content: "\f054";

    color: rgba(18,101,143,0.55);

    font-family:
        "Font Awesome 6 Free";

    font-size: 0.56rem;
    font-weight: 900;
}


body:has(article.prose) .breadcrumbs a {
    color: #12658f;

    font-weight: 800;
}


body:has(article.prose) .breadcrumbs a:hover {
    color: #c94845;
}


/* ==========================================================================
   04. ARTICLE SECTION WRAPPER
   ========================================================================== */

body:has(article.prose)
main > section:has(> article.prose) {
    position: relative;

    padding:
        clamp(3rem, 6vw, 5rem)
        0
        clamp(4rem, 7vw, 6rem);

    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #ffffff 28%,
            #fbfdfe 100%
        );
}


/* ==========================================================================
   05. ARTICLE READING SURFACE
   ========================================================================== */

body:has(article.prose) article.prose {
    position: relative;

    width:
        min(
            calc(100% - 28px),
            900px
        ) !important;

    margin:
        0
        auto !important;

    padding:
        clamp(
            1.4rem,
            4vw,
            3.2rem
        ) !important;

    border:
        1px solid rgba(31,91,119,0.10);

    border-radius:
        clamp(
            22px,
            3vw,
            32px
        );

    color: #506577;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(45,157,204,0.045),
            transparent 25rem
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(233,99,93,0.035),
            transparent 24rem
        ),
        rgba(255,255,255,0.96);

    box-shadow:
        0 25px 65px rgba(21,55,73,0.085),
        inset 0 1px 0 #fff;

    font-size:
        clamp(
            0.96rem,
            1.7vw,
            1.04rem
        );

    line-height: 1.84;
}


/* colored premium top accent */

body:has(article.prose)
article.prose::before {
    content: "";

    position: absolute;

    top: 0;
    left: 6%;
    right: 6%;

    height: 4px;

    border-radius:
        0
        0
        999px
        999px;

    background:
        linear-gradient(
            90deg,
            #2d9dcc,
            #18aa98,
            #e9635d
        );
}


/* ==========================================================================
   06. PUBLISHED / UPDATED INFORMATION
   ========================================================================== */

body:has(article.prose)
.prose .updated-line {
    display: inline-flex !important;
    align-items: center;

    gap: 0.55rem;

    margin:
        0
        0
        1.5rem !important;

    padding:
        0.55rem
        0.85rem !important;

    border:
        1px solid rgba(25,127,174,0.13);

    border-radius: 999px;

    color: #486276 !important;

    background:
        linear-gradient(
            135deg,
            #eff9ff,
            #fff8f5
        );

    box-shadow:
        0 5px 16px rgba(21,55,73,0.045);

    font-size: 0.78rem !important;
    font-weight: 750;
}


body:has(article.prose)
.prose .updated-line i {
    color: #197fae;

    font-size: 0.8rem;
}


/* ==========================================================================
   07. TABLE OF CONTENTS
   ========================================================================== */

body:has(article.prose)
.prose .toc {
    position: relative;

    margin:
        0
        0
        2rem !important;

    padding:
        clamp(
            1.25rem,
            3vw,
            1.7rem
        ) !important;

    overflow: hidden;

    border:
        1px solid rgba(31,91,119,0.11) !important;

    border-radius:
        20px !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(45,157,204,0.08),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #f8fcff,
            #fffaf7
        ) !important;

    box-shadow:
        0 13px 32px rgba(21,55,73,0.07) !important;
}


body:has(article.prose)
.prose .toc::before {
    content: "";

    position: absolute;

    top: 0 !important;
    left: 0 !important;
    right: 0;

    width: auto !important;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2d9dcc,
            #18aa98,
            #e9635d
        ) !important;
}


body:has(article.prose)
.prose .toc h2 {
    display: flex;
    align-items: center;

    gap: 0.65rem;

    margin:
        0
        0
        1rem !important;

    color: #13263b;

    font-size:
        clamp(
            1.15rem,
            3vw,
            1.4rem
        ) !important;
}


body:has(article.prose)
.prose .toc h2::before {
    content: "\f03a";

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 12px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #197fae,
            #18aa98
        );

    box-shadow:
        0 7px 17px rgba(25,127,174,0.18);

    font-family:
        "Font Awesome 6 Free";

    font-size: 0.82rem;
    font-weight: 900;
}


body:has(article.prose)
.prose .toc ol {
    display: grid;

    gap: 0.5rem;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    counter-reset: blog-toc;
}


body:has(article.prose)
.prose .toc li {
    counter-increment: blog-toc;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


body:has(article.prose)
.prose .toc a {
    display: grid;

    grid-template-columns:
        31px
        minmax(0,1fr);

    align-items: center;

    gap: 0.75rem;

    padding:
        0.65rem
        0.75rem !important;

    border:
        1px solid transparent;

    border-radius: 11px;

    color: #405b6f !important;

    background:
        rgba(255,255,255,0.62);

    font-size: 0.84rem !important;
    font-weight: 720 !important;

    text-decoration: none !important;

    transition:
        transform 200ms ease,
        background 200ms ease,
        border-color 200ms ease;
}


body:has(article.prose)
.prose .toc a::before {
    content:
        counter(
            blog-toc,
            decimal-leading-zero
        ) !important;

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 9px;

    color: #12658f;

    background: #e7f5fb;

    font-family:
        "Sora",
        sans-serif;

    font-size: 0.68rem;
    font-weight: 850;
}


body:has(article.prose)
.prose .toc a:hover {
    transform: translateX(4px);

    border-color:
        rgba(45,157,204,0.13);

    color: #12658f !important;

    background: #fff;
}


/* ==========================================================================
   08. ARTICLE CONTENT SECTIONS
   ========================================================================== */

body:has(article.prose)
.prose > section {
    position: relative;

    margin:
        2.4rem
        0
        0;

    padding-top: 0.3rem;

    scroll-margin-top: 110px;
}


body:has(article.prose)
.prose > section + section {
    margin-top: 2.7rem;

    padding-top: 2.4rem;

    border-top:
        1px solid rgba(31,91,119,0.09);
}


/* ==========================================================================
   09. ARTICLE HEADINGS
   ========================================================================== */

body:has(article.prose)
.prose > section > h2,
body:has(article.prose)
.prose > h2 {
    position: relative;

    margin:
        0
        0
        1rem !important;

    padding-left: 1rem;

    color: #13263b !important;

    font-family:
        "Sora",
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            1.45rem,
            4vw,
            2.2rem
        ) !important;

    font-weight: 800;

    line-height: 1.22;

    letter-spacing: -0.03em;
}


body:has(article.prose)
.prose > section > h2::before,
body:has(article.prose)
.prose > h2::before {
    content: "";

    position: absolute;

    top: 0.1em;
    bottom: 0.1em;

    left: 0;

    width: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #2d9dcc,
            #18aa98,
            #e9635d
        );
}


body:has(article.prose)
.prose h3 {
    margin:
        1.7rem
        0
        0.7rem !important;

    color: #183149 !important;

    font-size:
        clamp(
            1.08rem,
            2.5vw,
            1.4rem
        ) !important;

    font-weight: 780;
}


/* ==========================================================================
   10. ARTICLE PARAGRAPHS
   ========================================================================== */

body:has(article.prose)
.prose > p,
body:has(article.prose)
.prose > section > p {
    margin:
        0
        0
        1.15rem !important;

    color: #506577 !important;

    line-height: 1.85 !important;
}


/* slightly stronger first introduction */

body:has(article.prose)
.prose > .toc + p {
    color: #3f5a6d !important;

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.07rem
        );

    font-weight: 520;
}


/* ==========================================================================
   11. ARTICLE LINKS
   ========================================================================== */

body:has(article.prose)
.prose a:not(.btn):not(.toc a) {
    color: #12658f !important;

    font-weight: 780 !important;

    text-decoration:
        underline !important;

    text-decoration-color:
        rgba(18,101,143,0.24) !important;

    text-decoration-thickness:
        1.5px;

    text-underline-offset:
        3px;
}


body:has(article.prose)
.prose a:not(.btn):not(.toc a):hover {
    color: #c94845 !important;

    text-decoration-color:
        currentColor !important;
}


/* ==========================================================================
   12. NORMAL ARTICLE UL / OL
   ========================================================================== */

body:has(article.prose)
.prose ul:not(.check-list),
body:has(article.prose)
.prose ol:not(.toc ol) {
    display: grid;

    gap: 0.6rem;

    margin:
        1.1rem
        0
        1.4rem
        1.25rem;

    padding-left: 0.8rem;
}


body:has(article.prose)
.prose ul:not(.check-list) {
    list-style: disc;
}


body:has(article.prose)
.prose li::marker {
    color: #197fae;

    font-weight: 800;
}


/* ==========================================================================
   13. ARTICLE PREMIUM CHECK LIST
   Fixes global checkmark overlap too
   ========================================================================== */

body:has(article.prose)
.prose .check-list {
    display: grid !important;

    grid-template-columns:
        minmax(0,1fr) !important;

    gap: 0.7rem !important;

    margin:
        1.3rem
        0
        1.6rem !important;

    padding: 0 !important;

    list-style: none !important;
}


body:has(article.prose)
.prose .check-list li {
    position: relative;

    display: grid !important;

    grid-template-columns:
        31px
        minmax(0,1fr) !important;

    align-items: center;

    column-gap: 13px;

    min-height: 56px;

    margin: 0 !important;

    padding:
        0.72rem
        0.85rem !important;

    border:
        1px solid rgba(31,91,119,0.09);

    border-radius: 13px;

    color: #405b6f !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f8fcfe
        );

    box-shadow:
        0 6px 18px rgba(21,55,73,0.045);

    font-size: 0.88rem;

    font-weight: 650;

    line-height: 1.48;

    list-style: none !important;

    text-indent: 0 !important;
}


body:has(article.prose)
.prose .check-list li::before {
    content: "\f00c" !important;

    position: static !important;

    display: grid !important;
    place-items: center !important;

    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;

    margin: 0 !important;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #18aa98,
            #0b8578
        ) !important;

    box-shadow:
        0 6px 13px rgba(24,170,152,0.18);

    font-family:
        "Font Awesome 6 Free";

    font-size: 0.62rem;

    font-weight: 900;

    line-height: 1;

    transform: none !important;
}


body:has(article.prose)
.prose .check-list li:nth-child(2)::before,
body:has(article.prose)
.prose .check-list li:nth-child(5)::before {
    background:
        linear-gradient(
            135deg,
            #2d9dcc,
            #197fae
        ) !important;
}


body:has(article.prose)
.prose .check-list li:nth-child(3)::before,
body:has(article.prose)
.prose .check-list li:nth-child(6)::before {
    background:
        linear-gradient(
            135deg,
            #e9635d,
            #c94845
        ) !important;
}


body:has(article.prose)
.prose .check-list li:nth-child(4)::before {
    background:
        linear-gradient(
            135deg,
            #dca13d,
            #b4771d
        ) !important;
}


/* ==========================================================================
   14. ARTICLE FAQ
   ========================================================================== */

body:has(article.prose)
.prose #article-faq {
    margin-top: 3rem;

    padding:
        clamp(
            1.15rem,
            3vw,
            1.6rem
        );

    border:
        1px solid rgba(31,91,119,0.09);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fcff,
            #fff9f7
        );
}


body:has(article.prose)
.prose #article-faq > h2 {
    margin-bottom:
        1.3rem !important;
}


/* FAQ cards */

body:has(article.prose)
.prose #article-faq .faq-item {
    position: relative;

    margin:
        0
        0
        0.7rem !important;

    overflow: hidden;

    border:
        1px solid rgba(31,91,119,0.10);

    border-radius: 15px;

    background: #fff;

    box-shadow:
        0 6px 20px rgba(21,55,73,0.045);
}


body:has(article.prose)
.prose #article-faq .faq-item:last-child {
    margin-bottom: 0 !important;
}


body:has(article.prose)
.prose #article-faq .faq-item h3 {
    margin: 0 !important;
}


/* FAQ BUTTON */

body:has(article.prose)
.prose #article-faq .faq-question {
    display: grid !important;

    grid-template-columns:
        minmax(0,1fr)
        36px;

    align-items: center;

    gap: 0.8rem;

    width: 100%;

    min-height: 64px;

    padding:
        0.9rem
        0.9rem
        0.9rem
        1rem;

    border: 0;

    color: #183149;

    background:
        transparent;

    text-align: left;

    font-size: 0.88rem;

    font-weight: 780;

    line-height: 1.45;
}


body:has(article.prose)
.prose #article-faq
.faq-question > i {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 10px;

    color: #12658f;

    background: #edf8fd;

    font-size: 0.75rem;

    transition:
        transform 250ms ease,
        background 250ms ease,
        color 250ms ease;
}


/* OPEN STATE */

body:has(article.prose)
.prose #article-faq
.faq-question[aria-expanded="true"] {
    color: #12658f;

    background:
        linear-gradient(
            135deg,
            #f2faff,
            #fff8f6
        );
}


body:has(article.prose)
.prose #article-faq
.faq-question[aria-expanded="true"] > i {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #e9635d,
            #c94845
        );

    transform: rotate(45deg);
}


/* CLOSED ANSWER */

body:has(article.prose)
.prose #article-faq .faq-answer {
    display: grid !important;

    grid-template-rows:
        0fr !important;

    max-height: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transition:
        grid-template-rows 300ms ease,
        max-height 300ms ease,
        opacity 200ms ease !important;
}


body:has(article.prose)
.prose #article-faq
.faq-answer > div {
    min-height: 0;

    overflow: hidden;

    padding: 0 !important;
}


/* OPEN ANSWER */

body:has(article.prose)
.prose #article-faq
.faq-answer[aria-hidden="false"],
body:has(article.prose)
.prose #article-faq
.faq-item.open .faq-answer {
    grid-template-rows:
        1fr !important;

    max-height:
        450px !important;

    opacity: 1 !important;

    visibility: visible !important;
}


body:has(article.prose)
.prose #article-faq .faq-answer p {
    margin: 0 !important;

    padding:
        0.95rem
        1rem
        1.05rem !important;

    border-top:
        1px solid rgba(31,91,119,0.075);

    color: #587083 !important;

    font-size: 0.85rem;

    line-height: 1.7;
}


/* ==========================================================================
   15. AUTHOR BOX
   ========================================================================== */

body:has(article.prose)
.prose .author-box {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    align-items: center;

    gap: 1.2rem;

    margin-top: 3rem !important;

    padding:
        clamp(
            1.3rem,
            3vw,
            1.8rem
        ) !important;

    overflow: hidden;

    border:
        1px solid rgba(31,91,119,0.11) !important;

    border-radius: 20px !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(45,157,204,0.07),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #f5fbff,
            #fff8f6
        ) !important;

    box-shadow:
        0 15px 38px rgba(21,55,73,0.075) !important;
}


body:has(article.prose)
.prose .author-box::before {
    content: "";

    position: absolute;

    top: 0 !important;
    bottom: auto !important;

    left: 0 !important;
    right: 0;

    width: auto !important;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2d9dcc,
            #18aa98,
            #e9635d
        ) !important;
}


/* author icon */

body:has(article.prose)
.prose .author-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border-radius: 17px;

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #197fae,
            #18aa98
        ) !important;

    box-shadow:
        0 10px 23px rgba(25,127,174,0.19);

    font-size: 1.15rem;
}


body:has(article.prose)
.prose .author-box h2 {
    margin:
        0
        0
        0.4rem !important;

    padding: 0 !important;

    color: #13263b;

    font-size:
        clamp(
            1.05rem,
            2.5vw,
            1.25rem
        ) !important;
}


body:has(article.prose)
.prose .author-box h2::before {
    display: none !important;
}


body:has(article.prose)
.prose .author-box p {
    margin-bottom:
        0.45rem !important;

    color: #587083 !important;

    font-size: 0.85rem !important;

    line-height: 1.65 !important;
}


body:has(article.prose)
.prose .author-box a {
    display: inline-flex;

    color: #12658f !important;

    font-size: 0.8rem;

    font-weight: 850 !important;

    text-decoration: none !important;
}


/* ==========================================================================
   16. RELATED GUIDES SECTION
   ========================================================================== */

body:has(article.prose)
main > .premium-section:has(.blog-grid) {
    position: relative;

    padding:
        clamp(4rem, 7vw, 6.5rem)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(45,157,204,0.08),
            transparent 23rem
        ),
        radial-gradient(
            circle at 94% 90%,
            rgba(233,99,93,0.07),
            transparent 23rem
        ),
        #f8fbfc;
}


body:has(article.prose)
main > .premium-section:has(.blog-grid)
.section-header {
    max-width: 800px;

    margin:
        0
        auto
        2.3rem;

    text-align: center;
}


/* ==========================================================================
   17. RELATED GUIDE GRID
   ========================================================================== */

body:has(article.prose)
.blog-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0,1fr) !important;

    gap: 1rem !important;
}


/* ==========================================================================
   18. PREMIUM RELATED GUIDE CARD
   ========================================================================== */

body:has(article.prose)
.blog-grid .blog-card {
    position: relative;
    isolation: isolate;

    display: flex;

    flex-direction: column;

    min-width: 0;
    min-height: 285px;

    padding:
        1.5rem !important;

    overflow: hidden;

    border:
        1px solid rgba(31,91,119,0.10) !important;

    border-radius: 21px !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(45,157,204,0.055),
            transparent 14rem
        ),
        linear-gradient(
            145deg,
            #fff,
            #f8fcfe
        ) !important;

    box-shadow:
        0 12px 32px rgba(21,55,73,0.07) !important;

    transition:
        transform 260ms ease,
        box-shadow 260ms ease,
        border-color 260ms ease;
}


body:has(article.prose)
.blog-grid .blog-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2d9dcc,
            #18aa98
        );
}


body:has(article.prose)
.blog-grid .blog-card:nth-child(2)::before {
    background:
        linear-gradient(
            90deg,
            #e9635d,
            #f6aaa1
        );
}


body:has(article.prose)
.blog-grid .blog-card:nth-child(3)::before {
    background:
        linear-gradient(
            90deg,
            #18aa98,
            #2d9dcc
        );
}


body:has(article.prose)
.blog-grid .blog-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(45,157,204,0.22) !important;

    box-shadow:
        0 22px 50px rgba(21,55,73,0.12) !important;
}


/* BLOG ICON */

body:has(article.prose)
.blog-grid .blog-icon {
    display: grid;
    place-items: center;

    width: 53px;
    height: 53px;

    margin-bottom: 1rem;

    border-radius: 15px;

    color: #12658f !important;

    background:
        linear-gradient(
            145deg,
            #dff3fc,
            #fff
        ) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(45,157,204,0.10),
        0 8px 18px rgba(21,55,73,0.055);

    font-size: 1.05rem;
}


body:has(article.prose)
.blog-grid .blog-card:nth-child(2)
.blog-icon {
    color: #c94845 !important;

    background:
        linear-gradient(
            145deg,
            #ffe5e1,
            #fff
        ) !important;
}


body:has(article.prose)
.blog-grid .blog-card:nth-child(3)
.blog-icon {
    color: #0b8578 !important;

    background:
        linear-gradient(
            145deg,
            #d8f4ef,
            #fff
        ) !important;
}


/* BLOG META */

body:has(article.prose)
.blog-grid .blog-meta {
    display: flex;

    flex-wrap: wrap;

    gap:
        0.45rem
        0.75rem;

    margin-bottom: 0.8rem;

    color: #718290;

    font-size: 0.71rem;

    font-weight: 700;
}


body:has(article.prose)
.blog-grid .blog-meta span {
    display: inline-flex;

    align-items: center;

    gap: 0.35rem;
}


body:has(article.prose)
.blog-grid .blog-meta i {
    color: #197fae;
}


/* RELATED TITLE */

body:has(article.prose)
.blog-grid .blog-card h2 {
    margin:
        0
        0
        0.75rem;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.18rem
        ) !important;

    line-height: 1.38 !important;
}


body:has(article.prose)
.blog-grid .blog-card h2 a {
    color: #13263b;

    text-decoration: none;
}


body:has(article.prose)
.blog-grid .blog-card h2 a:hover {
    color: #12658f;
}


/* RELATED DESCRIPTION */

body:has(article.prose)
.blog-grid .blog-card > p {
    flex: 1;

    margin-bottom: 1rem;

    color: #587083;

    font-size: 0.84rem !important;

    line-height: 1.67 !important;
}


/* READ GUIDE LINK */

body:has(article.prose)
.blog-grid .blog-card .text-link {
    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    width: fit-content;

    color: #12658f;

    font-size: 0.82rem;

    font-weight: 850;
}


/* ==========================================================================
   19. ARTICLE FINAL CTA
   ========================================================================== */

body:has(article.prose)
main > .premium-section
.feature-panel[style*="text-align:center"] {
    max-width: 1000px;

    border:
        1px solid rgba(31,91,119,0.11) !important;

    border-radius:
        clamp(
            22px,
            3vw,
            30px
        ) !important;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(45,157,204,0.10),
            transparent 20rem
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(233,99,93,0.08),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            #fff,
            #f2faff 50%,
            #fff6f3
        ) !important;

    box-shadow:
        0 22px 55px rgba(21,55,73,0.10) !important;
}


/* ==========================================================================
   20. TABLET
   ========================================================================== */

@media (min-width: 640px) {

    body:has(article.prose)
    .prose .check-list {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    body:has(article.prose)
    .blog-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

}


/* ==========================================================================
   21. DESKTOP
   ========================================================================== */

@media (min-width: 960px) {

    body:has(article.prose)
    article.prose {
        padding:
            3rem
            3.4rem !important;
    }


    body:has(article.prose)
    .blog-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;

        gap: 1.35rem !important;
    }


    body:has(article.prose)
    .blog-grid .blog-card {
        min-height: 315px;

        padding:
            1.7rem !important;
    }

}


/* ==========================================================================
   22. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1280px) {

    body:has(article.prose)
    article.prose {
        width:
            min(
                calc(100% - 32px),
                940px
            ) !important;

        padding:
            3.3rem
            3.7rem !important;
    }


    body:has(article.prose)
    .prose > p,
    body:has(article.prose)
    .prose > section > p {
        font-size: 1rem;
    }

}


/* ==========================================================================
   23. MOBILE
   ========================================================================== */

@media (max-width: 639px) {

    body:has(article.prose)
    .page-hero {
        padding:
            2.8rem
            0
            3.4rem;
    }


    body:has(article.prose)
    .page-hero h1 {
        font-size:
            clamp(
                1.85rem,
                9vw,
                2.55rem
            ) !important;
    }


    body:has(article.prose)
    .breadcrumbs {
        margin-bottom: 1rem;
    }


    body:has(article.prose)
    .breadcrumbs ol {
        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 0.3rem;

        scrollbar-width: none;
    }


    body:has(article.prose)
    .breadcrumbs ol::-webkit-scrollbar {
        display: none;
    }


    body:has(article.prose)
    .breadcrumbs li {
        flex: 0 0 auto;

        font-size: 0.7rem;
    }


    body:has(article.prose)
    article.prose {
        width:
            calc(100% - 20px) !important;

        padding:
            1.15rem !important;

        border-radius:
            19px;
    }


    body:has(article.prose)
    .prose .updated-line {
        display: flex !important;

        width: 100%;

        border-radius: 12px;

        font-size: 0.72rem !important;

        line-height: 1.45;
    }


    body:has(article.prose)
    .prose .toc {
        padding:
            1rem !important;

        border-radius:
            16px !important;
    }


    body:has(article.prose)
    .prose .toc a {
        grid-template-columns:
            28px
            minmax(0,1fr);

        gap: 0.6rem;

        padding:
            0.58rem
            0.6rem !important;

        font-size:
            0.78rem !important;
    }


    body:has(article.prose)
    .prose .toc a::before {
        width: 27px;
        height: 27px;

        font-size: 0.62rem;
    }


    body:has(article.prose)
    .prose > section + section {
        margin-top: 2rem;

        padding-top: 1.8rem;
    }


    body:has(article.prose)
    .prose > section > h2,
    body:has(article.prose)
    .prose > h2 {
        padding-left: 0.8rem;

        font-size:
            clamp(
                1.3rem,
                7vw,
                1.7rem
            ) !important;
    }


    body:has(article.prose)
    .prose > p,
    body:has(article.prose)
    .prose > section > p {
        font-size: 0.9rem;

        line-height:
            1.76 !important;
    }


    body:has(article.prose)
    .prose .check-list li {
        grid-template-columns:
            28px
            minmax(0,1fr) !important;

        column-gap: 11px;

        min-height: 54px;

        padding:
            0.65rem
            0.7rem !important;

        font-size: 0.82rem;
    }


    body:has(article.prose)
    .prose .check-list li::before {
        width: 27px !important;
        height: 27px !important;

        min-width: 27px !important;
    }


    body:has(article.prose)
    .prose #article-faq {
        padding: 0.8rem;

        border-radius: 17px;
    }


    body:has(article.prose)
    .prose #article-faq
    .faq-question {
        grid-template-columns:
            minmax(0,1fr)
            32px;

        min-height: 60px;

        padding:
            0.75rem
            0.7rem
            0.75rem
            0.8rem;

        font-size: 0.81rem;
    }


    body:has(article.prose)
    .prose #article-faq
    .faq-question > i {
        width: 30px;
        height: 30px;
    }


    body:has(article.prose)
    .prose .author-box {
        grid-template-columns:
            1fr;

        text-align: center;

        padding:
            1.2rem !important;
    }


    body:has(article.prose)
    .prose .author-icon {
        width: 52px;
        height: 52px;

        margin:
            0
            auto;
    }


    body:has(article.prose)
    .blog-grid .blog-card {
        min-height: auto;

        padding:
            1.25rem !important;

        border-radius: 18px !important;
    }

}


/* ==========================================================================
   24. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 360px) {

    body:has(article.prose)
    article.prose {
        width:
            calc(100% - 16px) !important;

        padding:
            1rem !important;
    }


    body:has(article.prose)
    .page-hero h1 {
        font-size:
            1.75rem !important;
    }


    body:has(article.prose)
    .prose .toc {
        padding:
            0.85rem !important;
    }

}


/* ==========================================================================
   25. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    body:has(article.prose)
    .blog-card,

    body:has(article.prose)
    .toc a,

    body:has(article.prose)
    .faq-answer,

    body:has(article.prose)
    .faq-question > i {
        transition:
            none !important;
    }


    body:has(article.prose)
    .blog-card:hover,

    body:has(article.prose)
    .toc a:hover {
        transform:
            none !important;
    }

}