.legal-form-notice { width: 100%; max-width: 540px; margin: 10px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.6; text-align: left; }
.legal-form-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-form-notice a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.referral-lounge {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: 48px;
  padding: clamp(26px,4.1vw,54px);
  border: 1px solid #ffffff21;
  border-radius: 30px;
  background: radial-gradient(ellipse at 85% 25%,#8c421c22,transparent 60%),linear-gradient(125deg,#302e2b,#22211f 65%);
  color:#f7f3ec;
  text-align:left;
  overflow:hidden;
  box-shadow:inset 0 1px 0 #ffffff0e,0 18px 60px #00000012;
  scroll-margin-top:110px;
}
.referral-lounge-texture {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");
}
.referral-lounge-main {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-areas:"intro art" "balance art" "action art";
  column-gap:24px;
  align-items:center;
}
.referral-lounge-main > * {
  min-width:0;
}
.referral-intro-block {
  grid-area:intro;
  position:static;
  display:block;
  width:auto;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  text-align:left;
}
.referral-eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  color:#c7bcb0;
  font-size:10px;
  font-weight:550;
  letter-spacing:.15em;
}
.referral-lounge h2 {
  margin:19px 0 13px;
  font-size:clamp(32px,3.2vw,42px);
  font-weight:550;
  line-height:1.12;
  letter-spacing:-.055em;
  color:#f7f3ec;
}
.referral-lounge h2 span {
  color:#ffae7d;
}
.referral-intro {
  margin:0;
  max-width:350px;
  color:#bbb5ac;
  font-size:13px;
  line-height:1.7;
}
.referral-potential {
  grid-area:balance;
  margin:26px 0 24px;
}
.referral-potential-label {
  margin-bottom:10px;
}
.referral-potential-number {
  display:flex;
  gap:10px;
  align-items:baseline;
  margin:8px 0 3px;
}
.referral-potential-number small {
  font-size:22px;
  color:#d3ccc2;
  font-weight:400;
}
.referral-potential-number strong {
  position:relative;
  display:inline-block;
  font-size:104px;
  font-weight:500;
  line-height:.94;
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
}
.referral-potential.is-complete .referral-potential-number strong {
  color:#f7f3ec;
}
.referral-premium-shine {
  position:absolute;
  inset:0;
  color:#969696;
  opacity:.18;
  pointer-events:none;
  animation:referral-number-shine 3s ease-out infinite paused;
}
.referral-potential.is-visible .referral-premium-shine {
  animation-play-state:running;
}
@keyframes referral-number-shine {
  0% { clip-path:polygon(-45% 0,-15% 0,-65% 100%,-95% 100%); }
  55%,100% { clip-path:polygon(145% 0,175% 0,125% 100%,95% 100%); }
}
.referral-potential-label,.referral-potential-unit {
  display:block;
  color:#e1d8cb;
  font-family:inherit;
  font-size:23px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.025em;
}
.referral-glass-art {
  grid-area:art;
  pointer-events:none;
}
.referral-glass-art img {
  display:block;
  width:86%;
  margin-inline:auto;
  height:auto;
  filter:drop-shadow(0 20px 22px #00000028);
}
.referral-action {
  grid-area:action;
}
.referral-lounge .referral-share-button {
  width:auto;
  padding:14px 20px;
  border-radius:16px;
  gap:12px;
  justify-content:center;
  background:linear-gradient(135deg,var(--action-highlight),var(--action-bg));
  color:var(--action-text);
}
.referral-lounge .referral-share-button:hover {
  background:var(--action-hover);
}
.referral-disclaimer {
  margin:14px 0 0;
  max-width:370px;
  color:#bcb4aa;
  font-size:11px;
  line-height:1.7;
}
.referral-copy-status {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.referral-journey {
  margin-top:32px;
  padding-top:25px;
  border-top:1px solid #ffffff1a;
}
.referral-journey-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  margin-bottom:16px;
  color:#e1d8cb;
  font-size:12px;
}
.referral-journey-heading > span:last-child {
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.referral-journey-heading b {
  font-weight:400;
  color:#aaa298;
}
.referral-sectors {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.referral-sector {
  min-width:0;
  color:#c4bcb2;
}
.referral-sector-meter {
  position:relative;
  margin-bottom:10px;
}
.referral-sector-track {
  position:relative;
  height:9px;
  overflow:hidden;
  border:1px solid #ffffff36;
  background:#ffffff0a;
  border-radius:5px;
}
.referral-sector.is-next .referral-sector-track {
  border-color:#ff8c5070;
  box-shadow:0 0 9px #ff6b2424;
}
.referral-sector-shimmer {
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.referral-sector.is-earned .referral-sector-shimmer,
.referral-sector.is-next .referral-sector-shimmer {
  opacity:1;
}
.referral-sector-shimmer i {
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  background:linear-gradient(115deg,transparent 0%,#d0d0d005 15%,#dedede14 30%,#ededed38 44%,#ffffff55 50%,#ededed38 56%,#dedede14 70%,#d0d0d005 85%,transparent 100%);
  filter:blur(1px);
  opacity:0;
}
.referral-journey.is-progress-ready .referral-sector-shimmer i {
  will-change:transform;
  animation:referral-diagonal-shimmer 4.5s linear var(--shimmer-delay) infinite both paused;
}
.referral-journey.is-progress-ready.is-visible .referral-sector-shimmer i {
  animation-play-state:running;
}
@keyframes referral-diagonal-shimmer {
  0% { transform:translateX(-100%); opacity:0; }
  2%,13% { opacity:.75; }
  16%,100% { transform:translateX(100%); opacity:0; }
}
.referral-sector-particles {
  position:absolute;
  top:50%;
  right:10px;
  width:0;
  height:0;
  pointer-events:none;
}
.referral-sector-particles i {
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffa15c;
  box-shadow:0 0 6px #ff6b24b3;
  animation:referral-particle 1s cubic-bezier(.12,.6,.32,1) both;
}
.referral-sector-particles i:nth-child(3n) {
  width:4px;
  height:4px;
  border-radius:1px;
  background:#fff4de;
}
.referral-sector-particles.is-finale {
  right:0;
}
.referral-sector-particles.is-finale i {
  width:6px;
  height:6px;
  animation-duration:1.3s;
}
.referral-finale-spark {
  position:absolute;
  top:-13px;
  left:-10px;
  color:#fff4de;
  font-size:23px;
  line-height:1;
  font-weight:400;
  text-shadow:0 0 12px #ff6b24;
  animation:referral-finale-spark 1.3s ease-out both;
}
@keyframes referral-finale-spark {
  0% { opacity:0; transform:scale(.3) rotate(-30deg); }
  18% { opacity:1; transform:scale(1.2) rotate(0); }
  100% { opacity:0; transform:scale(.5) rotate(50deg); }
}
@keyframes referral-particle {
  0% { opacity:1; transform:translate(0,0) scale(.7); }
  12% { opacity:1; }
  60% { opacity:.9; }
  100% { opacity:0; transform:translate(var(--particle-x),var(--particle-y)) rotate(100deg) scale(.3); }
}
.referral-sector-fill {
  position:absolute;
  inset:0 auto 0 0;
  border-radius:inherit;
  background:linear-gradient(90deg,#ff6b24,#ff853f);
}
.referral-sector-person {
  display:block;
  font-size:10px;
  line-height:1.5;
  color:#aaa298;
}
.referral-sector > b {
  display:block;
  margin:3px 0;
  font-size:19px;
  font-weight:550;
  line-height:1.4;
  letter-spacing:-.035em;
}
.referral-sector > b small {
  font:inherit;
  font-size:11px;
  letter-spacing:0;
  font-weight:400;
}
.referral-sector.is-earned > b {
  color:#ff8c50;
}
.referral-sector.is-next > b {
  color:#ff8c50;
  font-weight:700;
}
.referral-sector.is-next > b small {
  font-weight:700;
}
.referral-journey-footer {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  margin-top:20px;
}
.referral-journey-footer p {
  font-size:11px;
  line-height:1.65;
  color:#aaa298;
  margin:0;
}
.referral-founder-note {
  position:relative;
  max-width:560px;
  margin:32px auto 0;
  padding:28px 0 0;
  text-align:center;
}
.referral-founder-note::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:96px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#ffffff4d,transparent);
}
.referral-founder-note blockquote {
  margin:0;
  padding:0;
  border:0;
  font-style:italic;
}
.referral-founder-note p {
  margin:0;
  color:#e1d8cb;
  font-size:13px;
  line-height:1.85;
}
.referral-founder-note p + p {
  margin-top:12px;
}
.referral-founder-note a {
  color:#ffb082;
  text-decoration:underline;
  text-underline-offset:3px;
}
.referral-founder-note a:focus-visible {
  outline:2px solid #ffb082;
  outline-offset:4px;
}
.referral-founder-note figcaption {
  margin-top:18px;
  color:#f7f3ec;
  font-size:12px;
  font-weight:400;
  letter-spacing:.08em;
}
.referral-copy-fallback button:focus-visible,.referral-copy-fallback input:focus-visible {
  outline:2px solid #ffb98c;
  outline-offset:5px;
}
.referral-copy-fallback {
  margin-top:24px;
  font-size:12px;
  color:#e1d8cb;
}
.referral-copy-fallback > div {
  display:flex;
  margin-top:10px;
}
.referral-copy-fallback input {
  flex:1;
  min-width:0;
  padding:12px;
  border:1px solid #ffffff35;
  border-radius:8px 0 0 8px;
  background:#ffffff10;
  color:#fff;
  font:inherit;
}
.referral-copy-fallback button {
  padding:12px;
  border:1px solid #ffffff35;
  border-left:0;
  border-radius:0 8px 8px 0;
  background:#ffffff10;
  color:#fff;
  cursor:pointer;
}
@media(max-width:900px) {
  .referral-lounge {
    padding:32px;
  }
  .referral-lounge-main {
    column-gap:16px;
  }
}
@media(max-width:600px) {
  .referral-lounge {
    padding:26px 20px;
    border-radius:23px;
    margin-top:32px;
  }
  .referral-lounge-main {
    grid-template-columns:1.2fr .8fr;
    grid-template-areas:"intro intro" "balance art" "action action";
    gap:0 8px;
  }
  .referral-lounge h2 {
    font-size:clamp(30px,8vw,38px);
  }
  .referral-potential-number strong {
    font-size:80px;
  }
  .referral-potential-number small {
    font-size:17px;
  }
  .referral-potential-label,.referral-potential-unit {
    font-size:18px;
  }
  .referral-glass-art {
    margin-right:-6px;
  }
  .referral-lounge .referral-share-button {
    width:100%;
  }
  .referral-disclaimer {
    font-size:11px;
  }
  .referral-journey {
    margin-top:25px;
    padding-top:20px;
  }
  .referral-journey-heading {
    font-size:10px;
    gap:8px;
  }
  .referral-sectors {
    gap:6px;
  }
  .referral-sector > b {
    font-size:15px;
  }
  .referral-sector > b small {
    font-size:9px;
  }
  .referral-sector-person {
    font-size:9px;
  }
  .referral-sector-track {
    height:7px;
  }
  .referral-journey-footer {
    flex-direction:column;
    gap:8px;
    margin-top:16px;
  }
  .referral-founder-note {
    margin-top:26px;
    padding:24px 0 0;
  }
  .referral-founder-note p {
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .referral-glass-art {
    transform:none!important;
  }
  .referral-glass-art img {
    transform:none!important;
  }
  .referral-journey.is-progress-ready .referral-sector-shimmer i {
    animation:none;
    opacity:.6;
    transform:translateX(0);
    will-change:auto;
  }
  .referral-sector-particles {
    display:none;
  }
  .referral-premium-shine {
    display:none;
    animation:none;
  }
}
:root, [data-theme="light"], [data-theme="accent"] {
  /* ==========================================================================
     СХЕМА 1: СВЕТЛАЯ / ТЕРРАКОТ (Фирменный стиль Cofine: Apple Clean Light)
     ========================================================================== */
  --bg-canvas: #FAFAF8;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #F2F1ED;
  --bg-dark: #FAFAF8; /* Унификация фона: предотвращает черные полосы в секциях */
  --bg-dark-card: #FFFFFF;
  --header-bg-rgb: 250, 250, 248;
  
  --text-primary: #191817;
  --text-secondary: #5E5B55;
  --text-muted: #8E8A83;
  --text-light: #191817;
  
  --accent-color: #FF6B24;
  --accent-color-hover: #F45E18;
  --accent-color-soft: rgba(255, 107, 36, 0.08);
  --accent-color-glow: rgba(255, 107, 36, 0.25);
  
  --hero-btn-bg: #FF6B24;
  --hero-btn-text: #FFFFFF;
  --hero-btn-hover: #F45E18;
  --hero-btn-shadow: 0 6px 22px rgba(255, 107, 36, 0.28);
  
  --ticker-bg: #F3F1EC;
  --ticker-text: #191817;
  --ticker-dot: #FF6B24;
  --ticker-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  
  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-accent: rgba(255, 107, 36, 0.28);
  --border-dark: rgba(0, 0, 0, 0.08);
  
  --brand-green: #2E9B56;
  --brand-green-bg: rgba(46, 155, 86, 0.1);
  
  --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-width: 1200px;
  --radius-pill: 9999px;
  --radius-btn: 14px;
  --radius-input: 14px;
  --radius-card: 22px;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-mockup: 0 28px 70px -10px rgba(0, 0, 0, 0.12);
  --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   СХЕМА 2: ТЕПЛЫЙ КОФЕ / ЛАТТЕ (Кремовый светлый холст, карамельный мокко)
   ========================================================================== */
[data-theme="latte"] {
  --bg-canvas: #FBF8F4;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #F4EFE8;
  --bg-dark: #FBF8F4;
  --bg-dark-card: #FFFFFF;
  --header-bg-rgb: 251, 248, 244;
  
  --text-primary: #231C16;
  --text-secondary: #6E5F52;
  --text-muted: #9E8D7F;
  --text-light: #231C16;
  
  --accent-color: #A3704C;
  --accent-color-hover: #BA825A;
  --accent-color-soft: rgba(163, 112, 76, 0.1);
  --accent-color-glow: rgba(163, 112, 76, 0.26);
  
  --hero-btn-bg: #A3704C;
  --hero-btn-text: #FFFFFF;
  --hero-btn-hover: #BA825A;
  --hero-btn-shadow: 0 6px 20px rgba(163, 112, 76, 0.28);
  
  --ticker-bg: #F3ECE2;
  --ticker-text: #231C16;
  --ticker-dot: #A3704C;
  --ticker-shadow: 0 8px 24px rgba(163, 112, 76, 0.06);
  
  --border-subtle: rgba(163, 112, 76, 0.12);
  --border-accent: rgba(163, 112, 76, 0.3);
  --border-dark: rgba(163, 112, 76, 0.1);
}

/* ==========================================================================
   СХЕМА 3: СДЕРЖАННЫЙ / FIGMA (Минимал, чистый студийный светлый)
   ========================================================================== */
[data-theme="figma"] {
  --bg-canvas: #FFFFFF;
  --bg-surface: #F8F9FA;
  --bg-surface-soft: #ECEEF1;
  --bg-dark: #FFFFFF;
  --bg-dark-card: #F8F9FA;
  --header-bg-rgb: 255, 255, 255;
  
  --text-primary: #121214;
  --text-secondary: #575761;
  --text-muted: #8A8B95;
  --text-light: #121214;
  
  --accent-color: #121214;
  --accent-color-hover: #2E2E33;
  --accent-color-soft: rgba(18, 18, 20, 0.06);
  --accent-color-glow: rgba(18, 18, 20, 0.18);
  
  --hero-btn-bg: #121214;
  --hero-btn-text: #FFFFFF;
  --hero-btn-hover: #2E2E33;
  --hero-btn-shadow: 0 6px 20px rgba(18, 18, 20, 0.2);
  
  --ticker-bg: #F1F3F5;
  --ticker-text: #121214;
  --ticker-dot: #FF6B24;
  --ticker-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  
  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-accent: rgba(18, 18, 20, 0.22);
  --border-dark: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   СХЕМА 4: КЛУБНАЯ НОЧНАЯ (Dark Mode)
   ========================================================================== */
[data-theme="dark"], [data-theme="monochrome"] {
  --bg-canvas: #0F0E0D;
  --bg-surface: #181615;
  --bg-surface-soft: #231E1B;
  --bg-dark: #0A0909;
  --bg-dark-card: #1D1815;
  --header-bg-rgb: 15, 14, 13;
  
  --text-primary: #FFFFFF;
  --text-secondary: #B8B0A8;
  --text-muted: #7E766F;
  --text-light: #FFFFFF;
  
  --accent-color: #FF6B24;
  --accent-color-hover: #F45E18;
  --accent-color-soft: rgba(255, 107, 36, 0.14);
  --accent-color-glow: rgba(255, 107, 36, 0.38);
  
  --hero-btn-bg: #FF6B24;
  --hero-btn-text: #FFFFFF;
  --hero-btn-hover: #F45E18;
  --hero-btn-shadow: 0 4px 24px rgba(255, 107, 36, 0.36);
  
  --ticker-bg: #151312;
  --ticker-text: #FFFFFF;
  --ticker-dot: #FF6B24;
  --ticker-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(255, 107, 36, 0.28);
  --border-dark: rgba(255, 255, 255, 0.09);
  
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-mockup: 0 32px 80px -10px rgba(0, 0, 0, 0.65);
}

::selection {
  background: var(--accent-color);
  color: #FFFFFF;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease, color 0.25s ease;
  position: relative;
}

/* ==========================================================================
   DELICATE FILM GRAIN / NOISE OVERLAY
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: multiply;
}

[data-theme="dark"] body::after,
[data-theme="monochrome"] body::after {
  opacity: 0.058;
  mix-blend-mode: screen;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-canvas);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

button, input {
  font-family: var(--font-main);
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  background: none;
  transition: var(--transition);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   HEADER / NAVBAR
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(var(--header-bg-rgb), 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  transition: var(--transition);
}

.header-scrolled {
  background-color: rgba(var(--header-bg-rgb), 0.9);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Темная версия шапки для темных страниц */
.header-dark-page {
  background-color: rgba(14, 13, 12, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.header-dark-page.header-scrolled {
  background-color: rgba(14, 13, 12, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.header-dark-page .logo-light-ver { display: none !important; }
.header-dark-page .logo-dark-ver { display: block !important; }

.header-dark-page .nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
}

.header-dark-page .nav-link:hover {
  color: #FFFFFF !important;
}

.header-dark-page .lang-btn {
  color: rgba(255, 255, 255, 0.65) !important;
}

.header-dark-page .lang-btn.active {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

.header-dark-page .mobile-menu-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.header-dark-page .hamburger-line {
  background-color: #FFFFFF !important;
}

/* Мобильный гамбургер-баттон */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  gap: 5px;
  padding: 8px;
  transition: var(--transition);
}

.mobile-menu-btn .hamburger-line {
  width: 20px;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.mobile-menu-btn.is-active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Мобильное всплывающее меню Drawer */
.mobile-nav-drawer {
  position: fixed;
  inset: 0;
  top: 72px;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}

.mobile-nav-drawer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-nav-content {
  position: relative;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 24px 20px 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-drawer.is-open .mobile-nav-content {
  transform: translateY(0);
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.mobile-nav-item:hover, .mobile-nav-item:active {
  background: var(--accent-color-soft);
  color: var(--accent-color);
  transform: translateX(4px);
}

.mobile-nav-bullet {
  color: var(--accent-color);
  font-size: 13px;
}

.mobile-nav-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 18px;
}

.mobile-lang-pills {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-lang-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo-brand-wrap:hover {
  opacity: 0.85;
}

.logo-brand-cup {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-brand-wrap:hover .logo-brand-cup {
  transform: rotate(-6deg) scale(1.08);
}

.logo-brand-text {
  font-family: 'Fredoka', 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  line-height: 1;
}

.logo-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-surface-soft);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--text-primary);
}

.lang-selector {
  display: flex;
  align-items: center;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  text-decoration: none;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: var(--transition);
}

.not-found-page { min-height: 65vh; padding-top: 180px; padding-bottom: 100px; }
.not-found-page h1 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 24px; }
.not-found-page p { margin-bottom: 24px; }
.static-notice { padding: 20px; text-align: center; }

.lang-btn.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
  padding: 56px 0 76px 0;
  overflow: visible;
  position: relative;
  background: transparent;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
}

.hero-content {
  display: flex;
  flex-direction: column;
}

.hero-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(37, 36, 34, 0.04);
}

.status-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color-glow);
}

.status-pill-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.1px;
}

.hero-title {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.hero-title span {
  display: block;
}

.hero-title-highlight {
  color: var(--accent-color);
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: currentColor;
  display: inline-block;
  filter: none;
}

.hero-subheading {
  font-size: 17px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 26px;
  max-width: 480px;
  line-height: 1.55;
}

.hero-subheading strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Integrated Floating Input Form (No Clunky Card) */
.hero-action-container {
  max-width: 480px;
}

.hero-input-form {
  position: relative;
  margin-bottom: 12px;
}

.hero-input-wrapper {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid var(--border-subtle);
  border-radius: 20px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 4px 18px rgba(37, 36, 34, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.hero-input-wrapper:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 6px 24px var(--accent-color-glow);
}

/* Эффектный перелив контура формы при распознавании корпоративного/вузовского домена */
.hero-input-wrapper.shimmer-verified {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color-soft), 0 8px 30px var(--accent-color-glow);
  animation: borderVerifiedPulse 2.4s infinite ease-in-out;
}

@keyframes borderVerifiedPulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--accent-color-soft), 0 8px 30px var(--accent-color-glow);
  }
  50% {
    box-shadow: 0 0 0 3px var(--accent-color-glow), 0 10px 36px var(--accent-color-glow);
  }
}

.hero-input-field-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.hero-real-input {
  width: 100%;
  background: transparent;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 0;
  line-height: 1.4;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.hero-real-input.has-domain-highlight {
  color: transparent !important;
  caret-color: var(--text-primary);
}

.hero-domain-highlight-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 0;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  pointer-events: none;
  white-space: pre;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
}

.hl-local {
  color: var(--text-primary);
  font-weight: 600;
}

/* Сразу после ввода @ домен выделяется с акцентным переливающимся градиентом без смещения курсора */
.hl-domain-shimmer {
  font-weight: 600;
  display: inline;
  background: linear-gradient(
    90deg,
    #FF6B24 0%,
    #FFAA4D 25%,
    #F6AD55 50%,
    #FF6B24 75%,
    #E2532F 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: accentDomainShimmer 2.2s infinite linear;
  text-shadow: 0 0 10px rgba(255, 107, 36, 0.35);
}

@keyframes accentDomainShimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

.domain-particles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
}

.domain-spark-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: domainSparkBurst 0.65s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes domainSparkBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx, 0px), var(--ty, -20px)) scale(0);
    opacity: 0;
  }
}

.hero-input-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  flex-shrink: 0;
  line-height: 1;
}

.hero-input-icon {
  color: var(--text-muted);
  display: block;
  flex-shrink: 0;
}

.hero-real-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}

.domain-verified-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent-color-soft);
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 800;
  border-radius: 50%;
  animation: scaleUp 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Кнопка отправки формы в Hero */
.hero-submit-button {
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  padding: 12px 22px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: none;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.hero-submit-button:hover:not(:disabled) {
  background: var(--hero-btn-hover);
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.22);
}

.hero-submit-button:disabled {
  background: rgba(30, 29, 28, 0.85);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Статус распознанной организации */
.domain-status-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  animation: fadeIn 0.2s ease;
  margin-top: 8px;
}

.domain-status-box.verified {
  color: var(--accent-color);
  background: var(--accent-color-soft);
  border: 1px solid rgba(255, 107, 36, 0.25);
}

.domain-status-box.unsupported {
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pulse-sparkle {
  font-size: 14px;
  animation: pulseDot 1.5s infinite ease-in-out;
}

.status-org-name {
  font-weight: 700;
  color: var(--text-primary);
}

.status-peers-count {
  color: var(--text-secondary);
  font-size: 11.5px;
  border-left: 1px solid rgba(255, 107, 36, 0.2);
  padding-left: 8px;
  margin-left: 4px;
}

/* Быстрые чипы вузов и компаний под инпутом */
.hero-domain-shortcuts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.shortcuts-label, .shortcut-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 2px;
}

.shortcut-pill, .domain-shortcut-btn {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcut-pill:hover, .domain-shortcut-btn:hover {
  background: #FFFFFF;
  border-color: var(--text-primary);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.hero-footnote-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
  display: inline-block;
  letter-spacing: -0.1px;
}

/* ==========================================================================
   3D ИНТЕРАКТИВНЫЙ ТЕЛЕФОН (MOCKUP С КАРТОЧКОЙ ПОИСКА ИЗ FIGMA)
   ========================================================================== */
.hero-mockup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.phone-3d-scene {
  perspective: 1200px;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: grab;
  padding: 10px;
  gap: 14px;
}

.phone-3d-scene:active {
  cursor: grabbing;
}

.phone-3d-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.phone-mockup-frame {
  width: 335px;
  height: 650px;
  background: #171615;
  border-radius: 46px;
  padding: 9px;
  position: relative;
  border: 3.5px solid #2B2A27;
  box-shadow: 0 26px 60px -12px rgba(23, 22, 21, 0.45),
              0 14px 28px -8px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

/* Динамический световой блик на стекле телефона при наклоне */
.phone-glare-overlay {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  pointer-events: none;
  z-index: 30;
  mix-blend-mode: overlay;
  transition: opacity 0.2s ease;
}

.phone-screen-inner {
  width: 100%;
  height: 100%;
  background: #0E0D0C;
  border-radius: 37px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Dynamic Island */
.phone-island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 28;
}

.island-pill {
  width: 94px;
  height: 22px;
  background: #000000;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.island-camera {
  width: 8px;
  height: 8px;
  background: #181926;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.island-speaker {
  width: 32px;
  height: 3px;
  background: #151515;
  border-radius: 2px;
}

/* iOS Status Bar */
.phone-status-bar {
  position: absolute;
  top: 11px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 29;
  font-size: 11.5px;
  font-weight: 700;
  color: #FFFFFF;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-signal {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.status-battery {
  width: 19px;
  height: 9.5px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  padding: 1px;
  display: flex;
  align-items: center;
}

.battery-level {
  width: 70%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 1.5px;
}

/* Верхний бар приложения Cofine */
.feed-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 16px 8px 16px;
  z-index: 20;
}

.feed-cups-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #FDFFFC;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.cups-icon {
  font-size: 14px;
}

.cups-count {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.feed-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #FFFFFF;
  opacity: 0.85;
  cursor: pointer;
}

/* ==========================================================================
   FULLSCREEN КАРТОЧКА АНКЕТЫ ИЗ ДИЗАЙНА FIGMA
   ========================================================================== */
.phone-screen-inner.fullscreen-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: #0E0D0C;
}

.fullscreen-feed-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  z-index: 1;
}

.phone-top-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 15;
  pointer-events: none;
}

.feed-top-bar.glass-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 16px 8px 16px;
  z-index: 25;
}

.fullscreen-bottom-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 50px 18px 14px 18px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 25%,
    rgba(0, 0, 0, 0.75) 60%,
    rgba(0, 0, 0, 0.92) 100%
  );
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fullscreen-bottom-overlay .feed-user-name {
  color: #FFFFFF !important;
  font-size: 21px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  letter-spacing: -0.3px;
}

.feed-org-subtle-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  width: fit-content;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.org-check-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #171615;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
}

.org-text-content {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.phone-home-indicator-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.phone-home-indicator {
  width: 120px;
  height: 4.5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 9999px;
}

/* ==========================================================================
   ЭКРАН 1: АНКЕТА В ЛЕНТЕ ДЕЙТИНГА
   ========================================================================== */
.revealed-card-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.revealed-photo-wrapper {
  position: relative;
  height: 388px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
}

.revealed-photo-wrapper .feed-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.feed-gradient-overlay.clean-ui {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 44px 14px 14px 14px;
  background: linear-gradient(
    180deg,
    rgba(14, 13, 12, 0) 0%,
    rgba(14, 13, 12, 0.75) 45%,
    rgba(14, 13, 12, 0.98) 100%
  );
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #FFFFFF;
}

.feed-profile-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feed-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-user-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.feed-user-flower {
  font-size: 16px;
}

.feed-org-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 107, 36, 0.15);
  border: 1.5px solid var(--accent-color);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  width: fit-content;
  box-shadow: 0 0 16px var(--accent-color-glow), inset 0 0 8px rgba(255, 107, 36, 0.1);
}

.org-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  background: var(--accent-color);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 9.5px;
  font-weight: 800;
}

.org-title-text {
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
}

.feed-distance-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
}

.feed-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.feed-tag-chip {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 2px 7px;
}

.revealed-action-drawer {
  margin-top: 8px;
}

.revealed-coffee-btn {
  width: 100%;
  background: #1C1917;
  color: #FFFFFF;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.revealed-coffee-btn:hover {
  border-color: var(--accent-color);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* ==========================================================================
   ЭКРАН 2: МЕТАЛЛИЧЕСКАЯ КАРТА COFINE CLUB (BRUSHED LIQUID TITANIUM)
   ========================================================================== */
.metallic-card-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.metal-card-outer {
  perspective: 800px;
  width: 100%;
  margin-top: 6px;
}

.metal-card-body {
  position: relative;
  height: 220px;
  border-radius: 18px;
  background: linear-gradient(135deg, #171514 0%, #2A2724 30%, #46413C 50%, #292623 70%, #151312 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55),
              inset 0 1.5px 2px rgba(255, 255, 255, 0.45),
              inset 0 -1.5px 3px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
}

/* Текстура микро-шлифованного титана */
.metal-brushed-grain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  opacity: 0.85;
}

/* Световой блик (sheen / specular reflection) */
.metal-glare-sweep {
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.05) 38%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.05) 62%,
    transparent 80%
  );
  pointer-events: none;
  mix-blend-mode: color-dodge;
  animation: metalShineSweep 6s infinite ease-in-out;
}

@keyframes metalShineSweep {
  0% {
    transform: translate(-30%, -20%) rotate(25deg);
    opacity: 0.4;
  }
  50% {
    transform: translate(30%, 20%) rotate(25deg);
    opacity: 0.95;
  }
  100% {
    transform: translate(-30%, -20%) rotate(25deg);
    opacity: 0.4;
  }
}

.metal-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.metal-emv-chip {
  width: 36px;
  height: 28px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ECC94B 0%, #F6E05E 40%, #B7791F 70%, #975A16 100%);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 5px rgba(0, 0, 0, 0.3);
  position: relative;
}

.chip-lines {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(116, 66, 16, 0.5);
  border-radius: 2px;
}

.metal-nfc-icon {
  color: rgba(255, 255, 255, 0.65);
}

.metal-brand-row {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 2;
}

.metal-brand-logo {
  width: 24px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.metal-brand-name {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.metal-card-mid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.metal-status-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--accent-color);
  text-shadow: 0 0 10px rgba(255, 107, 36, 0.5);
}

.metal-card-number {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}

.metal-card-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.metal-holder-col, .metal-org-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metal-holder-label, .metal-org-label {
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
}

.metal-holder-name, .metal-org-val {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.metal-perks-drawer {
  background: #191817;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metal-perk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.metal-perk-dot {
  color: var(--accent-color);
  font-weight: 800;
}

.metal-meet-action-btn {
  margin-top: 4px;
  width: 100%;
  background: var(--accent-color);
  color: #FFFFFF;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 13px;
  padding: 11px 0;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(255, 107, 36, 0.35);
}

.metal-meet-action-btn:hover {
  background: #E2532F;
}

/* ==========================================================================
   ЭКРАН 3: НАЗНАЧЕНИЕ ВСТРЕЧИ (48-HOUR BREW & SURF COFFEE)
   ========================================================================== */
.meet-screen-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.meet-card-panel {
  background: #191817;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meet-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 107, 36, 0.15);
  border: 1px solid rgba(255, 107, 36, 0.3);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-color);
  width: fit-content;
}

.meet-match-profiles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0;
}

.meet-avatar-badge {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  overflow: hidden;
}

.meet-avatar-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meet-avatar-badge.user-avatar {
  background: #252220;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}

.org-micro-tag {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #000000;
  color: #FFFFFF;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

.meet-connection-line {
  color: var(--accent-color);
  font-size: 14px;
}

.meet-timer-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.timer-label {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

.timer-digits {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 2px;
}

.meet-venue-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 10px;
}

.venue-pin-icon {
  font-size: 20px;
}

.venue-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.venue-title {
  font-size: 12.5px;
  color: #FFFFFF;
  font-weight: 700;
}

.venue-addr {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}

.meet-topic-card {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  padding: 8px 10px;
}

.topic-badge {
  font-size: 9.5px;
  color: var(--accent-color);
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}

.topic-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.35;
  font-style: italic;
  margin: 0;
}

.meet-footer-action {
  margin-top: 8px;
}

.meet-back-to-feed-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12.5px;
  padding: 10px 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.2s;
}

.meet-back-to-feed-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ==========================================================================
   FLOATING GLASS DOCK BOTTOM BAR
   ========================================================================== */
.phone-glass-dock {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(18, 16, 15, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: 4px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  z-index: 50;
}

.glass-dock-item {
  width: 44px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.glass-dock-item:hover {
  color: rgba(255, 255, 255, 0.85);
}

.glass-dock-item.active {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.dock-item-dot {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--accent-color);
  position: absolute;
  bottom: 3px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.glass-dock-item.active .dock-item-dot {
  opacity: 1;
}

/* Тень от телефона */
.phone-reflection-shadow {
  position: absolute;
  bottom: -22px;
  left: 15%;
  right: 15%;
  height: 24px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}

/* Переключатель фото и подсказка */
.phone-photo-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
  margin-top: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.photo-toggle-btn, .toggle-photo-btn {
  background: transparent;
  border: none;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
}

.photo-toggle-btn.active, .toggle-photo-btn.active {
  background: #161514;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.phone-interactive-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 6px;
}

/* ==========================================================================
   SLANTED TICKER BANNER (60FPS HARDWARE-ACCELERATED MARQUEE)
   ========================================================================== */
.ticker-perspective-wrapper {
  margin: 0;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  z-index: 10;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Не тормозит при скролле страницы */
  user-select: none;
}

/* Бегущая строка 1: IT-компании (СВЕРХУ - стык светлого Hero и мягкого темного Features) */
.ticker-boundary-companies {
  padding: 44px 0 48px 0;
  background: linear-gradient(to bottom, var(--bg-canvas) 50%, #1C1A19 50%);
  position: relative;
  z-index: 10;
}

/* Бегущая строка 2: ВУЗы (СНИЗУ - стык темного Features и светлого Early Access) */
.ticker-boundary-unis {
  padding: 44px 0 52px 0;
  background: linear-gradient(to bottom, #1C1A19 50%, var(--bg-canvas) 50%);
  position: relative;
  z-index: 10;
}

.ticker-container {
  width: 116%;
  margin-left: -8%;
  transform: rotate(-1.5deg);
  background: #FF6B24;
  color: #FFFFFF;
  padding: 14px 0;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
  overflow: hidden;
  display: flex;
}

/* Лента IT-компаний: контр-наклон и ровный оранжевый цвет без свечения */
.ticker-container.ribbon-cities,
.ticker-container.ribbon-companies {
  transform: rotate(1.2deg);
  padding: 14px 0;
  font-size: 15.5px;
  letter-spacing: 0.6px;
  font-weight: 800;
  background: #FF6B24;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.company-text, .ticker-text, .city-text {
  color: #FFFFFF;
  font-weight: 800;
  text-shadow: none;
}

.company-dot, .ticker-dot, .city-dot {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0.9;
  text-shadow: none;
}

.ticker-track-seamless {
  display: flex;
  align-items: center;
  gap: 0;
  will-change: transform;
  flex-shrink: 0;
  width: max-content;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.track-left-smooth {
  animation: marqueeSeamlessLeft 82s linear infinite;
}

.track-right-smooth {
  animation: marqueeSeamlessRight 78s linear infinite;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
}

.ticker-text {
  padding: 0 16px;
  letter-spacing: 0.6px;
  font-weight: 800;
  color: #FFFFFF;
  font-size: 15.5px;
}

.ticker-dot {
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.95;
  flex-shrink: 0;
}

.city-text {
  color: #FFFFFF;
  font-weight: 800;
}

.city-dot {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}

@keyframes marqueeSeamlessLeft {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes marqueeSeamlessRight {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   FEATURES SECTION (DARK LUXURY & AUTHENTIC COFINE MECHANICS)
   ========================================================================== */
.features-section {
  background-color: #1C1A19;
  color: #FFFFFF;
  padding: 96px 0;
  position: relative;
  transition: background-color 0.25s ease;
}

.features-header {
  text-align: center;
  margin-bottom: 56px;
}

.features-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.features-title {
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Высококонтрастная премиальная карточка без едкого черного цвета */
.feature-card {
  background: #252321;
  border-radius: var(--radius-xl);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 36, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 20px rgba(255, 107, 36, 0.1);
}

.feature-icon-wrapper {
  width: 48px;
  height: 48px;
  background: rgba(255, 107, 36, 0.12);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF6B24;
  border: 1px solid rgba(255, 107, 36, 0.26);
}

.feature-title {
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.3px;
  line-height: 1.25;
}

.feature-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  font-weight: 450;
}

.feature-preview {
  margin-top: auto;
  background: #100F0E;
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Мокап 4-значного OTP кода из реального экрана */
.verification-card-preview {
  padding: 16px;
  background: #100F0E;
  border-radius: 14px;
}

.mini-verif-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.mini-back-arrow {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  line-height: 1;
}

.mini-verif-title {
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
}

.mini-verif-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  line-height: 1.4;
}

.mini-code-cells {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.mini-cell {
  width: 36px;
  height: 44px;
  background: #232220;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
}

.mini-cell.active {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mini-cell.empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.35);
}

.mini-orgs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.mini-org-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mini-email {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.mini-tag {
  font-weight: 700;
  color: #68D391;
}

.mini-tag.warn {
  color: #ECC94B;
}

/* Мокап механики «Кружки кофе» */
.coffee-action-preview {
  padding: 16px;
  background: #100F0E;
  border-radius: 14px;
}

.coffee-match-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coffee-match-header {
  display: flex;
  justify-content: center;
}

.coffee-avatars-pair {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: #252422;
}

.avatar-circle.you {
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF6B24 0%, #D84D2B 100%);
  border-color: rgba(255, 107, 36, 0.6);
}

.avatar-circle.them img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coffee-center-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.coffee-match-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
  font-size: 11.5px;
}

.coffee-match-text strong {
  color: #68D391;
  font-weight: 700;
}

.coffee-match-text span {
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  font-size: 11px;
}

.coffee-quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FFFFFF;
  color: #161514;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.coffee-quick-action-btn:hover {
  background: #F2F1ED;
  transform: translateY(-1px);
}

/* Мокап участников топ-вузов и IT-компаний */
.community-peers-preview {
  padding: 14px;
  background: #100F0E;
  border-radius: 14px;
}

.peers-stack-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.peer-chip-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #181716;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.peer-chip-card:hover {
  background: #201F1D;
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateX(2px);
}

.peer-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}

.peer-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.peer-avatar-initials.blue {
  background: linear-gradient(135deg, #2B6CB0 0%, #1A365D 100%);
}

.peer-avatar-initials.yellow {
  background: linear-gradient(135deg, #D69E2E 0%, #744210 100%);
}

.peer-info-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.peer-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.peer-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}

.peer-badge-pill {
  font-size: 10px;
  font-weight: 700;
  color: #68D391;
  background: rgba(104, 211, 145, 0.12);
  border: 1px solid rgba(104, 211, 145, 0.25);
  padding: 1px 7px;
  border-radius: 9999px;
  white-space: nowrap;
}

.peer-role-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.geo-radius-text {
  font-size: 11px;
  color: #68D391;
  font-weight: 600;
}

.geo-spots-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.geo-spot-pill {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.05);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   REFERRAL WELCOME BANNER
   ========================================================================== */
.referral-welcome-banner {
  background: linear-gradient(90deg, #1C1B19 0%, #2A241F 50%, #1C1B19 100%);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(230, 78, 40, 0.35);
  padding: 10px 16px;
  position: relative;
  z-index: 99;
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ref-banner-content {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
}

.ref-sparkle-icon {
  font-size: 16px;
  animation: spinSlow 6s linear infinite;
}

.ref-badge {
  background: rgba(230, 78, 40, 0.25);
  color: #FF8F70;
  border: 1px solid rgba(230, 78, 40, 0.4);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
}

.ref-banner-title {
  color: rgba(255, 255, 255, 0.9);
}

.ref-banner-sub {
  color: var(--accent-color);
  font-weight: 700;
}

.ref-banner-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
}

.ref-banner-close:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   LAUNCH PROGRESS (500 REGISTRATIONS GOAL & VIRAL REFERRAL)
   ========================================================================== */
.launch-progress-card {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 34px auto;
  background: #FFFFFF;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: 0 10px 32px rgba(37, 36, 34, 0.06);
  text-align: left;
}

.launch-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.launch-pool-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.launch-pool-title strong {
  color: var(--text-primary);
  font-weight: 700;
}

.launch-pulse-dot {
  width: 7px;
  height: 7px;
  background: var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-color);
  animation: pulseDot 1.8s infinite ease-in-out;
}

.launch-spots-badge {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.launch-spots-badge strong {
  color: #161514;
  font-weight: 800;
  font-size: 14.5px;
}

/* Трек прогресс-бара */
.progress-track-wrapper {
  margin-bottom: 18px;
}

.progress-track-bg {
  width: 100%;
  height: 14px;
  background: rgba(30, 28, 26, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-pill);
  overflow: visible;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.progress-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #94250A 0%, #C43815 25%, #E64E28 55%, var(--accent-color) 85%, #FFB4A2 100%);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: visible;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 16px rgba(255, 107, 36, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.progress-shimmer-sweep {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 70px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: progressShimmerSweep 2.2s infinite ease-in-out;
  border-radius: var(--radius-pill);
}

@keyframes progressShimmerSweep {
  0% { transform: translateX(-70px); }
  100% { transform: translateX(500px); }
}

/* Светящаяся голова шкалы с искрами и звездочками */
.progress-spark-head {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.spark-core {
  width: 12px;
  height: 12px;
  background: #FFF5F2;
  border: 2.5px solid var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-color), 0 0 24px rgba(255, 107, 36, 0.85);
  animation: sparkCorePulse 1.4s infinite ease-in-out;
}

@keyframes sparkCorePulse {
  0%, 100% {
    transform: scale(0.9);
    box-shadow: 0 0 10px var(--accent-color), 0 0 18px rgba(255, 107, 36, 0.7);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 16px var(--accent-color), 0 0 30px rgba(255, 107, 36, 0.95);
  }
}

.spark-particle {
  position: absolute;
  font-size: 11px;
  color: var(--accent-color);
  text-shadow: 0 0 8px rgba(255, 107, 36, 0.9);
  pointer-events: none;
}

.particle-top {
  top: -12px;
  right: -4px;
  animation: particleTopFloat 1.8s infinite ease-in-out;
}

.particle-bot {
  bottom: -12px;
  right: -2px;
  animation: particleBotFloat 2.1s infinite ease-in-out;
}

@keyframes particleTopFloat {
  0%, 100% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: translate(4px, -4px) scale(1.2);
    opacity: 1;
  }
}

@keyframes particleBotFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1.1);
    opacity: 0.9;
  }
  50% {
    transform: translate(3px, 4px) scale(0.7);
    opacity: 0.3;
  }
}

.progress-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
}

.progress-current-text strong {
  color: var(--text-primary);
  font-weight: 800;
}

.progress-target-text strong {
  color: var(--accent-color);
  font-weight: 800;
}

/* ==========================================================================
   BENTO-СЕТКА БОНУСОВ (4 КАРТОЧКИ В БРЕНДОВОЙ ПАЛИТРЕ COFINE)
   ========================================================================== */
.launch-perks-bento.perks-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0 16px 0;
}

.perk-bento-card {
  background: var(--bg-surface-soft);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  box-shadow: none;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.perk-bento-card:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 36, 34, 0.06);
  border-color: rgba(0, 0, 0, 0.04);
}

.perk-icon-capsule {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1C1917;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: all 0.24s ease;
}

.perk-bento-card:hover .perk-icon-capsule {
  transform: scale(1.05);
}

.perk-glyph {
  font-size: 18px;
  line-height: 1;
}

.perk-bento-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.perk-bento-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.perk-bento-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* Лаконичная экшен-кнопка приглашения */
.launch-action-bar {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.launch-invite-action-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1C1917;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-btn);
  padding: 13px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.launch-invite-action-btn:hover {
  background: #2D2926;
  border-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* Glass-кнопка для формы Early Access */
.early-submit-button {
  background: rgba(22, 21, 20, 0.92);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: #FFFFFF;
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.22);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.early-submit-button:hover:not(:disabled) {
  background: rgba(35, 34, 32, 0.96);
  transform: translateY(-1.5px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 8px 24px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.28);
}

.early-submit-button:disabled {
  background: rgba(30, 29, 28, 0.85);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   EARLY ACCESS SECTION (CLEAN SINGLE-LAYER HERO DESIGN)
   ========================================================================== */
.early-access {
  padding: 60px 0 24px 0;
  background: var(--bg-canvas);
  text-align: center;
  transition: background-color 0.25s ease;
  position: relative;
}

.early-access-content {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.early-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(37, 36, 34, 0.04);
}

.early-access-title {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.early-access-desc {
  font-size: 15.5px;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 28px auto;
  line-height: 1.55;
}

.early-access-form {
  width: 100%;
  max-width: 480px;
}

.early-input-wrapper {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-input);
  padding: 5px 5px 5px 16px;
  box-shadow: 0 4px 18px rgba(37, 36, 34, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.early-input-wrapper:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 6px 24px var(--accent-color-glow);
}

.early-input-wrapper.shimmer-verified {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color-soft), 0 8px 30px var(--accent-color-glow);
  animation: borderVerifiedPulse 2.4s infinite ease-in-out;
}

.early-input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 8px 0;
  min-width: 0;
}

.early-submit-button {
  padding: 12px 22px;
  border-radius: var(--radius-btn);
  background: #161514;
  color: #FFFFFF;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(22, 21, 20, 0.25);
  transition: var(--transition);
}

.early-submit-button:hover:not(:disabled) {
  background: #2E2D2A;
  transform: translateY(-1px);
}

.early-submit-button:disabled {
  background: #161514;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0.9;
  cursor: not-allowed;
}

.early-detected-org {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.early-form-footnote {
  margin-top: 14px;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.faq-section {
  padding: 60px 0 140px 0;
  background-color: var(--bg-canvas);
  transition: background-color 0.25s ease;
}

.faq-title {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 30px;
}

.faq-list {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  transition: var(--transition);
  overflow: hidden;
}

.faq-item.active {
  border-color: var(--border-subtle);
  outline: none;
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  text-align: left;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary);
  transition: padding 0.2s ease;
}

.faq-item.active .faq-question-btn {
  padding: 20px 24px 10px 24px;
}

.faq-icon {
  color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
  flex-shrink: 0;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: var(--text-primary);
}

/* Безупречно плавный аккордеон без скачков страницы */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 24px 0 24px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.2s ease;
}

.faq-answer-inner p {
  margin: 0;
  padding: 0;
}

.faq-item.active .faq-answer-inner {
  opacity: 1;
  transform: translateY(0);
  padding: 0 24px 22px 24px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background-color: var(--bg-surface-soft);
  color: var(--text-primary);
  padding: 56px 0 36px 0;
  border-top: 1px solid var(--border-subtle);
  transition: background-color 0.25s ease;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1.1fr 1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 36px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-logo-full-link {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
  margin-bottom: 0;
}

.footer-logo-full-link:hover {
  opacity: 0.85;
}

.footer-logo-full-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.footer-logo-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin: 0;
  height: 32px;
}

.footer-logo-brand-wrap:hover {
  opacity: 0.85;
}

.footer-logo-brand-cup {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-brand-title {
  color: var(--text-primary);
  font-family: 'Fredoka', 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}

.footer-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 310px;
}

.footer-copy {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

.footer-col-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  font-size: 14px;
  color: var(--text-secondary);
  transition: var(--transition);
}

.footer-link:hover {
  color: var(--accent-color);
}

/* Кликабельные кнопки мобильных сторов */
.footer-stores-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  width: 100%;
  max-width: 170px;
  transition: all 0.22s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.footer-store-btn:hover {
  background: var(--bg-surface);
  border-color: var(--accent-color);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.store-svg {
  flex-shrink: 0;
}

.apple-svg {
  color: var(--text-primary);
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-badge-sub {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
}

.store-badge-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.footer-legal-divider {
  margin-top: 6px;
  padding-top: 8px;
  position: relative;
}

.footer-legal-divider::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--border-subtle);
  margin-bottom: 8px;
}

.footer-legal-link {
  font-size: 12.5px !important;
  color: var(--text-muted) !important;
}

.footer-legal-link:hover {
  color: var(--accent-color) !important;
}

/* ==========================================================================
   COOKIE NOTIFICATION TOAST
   ========================================================================== */
.cookie-banner-wrap {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  max-width: 480px;
  width: calc(100% - 48px);
  animation: cookieSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cookieSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cookie-banner-card {
  background: rgba(26, 25, 24, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #FFFFFF;
}

.cookie-banner-msg {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  flex: 1;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cookie-banner-accept-btn {
  background: var(--accent-color);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px var(--accent-color-glow);
}

.cookie-banner-accept-btn:hover {
  background: var(--accent-color-hover);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .cookie-banner-wrap {
    left: 12px;
    right: 12px;
    bottom: 68px;
    width: calc(100% - 24px);
    max-width: none;
  }
  .cookie-banner-card {
    padding: 12px 14px;
    gap: 12px;
    border-radius: 16px;
  }
  .cookie-banner-msg {
    font-size: 12.5px;
  }
  .cookie-banner-accept-btn {
    padding: 7px 14px;
    font-size: 12px;
  }
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(25, 24, 23, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 30px 24px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: scaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.modal-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 18px;
}

.modal-icon-badge.success {
  background: var(--brand-green-bg);
  border: 1px solid rgba(46, 155, 86, 0.25);
}

.modal-icon-badge.reject {
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
}

.modal-icon-badge.error {
  background: var(--accent-color-soft);
  border: 1px solid rgba(230, 78, 40, 0.25);
}

.modal-icon-badge.invite {
  background: rgba(230, 78, 40, 0.15);
  border: 1px solid rgba(230, 78, 40, 0.35);
}

.modal-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.modal-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Бейдж Founding Member и бонусы */
.modal-founder-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #161514;
  color: #FEEBC8;
  border: 1px solid rgba(246, 173, 85, 0.3);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.modal-bonus-list {
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-bonus-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.bonus-check {
  color: var(--accent-color);
  font-weight: 800;
  font-size: 14px;
}

/* Реферальный блок со ссылкой */
.modal-referral-box {
  background: #FAF7F2;
  border: 1px dashed rgba(230, 78, 40, 0.4);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 20px;
  text-align: left;
}

.modal-ref-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.modal-referral-input-row {
  display: flex;
  gap: 8px;
}

.modal-ref-link-field {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text-primary);
  font-weight: 600;
  outline: none;
}

.modal-copy-btn {
  background: #161514;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.modal-copy-btn:hover {
  background: #2E2D2A;
}

/* Кнопка шаринга в Telegram */
.modal-tg-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #2AABEE;
  color: #FFFFFF;
  padding: 12px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(42, 171, 238, 0.3);
  transition: all 0.2s ease;
}

.modal-tg-share-btn:hover {
  background: #229ED9;
  transform: translateY(-1px);
}

.modal-waitlist-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 16px;
}

.modal-status-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-color);
  border-radius: 50%;
}

.modal-btn {
  width: 100%;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  padding: 13px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: var(--hero-btn-shadow);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.modal-btn:hover {
  background: var(--hero-btn-hover);
}

.modal-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
}

.modal-link:hover {
  color: var(--text-primary);
}

/* ==========================================================================
   WAITLIST MODAL (REBRANDED MODERN COFINE DESIGN)
   ========================================================================== */
.waitlist-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.waitlist-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 29, 27, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.07);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.waitlist-spark {
  color: var(--accent-color, #E2583E);
  font-size: 11px;
}

.waitlist-brand-emblem {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(226, 88, 62, 0.08);
  border: 1px solid rgba(226, 88, 62, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(226, 88, 62, 0.08);
}

.waitlist-cup-img {
  height: 18px;
  width: auto;
  object-fit: contain;
}

.waitlist-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  margin-bottom: 2px;
  line-height: 1.25;
}

.waitlist-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 8px;
  max-width: 340px;
}

.waitlist-desc strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Статусная карточка домена */
.waitlist-status-card {
  width: 100%;
  background: rgba(26, 25, 24, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  text-align: left;
}

.waitlist-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.waitlist-domain-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.waitlist-domain-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #8A8884);
}

.waitlist-domain-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}

.waitlist-counter-badge {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

.waitlist-counter-current {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent-color, #E2583E);
}

.waitlist-counter-total {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Прогресс-бар */
.waitlist-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.waitlist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #E2583E 0%, #F58A5B 100%);
  border-radius: 999px;
  position: relative;
  transition: width 0.6s ease;
}

/* Блок: Топ организаций в очереди */
.waitlist-top-orgs-card {
  width: 100%;
  background: rgba(26, 25, 24, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  text-align: left;
}

.waitlist-top-orgs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.waitlist-top-orgs-heading {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted, #8A8884);
}

.waitlist-top-orgs-tag {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent-color, #E2583E);
  background: rgba(226, 88, 62, 0.08);
  padding: 1px 6px;
  border-radius: 5px;
}

.waitlist-top-orgs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.waitlist-top-org-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.top-org-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}

.top-org-name {
  font-weight: 600;
  color: var(--text-primary);
}

.top-org-count {
  font-weight: 700;
  font-size: 10.5px;
  color: var(--text-secondary);
}

.top-org-track {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  overflow: hidden;
}

.top-org-fill {
  height: 100%;
  background: linear-gradient(90deg, #E2583E 0%, #F58A5B 100%);
  border-radius: 999px;
  transition: width 0.6s ease;
}

[data-theme="latte"] .top-org-fill,
[data-theme="latte"] .waitlist-progress-fill {
  background: linear-gradient(90deg, #A4683D 0%, #D49B6A 100%);
}

[data-theme="latte"] .waitlist-top-orgs-tag {
  color: #A4683D;
  background: rgba(164, 104, 61, 0.1);
}

/* Блок действия / кнопка Скопировать ссылку */
.waitlist-share-action-box {
  width: 100%;
  margin-bottom: 8px;
  text-align: center;
}

.waitlist-share-hint {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.waitlist-copy-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: #1C1B1A;
  color: #FFFFFF;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.waitlist-copy-action-btn:hover {
  background: #2D2C2A;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.waitlist-copy-action-btn.copied {
  background: #2E7D32;
  border-color: #2E7D32;
}

.waitlist-modal-body .modal-btn {
  margin-bottom: 4px;
  padding: 9px 14px;
  font-size: 13px;
  border-radius: 9px;
}

.modal-channel-subtext {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
  margin-top: 6px;
  display: inline-block;
}

.modal-channel-subtext:hover {
  color: var(--text-primary);
}

/* ==========================================================================
   FLOATING THEME SWITCHER DOCK
   ========================================================================== */
.theme-switcher-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}

.theme-dock {
  position: relative;
}

.theme-dock-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-dock-trigger:hover {
  background: var(--bg-surface-soft);
  border-color: var(--accent-color-glow);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.theme-dock-icon {
  font-size: 15px;
}

.theme-dock-current-name {
  color: var(--text-primary);
  letter-spacing: 0.2px;
}

.theme-dock-arrow {
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.theme-dock.is-expanded .theme-dock-arrow {
  transform: rotate(180deg);
}

.theme-dock-dropdown {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 250px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: dockSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dockSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.theme-dropdown-header {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  padding: 4px 8px 10px 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.theme-options-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.theme-dock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
}

.theme-dock-item:hover {
  background: var(--bg-surface-soft);
  border-color: var(--border-subtle);
}

.theme-dock-item.is-active {
  background: var(--bg-surface-soft);
  border-color: var(--accent-color-soft);
}

.theme-item-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.theme-dock-item:hover .theme-item-dot {
  transform: scale(1.18);
}

.theme-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.theme-item-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.theme-item-badge {
  font-size: 10.5px;
  color: var(--text-muted);
}

.theme-item-check {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-color);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 40px;
  }
  .hero-badge {
    margin: 0 auto 16px auto;
  }
  .hero-content {
    align-items: flex-start;
  }
  .hero-subheading {
    margin-left: 0;
    margin-right: 0;
  }
  .hero-action-container {
    width: 100%;
  }
  .features-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .header-inner {
    height: 64px;
    justify-content: space-between;
  }
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: flex;
  }
  .logo-brand-text {
    font-size: 20px;
  }
  .logo-badge {
    display: none;
  }

  /* Чистый, собранный Hero с интерактивным мокапом на мобилках */
  .hero {
    padding: 32px 0 36px 0;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 0;
  }
  .hero-content {
    align-items: flex-start;
    max-width: 100%;
  }
  .hero-badge {
    margin: 0 auto 14px auto;
    padding: 5px 12px;
  }
  .hero-badge-text {
    font-size: 12px;
  }
  .hero-title {
    font-size: clamp(34px, 8.5vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 14px;
  }
  .hero-subheading {
    font-size: 15px;
    line-height: 1.52;
    margin: 0 auto 24px auto;
    max-width: 380px;
  }
  .hero-action-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }
  .hero-input-wrapper {
    flex-direction: row;
    border-radius: var(--radius-pill);
    padding: 6px 6px 6px 16px;
    gap: 8px;
  }
  .hero-input-icon {
    display: none;
  }
  .hero-input-wrapper input {
    font-size: 14px;
    padding: 8px 0;
    width: 100%;
  }
  .hero-submit-button {
    padding: 10px 18px;
    font-size: 13.5px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }
  .hero-submit-button svg {
    display: none;
  }

  /* Стильный мобильный мокап телефона */
  .hero-mockup-wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    overflow: hidden;
  }
  .hero-mockup-wrapper .phone-3d-scene {
    transform: scale(0.85);
    transform-origin: top center;
    max-height: 520px;
  }

  .ticker-perspective-wrapper {
    margin: 0;
  }
  .ticker-boundary-companies {
    padding: 24px 0 28px 0;
    background: var(--bg-canvas);
  }
  .ticker-boundary-unis {
    padding: 24px 0 38px 0;
    background: var(--bg-canvas);
  }
  .ticker-container {
    padding: 11px 0;
    font-size: 12px;
    letter-spacing: 0.6px;
  }

  .features-section {
    padding: 60px 0;
  }
  .features-header {
    margin-bottom: 36px;
  }
  .features-title {
    font-size: 26px;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .feature-card {
    padding: 24px 20px;
    gap: 14px;
    border-radius: var(--radius-lg);
  }
  .feature-title {
    font-size: 18px;
  }
  .feature-desc {
    font-size: 14px;
  }

  .hero-domain-shortcuts {
    justify-content: center;
  }

  .early-access {
    padding: 56px 0;
  }
  .early-access-content {
    padding: 0 16px;
  }
  .launch-progress-card {
    padding: 18px 14px;
    margin-bottom: 28px;
  }
  .launch-perks-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .launch-invite-cta {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .invite-cta-btn {
    width: 100%;
  }
  .early-input-wrapper {
    flex-direction: row;
    padding: 4px 4px 4px 14px;
  }
  .early-submit-button {
    padding: 10px 16px;
    font-size: 13px;
  }
  .early-access-title {
    font-size: 26px;
  }
  .early-access-desc {
    font-size: 14px;
    margin-bottom: 22px;
  }

  .faq-section {
    padding: 50px 0;
  }
  .faq-title {
    font-size: 24px;
    margin-bottom: 28px;
  }
  .faq-question-btn {
    padding: 16px 18px;
    font-size: 15px;
  }
  .faq-answer-inner {
    padding: 0 18px 18px 18px;
    font-size: 14px;
  }

  .footer {
    padding: 44px 0 28px 0;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .footer-brand {
    align-items: center;
  }

  /* Виджет переключателя на мобилках */
  .theme-switcher-container {
    bottom: 16px;
    right: 16px;
  }
  .theme-dock-trigger {
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 32px;
  }
  .hero-subheading {
    font-size: 14px;
    max-width: 320px;
  }
}

/* ==========================================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ (ПОЛИТИКА И СОГЛАШЕНИЕ) — МАКСИМАЛЬНАЯ ЧИТАЕМОСТЬ
   ========================================================================== */
.legal-page-wrapper {
  padding: 100px 24px 80px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-canvas);
}

.legal-article-card {
  width: 100%;
  max-width: 740px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 48px 44px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.legal-back-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 32px;
  padding: 7px 16px;
  background: var(--bg-surface-soft);
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.legal-back-nav:hover {
  color: var(--text-primary);
  background: #EAEBE9;
  transform: translateX(-2px);
}

.legal-header {
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 24px;
}

.legal-main-title {
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 10px;
}

.legal-meta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.legal-body-content {
  font-size: 15px;
  line-height: 1.72;
  color: #383734;
}

.legal-body-content p {
  margin-bottom: 20px;
}

.legal-section-h2 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: 36px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.legal-definitions-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.legal-definitions-list li {
  padding: 10px 14px;
  background: var(--bg-surface-soft);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.legal-definitions-list li strong {
  color: var(--text-primary);
  font-weight: 700;
}

.legal-bullet-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.legal-bullet-list li {
  color: #403F3C;
  font-size: 14.5px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .legal-page-wrapper {
    padding: 80px 16px 60px 16px;
  }
  .legal-article-card {
    padding: 28px 20px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   METALLIC 3D VIP RESIDENT CARD & VIP MODAL STYLES
   ========================================================================== */
.metal-card-perspective-container {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 10px 0;
  width: 100%;
}

.metal-vip-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1.586 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(145deg, #181716 0%, #292724 35%, #141312 70%, #1F1E1C 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 
    0 22px 48px -10px rgba(0, 0, 0, 0.72),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.32),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6);
  color: #FFFFFF;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.metal-glare-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  transition: opacity 0.2s ease;
}

.metal-specular-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: overlay;
  transition: opacity 0.2s ease;
}

.metal-brushed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.015) 0px,
    rgba(255, 255, 255, 0.015) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.8;
  z-index: 2;
}

.metal-card-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metal-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metal-brand-logo-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.metal-brand-name {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  color: #FFFFFF;
}

.metal-club-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 4px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.25);
  padding-left: 9px;
}

.metal-engraved-quota {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.metal-engraved-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  line-height: 1;
}

.metal-engraved-val {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #ECEAE4;
  text-shadow: 
    0 1px 1px rgba(255, 255, 255, 0.25),
    0 -1px 1px rgba(0, 0, 0, 0.85);
  line-height: 1.1;
}

/* Номер участника (ровно и аккуратно выровненный блок с гравировкой) */
.metal-member-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  z-index: 3;
  margin: 10px 0;
}

.metal-id-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  line-height: 1;
}

.metal-id-number {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 3.5px;
  color: #ECEAE4;
  text-shadow: 
    0 1px 1px rgba(255, 255, 255, 0.25),
    0 -1.5px 2px rgba(0, 0, 0, 0.95);
  line-height: 1.1;
}

.metal-card-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.metal-holder-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 75%;
}

.metal-footer-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  line-height: 1;
}

.metal-engraved-email {
  font-size: 15.5px;
  font-weight: 700;
  color: #ECEAE4;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-shadow: 
    0 1px 1px rgba(255, 255, 255, 0.22),
    0 -1px 1.5px rgba(0, 0, 0, 0.9);
}

.laser-cursor {
  display: inline-block;
  color: #FF6B24;
  font-weight: 900;
  margin-left: 2px;
  animation: laserBlink 0.6s infinite;
}

@keyframes laserBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.metal-pass-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.metal-engraved-batch {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: #ECEAE4;
  text-shadow: 
    0 1px 1px rgba(255, 255, 255, 0.25),
    0 -1px 1px rgba(0, 0, 0, 0.85);
  line-height: 1.1;
}

/* ==========================================================================
   VIP MODAL LAYOUT: CLEAN, SPACIOUS & LUXURIOUS
   ========================================================================== */
.modal-content.vip-modal-layout {
  max-width: 520px;
  padding: 28px 30px 24px 30px;
  max-height: 94vh;
  overflow-y: auto;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.modal-close-x-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 10;
}

.modal-close-x-btn:hover {
  background: #E2E8F0;
  color: var(--text-primary);
}

.vip-modal-header {
  text-align: center;
  margin-bottom: 4px;
}

.vip-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1C1B19;
  color: #FEEBC8;
  border: 1px solid rgba(246, 173, 85, 0.35);
  padding: 3.5px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.vip-spark-icon {
  color: #FF6B24;
}

.vip-modal-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.25;
}

.vip-modal-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.vip-card-wrapper-modal {
  margin: 14px 0 18px 0;
}

.modal-single-action-row {
  display: flex;
  justify-content: center;
  width: 100%;
}

.modal-primary-action-btn {
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  border: none;
  padding: 12px 36px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--hero-btn-shadow);
  width: 100%;
  max-width: 260px;
  text-align: center;
}

.modal-primary-action-btn:hover {
  background: var(--hero-btn-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   BOTTOM CTA: EMBEDDED VIP CARD IN EARLY ACCESS
   ========================================================================== */
.bottom-embedded-vip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 18px;
  width: 100%;
}

.bottom-card-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.bottom-invite-friend-btn {
  background: #1C1B1A;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 15px;
  font-weight: 800;
  padding: 13px 36px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bottom-invite-friend-btn:hover {
  background: #2D2C2A;
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

[data-theme="latte"] .bottom-invite-friend-btn {
  background: #A4683D;
  border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="latte"] .bottom-invite-friend-btn:hover {
  background: #8F552E;
}

.bottom-switch-email-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bottom-switch-email-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.3);
}

.bottom-vip-registered-card {
  width: 100%;
  max-width: 620px;
  margin: 18px auto 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 22px 24px;
  text-align: left;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  transition: var(--transition);
}

.registered-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.registered-badge-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #68D391;
  text-transform: uppercase;
}

.registered-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #48BB78;
  box-shadow: 0 0 8px #48BB78;
}

.registered-card-num {
  font-family: 'Space Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #FEEBC8;
  background: rgba(246, 173, 85, 0.12);
  border: 1px solid rgba(246, 173, 85, 0.28);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.registered-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.registered-card-info {
  flex: 1;
  min-width: 240px;
}

.registered-email-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.registered-check-icon {
  color: #48BB78;
  font-weight: 900;
  font-size: 14px;
}

.registered-email-text {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.2px;
}

.registered-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.45;
  margin: 0;
}

.registered-actions-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.registered-view-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-color);
  color: #FFFFFF;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 107, 36, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.registered-view-card-btn:hover {
  background: var(--accent-color-hover);
  transform: translateY(-1px);
}

.btn-cup-mini {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.registered-switch-email-btn {
  background: transparent;
  border: none;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.registered-switch-email-btn:hover {
  color: #FFFFFF;
}

/* ==========================================================================
   FEATURES SECTION: GOALS SELECTOR MOCKUP (НЕ ТОЛЬКО ДЕЙТИНГ)
   ========================================================================== */
.goals-selector-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.goals-tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-tab-pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-surface-soft);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: var(--transition);
}

.goal-tab-pill:hover {
  background: #E2E8F0;
  color: var(--text-primary);
}

.goal-tab-pill.active {
  background: var(--text-primary);
  color: #FFFFFF;
  border-color: var(--text-primary);
}

.goal-match-card {
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.goal-badge-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.goal-badge-tag.coffee {
  background: rgba(160, 114, 76, 0.12);
  color: #8C603D;
}

.goal-badge-tag.dating {
  background: rgba(255, 107, 36, 0.12);
  color: #E2532F;
}

.goal-badge-tag.projects {
  background: rgba(46, 155, 86, 0.12);
  color: #2E9B56;
}

.goal-badge-tag.party {
  background: rgba(155, 93, 229, 0.12);
  color: #7928CA;
}

.goal-match-quote {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 10px;
}

.goal-user-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 700;
}

.mini-privacy-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(46, 155, 86, 0.08);
  border: 1px solid rgba(46, 155, 86, 0.2);
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 10px;
}

/* ==========================================================================
   BOTTOM CTA SECTION (ПРЕДФУТЕРНЫЙ КОНВЕРСИОННЫЙ БЛОК)
   ========================================================================== */
.bottom-cta-section {
  padding: 60px 0 80px 0;
}

.bottom-cta-card {
  background: linear-gradient(135deg, #252422 0%, #1A1918 100%);
  border-radius: 28px;
  padding: 56px 40px;
  text-align: center;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.bottom-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 107, 36, 0.18);
  border: 1px solid rgba(255, 107, 36, 0.35);
  color: #FFCBA4;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

.bottom-cta-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.6px;
  color: #FFFFFF;
  margin-bottom: 12px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.bottom-cta-subtitle {
  font-size: 16px;
  color: #CBD5E0;
  max-width: 580px;
  margin: 0 auto 28px auto;
  line-height: 1.6;
}

.bottom-cta-form {
  max-width: 540px;
  margin: 0 auto;
}

.bottom-input-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 6px 6px 6px 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.bottom-email-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 15px;
  color: #1A202C;
  font-weight: 600;
  outline: none;
}

.bottom-email-input::placeholder {
  color: #A0AEC0;
}

.bottom-submit-btn {
  background: var(--accent-color);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14.5px;
  padding: 12px 22px;
  border-radius: 14px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.bottom-submit-btn:hover {
  background: var(--accent-color-hover);
  transform: translateY(-1px);
}

.bottom-org-status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.bottom-org-status.verified {
  color: #68D391;
}

.bottom-org-status.unsupported {
  color: #CBD5E0;
}

.bottom-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: #A0AEC0;
  margin-top: 16px;
  line-height: 1.5;
}

.bottom-existing-vip-box {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 18px 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
}

.existing-open-vip-btn {
  background: #FFFFFF;
  color: #1A202C;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.existing-open-vip-btn:hover {
  background: #F7FAFC;
  transform: translateY(-1px);
}

/* ==========================================================================
   HERO EXISTING VIP BANNER & SECURITY ASSURANCE
   ========================================================================== */
.hero-existing-vip-banner {
  background: #18181B;
  border: 1px solid rgba(246, 173, 85, 0.35);
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.existing-vip-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.existing-vip-left .existing-spark {
  color: #F6AD55;
  font-size: 20px;
}

.existing-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.existing-title {
  font-size: 14.5px;
  color: #FFFFFF;
  font-weight: 700;
}

.existing-sub {
  font-size: 12px;
  color: #A1A1AA;
}

.hero-open-vip-btn {
  background: #F6AD55;
  color: #18181B;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.hero-open-vip-btn:hover {
  background: #ED8936;
}

.hero-security-assurance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}

/* Кнопка VIP-карты в шапке (Navbar) */
.nav-actions-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-vip-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #18181B;
  color: #FEEBC8;
  border: 1px solid rgba(246, 173, 85, 0.35);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
}

.nav-vip-card-btn:hover {
  background: #27272A;
  transform: translateY(-1px);
}

.nav-vip-spark {
  color: #F6AD55;
}

.launch-limitation-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.5;
}

/* ==========================================================================
   REDESIGNED PREMIUM LAUNCH CARD (ЗАКРЫТЫЙ ЗАПУСК ПЕРВОЙ ВОЛНЫ)
   ========================================================================== */
.premium-launch-card {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  background: linear-gradient(145deg, #1C1B19 0%, #121110 100%);
  border: 1.5px solid rgba(246, 173, 85, 0.35);
  border-radius: 26px;
  padding: 38px 34px;
  box-shadow: 
    0 28px 70px rgba(0, 0, 0, 0.5), 
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  text-align: left;
}

.premium-launch-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.premium-launch-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.premium-launch-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(246, 173, 85, 0.12);
  border: 1px solid rgba(246, 173, 85, 0.35);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #FEEBC8;
  width: fit-content;
}

.premium-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #48BB78;
  box-shadow: 0 0 8px #48BB78;
}

.premium-metric-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.premium-count-big {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: #FFFFFF;
  line-height: 1;
}

.premium-count-divider {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.premium-count-total {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.premium-spots-badge {
  background: rgba(255, 107, 36, 0.16);
  border: 1px solid rgba(255, 107, 36, 0.45);
  color: #FFCBA4;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 700;
}

.premium-spots-badge strong {
  color: #FFFFFF;
  font-weight: 900;
}

.premium-track-container {
  margin-bottom: 28px;
}

.premium-track-bg {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.premium-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B24 0%, #F6AD55 100%);
  border-radius: var(--radius-pill);
  position: relative;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 16px rgba(255, 107, 36, 0.6);
}

.premium-track-spark {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: #FFFFFF;
  filter: blur(2px);
  opacity: 0.9;
}

.premium-track-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  margin-top: 8px;
}

.premium-perks-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.premium-perk-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.premium-perk-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.premium-perk-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.premium-perk-text strong {
  font-size: 14px;
  color: #FFFFFF;
}

.premium-perk-text span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.premium-launch-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.premium-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-color);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  border: none;
}

.premium-invite-btn:hover {
  background: var(--accent-color-hover);
  transform: translateY(-1px);
}

.premium-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #93C5FD;
  transition: var(--transition);
}

.premium-tg-link:hover {
  color: #BFDBFE;
}

.tg-arrow-mini {
  font-size: 16px;
}

/* ==========================================================================
   SIMPLIFIED FEATURE PREVIEWS (БЕЗОПАСНЫЙ, КОМЬЮНИТИ, НЕ ТОЛЬКО ДЕЙТИНГ)
   ========================================================================== */
.mini-otp-box {
  background: #11100F;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.mini-otp-title {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.community-names-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.community-tag-badge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  transition: var(--transition);
}

.community-tag-badge.uni-tag {
  background: rgba(246, 173, 85, 0.09);
  border-color: rgba(246, 173, 85, 0.22);
  color: #FEEBC8;
}

.formats-simple-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.format-simple-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 9px 12px;
}

.format-simple-icon {
  font-size: 15px;
}

.format-simple-text {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .premium-launch-card {
    padding: 24px 18px;
  }
  .premium-perks-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .premium-launch-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .premium-invite-btn {
    justify-content: center;
  }
  .premium-tg-link {
    justify-content: center;
  }
}

/* ==========================================================================
   SEAMLESS LAUNCH PROGRESS (БЕЗ ПОДЛОЖКИ И КАРТОЧКИ)
   ========================================================================== */
.launch-progress-seamless {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

.seamless-launch-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}

.seamless-launch-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seamless-launch-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  width: fit-content;
}

.seamless-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-color-glow);
}

.seamless-metric-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.seamless-count-big {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  line-height: 1;
}

.seamless-count-divider {
  font-size: 26px;
  color: var(--text-muted);
  font-weight: 600;
}

.seamless-count-total {
  font-size: 22px;
  color: var(--text-secondary);
  font-weight: 700;
}

.seamless-spots-badge {
  background: rgba(255, 107, 36, 0.1);
  border: 1px solid rgba(255, 107, 36, 0.28);
  color: var(--accent-color);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
}

.seamless-spots-badge strong {
  color: var(--accent-color);
  font-weight: 900;
}

.seamless-track-container {
  margin-bottom: 28px;
}

.seamless-track-bg {
  width: 100%;
  height: 14px;
  background: rgba(0, 0, 0, 0.09);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-pill);
  overflow: visible;
  position: relative;
}

[data-theme='dark'] .seamless-track-bg,
.theme-dark .seamless-track-bg {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}

.seamless-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B24 0%, #F6AD55 100%);
  border-radius: var(--radius-pill);
  position: relative;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 14px rgba(255, 107, 36, 0.4);
}

.seamless-track-spark {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: #FFFFFF;
  filter: blur(2px);
  opacity: 0.9;
  border-radius: var(--radius-pill);
}

/* Мерцающие партиклы на острие шкалы прогресса */
.track-particles-cluster {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 5;
}

.track-p-dot {
  position: absolute;
  border-radius: 50%;
  background: #FFAA4D;
  box-shadow: 0 0 6px #FF6B24;
  animation: trackParticleFloat 1.8s infinite ease-out;
}

.track-p-dot.p-d1 { width: 5px; height: 5px; top: -7px; left: 1px; animation-delay: 0s; }
.track-p-dot.p-d2 { width: 4px; height: 4px; top: 7px; left: 3px; animation-delay: 0.45s; }
.track-p-dot.p-d3 { width: 5.5px; height: 5.5px; top: 0px; left: 6px; animation-delay: 0.9s; }
.track-p-dot.p-d4 { width: 3.5px; height: 3.5px; top: -11px; left: -1px; animation-delay: 1.35s; }

@keyframes trackParticleFloat {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  35% { transform: translate(3px, -2px) scale(1.2); opacity: 1; }
  100% { transform: translate(12px, -7px) scale(0); opacity: 0; }
}

.seamless-track-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 8px;
}

.seamless-perks-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.seamless-perk-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.seamless-perk-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 0, 0, 0.12);
}

.seamless-perk-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.seamless-perk-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.seamless-perk-text strong {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 800;
}

.seamless-perk-text span {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.seamless-launch-actions {
  display: flex;
  align-items: center;
  justify-content: center; /* Центрируем кнопку */
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

.seamless-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  font-size: 14px;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  box-shadow: var(--hero-btn-shadow);
}

.seamless-invite-btn:hover {
  background: var(--hero-btn-hover);
  transform: translateY(-1px);
}

.seamless-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0284C7;
  transition: var(--transition);
}

.seamless-tg-link:hover {
  color: #0369A1;
  text-decoration: underline;
}

.seamless-arrow-mini {
  font-size: 16px;
}

@media (max-width: 768px) {
  .seamless-perks-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .seamless-launch-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .seamless-invite-btn {
    justify-content: center;
  }
  .seamless-tg-link {
    justify-content: center;
  }
}

/* ==========================================================================
   AUTHENTIC 3D PHONE MODEL DEPTH & PARALLAX FLOATING LAYERS
   ========================================================================== */
.phone-mockup-frame {
  box-shadow: 
    0 20px 42px -10px rgba(0, 0, 0, 0.42),
    0 8px 18px -4px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
  border: 3.5px solid #302F2C;
  transform-style: preserve-3d;
}

.floating-ui-layer {
  transform: translateZ(26px);
  transform-style: preserve-3d;
  will-change: transform;
}

.title-wave-gradient {
  background: linear-gradient(135deg, #FF6B24 0%, #E2532F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.early-badge-spark {
  color: #FF6B24;
}

.early-access-title {
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 24px;
}

/* ==========================================================================
   VERIFIED ORGS STRIP (REAL MONOCHROME SVG LOGOS UNDER HERO)
   ========================================================================== */
.verified-orgs-strip {
  padding: 24px 0 32px 0;
  background: var(--bg-canvas);
  position: relative;
  z-index: 5;
  transition: background-color 0.25s ease;
}

.verified-strip-caption {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
}

.verified-logos-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 36px;
  max-width: 960px;
  margin: 0 auto;
}

.org-logo-item {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: default;
}

.org-logo-item:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.org-logo-item svg {
  display: block;
}

/* ==========================================================================
   GLASS FEATURES CARDS WITH ANIMATED HOVER GLARE & DIRECT PREVIEWS
   ========================================================================== */
.glass-feature-card {
  background: rgba(28, 27, 25, 0.72) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  position: relative;
  overflow: hidden;
}

/* Анимированный блик при наведении на стеклянную карточку */
.glass-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-20deg);
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

.glass-feature-card:hover::before {
  left: 170%;
}

[data-theme='light'] .glass-feature-card,
.theme-light .glass-feature-card {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1.5px solid rgba(37, 36, 34, 0.1) !important;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Прямые превью без двойных вложенных подложек */
.feature-direct-preview {
  margin-top: auto;
  padding-top: 14px;
}

.clean-otp-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 16px 18px;
}

.clean-otp-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.clean-otp-spark {
  font-size: 10px;
}

.clean-otp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-color);
  background: rgba(255, 107, 36, 0.1);
  border: 1px solid rgba(255, 107, 36, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  width: fit-content;
  margin-top: 2px;
}

.clean-otp-bullet {
  font-size: 8px;
}

.clean-community-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clean-community-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme='light'] .clean-community-pill,
.theme-light .clean-community-pill {
  background: #FFFFFF;
  color: #1A1918;
  border-color: rgba(37, 36, 34, 0.14);
}

.clean-community-pill.uni-pill {
  color: #FFAA4D;
  border-color: rgba(255, 160, 122, 0.28);
}

.clean-coffee-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 16px 18px;
}

.clean-coffee-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-color);
}

.clean-coffee-spark {
  font-size: 10px;
}

.clean-coffee-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clean-coffee-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B24 0%, #D84D2B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.clean-coffee-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.clean-coffee-info strong {
  font-size: 13.5px;
  color: #FFFFFF;
  font-weight: 800;
}

[data-theme='light'] .clean-coffee-info strong,
.theme-light .clean-coffee-info strong {
  color: #1A1918;
}

.clean-coffee-info span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}

[data-theme='light'] .clean-coffee-info span,
.theme-light .clean-coffee-info span {
  color: #6E6D6A;
}

/* ==========================================================================
   BUTTON SPINNERS & ERROR CAPTIONS
   ========================================================================== */
.btn-loading-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-ring-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: btnSpinnerRotate 0.65s linear infinite;
  display: inline-block;
}

@keyframes btnSpinnerRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hero-error-caption,
.bottom-error-caption {
  font-size: 12.5px;
  font-weight: 700;
  color: #FF6B24;
  margin-top: 6px;
  animation: fadeIn 0.25s ease;
}

/* Акцентный статус распознанной организации (без зеленого) */
.domain-status-box.verified-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 107, 36, 0.1);
  border: 1px solid rgba(255, 107, 36, 0.25);
  color: var(--text-primary);
  font-size: 13px;
}

.status-spark-accent {
  color: #FF6B24;
  font-size: 11px;
}

/* ==========================================================================
   VIP CARD WAVE #1 / 1.000 & MATCHING FOOTER
   ========================================================================== */
.metal-wave-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.metal-wave-tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

.metal-wave-val {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #FFFFFF;
  line-height: 1;
}

.metal-footer-val {
  font-family: var(--font-mono, monospace);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  line-height: 1.3;
  display: flex;
  align-items: center;
  height: 20px;
}



.card-newly-unlocked-glow {
  animation: newlyUnlockedPulse 2.4s ease-out;
}

@keyframes newlyUnlockedPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 36, 0.5); }
  50% { box-shadow: 0 0 50px 10px rgba(255, 107, 36, 0.25); }
  100% { box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.08); }
}

.epic-card-entrance {
  animation: epicCardFlipIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes epicCardFlipIn {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateX(16deg) translateY(30px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
  }
}

.bottom-card-backlight-burst {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 260px;
  background: radial-gradient(ellipse, rgba(255, 107, 36, 0.3) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   EARLY ACCESS GLASS CONTAINER & STATUS CHIPS
   ========================================================================== */
.early-access-glass-container {
  max-width: 840px;
  margin: 0 auto;
  padding: 44px 36px;
  border-radius: 28px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

[data-theme='dark'] .early-access-glass-container,
.theme-dark .early-access-glass-container {
  background: rgba(28, 27, 25, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.glass-chips-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.glass-status-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  transition: var(--transition);
  text-align: left;
}

[data-theme='dark'] .glass-status-chip,
.theme-dark .glass-status-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.glass-status-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

.glass-chip-icon {
  font-size: 18px;
  color: var(--accent-color);
  flex-shrink: 0;
}

.glass-chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glass-chip-text strong {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}

.glass-chip-text span {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ==========================================================================
   APP DOWNLOAD SECTION (APP STORE & GOOGLE PLAY COMING SOON)
   ========================================================================== */
.app-download-section {
  padding: 70px 0 30px 0;
  background: var(--bg-canvas);
  position: relative;
}

.app-download-glass-card {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 32px;
  padding: 60px 40px 0 40px;
  background: #161514;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 64px -16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.app-download-glow-backdrop {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 250px;
  background: radial-gradient(ellipse, rgba(255, 107, 36, 0.24) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.app-download-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18px;
}

.app-badge-spark {
  color: var(--accent-color);
}

.app-download-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface-soft);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  border: 1px solid var(--border-subtle);
}

.app-download-kicker .kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-color);
}

.app-download-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.app-download-title-gradient {
  background: linear-gradient(
    135deg,
    #FF6B24 0%,
    #FF923D 25%,
    #E2A03F 50%,
    #FF923D 75%,
    #FF6B24 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerFlow 5s ease-in-out infinite alternate;
}

@keyframes shimmerFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.title-gradient-stores {
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-download-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 24px auto;
  line-height: 1.55;
}

.store-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.store-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  transition: var(--transition);
  cursor: default;
}

.store-pill-badge:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.store-badge-icon {
  display: flex;
  align-items: center;
  color: #FFFFFF;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-badge-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.store-badge-main {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

.store-badge-status {
  font-size: 11px;
  font-weight: 800;
  color: #FFAA4D;
  background: rgba(255, 107, 36, 0.16);
  border: 1px solid rgba(255, 107, 36, 0.3);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.app-download-mockup-stage {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: relative;
}

.app-download-phone-frame {
  width: 320px;
  height: 280px;
  overflow: hidden;
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  border: 3.5px solid #302F2C;
  border-bottom: none;
  background: #000000;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.25);
  position: relative;
}

.app-download-screen {
  width: 100%;
  height: 100%;
  position: relative;
}

.app-download-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.app-download-screen-overlay {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.app-download-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(18, 17, 16, 0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.app-download-icon {
  font-size: 14px;
}

@media (max-width: 768px) {
  .app-download-glass-card {
    padding: 44px 20px 0 20px;
  }
  .app-download-phone-frame {
    width: 270px;
    height: 230px;
  }
}

/* ==========================================================================
   AUTHENTIC LOGO & DARK THEME TOGGLES
   ========================================================================== */
.logo-brand-full-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.logo-brand-wrap:hover .logo-brand-full-img {
  transform: scale(1.03);
}

.logo-light-ver { display: block; }
.logo-dark-ver { display: none; }

[data-theme="dark"] .logo-light-ver,
[data-theme="monochrome"] .logo-light-ver { display: none; }

[data-theme="dark"] .logo-dark-ver,
[data-theme="monochrome"] .logo-dark-ver { display: block; }

.footer-logo-brand-full {
  height: 32px;
  width: auto;
  object-fit: contain;
  margin-bottom: 0;
  display: block;
}

.footer-logo-brand-full.logo-light-ver { display: block; }
.footer-logo-brand-full.logo-dark-ver { display: none; }

[data-theme="dark"] .footer-logo-brand-full.logo-light-ver,
[data-theme="monochrome"] .footer-logo-brand-full.logo-light-ver { display: none; }

[data-theme="dark"] .footer-logo-brand-full.logo-dark-ver,
[data-theme="monochrome"] .footer-logo-brand-full.logo-dark-ver { display: block; }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   CLEAN COMMUNITY VECTOR LOGOS (Features Card 2)
   ========================================================================== */
.clean-community-vector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
}

.community-org-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 9px;
  transition: all 0.2s ease;
}

.community-org-item:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1.5px);
}

/* ==========================================================================
   UNIFIED SOLID EARLY ACCESS SECTION
   ========================================================================== */
.early-access-solid-section {
  padding: 84px 0 92px 0;
  position: relative;
  background: var(--bg-canvas);
}

.anchor-shim {
  position: absolute;
  top: -70px;
  left: 0;
  height: 1px;
  width: 1px;
  pointer-events: none;
}

.early-solid-container {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.early-solid-header {
  margin-bottom: 28px;
}

.early-solid-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin: 14px 0 10px 0;
}

.early-solid-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}

.early-launch-metrics-wrap {
  width: 100%;
  max-width: 580px;
  margin: 0 auto 34px auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

.metrics-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.metrics-quota-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}

.metrics-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-color-glow);
  display: inline-block;
  align-self: center;
}

.metrics-wave-name {
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--accent-color);
  text-transform: uppercase;
}

.metrics-ratio strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.metrics-remaining-badge {
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--bg-surface-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.metrics-track-shell {
  width: 100%;
  height: 8px;
  background: var(--bg-surface-soft);
  border-radius: 6px;
  overflow: visible;
  position: relative;
  margin-bottom: 12px;
}

.metrics-track-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF6B24 0%, #FF923D 100%);
  border-radius: 6px;
  position: relative;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 10px rgba(255, 107, 36, 0.3);
}

.metrics-track-fill::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 8px #FF923D, 0 0 16px #FF6B24;
}

.metrics-sparkle-cluster {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.sparkle-p {
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
  pointer-events: none;
  box-shadow: 0 0 8px #FF923D, 0 0 14px rgba(255, 107, 36, 0.85);
}

.sparkle-p.s1 {
  width: 5px;
  height: 5px;
  top: -6px;
  right: -2px;
  animation: sparkleOrbit1 2s infinite ease-in-out;
}

.sparkle-p.s2 {
  width: 4px;
  height: 4px;
  bottom: -6px;
  right: -4px;
  animation: sparkleOrbit2 1.7s infinite ease-in-out 0.3s;
}

.sparkle-p.s3 {
  width: 6px;
  height: 6px;
  top: -2px;
  right: -8px;
  animation: sparkleOrbit3 2.3s infinite ease-in-out 0.6s;
}

@keyframes sparkleOrbit1 {
  0%, 100% {
    transform: translateY(0) scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-4px) scale(1.3);
    opacity: 1;
  }
}

@keyframes sparkleOrbit2 {
  0%, 100% {
    transform: translateY(0) scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: translateY(4px) scale(1.2);
    opacity: 1;
  }
}

@keyframes sparkleOrbit3 {
  0%, 100% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0.4;
  }
  50% {
    transform: translate(3px, -2px) scale(1.4);
    opacity: 1;
  }
}

.metrics-sublabels-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}

.white-ambient-glow {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 50%, transparent 72%) !important;
}

.bottom-form-stage {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ==========================================================================
   3D APP DOWNLOAD SECTION
   ========================================================================== */
.app-download-seamless-wrap {
  text-align: center;
  padding: 50px 0 60px 0;
  position: relative;
}

.store-badges-minimal-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 22px;
}

.store-minimal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: default;
  user-select: none;
}

.app-download-3d-stage {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  position: relative;
  min-height: 440px;
}

.app-3d-phone-perspective {
  transform: rotateY(-18deg) rotateX(12deg) rotateZ(4deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.app-3d-phone-perspective:hover {
  transform: rotateY(-12deg) rotateX(8deg) rotateZ(2deg);
}

.app-3d-phone-body {
  width: 290px;
  height: 520px;
  background: #1C1B1A;
  border-radius: 46px;
  padding: 11px;
  position: relative;
  box-shadow: -24px 32px 64px -12px rgba(0, 0, 0, 0.45),
              -8px 12px 24px rgba(0, 0, 0, 0.25),
              inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.app-phone-edge-bezel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5px;
  width: 6px;
  background: linear-gradient(180deg, #4A4845 0%, #2B2A28 50%, #4A4845 100%);
  border-radius: 0 10px 10px 0;
  transform: translateZ(-2px);
}

.app-phone-speaker-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #000000;
  border-radius: 14px;
  z-index: 10;
}

.app-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  background: #000000;
}

.app-phone-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-phone-screen-caption {
  position: absolute;
  bottom: 24px;
  left: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  z-index: 5;
}

.app-phone-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
}

.app-phone-user-name {
  font-size: 14.5px;
  font-weight: 700;
}

.app-phone-verified-tick {
  color: #FF6B24;
  font-weight: 800;
  font-size: 13px;
}

.app-phone-org-pill {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
}



/* ==========================================================================
   DEDICATED DARK VIP CLUB SECTION ("ВЫ В КЛУБЕ")
   ========================================================================== */
.vip-club-section {
  padding: 88px 0 100px 0;
  background: #0E0D0C;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vip-club-container {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

.vip-club-header {
  margin-bottom: 36px;
}

.vip-club-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #FFFFFF;
  margin-bottom: 14px;
}

.vip-badge-spark {
  color: var(--accent-color);
}

.vip-club-title {
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  margin-bottom: 12px;
  line-height: 1.1;
}

.vip-club-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}

.vip-club-card-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 24px 0;
}

.vip-card-white-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 107, 36, 0.1) 42%, transparent 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.vip-get-card-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 0 20px 0;
}

.vip-get-card-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.vip-get-card-trigger-btn:hover {
  background: var(--accent-color);
  color: #FFFFFF;
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--accent-color-glow);
}

.vip-get-card-trigger-btn .btn-arrow-up {
  font-size: 16px;
  font-weight: 900;
  transition: transform 0.2s ease;
}

.vip-get-card-trigger-btn:hover .btn-arrow-up {
  transform: translateY(-3px);
}

.vip-get-card-subtext {
  font-size: 12.5px;
  color: var(--text-muted);
  max-width: 440px;
  text-align: center;
}

.sample-watermark-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--accent-color);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.is-sample-text {
  color: rgba(255, 255, 255, 0.5) !important;
  font-style: italic;
}

.vip-club-footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  font-size: 13px;
  color: #8C867B;
  flex-wrap: wrap;
}

.vip-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vip-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
}

.vip-meta-spark {
  color: #FFFFFF;
  font-weight: 800;
}

/* ==========================================================================
   REFERRAL PERKS & INVITE FRIEND BLOCK
   ========================================================================== */
.early-solid-header.tight-spacing {
  margin-bottom: 24px;
  text-align: center;
}

.early-solid-badge-glow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-surface-soft);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(255, 107, 36, 0.08);
}

.early-solid-badge-glow .badge-spark {
  color: var(--accent-color);
  font-size: 11px;
}

.title-gradient-accent {
  background: linear-gradient(135deg, #FF6B24 0%, #FF923D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.early-solid-header.tight-spacing .early-solid-title {
  margin-bottom: 8px;
  line-height: 1.15;
}

.early-solid-header.tight-spacing .early-solid-subtitle {
  line-height: 1.48;
}

.referral-perks-showcase {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

.referral-showcase-header {
  text-align: center;
  margin-bottom: 26px;
}

.referral-showcase-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.referral-showcase-subtitle {
  font-size: 14.5px;
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto;
}

.referral-perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .referral-perks-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.referral-perk-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.referral-perk-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 36, 0.45);
  box-shadow: 0 12px 30px -8px rgba(255, 107, 36, 0.16);
}

.perk-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.perk-tier-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-surface-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.perk-card-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--bg-surface-soft);
  transition: transform 0.2s ease;
}

.referral-perk-card:hover .perk-card-icon-wrap {
  transform: scale(1.08);
}

.perk-card-icon-wrap.premium-glow {
  color: #FF6B24;
  background: rgba(255, 107, 36, 0.1);
  box-shadow: 0 0 18px rgba(255, 107, 36, 0.15);
}

.perk-card-icon-wrap.speed-glow {
  color: #E2A03F;
  background: rgba(226, 160, 63, 0.12);
  box-shadow: 0 0 18px rgba(226, 160, 63, 0.18);
}

.perk-card-icon-wrap.founding-glow {
  color: #FF923D;
  background: rgba(255, 143, 107, 0.12);
  box-shadow: 0 0 18px rgba(255, 143, 107, 0.18);
}

.perk-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.perk-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.perk-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.48;
  margin: 0;
}

.referral-action-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.referral-buttons-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.referral-main-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 800;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.referral-main-invite-btn:hover {
  background: var(--hero-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

.referral-main-invite-btn.is-copied {
  background: var(--accent-color);
  color: #FFFFFF;
}

.referral-tg-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #229ED9;
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.referral-tg-share-btn:hover {
  background: #1B8DC3;
  transform: translateY(-1px);
}

/* ==========================================================================
   DUAL PHONES 3D SCENE (APP DOWNLOAD)
   ========================================================================== */
.dual-phones-scene {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.dual-phones-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transform-style: preserve-3d;
}

@media (max-width: 680px) {
  .dual-phones-wrapper {
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }
  .app-phone-card.phone-left-tilt,
  .app-phone-card.phone-right-tilt {
    transform: none !important;
    width: 250px;
    height: 500px;
  }
}

.app-phone-card {
  position: relative;
  width: 270px;
  height: 540px;
  background: #161514;
  border-radius: 42px;
  border: 3px solid #2B2926;
  box-shadow: 0 24px 54px -12px rgba(0, 0, 0, 0.55),
              inset 0 1px 1px rgba(255, 255, 255, 0.15);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.app-phone-card.phone-left-tilt {
  transform: rotateY(12deg) rotateX(6deg) translateY(-8px);
}

.app-phone-card.phone-right-tilt {
  transform: rotateY(-12deg) rotateX(6deg) translateY(8px);
}

.app-phone-card:hover {
  transform: rotateY(0deg) rotateX(0deg) translateY(-14px) scale(1.03);
  box-shadow: 0 32px 70px -10px rgba(0, 0, 0, 0.65);
}

.app-phone-top-bar {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.phone-cup-pill {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.phone-island-mini {
  width: 60px;
  height: 16px;
  background: #000000;
  border-radius: 10px;
}

.app-phone-user-pill .app-phone-flower {
  font-size: 13px;
}

.app-phone-org-pill .phone-tick {
  color: var(--accent-color);
  font-weight: 800;
  margin-right: 2px;
}

/* ==========================================================================
   UNSUPPORTED DOMAIN MODAL
   ========================================================================== */
.glass-unsupported-modal {
  max-width: 460px;
  text-align: center;
  padding: 36px 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  box-shadow: 0 28px 64px -12px rgba(0, 0, 0, 0.22);
}

.unsupported-icon-badge {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px auto;
  border-radius: 18px;
  background: rgba(255, 107, 36, 0.1);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.unsupported-modal-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.unsupported-modal-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
}

.unsupported-modal-desc strong {
  color: var(--text-primary);
}

.unsupported-entered-email-box {
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12.5px;
}

.unsupported-email-label {
  color: var(--text-muted);
}

.unsupported-email-val {
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
}

.unsupported-modal-hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 24px;
}

.unsupported-buttons-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.unsupported-retry-btn {
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 800;
  padding: 13px 20px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.unsupported-retry-btn:hover {
  background: var(--hero-btn-hover);
}

.unsupported-tg-link {
  font-size: 13px;
  color: var(--accent-color);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.unsupported-tg-link:hover {
  text-decoration: underline;
}

.unsupported-rule-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 107, 36, 0.08);
  border: 1px solid rgba(255, 107, 36, 0.2);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 14px;
  text-align: left;
}

.unsupported-rule-icon {
  font-size: 16px;
  line-height: 1.3;
}

.unsupported-rule-box .unsupported-modal-hint {
  margin-bottom: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-primary);
}

.unsupported-friend-invite-card {
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.friend-invite-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.friend-invite-card-sub {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

.unsupported-share-friend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 107, 36, 0.12);
  border: 1px solid rgba(255, 107, 36, 0.28);
  color: var(--accent-color);
  border-radius: var(--radius-pill);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}

.unsupported-share-friend-btn:hover {
  background: var(--accent-color);
  color: #FFFFFF;
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

.unsupported-share-friend-btn.is-copied {
  background: var(--accent-color);
  color: #FFFFFF;
  border-color: var(--accent-color);
}

/* ==========================================================================
   VIP CLUB & HERO SUCCESS INTERACTIONS
   ========================================================================== */
.hero-view-card-btn {
  background: #FFFFFF !important;
  color: #161514 !important;
}

.hero-success-card-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px !important;
}

.hero-success-text-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.hero-jump-to-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-color);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hero-jump-to-card-pill:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* VIP Card exclusive Share button with magical interactive hover */
.vip-share-action-container {
  display: flex;
  justify-content: center;
  margin: 28px 0 24px 0;
  position: relative;
  z-index: 10;
}

.vip-share-button-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.vip-exclusive-share-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 34px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.vip-exclusive-share-btn:hover {
  transform: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.07),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.vip-exclusive-share-btn:hover .vip-share-icon {
  transform: none;
  color: currentColor;
}

.vip-share-icon {
  transition: none;
}

.vip-exclusive-share-btn.is-copied {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

.referral-member-ready-banner {
  margin-top: 20px;
  padding: 12px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
}

.member-ready-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-weight: 700;
}

.member-ready-spark {
  color: var(--accent-color);
}

.member-ready-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-color);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.member-ready-link:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ==========================================================================
   LOCKED MEMBER STATE ON HERO
   ========================================================================== */
.hero-input-wrapper.is-locked-member {
  background: var(--bg-surface-soft);
  border-color: rgba(255, 107, 36, 0.4);
}

.hero-real-input.is-disabled-member {
  color: var(--text-primary);
  cursor: default;
  font-weight: 700;
}

.hero-share-member-btn {
  background: var(--accent-color) !important;
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-share-member-btn:hover {
  background: var(--accent-color-hover) !important;
}
/* Cofine editorial system. Loaded after the existing styles to keep legal pages intact. */
:root {
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.container {
  max-width: 1216px;
  padding-inline: 32px;
}
:where(button, a, input, textarea):focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 5px;
}
:where(section[id]) {
  scroll-margin-top: 104px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.small-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ui-text-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 650;
  color: inherit;
  cursor: pointer;
}
.ui-text-button svg {
  transition: transform 0.3s var(--ui-ease);
}
.ui-text-button:hover svg {
  transform: translate(3px, -3px);
}
.header {
  position: sticky;
  top: 16px;
  width: calc(100% - 64px);
  max-width: 1152px;
  margin: 16px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  background: rgba(var(--header-bg-rgb), 0.7);
  box-shadow:
    0 4px 24px #00000008,
    inset 0 1px 0 #ffffff70;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.header.header-scrolled {
  background: rgba(var(--header-bg-rgb), 0.82);
  box-shadow: 0 8px 32px #0000000d;
  border-bottom-color: #ffffff60;
}
.header-inner {
  height: 68px;
  min-height: 68px;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.logo-wrapper {
  justify-self: start;
  line-height: 0;
}
.logo-brand-full-img {
  height: 39px;
  width: 106px;
  object-fit: contain;
}
.nav-actions-group {
  justify-self: end;
}
.nav-link {
  font-size: 12px;
}
.lang-selector {
  background: rgba(127, 127, 127, 0.06);
  border-color: var(--border-subtle);
}
.lang-btn.active {
  box-shadow: 0 2px 6px #00000012;
}
.hero {
  padding: 66px 0 52px;
  overflow: hidden;
}
.hero-grid {
  grid-template-columns: 1.25fr 1fr;
  min-height: 530px;
  gap: 32px;
  align-items: center;
}
.hero-content {
  padding: 0;
}
.hero-eyebrow {
  color: var(--text-secondary);
  margin-bottom: 25px;
}
.hero-eyebrow .small-status-dot {
  color: var(--accent-color);
  box-shadow: 0 0 0 4px var(--accent-color-soft);
}
.hero-title {
  font-size: clamp(46px, 5.5vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.065em;
  font-weight: 850;
  margin-bottom: 26px;
}
.hero-title-highlight {
  color: #eb5e1a;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hero-subheading {
  font-size: 15px;
  font-weight: 450;
  line-height: 1.7;
  max-width: 450px;
  margin-bottom: 30px;
}
.hero-action-container {
  max-width: 506px;
}
.hero-input-wrapper {
  border-radius: 18px;
  padding: 7px;
  min-height: 58px;
  box-shadow: 0 8px 25px #00000005;
}
.hero-submit-button {
  border-radius: 12px;
  min-height: 42px;
  padding: 12px 20px;
  font-size: 12px;
  box-shadow: none;
}
.hero-real-input {
  font-size: 13px;
}
.hero-form-meta {
  margin-top: 13px;
}
.hero-security-assurance {
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.hero-secondary-link {
  margin-top: 25px;
  color: var(--text-secondary);
  font-size: 11px;
}
.hero-mockup-wrapper {
  position: relative;
  height: 520px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mockup-wrapper::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 60% 50%,
    var(--accent-color-soft),
    transparent 65%
  );
  pointer-events: none;
}
.phone-3d-scene {
  width: 294px;
  height: 508px;
  margin: 0;
}
.phone-mockup-frame {
  width: 294px;
  height: 508px;
  padding: 8px;
  border-radius: 43px;
}
.phone-screen-inner.fullscreen-screen {
  border-radius: 35px;
}
.fullscreen-feed-photo {
  object-position: center 44%;
}
.feed-user-name {
  font-size: 24px;
}
.hero-float-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(var(--header-bg-rgb), 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid #ffffff80;
  box-shadow: 0 8px 32px #00000008;
  font-size: 11px;
  font-weight: 600;
  animation: cofine-note-float 7s ease-in-out infinite;
}
.hero-float-note svg {
  color: var(--accent-color);
}
.hero-note-verify {
  left: -7px;
  top: 77px;
  transform: rotate(-6deg);
}
.hero-note-coffee {
  right: -5px;
  bottom: 90px;
  transform: rotate(5deg);
  animation-delay: -3s;
}
@keyframes cofine-note-float {
  50% {
    translate: 0 -8px;
  }
}
.hero-success-card-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  font-size: 11px;
  text-align: left;
}
.hero-success-text-row {
  display: flex;
  gap: 9px;
  align-items: center;
}
.hero-success-text-row .status-org-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.4;
}
.hero-success-text-row .status-org-name strong {
  font-size: 12px;
  color: var(--text-primary);
}
.hero-success-text-row .status-org-name small {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 450;
}
.hero-jump-to-card-pill {
  color: var(--text-primary);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 10px;
}
.circle-organizations {
  padding: 26px 0 42px;
}
.org-caption-row {
  border-top: 1px solid var(--border-subtle);
  padding-top: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--text-secondary);
}
.org-caption-note {
  font-size: 10px;
  color: var(--text-secondary);
}
.org-company-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 27px;
}
.org-brand {
  display: flex;
  gap: 11px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-right: 1px solid var(--border-subtle);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.05em;
  color: var(--text-primary);
}
.org-brand:first-child {
  justify-content: flex-start;
}
.org-brand:last-child {
  border-right: 0;
  justify-content: flex-end;
}
.org-brand img {
  width: 24px;
  height: 24px;
  opacity: 0.8;
  object-fit: contain;
}
[data-theme='dark'] .org-brand img {
  filter: invert(1);
}
.org-university-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.cofine-circle {
  padding: 70px 0 30px;
  background: #191918;
  color: #f8f7f3;
  overflow: hidden;
  position: relative;
}
.circle-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  min-height: 365px;
}
.circle-heading .eyebrow {
  color: #c5c2bb;
  margin-bottom: 23px;
}
.circle-heading .small-status-dot {
  color: #ff987d;
}
.circle-heading h2 {
  font-size: clamp(44px, 5.3vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.065em;
  font-weight: 650;
  margin-bottom: 24px;
}
.circle-heading h2 span {
  color: #99978f;
}
.circle-heading p {
  font-size: 14px;
  line-height: 1.75;
  color: #c5c2bb;
  max-width: 390px;
}
.circle-art {
  height: 355px;
  position: relative;
}
.glass-sculpture {
  position: relative;
  width: 100%;
  height: 100%;
}
.glass-sculpture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.glass-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff0d;
  border: 1px solid #ffffff30;
  border-radius: 13px;
  padding: 13px 15px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #ffffff20;
  font-size: 10px;
  color: #f8f7f3;
}
.note-one {
  top: 30px;
  right: 5px;
  transform: rotate(7deg);
}
.note-two {
  bottom: 38px;
  left: 15px;
  transform: rotate(-7deg);
}
.circle-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 38px;
}
.circle-benefit {
  position: relative;
  background: linear-gradient(135deg, #ffffff0e, #ffffff03);
  border: 1px solid #ffffff1a;
  border-radius: 23px;
  padding: 27px;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.circle-benefit:hover {
  border-color: #ffffff38;
  background: linear-gradient(135deg, #ffffff14, #ffffff06);
}
.benefit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  color: #e7a48f;
}
.benefit-top span {
  color: #aaa69e;
  font-size: 9px;
  letter-spacing: 0.1em;
}
.circle-benefit h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.circle-benefit p {
  font-size: 12px;
  line-height: 1.8;
  color: #c5c2bb;
  min-height: 65px;
}
.verification-preview {
  margin-top: 23px;
  padding-top: 18px;
  border-top: 1px solid #ffffff14;
}
.verification-preview > span {
  font-size: 9px;
  color: #aaa69e;
}
.verification-preview > div {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.verification-preview b {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 17px;
  background: #ffffff0b;
  border: 1px solid #ffffff10;
  border-radius: 11px;
}
.verification-preview .code-pending {
  color: #68655f;
}
.connection-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 21px;
  border-top: 1px solid #ffffff14;
}
.connection-preview span {
  border: 1px solid #ffffff20;
  border-radius: 30px;
  padding: 7px 11px;
  font-size: 9px;
  color: #d8d4ce;
}
.coffee-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-top: 25px;
  border-top: 1px solid #ffffff14;
}
.coffee-preview-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.coffee-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.coffee-preview strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 5px;
}
.coffee-preview span {
  font-size: 9px;
  color: #aaa69e;
}
.coffee-preview > svg {
  margin-left: auto;
  color: #aaa69e;
}
.circle-footnote {
  border-top: 1px solid #ffffff12;
  margin-top: 36px;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #aaa69e;
}
.cofine-wave {
  padding: 100px 0;
}
.wave-intro {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 50px;
}
.wave-intro .eyebrow {
  color: var(--accent-color);
  margin-bottom: 20px;
}
.wave-intro h2 {
  font-size: clamp(36px, 4.3vw, 58px);
  line-height: 1.07;
  font-weight: 650;
  letter-spacing: -0.055em;
  margin-bottom: 20px;
}
.wave-intro h2 span {
  color: var(--accent-color);
}
.wave-intro p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 420px;
  color: var(--text-secondary);
}
.wave-capacity {
  padding: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 23px;
  background: var(--bg-surface);
  box-shadow: 0 15px 50px #00000003;
}
.wave-capacity-label {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.wave-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 13px 0 19px;
}
.wave-count strong {
  font-size: 62px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.06em;
}
.wave-count > span {
  color: var(--text-secondary);
  font-size: 17px;
}
.wave-track {
  height: 5px;
  background: var(--bg-surface-soft);
  border-radius: 10px;
  overflow: hidden;
}
.wave-track > span {
  display: block;
  width: 84%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
}
.wave-capacity-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 9px;
}
.invite-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-surface);
}
.invite-story {
  padding: 42px;
  background: var(--bg-surface-soft);
}
.invite-story .eyebrow {
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.invite-story h3 {
  font-size: clamp(30px, 3.2vw, 44px);
  letter-spacing: -0.06em;
  line-height: 1.12;
  font-weight: 600;
  margin-bottom: 20px;
}
.invite-story p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.8;
  max-width: 340px;
  margin-bottom: 24px;
}
.invite-rewards {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
}
.invite-primary-reward {
  padding: 32px;
  background: #f6bba6;
  color: #30201b;
}
.invite-reward-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 600;
}
.invite-reward-label > span:last-child {
  font-size: 23px;
}
.invite-days {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 33px 0 24px;
}
.invite-days > strong {
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.09em;
  font-weight: 550;
}
.invite-days > div {
  font-size: 11px;
  line-height: 1.5;
}
.invite-days b {
  display: block;
  font-weight: 650;
}
.invite-primary-reward > p {
  font-size: 10px;
  line-height: 1.8;
  color: #53362c;
}
.invite-secondary-rewards {
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: center;
}
.invite-secondary-rewards > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px 0;
}
.invite-secondary-rewards > div + div {
  border-top: 1px solid var(--border-subtle);
}
.invite-secondary-rewards svg {
  color: var(--accent-color);
}
.invite-secondary-rewards strong {
  display: block;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.5;
}
.invite-secondary-rewards small {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 9px;
}
.wave-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  margin-top: 25px;
}
.wave-form-caption strong {
  display: block;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 7px;
}
.wave-form-caption > span {
  font-size: 10px;
  color: var(--text-secondary);
}
.wave-input-shell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}
.wave-input-shell > svg {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.wave-input-shell input {
  min-width: 0;
  width: 100%;
  font-family: inherit;
  color: var(--text-primary);
  background: transparent;
  font-size: 11px;
  border: 0;
  padding-block: 10px;
}
.wave-input-shell:focus-within {
  border-color: var(--accent-color);
}
.wave-input-shell input:focus-visible {
  outline: none;
}
.wave-input-shell button {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 14px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 650;
}
.ui-form-message {
  display: block;
  font-size: 10px;
  margin-top: 8px;
  color: var(--text-secondary);
}
.invite-copy-field {
  display: flex;
  padding: 10px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 12px;
  background: var(--bg-surface);
}
.invite-copy-field input {
  width: 100%;
  min-width: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  border: 0;
  font-size: 11px;
}
.invite-copy-field button {
  color: var(--text-primary);
  cursor: pointer;
}
.vip-club-section {
  padding: 80px 0;
}
.vip-club-title {
  font-weight: 650;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: -0.055em;
}
.vip-club-subtitle {
  font-size: 13px;
  line-height: 1.8;
}
.vip-club-badge-pill {
  font-size: 9px;
  font-weight: 550;
}
.vip-get-card-subtext {
  max-width: 390px;
  line-height: 1.7;
}
.cofine-release {
  padding: 70px 0;
}
.release-card {
  padding: 32px 44px;
  border-radius: 30px;
  color: var(--text-primary);
  background:
    radial-gradient(
      ellipse at 85% 20%,
      var(--accent-color-soft),
      transparent 70%
    ),
    var(--bg-surface-soft);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}
.release-topline,
.release-bottomline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  color: var(--text-secondary);
  font-size: 9px;
}
.release-topline .small-status-dot {
  color: var(--accent-color);
}
.release-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 50px 0;
}
.release-copy h2 {
  font-size: clamp(44px, 5.3vw, 72px);
  letter-spacing: -0.065em;
  font-weight: 600;
  line-height: 1.04;
  margin-bottom: 24px;
}
.release-copy h2 span {
  color: var(--accent-color);
}
.release-copy p {
  font-size: 12px;
  line-height: 1.8;
  max-width: 360px;
  color: var(--text-secondary);
  margin-bottom: 27px;
}
.release-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 15px 18px;
  color: var(--hero-btn-text);
  background: var(--hero-btn-bg);
  font-size: 11px;
  font-weight: 600;
  transition: transform 0.3s var(--ui-ease);
}
.release-cta:hover {
  transform: translateY(-3px);
}
.release-visual {
  min-height: 270px;
  display: grid;
  place-items: center;
  position: relative;
}
.release-app-icon {
  width: 176px;
  height: 176px;
  border-radius: 39px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ff9676, #ed603e);
  box-shadow:
    inset 0 2px 2px #ffffff70,
    inset 0 -5px 6px #c14c30,
    0 25px 45px #ca735b30;
  transform: rotate(-12deg);
  animation: release-icon-float 8s ease-in-out infinite;
}
.release-app-icon img {
  width: 104px;
  height: 104px;
  object-fit: contain;
}
@keyframes release-icon-float {
  50% {
    transform: translateY(-10px) rotate(-6deg);
  }
}
.release-orbit-label {
  position: absolute;
  top: 12px;
  right: -5px;
  text-align: right;
  font-size: 8px;
  letter-spacing: 0.13em;
  line-height: 1.7;
  color: var(--text-secondary);
}
.release-device-label {
  position: absolute;
  bottom: 0;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  background: var(--bg-surface);
  padding: 11px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
}
.release-bottomline {
  border-top: 1px solid var(--border-subtle);
  padding-top: 22px;
}
.release-bottomline > div {
  display: flex;
  gap: 25px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.release-bottomline small {
  font-size: 8px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 6px;
}
.faq-section {
  padding: 20px 0 75px;
}
.faq-title {
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.045em;
}
.faq-question-btn {
  font-size: 13px;
  font-weight: 550;
}
.faq-answer-inner p {
  font-size: 12px;
  line-height: 1.9;
}
.faq-answer[aria-hidden='true'] {
  visibility: hidden;
}
.footer {
  padding: 42px 0;
}
.footer-logo-brand-full {
  height: 40px;
  width: 108px;
  object-fit: contain;
}
.footer-desc {
  font-size: 11px;
  max-width: 255px;
}
.footer-copy {
  font-size: 9px;
}
.footer-col-title {
  font-size: 10px;
}
.footer-link {
  font-size: 11px;
}
.footer-store-btn {
  box-shadow: none;
  padding: 10px 15px;
}
.footer-store-btn .store-badge-title {
  font-size: 13px;
}
.footer-store-btn .store-badge-sub {
  font-size: 8px;
}
.cookie-banner-wrap {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 32px));
  z-index: 110;
}
.cookie-banner-card {
  padding: 13px 16px;
  border-radius: 16px;
  box-shadow: 0 8px 35px #00000018;
}
.cookie-banner-msg {
  font-size: 10px;
  line-height: 1.6;
}
.cookie-banner-accept-btn {
  white-space: nowrap;
  font-size: 10px;
  padding: 9px 15px;
}
.theme-switcher-container {
  bottom: 18px;
  right: 18px;
}
.theme-dock-trigger {
  box-shadow: 0 4px 15px #00000009;
  font-size: 10px;
  padding: 9px 12px;
}
.cofine-dialog {
  width: min(470px, calc(100% - 32px));
  max-width: 470px;
  max-height: calc(100dvh - 48px);
  padding: 30px;
  margin: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  color: var(--text-primary);
  background: var(--bg-surface);
  overflow-y: auto;
  box-shadow: 0 30px 80px #00000030;
  text-align: left;
}
.cofine-dialog::backdrop {
  background: #17161355;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.dialog-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}
.dialog-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-color-soft);
  color: var(--accent-color);
}
.dialog-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--bg-surface-soft);
  color: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
}
.cofine-dialog h3 {
  font-size: 25px;
  line-height: 1.17;
  font-weight: 650;
  letter-spacing: -0.04em;
  margin-bottom: 15px;
}
.cofine-dialog p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.dialog-email {
  display: block;
  background: var(--bg-surface-soft);
  border-radius: 10px;
  padding: 13px;
  font-size: 12px;
  margin: 18px 0;
  word-break: break-word;
}
.dialog-primary {
  margin: 22px 0 14px;
  padding: 14px 18px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  background: var(--hero-btn-bg);
  color: var(--hero-btn-text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dialog-share-row {
  padding: 18px 0;
  border-block: 1px solid var(--border-subtle);
  margin: 20px 0;
}
.dialog-share-row .ui-text-button {
  margin-top: 12px;
  font-size: 11px;
}
.dialog-tg-link {
  font-size: 10px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[data-theme='dark'] .header {
  border-color: #ffffff15;
}
.header-dark-page {
  border-color: #ffffff20 !important;
}
.header-dark-page .nav-link {
  color: #ffffffbb !important;
}
@media (min-width: 1500px) {
  .hero {
    padding-block: 90px;
  }
}
@media (max-width: 1000px) {
  .hero-note-verify {
    left: -10px;
    top: 60px;
  }
  .hero-note-coffee {
    right: -10px;
    bottom: 70px;
  }
  .hero-float-note {
    padding: 11px 12px;
    font-size: 9px;
  }
  .hero-title {
    font-size: 55px;
  }
  .invite-rewards {
    grid-template-columns: 1fr;
  }
  .invite-secondary-rewards {
    flex-direction: row;
    gap: 22px;
    padding: 0 24px;
  }
  .invite-secondary-rewards > div + div {
    border-top: 0;
  }
  .invite-secondary-rewards > div {
    padding: 18px 0;
  }
  .invite-days {
    margin: 20px 0;
  }
  .invite-primary-reward {
    padding: 24px;
  }
  .circle-benefit {
    padding: 22px;
  }
  .release-orbit-label {
    right: 0;
  }
}
@media (max-width: 768px) {
  .container {
    padding-inline: 22px;
  }
  .header {
    width: calc(100% - 28px);
    top: 10px;
    margin-top: 10px;
    border-radius: 19px;
  }
  .header-inner {
    grid-template-columns: 1fr auto;
    height: 58px;
    min-height: 58px;
    padding-inline: 16px;
  }
  .logo-brand-full-img {
    width: 93px;
    height: 34px;
  }
  .nav-links {
    display: none;
  }
  .lang-selector {
    padding: 2px;
  }
  .lang-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  .mobile-menu-btn {
    display: flex;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .nav-actions-group {
    gap: 12px;
  }
  .mobile-nav-drawer {
    top: 69px;
  }
  .mobile-nav-content {
    border-radius: 0 0 24px 24px;
    height: auto;
  }
  .mobile-nav-item {
    font-size: 17px;
  }
  .mobile-nav-links {
    gap: 12px;
  }
  .hero {
    padding: 45px 0 30px;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 38px;
    text-align: left;
    min-height: 0;
  }
  .hero-content {
    text-align: left;
  }
  .hero-eyebrow {
    font-size: 8px;
    margin-bottom: 22px;
  }
  .hero-title {
    font-size: clamp(40px, 8.6vw, 62px);
    line-height: 1.06;
    letter-spacing: -0.06em;
    margin-bottom: 22px;
  }
  .hero-subheading {
    font-size: 12px;
    line-height: 1.7;
    max-width: 370px;
    margin-bottom: 24px;
  }
  .hero-action-container {
    width: 100%;
  }
  .hero-input-wrapper {
    min-height: 56px;
  }
  .hero-submit-button {
    padding: 13px 14px;
    font-size: 10px;
  }
  .hero-real-input {
    font-size: 11px;
  }
  .hero-input-icon-wrap {
    padding-inline: 7px;
  }
  .hero-input-icon {
    width: 15px;
  }
  .hero-security-assurance {
    font-size: 9px;
  }
  .hero-secondary-link {
    margin-top: 18px;
  }
  .hero-mockup-wrapper {
    height: 460px;
    margin: 0 15px;
  }
  .phone-3d-scene {
    width: 264px;
    height: 460px;
  }
  .phone-mockup-frame {
    width: 264px;
    height: 460px;
  }
  .hero-note-verify {
    left: -10px;
    top: 50px;
  }
  .hero-note-coffee {
    right: -10px;
    bottom: 55px;
  }
  .hero-success-card-banner {
    flex-wrap: wrap;
  }
  .hero-jump-to-card-pill {
    display: none;
  }
  .circle-organizations {
    padding: 20px 0 32px;
  }
  .org-caption-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .org-caption-row .eyebrow {
    font-size: 8px;
  }
  .org-caption-note {
    font-size: 8px;
  }
  .org-company-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    margin-top: 22px;
  }
  .org-brand,
  .org-brand:first-child,
  .org-brand:last-child {
    justify-content: center;
    border-right: 0;
    font-size: 17px;
    min-height: 25px;
    gap: 7px;
  }
  .org-brand img {
    width: 20px;
    height: 20px;
  }
  .org-university-row {
    gap: 10px 21px;
    font-size: 9px;
    margin-top: 20px;
  }
  .cofine-circle {
    padding: 52px 0 24px;
  }
  .circle-intro {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 0;
  }
  .circle-heading h2 {
    font-size: clamp(39px, 9vw, 60px);
  }
  .circle-heading p {
    font-size: 12px;
  }
  .circle-heading .eyebrow {
    font-size: 8px;
  }
  .circle-art {
    height: 260px;
    max-width: 350px;
    width: 100%;
    justify-self: center;
  }
  .note-one {
    top: 24px;
    right: 0;
  }
  .note-two {
    bottom: 24px;
    left: 0;
  }
  .glass-note {
    font-size: 8px;
    padding: 11px;
  }
  .circle-benefits {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
  }
  .circle-benefit {
    padding: 24px;
  }
  .benefit-top {
    margin-bottom: 15px;
  }
  .circle-benefit h3 {
    font-size: 21px;
  }
  .circle-benefit p {
    font-size: 12px;
    min-height: 0;
  }
  .verification-preview,
  .connection-preview,
  .coffee-preview {
    margin-top: 18px;
  }
  .circle-footnote {
    font-size: 7px;
    gap: 16px;
    line-height: 1.6;
  }
  .cofine-wave {
    padding: 55px 0;
  }
  .wave-intro {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 25px;
  }
  .wave-intro h2 {
    font-size: 40px;
  }
  .wave-intro .eyebrow {
    font-size: 8px;
  }
  .wave-intro p {
    font-size: 12px;
  }
  .wave-capacity {
    padding: 24px;
  }
  .wave-count strong {
    font-size: 52px;
  }
  .invite-editorial {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }
  .invite-story {
    padding: 26px;
  }
  .invite-story h3 {
    font-size: 32px;
  }
  .invite-story p {
    font-size: 11px;
  }
  .invite-story .eyebrow {
    margin-bottom: 20px;
    font-size: 8px;
  }
  .invite-rewards {
    grid-template-columns: 1fr;
  }
  .invite-primary-reward {
    padding: 24px;
  }
  .invite-days {
    margin: 16px 0;
  }
  .invite-days > strong {
    font-size: 76px;
  }
  .invite-secondary-rewards {
    padding-inline: 24px;
  }
  .wave-form-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .wave-input-shell {
    padding-left: 13px;
    gap: 8px;
  }
  .wave-input-shell input {
    font-size: 10px;
  }
  .wave-input-shell button {
    font-size: 9px;
    padding: 13px 11px;
    gap: 6px;
  }
  .vip-club-section {
    padding: 55px 0;
  }
  .vip-club-title {
    font-size: 36px;
  }
  .vip-club-subtitle {
    font-size: 12px;
  }
  .vip-get-card-subtext {
    font-size: 10px;
    max-width: 300px;
  }
  .cofine-release {
    padding: 38px 0;
  }
  .release-card {
    padding: 24px;
    border-radius: 23px;
  }
  .release-topline {
    font-size: 8px;
    gap: 12px;
  }
  .release-topline .eyebrow {
    font-size: 7px;
  }
  .release-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }
  .release-copy h2 {
    font-size: 43px;
  }
  .release-copy p {
    font-size: 11px;
  }
  .release-visual {
    min-height: 220px;
  }
  .release-app-icon {
    width: 142px;
    height: 142px;
    border-radius: 32px;
  }
  .release-app-icon img {
    width: 92px;
    height: 92px;
  }
  .release-orbit-label {
    font-size: 7px;
  }
  .release-device-label {
    right: 0;
    font-size: 9px;
  }
  .release-bottomline {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    font-size: 8px;
  }
  .release-bottomline > div {
    font-size: 10px;
    gap: 18px;
  }
  .faq-section {
    padding: 15px 0 40px;
  }
  .faq-title {
    font-size: 32px;
  }
  .faq-question-btn {
    font-size: 11px;
    padding-block: 18px;
  }
  .faq-answer-inner p {
    font-size: 11px;
  }
  .footer {
    padding-block: 30px 70px;
  }
  .footer-grid {
    gap: 28px;
  }
  .footer-logo-brand-full {
    width: 106px;
    height: 39px;
  }
  .footer-col-right {
    grid-column: 1 / -1;
  }
  .footer-stores-list {
    flex-direction: row;
    justify-content: flex-start;
  }
  .cookie-banner-card {
    gap: 10px;
    padding: 13px;
  }
  .cookie-banner-msg {
    font-size: 9px;
  }
  .cookie-banner-accept-btn {
    font-size: 9px;
  }
  .theme-dock-current-name {
    display: none;
  }
  .theme-dock-trigger {
    padding: 9px;
  }
  .cofine-dialog {
    padding: 24px;
    max-height: calc(100dvh - 28px);
  }
  .cofine-dialog h3 {
    font-size: 24px;
  }
}
@media (max-width: 370px) {
  .container {
    padding-inline: 18px;
  }
  .hero-title {
    font-size: 38px;
  }
  .hero-real-input {
    font-size: 10px;
  }
  .hero-submit-button {
    padding: 12px 10px;
  }
  .hero-input-icon-wrap {
    display: none;
  }
  .wave-input-shell > svg {
    display: none;
  }
  .release-copy h2 {
    font-size: 37px;
  }
  .hero-float-note {
    font-size: 8px;
    padding: 10px;
  }
  .phone-3d-scene,
  .phone-mockup-frame {
    width: 250px;
    height: 440px;
  }
  .hero-mockup-wrapper {
    height: 440px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
  .phone-3d-card,
  .metal-vip-card {
    transform: none !important;
  }
}
/* Real wordmarks share a quiet, monochrome display area. */
.org-brand img {
  width: 124px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(1) brightness(0);
  opacity: 0.75;
}
.org-brand:last-child img {
  width: 113px;
}
.org-brand:nth-child(4) img {
  width: 34px;
}
[data-theme='dark'] .org-brand img {
  filter: grayscale(1) brightness(0) invert(1);
}
.mobile-nav-drawer[hidden] {
  display: none;
}
@media (max-width: 768px) {
  .org-brand img {
    width: 90px;
    height: 21px;
  }
  .org-brand:last-child img {
    width: 82px;
  }
  .org-brand:nth-child(4) img {
    width: 24px;
  }
  .mobile-nav-drawer {
    top: 78px;
  }
}
@media (max-width: 768px) {
  .hero .hero-title {
    width: 100%;
    margin-inline: 0;
  }
  .hero .hero-secondary-link {
    margin-left: 0;
  }
  .hero .hero-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px;
  }
  .hero .hero-input-icon-wrap {
    width: 24px;
    flex: 0 0 24px;
  }
  .hero .hero-input-field-container {
    flex: 1;
    min-width: 0;
    min-height: 42px;
  }
  .hero .hero-real-input {
    font-size: 16px !important;
  }
  .hero .hero-submit-button {
    flex: 0 0 100%;
    width: 100%;
    font-size: 12px;
    min-height: 43px;
    justify-content: center;
  }
  .hero .hero-domain-highlight-layer {
    font-size: 16px;
  }
  .wave-input-shell input {
    font-size: 16px;
  }
  .wave-input-shell {
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px;
  }
  .wave-input-shell input {
    flex: 1;
    width: 0;
  }
  .wave-input-shell button {
    width: 100%;
    justify-content: center;
    font-size: 12px;
  }
}
.hero .hero-real-input.is-disabled-member {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary);
  opacity: 1;
}
.hero .hero-input-wrapper.is-locked-member {
  box-shadow: none;
  border-color: var(--border-subtle);
}
.hero-member-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  color: var(--text-primary);
}
.hero-member-status svg {
  color: var(--text-secondary);
}
.hero-member-status .status-org-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.5;
}
.hero-member-status strong {
  font-size: 12px;
  font-weight: 600;
}
.hero-member-status small {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 400;
}
.vip-copy-fallback {
  width: 100%;
  margin-top: 16px;
  max-width: 380px;
}
.vip-copy-fallback p {
  font-size: 11px;
  color: #c5c2bb;
  margin-bottom: 10px;
}
.vip-copy-fallback input {
  width: 100%;
  border: 1px solid #ffffff20;
  border-radius: 10px;
  padding: 12px;
  background: #ffffff08;
  color: #fff;
}
.referral-welcome-banner {
  position: relative;
  top: auto;
  width: calc(100% - 64px);
  max-width: 1152px;
  margin: 18px auto 0;
  border-radius: 14px;
  padding: 13px 0;
  border: 1px solid var(--border-subtle);
  background: var(--accent-color-soft);
  box-shadow: none;
  color: var(--text-primary);
}
.referral-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-inline: 20px;
}
.referral-inner > svg {
  flex-shrink: 0;
  color: var(--accent-color);
}
.referral-text {
  font-size: 11px;
  line-height: 1.6;
}
.referral-close-btn {
  margin-left: auto;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .referral-welcome-banner {
    width: calc(100% - 28px);
  }
  .referral-text {
    font-size: 10px;
  }
  .referral-inner {
    gap: 9px;
    padding-inline: 14px;
  }
}
.legal-main-title {
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 768px) {
  .legal-main-title {
    font-size: clamp(22px, 6vw, 29px);
    line-height: 1.2;
    letter-spacing: -0.04em;
  }
  .legal-article-card {
    padding: 26px 22px;
  }
  .legal-body-content {
    font-size: 14px;
    line-height: 1.85;
  }
  .legal-section-h2 {
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  .legal-page-wrapper {
    padding-top: 40px;
  }
}
.legal-article-card {
  background: var(--bg-surface);
}
.legal-body-content,
.legal-bullet-list li {
  color: var(--text-secondary);
}
.legal-header,
.legal-section-h2 {
  border-bottom-color: var(--border-subtle);
}
@media (max-width: 768px) {
  .hero-note-verify {
    left: 0;
  }
  .hero-note-coffee {
    right: 0;
  }
}
.legal-main-title {
  font-weight: 650;
  letter-spacing: -0.045em;
}
/* Native email fields: caret, selection and focus stay on the same text. */
.email-access-form {
  width: 100%;
}
.email-access-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 19px;
  border: 1px solid var(--border-subtle);
  border-radius: 21px;
  background: var(--bg-surface);
  box-shadow: 0 8px 32px #00000004;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.email-access-shell:focus-within {
  border-color: var(--accent-color);
  box-shadow:
    0 0 0 3px var(--accent-color-soft),
    0 10px 30px var(--accent-color-soft);
}
.email-access-icon {
  flex: 0 0 19px;
  color: var(--text-muted);
}
.email-access-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 12px 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  caret-color: var(--accent-color);
}
.email-access-input:focus,
.email-access-input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}
.email-access-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.email-access-input::selection {
  color: var(--text-primary);
  background: var(--accent-color-soft);
}
.email-access-submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 15px;
  color: white;
  background: var(--accent-color);
  font: inherit;
  font-weight: 650;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.email-access-submit:hover {
  background: var(--accent-color-hover);
  transform: translateY(-1px);
}
.email-access-submit:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}
.hero .hero-title {
  color: #3c3835;
}
[data-theme="dark"] .hero .hero-title {
  color: #e2ded8;
}
.hero-note-verify {
  top: 135px;
}
.hero-eligible-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
}
.cofine-mono-logo {
  display: block;
}
[data-theme="dark"] .header .cofine-mono-logo,
.header-dark-page .cofine-mono-logo {
  filter: brightness(0) invert(1);
}
.org-university-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
}
.org-university-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 102px;
  padding: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--bg-surface);
}
.org-university-logo img {
  display: block;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition:
    filter 0.3s,
    opacity 0.3s;
}
.org-university-logo:hover img {
  filter: none;
  opacity: 1;
}
.org-university-hse img {
  width: 48px;
  height: 48px;
}
.org-university-msu img {
  width: 54px;
  height: 54px;
}
.org-university-mipt img {
  width: 155px;
  height: 62px;
}
.org-university-logo span {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}
[data-theme="dark"] .org-university-hse img {
  filter: brightness(0) invert(1);
}
.cofine-ribbon-wrap {
  height: 130px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0 0 20px;
}
.cofine-ribbon {
  width: 110%;
  flex: 0 0 110%;
  margin-left: -5%;
  padding: 17px 0;
  background: var(--bg-surface);
  border-block: 1px solid var(--border-subtle);
  transform: rotate(-2deg);
}
.ribbon-universities {
  transform: rotate(2deg);
  background: var(--bg-surface-soft);
}
.cofine-ribbon-track {
  display: flex;
  width: max-content;
  animation: cofine-marquee 38s linear infinite;
}
.ribbon-universities .cofine-ribbon-track {
  animation-direction: reverse;
  animation-duration: 46s;
}
.cofine-ribbon-group {
  display: flex;
  flex-shrink: 0;
}
.cofine-ribbon-item {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-inline: 28px;
  white-space: nowrap;
  font-size: clamp(25px, 3.5vw, 46px);
  line-height: 1;
  font-weight: 550;
  letter-spacing: -0.05em;
  color: var(--text-primary);
}
.ribbon-spark {
  color: var(--accent-color);
  font-size: 24px;
}
.ribbon-mini-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  align-self: flex-start;
  margin-top: 5px;
  color: var(--text-muted);
}
.cofine-ribbon-wrap:hover .cofine-ribbon-track {
  animation-play-state: paused;
}
@keyframes cofine-marquee {
  to {
    transform: translateX(-50%);
  }
}
.wave-access {
  max-width: 610px;
  margin: 0 auto 62px;
  text-align: center;
}
.wave-access h3 {
  font-size: 18px;
  font-weight: 550;
  margin-bottom: 16px;
}
.wave-access > p {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.7;
}
.wave-track {
  overflow: visible;
}
.wave-progress-fill {
  position: relative;
}
.progress-particles {
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.progress-tip {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffe4b0;
  box-shadow: 0 0 12px var(--accent-color);
  transform: translate(-50%, -50%);
}
.progress-particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0;
}
.progress-particles.is-running i {
  animation: progress-spark 1.9s var(--spark-delay) ease-out infinite;
}
@keyframes progress-spark {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0);
  }
}
.invite-editorial {
  background: var(--bg-surface);
  box-shadow: 0 20px 60px #00000003;
}
.invite-story {
  background: transparent;
}
.invite-primary-reward {
  background: transparent;
  color: var(--text-primary);
  border-inline: 1px solid var(--border-subtle);
}
.invite-primary-reward > p {
  color: var(--text-secondary);
}
.invite-days > strong {
  color: var(--accent-color);
}
.invite-link-row {
  max-width: 610px;
  margin: 24px auto 0;
}
.metal-card-footer .metal-holder-col {
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  flex: 1;
}
.metal-card-footer .metal-pass-side {
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  max-width: 45%;
}
.metal-card-footer .metal-footer-label {
  width: 100%;
}
.metal-card-footer .metal-footer-val {
  max-width: 100%;
}
.release-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 60px 35px;
}
.release-centered > .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.release-store-title {
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1.08;
  margin-bottom: 24px;
}
.release-store-title > span:not(.release-conjunction) {
  color: var(--accent-color);
}
.release-conjunction {
  color: var(--text-primary);
}
.release-centered > p {
  max-width: 430px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.release-store-badges {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 30px 0 20px;
}
.release-store-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 174px;
  padding: 12px 18px;
  border: 1px solid #ffffff24;
  border-radius: 13px;
  color: #fff;
  background: #211f1d;
  text-align: left;
}
.release-store-badge img {
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.release-store-badge span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.release-store-badge small {
  font-size: 9px;
  color: #ddd9d4;
}
.release-store-badge strong {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.025em;
}
.release-centered .release-cta {
  margin-top: 5px;
}
.footer {
  background: #1c1b19;
  color: #f1eee8;
  border-top: 1px solid #ffffff12;
}
.footer .cofine-mono-logo {
  filter: brightness(0) invert(1);
}
.footer .footer-desc,
.footer .footer-copy,
.footer .footer-link {
  color: #a9a59f;
}
.footer .footer-col-title {
  color: #f1eee8;
}
.footer .footer-link:hover {
  color: white;
}
.footer .footer-store-btn {
  background: #242320;
  border-color: #ffffff20;
  color: white;
}
.footer .store-badge-title {
  color: white;
}
.footer .store-badge-sub {
  color: #aaa69e;
}
.cookie-banner-wrap {
  left: 24px;
  bottom: 20px;
  transform: none;
  width: min(480px, calc(100% - 48px));
  max-width: 480px;
}
@media (max-width: 768px) {
  .email-access-shell {
    flex-wrap: wrap;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 20px;
  }
  .email-access-input {
    width: auto;
    font-size: 16px;
    min-height: 42px;
  }
  .email-access-submit {
    width: 100%;
    min-height: 48px;
  }
  .hero-note-verify {
    top: 123px;
    left: 0;
  }
  .org-university-row {
    gap: 8px;
  }
  .org-university-logo {
    min-height: 94px;
    padding: 12px 6px;
    gap: 8px;
    flex-direction: column;
  }
  .org-university-hse img {
    width: 36px;
    height: 36px;
  }
  .org-university-msu img {
    width: 39px;
    height: 39px;
  }
  .org-university-mipt img {
    width: 100%;
    max-width: 115px;
    height: 62px;
  }
  .org-university-logo span {
    font-size: 10px;
  }
  .cofine-ribbon-wrap {
    height: 94px;
    margin-bottom: 4px;
  }
  .cofine-ribbon {
    padding: 15px 0;
  }
  .cofine-ribbon-item {
    gap: 22px;
    padding-inline: 18px;
    font-size: 30px;
  }
  .ribbon-mini-label {
    display: none;
  }
  .wave-access {
    margin-bottom: 38px;
  }
  .wave-access > p {
    max-width: 300px;
    margin-inline: auto;
  }
  .invite-primary-reward {
    border-inline: 0;
    border-top: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
  }
  .release-centered {
    padding: 40px 20px;
  }
  .release-store-title {
    font-size: clamp(35px, 8.5vw, 52px);
  }
  .release-store-badges {
    gap: 10px;
    width: 100%;
  }
  .release-store-badge {
    min-width: 0;
    flex: 1;
    padding: 11px;
    gap: 8px;
    justify-content: center;
  }
  .release-store-badge strong {
    font-size: 15px;
  }
  .release-store-badge img {
    width: 22px;
    height: 26px;
  }
  .metal-card-footer .metal-footer-label {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .metal-card-footer .metal-holder-col {
    max-width: 56%;
  }
  .cookie-banner-wrap {
    left: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }
  body:has(.cookie-banner-wrap) .theme-switcher-container {
    bottom: 130px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cofine-ribbon-track {
    animation: none;
  }
  .progress-particles i {
    display: none;
    animation: none;
  }
  .email-access-submit {
    transition: none;
  }
}

/* Brand marks travel with the names in the ribbons. */
.ribbon-brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: grayscale(1);
}
.ribbon-brand-mipt,
.ribbon-brand-yandex,
.ribbon-brand-ozon,
.ribbon-brand-avito,
.ribbon-brand-sberbank {
  width: 72px;
}
[data-theme="dark"] .ribbon-brand-mark {
  filter: grayscale(1) brightness(0) invert(1);
}
@media (max-width: 768px) {
  .hero-note-verify {
    left: -6px;
    font-size: 9px;
    gap: 6px;
    padding: 12px 10px;
  }
  .hero-note-verify svg {
    width: 16px;
    height: 16px;
  }
  .ribbon-brand-mark {
    width: 30px;
    height: 30px;
  }
  .ribbon-brand-mipt,
  .ribbon-brand-yandex,
  .ribbon-brand-ozon,
  .ribbon-brand-avito,
  .ribbon-brand-sberbank {
    width: 58px;
  }
}
/* Long addresses and organization names keep their own column. */
.metal-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}
.metal-card-footer .metal-holder-col,
.metal-card-footer .metal-pass-side {
  width: 100%;
  max-width: 100%;
  gap: 6px;
}
.metal-card-footer .metal-footer-val {
  height: auto;
  min-height: 18px;
}
.metal-engraved-email > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.metal-engraved-org {
  justify-content: flex-end;
}
.metal-engraved-org > span {
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .metal-card-footer {
    gap: 10px;
  }
  .metal-card-footer .metal-footer-val {
    font-size: 10px;
    line-height: 1.4;
  }
  .metal-card-footer .metal-footer-label {
    font-size: 7px;
  }
}
.email-access-input::selection {
  color: #30221d;
  background: color-mix(in srgb, var(--accent-color) 18%, white);
}
[data-theme="dark"] .ribbon-brand-msu {
  filter: grayscale(1);
}
/* Compact mobile layout and a floating glass navigation panel. */
@media (max-width: 768px) {
  .hero .hero-mockup-wrapper,
  .cofine-circle .circle-art {
    display: none;
  }
  .hero-grid {
    gap: 0;
  }
  .hero {
    padding-bottom: 24px;
  }
  .circle-intro {
    margin-bottom: 28px;
  }
  .mobile-menu-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    border: 1px solid #ffffff90;
    background: rgba(255, 255, 255, 0.24);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 #ffffffb0;
  }
  .mobile-menu-btn.is-active {
    background: rgba(255, 255, 255, 0.52);
  }
  .mobile-nav-drawer {
    inset: 0;
    z-index: 99;
  }
  .mobile-nav-backdrop {
    background: rgba(45, 40, 35, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .mobile-nav-content {
    position: absolute;
    top: 84px;
    left: 14px;
    right: 14px;
    max-width: 430px;
    margin-left: auto;
    padding: 10px 22px;
    gap: 0;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(32px) saturate(1.35);
    -webkit-backdrop-filter: blur(32px) saturate(1.35);
    box-shadow:
      inset 0 1px 0 #ffffffb0,
      0 18px 55px #2c201314;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top right;
  }
  .mobile-nav-drawer.is-open .mobile-nav-content {
    transform: translateY(0) scale(1);
  }
  .mobile-nav-links {
    gap: 0;
  }
  .mobile-nav-item {
    padding: 19px 0;
    min-height: 66px;
    gap: 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.035em;
    color: var(--text-primary);
  }
  .mobile-nav-item + .mobile-nav-item {
    border-top: 1px solid var(--border-subtle);
  }
  .mobile-nav-item:hover,
  .mobile-nav-item:active {
    background: transparent;
    color: var(--accent-color);
    transform: none;
  }
  .mobile-nav-item:focus-visible {
    outline-offset: 5px;
    border-radius: 8px;
  }
  .mobile-nav-index {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  .mobile-nav-arrow {
    margin-left: auto;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-secondary);
  }
  [data-theme="dark"] .mobile-nav-content {
    background: rgba(30, 29, 27, 0.78);
    border-color: #ffffff24;
    box-shadow:
      inset 0 1px 0 #ffffff14,
      0 18px 55px #00000030;
  }
  [data-theme="dark"] .mobile-menu-btn {
    background: #ffffff08;
    border-color: #ffffff20;
    box-shadow: inset 0 1px 0 #ffffff16;
  }
  .footer {
    padding: 38px 0 76px;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px 22px;
    text-align: left;
    margin-bottom: 0;
    align-items: start;
  }
  .footer-brand {
    grid-column: 1/-1;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-logo-brand-wrap {
    height: auto;
    justify-content: flex-start;
  }
  .footer-logo-brand-full {
    width: 120px;
    height: auto;
    object-position: left center;
  }
  .footer-desc {
    max-width: 285px;
    margin: 0;
    line-height: 1.7;
  }
  .footer-copy {
    margin: 0;
  }
  .footer-column {
    min-width: 0;
    text-align: left;
  }
  .footer-col-title {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
  }
  .footer-links {
    align-items: flex-start;
    gap: 10px;
  }
  .footer-link {
    display: inline-block;
    font-size: 11px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .footer-col-right {
    grid-column: 1/-1;
  }
  .footer-stores-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 10px;
  }
  .footer-store-btn {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding: 12px 14px;
  }
  .footer-store-btn .store-badge-title {
    font-size: 14px;
  }
}

.footer-store-btn .apple-svg {
  color: #f1eee8;
}
/* A shared brand collection and slender ribbons on the section seams. */
.organization-collection {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.organization-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.32);
}
.organization-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}
.organization-mark img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.64;
}
.organization-mark-company img {
  width: 94px;
  height: 24px;
}
.organization-mark-vk img,
.organization-mark-mts img,
.organization-mark-x5 img {
  width: 34px;
}
.organization-mark-2gis img {
  filter: brightness(0);
}
.organization-mark-ranepa img {
  object-fit: cover;
  object-position: left;
}
[data-theme="dark"] .organization-tile {
  background: #ffffff03;
}
[data-theme="dark"] .organization-mark img {
  filter: grayscale(1) invert(1);
}
[data-theme="dark"] .organization-mark-2gis img {
  filter: none;
}
.circle-organizations {
  padding-bottom: 76px;
}
.cofine-ribbon-wrap {
  position: relative;
  z-index: 3;
  height: 84px;
  margin-block: -42px;
}
.cofine-ribbon {
  padding: 12px 0;
  background: #f8f7f3;
  border-block: 1px solid #dcd9d1;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 18px #00000008;
}
.ribbon-universities {
  transform: rotate(1.5deg);
  background: #f8f7f3;
}
.cofine-ribbon-item {
  padding-inline: 24px;
  gap: 24px;
  font-size: 13px;
  line-height: 1;
}
.cofine-ribbon .organization-mark {
  font-size: 13px;
  color: #6c6862;
}
.cofine-ribbon .organization-mark img {
  height: 22px;
  width: 26px;
  opacity: 0.7;
  filter: grayscale(1);
}
.cofine-ribbon .organization-mark-company img {
  width: 92px;
  height: 22px;
}
.cofine-ribbon .organization-mark-vk img,
.cofine-ribbon .organization-mark-mts img,
.cofine-ribbon .organization-mark-x5 img {
  width: 28px;
}
.cofine-ribbon .organization-mark-2gis img {
  filter: brightness(0);
}
.cofine-ribbon .ribbon-spark {
  font-size: 11px;
  color: #9e9890;
}
.cofine-ribbon-track {
  animation-duration: 65s;
}
.ribbon-universities .cofine-ribbon-track {
  animation-duration: 70s;
}
.cofine-circle {
  padding-top: 94px;
  padding-bottom: 86px;
}
[data-theme="dark"] .cofine-ribbon,
[data-theme="dark"] .ribbon-universities {
  background: #272623;
  border-color: #ffffff16;
}
[data-theme="dark"] .cofine-ribbon .organization-mark {
  color: #c1bcb4;
}
[data-theme="dark"] .cofine-ribbon .organization-mark img {
  filter: grayscale(1) invert(1);
}
[data-theme="dark"] .cofine-ribbon .organization-mark-2gis img {
  filter: none;
}
/* Orange glass uses the shared accent without a pastel tint. */
.email-access-submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(
    145deg,
    var(--action-highlight),
    var(--action-bg)
  );
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  box-shadow:
    inset 0 1px 0 #ffffff8c,
    inset 0 -1px 0 #a3441930,
    0 5px 15px #ff6b241a;
}
.email-access-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    #ffffff07,
    transparent 45%,
    #ffffff04 75%,
    #ffffff07
  );
}
.email-access-submit:hover {
  background: linear-gradient(145deg, var(--action-hover), var(--action-bg));
  box-shadow:
    inset 0 1px 0 #ffffffb3,
    0 7px 19px #ff6b2424;
}
.cofine-color-logo {
  display: block;
  width: 120px;
  height: 40px;
  object-fit: contain;
  filter: none;
}
[data-theme="dark"] .header .logo-brand-wrap:has(.cofine-color-logo),
.header-dark-page .logo-brand-wrap:has(.cofine-color-logo) {
  border-radius: 12px;
  padding: 3px 8px;
  background: #faf7f0e8;
}
.footer-logo-brand-wrap:has(.cofine-color-logo) {
  height: auto;
  align-self: flex-start;
  width: fit-content;
  padding: 7px 12px;
  border-radius: 16px;
  background: rgba(250, 247, 240, 0.94);
  border: 1px solid #ffffff4d;
  box-shadow: inset 0 1px 0 #ffffffb3;
}
.footer .cofine-color-logo {
  width: 120px;
  height: 40px;
  filter: none;
}
@media (max-width: 1024px) and (min-width: 769px) {
  .organization-collection {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .organization-collection {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .organization-tile {
    min-height: 50px;
    padding: 10px 6px;
    border-radius: 12px;
  }
  .organization-mark {
    gap: 5px;
    font-size: 9px;
  }
  .organization-mark img {
    width: 22px;
    height: 22px;
  }
  .organization-mark-company img {
    width: 78px;
    height: 20px;
  }
  .organization-mark-vk img,
  .organization-mark-mts img,
  .organization-mark-x5 img {
    width: 26px;
  }
  .circle-organizations {
    padding-bottom: 52px;
  }
  .cofine-ribbon-wrap {
    height: 64px;
    margin-block: -32px;
  }
  .cofine-ribbon {
    padding-block: 10px;
    transform: rotate(-2deg);
  }
  .ribbon-universities {
    transform: rotate(2deg);
  }
  .cofine-ribbon-item {
    padding-inline: 17px;
    gap: 20px;
  }
  .cofine-ribbon .organization-mark {
    font-size: 11px;
    gap: 7px;
  }
  .cofine-ribbon .organization-mark img {
    width: 22px;
    height: 20px;
  }
  .cofine-ribbon .organization-mark-company img {
    width: 78px;
    height: 20px;
  }
  .cofine-ribbon .organization-mark-vk img,
  .cofine-ribbon .organization-mark-mts img,
  .cofine-ribbon .organization-mark-x5 img {
    width: 24px;
  }
  .cofine-circle {
    padding-top: 65px;
    padding-bottom: 62px;
  }
  .cofine-color-logo {
    width: 106px;
    height: 35px;
  }
}
.organization-collection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.organization-tile {
  flex: 0 0 calc((100% - 40px) / 6);
}
@media (max-width: 1024px) and (min-width: 769px) {
  .organization-tile {
    flex-basis: calc((100% - 24px) / 4);
  }
}
@media (max-width: 768px) {
  .organization-tile {
    flex-basis: calc((100% - 12px) / 3);
  }
}
.cofine-color-cup {
  object-fit: cover;
  object-position: left;
}

.email-access-submit {
  color: var(--action-text);
  text-shadow: none;
}
.organization-mark-mephi img,
.cofine-ribbon .organization-mark-mephi img {
  width: 34px;
}
@media (max-width: 768px) {
  .organization-mark-mephi img,
  .cofine-ribbon .organization-mark-mephi img {
    width: 28px;
  }
}
/* Glass feedback, restrained scroll motion and the first-wave launch panel. */
:root {
  /* White text stays readable through the restrained glass highlight. */
  --action-bg: #b8440a;
  --action-highlight: #bd480d;
  --action-hover: #a63d08;
  --action-text: #fff;
}
[data-theme="latte"] {
  --action-bg: #79492a;
  --action-highlight: #855332;
  --action-hover: #663c23;
}
[data-theme="figma"] {
  --action-bg: #121214;
  --action-highlight: #232326;
  --action-hover: #080809;
}
html {
  background: #0b0c0d;
}
body {
  background: transparent;
}
#root {
  min-height: 100dvh;
  background: var(--bg-canvas);
}
.email-access-shell.has-email-error,
.email-access-shell.has-email-error:focus-within {
  border-color: #d45b48;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.68),
    var(--bg-surface)
  );
  box-shadow:
    inset 0 0 0 1px #d45b481a,
    0 0 0 3px #d45b4810,
    0 10px 28px #d45b4809;
}
.has-email-error .email-access-icon {
  color: #c35140;
}
.email-field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 6px 0;
  color: #b74b3d;
  text-align: left;
  font-size: 11px;
  line-height: 1.6;
}
.email-field-error svg {
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme="dark"] .email-access-shell.has-email-error {
  background: linear-gradient(135deg, #b4432524, var(--bg-surface));
}
[data-theme="dark"] .email-field-error {
  color: #f4aa96;
}
.email-access-submit {
  min-width: 144px;
}
.email-access-submit.is-loading {
  opacity: 1;
  cursor: progress;
  background: linear-gradient(
    130deg,
    var(--action-highlight),
    var(--action-bg)
  );
}
.email-access-submit.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, #ffffff05, transparent);
  transform: translateX(-110%);
  animation: verification-sheen 1.6s ease-in-out infinite;
}
.verification-spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid #42271e38;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: verification-spin 0.8s linear infinite;
}
.verification-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}
.verification-dots i {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  animation: verification-dot 1.1s ease-in-out infinite;
}
.verification-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.verification-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes verification-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes verification-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
@keyframes verification-sheen {
  65%,
  100% {
    transform: translateX(110%);
  }
}
.glass-error-dialog {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.86),
    rgba(247, 248, 250, 0.7)
  );
  border: 1px solid #ffffffb0;
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 28px 90px #15191f30;
  backdrop-filter: blur(32px) saturate(1.25);
  -webkit-backdrop-filter: blur(32px) saturate(1.25);
  padding: 32px;
}
.glass-error-dialog::backdrop {
  background: #20262e44;
  backdrop-filter: blur(15px) saturate(0.8);
  -webkit-backdrop-filter: blur(15px) saturate(0.8);
}
.glass-error-dialog .dialog-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid #ffffffb0;
  background: linear-gradient(145deg, #ffffffb0, #eceff252);
  color: #c45842;
  box-shadow:
    inset 0 1px 0 #ffffffa8,
    0 6px 18px #ce735712;
}
.glass-error-dialog .dialog-close {
  border: 1px solid #ffffffa0;
  background: #ffffff3b;
}
.dialog-eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.13em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.glass-error-dialog .dialog-email {
  border: 1px solid #ffffffa8;
  background: #ffffff52;
}
.glass-error-dialog .dialog-primary {
  background: linear-gradient(
    130deg,
    var(--action-highlight),
    var(--action-bg)
  );
  color: var(--action-text);
  border: 1px solid #ffffff9e;
  box-shadow:
    inset 0 1px 0 #ffffff9c,
    0 5px 16px #ec805814;
}
.glass-error-dialog .dialog-share-row {
  border-top-color: #8d969c25;
}
[data-theme="dark"] .glass-error-dialog {
  background: linear-gradient(135deg, #34383cea, #202326df);
  border-color: #ffffff25;
  box-shadow:
    inset 0 1px 0 #ffffff20,
    0 28px 90px #00000050;
}
[data-theme="dark"] .glass-error-dialog .dialog-email,
[data-theme="dark"] .glass-error-dialog .dialog-close {
  background: #ffffff07;
  border-color: #ffffff20;
}
[data-theme="dark"] .glass-error-dialog .dialog-icon {
  background: linear-gradient(145deg, #ffffff12, #ffffff06);
  border-color: #ffffff20;
  color: #ffb780;
}
.wave-launch {
  padding: 42px 46px;
  margin-bottom: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 30px;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.26)
  );
  box-shadow:
    inset 0 1px 0 #ffffffc0,
    0 18px 65px #00000004;
}
.wave-launch-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.wave-launch-topline .eyebrow {
  color: var(--accent-color);
}
.wave-launch-limit {
  color: var(--text-secondary);
  font-size: 11px;
}
.wave-scarcity-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 30px 0 32px;
}
.wave-scarcity {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
}
.wave-scarcity strong {
  font-size: clamp(84px, 10vw, 132px);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.075em;
  color: var(--accent-color);
}
.wave-scarcity > span {
  max-width: 115px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 550;
  letter-spacing: -0.04em;
}
.wave-launch-manifesto {
  max-width: 160px;
  text-align: right;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}
.wave-meter-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.wave-meter-labels strong {
  color: var(--text-primary);
  font-weight: 600;
}
.wave-track-prominent {
  position: relative;
  height: 26px;
  border-radius: 9px;
  background: var(--bg-surface-soft);
  box-shadow: inset 0 1px 3px #00000007;
}
.wave-track-prominent > .wave-progress-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-color) 85%, #ffb000),
    var(--accent-color)
  );
  box-shadow:
    0 4px 15px color-mix(in srgb, var(--accent-color) 18%, transparent),
    inset 0 1px 0 #ffffff66;
}
.wave-track-prominent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 1px),
    rgba(255, 255, 255, 0.28) calc(10% - 1px),
    rgba(255, 255, 255, 0.28) 10%
  );
}
.wave-track-prominent .progress-tip {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 65%, transparent);
}
.wave-enroll-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  align-items: center;
}
.wave-enroll-copy h3 {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.05em;
  font-weight: 550;
  margin-bottom: 12px;
}
.wave-enroll-copy p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 350px;
}
.wave-launch .wave-access {
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: left;
}
.wave-launch .wave-access h3 {
  font-size: 12px;
  font-weight: 550;
  margin-bottom: 12px;
}
.wave-launch .wave-access > p {
  font-size: 9px;
  text-align: left;
  margin-inline: 6px;
  max-width: none;
}
[data-theme="dark"] .wave-launch {
  background: linear-gradient(125deg, #ffffff07, #ffffff02);
  box-shadow:
    inset 0 1px 0 #ffffff10,
    0 18px 65px #00000006;
}
.release-liquid {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #ffffff6b, #edf1f33b);
  border: 1px solid #ffffffb0;
  border-radius: 34px;
  backdrop-filter: blur(30px) saturate(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #a2adb51a,
    0 20px 60px #28384308;
}
.release-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    130deg,
    #ffffff4d,
    transparent 38%,
    #c4ced80d 55%,
    #ffffff32 80%,
    transparent
  );
  pointer-events: none;
}
.release-liquid .release-store-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(46px, 6.8vw, 88px);
  line-height: 1.04;
  gap: 8px;
}
.release-liquid .release-store-title > span:not(.release-conjunction) {
  background: linear-gradient(
    130deg,
    #475862 3%,
    #8b9ca7 16%,
    #d9e4e9 23%,
    #5b6d79 38%,
    #b3c3cc 49%,
    #596a76 63%,
    #c3d2da 75%,
    #536570 94%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.4px #465a653d;
  text-shadow: 0 1px 1px #ffffff24;
}
.release-liquid .release-conjunction {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
}
.release-liquid .release-store-badges {
  margin-bottom: 0;
}
.release-liquid .release-store-badge {
  background: linear-gradient(130deg, #ffffff80, #eef1f363);
  border: 1px solid #ffffffab;
  color: #35434d;
  border-radius: 15px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 4px 14px #28384305;
  justify-content: center;
  padding: 16px 20px;
}
.release-liquid .release-store-badge img {
  filter: brightness(0) opacity(0.72);
}
.release-liquid .release-store-badge strong {
  font-size: 17px;
}
[data-theme="dark"] .release-liquid {
  background: linear-gradient(135deg, #ffffff0b, #c4d0dd06);
  border-color: #ffffff20;
  box-shadow:
    inset 0 1px 0 #ffffff20,
    0 20px 60px #00000015;
}
[data-theme="dark"]
  .release-liquid
  .release-store-title
  > span:not(.release-conjunction) {
  background-image: linear-gradient(
    130deg,
    #b9c7cf,
    #e7f0f5 22%,
    #72838f 35%,
    #d1dfe6 50%,
    #a1b3be 65%,
    #eef6fa 77%,
    #899da9
  );
  -webkit-text-stroke-color: #b9cbd659;
}
[data-theme="dark"] .release-liquid .release-store-badge {
  background: linear-gradient(130deg, #ffffff0e, #ffffff04);
  border-color: #ffffff24;
  color: #d5e0e7;
  box-shadow: inset 0 1px 0 #ffffff18;
}
[data-theme="dark"] .release-liquid .release-store-badge img {
  filter: brightness(0) invert(1) opacity(0.8);
}
.vip-club-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0d0e10;
}
.vip-club-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.075;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}
.vip-club-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 20%, #93a4c017, transparent 55%),
    radial-gradient(ellipse at 80% 75%, #93a4b813, transparent 55%);
}
.vip-club-section > .container {
  position: relative;
}
.vip-card-white-glow {
  opacity: 0.3;
}
.vip-get-card-action {
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}
.vip-get-card-trigger-btn {
  justify-content: center;
  text-align: center;
  margin-inline: auto;
  min-width: 250px;
}
.metal-vip-card {
  will-change: transform;
}
@media (max-width: 768px) {
  .wave-launch {
    padding: 26px 22px;
    border-radius: 24px;
    margin-bottom: 28px;
  }
  .wave-launch-topline .eyebrow {
    font-size: 9px;
  }
  .wave-launch-limit {
    font-size: 9px;
  }
  .wave-scarcity-row {
    margin: 29px 0;
    gap: 16px;
  }
  .wave-scarcity {
    gap: 14px;
  }
  .wave-scarcity strong {
    font-size: 80px;
  }
  .wave-scarcity > span {
    max-width: 85px;
    font-size: 19px;
  }
  .wave-launch-manifesto {
    display: none;
  }
  .wave-meter-labels {
    font-size: 10px;
  }
  .wave-track-prominent {
    height: 22px;
  }
  .wave-enroll-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
    margin-top: 28px;
  }
  .wave-enroll-copy h3 {
    font-size: 25px;
  }
  .wave-enroll-copy p {
    font-size: 11px;
  }
  .wave-launch .wave-access h3 {
    font-size: 11px;
  }
  .wave-launch .wave-access > p {
    font-size: 9px;
  }
  .glass-error-dialog {
    padding: 25px;
    border-radius: 26px;
  }
  .release-liquid {
    padding: 40px 20px;
    border-radius: 27px;
  }
  .release-liquid .release-store-title {
    font-size: clamp(39px, 10vw, 62px);
  }
  .release-liquid .release-conjunction {
    font-size: 15px;
  }
  .release-liquid .release-store-badge {
    padding: 14px 10px;
    gap: 8px;
  }
  .release-liquid .release-store-badge strong {
    font-size: 14px;
  }
  .email-access-submit {
    min-height: 48px;
  }
  .vip-get-card-trigger-btn {
    min-width: 0;
    width: fit-content;
    max-width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .verification-spinner,
  .verification-dots i,
  .email-access-submit.is-loading::after {
    animation: none;
  }
  .verification-dots i {
    opacity: 1;
  }
  .metal-vip-card {
    will-change: auto;
  }
}

/* Primary labels use white text on a contrast-safe orange action surface. */
.email-access-submit,
.glass-error-dialog .dialog-primary,
.vip-get-card-trigger-btn {
  color: var(--action-text);
  text-shadow: none;
}
.vip-get-card-trigger-btn {
  background: linear-gradient(
    130deg,
    var(--action-highlight),
    var(--action-bg)
  );
}
.vip-get-card-trigger-btn:hover,
.glass-error-dialog .dialog-primary:hover {
  background: var(--action-hover);
  color: var(--action-text);
}
/* Quiet brand ribbons sit on the seam without competing with the headline. */
.cofine-ribbon-wrap {
  height: 84px;
  margin-block: -42px;
}
.cofine-ribbon,
[data-theme="dark"] .cofine-ribbon {
  padding: 10px 0;
  background: #fcfcfa;
  border-block: 1px solid #e0e2dc;
  transform: rotate(-1.05deg);
  box-shadow:
    0 3px 12px #171c1b06,
    inset 0 1px 0 #fff;
}
.ribbon-universities,
[data-theme="dark"] .ribbon-universities {
  transform: rotate(1.05deg);
}
.cofine-ribbon-item {
  min-height: 32px;
  gap: 28px;
  padding-inline: 22px;
}
.cofine-ribbon .organization-mark,
[data-theme="dark"] .cofine-ribbon .organization-mark {
  font-size: 13px;
  font-weight: 550;
  gap: 9px;
  color: #444741;
}
.cofine-ribbon .organization-mark img,
[data-theme="dark"] .cofine-ribbon .organization-mark img {
  width: 28px;
  height: 28px;
  opacity: 0.78;
  filter: grayscale(1);
}
.cofine-ribbon .organization-mark-company {
  min-width: 104px;
  justify-content: center;
}
.cofine-ribbon .organization-mark-company img {
  width: 94px;
  height: 24px;
}
.cofine-ribbon .organization-mark-avito img,
.cofine-ribbon .organization-mark-sberbank img,
.cofine-ribbon .organization-mark-wildberries img {
  width: 104px;
}
.cofine-ribbon .organization-mark-ozon img {
  width: 78px;
}
.cofine-ribbon .organization-mark-vk img,
.cofine-ribbon .organization-mark-mts img {
  width: 27px;
}
.cofine-ribbon .organization-mark-x5 img {
  width: 32px;
}
.cofine-ribbon .organization-mark-2gis img,
[data-theme="dark"] .cofine-ribbon .organization-mark-2gis img {
  width: 66px;
  filter: brightness(0);
}
.cofine-ribbon .organization-mark-uni.organization-wordmark img {
  width: 96px;
  height: 30px;
}
.cofine-ribbon .organization-mark-itmo.organization-wordmark img {
  width: 82px;
  height: 25px;
}
.cofine-ribbon .organization-mark-ranepa.organization-wordmark img {
  width: 110px;
  height: 32px;
}
.cofine-ribbon .organization-mark-mgimo.organization-wordmark img {
  width: 54px;
  height: 32px;
}
.cofine-ribbon .organization-mark-mephi.organization-wordmark img {
  width: 68px;
  height: 32px;
}
.cofine-ribbon .ribbon-spark {
  width: 3px;
  height: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #bfc3b9;
  font-size: 0;
}
.cofine-ribbon-track {
  animation-duration: 84s;
}
.ribbon-universities .cofine-ribbon-track {
  animation-duration: 92s;
}
.cofine-circle {
  padding-top: 90px;
  padding-bottom: 90px;
}

/* A real intersection area starts the particle loop when the bar is visible. */
.progress-particles {
  width: 8px;
  height: 8px;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
}
.progress-particles .progress-tip {
  left: 50%;
  top: 50%;
  background: #fff0c7;
  box-shadow: 0 0 12px #ffa00080;
}
.progress-particles i {
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--accent-color);
  box-shadow: 0 0 5px #ff91003b;
}
.progress-particles i:nth-of-type(3n) {
  width: 5px;
  height: 5px;
  background: #eebf65;
}
.progress-particles.is-running i {
  animation: cofine-endpoint-spark 1.8s var(--spark-delay) ease-out infinite;
}
@keyframes cofine-endpoint-spark {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.6);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.15);
  }
}

/* Editorial questions, glass rows and a sculptural punctuation mark. */
.faq-editorial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 94px 0 90px;
  background: #111315;
  color: #f5f5f2;
}
.faq-editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 12% 40%, #9ca9b00d, transparent 60%);
}
.faq-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 66px;
  align-items: start;
}
.faq-kicker {
  color: #babcbf;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.faq-editorial .faq-title {
  text-align: left;
  color: #f5f5f2;
  font-size: clamp(50px, 5.7vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.065em;
  font-weight: 550;
  margin: 25px 0 22px;
}
.faq-title > span {
  display: block;
}
.faq-title-glass {
  background: linear-gradient(
    135deg,
    #e0e5e8,
    #9fa9b1 34%,
    #e6e8e9 57%,
    #9ba4ac 88%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.faq-description {
  color: #b8bcc1;
  max-width: 270px;
  font-size: 13px;
  line-height: 1.85;
}
.faq-symbol {
  position: relative;
  width: 210px;
  height: 170px;
  margin: 28px 0 18px;
  display: grid;
  place-items: center;
}
.faq-symbol > span:first-child {
  font-size: 158px;
  line-height: 1;
  font-weight: 600;
  color: #ffffff08;
  -webkit-text-stroke: 1px #ffffff50;
  transform: rotate(-12deg);
  text-shadow: 8px 12px 24px #00000045;
}
.faq-symbol-orbit {
  position: absolute;
  width: 190px;
  height: 76px;
  border: 1px solid #ffffff26;
  border-radius: 50%;
  transform: rotate(-30deg);
  box-shadow: inset 0 1px 0 #ffffff12;
}
.faq-symbol-orbit::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 25px;
  background: #ff8e3d;
  box-shadow: 0 0 18px #ff6b2433;
}
.faq-contact {
  max-width: 290px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid #ffffff16;
  font-size: 12px;
  color: #b8bcc1;
}
.faq-contact a {
  color: #f5f5f2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.faq-contact a:hover {
  color: #ffc18c;
}
.faq-index-topline {
  display: flex;
  justify-content: space-between;
  padding: 0 5px 16px;
  color: #babec3;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.faq-editorial .faq-list {
  max-width: none;
  gap: 10px;
  margin: 0;
}
.faq-editorial .faq-item {
  border: 1px solid #ffffff16;
  border-radius: 20px;
  background: linear-gradient(115deg, #ffffff08, #ffffff03);
  backdrop-filter: blur(16px);
  transition:
    background 0.25s,
    border-color 0.25s;
}
.faq-editorial .faq-item:hover {
  border-color: #ffffff33;
  background: #ffffff08;
}
.faq-editorial .faq-item.active {
  border-color: #ffffff2b;
  background: linear-gradient(110deg, #ffffff0e, #ffffff05);
  box-shadow: inset 2px 0 0 #ff8e3d;
}
.faq-editorial .faq-question-btn,
.faq-editorial .faq-item.active .faq-question-btn {
  display: grid;
  grid-template-columns: 26px 1fr 32px;
  gap: 17px;
  padding: 23px 22px;
  color: #f5f5f2;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 550;
  background: transparent;
}
.faq-number {
  color: #a8afb6;
  align-self: start;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.faq-question-copy {
  display: grid;
  gap: 7px;
}
.faq-category {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #a8afb6;
  font-weight: 500;
}
.faq-toggle {
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ffffff22;
  background: #ffffff05;
  display: grid;
  place-items: center;
  transition:
    transform 0.3s,
    background 0.3s;
}
.faq-item.active .faq-toggle {
  transform: rotate(45deg);
  background: #ffffff12;
}
.faq-editorial .faq-answer-inner {
  padding: 0 64px 0 65px;
}
.faq-editorial .faq-item.active .faq-answer-inner {
  padding: 0 64px 24px 65px;
}
.faq-editorial .faq-answer-inner p {
  color: #c2c7cc;
  font-size: 13px;
  line-height: 1.85;
}
.faq-editorial .faq-question-btn:focus-visible,
.faq-contact a:focus-visible {
  outline: 2px solid #ffb470;
  outline-offset: -3px;
  border-radius: 16px;
}
@media (max-width: 768px) {
  .cofine-ribbon-wrap {
    height: 66px;
    margin-block: -33px;
  }
  .cofine-ribbon,
  [data-theme="dark"] .cofine-ribbon {
    padding-block: 9px;
    transform: rotate(-1.5deg);
  }
  .ribbon-universities,
  [data-theme="dark"] .ribbon-universities {
    transform: rotate(1.5deg);
  }
  .cofine-ribbon-item {
    min-height: 28px;
    gap: 24px;
    padding-inline: 17px;
  }
  .cofine-ribbon .organization-mark,
  [data-theme="dark"] .cofine-ribbon .organization-mark {
    font-size: 12px;
    gap: 8px;
  }
  .cofine-ribbon .organization-mark img,
  [data-theme="dark"] .cofine-ribbon .organization-mark img {
    width: 24px;
    height: 24px;
  }
  .cofine-ribbon .organization-mark-company {
    min-width: 88px;
  }
  .cofine-ribbon .organization-mark-company img {
    width: 80px;
    height: 21px;
  }
  .cofine-ribbon .organization-mark-avito img,
  .cofine-ribbon .organization-mark-sberbank img,
  .cofine-ribbon .organization-mark-wildberries img {
    width: 88px;
  }
  .cofine-ribbon .organization-mark-ozon img {
    width: 70px;
  }
  .cofine-ribbon .organization-mark-vk img,
  .cofine-ribbon .organization-mark-mts img {
    width: 24px;
  }
  .cofine-ribbon .organization-mark-x5 img {
    width: 28px;
  }
  .cofine-ribbon .organization-mark-2gis img,
  [data-theme="dark"] .cofine-ribbon .organization-mark-2gis img {
    width: 58px;
  }
  .cofine-ribbon .organization-mark-uni.organization-wordmark img {
    width: 86px;
    height: 27px;
  }
  .cofine-ribbon .organization-mark-itmo.organization-wordmark img {
    width: 72px;
    height: 23px;
  }
  .cofine-ribbon .organization-mark-ranepa.organization-wordmark img {
    width: 96px;
    height: 28px;
  }
  .cofine-ribbon .organization-mark-mgimo.organization-wordmark img {
    width: 48px;
    height: 28px;
  }
  .cofine-ribbon .organization-mark-mephi.organization-wordmark img {
    width: 60px;
    height: 28px;
  }
  .cofine-circle {
    padding-block: 72px;
  }
  .faq-editorial {
    padding: 58px 0 55px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .faq-intro {
    position: relative;
  }
  .faq-editorial .faq-title {
    font-size: clamp(46px, 12vw, 72px);
    margin-top: 20px;
  }
  .faq-description {
    max-width: 235px;
    font-size: 12px;
  }
  .faq-symbol {
    position: absolute;
    right: 0;
    bottom: 57px;
    margin: 0;
    width: 90px;
    height: 96px;
    opacity: 0.65;
  }
  .faq-symbol > span:first-child {
    font-size: 94px;
  }
  .faq-symbol-orbit {
    width: 94px;
    height: 40px;
  }
  .faq-symbol-orbit::after {
    width: 6px;
    height: 6px;
    top: 2px;
    right: 14px;
  }
  .faq-contact {
    max-width: none;
    margin-top: 26px;
  }
  .faq-editorial .faq-question-btn,
  .faq-editorial .faq-item.active .faq-question-btn {
    grid-template-columns: 20px 1fr 28px;
    gap: 10px;
    padding: 19px 15px;
    font-size: 13px;
  }
  .faq-toggle {
    width: 28px;
    height: 28px;
  }
  .faq-editorial .faq-answer-inner {
    padding: 0 18px 0 45px;
  }
  .faq-editorial .faq-item.active .faq-answer-inner {
    padding: 0 18px 22px 45px;
  }
  .faq-editorial .faq-answer-inner p {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-particles i {
    display: none;
    animation: none;
  }
  .faq-editorial .faq-answer,
  .faq-editorial .faq-answer-inner,
  .faq-toggle {
    transition: none;
  }
}
/* Bright orange with a larger white label; less vertical padding in forms. */
:root:not([data-theme="latte"]):not([data-theme="figma"]) {
  --action-highlight: #e85b08;
  --action-bg: #e6530a;
  --action-hover: #d84e00;
}
.email-access-shell {
  padding: 4px 4px 4px 14px;
  gap: 10px;
  border-radius: 17px;
}
.email-access-input {
  padding-block: 7px;
  min-height: 36px;
}
.email-access-submit {
  min-height: 40px;
  min-width: 172px;
  padding: 0 14px;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.2;
  border-radius: 12px;
}
.glass-error-dialog .dialog-primary,
.vip-get-card-trigger-btn {
  font-size: 19px;
  font-weight: 750;
  line-height: 1.25;
}
.email-access-submit svg,
.glass-error-dialog .dialog-primary svg {
  width: 20px;
  height: 20px;
}
.verification-dots {
  gap: 2px;
}
.verification-spinner {
  width: 16px;
  height: 16px;
}

.progress-particles i {
  width: 8px;
  height: 8px;
  background: #e35b0b;
  box-shadow: 0 0 8px #ff910050;
}
.progress-particles i:nth-of-type(3n) {
  width: 7px;
  height: 7px;
  background: #efb651;
}
.wave-track-prominent .progress-tip {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 18px #ff950080;
}
.progress-tip::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid #ff9d0045;
  border-radius: 50%;
  animation: endpoint-halo 1.8s ease-out infinite;
}
@keyframes endpoint-halo {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@media (max-width: 768px) {
  .email-access-shell {
    padding: 6px 8px;
    gap: 4px 8px;
    border-radius: 17px;
  }
  .email-access-icon {
    flex-basis: 17px;
    width: 17px;
  }
  .email-access-input {
    min-height: 36px;
    padding-block: 5px;
    font-size: 16px;
  }
  .email-access-submit {
    min-height: 40px;
    width: 100%;
    font-size: 19px;
  }
  .progress-particles i {
    width: 7px;
    height: 7px;
  }
  .progress-particles i:nth-of-type(3n) {
    width: 6px;
    height: 6px;
  }
  .theme-dock-dropdown {
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-tip::after {
    animation: none;
    display: none;
  }
}
/* Brand orange actions, comfortable proportions and stable hover surfaces. */
:root:not([data-theme="latte"]):not([data-theme="figma"]) {
  --action-highlight: var(--accent-color);
  --action-bg: var(--accent-color);
  --action-hover: var(--accent-color-hover);
  --action-text: #fff;
}
.email-access-shell {
  padding: 8px 8px 8px 16px;
  gap: 10px;
  border-radius: 19px;
}
.email-access-input {
  font-size: 14px;
  min-height: 44px;
  padding-block: 8px;
  line-height: 1.4;
}
.email-access-submit {
  min-height: 44px;
  min-width: 122px;
  padding-inline: 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 13px;
}
.email-access-submit::before {
  background: none;
}
.email-access-submit.is-loading::after {
  background: linear-gradient(100deg, transparent, #ffffff02, transparent);
}
.email-access-submit svg {
  width: 17px;
  height: 17px;
}
.glass-error-dialog .dialog-primary,
.vip-get-card-trigger-btn {
  font-size: 14px;
  font-weight: 600;
}
.email-access-submit,
.vip-get-card-trigger-btn {
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}
.email-access-submit:hover,
.vip-get-card-trigger-btn:hover {
  background: linear-gradient(
    145deg,
    var(--action-highlight),
    var(--action-bg)
  );
  transform: none;
}
.vip-get-card-trigger-btn::before,
.vip-get-card-trigger-btn::after {
  display: none;
}
.hero-title {
  letter-spacing: -0.045em;
}
.hero-mockup-wrapper {
  height: 604px;
}
.phone-3d-scene {
  width: 284px;
  height: 586px;
  padding: 0;
  max-height: none;
  flex-shrink: 0;
}
.phone-mockup-frame {
  width: 284px;
  height: 586px;
  max-height: none;
}
.phone-3d-card {
  flex-shrink: 0;
}
.feed-top-bar.glass-top-bar {
  padding-top: 43px;
}
.feed-cups-counter,
.feed-filter-btn {
  background: #111820a3;
  border: 1px solid #ffffff55;
  border-radius: 15px;
  color: #fff;
  backdrop-filter: blur(18px);
  box-shadow: 0 3px 12px #00000025;
}
.feed-cups-counter {
  padding: 9px 12px;
  gap: 8px;
}
.feed-filter-btn {
  width: 40px;
  height: 40px;
}
.cofine-ribbon-item {
  gap: 0;
  padding-inline: 30px;
}
.cofine-ribbon-track {
  animation-duration: 54s;
  animation-play-state: running;
}
.cofine-ribbon-wrap:hover .cofine-ribbon-track {
  animation-play-state: running;
}
.ribbon-universities .cofine-ribbon-track {
  animation-duration: 66s;
}
.progress-particles i {
  width: 9px;
  height: 9px;
}
.progress-particles i:nth-of-type(3n) {
  width: 8px;
  height: 8px;
}
.wave-track-prominent .progress-tip {
  width: 15px;
  height: 15px;
}
.invite-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.invite-reward-label > span:last-child {
  font-size: 10px;
  letter-spacing: 0.04em;
}
.invite-secondary-rewards small {
  line-height: 1.65;
}

/* Store names and original brand icons, without an extra card behind them. */
.cofine-release {
  padding: 76px 0 82px;
}
.release-simple {
  text-align: center;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.release-simple-title {
  font-size: clamp(32px, 4.3vw, 54px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.release-simple-title > span {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.release-simple > p {
  max-width: 450px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-secondary);
}
.release-simple .release-store-badges {
  margin-top: 26px;
  justify-content: center;
}
.release-simple .release-store-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  color: var(--text-primary);
  padding: 15px 20px;
  border-radius: 15px;
  gap: 12px;
}
.store-icon {
  flex-shrink: 0;
  filter: none;
}
.release-simple .store-icon {
  color: var(--text-primary);
}

/* FAQ flows into the footer, with simple readable rows. */
.faq-simple,
.footer {
  background: #1d1f1e;
}
.faq-simple {
  padding: 58px 0 46px;
  color: #f5f5f0;
}
.faq-simple > .container {
  max-width: 920px;
}
.faq-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
}
.faq-heading-row h2 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 550;
  letter-spacing: -0.025em;
}
.faq-heading-row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #c9cdc8;
}
.faq-simple .faq-list {
  max-width: none;
  gap: 8px;
}
.faq-simple .faq-item {
  border: 1px solid #ffffff14;
  border-radius: 16px;
  background: #ffffff03;
}
.faq-simple .faq-item.active {
  border-color: #ffffff25;
  background: #ffffff05;
}
.faq-simple .faq-question-btn,
.faq-simple .faq-item.active .faq-question-btn {
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: #f5f5f0;
  gap: 20px;
}
.faq-simple .faq-toggle {
  width: 27px;
  height: 27px;
  border-color: #ffffff20;
}
.faq-simple .faq-answer-inner {
  padding: 0 20px;
}
.faq-simple .faq-item.active .faq-answer-inner {
  padding: 0 20px 20px;
}
.faq-simple .faq-answer-inner p {
  color: #c9cdc8;
  font-size: 14px;
  line-height: 1.8;
}
.faq-simple button:focus-visible,
.faq-heading-row a:focus-visible {
  outline: 2px solid #ffab6a;
  outline-offset: -3px;
}
.footer {
  border-top: 1px solid #ffffff0e;
  padding-top: 42px;
}
.footer-logo-brand-wrap {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  height: auto;
  width: fit-content;
}
.cofine-footer-logo {
  width: 146px;
  height: 49px;
  object-fit: contain;
  display: block;
}
.footer-desc {
  font-size: 14px;
  line-height: 1.8;
  max-width: 310px;
}
.footer-copy {
  font-size: 12px;
  line-height: 1.6;
}
.footer-col-title {
  font-size: 12px;
}
.footer-link {
  font-size: 14px;
  line-height: 1.6;
}
.footer-store-btn .store-badge-title {
  font-size: 14px;
}
.footer-store-btn .store-icon {
  color: #f4f3ed;
}
@media (max-width: 768px) {
  .hero .hero-title {
    letter-spacing: -0.035em;
  }
  .email-access-shell {
    padding: 9px 10px;
    gap: 6px 9px;
  }
  .email-access-input {
    font-size: 15px;
    min-height: 40px;
    padding-block: 8px;
  }
  .email-access-submit {
    min-height: 44px;
    font-size: 14px;
  }
  .cofine-ribbon-item {
    padding-inline: 23px;
  }
  .progress-particles i {
    width: 8px;
    height: 8px;
  }
  .progress-particles i:nth-of-type(3n) {
    width: 7px;
    height: 7px;
  }
  .release-simple-title {
    font-size: 33px;
  }
  .cofine-release {
    padding: 55px 0 58px;
  }
  .release-simple > p {
    font-size: 13px;
  }
  .release-simple .release-store-badge {
    padding: 14px 12px;
  }
  .faq-simple {
    padding: 42px 0 38px;
  }
  .faq-heading-row h2 {
    font-size: 27px;
  }
  .faq-heading-row a {
    font-size: 12px;
  }
  .faq-simple .faq-question-btn,
  .faq-simple .faq-item.active .faq-question-btn {
    padding: 16px;
    font-size: 14px;
  }
  .faq-simple .faq-answer-inner {
    padding-inline: 16px;
  }
  .faq-simple .faq-item.active .faq-answer-inner {
    padding: 0 16px 18px;
  }
  .faq-simple .faq-answer-inner p {
    font-size: 13px;
  }
  .footer-grid {
    gap: 30px 18px;
  }
  .cofine-footer-logo {
    width: 136px;
    height: 46px;
  }
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .email-access-input {
      font-size: 16px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cofine-ribbon-track,
  .cofine-ribbon-wrap:hover .cofine-ribbon-track {
    animation: none;
  }
}

/* Domain shimmer shares the native input's exact baseline and scroll offset. */
.email-input-area {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  font-size: 14px;
  line-height: 1.4;
}
.email-input-area .email-access-input {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 8px 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  caret-color: var(--text-primary);
}
.email-domain-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
  white-space: pre;
  font: inherit;
  letter-spacing: inherit;
}
.email-domain-content {
  display: inline-block;
  flex-shrink: 0;
  color: var(--text-primary);
}
.email-domain-accent {
  position: relative;
  display: inline-block;
}
.email-domain-shimmer {
  color: var(--accent-color);
  background: linear-gradient(100deg, #b34912, #9e5520, #bd4b18, #a75018);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: email-domain-glint 2.6s linear infinite;
}
.has-domain-effect .email-access-input {
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.email-access-input::selection {
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
  background: var(--accent-color-soft);
}
.email-domain-sparks {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.email-domain-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0;
  animation: email-domain-burst 0.7s var(--domain-delay) ease-out both;
}
@keyframes email-domain-glint {
  to {
    background-position: 260% 50%;
  }
}
@keyframes email-domain-burst {
  15% {
    opacity: 0.75;
  }
  to {
    opacity: 0;
    transform: translate(var(--domain-x), var(--domain-y)) scale(0.15);
  }
}
.wave-progress-fill {
  transition: none;
}
.wave-progress-fill[style*="width: 0%"] .progress-tip {
  opacity: 0;
}
.email-access-icon {
  width: 19px;
  height: 19px;
  display: block;
  margin: 0;
}
@media (max-width: 768px) {
  .email-access-shell {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    padding: 10px;
    gap: 8px 10px;
  }
  .email-access-icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 19px;
    height: 19px;
  }
  .email-input-area {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    font-size: 16px;
  }
  .email-access-submit {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    justify-self: stretch;
  }
  .email-field-error {
    align-items: flex-start;
    gap: 7px;
    padding-inline: 4px;
    font-size: 12px;
    line-height: 1.5;
  }
  .email-field-error svg {
    flex-shrink: 0;
    margin-top: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .email-domain-shimmer {
    animation: none;
  }
  .email-domain-sparks {
    display: none;
  }
}
@media (forced-colors: active) {
  .email-domain-overlay {
    display: none;
  }
  .has-domain-effect .email-access-input {
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

[data-theme="dark"] .email-domain-shimmer {
  background-image: linear-gradient(100deg, #ffb16c, #f7d4a6, #ffb16c, #f5bc80);
}
[data-theme="latte"] .email-domain-shimmer {
  background-image: linear-gradient(100deg, #98410e, #9e4a16, #a74411, #954115);
}
[data-theme="figma"] .email-domain-shimmer {
  background-image: linear-gradient(100deg, #232323, #595959, #232323, #494949);
}

/* A restrained glass edge keeps the original brand orange intact. */
:root:not([data-theme="latte"]):not([data-theme="figma"])
  :is(
    .email-access-submit,
    .vip-get-card-trigger-btn,
    .glass-error-dialog .dialog-primary
  ) {
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
  box-shadow:
    inset 0 1px 0 #ffffff66,
    0 3px 12px #de6c1012;
}
:root:not([data-theme="latte"]):not([data-theme="figma"])
  :is(
    .email-access-submit,
    .vip-get-card-trigger-btn,
    .glass-error-dialog .dialog-primary
  ):hover {
  border-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
  box-shadow:
    inset 0 1px 0 #ffffff80,
    0 5px 16px #de6c101c;
}
.verification-spinner {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
}

/* A thin refractive rim and a soft curved highlight over the brand orange. */
:root:not([data-theme="latte"]):not([data-theme="figma"])
  :is(
    .email-access-submit,
    .vip-get-card-trigger-btn,
    .glass-error-dialog .dialog-primary
  ) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color) 96%, transparent);
  border: 1px solid #ffffff70;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 #ffffff80,
    inset 1px 0 0 #ffffff24,
    inset -1px 0 0 #ffffff24,
    inset 0 -1px 0 #ffffff35,
    0 4px 14px #ff6b2426;
}
:root:not([data-theme="latte"]):not([data-theme="figma"])
  :is(
    .email-access-submit,
    .vip-get-card-trigger-btn,
    .glass-error-dialog .dialog-primary
  )::before {
  content: "";
  display: block;
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      110% 110% at 22% -24%,
      #ffffff47,
      #ffffff16 40%,
      transparent 72%
    ),
    linear-gradient(112deg, #ffffff08, transparent 50%, #ffffff0c);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
:root:not([data-theme="latte"]):not([data-theme="figma"])
  :is(
    .email-access-submit,
    .vip-get-card-trigger-btn,
    .glass-error-dialog .dialog-primary
  ):hover {
  background: color-mix(in srgb, var(--accent-color) 96%, transparent);
  border-color: #ffffffa0;
  box-shadow:
    inset 0 1px 0 #ffffffa0,
    inset 1px 0 0 #ffffff35,
    inset -1px 0 0 #ffffff35,
    inset 0 -1px 0 #ffffff45,
    0 6px 17px #ff6b2430;
}
:root:not([data-theme="latte"]):not([data-theme="figma"])
  :is(
    .email-access-submit,
    .vip-get-card-trigger-btn,
    .glass-error-dialog .dialog-primary
  ):hover::before {
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-theme="latte"]):not([data-theme="figma"])
    :is(
      .email-access-submit,
      .vip-get-card-trigger-btn,
      .glass-error-dialog .dialog-primary
    )::before {
    transition: none;
    transform: none;
  }
}

/* Brand frames use visible artwork bounds rather than padded image canvases. */
.cofine-ribbon {
  --ribbon-logo-scale: 1;
}
.cofine-ribbon-group {
  align-items: center;
  gap: 0;
}
.cofine-ribbon .cofine-ribbon-item {
  flex: 0 0 auto;
  min-height: 32px;
  padding-inline: 24px;
}
.cofine-ribbon .organization-mark {
  min-width: 0;
  gap: 8px;
  line-height: 1.2;
}
.organization-logo-viewport {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  width: calc(var(--logo-width) * var(--ribbon-logo-scale, 1));
  height: calc(var(--logo-height) * var(--ribbon-logo-scale, 1));
}
.cofine-ribbon .organization-mark .organization-logo-viewport > img {
  position: absolute;
  display: block;
  width: var(--logo-image-width);
  height: var(--logo-image-height);
  max-width: none;
  left: var(--logo-image-left);
  top: var(--logo-image-top);
  object-fit: contain;
  object-position: center;
}
@media (max-width: 768px) {
  .cofine-ribbon {
    --ribbon-logo-scale: 0.875;
  }
  .cofine-ribbon .cofine-ribbon-item {
    min-height: 28px;
    padding-inline: 20px;
  }
  .cofine-ribbon .organization-mark {
    gap: 7px;
  }
}

/* Stable hover: only light and shadow change, never the control geometry. */
:is(
  .email-access-submit,
  .vip-get-card-trigger-btn,
  .dialog-primary,
  .vip-exclusive-share-btn,
  .invite-copy-button
):hover,
.ui-text-button:hover svg {
  transform: none;
}
:is(
  .email-access-submit,
  .vip-get-card-trigger-btn,
  .dialog-primary
):focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}
.email-domain-accent {
  font-weight: 700;
}
.email-caret-measure {
  position: absolute;
  width: max-content;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
}
.has-domain-effect .email-access-input {
  caret-color: transparent;
}
.email-domain-caret {
  position: absolute;
  top: 50%;
  height: 1.15em;
  width: 1px;
  background: var(--text-primary);
  transform: translateY(-50%);
  pointer-events: none;
  animation: email-caret-blink 1s step-end infinite;
}
@keyframes email-caret-blink {
  50% {
    opacity: 0;
  }
}
.conversation-preview {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ffffff12;
  display: flex;
  align-items: center;
  gap: 11px;
}
.conversation-preview > img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.conversation-preview > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.conversation-preview strong {
  font-size: 12px;
  line-height: 1.45;
  color: #edeee7;
  font-weight: 500;
}
.conversation-preview span {
  font-size: 10px;
  line-height: 1.5;
  color: #a8ada6;
}
.site-invite-action {
  margin-top: 18px;
}
.site-invite-action > button {
  justify-content: center;
  gap: 8px;
}
.site-invite-status,
.site-invite-fallback p {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 10px;
}
.site-invite-fallback input {
  width: 100%;
  min-width: 0;
  padding: 10px;
  margin-top: 8px;
  color: inherit;
  font: inherit;
  background: #ffffff0a;
  border: 1px solid #ffffff24;
  border-radius: 10px;
}
.glass-error-dialog .site-invite-action > button {
  width: 100%;
}
.glass-error-dialog .dialog-invite-hint {
  margin-block: 12px 18px;
  font-size: 12px;
}
.dialog-retry-email {
  font-size: 13px;
}
.faq-simple .site-invite-action .ui-text-button {
  color: #f0b88e;
  font-size: 13px;
}
.faq-simple .site-invite-status {
  color: #c9cdc8;
}
.metal-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px;
}
.metal-card-footer :is(.metal-holder-col, .metal-pass-side) {
  min-width: 0;
  width: 100%;
  max-width: none;
  gap: 7px;
}
.metal-card-footer .metal-footer-label {
  font-family: var(--font-main);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: #aeb3ae;
}
.metal-card-footer .metal-footer-val,
.metal-card-footer .metal-footer-val > span {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.015em;
  font-weight: 600;
  color: #c6cbc4;
  text-shadow:
    0 1px 0 #ffffff24,
    0 -1px 1px #000000c0;
}
.metal-card-footer .metal-footer-val > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.release-simple-title > .release-prelaunch {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.release-simple-title > .release-store-names {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: clamp(42px, 6vw, 76px);
  margin: 0;
}
.release-store-word {
  display: inline-block;
  font-family: "Fredoka", var(--font-main);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--text-primary);
  background: linear-gradient(
    110deg,
    var(--text-primary) 34%,
    #7d8680 44%,
    #b8c0b9 48%,
    #7d8680 52%,
    var(--text-primary) 62%
  );
  background-size: 280% 100%;
  background-position: 180% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: release-name-shine 8s linear infinite;
  animation-play-state: paused;
}
.release-store-names.is-visible .release-store-word {
  animation-play-state: running;
}
.release-store-word:last-child {
  animation-delay: -2.5s;
}
.release-store-and {
  font-family: var(--font-main);
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0;
}
@keyframes release-name-shine {
  0% {
    background-position: 180% 50%;
  }
  28%,
  100% {
    background-position: -80% 50%;
  }
}
.release-simple .release-store-badges {
  margin-top: 30px;
}
[data-theme="dark"] .release-store-word {
  background-image: linear-gradient(
    110deg,
    #e9ece7 34%,
    #ffffff 48%,
    #b4beb5 53%,
    #e9ece7 62%
  );
}
@media (max-width: 768px) {
  .circle-heading,
  .circle-benefit,
  .wave-enroll-copy,
  .wave-access {
    text-align: left;
  }
  .circle-heading > p {
    margin-inline: 0;
  }
  .circle-benefit > p {
    font-size: 13px;
    line-height: 1.75;
  }
  .circle-footnote {
    align-items: flex-start;
    text-align: left;
    flex-wrap: wrap;
    gap: 10px;
  }
  .vip-club-header {
    text-align: left;
    margin-inline: 0;
  }
  .vip-club-header .vip-club-subtitle {
    text-align: left;
    margin-inline: 0;
    font-size: 13px;
  }
  .vip-club-header .vip-club-title {
    font-size: 32px;
    line-height: 1.2;
  }
  .metal-card-footer {
    gap: 12px;
  }
  .metal-card-footer .metal-footer-label {
    font-size: 10px;
    letter-spacing: 0.065em;
  }
  .metal-card-footer .metal-footer-val,
  .metal-card-footer .metal-footer-val > span {
    font-size: 12px;
  }
  .wave-enroll-copy > p {
    font-size: 12px;
    line-height: 1.75;
  }
  .release-simple-title > .release-prelaunch {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .release-simple-title > .release-store-names {
    display: grid;
    gap: 6px;
    font-size: clamp(39px, 11vw, 53px);
  }
  .release-store-and {
    font-size: 16px;
    line-height: 1.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .release-store-word,
  .email-domain-caret {
    animation: none;
  }
}
@media (forced-colors: active) {
  .email-domain-caret {
    display: none;
  }
}

.email-access-submit.is-loading {
  width: var(--email-button-width, auto);
  min-width: 0;
  padding-inline: 12px;
  gap: 6px;
  font-size: 13px;
}
.email-access-submit.is-loading .verification-dots {
  display: none;
}
@media (max-width: 768px) {
  .email-access-submit.is-loading {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wave-scarcity {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .wave-scarcity strong {
    white-space: nowrap;
    font-size: clamp(64px, 20.5vw, 80px);
  }
  .wave-scarcity > span {
    max-width: none;
    font-size: 17px;
    letter-spacing: -0.02em;
  }
  .email-access-input::placeholder {
    font-size: 14px;
  }
}

/* Repeat a complete logo cycle enough times to cover the entire tilted band. */
.cofine-ribbon {
  overflow: hidden;
}
.cofine-ribbon-track {
  animation-name: cofine-ribbon-loop;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes cofine-ribbon-loop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-100% / var(--ribbon-copies, 3)), 0, 0);
  }
}

/* The typed address is the main content of the form, with the same metrics in every layer. */
.email-input-area {
  font-size: 18px;
}
.email-access-input::placeholder {
  font-size: 16px;
}

/* Clear glass surfaces over the photo; familiar, consistently drawn symbols. */
.phone-3d-card {
  transition: none;
}
.feed-cups-counter,
.feed-filter-btn,
.feed-org-subtle-badge {
  border: 0;
  background: linear-gradient(150deg, #ffffff36, #ffffff0c 45%, #11182036);
  color: #fff;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    inset 0 1px 1px #ffffff70,
    inset 0 -1px 1px #00000018,
    0 3px 10px #00000020;
}
.feed-cups-counter {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  gap: 7px;
}
.feed-cups-counter .cups-icon {
  display: block;
  flex: 0 0 auto;
}
.feed-cups-counter .cups-count {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.feed-filter-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  opacity: 1;
  cursor: default;
}
.feed-org-subtle-badge {
  padding: 8px 12px;
  gap: 6px;
}
.feed-org-subtle-badge > svg {
  flex: 0 0 auto;
}
.feed-org-subtle-badge .org-text-content {
  font-size: 12px;
  font-weight: 600;
}

/* Error recovery has one clear primary action and independently spaced alternatives. */
.glass-error-dialog {
  width: min(470px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 30px;
  border-radius: 28px;
}
.glass-error-dialog .dialog-topline {
  margin-bottom: 20px;
  align-items: flex-start;
}
.glass-error-dialog .dialog-icon {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  color: var(--accent-color);
}
.glass-error-dialog .dialog-close {
  width: 44px;
  height: 44px;
  border: 0;
}
.glass-error-dialog .dialog-eyebrow {
  font-size: 10px;
  margin-bottom: 10px;
  letter-spacing: 0.09em;
}
.glass-error-dialog h3 {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.glass-error-dialog > p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
.glass-error-dialog .dialog-email {
  margin: 20px 0 0;
  padding: 13px 15px;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.glass-error-dialog .dialog-actions {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.glass-error-dialog .site-invite-action {
  margin: 0;
  min-width: 0;
}
.glass-error-dialog .dialog-primary {
  min-height: 48px;
  margin: 0;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
}
.glass-error-dialog > .dialog-primary {
  margin-top: 24px;
}
.glass-error-dialog .dialog-invite-hint {
  margin: 0 4px 2px;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}
.glass-error-dialog .dialog-retry-email {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid #8b8f8b2b;
  border-radius: 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: #ffffff3d;
  cursor: pointer;
  transition: background 0.2s;
}
.glass-error-dialog .dialog-retry-email:hover {
  background: #ffffff70;
}
.glass-error-dialog .dialog-retry-email:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}
.glass-error-dialog .dialog-tg-link {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #8b8f8b26;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
[data-theme="dark"] .glass-error-dialog .dialog-retry-email {
  background: #ffffff08;
  border-color: #ffffff26;
}

/* The release block uses Cofine's own type, with only a restrained silver highlight. */
.release-store-word {
  font-family: var(--font-main);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 1.1;
}
.release-simple-title > .release-store-names {
  gap: 24px;
  font-size: clamp(42px, 5.7vw, 72px);
}
.release-store-and {
  color: var(--text-secondary);
  font-size: 0.35em;
}
.footer-link sup {
  font-size: 0.8em;
  margin-left: 2px;
}
.footer-instagram-note {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid #ffffff12;
  max-width: none;
  color: #b2b3ad;
  font-size: 11px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .email-input-area {
    font-size: 18px;
  }
  .email-access-input::placeholder {
    font-size: 15px;
  }
  .glass-error-dialog {
    padding: 24px;
    border-radius: 24px;
  }
  .glass-error-dialog h3 {
    font-size: 25px;
  }
  .glass-error-dialog .dialog-email {
    font-size: 15px;
  }
  .release-simple-title > .release-store-names {
    font-size: clamp(39px, 11vw, 53px);
    gap: 8px;
  }
  .release-store-and {
    font-size: 16px;
  }
  .footer-instagram-note {
    max-width: 100%;
  }
}
@media (max-width: 360px) {
  .email-access-input::placeholder {
    font-size: 14px;
  }
  .glass-error-dialog {
    padding: 20px;
  }
  .glass-error-dialog h3 {
    font-size: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cofine-ribbon-track {
    animation: none;
    will-change: auto;
  }
}

/* A compact app release composition, with the real Cofine mark inside clear glass. */
.cofine-release.release-v20 {
  padding: 78px 0 88px;
}
.release-layout {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: 60px;
  align-items: center;
}
.release-app-art {
  position: relative;
  width: 310px;
  height: 350px;
  justify-self: center;
  display: grid;
  place-items: center;
}
.release-app-shadow {
  position: absolute;
  bottom: 42px;
  width: 230px;
  height: 24px;
  border-radius: 50%;
  background: #2c1e141f;
  filter: blur(14px);
}
.release-app-backplate {
  position: absolute;
  top: 35px;
  left: 37px;
  width: 238px;
  height: 238px;
  border-radius: 60px;
  transform: rotate(12deg);
  background: linear-gradient(145deg, #ceb99f, #96704f 75%);
  box-shadow: 0 15px 42px #6b492126;
}
.release-app-glass {
  position: relative;
  width: 254px;
  height: 254px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  border-radius: 64px;
  transform: rotate(-8deg);
  overflow: hidden;
  background: linear-gradient(145deg, #ffffffb8, #ffffff65 48%, #ffffff8a);
  border: 1px solid #ffffffc9;
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  box-shadow:
    inset 1px 2px 2px #ffffffee,
    inset -1px -2px 2px #ffffff75,
    0 20px 45px #36251718,
    0 1px 3px #ffffffd9;
}
.release-app-glass::after {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    #ffffff04 43%,
    #ffffff70 50%,
    #ffffff04 57%,
    transparent 62%
  );
  transform: translateX(-60%) rotate(-8deg);
  animation: release-glass-sheen 8s ease-in-out infinite;
  animation-play-state: paused;
}
.release-v20.is-visible .release-app-glass::after {
  animation-play-state: running;
}
.release-cup-mark {
  position: relative;
  display: block;
  width: 164px;
  height: 150px;
  overflow: hidden;
  filter: drop-shadow(0 2px 2px #652a0f12);
}
.release-cup-mark img {
  display: block;
  width: 450px;
  height: 150px;
  max-width: none;
}
.release-app-name {
  position: absolute;
  bottom: 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.release-pocket-copy {
  min-width: 0;
}
.release-pocket-title {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: clamp(42px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.release-pocket-title > span {
  display: block;
}
.release-platforms {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 30px;
}
.release-platform {
  min-height: 66px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 1px solid #dfe0da;
  border-radius: 18px;
  background: #ffffff80;
  color: #20211e;
  box-shadow: inset 0 1px 0 #fff;
}
.release-platform img {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}
.release-platform > span {
  font-size: 18px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.vip-exclusive-share-btn:hover {
  transform: none;
}
.vip-exclusive-share-btn:hover .vip-share-icon {
  transform: none;
  color: currentColor;
}
[data-theme="dark"] .release-app-glass {
  background: linear-gradient(145deg, #ffffffa1, #ffffff57 48%, #ffffff88);
}
[data-theme="dark"] .release-platform {
  color: #f0f1eb;
  background: #ffffff07;
  border-color: #ffffff25;
  box-shadow: inset 0 1px 0 #ffffff08;
}
[data-theme="dark"] .release-platform img {
  filter: invert(1);
}
@keyframes release-glass-sheen {
  0%,
  30% {
    transform: translateX(-60%) rotate(-8deg);
  }
  65%,
  100% {
    transform: translateX(60%) rotate(-8deg);
  }
}
@media (max-width: 1000px) and (min-width: 769px) {
  .release-layout {
    gap: 32px;
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .release-app-art {
    width: 280px;
  }
  .release-app-backplate {
    left: 22px;
  }
  .release-platform {
    padding-inline: 14px;
  }
  .release-platform > span {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .cofine-release.release-v20 {
    padding: 44px 0 62px;
  }
  .release-layout {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 420px;
  }
  .release-app-art {
    width: 280px;
    height: 300px;
  }
  .release-app-backplate {
    width: 208px;
    height: 208px;
    top: 27px;
    left: 36px;
    border-radius: 53px;
  }
  .release-app-glass {
    width: 222px;
    height: 222px;
    border-radius: 56px;
    margin-top: -22px;
  }
  .release-cup-mark {
    width: 142px;
    height: 130px;
  }
  .release-cup-mark img {
    width: 390px;
    height: 130px;
  }
  .release-app-name {
    font-size: 20px;
    bottom: 0;
  }
  .release-pocket-title {
    font-size: clamp(36px, 9.7vw, 44px);
    line-height: 1.1;
  }
  .release-platforms {
    margin-top: 25px;
    gap: 10px;
  }
  .release-platform {
    flex: 1 1 0;
    min-width: 0;
    min-height: 62px;
    padding: 16px 10px;
    gap: 8px;
    border-radius: 16px;
  }
  .release-platform > span {
    font-size: 15px;
  }
  .release-platform img {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 360px) {
  .release-platforms {
    flex-direction: column;
  }
  .release-platform {
    flex: auto;
  }
  .release-platform > span {
    font-size: 17px;
  }
  .release-app-art {
    width: 270px;
  }
  .release-app-backplate {
    left: 31px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .release-app-glass::after {
    animation: none;
    opacity: 0;
  }
}

/* Coffee glass, authentic wordmark, and one brief arrival burst. */
.release-wordmark {
  position: absolute;
  bottom: 1px;
  display: block;
  width: 126px;
  height: 34px;
  overflow: hidden;
}
.release-wordmark img {
  position: absolute;
  display: block;
  max-width: none;
  width: 202.72px;
  height: 67.57px;
  left: -73.92px;
  top: -23.24px;
}
.release-wordmark .release-wordmark-dark {
  display: none;
}
[data-theme="dark"] .release-wordmark .release-wordmark-light {
  display: none;
}
[data-theme="dark"] .release-wordmark .release-wordmark-dark {
  display: block;
}
.release-cursor-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
}
.release-platform {
  position: relative;
  min-height: 74px;
  padding-block: 14px;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.25s,
    background 0.25s,
    box-shadow 0.25s;
}
.release-platform::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: linear-gradient(
    110deg,
    transparent 30%,
    #ffffffa6 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
.release-platform > .release-platform-copy {
  display: grid;
  gap: 2px;
  text-align: left;
}
.release-platform-copy small {
  color: #77756e;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.4;
}
.release-platform-copy strong {
  font: inherit;
  font-weight: 600;
}
.release-platform img {
  transition: transform 0.25s;
}
.release-arrival-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --arrival-scale: 1;
}
.release-arrival-particles i {
  position: absolute;
  left: 50%;
  top: 44%;
  width: var(--arrival-size);
  height: var(--arrival-size);
  border-radius: 2px;
  background: linear-gradient(145deg, #e0d4c2, #ad8c67);
  box-shadow: inset 0 1px 0 #ffffffd9;
  opacity: 0;
}
.release-arrival-particles i:nth-child(3n) {
  border-radius: 50%;
  background: #c0a587;
}
.release-arrival-particles i:nth-child(4n) {
  background: #f2eade;
  border: 1px solid #b59a7659;
}
.has-arrived .release-arrival-particles i {
  animation: release-coffee-burst 1.35s var(--arrival-delay)
    cubic-bezier(0.12, 0.65, 0.25, 1) both;
}
.has-arrived .release-app-glass {
  animation: release-glass-welcome 1s ease-in-out;
}
@keyframes release-coffee-burst {
  0% {
    opacity: 0;
    transform: translate3d(
        calc(var(--arrival-from-x) * var(--arrival-scale)),
        calc(var(--arrival-from-y) * var(--arrival-scale)),
        0
      )
      rotate(0) scale(0.8);
  }
  16% {
    opacity: 0.9;
  }
  64% {
    opacity: 0.65;
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--arrival-x) * var(--arrival-scale)),
        calc(var(--arrival-y) * var(--arrival-scale)),
        0
      )
      rotate(var(--arrival-turn)) scale(0.4);
  }
}
@keyframes release-glass-welcome {
  0%,
  100% {
    transform: rotate(-8deg) scale(1);
  }
  45% {
    transform: rotate(-10deg) scale(1.025);
  }
}
@media (hover: hover) and (pointer: fine) {
  .release-platform:hover {
    border-color: #b5a18b;
    background: #ffffffc9;
    box-shadow:
      inset 0 1px 0 #fff,
      0 8px 24px #50391e0c;
  }
  .release-platform:hover::before {
    transform: translateX(120%);
    transition: transform 0.65s ease;
  }
  .release-platform:hover img {
    transform: scale(1.04);
  }
  [data-theme="dark"] .release-platform:hover {
    border-color: #b8a18b70;
    background: #ffffff0d;
    box-shadow:
      inset 0 1px 0 #ffffff15,
      0 8px 24px #00000012;
  }
}
[data-theme="dark"] .release-platform-copy small {
  color: #b7b6ae;
}
[data-theme="dark"] .release-platform::before {
  opacity: 0.15;
}
@media (max-width: 768px) {
  .release-wordmark {
    width: 110px;
    height: 30px;
    bottom: -1px;
  }
  .release-wordmark img {
    width: 176.98px;
    height: 58.99px;
    left: -64.53px;
    top: -20.29px;
  }
  .release-platform {
    min-height: 68px;
    padding-block: 12px;
  }
  .release-platform-copy small {
    font-size: 10px;
  }
  .release-arrival-particles {
    --arrival-scale: 0.82;
  }
}
@media (prefers-reduced-motion: reduce) {
  .release-arrival-particles,
  .release-cursor-light {
    display: none;
  }
  .has-arrived .release-app-glass,
  .has-arrived .release-arrival-particles i {
    animation: none;
  }
  .release-platform,
  .release-platform img {
    transition: none;
  }
  .release-platform::before {
    display: none;
  }
  .release-platform:hover img {
    transform: none;
  }
}

.release-arrival-particles {
  z-index: 1;
}
.release-app-backplate {
  z-index: 0;
}
.release-app-glass {
  z-index: 2;
}
.release-wordmark {
  z-index: 3;
}
@media (max-width: 360px) {
  .release-arrival-particles {
    --arrival-scale: 0.7;
  }
}

/* Small, intentional interactions: brand cup, typing, and coffee particle taps. */
.feed-cups-counter .cofine-cup-icon {
  position: relative;
  width: 27px;
  height: 27px;
  overflow: hidden;
}
.cofine-cup-icon img {
  display: block;
  width: 81px;
  height: 27px;
  max-width: none;
}
.hero-title .hero-typewriter {
  position: relative;
  display: inline-block;
}
.hero .hero-title {
  width: 100%;
  min-width: 0;
  text-align: left;
}
.hero-title .scramble-text {
  position: relative;
  display: block;
}
.scramble-text-space {
  visibility: hidden;
}
.scramble-text-ink {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  overflow: clip;
}
.hero-typewriter-space {
  visibility: hidden;
}
.hero-typewriter-ink {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}
.hero-title .hero-typewriter-caret {
  display: inline-block;
  width: 0.035em;
  height: 0.77em;
  margin-left: 0.035em;
  background: currentColor;
  vertical-align: -0.015em;
  animation: hero-caret-blink 0.65s steps(1) infinite;
}
@keyframes hero-caret-blink {
  50% {
    opacity: 0;
  }
}
.release-app-glass {
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.release-app-glass:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-typewriter-caret {
    animation: none;
  }
}

/* Quiet project notice below all footer columns and the existing platform note. */
.footer-affiliation-note {
  margin: 8px 0 0;
  max-width: none;
  color: #b2b3ad;
  font-size: 11px;
  line-height: 1.6;
}

.release-arrival-particles.is-click-burst {
  z-index: 4;
}

.has-arrived button.release-app-glass {
  animation: none;
}

/* One footer tone continues into the browser's overscroll surface. */
:root {
  --footer-surface: #1d1f1e;
}
html {
  background-color: var(--footer-surface);
}
.faq-simple,
.footer {
  background: var(--footer-surface);
}
.cofine-ribbon .organization-mark,
[data-theme="dark"] .cofine-ribbon .organization-mark {
  color: #464842;
  opacity: 1;
}
.cofine-ribbon .organization-mark .organization-logo-viewport > img,
[data-theme="dark"]
  .cofine-ribbon
  .organization-mark
  .organization-logo-viewport
  > img {
  filter: var(--ribbon-ink-filter);
  opacity: 1;
}
.feed-cups-counter .cofine-cup-icon {
  width: 31px;
  height: 25px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.cofine-cup-icon img {
  width: 31px;
  height: auto;
  object-fit: contain;
  filter: none;
}
.hero-typewriter-space::after {
  content: "";
  display: inline-block;
  width: 0.1em;
}
.faq-heading-row a {
  padding-block: 8px;
}
.faq-heading-row a:hover {
  color: #fff;
}
.faq-heading-row a svg {
  flex-shrink: 0;
}
.wave-member-invite.invite-editorial {
  margin-top: 36px;
  padding-top: 32px;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  background: none;
  grid-template-columns: 1fr 1.15fr;
  gap: 32px;
  overflow: visible;
}
.wave-member-invite .invite-story {
  padding: 0;
  background: none;
}
.wave-member-invite .invite-story .eyebrow {
  color: var(--accent-color);
  margin-bottom: 16px;
}
.wave-member-invite .invite-story h3 {
  margin-bottom: 16px;
}
.wave-member-invite .invite-story p {
  font-size: 13px;
  margin-bottom: 22px;
}
.wave-member-invite .invite-rewards {
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-surface);
}
.invite-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  max-width: 100%;
  padding: 14px 20px;
  border: 1px solid #ffffff45;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    var(--action-highlight),
    var(--action-bg)
  );
  color: var(--action-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: inset 0 1px 1px #ffffff4a;
  transition: background-color 0.2s;
}
.invite-primary-button svg {
  flex-shrink: 0;
}
.invite-primary-button:hover {
  background: var(--action-hover);
}
.invite-primary-button:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .wave-member-invite.invite-editorial {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 26px;
    padding-top: 26px;
  }
  .invite-primary-button {
    width: 100%;
  }
}

/* Each tap owns a short-lived particle layer; previous bursts keep running. */
.release-arrival-particles.is-click-burst i {
  animation: release-coffee-burst 1.05s var(--arrival-delay)
    cubic-bezier(0.12, 0.65, 0.25, 1) both;
}
.feed-cups-counter .cofine-cup-icon {
  width: 28px;
  height: 23px;
}
.cofine-cup-icon img {
  width: 28px;
}

/* A verified address becomes a quiet read-only summary within the form. */
.email-access-shell.email-access-member,
.email-access-shell.email-access-member:focus-within {
  border-color: var(--border-subtle);
  background: var(--bg-surface-soft);
  box-shadow: inset 0 1px 0 #ffffff45;
}
.email-verified-org {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 110px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.email-verified-org svg {
  flex: 0 0 auto;
}
.email-verified-org > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-verified-address {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 16px;
}
.email-verified-local {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-verified-domain {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent-color);
  font-weight: 700;
}
.email-input-area .email-verified-native-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.cofine-ribbon .organization-mark-2gis .organization-logo-viewport > img,
[data-theme="dark"]
  .cofine-ribbon
  .organization-mark-2gis
  .organization-logo-viewport
  > img {
  filter: var(--ribbon-alpha-filter);
}
/* The referral action keeps its geometry and orange surface in every state. */
.invite-primary-button {
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.invite-primary-button:hover {
  background: linear-gradient(
    135deg,
    var(--action-highlight),
    var(--action-bg)
  );
  border-color: #ffffff75;
  box-shadow:
    inset 0 1px 1px #ffffff4a,
    0 4px 12px #0000000a;
  transform: none;
}
.invite-button-label {
  display: grid;
  min-width: 0;
}
.invite-button-label > span {
  grid-area: 1 / 1;
  align-self: center;
}
.invite-button-label > span[aria-hidden="true"] {
  visibility: hidden;
}
/* Rewards use only a pair of fading hairlines instead of nested cards. */
.wave-member-invite .invite-rewards {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.wave-member-invite .invite-primary-reward,
.wave-member-invite .invite-secondary-rewards > div {
  position: relative;
  border: 0;
  background: transparent;
}
.wave-member-invite .invite-primary-reward::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--border-subtle), transparent);
  pointer-events: none;
}
.wave-member-invite .invite-secondary-rewards > div + div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border-subtle),
    transparent
  );
  pointer-events: none;
}
@media (max-width: 1180px) {
  .wave-member-invite .invite-primary-reward::after {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--border-subtle),
      transparent
    );
  }
  .wave-member-invite .invite-secondary-rewards > div + div::before {
    top: 10px;
    bottom: 10px;
    left: -11px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, var(--border-subtle), transparent);
  }
}
@media (max-width: 768px) {
  .email-access-member {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }
  .email-access-member .email-input-area {
    grid-column: 2 / -1;
  }
  .email-access-member .email-verified-org {
    grid-column: 1 / 3;
    grid-row: 2;
    max-width: 100%;
    padding-left: 3px;
  }
  .email-access-member .email-access-submit {
    grid-column: 3;
    grid-row: 2;
    width: auto;
    padding-inline: 16px;
  }
  .wave-member-invite .invite-story h3 {
    font-size: 28px;
    letter-spacing: -0.04em;
  }
}

/* Mobile hero: one left edge, one field surface, one separate primary action. */
@media (max-width: 768px) {
  .hero .hero-content {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }
  .hero .hero-eyebrow {
    margin-inline: 0;
    justify-content: flex-start;
    align-self: flex-start;
    margin-bottom: 22px;
  }
  .hero .hero-title {
    font-size: clamp(38px, 10vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 22px;
  }
  .hero .hero-subheading {
    font-size: 13px;
    line-height: 1.65;
    margin: 0 0 24px;
  }
  .hero .hero-action-container {
    width: 100%;
    max-width: none;
  }
  :is(.hero, .wave-access) .email-access-shell,
  :is(.hero, .wave-access) .email-access-shell:focus-within,
  :is(.hero, .wave-access) .email-access-shell.has-email-error,
  :is(.hero, .wave-access) .email-access-shell.email-access-member {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: 56px 50px;
    gap: 10px 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  :is(.hero, .wave-access) .email-access-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: -1;
    border: 1px solid var(--border-subtle);
    border-radius: 17px;
    background: var(--bg-surface);
    box-shadow: 0 2px 8px #00000003;
    pointer-events: none;
    transition:
      border-color 0.2s,
      box-shadow 0.2s;
  }
  :is(.hero, .wave-access) .email-access-shell:focus-within::before {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color-soft);
  }
  :is(.hero, .wave-access) .email-access-shell.has-email-error::before {
    border-color: #d45b48;
    box-shadow: 0 0 0 3px #d45b4810;
  }
  :is(.hero, .wave-access) .email-access-icon {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    margin: 0;
  }
  :is(.hero, .wave-access) .email-input-area {
    grid-column: 2 / -1;
    grid-row: 1;
    width: 100%;
    height: 56px;
    font-size: 16px;
  }
  :is(.hero, .wave-access) .email-input-area:not(.is-verified) .email-access-input {
    height: 56px;
    min-height: 56px;
    padding: 14px 16px 14px 0;
  }
  :is(.hero, .wave-access) .email-access-input::placeholder {
    font-size: 15px;
  }
  :is(.hero, .wave-access) .email-access-submit,
  :is(.hero, .wave-access) .email-access-submit.is-loading {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding-inline: 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
  }
  .hero .hero-form-meta {
    margin: 12px 0 0;
    padding: 0;
    min-height: 0;
    text-align: left;
  }
  .hero .hero-security-assurance {
    text-align: left;
    line-height: 1.6;
  }
  :is(.hero, .wave-access) .email-access-shell.email-access-member {
    grid-template-rows: 48px auto;
    row-gap: 0;
  }
  :is(.hero, .wave-access) .email-access-shell.email-access-member.has-verified-org {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }
  :is(.hero, .wave-access) .email-access-member::before,
  :is(.hero, .wave-access) .email-access-member:focus-within::before {
    height: 48px;
    border-color: var(--border-subtle);
    background: var(--bg-surface-soft);
    box-shadow: none;
  }
  :is(.hero, .wave-access) .email-access-member .email-input-area,
  :is(.hero, .wave-access) .email-verified-address {
    height: 48px;
  }
  :is(.hero, .wave-access) .email-access-member .email-input-area {
    grid-column: 2;
  }
  :is(.hero, .wave-access) .email-verified-address {
    padding-right: 16px;
  }
  :is(.hero, .wave-access) .email-access-member .email-verified-org {
    grid-column: 3;
    grid-row: 1;
    max-width: min(110px, 27vw);
    margin-right: 16px;
    align-self: center;
    padding-left: 0;
    line-height: 20px;
  }
  :is(.hero, .wave-access) .email-access-member .email-access-submit {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 64px;
  }
}

/* Quiet verified state and slightly larger desktop navigation. */
.email-verified-domain {
  opacity: 0.56;
}
.email-verified-org {
  gap: 3px;
  font-size: 12px;
}
.email-access-submit .my-card-arrow {
  flex-shrink: 0;
}
.feed-cups-counter .cofine-cup-icon {
  width: 18px;
  height: 14px;
}
.cofine-cup-icon img {
  width: auto;
  height: 12px;
}
@media (min-width: 769px) {
  .nav-link {
    font-size: 14px;
  }
}

/* The club and footer share one neutral charcoal, with monochrome material detail. */
:root {
  --footer-surface: #1c1b19;
}
.vip-club-section {
  background: var(--footer-surface);
  border-color: #ffffff0a;
}
.vip-club-section::before {
  opacity: 0.045;
  filter: grayscale(1);
}
.vip-club-section::after {
  z-index: -2;
  background-image:
    linear-gradient(#ffffff04 1px, transparent 1px),
    linear-gradient(90deg, #ffffff04 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 65% 80% at 50% 45%, #000, transparent);
  -webkit-mask-image: radial-gradient(
    ellipse 65% 80% at 50% 45%,
    #000,
    transparent
  );
}
.vip-card-white-glow {
  background: radial-gradient(ellipse at center, #ffffff20, transparent 68%);
  opacity: 0.32;
}
.vip-scene-details {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(650px, 84vw);
  height: 320px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.vip-scene-orbit {
  position: absolute;
  inset: 25px 0;
  border: 1px solid #ffffff0c;
  border-radius: 50%;
  transform: rotate(-12deg) scale(0.95);
  opacity: 0;
  transition:
    opacity 1.2s ease,
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-revealed .vip-scene-orbit {
  opacity: 1;
  transform: rotate(-12deg) scale(1);
}
.vip-scene-details i {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: #ffffff26;
  border-style: solid;
  border-width: 0;
}
.vip-scene-details i:nth-of-type(1) {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}
.vip-scene-details i:nth-of-type(2) {
  top: 0;
  right: 0;
  border-top-width: 1px;
  border-right-width: 1px;
}
.vip-scene-details i:nth-of-type(3) {
  bottom: 0;
  left: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
}
.vip-scene-details i:nth-of-type(4) {
  bottom: 0;
  right: 0;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
@media (max-width: 768px) {
  .vip-scene-details {
    width: calc(100vw - 30px);
    height: 230px;
  }
  .vip-scene-orbit {
    inset: 30px 0;
  }
  .vip-scene-details i {
    width: 10px;
    height: 10px;
  }
}

/* Obsidian backplate with small translucent, silver glass fragments. */
.release-app-backplate {
  background: linear-gradient(145deg, #343532, #10110f 80%);
  box-shadow:
    0 15px 42px #14151226,
    inset 0 1px 0 #ffffff1a;
}
.release-app-shadow {
  background: #14151224;
}
.release-arrival-particles i {
  background: linear-gradient(145deg, #ffffffc9, #93968e9c);
  border: 1px solid #72766f5c;
  box-shadow: inset 0 1px 0 #ffffffc9;
  clip-path: polygon(0 14%, 82% 0, 100% 78%, 18% 100%);
}
.release-arrival-particles i:nth-child(3n) {
  background: #b7bbb0;
  border-color: #7f847b70;
  clip-path: none;
}
.release-arrival-particles i:nth-child(4n) {
  background: #ffffffb8;
  border-color: #7e837b70;
}
.faq-section.faq-simple,
.footer {
  background: var(--footer-surface);
}
.faq-simple::before,
.faq-simple::after {
  display: none;
}
.faq-simple .faq-item,
.faq-simple .faq-item.active {
  background: transparent;
  border-color: #ffffff14;
  box-shadow: none;
}
.faq-simple .faq-question-btn,
.faq-simple .faq-item.active .faq-question-btn {
  background: transparent;
}
.faq-simple .faq-toggle,
.faq-simple .faq-item.active .faq-toggle {
  background: transparent;
  color: #ecebe5;
}
@media (prefers-reduced-motion: reduce) {
  .vip-scene-orbit {
    opacity: 1;
    transition: none;
    transform: rotate(-12deg);
  }
}

/* Plain promises, a team statement, and an ingredient-label nod. */
.circle-profile-quote {
  position: relative;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #ffffff14;
}
.circle-benefit .circle-profile-quote p {
  min-height: 0;
  margin: 0 0 10px;
  color: #eeece7;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.circle-profile-quote cite {
  color: #aaa69e;
  font-size: 10px;
  font-style: normal;
}
.circle-simple-badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 9px 7px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #ffffff14;
  list-style: none;
}
.circle-simple-badges li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px dashed #ffffff30;
  border-radius: 7px;
  color: #d8d4ce;
  font-size: 10px;
  line-height: 1.4;
}
.circle-simple-badges li:first-child {
  color: #e7a48f;
  border-color: #e7a48f55;
}
.circle-simple-badges li > span {
  opacity: 0.6;
  font-size: 10px;
}
:root:not([data-theme="dark"]) .email-domain-shimmer {
  background-image: linear-gradient(100deg, #eb7844, #ed9465, #e97c4d, #e98a59);
}
@media (max-width: 768px) {
  .hero .hero-content {
    align-items: flex-start;
  }
  .hero .hero-subheading {
    width: 100%;
    max-width: none;
    align-self: stretch;
    text-align: left;
    margin-inline: 0;
  }
}

/* Larger referral benefits, readable confirmation, and the brand coffee rim. */
.wave-member-invite .invite-reward-label > span:last-child {
  font-size: 12px;
  line-height: 1.5;
}
.wave-member-invite .invite-secondary-rewards strong {
  font-size: 14px;
}
.wave-member-invite .invite-secondary-rewards small {
  font-size: 12px;
}
.vip-exclusive-share-btn {
  max-width: 100%;
}
.vip-exclusive-share-btn .vip-share-icon {
  flex-shrink: 0;
}
.vip-share-text {
  min-width: 0;
}
.release-app-backplate {
  background: linear-gradient(145deg, #653b22, #3c1b09 80%);
  box-shadow:
    0 15px 42px #3c1b0926,
    inset 0 1px 1px #ffffff16;
}
@media (max-width: 768px) {
  .vip-exclusive-share-btn {
    padding-inline: 20px;
    font-size: 13px;
    line-height: 1.5;
  }
  .vip-share-button-wrapper {
    max-width: 100%;
  }
}

.accepted-request-notice {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 10000;
  width: min(480px, calc(100% - 32px));
  padding: 20px;
  border: 1px solid #ffffff50;
  border-radius: 20px;
  background: #272622ec;
  color: white;
  backdrop-filter: blur(20px);
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 13px;
}
.accepted-request-notice button {
  border: 1px solid #ffffff40;
  background: #ffffff15;
  color: white;
  border-radius: 10px;
  padding: 9px 12px;
}

/* A saved application remains useful after the first wave is full. */
.waitlist-receipt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid #68625b24;
  border-radius: 24px;
  background: #ffffff68;
  color: var(--text-primary, #383632);
}
.waitlist-receipt > svg {
  flex: 0 0 auto;
  color: var(--accent-color);
  margin-top: 3px;
}
.waitlist-receipt h3 {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.3;
  margin: 0 0 8px;
}
.waitlist-receipt p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.72;
}
[data-theme="dark"] .waitlist-receipt {
  background: #ffffff0a;
  border-color: #ffffff20;
}
@media (max-width: 480px) {
  .waitlist-receipt {
    padding: 20px;
    gap: 12px;
    text-align: left;
  }
}

/* Email recovery: retry first, invitation second, updates as a quiet text link. */
.glass-error-dialog .dialog-next-step {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}
.glass-error-dialog .dialog-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid #88888838;
  border-radius: 14px;
  background: #8888880a;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
}
.glass-error-dialog .dialog-secondary:hover {
  background: #88888818;
}
.glass-error-dialog .dialog-secondary:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}
.glass-error-dialog .dialog-tg-link {
  color: var(--text-secondary);
  text-underline-offset: 4px;
}
.glass-error-dialog .dialog-tg-link:hover {
  text-decoration: underline;
}

/* Keep the two document links compact with distinct click targets. */
.footer-col-legal .footer-links {
  gap: 2px;
}
.footer-col-legal .footer-link {
  display: inline-block;
  font-size: 12px;
  line-height: 1.65;
  padding-block: 2px;
}
.faq-updates-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 14px;
}
.faq-updates-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  color: #f4eee2;
  text-decoration: underline;
  text-decoration-color: #f4eee24d;
  text-underline-offset: 5px;
  font-size: 14px;
}
.faq-updates-links a:hover { text-decoration-color: currentColor; }
.faq-updates-links a:focus-visible { outline: 2px solid #f4eee2; outline-offset: 5px; }
.landing-details-pending { min-height: 3000px; }

/* Lead with the total referral reward, then explain the per-friend accrual. */
.wave-member-invite .invite-premium-headline {
  margin: 28px 0 18px;
  max-width: 330px;
  color: var(--text-primary);
  font-size: clamp(34px, 3.3vw, 46px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.wave-member-invite .invite-primary-reward > .invite-referral-rate {
  max-width: 330px;
  font-size: 14px;
  line-height: 1.65;
}
@media (max-width: 480px) {
  .wave-member-invite .invite-premium-headline {
    margin-top: 22px;
    font-size: 36px;
  }
}
.cookie-banner-wrap {
  left: 16px; right: auto; bottom: max(16px, env(safe-area-inset-bottom));
  transform: none;
  width: min(460px, calc(100% - 32px)); max-width: 460px;
  animation: analytics-notice-in .2s ease-out both;
}
@keyframes analytics-notice-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cookie-banner-card.cookie-analytics-card {
  position: relative; display: flex; flex-direction: row; align-items: center;
  gap: 12px; padding: 10px 12px;
  border-radius: 16px; background: #1a1918;
  color: #fff;
  border: 1px solid #ffffff1f;
  box-shadow: 0 8px 32px #00000029, 0 2px 6px #00000014,
    inset 0 1px 0 #ffffff14;
}
@supports ((backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px))) {
  .cookie-banner-card.cookie-analytics-card {
    background: linear-gradient(135deg, #ffffff0a, #ffffff00 65%), #1a1918eb;
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
  }
}
.cookie-analytics-card .cookie-banner-msg { margin: 0; color: #ffffffd9; font-size: 10px; line-height: 1.5; }
.cookie-analytics-card .cookie-banner-actions { flex: 0 0 auto; margin: 0; }
.cookie-notice-ok {
  display: grid; place-items: center; min-width: 52px; min-height: 34px;
  padding: 7px 15px; border: 1px solid #ffffff1a; border-radius: 9px;
  background: #ff6b24; color: #fff;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  box-shadow: 0 2px 8px #ff6b2426, inset 0 1px 0 #ffffff24;
  transition: background .15s ease, transform .15s ease;
}
.cookie-notice-ok:hover { background: #f45e18; }
.cookie-notice-ok:active { transform: scale(.96); }
.cookie-policy-link { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cookie-policy-link:focus-visible,
.cookie-notice-ok:focus-visible { outline: 2px solid #ff6b24; outline-offset: 3px; }
@media (prefers-reduced-transparency: reduce) {
  .cookie-banner-card.cookie-analytics-card {
    background: #1a1918;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner-wrap { animation: none; }
  .cookie-notice-ok { transition: none; }
}