/* ═══════════════════════════════════════════════
   BRAND COLOR TOKENS
   — Edit these variables to retheme the entire page —
═══════════════════════════════════════════════ */
:root {
  --color-gradient-start : #FF275C;       /* PRIMARY COLOR   */
  --color-gradient-end   : #FF3100;       /* SECONDARY COLOR */

  --color-badge          : #2EC4B6;       /* BADGE BORDER / ORNAMENT COLOR */
  --color-accent         : #FFD166;       /* ACCENT COLOR  — e.g. highlights */

  --color-btn-bg         : #FFFFFF;       /* DOWNLOAD BUTTON BACKGROUND */
  --color-btn-text       : var(--color-gradient-start); /* BUTTON TEXT COLOR */

  --color-text           : #FFFFFF;       /* BODY TEXT */
  --color-sub            : rgba(255, 255, 255, 0.75); /* SUBTITLE / LIGHT TEXT */

  /* ── Typography ── */
  --font-main      : 'Gilroy',  sans-serif;   /* MAIN FONT FAMILY   */
  --font-secondary : 'Akshar',  sans-serif;   /* SECONDARY FONT FAMILY */
}


/* ═══════════════════════════════════════════════
   FONT FACES
═══════════════════════════════════════════════ */
@font-face {
  font-family : 'Gilroy';
  src         : url('fonts/Gilroy-Black.ttf') format('truetype');
  font-weight : 900;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family : 'Akshar';
  src         : url('fonts/Akshar-Bold.ttf') format('truetype');
  font-weight : 700;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family : 'Akshar';
  src         : url('fonts/Akshar-Light.ttf') format('truetype');
  font-weight : 300;
  font-style  : normal;
  font-display: swap;
}


/* ═══════════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

html, body {
  width      : 100%;
  min-height : 100%;
  scroll-behavior: smooth;
}

body {
  font-family : var(--font-secondary);
  color       : var(--color-text);
  overflow-x  : hidden;
}


/* ═══════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════ */
.hero {
  position   : relative;
  min-height : 100vh;
  width      : 100%;
  overflow   : hidden;

  /* Main gradient background */
  background : linear-gradient(
    135deg,
    var(--color-gradient-start) 0%,
    var(--color-gradient-end)   100%
  );
}

/* Texture.jpg overlaid on gradient */
.texture-overlay {
  position        : absolute;
  inset           : 0;
  width           : 100%;
  height          : 100%;
  object-fit      : cover;
  mix-blend-mode  : overlay;
  opacity         : 0.14;
  pointer-events  : none;
  z-index         : 0;
  user-select     : none;
}

/* Two-column layout container */
.hero-container {
  position         : relative;
  z-index          : 1;
  display          : grid;
  grid-template-columns : 1fr 1fr;
  min-height       : 100vh;
  align-items      : center;
}


/* ═══════════════════════════════════════════════
   LEFT PANEL — Phone + Badge + Visual GIF
═══════════════════════════════════════════════ */
.hero-left {
  position        : relative;
  display         : flex;
  justify-content : center;
  align-items     : center;
  padding         : 4rem 2rem 4rem 4rem;
  min-height      : 100vh;
}

/* Wrapper gives us a coordinate space for the absolutely-placed badge */
.phone-wrap {
  position : relative;
  display  : inline-block;

  /* Slide in from the left on load */
  animation         : slideInLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* Phone mockup image */
.phone-img {
  display      : block;
  max-height   : 78vh;
  width        : auto;
  max-width    : 100%;
  transform    : rotate(-5deg);
  filter       : drop-shadow(0 30px 80px rgba(0, 0, 0, 0.45));
  position     : relative;
  z-index      : 1;
}

/* Circular badge — overlapping the top-left corner of the phone */
.badge {
  position   : absolute;
  top        : -35px;
  left       : -55px;
  z-index    : 2;
  width      : 150px;
  height     : auto;
  display    : block;
}


/* ═══════════════════════════════════════════════
   RIGHT PANEL — Content stack
═══════════════════════════════════════════════ */
.hero-right {
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  text-align      : center;
  gap             : 1.8rem;
  padding         : calc(4rem - 50px) 4rem 4rem 2rem;
}

/* Logo */
.hero-logo {
  display   : block;
  max-width : 486px;
  width     : 100%;
  height    : auto;
}

/* Headline */
.hero-headline {
  font-family    : var(--font-main);
  font-weight    : 900;
  font-size      : clamp(3rem, 5.5vw, 5.8rem);
  line-height    : 1.0;
  color          : var(--color-text);
  letter-spacing : -0.02em;
  text-transform : uppercase;
}

/* Download CTA button */
.hero-btn {
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  gap              : 0.5rem;

  background       : var(--color-btn-bg);
  color            : var(--color-btn-text);
  font-family      : var(--font-main);
  font-weight      : 900;
  font-size        : 1.05rem;
  letter-spacing   : 0.02em;
  text-decoration  : none;
  white-space      : nowrap;

  padding          : 1rem 2.6rem;
  border-radius    : 100px;  /* pill */

  box-shadow       : 0 8px 32px rgba(0, 0, 0, 0.18);
  transition       : transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                     box-shadow 0.25s ease;
}

.hero-btn:hover {
  transform  : scale(1.07);
  box-shadow : 0 14px 45px rgba(0, 0, 0, 0.28);
}

.hero-btn:active {
  transform  : scale(0.98);
}

/* ═══════════════════════════════════════════════
   DELIVERY CALLOUT — Arrow + FREE DELIVERY row
═══════════════════════════════════════════════ */
.delivery-callout {
  display     : flex;
  align-items : center;
  gap         : 1rem;
  margin-top  : -0.4rem;
}

/* Arrow.svg — head at top-left, tail at bottom-right.
   Flip + rotate so the head curves upward toward the button above. */
.arrow-img {
  width         : 60px;
  height        : auto;
  flex-shrink   : 0;
  transform     : rotate(70deg);
  align-self    : flex-start;
  margin-top    : -0.8rem;
}

/* Text block: FREE DELIVERY + subtitle */
.delivery-text {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 0.1rem;
}

.free-delivery-label {
  font-family    : var(--font-main);
  font-weight    : 900;
  font-size      : clamp(1.8rem, 3.5vw, 3.2rem);
  color          : var(--color-text);
  line-height    : 1;
  letter-spacing : 0.01em;
  text-transform : uppercase;
}

.free-delivery-sub {
  font-family    : 'Akshar', sans-serif;
  font-weight    : 300;
  font-size      : clamp(0.75rem, 1.4vw, 1.05rem);
  color          : var(--color-text);
  text-transform : uppercase;
  letter-spacing : 0.04em;
  line-height    : 1.2;
}


/* ═══════════════════════════════════════════════
   STAGGERED FADE-IN-UP ANIMATIONS (right side)
   Each .anim element reads --i (0, 1, 2, 3…)
   to compute its own delay.
═══════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity   : 0;
    transform : translateY(28px);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity   : 0;
    transform : translateX(-40px);
  }
  to {
    opacity   : 1;
    transform : translateX(0);
  }
}



/* Staggered reveal for right-side elements */
.anim {
  opacity          : 0;
  animation        : fadeInUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay  : calc(var(--i, 0) * 0.18s + 0.25s);
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — Tablet (769px–1024px)
═══════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero-container {
    grid-template-columns : 1fr 1fr;
    gap                   : 0;
  }

  .hero-left {
    padding : 3rem 1.5rem 3rem 2.5rem;
  }

  .phone-img {
    max-height : 68vh;
  }

  .hero-right {
    padding : 3rem 2.5rem 3rem 1.5rem;
    gap     : 1.4rem;
  }

  .hero-logo {
    max-width : 340px;
  }

  .hero-headline {
    font-size : clamp(2.4rem, 4.5vw, 4rem);
  }

  .free-delivery-label {
    font-size : clamp(1.5rem, 3vw, 2.4rem);
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — Mobile: phone stacks above content
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    min-height : 100svh;
  }

  .hero-container {
    grid-template-columns : 1fr;
    grid-template-rows    : 1fr;
    min-height            : 100svh;
    align-items           : center;
  }

  .hero-left {
    display : none;
  }

  .hero-right {
    order       : 1;
    padding     : 3rem 2rem 4rem;
    gap         : 1.4rem;
    align-items : center;
    text-align  : center;
  }

  .hero-logo {
    max-width : 260px;
  }

  .hero-headline {
    font-size : clamp(2rem, 7.5vw, 2.8rem);
  }

  .hero-btn {
    font-size : 0.95rem;
    padding   : 0.85rem 2rem;
  }

  .delivery-callout {
    margin-top : 0;
    position   : relative;
    justify-content : center;
  }

  .arrow-img {
    position : absolute;
    left     : -30px;
    top      : 0;
    width    : 44px;
  }

  .free-delivery-label {
    font-size : clamp(1.4rem, 6vw, 2rem);
  }

  .free-delivery-sub {
    font-size : clamp(0.7rem, 3vw, 0.9rem);
  }
}


/* ═══════════════════════════════════════════════
   RESPONSIVE — Small phones (≤ 390px)
═══════════════════════════════════════════════ */
@media (max-width: 390px) {
  .hero-right {
    padding : 2rem 1.2rem 3rem;
    gap     : 1rem;
  }

  .hero-logo {
    max-width : 220px;
  }

  .hero-headline {
    font-size : 1.85rem;
  }

  .hero-btn {
    font-size : 0.88rem;
    padding   : 0.75rem 1.6rem;
  }

  .free-delivery-label {
    font-size : 1.3rem;
  }
}