html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; }
  .font-display { font-family: 'Fraunces', serif; }
  .leaf-divider { clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .chevron { transform: rotate(45deg); }
  .sprig::before {
    content: "";
    display: inline-block;
    width: 22px; height: 10px;
    background: linear-gradient(90deg, transparent, #C9A24B 40%, transparent);
    margin-right: 10px;
  }

  /* ---- Entrance animations ---- */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-up { animation: fadeInUp 0.9s cubic-bezier(.21,.85,.35,1) forwards; opacity: 0; }
  .delay-1 { animation-delay: .15s; }
  .delay-2 { animation-delay: .3s; }
  .delay-3 { animation-delay: .45s; }
  .delay-4 { animation-delay: .6s; }

  @keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  .animate-float { animation: floatY 4s ease-in-out infinite; }

  /* ---- Hero background carousel ---- */
  @keyframes heroFade {
    0%   { opacity: 0; transform: scale(1.08); }
    8%   { opacity: 1; transform: scale(1.12); }
    30%  { opacity: 1; transform: scale(1.16); }
    38%  { opacity: 0; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.18); }
  }
  .hero-slide {
    animation: heroFade 18s ease-in-out infinite;
    opacity: 0;
  }
  .hero-slide:nth-child(1) { animation-delay: 0s; }
  .hero-slide:nth-child(2) { animation-delay: 6s; }
  .hero-slide:nth-child(3) { animation-delay: 12s; }

  /* ---- Auto-scrolling marquee carousels ---- */
  .marquee-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .marquee-track { display: flex; width: max-content; animation: marqueeX var(--marquee-duration, 32s) linear infinite; }
  .marquee-wrap:hover .marquee-track { animation-play-state: paused; }
  @keyframes marqueeX {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ---- Floating action buttons ---- */
  @keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
    100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  }
  .fab-whatsapp { animation: pulseRing 2.2s ease-out infinite; }
  @keyframes pulseRingGold {
    0%   { box-shadow: 0 0 0 0 rgba(201,162,75,.55); }
    100% { box-shadow: 0 0 0 16px rgba(201,162,75,0); }
  }
  .fab-call { animation: pulseRingGold 2.2s ease-out infinite; }



  .hero{
    /* padding:72px 0 56px; */
  /*   background:
      radial-gradient(circle at 15% 20%, rgba(240,165,0,0.10), transparent 45%),
      radial-gradient(circle at 85% 0%, rgba(240,165,0,0.06), transparent 40%); */
    border-bottom:1px solid var(--border);
  }
  .eyebrow{
    display:inline-block; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--accent); font-weight:700; margin-bottom:16px;
  }
  .hero h1{font-size:44px; line-height:1.15; max-width:720px; font-weight:700;}
  .hero p.lead{color:var(--muted); font-size:17px; max-width:560px; margin:18px 0 30px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--accent); color:#14100a; font-weight:700; padding:14px 24px;
    border-radius:10px; font-size:15px; display:inline-flex; align-items:center; gap:8px;
  }



  .hero-grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.hero-content{
    flex:1;
}

.hero-phone{
    flex:1;
    display:flex;
    justify-content:center;
}

.iphone{
    position:relative;
    width:310px;
    height:580px;
    background:#000;
    border-radius:48px;
    padding:12px;
    box-shadow:
        0 30px 60px rgba(0,0,0,.25),
        inset 0 0 0 2px #555;
}

.iphone video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:38px;
}

.notch{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    width:130px;
    height:28px;
    background:#000;
    border-radius:20px;
    z-index:5;
}

@media(max-width:900px){

.hero-grid{
    flex-direction:column-reverse;
    text-align:center;
}

.hero-phone{
    margin-top:40px;
}

.iphone{
    width:270px;
    height:550px;
}

}