/* ─── SHAH TV Marketing Design System ─── */
/* Palette: palette.json */
:root {
  --shah-bg: #020B18;
  --shah-navy: #071A33;
  --shah-navy-2: #08264A;
  --shah-blue: #1E6FDE;
  --shah-gold: #F4C54E;
  --shah-gold-light: #ffe78f;
  --shah-gold-deep: #D99A22;
  --shah-white: #F7F8FB;
  --shah-muted: #B7C2D3;
  --shah-border: rgba(67, 126, 207, .32);
  --shah-gold-border: rgba(242, 193, 78, .5);
}

/* ─── Reset ─── */
* { box-sizing: border-box }
html { scroll-behavior: smooth }

body.marketing-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--shah-bg);
  color: var(--shah-white);
  font-family: Poppins, "Segoe UI", sans-serif;
}

/* ─── Main wrapper ─── */
.marketing-main {
  position: relative;
  isolation: isolate;
  flex: 1;
  overflow: hidden;
}

.marketing-wrap {
  width: min(1420px, calc(100% - 64px));
  margin: auto;
}

/* ─── Hero layout ─── */
.marketing-hero {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 32px 0 18px;
}

.marketing-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.25fr);
  align-items: center;
  gap: 68px;
}

/* ─── Typography ─── */
.marketing-eyebrow {
  margin: 0 0 14px;
  color: var(--shah-gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.marketing-title {
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 5vw, 5.3rem);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 800;
}

.marketing-title .gold { color: var(--shah-gold) }

.marketing-copy {
  max-width: 660px;
  margin: 20px 0 0;
  color: #c1cee0;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* ─── Buttons ─── */
.marketing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.shah-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 27px;
  border: 1px solid var(--shah-gold-border);
  border-radius: 999px;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 800;
  transition: transform .18s, filter .18s, background .18s;
  cursor: pointer;
}

.shah-button:hover,
.shah-button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.shah-button.gold {
  border-color: #f7d56f;
  background: linear-gradient(135deg, var(--shah-gold-light), var(--shah-gold) 50%, var(--shah-gold-deep));
  color: #071426;
  box-shadow: 0 10px 30px rgba(211, 154, 29, .28);
}

.shah-button.outline {
  background: rgba(3, 14, 32, .75);
  color: #fff;
}

.shah-button.muted {
  border-color: #34435a;
  background: #253043;
  color: #c5cfde;
}

/* ─── Section Shell ─── */
.section-shell {
  padding: 28px 0 22px;
  background: radial-gradient(circle at 70% 10%, rgba(21, 74, 147, .22), transparent 38%);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 34px;
}

.section-heading h1,
.section-heading h2 {
  margin: 0;
  font-size: clamp(2.3rem, 4vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.section-heading p {
  max-width: 540px;
  color: var(--shah-muted);
  line-height: 1.65;
}

/* ─── Cards ─── */
.shah-card {
  background: linear-gradient(180deg, rgba(10, 29, 56, .96), rgba(7, 20, 38, .96));
  border: 1px solid var(--shah-border);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .24);
}

.asset-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.asset-icon.small {
  width: 38px;
  height: 38px;
}

/* ─── Platform Cards (Apps page) ─── */
.platform-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.platform-card {
  min-height: 260px;
  padding: 30px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.platform-card h2,
.platform-card h3 {
  margin: 15px 0 7px;
  font-size: 1.12rem;
}

.platform-card p {
  margin: 0;
  color: var(--shah-muted);
  font-size: .82rem;
  line-height: 1.55;
}

.platform-card .shah-button {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 10px 14px;
  font-size: .78rem;
}

/* ─── Resource Cards (Downloads page) ─── */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.resource-card {
  min-height: 148px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.resource-card h3 {
  margin: 0 0 5px;
  font-size: .98rem;
}

.resource-card p {
  margin: 0;
  color: var(--shah-muted);
  font-size: .76rem;
}

.resource-card .shah-button {
  min-height: 40px;
  margin-top: 13px;
  padding: 8px 20px;
  font-size: .74rem;
}

/* ─── Wide Callout (Installation Video Guides) ─── */
.wide-callout {
  margin-top: 20px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.wide-callout-copy {
  display: flex;
  align-items: center;
  gap: 17px;
}

.wide-callout h3 {
  margin: 0 0 3px;
  font-size: .94rem;
}

.wide-callout p {
  margin: 0;
  color: var(--shah-muted);
  font-size: .76rem;
}

/* ─── Decorative Elements ─── */
.decorative-wave {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  opacity: .82;
}

.watermark {
  position: absolute;
  z-index: 0;
  width: min(620px, 54vw);
  opacity: .12;
  pointer-events: none;
}

/* ─── Device Stage (Apps page) ─── */
.device-stage {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
}

.device-stage:before {
  content: "";
  position: absolute;
  inset: 10% 2%;
  background: radial-gradient(circle, rgba(35, 104, 213, .25), transparent 63%);
}

/* ─── Video Preview (Watch page) ─── */
.video-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(242, 193, 78, .4);
  border-radius: 14px;
  background: linear-gradient(rgba(1, 8, 20, .14), rgba(1, 8, 20, .22)),
    url("backgrounds/hero_background_gallery_original.png") center/cover;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .4);
}

.video-preview .play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .45));
}

.video-preview-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .9));
}

/* ─── Feature Row (Watch page) ─── */
.feature-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 27px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature h3 {
  margin: 0 0 3px;
  font-size: .86rem;
}

.feature p {
  margin: 0;
  color: var(--shah-muted);
  font-size: .72rem;
}

/* ─── Support Page ─── */
.support-grid {
  display: grid;
  grid-template-columns: minmax(320px, .95fr) minmax(500px, 1.1fr);
  align-items: center;
  gap: 70px;
}

.support-search {
  position: relative;
  margin-top: 25px;
}

.support-search input {
  width: 100%;
  height: 50px;
  padding: 0 54px 0 20px;
  border: 1px solid #304866;
  border-radius: 999px;
  background: #071324;
  color: #fff;
  font: 400 .88rem Poppins;
}

.support-search img {
  position: absolute;
  right: 18px;
  top: 13px;
  width: 24px;
  height: 24px;
}

.support-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.support-option {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: #fff;
}

.support-option h3 {
  margin: 0 0 4px;
  font-size: .93rem;
}

.support-option p {
  margin: 0;
  color: var(--shah-muted);
  font-size: .73rem;
}

/* ─── Login Page ─── */
.login-showcase {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(430px, .72fr);
  align-items: center;
  gap: 50px;
  padding: 20px 0;
}

.login-panel {
  padding: 32px;
  border-color: rgba(242, 193, 78, .48);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4), 0 0 40px rgba(211, 154, 29, .08);
}

.login-panel h1 {
  margin: 0 0 22px;
  font-size: 1.35rem;
}

.input-with-icon {
  position: relative;
  margin-bottom: 13px;
}

.input-with-icon > img {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: .82;
}

.input-with-icon input {
  width: 100%;
  height: 47px;
  padding: 0 45px;
  border: 1px solid #263b56;
  border-radius: 8px;
  background: #101f35;
  color: #fff;
  font: 400 .82rem Poppins;
}

.input-with-icon input:not(.no-left-icon) {
  padding-left: 45px;
}

.input-with-icon .password-toggle {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 35px;
  height: 35px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.input-with-icon .password-toggle img {
  width: 20px;
  height: 20px;
}

.login-options {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 17px;
  color: var(--shah-muted);
  font-size: .7rem;
}

.login-options a {
  color: #e7c665;
  text-decoration: none;
}

.login-panel .shah-button {
  width: 100%;
  min-height: 45px;
  border-radius: 8px;
}

.login-bottom {
  text-align: center;
  margin-top: 13px;
  color: var(--shah-muted);
  font-size: .7rem;
}

.login-bottom a {
  color: var(--shah-gold);
  text-decoration: none;
  font-weight: 700;
}

/* ─── Form Error ─── */
.form-error {
  padding: 10px 12px;
  margin-bottom: 13px;
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 8px;
  background: rgba(127, 29, 29, .2);
  color: #fda4af;
  font-size: .76rem;
}

/* ─── Auth Watermark ─── */
.auth-watermark {
  left: 50%;
  bottom: 0;
  top: auto;
  transform: translateX(-50%);
  width: min(700px, 58vw);
  opacity: .08;
}

/* ─── Page Backgrounds ─── */
.apps-background {
  background: radial-gradient(circle at 62% 25%, rgba(21, 83, 173, .34), transparent 34%),
    linear-gradient(180deg, rgba(3, 12, 27, .3), #050b16),
    url("backgrounds/hero_background_dark_abstract.png") center/cover;
}

.watch-background {
  background: radial-gradient(circle at 65% 20%, rgba(21, 83, 173, .26), transparent 34%),
    #050b16;
}

.support-background {
  background: radial-gradient(circle at 65% 30%, rgba(21, 83, 173, .25), transparent 35%),
    #050b16;
}

/* ─── Exact Asset Overrides ─── */
.exact-device-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  clip-path: inset(0 0 0 3%);
}

.exact-player {
  overflow: visible;
  aspect-ratio: auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.exact-player > img {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════
   DESKTOP VIEWPORT (≥1051px)
   Header + Content + Footer fit together
   ═══════════════════════════════════════ */
@media (min-width: 1051px) {
  body.marketing-page {
    height: 100dvh;
    min-height: 650px;
    overflow: hidden;
  }

  .marketing-main {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .marketing-main > .marketing-hero,
  .marketing-main > .section-shell {
    min-height: 0;
    flex: 1 1 auto;
  }

  /* ─── Hero tuning ─── */
  .marketing-hero {
    padding: clamp(10px, 2vh, 28px) 0;
  }

  .section-shell {
    display: flex;
    align-items: center;
    padding: clamp(10px, 1.8vh, 24px) 0;
  }

  .marketing-grid {
    gap: clamp(32px, 3.5vw, 58px);
  }

  .marketing-title {
    font-size: clamp(2.55rem, 4.2vw, 4.75rem);
  }

  .marketing-copy {
    margin-top: 12px;
    line-height: 1.5;
  }

  .marketing-actions {
    margin-top: 18px;
  }

  /* ─── Apps page ─── */
  .device-stage {
    min-height: clamp(220px, 30vh, 310px);
  }

  .platform-cards {
    gap: 16px;
    margin-top: 6px;
  }

  .platform-card {
    min-height: 175px;
    padding: 16px 16px 14px;
  }

  .platform-card h2,
  .platform-card h3 {
    margin: 8px 0 4px;
    font-size: 1rem;
  }

  .platform-card .asset-icon {
    width: 40px;
    height: 40px;
  }

  .platform-card .shah-button {
    min-height: 36px;
    padding: 7px 12px;
    font-size: .74rem;
  }

  /* ─── Watch page ─── */
  .feature-row {
    margin-top: 16px;
  }

  /* ─── Login page ─── */
  .login-showcase {
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 2vh, 28px) 0;
  }

  /* ─── Apps Shell ─── */
  .apps-shell .marketing-wrap {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
  }

  .apps-hero-grid {
    grid-template-columns: minmax(300px, .65fr) minmax(620px, 1.35fr);
    gap: 30px;
  }

  .apps-hero-grid .marketing-title {
    font-size: clamp(2.5rem, 3.5vw, 3.8rem);
  }

  .apps-shell .device-stage {
    min-height: 220px;
  }

  .apps-shell .platform-cards {
    margin-top: 2px;
  }

  .apps-shell .platform-card {
    min-height: 170px;
  }

  /* ─── Watch Shell ─── */
  .watch-background .marketing-grid {
    grid-template-columns: minmax(420px, .78fr) minmax(580px, 1.22fr);
    gap: 36px;
  }

  .watch-background .marketing-title {
    font-size: clamp(2.6rem, 3.6vw, 4rem);
  }

  /* ─── Support page ─── */
  .support-background .marketing-hero {
    align-items: center;
    padding: clamp(6px, 1.5vh, 20px) 0;
  }

  .support-grid {
    gap: 50px;
  }

  /* ─── Downloads page ─── */
  .section-heading {
    margin-bottom: 22px;
  }

  .resource-grid {
    gap: 14px;
  }

  .resource-card {
    min-height: 120px;
    padding: 16px;
  }

  .wide-callout {
    margin-top: 14px;
    padding: 14px 22px;
  }
}

/* ═══════════════════════════════════════
   TABLET (≤1050px)
   ═══════════════════════════════════════ */
@media (max-width: 1050px) {
  body.marketing-page {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }

  .marketing-grid,
  .support-grid,
  .login-showcase {
    grid-template-columns: 1fr;
  }

  .marketing-hero {
    padding: 52px 0;
  }

  .device-stage {
    min-height: 380px;
  }

  .platform-cards,
  .resource-grid {
    grid-template-columns: 1fr 1fr;
  }

  .login-showcase {
    padding: 55px 0;
  }

  .login-panel {
    width: min(520px, 100%);
  }

  .auth-watermark {
    right: 4%;
  }

  .feature-row {
    grid-template-columns: 1fr 1fr;
  }

  .exact-device-art {
    max-width: 720px;
    margin: auto;
  }
}

/* ═══════════════════════════════════════
   MOBILE (≤700px)
   ═══════════════════════════════════════ */
@media (max-width: 700px) {
  .marketing-wrap {
    width: calc(100% - 28px);
  }

  .marketing-hero {
    min-height: 0;
    padding: 45px 0;
  }

  .marketing-grid {
    gap: 38px;
  }

  .marketing-title {
    font-size: 2.75rem;
  }

  .marketing-copy {
    font-size: .94rem;
  }

  .section-shell {
    padding: 40px 0 50px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .platform-cards,
  .resource-grid,
  .support-options,
  .feature-row {
    grid-template-columns: 1fr;
  }

  .wide-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .device-stage {
    min-height: 270px;
  }

  .login-showcase {
    min-height: auto;
    padding: 42px 0;
  }

  .login-panel {
    padding: 22px;
  }

  .support-grid {
    gap: 35px;
  }
}