/* Global reset & base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Hero section */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 60px 8%;
  background: linear-gradient(45deg, #f7c6c5, #f8e6b3, #e0d8f5);
  min-height: 70vh;
}

.hero-content {
  flex: 1 1 400px;
  max-width: 540px;
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 600;
  color: #33272a;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  color: #4a3f35;
}

.cta-button {
  display: inline-block;
  background: linear-gradient(90deg, #e66465, #9198e5);
  color: #fff;
  padding: 14px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.cta-button:hover {
  opacity: 0.85;
}

.hero-image {
  flex: 1 1 400px;
  text-align: center;
  margin-top: 40px;
}

.hero-image img {
  border-radius: 30px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

/* Features section */
.features {
  padding: 80px 8%;
  background: #f9f8f7;
  text-align: center;
}

.features h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  margin-bottom: 50px;
  color: #33272a;
}

.feature-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.feature-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  padding: 30px;
  max-width: 320px;
  flex: 1 1 280px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.feature-card img {
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.feature-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #4a3f35;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

/* Screenshots section */
.screenshots {
  padding: 80px 8%;
  text-align: center;
}

.screenshots h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  margin-bottom: 50px;
  color: #33272a;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.screenshot-grid img {
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.screenshot-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

/* Carousel styles */
.carousel {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  flex-shrink: 0;
  padding: 0 10px;
  box-sizing: border-box;
}

.carousel-item img {
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
  width: 100%;
  height: auto;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  transition: background 0.3s ease;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.carousel-btn.prev {
  left: 15px;
}

.carousel-btn.next {
  right: 15px;
}

@media (max-width: 768px) {
  .carousel-btn {
    display: none;
  }
}

/*
  Horizontal preview layout for larger screens

  On wide viewports (≥992px) we replace the carousel with a
  horizontally scrolling row. This prevents screenshots from
  wrapping onto multiple lines while still allowing the user to
  browse all images. Each item has a fixed basis so that up to six
  screenshots can sit comfortably across desktop resolutions. Users
  can scroll horizontally to see any additional screenshots. The
  scroll-snap properties provide a smooth snap-to-slide feel on
  touchpads and trackpads. On mobile (<992px) this layout remains
  hidden and the carousel is used instead.
*/
.preview-grid {
  display: flex;
  margin-top: 20px;
  gap: 25px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  /* enable momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;
  /* snap children into place when scrolling horizontally */
  scroll-snap-type: x mandatory;
}
.preview-grid img {
  /* Within the iPhone mockup the image simply fills the container,
     no flex basis is needed here. */
  height: auto;
  border-radius: 0;
  box-shadow: none;
  margin-right: 0;
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.preview-grid .iphone-mockup:last-child {
  margin-right: 0;
}

/* Hide the unused carousel element globally */
.carousel {
  display: none;
}

/*
  iPhone mockup styling

  Each app screenshot is wrapped in an `.iphone-mockup` container. This
  container draws a simple smartphone frame using borders and rounded
  corners, and includes a notch at the top via a pseudo-element. The
  screenshot fills the available space inside the frame while
  maintaining its aspect ratio. Adjust the width and height to
  customise the overall size of the mockup. The outer frame creates
  thicker top and bottom bezels to hint at a recent iPhone design.
*/
.iphone-mockup {
  position: relative;
  width: 220px;
  height: 450px;
  border: 12px solid #111;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 30px;
  overflow: hidden;
  background-color: #000;
  flex-shrink: 0;
  margin-right: 25px;
}
.iphone-mockup::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 25px;
  background-color: #111;
  border-radius: 0 0 12px 12px;
}
.iphone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/*
  iPhone 17 frame styling

  The new iPhone 17 sports minimal bezels and a wider Dynamic Island. To
  emulate this look, the frame uses thicker top and bottom bezels and
  slightly larger corner radii than the earlier mockup. A pseudo‑element
  creates the pill‑shaped Dynamic Island that sits above the screen. The
  screenshot fills the available space within the frame while preserving
  its aspect ratio.
*/
.iphone17-frame {
  position: relative;
  width: 220px;
  height: 470px;
  border: 12px solid #111;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 38px;
  background-color: #000;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 25px;
}
.iphone17-frame::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 28px;
  background-color: #111;
  border-radius: 0 0 14px 14px;
}
.iphone17-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
  Android high‑end device frame

  To give the hero image the feel of a premium Android phone (similar to the
  Pixel 6 Pro), this frame features symmetrical bezels, rounded corners and a
  centred hole‑punch camera. A small circular pseudo‑element sits below
  the top bezel to represent the front camera. The screenshot completely
  fills the interior of the device frame.
*/
.android-frame {
  position: relative;
  width: 300px;
  height: 600px;
  border: 14px solid #111;
  border-radius: 40px;
  background-color: #000;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0 auto;
}
.android-frame::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: #222;
  border-radius: 50%;
}
.android-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/* Call to action section */
.cta {
  padding: 80px 8%;
  background: linear-gradient(45deg, #f7c6c5, #f8e6b3, #e0d8f5);
  text-align: center;
}

.cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  margin-bottom: 20px;
  color: #33272a;
}

.cta p {
  font-size: 1.15rem;
  max-width: 650px;
  margin: 0 auto 30px auto;
  color: #4a3f35;
  line-height: 1.6;
}

.download-button {
  display: inline-block;
  background: linear-gradient(90deg, #e66465, #9198e5);
  color: #fff;
  padding: 16px 32px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: opacity 0.3s ease;
}

.download-button:hover {
  opacity: 0.85;
}

/*
  App icon wrapper in hero

  This wrapper surrounds the Cocotte app icon in the hero section. A white
  background and generous padding help the pink pot logo pop against the
  hero’s gradient. The border-radius softens the edges and the shadow
  provides subtle separation from the colourful backdrop.
*/
.icon-wrapper {
  display: inline-block;
  background: #ffffff;
  padding: 20px;
  border-radius: 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  margin: 20px 0;
}
.icon-wrapper img {
  display: block;
  width: 160px;
  height: auto;
  border-radius: 20px;
}

/*
  Arrange the app icon and primary call‑to‑action in a single row.
  On larger screens the icon sits to the left of the button with space
  between them. On smaller screens the icon and button stack vertically to
  maintain readability and spacing. This improves the visual hierarchy and
  prevents the icon from feeling disconnected from the rest of the hero
  content.
*/
.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 30px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/*
  Scale down the iPhone 17 frames used within feature cards. The default
  dimensions defined above (220×470) are too large for the cards, so here we
  constrain the frame to the card’s width and preserve its aspect ratio.
  The aspect-ratio property ensures the height scales automatically when the
  width changes. A bottom margin separates the frame from the heading.
*/
.feature-card .iphone17-frame {
  width: 100%;
  max-width: 220px;
  margin: 0 auto 20px;
  aspect-ratio: 220 / 470;
}
.feature-card .iphone17-frame::before {
  /* adjust the notch width relative to the scaled frame */
  width: 140px;
  height: 28px;
}

/* Why Cocotte section */
.why {
  padding: 80px 8%;
  background: #fff;
  text-align: center;
}

.why h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  margin-bottom: 30px;
  color: #33272a;
}

.why-list {
  list-style: none;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
}

.why-list li {
  font-size: 1.05rem;
  margin-bottom: 18px;
  color: #555;
  display: block;
  line-height: 1.5;
}

/* emphasise the leading term in why list */
.why-list li strong {
  color: #33272a;
}

/* Download / Get the app section */
.download {
  padding: 80px 8%;
  background: #f9f8f7;
  text-align: center;
}

.download h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.75rem;
  margin-bottom: 20px;
  color: #33272a;
}

.download p {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 40px auto;
  color: #4a3f35;
  line-height: 1.6;
}

/* Container for download badges and extension links */
.store-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  align-items: center;
}

/* Badge links show the official App Store and Google Play badges */
.badge-link {
  display: inline-block;
  line-height: 0; /* remove extra whitespace */
}

/* Set a consistent height for the badges while maintaining aspect ratio */
.badge-img {
  height: 40px;
  width: auto;
}

/* Extension links styling */
.ext-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #e66465, #9198e5);
  color: #fff;
  padding: 14px 24px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: opacity 0.3s ease;
}

.ext-link img {
  width: 26px;
  height: 26px;
}

.ext-link span {
  white-space: nowrap;
}

.ext-link:hover {
  opacity: 0.85;
}

/* Responsive adjustments for download section */
@media (max-width: 960px) {
  .store-icons {
    flex-direction: column;
    align-items: center;
  }
  .badge-link {
    margin-bottom: 20px;
  }
  .ext-link {
    width: 220px;
    justify-content: center;
  }
}

/*
  When viewed on wider screens, display the app preview images in a simple grid
  instead of a single-image carousel. This improves the desktop experience by
  showing multiple screenshots at once. Navigation buttons are hidden and the
  translate transform applied by the carousel script is overridden.
*/
@media (min-width: 960px) {
  /* Use a responsive grid layout for the carousel track */
  .carousel-track {
    transform: none !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
  }

  /* Reset item widths and padding for grid layout */
  .carousel-item {
    min-width: auto;
    padding: 0;
  }

  /* Hide navigation buttons on large screens */
  .carousel-btn {
    display: none;
  }
}

/* Footer */
footer {
  background: #33272a;
  color: #fff0f0;
  text-align: center;
  padding: 25px 8%;
  font-size: 0.9rem;
}

footer p {
  margin: 6px 0;
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-image {
    margin-top: 30px;
  }
  .feature-card {
    max-width: 100%;
  }
}

/* Center the brand and badges in the topbar + official badge sizing */
.topbar{
  text-align:center;
}
.topbar .brand, .topbar .store-icons{
  display:flex;
  align-items:center;
  justify-content:center;
}
.topbar .brand{
  margin-right:8px;
}
.store-icons .badge{
  display:block;
  height:36px;
  width:auto;
}
@media (max-width: 640px){
  .store-icons .badge{
    height:32px;
  }
}

/* Center hero content and actions on all viewports */
.hero .hero-content{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.hero .hero-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.cta-button.ghost{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.6);
  color: inherit;
}
.cta-button.ghost:hover{
  background: rgba(255,255,255,.08);
  opacity:1;
}