/* =========================
   FONT LOADING (placeholders)
   Drop your woff2 files in /assets/fonts/ with these names
========================= */
@font-face {
    font-family: "SchmaltzyBook";
    src: url("./assets/fonts/SchmaltzyBook.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "GTPressuraLight";
    src: url("./assets/fonts/GTPressuraLight.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "GTPressuraMonoRegular";
    src: url("./assets/fonts/GTPressuraMonoRegular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "GTPressuraMonoBold";
    src: url("./assets/fonts/GTPressuraMonoBold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* =========================
     THEME
  ========================= */
  :root {
    --bg: #0b0b0b;          /* slightly lifted off black */
    --black: #000000;
    --white: #ffffff;
    --stroke: rgba(255,255,255,.65);
    --muted: rgba(255,255,255,.78);
    --muted2: rgba(255,255,255,.65);
    --yellow: #f3ea72;      /* bright yellow button */
    --shadow: 0 0 0 1px rgba(255,255,255,.10), 0 30px 80px rgba(0,0,0,.55);
    --radius: 28px;
    --max: 980px;
  }
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  
  body {
    margin: 0;
    background: radial-gradient(1200px 800px at 50% 0%, rgba(255,255,255,.05), transparent 55%),
                var(--bg);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
  
  /* =========================
     HERO
  ========================= */
  .hero {
    width: 100%;
    background: #050505;
  }
  
  .hero__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
  }
  
  /* =========================
     LOGO BAR
  ========================= */
  .logoBar {
    background: var(--black);
    display: flex;
    justify-content: center;
    padding: 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  
  .logoBar__logo {
    height: auto;
    width: min(900px, 92vw);   /* controls how wide it can get */
    max-height: 100px;          /* safety cap so it doesn't get too tall */
    object-fit: contain;
    display: block;
  }
  
  
  /* =========================
     PAGE LAYOUT
  ========================= */
  .page {
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px 18px 60px;
    display: grid;
    gap: 26px;
  }
  
  /* =========================
     CARD (rounded rectangle)
  ========================= */
  .card {
    position: relative;
    background: var(--black);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 34px 22px 26px;
    overflow: hidden;
    text-align: center;
  }
  
  @media (min-width: 720px) {
    .card { padding: 44px 44px 34px; }
  }
  
  /* small cross design element top-right */
  .card__cross {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 18px;
    height: 18px;
    opacity: .9;
  }
  
  .card__cross span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,.9);
    transform: translate(-50%, -50%);
  }
  
  .card__cross span:last-child {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  
  /* =========================
     TYPOGRAPHY
  ========================= */
  .hSchmaltzy {
    margin: 0 0 12px;
    font-family: "SchmaltzyBook", Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-size: 32px;
    line-height: 1.05;
    text-align: center;
  }
  
  @media (min-width: 720px) {
    .hSchmaltzy { font-size: 44px; }
  }
  
  .subLight {
    margin: 0 0 26px;
    font-family: "GTPressuraLight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 300;
    color: var(--muted);
    text-align: center;
    font-size: 18px;
    line-height: 1.45;
  }
  
  .subLight--tight { margin: 18px 0 16px; }
  
  /* =========================
     PACKAGES
  ========================= */
  .packages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 10px;
  }
  
  @media (min-width: 720px) {
    .packages {
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
    }
  }
  
  .package {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    padding: 22px 18px 18px;
    background: radial-gradient(700px 240px at 50% 0%, rgba(255,255,255,.05), transparent 55%),
                rgba(0,0,0,.92);
    display: grid;
    justify-items: center;
    gap: 12px;
  }
  
  .pkgTitle {
    margin: 6px 0 0;
    font-family: "GTPressuraMonoRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 20px;
  }
  
  .pkgPrice {
    margin: 0;
    font-family: "GTPressuraMonoBold", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
  }
  
  .pkgCopy {
    margin: 0 0 6px;
    font-family: "GTPressuraMonoRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 400;
    color: var(--muted2);
    text-align: center;
    line-height: 1.35;
  }
  
  /* =========================
     BUTTON
  ========================= */
  .btnYellow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    background: var(--yellow);
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 0px; /* sharp rectangle like your comp */
    color: #000;
    text-decoration: none;
    font-family: "GTPressuraMonoBold", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 700;
    letter-spacing: .5px;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
    user-select: none;
  }
  
  .btnYellow:hover { transform: translateY(-1px); filter: brightness(1.02); }
  .btnYellow:active { transform: translateY(0px); filter: brightness(.99); }
  .btnYellow:focus-visible { outline: 2px solid rgba(243,234,114,.8); outline-offset: 3px; }
  
  .btnYellow--wide {
    display: flex;                 /* keep text centered inside */
    width: min(520px, 100%);
    margin: 0 auto;                /* centers it */
  }
  
  
  /* =========================
     TICKER
  ========================= */
  .ticker {
    background: var(--black);
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
    border-radius: 16px;
  }
  
  .ticker__track {
    display: flex;
    gap: 48px;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    padding: 14px 0;
  }
  
  .ticker__text {
    font-family: "GTPressuraMonoRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    color: rgba(255,255,255,.82);
    padding-left: 18px;
  }
  
  /* =========================
     TESTIMONIALS
  ========================= */
  .testimonials {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 6px;
  }
  
  .tQuote {
    margin: 0;
    max-width: 720px;
    text-align: center;
    font-family: "GTPressuraLight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: var(--muted);
  }
  
  .tName {
    margin: 0 0 14px;
    font-family: "GTPressuraLight", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-style: italic;
    color: rgba(255,255,255,.72);
  }
  
  /* =========================
     FOOTER
  ========================= */
  .footer {
    padding: 26px 18px 40px;
    color: rgba(255,255,255,.55);
    font-family: "GTPressuraMonoRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
  }
  
  .footer__inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }