/* Reset & global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  background: #fefefe;
  color: #333;
  position: relative; /* <--- add this line */
}
/* === Header hamburger + off-canvas nav === */
    .hamburger{
      display:none;
      width:44px; height:44px;
      border:1px solid #eee; border-radius:10px;
      background:#fff; cursor:pointer;
      position:relative;
      align-items:center; justify-content:center;
    }
    .hamburger span{
      position:absolute; width:22px; height:2px; background:#111; border-radius:2px;
      transition: transform .25s ease, opacity .25s ease;
    }
    .hamburger span:nth-child(1){ transform: translateY(-7px); }
    .hamburger span:nth-child(2){ transform: translateY(0); }
    .hamburger span:nth-child(3){ transform: translateY(7px); }

    .mobile-actions{ display:none; gap:10px; }
    .mobile-action-btn{
      width:44px; height:44px; border:1px solid #eee; border-radius:10px;
      background:#fff; display:flex; align-items:center; justify-content:center;
      color:#111; text-decoration:none;
    }
    .mobile-action-btn svg{ width:22px; height:22px; }

    .nav-backdrop{
      position:fixed; inset:0; background: rgba(0,0,0,.45);
      opacity:0; pointer-events:none; transition: opacity .3s ease; z-index: 9998;
    }

    /* Mobile-only helpers */
    .mobile-only { display:none; }

    @media (max-width: 900px){
      .hamburger{ display:flex; }
      .mobile-actions{ display:flex; }
      .navbar{ position: sticky; }
      .logo{ position:absolute; left:50%; transform: translateX(-50%); }

      .nav-links{
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 80%; max-width: 340px;
        background: #fff;
        border-right: 1px solid #eee;
        box-shadow: 8px 0 30px rgba(0,0,0,.08);
        padding: 80px 20px 20px;
        display: flex; flex-direction: column; gap: 12px;
        transform: translateX(-100%);
        transition: transform .35s cubic-bezier(.22,.61,.36,1);
        z-index: 9999;
        overflow:auto;
      }
      body.nav-open .nav-links{ transform: translateX(0); }
      body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }

      /* Section styling inside the combined off-canvas */
      .nav-section{ margin-top:12px; padding-top:12px; border-top:1px solid #eee; }
      .nav-section h4{ margin:0 0 8px; font-size:13px; color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
      .nav-links a { margin-right: 0; display:block; padding:12px 10px; border-radius:10px; }
      .nav-links a:hover { background:#f8f8f8; }
      .nav-links .btn-cta { width:100%; padding:12px 14px; border-radius:10px; margin-top:8px; }

      /* Hide the separate dashboard sidebar on mobile (we’re combining it) */
      .sidebar{ display:none !important; }

      /* Show elements marked as mobile-only */
      .mobile-only { display:block; }
    }

    /* Hamburger → X when open */
    body.nav-open .hamburger span:nth-child(1){ transform: rotate(45deg); }
    body.nav-open .hamburger span:nth-child(2){ opacity:0; }
    body.nav-open .hamburger span:nth-child(3){ transform: rotate(-45deg); }

    @media (prefers-reduced-motion: reduce){
      .nav-links, .nav-backdrop, .hamburger span { transition: none !important; }
    }


  /* Toasts */
    .toast { position: fixed; right: 16px; bottom: 16px; background: #333; color: #fff; padding: 12px 14px; border-radius: 8px; font-size: 0.9rem; opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; z-index: 9999; max-width: 320px; }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.error { background: var(--err); }
    .toast.success { background: var(--ok); }

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background-color: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 99999;
}
.logo {
  font-size: 1.6rem;
  font-weight: bold;
  color: #111;
}
.nav-links a {
  margin-right: 1.5rem;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
.nav-links .btn-cta {
  padding: 0.5rem 1rem;
  background: black;
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.nav-links a:hover,
.nav-links .btn-cta:hover {
  opacity: 0.8;
}

.link-columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
  font-size: 1.2rem;
  margin: 20px auto;
  text-align: center;
}

.link-columns a {
  flex: 1 1 18%; /* 5 items = ~20% width each, with spacing */
  text-decoration: none;
  color: white;
  text-decoration: underline;
  text-underline-offset: 10px;
  font-weight: 700;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.3s;
}

.link-columns a:hover {
  color:#e0e0e0;
}
.hero-background {
 
  height: 100vh;
  width: 100%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  z-index: 0;
}


.hero {
  position: absolute;
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  top: 100px; /* adjust as needed */
 
  width: 100%;
  z-index: 2;
  color: white;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  text-align: center;
	align-items: center;
  	margin-left: auto;
	margin-right: auto;
}

.hero-video,
.hero-video2 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
/* Hero */

.hero-header {
  padding-left: 10%;
  padding-right: 10%;
  width: 80%;
  padding-top: 200px;
  padding-bottom: 200px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}
.btn-main {
  padding: 0.75rem 1.5rem;
  background: white;
  color: black;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 4px;
  text-decoration: none;
}
.btn-main:hover {
  background: #f2f2f2;
}

 /* Centered container, capped width */
  .popularDesigns-wrap{
    max-width:900px;
    margin:0 auto;
    margin-bottom:
    padding:0 16px;
  }
  .popularDesigns h2{ margin:0 0 14px; font-size:20px; }

  /* Desktop grid */
  .pd-desktop{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  }

  

  /* Cards */
  .popularDesigns-card{
    background:#ffffff; border-radius:12px; overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    transform:translateY(0);
    transition:transform .22s ease, box-shadow .22s ease;
     aspect-ratio: 9 / 19;/* or 9/16 if you prefer */
    will-change:transform;
  }
  .popularDesigns-card:hover,
  .popularDesigns-card:focus-within{
    transform:translateY(-6px);
    box-shadow:0 14px 36px rgba(0,0,0,.22);
  }
  /* Phone-ish portrait ratio (iPhone 390×844 ≈ 9:19.5) */
.popularDesigns-card img{
  display:block;
  width:100%;
  height:auto;           /* <-- remove the fixed height */
  aspect-ratio: 9 / 16;/* or 9/16 if you prefer */
  object-fit: cover;     /* crop to fill the frame */
  border-radius: 12px;   /* optional */
}
  .popularDesigns-card p{
    margin:10px 12px 12px;
    color:#000000; font-weight:600; font-size:11px;
  }

  /* special styling for the last "All designs" card */
.popularDesigns-card.is-all .phone-frame.all{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg,#0a1b3f,#152a57 60%,#294e9a);
  color:#fff;
}
.popularDesigns-card.is-all .phone-frame.all .arrow{
  width:22px; height:22px; opacity:.95;
}
  .pd-spacer{ visibility:hidden; }

  /* Hide mobile carousel on desktop */
  .pd-carousel{ display:none; }

  /* Mobile (≤900px): hide grid, show carousel */
  @media (max-width:900px){
    .pd-desktop{ display:none; }
    .pd-carousel{ display:block; }
    .pd-track{
      display:flex; gap:14px; overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:16px;
      padding-bottom:10px;
    }
    .pd-track::-webkit-scrollbar{ display:none; }
    .pd-slide{
      flex:0 0 88%;
      scroll-snap-align:center;
      display:grid; grid-template-columns:1fr 1fr; gap:12px;
    }
    .pd-dots{
      display:flex; justify-content:center; gap:8px; margin-top:6px;
    }
    .pd-dots .dot{
      width:8px; height:8px; border-radius:50%;
      background:rgba(0,0,0,.3); opacity:.7;
      transition:transform .2s ease, opacity .2s ease, background .2s ease;
    }
    .pd-dots .dot.active{
      background:#000; opacity:1; transform:scale(1.15);
    }
     
  }

  @media (prefers-reduced-motion: reduce){
    .popularDesigns-card{ transition:none; }
  }


/* Features */
.features {
  position: relative;
  background: #f9f9f9;
  padding: 10vh 5vw;
  
}

.features-video-slot,
.hero-content {
  position: relative;
}


.video-placeholder {
  display: block;
}

.features-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  max-width: 500px;
  margin: auto;
}

.features-text {
  flex: 1;
}

.features-video-slot {
  flex: 1;
  min-height: 400px;
  position: relative;
}

.features ul {
  flex: 1;
  list-style: none;
}

.features h2 {
  flex: 1;
  font-size: 2rem;
}
/* Footer */
.footer {
  background: #111;
  color: #eee;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
}
.card-stack {
  position: relative;
}

.card {
  position: relative;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
  transition: box
  -shadow 0.3s ease;
}


.card.card-1.darken {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card-feature-video {
  width: 100%;
  border-radius: 30px;
  
  display: block;
}

.card-3 {
  z-index: 3;
}

.card-2 {
  z-index: 2;
}
.card-1 {
  top: 0;
 
}

.card-3 {
  position: relative;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}

.floating-images-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.float-img {
  position: absolute;
  width: 120px;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 1;
   display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  color: #333;
}

.feature-icon {
  width: 35px;
  height: 35px;
}

.invait-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;


  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  opacity: 0;
  z-index: 2;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  .hero h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}


.hero-background2 {
  position: relative;
  width: min(95%, 500px); /* scales on desktop and mobile */
  aspect-ratio: 9 / 14.5; /* like a real phone screen */
  margin: auto;
  overflow: hidden;
  border-radius: 40px;
  background: black;
}
.hero {
  position: absolute;
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  z-index: 2;
  color: white;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  text-align: center;
	align-items: center;
  margin-left: auto;
	margin-right: auto;
}

/* Hero */

.hero-header {
  padding-left: 10%;
  padding-right: 10%;
  width: 100vh !important;
  margin-top: -150px;
  padding-bottom: 200px;
}
.hero-content {

  position: relative;
 
  width: min(70%, 390px);
  max-height: 700px;
  aspect-ratio: 9 / 19.5;
  margin-top: -100px;
  overflow: hidden;


}

.link-columns {
  display: none;
}


.speaker-pill {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background-color: #000000;
  border-radius: 20px;
  opacity: 0.8;
  z-index: 1000;
}

.hero-video {
   

  inset: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit; /* ⬅ inherit from parent */
  border-radius: 30px;


 

}






}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

  .hero-header {
  padding-left: 20% !important;
  padding-right: 20% !important;
  width: 100% !important;
  margin-top: -150px;
  padding-bottom: 200px;
}

  
.hero-background2 {
  position: relative;
  width: min(95%, 1200px); /* scales on desktop and mobile */
  height: 80vh;
  aspect-ratio: 22 / 12.5; /* like a real phone screen */
  
  margin: auto;
  overflow: hidden;
  border-radius: 40px;
  background: black;
}
.hero-content {

  position: relative;
 
  width: min(100%, 350px);
 
  aspect-ratio: 9 / 19.5;
  margin-top: -150px;
  overflow: hidden;


}


.speaker-pill {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 10px;
  background-color: #000000;
  border-radius: 20px;
  opacity: 0.8;
  z-index: 5;
}

.hero-video {
   

  inset: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit; /* ⬅ inherit from parent */
  border-radius: 30px;

 

}

.hero-header {
  padding-left: 10%;
  padding-right: 10%;
  width: 80%;
  padding-top: 200px;
  padding-bottom: 200px;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.features {
  position: relative;
  background: #f9f9f9;
  padding: 10vh 5vw;

}



.features-video-slot,
.hero-content {
  position: relative;
}


.video-placeholder {
  display: block;
}

.features-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  max-width: 900px;
  margin: auto;
}
.features-inner-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  max-width: 900px;
  margin: auto;
}

.features-text {
  flex: 3;
}


.features-text-2 {
  flex: 0;
}







  
}