/* =================================================================
   CUE — page sections (chapters, capabilities, motion, faq, footer)
   ================================================================= */

/* ─────────── Chapters (01 / 02) ─────────── */

.chapter{
  padding: clamp(96px, 16vh, 180px) var(--gutter);
  border-bottom:1px solid var(--hair);
  position:relative;
}
.chapter--alt{
  background:
    radial-gradient(80% 60% at 80% 50%, rgba(236,132,114,.05), transparent 60%);
}
.chapter__inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 2.1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items:start;
}
@media (max-width:760px){
  .chapter__inner{ grid-template-columns:1fr; gap:24px; }
}
.chapter__statement{
  font-family:var(--font-display);
  margin:0;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height:1.16;
  letter-spacing:-0.008em;
  font-weight:300;
  color:var(--fg);
  max-width:24ch;
  text-wrap:balance;
}
.chapter__statement em{
  color:var(--coral);
  font-style:italic;
  font-weight:300;
}

/* ─────────── Capabilities ─────────── */

.caps{ padding: clamp(110px, 18vh, 200px) var(--gutter); }
.caps__inner{ max-width:var(--container); margin:0 auto; }

.caps__header{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items:end;
  margin-bottom: clamp(56px, 10vh, 112px);
}
.caps__header .display{ margin-top:20px; max-width:18ch; }
.caps__sub{
  margin:0;
  color:var(--fg-2);
  font-size:17px;
  max-width:38ch;
  line-height:1.6;
}
@media (max-width:760px){
  .caps__header{ grid-template-columns:1fr; align-items:start; gap:18px; }
}

.caps__grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:1px solid var(--hair);
  border-left:1px solid var(--hair);
}
@media (max-width:1000px){ .caps__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .caps__grid{ grid-template-columns: 1fr; } }

.cap{
  padding: 44px 36px 48px;
  border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  position:relative;
  transition: background var(--t-med);
}
.cap:hover{
  background: rgba(236,132,114,.03);
}
.cap__glyph{
  display:inline-flex;
  font-size:20px;
  color:var(--coral);
  margin-bottom:72px;
  line-height:1;
  font-weight:300;
  transition: color var(--t-med), transform var(--t-med);
}
.cap:hover .cap__glyph{ transform: scale(1.06); }
.cap__title{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:24px;
  font-weight:400;
  letter-spacing:-0.005em;
  color:var(--fg);
  line-height:1.2;
}
.cap__body{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--fg-2);
  max-width:34ch;
}

/* ─────────── In motion ─────────── */

.motion{
  padding: clamp(110px, 18vh, 200px) var(--gutter);
  border-top:1px solid var(--hair);
}
.motion__inner{ max-width:var(--container); margin:0 auto; }
.motion__header{ margin-bottom: clamp(40px, 7vh, 72px); }
.motion__header .display{ max-width:18ch; }

.player{
  position:relative;
  border-radius: clamp(14px, 1.4vw, 22px);
  overflow:hidden;
  background:#0a0706;
  border:1px solid var(--hair);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
.player__frame{ position:relative; aspect-ratio: 16/9; }
.player__poster{ position:absolute; inset:0; overflow:hidden; }
.player__poster-scene{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 22% 40%, #6b3a26 0%, transparent 60%),
    radial-gradient(50% 50% at 78% 30%, #c97a52 0%, transparent 60%),
    radial-gradient(40% 80% at 60% 90%, #2a160e 0%, transparent 70%),
    linear-gradient(180deg, #2a1812 0%, #14100e 100%);
}
.player__poster-vignette{
  position:absolute; inset:0;
  background: radial-gradient(78% 100% at 50% 50%, transparent 48%, rgba(0,0,0,.7));
}
.player__poster-grain{
  position:absolute; inset:0;
  opacity:.10;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
  mix-blend-mode:overlay;
}
.player__play{
  position:absolute; inset:0; margin:auto;
  width:96px; height:96px;
  border-radius:50%;
  border:1px solid rgba(255,234,210,.24);
  background: rgba(20,16,14,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med), color var(--t-fast);
}
.player__play svg{ margin-left:4px; }
.player__play:hover{
  transform: scale(1.04);
  border-color: var(--coral);
  color: var(--coral);
  box-shadow: 0 0 0 6px rgba(236,132,114,.10), 0 0 60px rgba(236,132,114,.30);
}
.player__hud{
  position:absolute;
  inset: auto 22px 18px;
  display:flex; justify-content:space-between;
  pointer-events:none;
}
.hud-mono{ color: rgba(243,233,219,.55); }

.motion__caption{
  margin-top:22px;
  display:flex; align-items:center; gap:14px;
  color:var(--fg-3);
}
.dot-sep{
  width:3px; height:3px; border-radius:50%;
  background:var(--coral);
  opacity:.65;
}

/* ─────────── FAQ ─────────── */

.faq{
  padding: clamp(110px, 18vh, 200px) var(--gutter);
  border-top:1px solid var(--hair);
}
.faq__inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(48px, 8vw, 120px);
}
@media (max-width:880px){ .faq__inner{ grid-template-columns:1fr; } }
.faq__header .display{ margin-top:20px; max-width:14ch; }

.faq__list{ display:flex; flex-direction:column; }

.qa{
  border-top:1px solid var(--hair);
  padding: 28px 0;
}
.qa:last-child{ border-bottom:1px solid var(--hair); }
.qa summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding-right:6px;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa__q{
  font-family:var(--font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight:400;
  letter-spacing:-0.008em;
  color:var(--fg);
  line-height:1.25;
}
.qa__chev{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--hair-2);
  position:relative;
  transition: border-color var(--t-fast), transform var(--t-med), background var(--t-fast);
}
.qa__chev::before,
.qa__chev::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:12px; height:1.25px;
  background:var(--fg);
  transform-origin:center;
  transform: translate(-50%, -50%);
  transition: opacity var(--t-fast), transform var(--t-med), background var(--t-fast);
}
.qa__chev::after{ transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__chev{ border-color: var(--coral); }
.qa[open] .qa__chev::before{ background: var(--coral); }
.qa[open] .qa__chev::after{ opacity:0; transform: translate(-50%, -50%) rotate(0); }

.qa__a{
  padding: 16px 64px 4px 0;
  color:var(--fg-2);
  font-size:16px;
  line-height:1.65;
  max-width:62ch;
  animation: qaIn 360ms ease-out;
}
.qa__a p{ margin:0; }
@keyframes qaIn{
  from{ opacity:0; transform: translateY(-4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ─────────── End CTA ─────────── */

.endcta{
  padding: clamp(120px, 22vh, 220px) var(--gutter);
  border-top:1px solid var(--hair);
  text-align:center;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.endcta::before{
  content:"";
  position:absolute; inset:auto 0 -50% 0;
  height:100%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(236,132,114,.16), transparent 70%);
  z-index:-1;
  pointer-events:none;
}
.endcta__inner{ max-width:920px; margin:0 auto; }
.endcta__title{
  font-family:var(--font-display);
  font-size: clamp(60px, 8.5vw, 130px);
  line-height:.98;
  letter-spacing:-0.022em;
  font-weight:300;
  margin:0 0 24px;
  text-wrap:balance;
  color:var(--fg);
}
.endcta__title em{
  color:var(--coral);
  font-style:italic;
  font-weight:300;
}
.endcta__sub{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--fg-2);
  font-size:22px;
  margin:0 0 40px;
}

/* ─────────── Footer ─────────── */

.foot{
  padding: 88px var(--gutter) 40px;
  border-top:1px solid var(--hair);
}
.foot__inner{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 2fr;
  gap: clamp(40px, 6vw, 96px);
}
@media (max-width:880px){ .foot__inner{ grid-template-columns:1fr; } }
.foot__tag{
  color:var(--fg-2);
  font-size:14.5px;
  line-height:1.6;
  max-width:36ch;
  margin:16px 0 0;
}
.foot__cols{
  display:grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width:640px){ .foot__cols{ grid-template-columns:1fr 1fr; } }
.foot__h{ margin:0 0 16px; color:var(--fg-3); }
.foot__col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.foot__col a{
  color:var(--fg);
  font-size:14.5px;
  transition: color var(--t-fast);
}
.foot__col a:hover{ color: var(--coral); }

.foot__news-sub{
  color:var(--fg-2);
  font-size:13.5px;
  margin:0 0 14px;
  line-height:1.55;
}
.news{
  display:flex;
  border:1px solid var(--hair-2);
  border-radius:var(--rad-pill);
  overflow:hidden;
  max-width:320px;
  transition: border-color var(--t-fast);
  background: rgba(255,255,255,.02);
}
.news:focus-within{ border-color: var(--coral); }
.news input{
  flex:1; min-width:0;
  background:transparent;
  border:0; outline:0;
  color:var(--fg);
  font:inherit; font-size:14px;
  padding:10px 16px;
}
.news input::placeholder{ color:var(--fg-3); }
.news button{
  background:var(--fg);
  color:#1a1513;
  border:0;
  padding:0 16px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--t-fast), color var(--t-fast);
}
.news button:hover{ background: var(--coral); color: #1a1513; }

.foot__bottom{
  grid-column:1 / -1;
  margin-top:64px;
  padding-top:28px;
  border-top:1px solid var(--hair);
  display:flex; justify-content:space-between;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-3);
  flex-wrap:wrap; gap:12px;
}

/* ─────────── Reveal ─────────── */

.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity:1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}