/* =========================================================
   LANDING / HERO - FULLY RESPONSIVE
   Smooth scaling from 320px to 2560px+
   ========================================================= */

/* ---------------------------------------------------------
   DUAL HERO VISIBILITY
   Desktop: .logo-stage + .hero-row
   Mobile: .hero-stack
   --------------------------------------------------------- */

/* Desktop default: hide mobile hero */
.hero-stack {
  display: none;
}

/* Desktop default: show desktop hero */
.logo-stage,
.hero-row {
  display: block;
}

/* ---------------------------------------------------------
   DESKTOP HERO BASE
   --------------------------------------------------------- */
.hero {
  min-height: 82vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 4vh, 20px) 24px clamp(80px, 10vh, 120px);
  background: #ffffff;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  box-sizing: border-box;
}

.hero-col {
  width: min(1220px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
}

/* ---------------------------------------------------------
   LOGO STAGE (desktop)
   --------------------------------------------------------- */
.logo-stage {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: clamp(180px, 25vw, 350px);
}

.hero-logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

.hero-logo-text {
  margin: 0;
  width: 100%;
  text-align: center;

  font-family: var(--brand-font);
  font-weight: 800;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  line-height: 1.05;

  font-size: clamp(88px, 27vw, 290px);

  color: #0a0a0b;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transform: translateX(-4%);
}

/* Desktop ghost text (hidden by default, shown only in mobile) */
.hero-logo-ghost {
  display: none;
}

/* ---------------------------------------------------------
   FLOATING ICONS (desktop)
   --------------------------------------------------------- */
.float-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ficon {
  position: absolute;
  width: clamp(70px, 7vw, 90px);
  height: clamp(70px, 7vw, 90px);
  border-radius: 50%;

  background: rgba(132, 255, 10, 0.48);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);

  display: grid;
  place-items: center;
  transform: translateZ(0);
  will-change: transform;
}

.ficon .ico {
  width: clamp(32px, 3.5vw, 42px);
  height: clamp(32px, 3.5vw, 42px);
  stroke-width: 2;
}

/* Desktop icon positions */
.float-icons .i1 {
  left: 18%;
  top: 24%;
}

.float-icons .i2 {
  left: 42%;
  top: 6%;
}

.float-icons .i3 {
  right: 18%;
  top: 20%;
}

.float-icons .i4 {
  right: 10%;
  top: 44%;
}

.float-icons .i5 {
  left: 10%;
  top: 68%;
}

/* ---------------------------------------------------------
   DESKTOP CONTENT ROW
   --------------------------------------------------------- */
.hero-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(auto, 1fr) minmax(
      420px,
      500px
    );
  align-items: start;
  gap: clamp(38px, 5vw, 48px);
}

/* Left: Checklist */
.hero-left {
  display: flex;
  justify-content: flex-start;
  border-radius: 16px;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgb(246, 246, 246);
  width: fit-content;
  font-size: 15px;
  transition: background 0.2s ease;
}

.check:hover {
  background: rgb(235, 235, 235);
}

.check-dot {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tick-green-bg);
  border: 1px solid var(--tick-green-border);
  color: var(--tick-green);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Middle: CTA */
.hero-mid {
  display: flex;
  justify-content: center;
  padding-top: 2px;
  padding-right: 24px;
  border-radius: 16px;
}

.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 66px;
  padding: 25px 90px 25px 60px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
    color 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
    transform 0.25s ease,
    box-shadow 0.35s ease;
}

.cta-pill:hover {
  background: #a0e92a;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.cta-text {
  display: inline-block;
  white-space: nowrap;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
    opacity 0.45s ease;
}

.cta-pill:hover .cta-text {
  transform: translateX(28px);
}

.cta-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  font-size: 20px;
  font-weight: 200;
  transition:
    right 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
    background 0.45s ease,
    color 0.45s ease;
}

.cta-pill:hover .cta-icon {
  right: calc(100% - 58px);
}

/* Right: Copy */
.hero-right {
  display: flex;
  flex-direction: column;
  gap: 18px;

  /* padding: 24px; */
  border-radius: 16px;
}

.hero-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 37px);
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.06em;
}

.hero-sub {
  margin: 0;
  color: rgba(8, 8, 8, 0.96);
  font-weight: 450;
  font-size: clamp(17px, 1.5vw, 18px);
  line-height: 1.4;
}

/* ---------------------------------------------------------
   LARGE DESKTOP (1400px+)
   --------------------------------------------------------- */
@media (min-width: 1400px) {
  .hero-row {
    grid-template-columns: 340px 1fr 540px;
    gap: 80px;
  }
}

/* ---------------------------------------------------------
   DESKTOP TABLET (1024px and below)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-row {
    grid-template-columns: 260px 1fr 400px;
    gap: 32px;
  }

  .ficon {
    width: clamp(56px, 6vw, 70px);
    height: clamp(56px, 6vw, 70px);
  }

  .ficon .ico {
    width: clamp(26px, 3vw, 32px);
    height: clamp(26px, 3vw, 32px);
  }

  .cta-pill {
    height: 60px;
    padding: 22px 80px 22px 50px;
    font-size: 20px;
  }

  .cta-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

/* ---------------------------------------------------------
   MOBILE SWITCH (860px and below)
   --------------------------------------------------------- */
@media (max-width: 880px) {
  /* Toggle visibility */
  .hero-stack {
    display: flex !important;
  }

  .logo-stage,
  .hero-row {
    display: none !important;
  }

  /* Mobile hero spacing */
  .hero {
    min-height: auto;
    padding: clamp(80px, 20vw, 100px) 18px 40px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .hero-col {
    align-items: stretch;
    gap: 22px;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Mobile stack layout */
  .hero-stack {
    width: 100%;
    max-width: min(540px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vw, 12px);
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* ---------------------------------------------------------
     MOBILE ICONS ROW
     --------------------------------------------------------- */
  .hero-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(-20px, -12vw, -20px);
  }

  .hero-icons .ficon {
    position: relative;
    width: clamp(54px, 13vw, 72px);
    height: clamp(54px, 13vw, 72px);
    z-index: 3;
  }

  .hero-icons .ficon + .ficon {
    margin-left: clamp(-14px, -3vw, -10px);
  }

  .hero-icons .ico {
    width: clamp(26px, 6vw, 36px);
    height: clamp(26px, 6vw, 36px);
  }

  /* Remove absolute positioning on mobile */
  .hero-icons .i1,
  .hero-icons .i2,
  .hero-icons .i3,
  .hero-icons .i4,
  .hero-icons .i5 {
    left: auto;
    right: auto;
    top: auto;
    position: relative;
  }

  /* ---------------------------------------------------------
     MOBILE LOGO + GHOST TEXT
     --------------------------------------------------------- */
  .hero-logo-block {
    position: relative;
    /* padding: clamp(6px, 1.5vw, 10px) 0; */
  }

  .hero-logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
    /* padding-top: -10px; */
  }

  .hero-logo-text {
    font-size: clamp(68px, 19vw, 162px);
    line-height: 0.95;
    position: relative;
    z-index: 2;
    transform: translateX(0%);
  }

  /* Show ghost text on mobile */
  .hero-logo-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.04;
    filter: blur(0.2px);
    font-family: var(--brand-font);
    font-weight: 800;
    letter-spacing: -0.06em;
    text-transform: lowercase;
    white-space: nowrap;
    font-size: clamp(60px, 15vw, 118px);
    line-height: .65;
    pointer-events: none;
    z-index: 1;
  }

  .hero-logo-ghost::after {
    content: attr(data-word);
  }

  .ghost-top {
    top: clamp(-30px, -7vw, -40px);
  }

  .ghost-bottom {
    bottom: clamp(-30px, -7vw, -40px);
  }

  /* ---------------------------------------------------------
     MOBILE COPY
     --------------------------------------------------------- */
  .hero-copy {
    text-align: left;
    padding-top: 50px;
  }

  .hero-copy .hero-title {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.2;
    font-weight: 300;
    margin-bottom: 12px;
  }

  .hero-copy .hero-sub {
    font-size: clamp(14px, 4vw, 19px);
    line-height: 1.45;
    font-weight: 300;
    max-width: 42ch;
  }

  /* ---------------------------------------------------------
     MOBILE CHECKLIST
     --------------------------------------------------------- */
  .hero-benefits {
    display: flex;
    justify-content: flex-start;
  }

  .hero-benefits .checklist {
    padding-top: 6px;
    gap: 10px;
  }

  .hero-benefits .check {
    width: fit-content;
    font-size: clamp(13px, 3.6vw, 42px);
    padding: clamp(1px, 2.5vw, 6px) clamp(12px, 3.5vw, 14px);
  }

  /* ---------------------------------------------------------
     MOBILE CTA
     --------------------------------------------------------- */
  .hero-cta {
    padding-top: 10px;
  }

  .hero-cta .cta-pill {
    width: 100%;
    justify-content: center;
    height: 56px;
    padding: 0 68px 0 24px;
    font-size: clamp(17px, 4.5vw, 22px);
  }

  .hero-cta .cta-icon {
    width: 42px;
    height: 42px;
    right: 7px;
    font-size: clamp(16px, 4vw, 20px);
  }

  .hero-cta .cta-pill:hover .cta-icon {
    right: calc(100% - 49px);
  }
}

/* ---------------------------------------------------------
   SMALL MOBILE (480px and below)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .hero {
    padding: 76px 16px 32px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .hero-stack {
    gap: 16px;
  }

  .hero-icons {
    gap: 6px;
  }

  .ghost-top {
    top: -26px;
  }

  .ghost-bottom {
    bottom: -26px;
  }
}

/* ---------------------------------------------------------
   EXTRA SMALL (360px and below)
   --------------------------------------------------------- */
@media (max-width: 360px) {
  .hero {
    padding: 70px 14px 28px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .hero-logo-text {
    font-size: clamp(56px, 16vw, 68px);
  }

  .hero-logo-ghost {
    font-size: clamp(50px, 14vw, 60px);
  }

  .check {
    padding: 10px 13px;
    font-size: 13px;
  }

  .check-dot {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .ghost-top {
    top: -24px;
  }

  .ghost-bottom {
    bottom: -24px;
  }

  .hero-icons .ficon {
    width: 40px;
    height: 40px;
  }

  .hero-icons .ico {
    width: 18px;
    height: 18px;
  }
}

/* ---------------------------------------------------------
   MOBILE: disable CSS hover, enable tap animation
   --------------------------------------------------------- */
@media (max-width: 880px) {
  .cta-pill:hover {
    background: #000;
    color: #fff;
    transform: none;
    box-shadow: none;
  }

  .cta-pill:hover .cta-text { transform: none; }
  .cta-pill:hover .cta-icon { right: 6px; }

  .cta-pill.is-tapped {
    background: #a0e92a;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  }

  .cta-pill.is-tapped .cta-text { transform: translateX(28px); }
  .hero-cta .cta-pill.is-tapped .cta-icon { right: calc(100% - 49px); }
}