/* Option E: Option D's black, white and cobalt look, themed around the sky-and-horse hero.
   Loaded after styles.css (Option B) and d.css (Option D). */

/* Sky gradients used where there is no photo */
.e-sky { background: linear-gradient(180deg, #2E6FD8 0%, #5D97E6 45%, #A9C9F2 100%); }
.e-sky-deep { background: radial-gradient(90% 70% at 50% 0%, #3A7BE0 0%, rgba(58, 123, 224, 0) 70%), linear-gradient(180deg, #0D1B33 0%, #0A0A0B 100%); }
.e-cloud { position: absolute; border-radius: 999px; background: rgba(255, 255, 255, 0.55); filter: blur(28px); }

/* 1. Hero: the photo slowly zooms out while the headline lifts away and a glass card rises */
.e-hero { position: relative; height: 210vh; background: #2E6FD8; }
.e-hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; }
.e-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; scale: 1.14; will-change: scale, translate; }
.e-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%), linear-gradient(90deg, rgba(5, 20, 45, 0.55) 0%, rgba(5, 20, 45, 0.1) 55%, rgba(5, 20, 45, 0) 100%); }
.e-hero-copy { position: absolute; inset: 0; display: flex; align-items: center; will-change: translate, opacity; }
.e-hero-card { position: absolute; left: 50%; bottom: 6vh; width: min(560px, 90vw); translate: -50% 140px; opacity: 0; will-change: translate, opacity; }

/* 2. Statement that lights up word by word as you scroll */
.e-lit .e-w { color: rgba(10, 10, 11, 0.16); transition: color .25s linear; }
.e-lit .e-w.on { color: #0A0A0B; }

/* 3. Inset photo panel that expands to the full screen */
.e-expand { position: relative; height: 220vh; }
.e-expand-sticky { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }
.e-expand-media { position: absolute; inset: 0; will-change: clip-path; background: #0A0A0B; }
.e-expand-copy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #FFFFFF; opacity: 0; translate: 0 40px; }

/* 4. Cards that stack over each other, the one underneath shrinking back */
.e-stack-item { position: sticky; will-change: scale, filter; transform-origin: 50% 0%; }

/* Eight solution tiles: a stack that spreads into two rows of four as the section scrolls (desktop) */
.e-tray { position: relative; height: 220vh; }
.e-tray-sticky { position: sticky; top: 0; height: 100vh; min-height: 520px; overflow: hidden; display: flex; flex-direction: column; }
.e-tray-head { position: relative; z-index: 2; padding-top: calc(76px + 3vh); }
.e-tray-head h2 { font-size: clamp(2.25rem, min(6vw, 8.5vh), 4.5rem); }
.e-tray-head p { font-size: clamp(.9rem, 2.2vh, 1rem); }
.e-tray-grid { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 1240px; margin: 0 auto; padding: 4vh 40px 6vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: clamp(12px, 2.2vh, 22px); }
/* Two rows share the height, but a tile never gets taller than about 4:5.5 of its width (narrow tablets) */
.e-tray-grid { --g: clamp(12px, 2.2vh, 22px); gap: var(--g); align-content: center;
  grid-template-rows: repeat(2, min(calc((100% - var(--g)) / 2), calc((min(100vw, 1240px) - 140px) / 4 * 1.4))); }
.e-tile { position: relative; overflow: hidden; border-radius: 22px; background: #1A1A1D; color: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(14px, 2.2vh, 22px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); will-change: transform; }
.e-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.e-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, .15) 50%, transparent 70%); }
.e-tile-text { position: relative; z-index: 1; display: flex; flex-direction: column; }
.e-tile-label { font-size: .75rem; color: rgba(255, 255, 255, .75); margin-bottom: .2rem; }
.e-tile-title { font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.e-tile-go { position: absolute; z-index: 1; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 999px; background: #FFFFFF; color: #0A0A0B; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; opacity: 0; translate: 0 6px; transition: opacity .3s, translate .3s; }
.e-tile:hover img { scale: 1.06; }
.e-tile:hover .e-tile-go, .e-tile:focus-visible .e-tile-go { opacity: 1; translate: 0 0; }
.e-tile:focus-visible { outline: 3px solid #3D5AFE; outline-offset: 3px; }
@media (max-width: 767px) {
  .e-tray { height: auto; }
  .e-tray-sticky { position: relative; height: auto; min-height: 0; }
  .e-tray-head { padding-top: 4rem; }
  .e-tray-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; padding: 28px 16px 56px; gap: 12px; }
  .e-tile { aspect-ratio: 4 / 5; border-radius: 18px; padding: 14px; }
  .e-tile-title { font-size: 1.05rem; }
  .e-tile-go { opacity: 1; translate: 0 0; width: 32px; height: 32px; top: 10px; right: 10px; font-size: .95rem; }
}
.d-static .e-tray { height: auto; }
.d-static .e-tray-sticky { position: relative; }

/* 5. Big closing headline that grows into place */
.e-grow { will-change: scale, opacity; }

/* Reduced motion: no pinning or scroll-linked movement */
.d-static .e-hero, .d-static .e-expand { height: auto; }
.d-static .e-hero-sticky, .d-static .e-expand-sticky { position: relative; height: 100vh; }
.d-static .e-hero-img { scale: 1; }
.d-static .e-hero-card, .d-static .e-expand-copy { opacity: 1; translate: -50% 0; }
.d-static .e-expand-copy { translate: none; }
.d-static .e-lit .e-w { color: #0A0A0B; }
.d-static .e-stack-item { position: relative; top: auto !important; margin-bottom: 1rem; }

@media (max-width: 767px) {
  .e-hero-card { bottom: 4vh; }

  /* Stacking cards on phones: every card the same height and fits the screen, picture on top, compact text,
     so each card fully covers the one before it */
  .e-stack-item { display: flex !important; flex-direction: column-reverse; height: min(540px, calc(100svh - 120px)); min-height: 0 !important; border-radius: 1.75rem !important; }
  .e-stack-item > div:first-of-type { flex: none; padding: 1.25rem 1.4rem 1.5rem; }
  .e-stack-item > div:last-of-type { flex: 1 1 auto; min-height: 110px; padding: 1rem; }
  .e-stack-item h3 { font-size: 1.6rem; line-height: 1.1; margin-bottom: .6rem; }
  .e-stack-item p.leading-relaxed { font-size: .9rem; line-height: 1.5; margin-bottom: 1rem; }
  .e-stack-item p.text-sm { font-size: .78rem; margin-bottom: .5rem; }
  .e-stack-item .d-btn { margin-top: 0; }
  .e-stack-item .d-glass { padding: .9rem; }
  .e-stack-item .d-glass > div + div { margin-top: .5rem; }
  /* Photo cards: the photo fills the whole card and the text sits straight on it, in white,
     with a soft shade at the bottom so it stays readable */
  .e-stack-photo > div:last-of-type { position: static; }
  .e-stack-photo > div:first-of-type { position: relative; z-index: 1; padding-top: 3rem; color: #FFFFFF;
    background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .32) 65%, transparent); }
  .e-stack-photo > div:first-of-type p { color: rgba(255, 255, 255, .85); }
  .e-stack-photo .d-btn-black { background: #FFFFFF; color: #0A0A0B; }
  .d-static .e-stack-item { height: auto; }
  .d-static .e-stack-item > div:last-of-type { min-height: 220px; }
}

/* Products: app screenshots in a simple phone frame */
.e-phone { border-radius: 2.25rem; padding: .45rem; background: #0A0A0B; box-shadow: 0 30px 60px -28px rgba(10, 10, 11, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.e-phone img { display: block; width: 100%; aspect-ratio: 540 / 1089; object-fit: cover; object-position: top; border-radius: 1.85rem; }
/* Products: desktop app screenshots in a soft frame */
.e-shot { display: block; width: 100%; height: auto; border-radius: 1.25rem; border: 1px solid #E4E4E7; box-shadow: 0 30px 60px -32px rgba(10, 10, 11, .35); background: #FFFFFF; }
.e-shot-dark { border-color: rgba(255, 255, 255, .12); background: #0A0A0B; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .8); }