/* ====================================================================
   settr — simple homepage styles
   Layout only. Tokens, type, and shared classes (.kicker, .headline,
   .subhead, .cta, .section, .eyebrow, .em) come from hero.css /
   sections.css. Real gifted-creator clips do the heavy lifting visually.
   ==================================================================== */

/* ---------- HERO ---------- */
.home-hero{
  position: relative;
  padding: 72px 0 64px;
}
.hh-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 56px;
  align-items: center;
}
.hh-copy{ max-width: 560px; }
.hh-headline{
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: 1.03;
  margin: 0 0 22px;
  max-width: 15ch;
  text-wrap: balance;
}
.hh-sub{
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 540px;
  margin: 0 0 30px;
}
.hh-cta{ margin-bottom: 26px; }
.hh-trust{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  margin: 0;
  letter-spacing: 0.01em;
}
.hh-trust-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}

/* ---- Hero creator-clip cluster ---- */
.hh-media{
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hh-clip{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--canvas-tint);
  border: 1px solid var(--line);
}
.hh-clip video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hh-clip-front{
  width: clamp(240px, 22vw, 308px);
  aspect-ratio: 9 / 16;
  z-index: 2;
  box-shadow: 0 32px 64px -28px rgba(0,0,0,0.30), 0 8px 22px -16px rgba(0,0,0,0.22);
  animation: hh-float 7s ease-in-out infinite;
}
.hh-clip-back{
  position: absolute;
  width: clamp(180px, 16vw, 224px);
  aspect-ratio: 9 / 16;
  top: 4%;
  right: 6%;
  z-index: 1;
  transform: rotate(3deg);
  opacity: 0.95;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.26);
  animation: hh-float-back 8.5s ease-in-out infinite;
}
.hh-verdict{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.35);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}
.hh-verdict-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--state-pos);
  flex: 0 0 auto;
}
.hh-media-tag{
  position: absolute;
  top: 2%;
  left: 4%;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

@keyframes hh-float{
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(0deg); }
}
@keyframes hh-float-back{
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* ---------- PROBLEM ---------- */
.home-problem .hp-head{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 56px;
}
.hp-headline{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  max-width: 22ch;
  text-wrap: pretty;
}
.hp-rows{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.hp-row{
  padding: 32px 40px 36px 0;
  border-top: 1px solid var(--line);
}
.hp-row + .hp-row{
  padding-left: 40px;
  border-left: 1px solid var(--line);
}
.hp-num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.hp-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 14px 0 10px;
}
.hp-copy{
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ---------- CONTENT WALL ---------- */
.home-wall{ overflow: hidden; }
.cw-head{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.cw-lede{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 58ch;
}
.cw-rail{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.cw-fade{
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  max-width: 160px;
  z-index: 2;
  pointer-events: none;
}
.cw-fade-l{ left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.cw-fade-r{ right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.cw-track{
  display: flex;
  gap: 16px;
  width: max-content;
  animation: cw-scroll 52s linear infinite;
}
.cw-rail:hover .cw-track{ animation-play-state: paused; }
.cw-card{
  position: relative;
  flex: 0 0 auto;
  width: clamp(168px, 15vw, 208px);
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--canvas-tint);
  border: 1px solid var(--line);
}
.cw-card img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 26px 12px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
.cw-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  flex: 0 0 auto;
}
@keyframes cw-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- WHAT WE DO ---------- */
.home-what .hw-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 48px;
}
.hw-head-l{ display: flex; flex-direction: column; gap: 16px; }
.hw-headline{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  max-width: 18ch;
  text-wrap: pretty;
}
.hw-lede{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}
.hw-lede strong{ color: var(--fg); font-weight: 500; }

.hw-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.hw-step{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color .15s ease;
}
.hw-step:hover{ border-color: var(--line-strong); }
.hw-step-media{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--canvas-tint);
  border-bottom: 1px solid var(--line);
}
.hw-step-media video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hw-step-n{
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.hw-step-text{ padding: 22px 24px 26px; }
.hw-step-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 10px;
}
.hw-step-copy{
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ---------- OUTCOMES ---------- */
.home-outcomes .ho-head{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.ho-headline{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
  max-width: 20ch;
  text-wrap: pretty;
}
.ho-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.ho-card{ padding: 30px 28px 32px 0; }
.ho-card + .ho-card{
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.ho-card-n{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.ho-card-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 14px 0 10px;
}
.ho-card-copy{
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* ---------- BRIDGE TO PLATFORM ---------- */
.hb-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 44px 48px;
}
.hb-card-l{ max-width: 60ch; }
.hb-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.hb-headline{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 12px 0 12px;
}
.hb-copy{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.hb-card-r{ flex: 0 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hh-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hh-copy{ max-width: 640px; }
  .hh-media{ min-height: 0; justify-content: flex-start; padding-top: 8px; }
  .hh-clip-front{ width: clamp(240px, 56vw, 300px); }
  .hh-clip-back{ width: clamp(170px, 38vw, 210px); right: 0; }

  .home-what .hw-head{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }
}

@media (max-width: 900px){
  .hp-rows,
  .hw-steps,
  .ho-grid{ grid-template-columns: 1fr; }

  .hp-row,
  .hp-row + .hp-row{
    padding: 28px 0;
    border-left: 0;
  }
  .ho-grid{ border-top: 0; }
  .ho-card,
  .ho-card + .ho-card{
    padding: 24px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .hw-step-media{ aspect-ratio: 16 / 9; }

  .hb-card{
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 28px;
  }
}

@media (max-width: 640px){
  .home-hero{ padding: 48px 0 44px; }
  .hh-trust{ font-size: 11px; }
  .cw-card{ width: 150px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .hh-clip-front,
  .hh-clip-back{ animation: none; }
  .cw-track{ animation: none; }
}