@charset 'UTF-8';
/*  The ÂN - Main CSS
*/
/* ═══════════════════════════════════════════════════════
   FONT
═══════════════════════════════════════════════════════ */
@font-face {
  font-family: "Helvetica Regular";
  src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
  src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix") format("embedded-opentype"),
       url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff") format("woff"),
       url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf") format("truetype"),
       url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular") format("svg");
}

/* ═══════════════════════════════════════════════════════
   RESET + BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  font-family: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --clr-navy:       rgba(30,50,90,1);
  --clr-navy-90:    rgba(30,50,90,0.9);
  --clr-navy-80:    rgba(30,50,90,0.8);
  --clr-navy-60:    rgba(30,50,90,0.6);
  --clr-navy-10:    rgba(30,50,90,0.1);
  --clr-navy-05:    rgba(30,50,90,0.05);
  --clr-page:       #f0f0f0;
  --clr-text:       #5E6470;
}
body {margin: 0;overflow-x: hidden;background-color: var(--clr-page);font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;-webkit-font-smoothing: antialiased;}
button { font-family: inherit; cursor: pointer; }
ul, li { list-style: none; }
main {min-height:100vh; background-color:#f0f0f0;}

.flag_icon { width: 52px; height: 52px; }
.flag_icon_36 { width: 36px; height: 36px; }
/* ═══════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes rivr-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes rivr-scale-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes rivr-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rivr-slide-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* ═══════════════════════════════════════════════════════
   HERO WRAPPER  (w-full h-screen flex items-center
                  justify-center p-3 md:p-5)
═══════════════════════════════════════════════════════ */
.rivr-wrapper {width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;padding: 0.75rem;background-color: var(--clr-page);}

/* ═══════════════════════════════════════════════════════
   INNER SECTION  (max-w-[1536px] rounded-[1.5rem]
                   md:rounded-[3rem] overflow-hidden)
═══════════════════════════════════════════════════════ */
.rivr-section {position: relative;width: 100%;max-width: 1536px;height: 100%;border-radius: 1.5rem;overflow: hidden;display: flex;flex-direction: column;align-items: center;background-color: rgba(255,255,255,0.10);}

/* ═══════════════════════════════════════════════════════
   BACKGROUND VIDEO
═══════════════════════════════════════════════════════ */
.rivr-video {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;object-position: 65% center;z-index: 0;}

/* ═══════════════════════════════════════════════════════
   CONTENT LAYER  (relative z-10 w-full h-full
                   flex flex-col items-center)
═══════════════════════════════════════════════════════ */
.rivr-content {position: relative;z-index: 10;width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;}

/* ═══════════════════════════════════════════════════════
   NAVBAR  (py-6 px-6 md:px-10)
═══════════════════════════════════════════════════════ */
.rivr-nav {display: flex;align-items: center;justify-content: space-between;padding: 1.5rem;width: 100%;position: relative;z-index: 10;}

/* Desktop centering spacer (hidden on mobile) */
.nav-spacer {flex: 1;display: none;}

/* Center nav links */
.nav-links {display: none;align-items: center;gap: 2rem;color: rgb(45,45,45);font-size: 0.875rem;font-weight: 400;}
.nav-item {display: flex;align-items: center;gap: 0.25rem;cursor: pointer;transition: opacity 0.2s ease;}
.nav-item:hover { opacity: 0.7; }
.nav-chevron {width: 1rem;height: 1rem;flex-shrink: 0;transition: transform 0.2s ease;}
.nav-item:hover .nav-chevron { transform: translateX(2px); }

/* Mobile logo (visible on mobile, hidden md+) */
.mobile-logo { display: block; }
.mobile-logo-text {font-weight: 400;letter-spacing: -0.05em;font-size: 1.25rem;color: var(--clr-navy-90);}

/* Right: Book Demo button */
.nav-right {flex: 1;display: flex;justify-content: flex-end;}
.book-demo-btn {display: flex;align-items: center;background-color: var(--clr-navy-80);color: #fff;border-radius: 9999px;padding: 0.375rem 1rem 0.375rem 0.5rem;gap: 0.5rem;border: none;font-size: 0.75rem;font-weight: 400;transition: background-color 0.2s ease, transform 0.15s ease;}
.book-demo-btn:hover  { background-color: var(--clr-navy); transform: scale(1.02); }
.book-demo-btn:active { transform: scale(0.98); }
.btn-icon-wrap {background-color: rgba(255,255,255,0.2);padding: 0.25rem;border-radius: 9999px;display: flex;align-items: center;justify-content: center;}
.btn-icon-wrap svg { width: 1rem; height: 1rem; }

/* ═══════════════════════════════════════════════════════
   TEXT CONTAINER  (max-w-4xl, centered)
═══════════════════════════════════════════════════════ */
.text-container {width: 100%;max-width: 56rem; /* max-w-4xl */display: flex;flex-direction: column;align-items: center;padding: 2rem 1.5rem 0;text-align: center;}
/* ── HeroBadge ── */
.hero-badge {display: flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;border-radius: 9999px;background-color: rgba(255,255,255,0.60);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid rgba(255,255,255,0.20);width: fit-content;margin-bottom: 0.75rem;/* entrance: opacity 0, y 20 → 1, 0 | dur 0.6s | ease easeOut */animation: rivr-fade-up 0.6s ease-out 0s both;}
.hero-badge span {font-size: 0.875rem;font-weight: 400;color: var(--clr-navy-90);}
.hero-badge svg { width: 1rem; height: 1rem; color: var(--clr-navy-80); }

/* ── Hero Title ── */
.hero-title {font-family:"Birthstone", cursive;font-size: 2.25rem;/* text-4xl */font-weight: 400;color: var(--clr-text);margin-bottom: 0.5rem;letter-spacing: -0.025em;/* tracking-tight */line-height: 1.05;/* entrance: scale 0.98→1, opacity 0→1 | dur 0.8s | delay 0.2s */animation: rivr-scale-in 0.8s ease-out 0.2s both;}

/* ── Hero Subtitle ── */
.hero-subtitle {font-size: 0.875rem;color: var(--clr-text);opacity: 0.8;line-height: 1.625;max-width: 36rem;font-weight: 400;/* entrance: opacity 0→1 | dur 0.8s | delay 0.4s */animation: rivr-fade-in 0.8s ease-out 0.4s both;}

/* ═══════════════════════════════════════════════════════
   BOTTOM-LEFT CARD
   Mobile: absolute bottom-28 right-4 left-auto
   MD+:    left-6 right-auto bottom-6
   LG+:    left-10 bottom-10
═══════════════════════════════════════════════════════ */
.bottom-left-card {position: absolute;bottom: 7rem;/* bottom-28 */right: 1rem;left: auto;padding: 0.75rem;border-radius: 1.2rem;background-color: rgba(255,255,255,0.30);backdrop-filter: blur(24px);-webkit-backdrop-filter: blur(24px);display: flex;flex-direction: column;gap: 0.5rem;min-width: 140px;width: fit-content;/* entrance: x -20→0, opacity 0→1 | dur 0.8s | delay 0.2s */animation: rivr-slide-left 0.8s ease-out 0.2s both;}
.yield-count {font-size: 1.5rem;font-weight: 400;color: var(--clr-navy-90);letter-spacing: -0.025em;line-height: 1;}
.yield-label {font-size: 0.625rem;font-weight: 400;color: var(--clr-navy-60);text-transform: uppercase;letter-spacing: 0.1em;}
.discord-btn {display: flex;align-items: center;background-color: #fff;border-radius: 9999px;padding: 0.375rem 1.25rem 0.375rem 0.375rem;gap: 0.5rem;border: none;align-self: flex-start;transition: background-color 0.2s ease, transform 0.15s ease;}
.discord-btn:hover  { background-color: rgba(255,255,255,0.9); transform: scale(1.02); }
.discord-btn:active { transform: scale(0.98); }
.discord-icon-wrap {background-color: var(--clr-navy-10);padding: 0.25rem;border-radius: 9999px;display: flex;align-items: center;justify-content: center;}
.discord-icon-wrap svg { width: 1rem; height: 1rem; color: var(--clr-navy-90); }
.discord-btn-text {font-size: 0.875rem;font-weight: 400;color: var(--clr-navy-90);white-space: nowrap;}

/* ═══════════════════════════════════════════════════════
   BOTTOM-RIGHT CORNER  (faux-cutout card)
═══════════════════════════════════════════════════════ */
.bottom-right-corner {position: absolute;bottom: 0;right: 0;/* p-3 pt-5 pl-8 */padding: 0.75rem 0.75rem 0.75rem 2rem;padding-top: 1.25rem;background-color: var(--clr-page);border-top-left-radius: 1.5rem;display: flex;align-items: center;gap: 0.75rem;/* entrance: y 20→0, opacity 0→1 | dur 0.8s | delay 0.4s */animation: rivr-fade-up 0.8s ease-out 0.4s both;}

/* ── Top intersection mask ── */
.corner-top-mask {position: absolute;top: -1.5rem;right: 0;width: 1.5rem;height: 1.5rem;pointer-events: none;}

/* ── Left intersection mask ── */
.corner-left-mask {position: absolute;bottom: 0;left: -1.5rem;width: 1.5rem;height: 1.5rem;pointer-events: none;}

/* ── Circle icon ── */
.corner-icon-circle {background-color: var(--clr-navy-05);width: 2.5rem;height: 2.5rem;border-radius: 9999px;display: flex;align-items: center;justify-content: center;border: 1px solid var(--clr-navy-10);flex-shrink: 0;}
.corner-icon-circle svg { color: var(--clr-navy-80); }

/* ── Info ── */
.corner-doc-title {font-size: 1rem;font-weight: 400;color: rgba(30,50,90,0.95);line-height: 1.2;margin-bottom: 0.125rem;}
.corner-library-link {display: flex;align-items: center;gap: 0.25rem;color: var(--clr-navy-60);cursor: pointer;transition: color 0.2s ease;}
.corner-library-link:hover { color: var(--clr-navy-80); }
.corner-library-text {font-size: 0.75rem;font-weight: 400;}
.corner-library-link svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }