/* DAT4RA landing page: few words, big type, glossy spheres. Pure CSS, no scripts, no images to load. */
.landing { background: var(--paper); }
.landing .status { background: transparent; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.04em; }
.landing header { background: rgba(251, 249, 246, 0.8); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }

.sphere {
  --c: #b9aaf6; --deep: #7d68e6; --glow: rgba(125, 104, 230, 0.35);
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0.55) 9%, rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 62% 70%, rgba(255, 255, 255, 0.25) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 40% 38%, var(--c) 0, var(--c) 38%, var(--deep) 100%);
  box-shadow: inset -14px -22px 42px rgba(20, 16, 40, 0.16), inset 10px 12px 24px rgba(255, 255, 255, 0.35), 0 40px 70px -28px var(--glow);
  animation: float 9s ease-in-out infinite;
}
.sphere.violet { --c: #c4b7f8; --deep: #7f6ae6; --glow: rgba(127, 106, 230, 0.45); }
.sphere.blue { --c: #b9d8f8; --deep: #5d9be4; --glow: rgba(93, 155, 228, 0.45); animation-delay: -2s; }
.sphere.pink { --c: #f8bccd; --deep: #e0789b; --glow: rgba(224, 120, 155, 0.45); animation-delay: -4s; }
.sphere.peach { --c: #f9c9b4; --deep: #e58a66; --glow: rgba(229, 138, 102, 0.45); animation-delay: -6s; }
.sphere.green { --c: #b6e7cd; --deep: #5fbf8e; --glow: rgba(95, 191, 142, 0.45); animation-delay: -3s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .sphere { animation: none; } }

.l-hero { text-align: center; padding: 120px 0 0; overflow: hidden; }
.l-hero h1 { font-size: clamp(52px, 9vw, 120px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 auto 26px; }
.l-hero p { font-size: clamp(19px, 2vw, 24px); color: var(--muted); max-width: 620px; margin: 0 auto; }
.l-hero .cta { justify-content: center; }
.cluster { position: relative; height: 520px; max-width: 900px; margin: 40px auto 0; }
.cluster .violet { width: 300px; height: 300px; left: 40%; top: 70px; }
.cluster .blue { width: 110px; height: 110px; left: 72%; top: 20px; }
.cluster .pink { width: 130px; height: 130px; left: 20%; top: 60px; }
.cluster .peach { width: 200px; height: 200px; left: 62%; top: 300px; }
.cluster .green { width: 170px; height: 170px; left: 14%; top: 290px; }

.l-statement { background: var(--graphite); color: var(--ivory); text-align: center; padding: 160px 0; }
.l-statement h2 { font-size: clamp(36px, 5.4vw, 72px); line-height: 1.08; letter-spacing: -0.025em; max-width: 960px; margin: 0 auto; }
.l-statement h2 span { color: #8c877f; }

.l-three { padding: 150px 0; }
.l-three .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.l-card { background: #fff; border-radius: 28px; padding: 44px 36px 40px; min-height: 360px; position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -40px rgba(30, 24, 20, 0.35); }
.l-card .sphere { width: 120px; height: 120px; position: relative; display: block; margin-bottom: 64px; }
.l-card h3 { font-size: 30px; line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 10px; }
.l-card p { color: var(--muted); margin: 0; }

.l-sources { text-align: center; padding: 0 0 150px; }
.l-sources h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.02em; margin-bottom: 40px; }
.chips { list-style: none; padding: 0; margin: 0 auto 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 820px; }
.chips li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 999px; padding: 12px 24px 12px 12px; font-size: 19px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -26px rgba(30, 24, 20, 0.35); }
.chips .sphere { position: relative; width: 34px; height: 34px; animation: none; box-shadow: inset -4px -6px 10px rgba(20, 16, 40, 0.16), inset 3px 3px 6px rgba(255, 255, 255, 0.35); }
.l-sources p { color: var(--muted); font-size: 15px; margin: 0; }

.l-proof { padding: 0 0 150px; }
.l-proof .inner { background: linear-gradient(140deg, #efe9fb 0%, #f7eef2 55%, #e9f3ee 100%); border-radius: 36px; padding: 110px 48px; text-align: center; }
.l-proof h2 { font-size: clamp(40px, 6vw, 84px); letter-spacing: -0.03em; line-height: 1; margin-bottom: 22px; }
.l-proof p { color: var(--muted); font-size: 20px; max-width: 560px; margin: 0 auto 34px; }

.l-soon { text-align: center; padding: 0 0 150px; }
.l-soon h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.02em; }
.l-soon p { color: var(--muted); }

.l-foot { border-top: 1px solid var(--line); padding: 36px 0 56px; font-size: 14px; color: var(--muted); }
.l-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.l-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.l-foot a { text-decoration: none; }
.l-foot .with { color: var(--ink); }

@media (max-width: 880px) {
  .l-hero { padding-top: 72px; }
  .cluster { height: 360px; transform: scale(0.68); transform-origin: top center; margin-bottom: -120px; }
  .l-three .row { grid-template-columns: 1fr; }
  .l-statement, .l-three { padding: 96px 0; }
  .l-proof .inner { padding: 72px 24px; }
}