/*
  www/css/strategy.css
  "Why you'll lose sleep" feature tiles + the "one more turn" counter gag,
  the final red "Enlist now" call to action, and the footer.
*/

/* ---------- Why ---------- */
.why { background: var(--ghost); color: var(--ink); }
.why .section__title em { color: var(--rojo); }
.why .eyebrow { background: var(--ink); color: var(--limao); }
.why .section__head { position: relative; }
.why__knight {
  position: absolute; right: 8%; top: -24px; width: clamp(130px, 15vw, 220px);
  rotate: 7deg; filter: drop-shadow(12px 16px 0 rgba(10, 17, 24, .12)); animation: bob 3.6s ease-in-out infinite;
}

.features {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px);
}
.feature {
  padding: 26px 24px 28px; border: 3px solid var(--ink); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-hard);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.feature:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 10px 10px 0 var(--rojo); }
.feature__icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 14px;
  background: var(--rojo); color: var(--ghost); box-shadow: 0 4px 0 var(--rojo-lo);
}
.feature__icon svg { width: 32px; height: 32px; }
.feature:nth-child(3n + 2) .feature__icon { background: var(--ink); color: var(--limao); box-shadow: 0 4px 0 #000; }
.feature:nth-child(3n) .feature__icon { background: var(--petroleo); color: var(--verde); box-shadow: 0 4px 0 #062a31; }
.feature h3 { font: 400 26px/1.05 var(--f-display); text-transform: lowercase; }
.feature p { margin-top: 10px; font-size: 15px; line-height: 1.5; opacity: .8; }

/* One-more-turn panel */
.turns {
  max-width: 820px; margin: clamp(48px, 7vw, 96px) auto 0;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(22px, 3vw, 36px); border-radius: 22px;
  background: var(--noturno); color: var(--ghost); box-shadow: 12px 12px 0 var(--rojo);
  rotate: -1deg;
}
.turns__counter { display: grid; justify-items: center; padding: 14px 24px; border-radius: 14px; background: var(--limao); color: var(--ink); }
.turns__label { font: 400 14px/1 var(--f-stencil); letter-spacing: .3em; text-transform: uppercase; }
.turns__num { font: 400 clamp(64px, 9vw, 110px)/.9 var(--f-stencil); font-variant-numeric: tabular-nums; }
.turns__num.is-bump { animation: bump .35s var(--ease-out); }
.turns__clock { font: 400 24px/1 var(--f-pixel); color: #7CFF9E; letter-spacing: .06em; }
.turns__quip { margin: 10px 0 18px; font: 400 clamp(22px, 2.4vw, 32px)/1.1 var(--f-display); text-transform: lowercase; }
.turns .btn--ink { --bg: var(--rojo); --fg: var(--ghost); box-shadow: 0 5px 0 var(--rojo-lo); }

/* ---------- Enlist CTA ---------- */
.enlist {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(110px, 14vw, 190px) var(--gutter); text-align: center;
  background: var(--rojo);
}
.sunburst--slow { left: 50%; top: 45%; animation-duration: 220s; animation-direction: reverse; }
.enlist__inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; display: grid; justify-items: center; }
.mascot { width: clamp(96px, 11vw, 140px); margin-bottom: 18px; --helm: #0A1118; --bone: var(--ghost); --ink: var(--rojo); filter: drop-shadow(5px 6px 0 rgba(10, 17, 24, .5)); animation: bob 3s ease-in-out infinite; }
.enlist__title { font: 400 clamp(64px, 12vw, 180px)/.85 var(--f-display); letter-spacing: -.03em; text-transform: lowercase; text-shadow: 6px 7px 0 var(--ink); }
.enlist__sub { max-width: 30ch; margin: 22px 0 30px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; }
.signup--big { justify-content: center; width: 100%; }
.enlist__boom { position: absolute; z-index: 1; width: clamp(140px, 18vw, 280px); left: 4%; top: 12%; rotate: -10deg; animation: float 5s ease-in-out infinite; }
.enlist__unit { position: absolute; z-index: 1; width: clamp(150px, 20vw, 320px); right: 3%; bottom: 6%; filter: drop-shadow(0 16px 12px rgba(60, 0, 0, .4)); }

/* ---------- Footer ---------- */
.footer { display: grid; justify-items: center; gap: 10px; padding: 56px var(--gutter) 64px; background: var(--noturno); text-align: center; font-size: 14px; }
.footer__word { width: 180px; color: var(--rojo); margin-bottom: 8px; }
.footer a { color: var(--limao); text-decoration: none; }
.footer__fine { opacity: .55; font-size: 13px; }

@keyframes bump { 40% { transform: scale(1.25) rotate(-4deg); } }

@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .why__knight { width: 76px; right: 0; top: -82px; }
  .turns { grid-template-columns: 1fr; justify-items: start; rotate: 0deg; }
  .enlist__boom { width: 120px; left: -20px; top: 40px; }
  .enlist__unit { width: 130px; right: -14px; bottom: 10px; opacity: .9; }
}