/* =============================================================================
   Features page. Loaded only on /features — shared tokens/buttons live in site.css.
   ========================================================================== */

@keyframes csn-wind   { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes csn-mesh   { 0%,100% { transform: skewX(0deg) scaleY(1); } 50% { transform: skewX(6deg) scaleY(1.06); } }
@keyframes csn-floats { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes csn-dash   { to { stroke-dashoffset: -40; } }

/* Several of these loop forever — respect the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .featpage *, .featpage *::before, .featpage *::after {
    animation: none !important; transition: none !important;
  }
}

.featpage { color: var(--ink); background: var(--bg); overflow-x: hidden; }

/* ---------------------------------------------------- section heading kit -- */
.featpage .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.featpage .eyebrow--center { justify-content: center; }
.featpage .eyebrow__rule { width: 26px; height: 2px; background: #05a558; flex: none; }
.featpage .eyebrow__text {
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #05a558; font-weight: 600;
}
.featpage .eyebrow--accent .eyebrow__rule { background: var(--accent); }
.featpage .eyebrow--accent .eyebrow__text { color: var(--accent); }

/* --------------------------------------------------------------- page hero -- */
.feat-hero { padding: 88px 32px 60px; text-align: center; }
.feat-hero__inner { max-width: 860px; margin: 0 auto; }
.feat-hero .eyebrow { margin-bottom: 20px; }
.feat-hero__title {
  margin: 0; font-size: 64px; line-height: 1.02; letter-spacing: -.04em;
  font-weight: 700; color: #14160f;
}
.feat-hero__lede { max-width: 620px; margin: 24px auto 0; font-size: 19px; line-height: 1.55; color: #565a4f; }
.feat-hero__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; }
.feat-chip {
  font-size: 13.5px; font-weight: 600; color: #3d4136;
  background: #fff; border: 1px solid rgba(20,22,15,.1); border-radius: 100px; padding: 8px 15px;
}

/* -------------------------------------------------------------- spotlights -- */
.spot { padding: 92px 32px; }
.spot--dark { background: #0f1210; color: #e8ebe6; }
.spot--light { background: #f1f4f8; }
.spot__inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 72px; }
.spot__inner--reverse { flex-direction: row-reverse; }
.spot__text { flex: 1; }
.spot__title {
  margin: 0 0 20px; font-size: 46px; line-height: 1.12; padding-bottom: 3px;
  letter-spacing: -.03em; font-weight: 700;
}
.spot--dark .spot__title { color: #f4f6f2; }
.spot--light .spot__title { color: #14160f; }
.spot__lede { margin: 0 0 28px; font-size: 18px; line-height: 1.6; max-width: 480px; }
.spot--dark .spot__lede { color: #9aa39c; }
.spot--light .spot__lede { color: #565a4f; }
.spot__lede strong { font-weight: 600; }
.spot--dark .spot__lede strong { color: #e8ebe6; }
.spot--light .spot__lede strong { color: #14160f; }

/* rigging bullet list */
.spot__list { display: flex; flex-direction: column; gap: 14px; }
.spot__item { display: flex; align-items: flex-start; gap: 12px; }
.spot__bullet {
  margin-top: 4px; width: 16px; height: 16px; border-radius: 5px; flex: none;
  background: rgba(0,214,119,.16); display: flex; align-items: center; justify-content: center;
}
.spot__bullet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.spot__item-title { font-size: 15.5px; font-weight: 600; color: #e8ebe6; }
.spot__item-desc { font-size: 14px; color: #8a9188; }

/* compact dot feature list (vector+raster, painting) */
.spot__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.spot__feat { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; }
.spot--light .spot__feat { color: #2c3026; }
.spot--dark .spot__feat { color: #c7ccd0; }
.spot__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* stage */
.spot__stage {
  flex: 1; height: 460px; border-radius: 20px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.spot__stage--rig { background: radial-gradient(80% 80% at 50% 40%, #161a16, #0c0f0d); border: 1px solid #1e231e; }
.spot__stage--vr  { background: #fff; border: 1px solid rgba(20,22,15,.1); box-shadow: 0 30px 60px -34px rgba(18,40,28,.3); }
.spot__stage--paint { border: 1px solid #1e231e; box-shadow: 0 30px 60px -34px rgba(0,0,0,.6); }

.spot__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 34px 34px;
}
.vr-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(20,22,15,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,15,.045) 1px, transparent 1px);
  background-size: 30px 30px;
}

.rig-paths { position: absolute; left: 26px; top: 60px; width: 120px; height: 300px; opacity: .55; }
.rig-paths__p { animation: csn-dash 1.6s linear infinite; }
.rig-paths__p--2 { animation-duration: 2s; }
.rig-paths__p--3 { animation-duration: 2.4s; }

.spot__mascot { position: relative; }
.spot__mascot--wind { animation: csn-wind 4.5s ease-in-out infinite; transform-origin: 50% 90%; }
.spot__mascot-img { display: block; }
.spot__mascot-img--rig   { width: 230px; }
.spot__mascot-img--vr    { width: 220px; }
.spot__mascot-img--paint { width: 170px; filter: drop-shadow(0 16px 26px rgba(0,0,0,.4)); }
.spot__bones { position: absolute; inset: 0; width: 230px; height: 150px; overflow: visible; }
.vr-mesh {
  position: absolute; left: -10px; top: -4px; width: 260px; height: 210px; overflow: visible;
  animation: csn-mesh 4s ease-in-out infinite; transform-origin: 50% 50%;
}

/* painted-background composition */
.paint__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1c3550 0%, #2f5064 42%, #3f5a3e 74%, #2c422c 100%); }
.paint__sun { position: absolute; width: 230px; height: 230px; border-radius: 50%; top: 34px; right: 64px; background: radial-gradient(circle, rgba(255,214,130,.6), transparent 66%); filter: blur(4px); }
.paint__hill { position: absolute; border-radius: 50%; filter: blur(3px); }
.paint__hill--a { bottom: -70px; left: -50px; width: 420px; height: 250px; background: #33513a; }
.paint__hill--b { bottom: -96px; right: -60px; width: 470px; height: 280px; background: #284834; }
.paint__strokes {
  position: absolute; inset: 0; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(118deg, rgba(255,255,255,.04) 0 2px, transparent 2px 10px);
}
.paint__figure { position: absolute; left: 50%; bottom: 88px; margin-left: -85px; z-index: 2; animation: csn-floats 5s ease-in-out infinite; }
.paint__bones { position: absolute; inset: 0; width: 170px; height: 120px; overflow: visible; pointer-events: none; }

/* stage annotations */
.spot__note { position: absolute; top: 18px; left: 20px; font-size: 11px; color: #5a625c; }
.spot__note--light { color: #a6a99d; }
.paint__label { top: 16px; left: 18px; color: rgba(255,255,255,.7); }

.spot__pills { position: absolute; display: flex; gap: 8px; }
.spot__pills--dark, .spot__pills--light { bottom: 18px; right: 20px; }
.spot__pill { font-size: 11px; padding: 5px 10px; border-radius: 100px; }
.spot__pills--dark  .spot__pill { border: 1px solid #24291f; color: #8a9188; }
.spot__pills--light .spot__pill { border: 1px solid rgba(20,22,15,.12); color: #6b6f63; }

.paint__chips { bottom: 16px; left: 18px; }
.paint__chip { font-size: 11px; padding: 5px 11px; background: rgba(0,0,0,.4); border-radius: 100px; color: #e8ebe6; }
.paint__chip--accent { background: var(--accent); color: #05130c; font-weight: 600; }

/* -------------------------------------------------------- timeline & effects -- */
.feat-ui { padding: 92px 32px; background: #e6ebf1; }
.feat-ui__inner { max-width: 1180px; margin: 0 auto; }
.feat-ui__head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.feat-ui__head .eyebrow { margin-bottom: 18px; }
.feat-ui__title {
  margin: 0 0 16px; font-size: 44px; line-height: 1.12; padding-bottom: 3px;
  letter-spacing: -.03em; font-weight: 700; color: #14160f;
}
.feat-ui__lede { margin: 0; font-size: 18px; line-height: 1.55; color: #565a4f; }
.feat-ui__stack { display: flex; flex-direction: column; gap: 20px; }
.feat-ui__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ui-card {
  margin: 0; background: #1a1b18; border: 1px solid rgba(20,22,15,.14); border-radius: 16px;
  overflow: hidden; box-shadow: 0 20px 40px -26px rgba(18,40,28,.35);
}
.ui-card--wide { box-shadow: 0 24px 50px -28px rgba(18,40,28,.4); }
.ui-card__shot { overflow: hidden; background: #2e2e2e; }
.ui-card__shot--crop { height: 238px; }
.ui-card__img { display: block; width: 100%; }
.ui-card__cap { padding: 18px 22px; border-top: 1px solid #21262a; }
.ui-card--wide .ui-card__cap { padding: 18px 24px; }
.ui-card__title { font-size: 17px; font-weight: 700; color: #f4f6f2; }
.ui-card__title--sm { font-size: 16px; }
.ui-card__desc { font-size: 14px; color: #9aa39c; margin-top: 3px; }
.ui-card--wide .ui-card__desc { font-size: 14.5px; margin-top: 4px; }

/* ------------------------------------------------------------ capability grid -- */
.feat-caps { padding: 92px 32px; background: #f1f4f8; }
.feat-caps__inner { max-width: 1180px; margin: 0 auto; }
.feat-caps__head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 48px; }
.feat-caps__title {
  margin: 0; font-size: 44px; line-height: 1.12; padding-bottom: 3px;
  letter-spacing: -.03em; font-weight: 700; color: #14160f; max-width: 620px;
}
.feat-caps__note { max-width: 360px; font-size: 16px; line-height: 1.55; color: #565a4f; margin: 0; }
.feat-caps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap-card { background: #fff; border: 1px solid rgba(20,22,15,.09); border-radius: 14px; padding: 22px; }
.cap-card svg { display: block; }
.cap-card__title { font-size: 16.5px; font-weight: 700; margin-top: 14px; }
.cap-card__desc { font-size: 14px; color: #6b6f63; margin-top: 5px; line-height: 1.45; }
.feat-caps__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }
.feat-tag { font-size: 13.5px; color: #565a4f; background: #fff; border: 1px solid rgba(20,22,15,.09); border-radius: 100px; padding: 8px 15px; }

/* -------------------------------------------------------------------- CTA band -- */
.feat-cta { padding: 20px 32px 100px; background: #f1f4f8; }
.feat-cta__box {
  max-width: 1180px; margin: 0 auto; background: linear-gradient(120deg, #0f1210, #14201a);
  border-radius: 22px; padding: 60px; text-align: center; position: relative; overflow: hidden;
}
.feat-cta__glow {
  position: absolute; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,214,119,.2), transparent 62%);
  top: -220px; left: 50%; transform: translateX(-50%);
}
.feat-cta__body { position: relative; z-index: 2; }
.feat-cta__title { margin: 0 0 14px; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; color: #f4f6f2; }
.feat-cta__lede { margin: 0 auto 28px; max-width: 520px; font-size: 17px; line-height: 1.55; color: #9aa39c; }
.feat-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.feat-btn { text-decoration: none; background: var(--accent); color: #05130c; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 12px; }
.feat-btn--ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #e8ebe6; font-weight: 600; }

/* ------------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .spot__inner, .spot__inner--reverse { flex-direction: column; gap: 44px; }
  .spot__stage { width: 100%; height: 380px; }
  .feat-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .feat-ui__row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .feat-hero, .spot, .feat-ui, .feat-caps, .feat-cta { padding-left: 20px; padding-right: 20px; }
  .feat-hero__title { font-size: 42px; }
  .spot__title, .feat-ui__title, .feat-caps__title, .feat-cta__title { font-size: 30px; line-height: 1.15; }
  .spot__feats { grid-template-columns: 1fr; }
  .feat-caps__grid { grid-template-columns: 1fr; }
  .feat-cta__box { padding: 40px 26px; }
}