/* Version 3b, "Ribbons, full width" (Victor, 2026-10-13): version 3 without the page-inside-a-page card and without
   the 3D swing. The first screen is the hero video on the ribbons; scrolling brings the site in at full width, on
   the same lavender, blue and white glass. Loaded after v3.css and only overrides it. */
.frame { width: 100%; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
:root { --side: max(clamp(18px, 4vw, 52px), calc((100% - 1280px) / 2)); }

/* glass header that stays at the top */
.top { position: sticky; top: 0; z-index: 20; padding: 16px var(--side); background: rgba(248,248,255,.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.8); }

/* first screen: just the video, flat, as large as fits */
.lead { min-height: calc(100vh - 74px); display: grid; align-items: center; padding: clamp(16px, 2.4vw, 36px) clamp(16px, 3vw, 44px) clamp(28px, 4vw, 56px); }
.lead .stage { width: min(1500px, 100%, calc((100vh - 170px) * 16 / 9)); margin: 0 auto; perspective: none; }
.js-tilt .lead .stage .screen, .lead .stage .screen { transform: none; animation: none; }
.lead .screen { box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 0 10px rgba(255,255,255,.28), 0 60px 120px -50px rgba(30,34,140,.65); }

/* the site, full width, on glass */
.hero { padding: clamp(50px, 7vw, 110px) var(--side); background: rgba(248,248,255,.86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-top: 1px solid #fff; border-radius: clamp(22px, 3vw, 44px) clamp(22px, 3vw, 44px) 0 0; box-shadow: 0 -30px 80px -40px rgba(30,34,140,.45); }
.hero h1 { font-size: clamp(38px, 5.2vw, 84px); }
.kinds, .prices { padding-left: var(--side); padding-right: var(--side); background: rgba(255,255,255,.93); }
.how { padding-left: var(--side); padding-right: var(--side); background: rgba(240,240,253,.8); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.end { background: rgba(248,248,255,.78); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.foot { padding-left: var(--side); padding-right: var(--side); background: rgba(248,248,255,.92); }
@media (max-width: 900px) { .frame { width: 100%; margin: 0; } .lead { min-height: 0; padding-top: 14px; } }
/* clip, not hidden: hidden turns the body into a scroll box and the sticky header stops sticking */
body { overflow-x: clip; }