/* Header / Hero */
header.hero{
  position: relative;
  /* Full viewport height; svh handles mobile browser UI chrome */
  min-height: 100vh;
  min-height: 100svh;
  display:grid; place-items:center; isolation:isolate; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  /* Default: mobile/tablet */
  background: url('../photos/hero/hero-800.webp') center/cover no-repeat;
  background-attachment: fixed;
  /* Keep the image as-is (slight boost + optional blur). Adjust as needed. */
  filter: brightness(0.6) saturate(1.05) blur(8px);
  transform: scale(1.03);
}

/* Swap hero image for larger viewports */
@media (min-width: 900px){
  .hero::before{ background-image: url('../photos/hero/hero-1280.webp'); }
}
@media (min-width: 1400px){
  .hero::before{ background-image: url('../photos/hero/hero-1920.webp'); }
}
.hero::after{ content:""; position:absolute; inset:0; background: none; pointer-events: none; }

.hero-inner{ position:relative; z-index:1; width:100%; }
.hero-card{
  max-width: 900px; margin-inline:auto; padding: clamp(20px, 3vw, 28px);
  /* Remove the dark glass panel for a full-photo hero */
  background: transparent;
  backdrop-filter: none;
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
}

.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top: .6rem; }

/* Logo sizing in hero */
.logo-img{ display:block; width: clamp(260px, 55vw, 720px); height:auto; margin-inline:auto; 
  /* Fallback glow if SVG filters are unsupported */
  filter: drop-shadow(0 0 12px var(--glow-1)) drop-shadow(0 0 22px var(--glow-2));
}

/* Steps sizing refinements for this page */
/* Moderately taller boxes and brighter photos in How section */
#how .step{ min-height: 320px; }
#how .step{ display:flex; flex-direction: column; }
#how .step .step-bg{ opacity: .45; filter: saturate(1.12) contrast(1.04) brightness(1.05) blur(1.5px); }
#how .step[data-bg="band"] .step-bg{ object-position: 90% center; }
#how .step::after{ background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32)); }
.step .step-cta{ position:relative; z-index:1; margin-top: 8px; }
.step .step-icon{ position:relative; z-index:1; font-size: 28px; margin-top: 6px; line-height: 1; }

/* Place CTAs at the bottom for How steps and add subtle button style */
#how .step .step-cta{ margin-top: auto; display:flex; }
#how .step .step-cta .btn-subtle{ margin-top: 10px; }

.btn-subtle{
  --bg: rgba(255,255,255,.06);
  --border: rgba(199,185,255,.28);
  --text: var(--lavender);
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 999px; font-weight: 700; letter-spacing:.2px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  box-shadow: none; transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.btn-subtle:hover{ background: rgba(255,255,255,.09); border-color: rgba(199,185,255,.4); transform: translateY(-1px); }
.btn-subtle:active{ transform: translateY(0); }

/* What section: single-column hero with background carousel */
/* Unify stacking context at #what so backdrop-filter can sample carousel pixels */
#what{ isolation:isolate; }
/* WHAT: two-column layout + phone video */
#what .what-grid{
  display:grid; align-items:start; gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1fr;
  margin-top: clamp(8px, 2vw, 16px);
}
/* Ensure the phone column aligns with the title top */
#what .what-media{ align-self: start; }
@media (min-width: 900px){
  #what .what-grid{ grid-template-columns: 1.1fr .9fr; }
}

#what .what-copy p{
  color: var(--muted);
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.9;
  text-align: left;
  text-justify: inter-word;
  /* Tighter space between title and text; keep bottom rhythm */
  margin: 0;
  margin-top: clamp(8px, 1.2vw, 14px);
  margin-bottom: clamp(20px, 3.5vw, 40px);
}
/* Align phone top with the eyebrow text by removing default top margin */
#what .what-left .eyebrow{ margin-top: 0; }

/* Smaller text for What section on mobile */
@media (max-width: 560px){
  #what .what-copy p{
    font-size: clamp(18px, 4.2vw, 22px);
    line-height: 1.75;
  }
}

/* Tighter vertical rhythm inside the left column */
#what .what-left.stack{ gap: clamp(12px, 2vw, 20px); }
#what .what-left{ padding-right: clamp(12px, 3.5vw, 40px); }
@media (min-width: 900px){
  #what .what-grid{ column-gap: clamp(28px, 5.5vw, 80px); }
}

/* What text: scroll-coordinated slide from left */
.slide-scroll, .slide-scroll-right{ will-change: transform, opacity; }

/* On mobile, remove text + phone animations in What section */
@media (max-width: 560px){
  #what .slide-scroll,
  #what .slide-scroll-right{ transform: none !important; opacity: 1 !important; }
  #what .reveal{ opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* Keep body copy clean in What it is section */
#what .what-copy p{ text-shadow: none; }

/* Phone-like frame */
.phone{ display:flex; justify-content:center; }
.phone-bezel{
  --r: 40px;
  padding: 12px; border-radius: calc(var(--r) + 12px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset,
              0 0 30px rgba(154,165,255,.15), 0 0 50px rgba(199,185,255,.12);
}
.phone-screen{
  width: min(380px, 88vw);
  aspect-ratio: 9 / 16; /* vertical */
  background: #000; border-radius: var(--r); overflow:hidden; position:relative;
  box-shadow: 0 6px 18px rgba(0,0,0,.45) inset;
}

/* Lightweight YouTube preview */
.yt-lazy{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; margin:0; cursor:pointer; background:none; }
.yt-lazy .yt-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.05) contrast(1.05) brightness(.96); }
.yt-lazy::after{ /* subtle gradient vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.0), rgba(0,0,0,.35));
}
.yt-play{
  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  box-shadow: 0 10px 30px rgba(154,165,255,.4), 0 6px 18px rgba(199,185,255,.32);
}
.yt-play::before{
  content:""; position:absolute; left:50%; top:50%; transform: translate(-40%, -50%);
  border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent #0b0b12;
}
.yt-lazy:hover .yt-play{ filter: brightness(1.05); transform: translate(-50%, -50%) scale(1.03); }
.yt-lazy:active .yt-play{ transform: translate(-50%, -50%) scale(1.0); }

/* Carousel */
.carousel{ display:grid; gap: 10px; }
.carousel .track{
  display:grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px;
  overflow-x:auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; scrollbar-width: none;
}
.carousel .track::-webkit-scrollbar{ display:none; }
.slide{ margin:0; scroll-snap-align: start; position:relative; border-radius: 14px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#0e0e16; }
.slide img{ width:100%; height: clamp(240px, 42vw, 420px); object-fit:cover; display:block; }
.carousel .dots{ display:flex; gap:8px; justify-content:center; }
.carousel .dot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.4); border:0; padding:0; cursor:pointer; }
.carousel .dot.active{ background: linear-gradient(135deg, var(--accent-start), var(--accent-end)); box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* Hide dots for What section */
#what .carousel .dots{ display:none; }

/* Gallery */
.gallery{ display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); }
/* Desktop: increase How It Works step height */
@media (min-width: 900px){
  #how .step{ min-height: 420px; }
}

/* Larger text inside How steps */
#how .step b{ font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
#how .step p{ font-size: clamp(1.05rem, 1.85vw, 1.25rem); line-height: 1.8; }
#how .step p.step-lines{ display:grid; gap: 2px; margin: 6px 0 0; }
#how .step p.step-lines span{ display:block; }

/* Contact section tweaks */
#contact .contact-lead{ max-width: 960px; margin: 8px 0 0; font-size: clamp(20px, 2.6vw, 24px); }
#contact .contact-cta{ margin-top: clamp(16px, 2.5vw, 28px); }
@media (max-width: 900px){ .gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery{ grid-template-columns: 1fr; } }
.gallery figure{ position:relative; margin:0; overflow:hidden; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background: #0e0e16; }
.gallery img{ width:100%; height: 280px; object-fit:cover; transition: transform .4s ease, filter .4s ease; will-change: transform; }
.gallery figure:hover img{ transform: scale(1.06); filter: saturate(1.15) contrast(1.05); }
.gallery figcaption{ position:absolute; inset:auto 8px 8px 8px; padding:4px 8px; font-size:.8rem; color:#e9eef5; background: rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08); border-radius: 999px; }

/* Mobile & touch tweaks for this page */
@media (max-width: 900px){
  .hero::before{ background-attachment: scroll; }
}
@media (max-width: 560px){
  .hero-card{ padding: 16px; }
  /* Bigger logo and subtitle on mobile */
  .logo-img{ width: clamp(300px, 84vw, 520px); }
  .subtitle{ font-size: 20px; }
  /* Smaller hero buttons on mobile */
  .hero-cta .btn{ width: 100%; --padx: 14px; --pady: 8px; font-size: .9rem; }
  .gallery img{ height: 220px; }
  .step{ min-height: 200px; }
  #how .step{ min-height: 230px; }
}