/* euWards landing page — layout, components, animation.
   Design tokens (colors, type, dark mode, .euwards-card, .euwards-diagonal)
   come from colors_and_type.css. This file adds page-specific pieces only. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: var(--secondary); text-decoration: none; }
a:hover { color: var(--primary); }

.ew-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.ew-navlink { color: var(--fg); font-size: 14px; font-weight: 500; transition: color .14s; }
.ew-navlink:hover { color: var(--primary); }

.ew-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px;
  border-radius: 9999px; font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  white-space: nowrap; transition: opacity .14s, background .14s; cursor: pointer; border: none;
}
.ew-pill-green { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-btn-green); }
.ew-pill-green:hover { opacity: .88; color: var(--primary-fg); }
.ew-pill-outline { background: transparent; color: var(--fg); border: 1.5px solid var(--border-strong); }
.ew-pill-outline:hover { background: var(--bg-elev-1); color: var(--fg); }
.ew-pill-sm { height: 38px; padding: 0 18px; font-size: 14px; }

.ew-frame { border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: var(--shadow-card-strong); }
.ew-framebar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--bg-elev-1); border-bottom: 1px solid var(--border); }
.ew-framebar .dot { width: 10px; height: 10px; border-radius: 9999px; }
.ew-frame img { display: block; width: 100%; transition: opacity .14s; }

.ew-icon { display: inline-flex; align-items: center; justify-content: center; }
.ew-num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: .04em; }

/* ---- scroll reveal — JS-driven (IntersectionObserver adds .in). Works in every
   browser. Hidden state is gated behind .js so no-JS shows everything. ---- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

.js .reveal-flip { opacity: 0; transform: perspective(1400px) rotateX(12deg) translateY(24px);
  transform-origin: center top; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal-flip.in { opacity: 1; transform: perspective(1400px) rotateX(0deg) translateY(0); }

/* card "lift forward" — shadow grows from flat as the card enters */
.js .euwards-card, .js .lift { transition: box-shadow .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.js .euwards-card:not(.in), .js .lift:not(.in) { box-shadow: 0 0 0 0 rgba(48,51,72,0) !important; transform: translate(3px, 3px); }
.js .euwards-card.in, .js .lift.in { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-flip, .js .euwards-card, .js .lift {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---- responsive / mobile (inline grids collapsed via attribute selectors) ---- */
@media (max-width: 900px) {
  .ew-nav-mid { display: none !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 0.85fr 1.15fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.15fr 0.85fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .ew-wrap { padding: 0 18px !important; }
  [style*="grid-template-columns:"] { grid-template-columns: 1fr !important; }
  [style*="padding: 96px 0"] { padding: 56px 0 !important; }
  [style*="padding-top: 84px"] { padding-top: 52px !important; padding-bottom: 44px !important; }
  h1[style] { font-size: 38px !important; line-height: 1.08 !important; }
  h2[style] { font-size: 27px !important; }
  h3[style*="font-size: 26px"] { font-size: 22px !important; }
}