* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  width: 100%;
  min-height: 100vh;
}
/* ===================== Page ===================== */
.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

/* ===================== Hero Section ===================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  display: flex;
  flex-direction: column;
}

/* Background */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -40%;
  z-index: 0;
  background: #fff;
}

/* SVG blob group — stacked for color intensity */
.bg-blob-group {
  position: absolute;
  inset: 0;
}

/* SVG blob layers — fill container, overflow visible for blur bleed */
.bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Blob container — fixed to hero viewport, not the extended hero-bg */
.hero-bg-blobs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  min-height: 700px;
  filter: blur(2px);
}

/* Vertical glass strips */
.glass-strips {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
}

.glass-strip {
  flex: 0 0 96px;
  height: 100%;
  backdrop-filter: blur(144px);
  -webkit-backdrop-filter: blur(144px);
  background: linear-gradient(
    to right,
    rgba(204, 204, 204, 0.015),
    rgba(242, 242, 242, 0.105) 67%,
    rgba(204, 204, 204, 0.015)
  );
}

/* White fade — two overlapping layers at page level, matching Figma Rect 149 & 150 */
.page-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

.page-fade-tall {
  height: 600px;
  z-index: 3;
}

.page-fade-short {
  height: 300px;
  z-index: 4;
}

/* ===================== Header ===================== */
.header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 45px 300px 0;
  height: 80px;
}

.header-logo {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo img {
  width: 68px;
  height: 50px;
  transform: rotate(-5deg);
}

.header-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 58px;
  background: #fff;
  border-radius: 20px;
  font-size: 24px;
  color: #000;
  text-decoration: none;
  font-weight: 400;
  transition: box-shadow 0.2s;
}

.header-download-btn:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* ===================== Hero Content ===================== */
.hero-content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 80px;
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.hero-logo-box {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 38.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-logo-icon {
  width: 107px;
  height: 77px;
  transform: rotate(-5deg);
}

.hero-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 100px;
  color: #fff;
  line-height: 1.2;
  margin: 0;
}

.hero-tagline {
  font-size: 34px;
  color: #fff;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 60px;
}

/* ===================== Download Buttons ===================== */
.hero-buttons {
  display: flex;
  gap: 60px;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 408px;
  height: 114px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  padding: 0 40px;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
}

.download-card:hover {
  background: rgba(255, 255, 255, 0.22);
}

.download-card-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.download-card-icon img {
  width: 100%;
  height: 100%;
}

.download-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.download-card-label {
  font-size: 20px;
  color: #ddd;
  line-height: 1.4;
}

.download-card-store {
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
}

/* Mobile-only text — hidden on desktop */
.download-card-mobile {
  display: none;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 20px;
}

/* Mobile mockups — hidden on desktop */
.mobile-mockups {
  display: none;
}

/* Mobile background image — hidden on desktop */
.mobile-bg-img {
  display: none;
}

/* ===================== Footer ===================== */
.footer {
  position: relative;
  width: 100%;
  background: transparent;
  padding: 84px 300px 60px;
  z-index: 5;
}

.footer-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-logo-box {
  width: 46px;
  height: 46px;
  background: #000;
  border-radius: 13.269px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-logo-box img {
  width: 40px;
  height: 29px;
  transform: rotate(-5deg);
}

.footer-brand-name {
  font-family: 'Inter', -apple-system, 'PingFang SC', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #000;
  line-height: 45px;
}

.footer-company {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
  line-height: 40px;
}

.footer-quote {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-style: italic;
  color: rgba(0, 0, 0, 0.3);
  line-height: 42px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-copyright {
  font-size: 18px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3);
  line-height: 36px;
}

/* ===================== Responsive — 1440 (0.75x) ===================== */
@media (max-width: 1600px) {
  .header {
    padding: 33.75px 225px 0;
    height: 60px;
  }
  .header-logo {
    width: 60px;
    height: 60px;
  }
  .header-logo img {
    width: 51px;
    height: 37.5px;
  }
  .header-download-btn {
    width: 135px;
    height: 43.5px;
    border-radius: 15px;
    font-size: 18px;
  }
  .hero-title {
    font-size: 75px;
  }
  .hero-logo-box {
    width: 90px;
    height: 90px;
    border-radius: 28.8px;
  }
  .hero-logo-icon {
    width: 80px;
    height: 58px;
  }
  .hero-tagline {
    font-size: 25.5px;
    letter-spacing: 3px;
  }
  .hero-buttons {
    gap: 45px;
  }
  .download-card {
    width: 306px;
    height: 85.5px;
    border-radius: 21px;
    padding: 0 30px;
    box-shadow: 0 1.5px 15px rgba(0, 0, 0, 0.1);
  }
  .download-card-icon {
    width: 46.5px;
    height: 46.5px;
  }
  .download-card-label {
    font-size: 15px;
  }
  .download-card-store {
    font-size: 24px;
  }
  .glass-strip {
    flex: 0 0 72px;
    backdrop-filter: blur(108px);
    -webkit-backdrop-filter: blur(108px);
  }
  .page-fade-tall {
    height: 450px;
  }
  .page-fade-short {
    height: 225px;
  }
  .footer {
    padding: 63px 225px 45px;
  }
  .footer-logo-box {
    width: 34.5px;
    height: 34.5px;
    border-radius: 9.952px;
  }
  .footer-logo-box img {
    width: 30px;
    height: 22px;
  }
  .footer-brand-name {
    font-size: 22.5px;
    line-height: 33.75px;
  }
  .footer-company {
    font-size: 15px;
    line-height: 30px;
  }
  .footer-quote {
    font-size: 15px;
    line-height: 31.5px;
  }
  .footer-copyright {
    font-size: 13.5px;
    line-height: 27px;
  }
}

/* ===================== Responsive — Mobile (375×812) ===================== */
@media (max-width: 900px) {
  /* --- Background: Figma layers recreation --- */
  .hero {
    overflow: hidden;
  }
  .hero-bg {
    bottom: 0;
    background: #fff;
  }
  /* Ellipse 31: 500×383, #0088FF, blur(50px), bottom:-37 */
  .hero-bg::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 383px;
    left: calc(50% - 250px);
    bottom: -37px;
    background: #0088FF;
    border-radius: 50%;
    filter: blur(50px);
    z-index: 1;
  }
  /* Ellipse 33: 374×358, #00F7FF, blur(70px), bottom:-91 */
  .hero-bg::after {
    content: '';
    position: absolute;
    width: 374px;
    height: 358px;
    left: calc(50% - 187px);
    bottom: -91px;
    background: #00F7FF;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 2;
  }
  .hero-bg-blobs {
    display: none;
  }
  .glass-strips {
    display: none;
  }
  /* Ellipse 32: reuse page-fade-tall — 374×358, #0011FF, blur(70px), bottom:-187 */
  .page-fade-tall {
    width: 374px;
    height: 358px;
    left: calc(50% - 187px);
    right: auto;
    bottom: -187px;
    background: #0011FF;
    border-radius: 50%;
    filter: blur(70px);
    z-index: 2;
    pointer-events: none;
  }
  /* Rectangle 78: frosted overlay */
  .page-fade-short {
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    z-index: 3;
  }
  .mobile-bg-img {
    display: none;
  }

  /* --- Header: hidden --- */
  .header {
    display: none;
  }

  /* --- Hero content: exact Figma spacing ---
     Figma 812px breakdown:
     92px top → logo row (46px) → 10px → tagline (17px) → 25px →
     mockups (427px) → 29px → btn1 (48px) → 14px → btn2 (48px) → 56px bottom
  */
  .hero-content {
    justify-content: flex-start;
    padding: 92px 0 56px;
    gap: 0;
  }
  .hero-title-row {
    gap: 15px;
    margin-bottom: 10px;
  }
  .hero-title {
    font-size: 30px;
    color: #000;
    line-height: 45px;
  }
  .hero-logo-box {
    width: 46px;
    height: 46px;
    border-radius: 13.269px;
    background: #000;
  }
  .hero-logo-icon {
    width: 40px;
    height: 29px;
    filter: invert(1);
  }
  .hero-tagline {
    font-size: 12px;
    line-height: 17px;
    letter-spacing: 0;
    color: #000;
    margin-bottom: 25px;
  }

  /* --- Phone mockups: 92% of viewport width (345/375), scales with screen --- */
  .mobile-mockups {
    display: block;
    position: relative;
    width: 92%;
    aspect-ratio: 345 / 427;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 29px;
  }
  .mockup {
    position: absolute;
  }
  /* Screen 1 (left): 197.4×411.38 untransformed, bounding box 232.5×427 at container (0,0)
     Center of bounding box = center of untransformed element:
     container (116.27, 213.50) → left = 116.27 - 98.7 = 17.57, top = 213.50 - 205.69 = 7.81 */
  .mockup-left {
    left: 5.09%;   /* 17.57/345 */
    top: 1.83%;    /* 7.81/427 */
    width: 57.22%; /* 197.4/345 */
    aspect-ratio: 197.4 / 411.38;
    transform: matrix(1, -0.09, 0.09, 1, 0, 0);
    z-index: 2;
  }
  /* Screen 2 (right): 164.5×342.81 untransformed, bounding box 193.8×355.8 at container (151.22, 35.58)
     Bounding box center: (151.22+96.89, 35.58+177.92) = (248.11, 213.50)
     left = 248.11 - 82.25 = 165.86, top = 213.50 - 171.41 = 42.09 */
  .mockup-right {
    left: 48.08%;  /* 165.86/345 */
    top: 9.86%;    /* 42.09/427 */
    width: 47.68%; /* 164.5/345 */
    aspect-ratio: 164.5 / 342.81;
    transform: matrix(1, 0.09, -0.09, 1, 0, 0);
    z-index: 1;
  }
  .mockup-frame {
    position: absolute;
    overflow: hidden;
    background: #DFE3F0;
  }
  .mockup-left .mockup-frame {
    left: 3.13%;   /* 6.18/197.4 */
    top: 2.11%;    /* 8.67/411.38 */
    width: 94.44%; /* 186.43/197.4 */
    aspect-ratio: 186.43 / 403.48;
    border: 4.113px solid #000;
    border-radius: 22.39px;
  }
  .mockup-right .mockup-frame {
    left: 3.10%;   /* 5.10/164.5 */
    top: 2.11%;    /* 7.22/342.81 */
    width: 94.44%; /* 155.36/164.5 */
    aspect-ratio: 155.36 / 336.24;
    border: 3.427px solid #000;
    border-radius: 18.66px;
  }
  .mockup-screen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mockup-camera {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px;
    z-index: 2;
  }
  .mockup-left .mockup-camera {
    width: 31.6%;
    top: 2.7%;
  }
  .mockup-right .mockup-camera {
    width: 31.6%;
    top: 2.7%;
  }

  /* --- Download buttons: Figma 345×48, gap 14px --- */
  .hero-buttons {
    flex-direction: column;
    gap: 14px;
    width: 92%;
    align-self: center;
    padding: 0;
  }
  .download-card {
    width: 100%;
    height: 48px;
    border-radius: 24px;
    padding: 0 20px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    justify-content: center;
  }
  .download-card:last-child {
    background: #fff;
    box-shadow: none;
  }
  .download-card-icon {
    width: 22px;
    height: 22px;
  }
  .download-card-label {
    display: none;
  }
  .download-card-store {
    display: none;
  }
  .download-card-mobile {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 20px;
  }
  .download-card:last-child .download-card-mobile {
    color: #000;
  }
  .download-card:last-child .download-card-icon img {
    filter: invert(1);
  }

  /* --- Footer: hidden --- */
  .footer {
    display: none;
  }
}