/* Pingal responsive landing — mobile-first */
/* Base tokens (no CSS variables per user request) */
@layer reset, base, layout, components, utilities;

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html:focus-within { scroll-behavior: smooth; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; }
  a { text-decoration: none; color: inherit; }
}

/* ---------- Base ---------- */
@layer base {

body {
  background: linear-gradient(180deg, #FFFAF8 0%, #F4CCBA 100%);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 22, 0.72);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: -1;
}

  html { font-size: 20px; }
  body {
    font-family: "Karma", serif;
    background: linear-gradient(180deg, #FFFAF8 0%, #F4CCBA 100%);
    color: rgba(152, 60, 16, 1);
    line-height: 1.35;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .container {
    width: min(1140px, 92%);
    margin-inline: auto;
  }
  .accent { color: #FF9432; }
}

/* ---------- Layout ---------- */
@layer layout {
  .header {
    padding: 1rem 0;
    display: flex;
    align-items: center;
  }
  .brand {
    display: inline-flex;
    align-items: flex-end;
    gap: .6rem;
  }
  .brand-mark {     
    width: 288px;
    height: 106px; 
  }
  .brand-type { height: 60px; }

  .hero {
    position: relative;
    overflow: clip;
    /* background: #1a1730; */
    background: linear-gradient(180deg, #FFFAF8 0%, #F4CCBA 100%);
    padding: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  /* hero__bg removed */

  .hero__content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    flex: 1;
  }

  .hero__title {
    font-weight: 700;
    font-size: clamp(2rem, 7vw, 3.4rem);
    letter-spacing: 0.5px;
    /* text-shadow: 0 2px 0 rgba(0,0,0,.2); */
  }
  .hero__title .break { display: inline-block; }

  .hero__right {
    height: auto;
    display: flex;
    align-items: flex-end;
  }

  .play-btn {
    margin-top: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    background: #ffffff;
    color: #111;
    padding: .6rem .9rem;
    border-radius: .6rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .play-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
  .play-icon {
    width: 26px; height: 26px; flex: none;
    background: conic-gradient(from 120deg, #34a853 0 25%, #4285f4 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
    border-radius: 3px;
    filter: saturate(.9) brightness(.95) contrast(1.1);
  }
  .play-text small { font-size: .6rem; letter-spacing: .08em; color: #666; }
  .play-text { font-weight: 600; line-height: 1; }

  .phones {
    position: relative;
    width: min(580px, 100%);
    margin-inline: auto;
  }
  .phone {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  }
  .phone--web {
    width: 100%;
    height: auto;
  }

  .footer {
    background: rgba(48, 21, 7, 1);
    color: #EFE8FF;
    margin-top: 0;
  }
  .footer__bar {
    height: 8px;
    background: #FF9432;
  }
  .footer__content {
    padding: 2rem 3rem;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-items: center;
    text-align: center;
  }
  .footer__content .brand-mark {
    align-self: flex-start;;
  }
  .footer__content .footer__links__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  .footer__links {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    opacity: .95;
  }
  .footer__links a { color: #EFE8FF; }
  .footer__links a:hover { text-decoration: underline; }
  .footer__copy { font-size: .9rem; opacity: .9; }
  .footer__copy a { color: #EFE8FF; text-decoration: underline; }

  .footer__logo__container {
    display: flex;
    justify-content: flex-start;
    justify-self: flex-start;
    align-self: flex-start;
    align-items: center;
    gap: 16px;
  }
}

/* ---------- Desktop & larger breakpoints ---------- */
@layer utilities {
  @media (min-width: 1024px) {
    .hero { padding: 1.2rem 0 0rem; }
    .hero__content {
      /* grid-template-columns: 1.05fr 1fr;
      gap: 2.2rem; */
      /* min-height: 540px; */
      display: flex;
      align-items: center;
    }
    .hero__left { padding-right: 1rem; }
    .hero__right { align-self: flex-end; }
    .hero {height: auto;}
    .hero__title { font-size: clamp(3rem, 3.6vw, 4rem); }
    .phones { width: 100%; aspect-ratio: auto; height: auto;}
    .phone { width: 728px;}
    .phone--front { left: 8%; bottom: -8%; }
    .phone--back  { right: 0; top: -8%; transform: translate(8%, 10%); }
    .footer__content {
      grid-template-columns: 1fr auto;
      text-align: left;
      justify-items: stretch;
      align-items: center;
    }
    .footer__links { justify-content: flex-start; font-size: 16px; font-family: 'Teko'; }
    .footer__copy { justify-self: end; text-align: right; font-size: 16px; }
  }
}


.play-btn { position: relative; z-index: 5; }

@media (max-width: 480px) {
  .phones { margin-top: 2.5rem; }
  .brand-mark {         
    width: 200px;
    height: 73px; 
  }
  .brand-type { height: 42px; }
  .brand { gap: 1rem; margin-left: 16px; }
  .hero__content { gap: 0; }
  .hero__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .play-btn {
    max-width: 200px;
  }
  .footer__content {
    padding: 32px 16px;
  }
  .footer__content .footer__links__container {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer__links { font-size: 16px; font-family: 'Teko'; }
  .footer__copy { text-align: left; font-size: 16px; margin-top: 8px; }
}