/*
 * Event landing pages — first used by /imc-2026
 * (resources/views/app/pages/imc-2026.blade.php).
 *
 * Plain, unlayered CSS with an `ev-` prefix and nothing event-specific, so a
 * page for the next show (Web Summit, BTS, ENS) can reuse it with its own
 * copy. Visual language follows the homepage and founder page: dark hero on
 * hero-bg.webp, brand green #00B26B, white and tinted sections, rounded cards.
 * Loaded only on the pages that use it, via @section('styles').
 */

.ev {
  --ev-green: #00B26B;
  --ev-green-dark: #00955A;
  --ev-ink: #1C2522;
  --ev-muted: #56615C;
  --ev-line: #DDE5E1;
  --ev-tint: #F3F7F5;
  --ev-dark: #050806;
  --ev-dark-2: #0B1410;
}
.ev { color: var(--ev-ink); }
.ev * { box-sizing: border-box; }
/* Same measure as the site header (partials/header: px-4 sm:px-6 around a
   max-w-7xl = 1280px row), so the content lines up with the logo and the
   Book A Meeting button. */
.ev-wrap { width: 100%; max-width: 1312px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .ev-wrap { max-width: 1328px; padding: 0 24px; } }

/* ---------------------------------------------------------------- */
/* Type                                                               */
/* ---------------------------------------------------------------- */
.ev-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-green); }
.ev-eyebrow--light { color: #6EE7B7; }
.ev-eyebrow--pill {
  display: inline-block; padding: 7px 14px; border-radius: 999px; letter-spacing: .06em;
  border: 1px solid rgba(0, 178, 107, .55); background: rgba(0, 178, 107, .14); color: #fff;
  font-size: 12px; line-height: 1.4;
}
.ev-h2 { margin: 0 0 28px; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.ev-h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.ev-lead { max-width: 60ch; margin: -12px 0 28px; font-size: 17px; line-height: 1.6; color: var(--ev-muted); }
.ev-note { margin: 12px 0 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
@media (min-width: 768px) { .ev-h2 { font-size: 38px; } }

/* ---------------------------------------------------------------- */
/* Buttons (the primary one is the only green-filled element)         */
/* ---------------------------------------------------------------- */
.ev-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 14px; border: 1.5px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.ev-btn img { flex: none; }
.ev-btn:focus-visible { outline: 3px solid #6EE7B7; outline-offset: 3px; }
.ev-btn--primary { background: var(--ev-green); color: #fff; }
.ev-btn--primary:hover { background: var(--ev-green-dark); color: #fff; }
.ev-btn--block { width: 100%; }

.ev-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 479px) { .ev-actions .ev-btn { width: 100%; } }

/* ---------------------------------------------------------------- */
/* Sections, grids, cards, chips                                      */
/* ---------------------------------------------------------------- */
.ev-section { padding: 64px 0; }
.ev-section--tint { background: var(--ev-tint); }
.ev-section--dark { background: var(--ev-dark); color: #fff; }
.ev-section--dark .ev-lead { color: rgba(255, 255, 255, .75); }
@media (min-width: 768px) { .ev-section { padding: 96px 0; } }

.ev-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #E6F7F0; border: 1px solid rgba(0, 178, 107, .3); }
.ev-icon img { width: 24px; height: 24px; }

/* Problem: headline + an illustrative decline chart, beside the numbered pains */
.ev-problem__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ev-problem__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }
.ev-problem .ev-h2 { max-width: 16ch; }

.ev-decline { margin: 0; padding: 20px 20px 16px; border: 1px solid var(--ev-line); border-radius: 18px; background: var(--ev-tint); }
.ev-decline__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 44px; font-size: 13px; font-weight: 600; color: var(--ev-muted); }
.ev-decline__tag { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--ev-line); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ev-decline__plot { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 140px; border-bottom: 1px solid var(--ev-line); }
.ev-decline__bar { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--ev-green); }
.ev-decline__bar.is-falling { background: linear-gradient(180deg, #F59E0B, #FCD34D); opacity: .9; }
.ev-decline__bar.is-stopped { background: #E5484D; }
.ev-decline__mark { position: absolute; bottom: 100%; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ev-decline__mark::after { content: ""; position: absolute; top: 100%; width: 1px; height: 148px; border-left: 1px dashed currentColor; opacity: .5; }
.ev-decline__mark--early { left: var(--at); background: #FEF3C7; color: #92400E; }
.ev-decline__mark--early::after { left: 0; }
.ev-decline__mark--late { right: 0; background: #FDE8E8; color: #B42318; }
.ev-decline__mark--late::after { right: 0; }
.ev-decline__axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ev-muted); }

/* Decline chart reveal (event.js adds .is-armed, then .is-inview on scroll):
   bars grow in week by week, "Decline starts" appears as the first amber bar
   lands, the dashed guides draw down, "You notice" lands last on the red bar. */
.ev-decline.is-armed .ev-decline__bar { transform: scaleY(0); transform-origin: bottom; }
.ev-decline.is-armed .ev-decline__mark { opacity: 0; transform: translateY(6px); }
.ev-decline.is-armed .ev-decline__mark::after { transform: scaleY(0); transform-origin: top; }
.ev-decline.is-inview .ev-decline__bar { transform: scaleY(1); transition: transform .55s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms); }
.ev-decline.is-inview .ev-decline__mark { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--at-i) * 110ms + 350ms), transform .35s ease calc(var(--at-i) * 110ms + 350ms); }
.ev-decline.is-inview .ev-decline__mark::after { transform: scaleY(1); transition: transform .5s ease calc(var(--at-i) * 110ms + 500ms); }
.ev-decline.is-inview .ev-decline__bar.is-stopped { animation: ev-stop-pulse 1.6s ease-in-out calc(var(--i) * 110ms + 900ms) 2; }
.ev-decline.is-inview .ev-decline__mark--late { animation: ev-notice 0.5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--at-i) * 110ms + 350ms) both; }
@keyframes ev-stop-pulse { 50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, .25); } }
@keyframes ev-notice { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

.ev-pains { margin: 0; padding: 0; list-style: none; }
.ev-pains li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 24px 0; border-top: 1px solid var(--ev-line); }
.ev-pains li:last-child { border-bottom: 1px solid var(--ev-line); }
.ev-pains__n { min-width: 22px; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--ev-green); }
.ev-pains p { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500; color: var(--ev-ink); }
@media (min-width: 768px) { .ev-pains li { gap: 20px; padding: 28px 0; } .ev-pains p { font-size: 20px; } }

/* ---------------------------------------------------------------- */
/* Hero                                                               */
/* ---------------------------------------------------------------- */
.ev-hero { position: relative; overflow: hidden; background: var(--ev-dark); color: #fff; padding: 104px 0 56px; }
.ev-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Calm the banner: darken it behind the copy (its brightest streak sat under
   the headline) and fade it out at the bottom, so the illustration is the one
   glowing focal point. The swoosh stays faintly visible as texture. */
.ev-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 6, .82) 0%, rgba(5, 8, 6, .62) 40%, rgba(5, 8, 6, .35) 70%, rgba(5, 8, 6, .5) 100%),
    linear-gradient(180deg, rgba(5, 8, 6, 0) 60%, rgba(5, 8, 6, .85) 100%);
}
.ev-hero::before {
  content: ""; position: absolute; z-index: 1; right: -10%; top: 10%; width: 60%; height: 90%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 178, 107, .22), transparent);
}
@media (max-width: 1023px) {
  .ev-hero::after { background: linear-gradient(180deg, rgba(5, 8, 6, .55) 0%, rgba(5, 8, 6, .72) 50%, rgba(5, 8, 6, .9) 100%); }
  .ev-hero::before { right: -30%; top: 45%; width: 130%; height: 60%; }
}
.ev-hero__grid { position: relative; z-index: 2; display: grid; gap: 40px; align-items: center; }
.ev-hero__title { margin: 18px 0 16px; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.ev-hero__lead { max-width: 56ch; margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
@media (min-width: 768px) {
  .ev-hero { padding: 136px 0 88px; }
  .ev-hero__title { font-size: 52px; }
  .ev-hero__lead { font-size: 19px; }
}
@media (min-width: 1024px) {
  .ev-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .ev-hero__title { font-size: 58px; }
}

/* Phones: one-line event pill, a three-line headline, tighter stack */
.ev-show-sm { display: none; }
@media (max-width: 639px) {
  .ev-hide-sm { display: none; }
  .ev-show-sm { display: inline; }
  .ev-hero { padding-bottom: 40px; }
  .ev-hero__grid { gap: 32px; }
  .ev-hero .ev-eyebrow--pill { font-size: 11px; padding: 6px 12px; white-space: nowrap; }
  .ev-hero__title { margin: 16px 0 14px; font-size: clamp(28px, 8.2vw, 34px); line-height: 1.12; }
  .ev-hero__lead { font-size: 16px; }
  .ev-hero .ev-actions { margin-top: 24px; }
}

/* ---------------------------------------------------------------- */
/* Stats band (proof)                                                 */
/* ---------------------------------------------------------------- */
.ev-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-radius: 20px; background: var(--ev-dark-2); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.ev-stats li { padding: 24px 20px; border-color: rgba(255, 255, 255, .08); border-style: solid; border-width: 0; }
.ev-stats li:nth-child(odd) { border-right-width: 1px; }
.ev-stats li:nth-child(-n+2) { border-bottom-width: 1px; }
@media (min-width: 900px) {
  .ev-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ev-stats li { padding: 32px 28px; border-width: 0; }
  .ev-stats li + li { border-left-width: 1px; }
}
.ev-stats__n { display: block; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--ev-green); }
@media (min-width: 768px) { .ev-stats__n { font-size: 52px; } }
.ev-stats__l { display: block; margin-top: 8px; color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- */
/* Lead form                                                          */
/* ---------------------------------------------------------------- */
/* one card: dark intro panel + white form panel */
.ev-hc { display: grid; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--ev-line); box-shadow: 0 40px 80px -48px rgba(0, 0, 0, .45); }
@media (min-width: 1024px) { .ev-hc { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.ev-hc__intro {
  position: relative; padding: 32px 24px; color: #fff; isolation: isolate;
  background: radial-gradient(ellipse at 0% 0%, rgba(0, 178, 107, .45), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(0, 178, 107, .2), transparent 55%), var(--ev-dark-2);
}
.ev-hc__intro .ev-h2 { margin-bottom: 12px; }
.ev-hc__lead { margin: 0 0 28px; max-width: 42ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.ev-hc__label { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
@media (min-width: 768px) { .ev-hc__intro { padding: 44px 40px; } }
@media (min-width: 1024px) { .ev-hc__intro { padding: 56px 48px; } }

.ev-hc__form { padding: 28px 20px; }
@media (min-width: 768px) { .ev-hc__form { padding: 44px 40px; } }
@media (min-width: 1024px) { .ev-hc__form { padding: 56px 48px; } }
.ev-fields { display: grid; gap: 16px; }
@media (min-width: 640px) { .ev-fields { grid-template-columns: 1fr 1fr; } .ev-field--full { grid-column: 1 / -1; } }
.ev-form label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.ev-form label span { font-weight: 400; color: var(--ev-muted); }
.ev-form input, .ev-form textarea {
  display: block; width: 100%; padding: 13px 14px; border: 1px solid #C9D3CE; border-radius: 12px;
  font: inherit; font-size: 16px; color: var(--ev-ink); background: #F8FAF9; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.ev-form input::placeholder, .ev-form textarea::placeholder { color: #98A29E; }
.ev-form input:focus, .ev-form textarea:focus { outline: none; background: #fff; border-color: var(--ev-green); box-shadow: 0 0 0 3px rgba(0, 178, 107, .2); }
.ev-form .error-help-block { margin: 4px 0 0; font-size: 13px; color: #B42318; }
.ev-form .error-help-block:empty { display: none; }
.ev-form button { margin-top: 22px; }
.ev-hc__small { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ev-muted); text-align: center; }
.ev-hc__small a, .ev-form .success-block a { color: var(--ev-green-dark); font-weight: 600; }
.ev-hc__done { display: grid; justify-items: center; gap: 8px; padding: 40px 0; text-align: center; }
.ev-hc__done p { margin: 0; color: var(--ev-muted); }
.ev-form .spinner-border-sm { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: ev-spin .7s linear infinite; }
@keyframes ev-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- */
/* FAQ (native <details>, no JS)                                       */
/* ---------------------------------------------------------------- */
.ev-faq-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1024px) { .ev-faq-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; } .ev-faq-side { position: sticky; top: 140px; } }
.ev-faq-side .ev-h2 { margin-bottom: 12px; }
.ev-faq-side__lead { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--ev-muted); }

.ev-faq { display: grid; gap: 12px; }
.ev-faq details { border-radius: 18px; background: #fff; border: 1px solid var(--ev-line); transition: border-color .2s, box-shadow .2s; }
.ev-faq details[open] { border-color: rgba(0, 178, 107, .55); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .35); background: linear-gradient(180deg, #F0FBF6, #fff 55%); }
.ev-faq summary {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  font-size: 18px; font-weight: 600; cursor: pointer; list-style: none;
}
.ev-faq summary::-webkit-details-marker { display: none; }
.ev-faq__q { flex: 1; }
.ev-faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; background-color: currentColor; transition: transform .2s;
  -webkit-mask: url("../img/ecommerce/icons/faq-plus.svg") center / contain no-repeat;
          mask: url("../img/ecommerce/icons/faq-plus.svg") center / contain no-repeat;
}
.ev-faq details[open] summary::after { transform: rotate(45deg); color: var(--ev-green-dark); }
.ev-faq summary:focus-visible { outline: 3px solid var(--ev-green); outline-offset: 2px; border-radius: 18px; }
.ev-faq details p { margin: 0; padding: 0 20px 22px 84px; max-width: 70ch; line-height: 1.65; color: var(--ev-muted); }
@media (max-width: 639px) { .ev-faq summary { font-size: 16px; padding: 16px; gap: 12px; } .ev-faq .ev-icon { width: 40px; height: 40px; } .ev-faq details p { padding: 0 16px 18px; } }

/* ---------------------------------------------------------------- */
/* Final CTA + contact                                                */
/* ---------------------------------------------------------------- */
.ev-final { background: radial-gradient(ellipse at 15% 0%, rgba(0, 178, 107, .32), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(0, 178, 107, .14), transparent 50%), var(--ev-dark); }
.ev-final__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ev-final__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; } }
.ev-final__title { margin: 0 0 16px; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
@media (min-width: 768px) { .ev-final__title { font-size: 52px; } }
.ev-final__lead { margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

.ev-person { padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (min-width: 768px) { .ev-person { padding: 28px; } }
.ev-person p { margin: 0; }
.ev-person__head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ev-person__head img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ev-green); box-shadow: 0 0 0 5px rgba(0, 178, 107, .15); }
.ev-person__name { font-size: 20px; font-weight: 700; }
.ev-person__role { margin-top: 2px !important; font-size: 14px; color: rgba(255, 255, 255, .65); }
.ev-person__ways { display: grid; gap: 4px; margin: 14px 0; padding: 0; list-style: none; }
.ev-person__ways a { display: flex; align-items: center; gap: 14px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; color: #fff; text-decoration: none; transition: background-color .2s; }
.ev-person__ways a:hover { background: rgba(255, 255, 255, .06); }
.ev-person__ways a:focus-visible { outline: 2px solid var(--ev-green); }
.ev-person__ways small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); }
.ev-person__ways span:last-child { min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 500; }
.ev-person__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0, 178, 107, .14); border: 1px solid rgba(0, 178, 107, .35); }
.ev-person__foot { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #6EE7B7; }

@media (prefers-reduced-motion: reduce) {
  .ev-btn, .ev-faq summary::after, .ev-faq details { transition: none; }
}