/*============================================================================
  #Viral2Value Dark Theme Overrides
  #Matches React app color palette and design system
==============================================================================*/
/*============================================================================
  #CSS Custom Properties
==============================================================================*/
:root {
  --v2v-brand-red: #FC0304;
  --v2v-brand-red-dark: #DF0503;
  --v2v-accent-orange: #FF9F43;
  --v2v-accent-cyan: #00D4FF;
  --v2v-success: #22c55e;
  --v2v-bg-black: #000000;
  --v2v-bg-darkest: #080808;
  --v2v-bg-darker: #0A0A0A;
  --v2v-bg-dark: #111111;
  --v2v-bg-card: #1A1A1A;
  --v2v-border: #2A2A2A;
  --v2v-border-hover: #3A3A3A;
  --v2v-text-primary: #FFFFFF;
  --v2v-text-secondary: #E0E0E0;
  --v2v-text-muted: #D0D0D0;
  --v2v-text-subtle: #B0B0B0;
  --v2v-text-placeholder: #808080;
  --v2v-radius: 10px;
  --v2v-radius-sm: 6px;
  --v2v-radius-lg: 14px;
  --v2v-radius-xl: 18px; }

/*============================================================================
  #Handwritten Font Class (Caveat)
==============================================================================*/
.font-handwritten,
.handwritten {
  font-family: 'Caveat', cursive !important; }

/*============================================================================
  #Global Dark Theme Base
==============================================================================*/
html,
body {
  background: var(--v2v-bg-black) !important;
  color: var(--v2v-text-subtle) !important; }

.container--main {
  background: var(--v2v-bg-black) !important; }

/*============================================================================
  #Typography - Dark Theme
==============================================================================*/
h1, h2, h3, h4, h5, h6 {
  color: var(--v2v-text-primary) !important;
  font-weight: 700; }

p, li, span {
  color: var(--v2v-text-subtle); }

a {
  color: var(--v2v-brand-red);
  transition: all 0.3s ease; }
  a:hover {
    color: var(--v2v-brand-red-dark);
    text-decoration: none; }

blockquote {
  border-left-color: var(--v2v-brand-red);
  color: var(--v2v-text-muted); }

pre {
  background: var(--v2v-bg-card);
  border-color: var(--v2v-border);
  color: var(--v2v-text-secondary); }

/*============================================================================
  #Sections - Dark Backgrounds
==============================================================================*/
.section--light {
  background-color: var(--v2v-bg-dark);
  color: var(--v2v-text-subtle); }
  .section--light h1, .section--light h2, .section--light h3, .section--light h4, .section--light h5, .section--light h6 {
    color: var(--v2v-text-primary) !important; }

.section--dark {
  color: var(--v2v-text-primary); }

.section--global {
  background: var(--v2v-bg-black) !important; }

.background-image {
  background-color: var(--v2v-bg-dark) !important; }

/*============================================================================
  #Header - Dark Theme
==============================================================================*/
.header {
  background: var(--v2v-bg-black) !important;
  border-bottom: 1px solid var(--v2v-border);
  transition: all 0.3s ease; }
  .header .header-menu a {
    transition: color 0.3s ease; }
    .header .header-menu a:hover {
      color: var(--v2v-brand-red) !important; }
  .header .logo--text {
    letter-spacing: 2px; }

.announcement {
  background: var(--v2v-brand-red) !important;
  color: #fff !important; }

/*============================================================================
  #Buttons - Brand Red with Glow
==============================================================================*/
.btn {
  border-radius: var(--v2v-radius-sm);
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden; }
  .btn--solid {
    background-color: var(--v2v-brand-red) !important;
    border-color: var(--v2v-brand-red) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(252, 3, 4, 0.2); }
    .btn--solid:hover {
      background-color: var(--v2v-brand-red-dark) !important;
      border-color: var(--v2v-brand-red-dark) !important;
      box-shadow: 0 0 20px rgba(252, 3, 4, 0.4);
      transform: translateY(-2px);
      filter: brightness(100%) !important; }
    .btn--solid:active {
      transform: translateY(0) scale(0.98); }
  .btn--outline {
    border-color: var(--v2v-brand-red) !important;
    color: var(--v2v-brand-red) !important;
    background: transparent !important; }
    .btn--outline:hover {
      background: rgba(252, 3, 4, 0.1) !important;
      box-shadow: 0 0 15px rgba(252, 3, 4, 0.3);
      transform: translateY(-2px);
      filter: brightness(100%) !important; }
    .btn--outline:active {
      transform: translateY(0) scale(0.98); }

.btn-form {
  background-color: var(--v2v-brand-red) !important;
  border-color: var(--v2v-brand-red) !important;
  color: #fff !important;
  border-radius: var(--v2v-radius-sm); }
  .btn-form:hover {
    background-color: var(--v2v-brand-red-dark) !important;
    box-shadow: 0 0 15px rgba(252, 3, 4, 0.4); }

/*============================================================================
  #Cards - Dark Glass Style
==============================================================================*/
.card {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border) !important;
  border-radius: var(--v2v-radius-lg) !important;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease; }
  .card:hover {
    border-color: var(--v2v-border-hover) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    transform: translateY(-5px); }
  .card--title {
    color: var(--v2v-text-primary) !important; }
  .card--description {
    color: var(--v2v-text-subtle) !important; }
  .card--price {
    color: var(--v2v-text-primary) !important; }
  .card--body {
    background: var(--v2v-bg-card); }

/*============================================================================
  #Panels - Dark Theme
==============================================================================*/
.panel {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border);
  border-radius: var(--v2v-radius); }
  .panel--dark {
    background: var(--v2v-bg-dark) !important; }
  .panel--light {
    background: var(--v2v-bg-card) !important;
    color: var(--v2v-text-subtle) !important; }
    .panel--light h1, .panel--light h2, .panel--light h3, .panel--light h4, .panel--light h5, .panel--light h6, .panel--light a {
      color: var(--v2v-text-primary) !important; }
  .panel__title {
    color: var(--v2v-text-primary) !important; }
  .panel__copy {
    color: var(--v2v-text-subtle) !important; }

.panel--inline {
  border: 1px solid var(--v2v-border);
  border-radius: var(--v2v-radius); }

/*============================================================================
  #Forms - Dark Input Styling
==============================================================================*/
form input.form-control:not([type=checkbox]):not([type=radio]) {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border) !important;
  color: var(--v2v-text-primary) !important;
  border-radius: var(--v2v-radius-sm) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease; }
  form input.form-control:not([type=checkbox]):not([type=radio])::placeholder {
    color: var(--v2v-text-placeholder) !important; }
  form input.form-control:not([type=checkbox]):not([type=radio]):focus {
    border-color: var(--v2v-brand-red) !important;
    box-shadow: 0 0 0 3px rgba(252, 3, 4, 0.15) !important;
    outline: none; }
form select.form-control {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border) !important;
  color: var(--v2v-text-primary) !important;
  border-radius: var(--v2v-radius-sm) !important; }
  form select.form-control:focus {
    border-color: var(--v2v-brand-red) !important;
    box-shadow: 0 0 0 3px rgba(252, 3, 4, 0.15) !important; }
form textarea {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border) !important;
  color: var(--v2v-text-primary) !important;
  border-radius: var(--v2v-radius-sm) !important; }
  form textarea:focus {
    border-color: var(--v2v-brand-red) !important;
    box-shadow: 0 0 0 3px rgba(252, 3, 4, 0.15) !important; }
form .form-control {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border) !important;
  color: var(--v2v-text-primary) !important; }
  form .form-control::placeholder {
    color: var(--v2v-text-placeholder) !important; }
  form .form-control:focus {
    border-color: var(--v2v-brand-red) !important;
    box-shadow: 0 0 0 3px rgba(252, 3, 4, 0.15) !important; }
form label {
  color: var(--v2v-text-secondary); }

/*============================================================================
  #Footer - Dark Theme
==============================================================================*/
.footer {
  background: var(--v2v-bg-darkest) !important;
  border-top: 1px solid var(--v2v-border);
  padding: 30px 0; }
  .footer__copyright {
    color: var(--v2v-text-subtle) !important; }
  .footer__menu-item, .footer__powered-by a {
    color: var(--v2v-text-subtle) !important;
    transition: color 0.3s ease; }
    .footer__menu-item:hover, .footer__powered-by a:hover {
      color: var(--v2v-brand-red) !important;
      opacity: 1 !important; }

.footer--light {
  color: var(--v2v-text-subtle) !important; }
  .footer--light a {
    color: var(--v2v-text-subtle) !important; }
    .footer--light a:hover {
      color: var(--v2v-brand-red) !important; }

.footer--dark a:hover {
  color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Hero Section - Enhanced
==============================================================================*/
.section--hero h1 {
  color: var(--v2v-text-primary) !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); }
.section--hero p {
  color: var(--v2v-text-secondary) !important; }

/*============================================================================
  #Feature Section
==============================================================================*/
.section--feature.section--light {
  background: var(--v2v-bg-dark); }
  .section--feature.section--light a {
    color: var(--v2v-text-primary) !important; }
    .section--feature.section--light a:hover {
      color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Testimonials - Dark Theme
==============================================================================*/
.section--testimonial .testimonial__text {
  color: var(--v2v-text-primary);
  font-style: italic; }
.section--testimonial .testimonial__title {
  color: var(--v2v-text-subtle) !important; }
.section--testimonial .slick-dots li button {
  background: var(--v2v-border) !important; }
.section--testimonial .slick-dots li.slick-active button {
  background: var(--v2v-brand-red) !important; }

/*============================================================================
  #CTA Section - Brand Red Emphasis
==============================================================================*/
.section--cta .heading__title {
  color: var(--v2v-text-primary) !important; }
.section--cta .heading__subtitle {
  color: var(--v2v-text-secondary) !important; }

/*============================================================================
  #Pricing Section - Dark Cards
==============================================================================*/
.pricing {
  background: var(--v2v-bg-card);
  border: 1px solid var(--v2v-border);
  border-radius: var(--v2v-radius);
  overflow: hidden;
  transition: all 0.3s ease; }
  .pricing:hover {
    border-color: var(--v2v-border-hover);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); }
  .pricing__popular {
    background: var(--v2v-brand-red) !important; }
  .pricing__title {
    color: var(--v2v-brand-red) !important; }
  .pricing__price {
    color: var(--v2v-text-primary) !important; }
  .pricing__frequency {
    color: var(--v2v-text-subtle) !important; }
  .pricing__content {
    color: var(--v2v-text-muted); }

/*============================================================================
  #Accordion - Dark Theme
==============================================================================*/
.section--accordion .accordion__item {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border);
  border-radius: var(--v2v-radius-sm);
  transition: all 0.3s ease; }
  .section--accordion .accordion__item:hover {
    border-color: var(--v2v-border-hover); }
.section--accordion .accordion__title {
  color: var(--v2v-text-primary) !important; }
.section--accordion .accordion__body {
  color: var(--v2v-text-muted) !important; }
.section--accordion .accordion__icon:before {
  color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Blog - Dark Theme
==============================================================================*/
.blog__title a {
  color: var(--v2v-text-primary) !important; }
  .blog__title a:hover {
    color: var(--v2v-brand-red) !important; }
.blog__info {
  color: var(--v2v-text-subtle); }
.blog__comment-count {
  color: var(--v2v-brand-red) !important; }

.section--blog_posts .blog_post {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border);
  border-radius: var(--v2v-radius);
  transition: all 0.3s ease; }
  .section--blog_posts .blog_post:hover {
    border-color: var(--v2v-border-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
  .section--blog_posts .blog_post__date {
    color: var(--v2v-text-subtle) !important; }
  .section--blog_posts .blog_post__title {
    color: var(--v2v-text-primary) !important; }

.recent-post__title {
  color: var(--v2v-text-primary) !important; }
  .recent-post__title:hover {
    color: var(--v2v-brand-red) !important; }
.recent-post__date {
  color: var(--v2v-text-subtle); }

/*============================================================================
  #Countdown Timer - Dark Theme
==============================================================================*/
.section--countdown .countdown__amount {
  color: var(--v2v-text-primary); }
.section--countdown .countdown__title {
  color: var(--v2v-text-subtle); }
.section--countdown .countdown--boxed .countdown__amount {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border); }
.section--countdown .countdown--card .countdown__amount {
  background: var(--v2v-bg-card) !important;
  color: var(--v2v-text-primary) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
  .section--countdown .countdown--card .countdown__amount:before {
    background: rgba(255, 255, 255, 0.03); }

/*============================================================================
  #Popups - Dark Theme
==============================================================================*/
.pop {
  background: rgba(0, 0, 0, 0.85) !important; }
  .pop__body {
    background: var(--v2v-bg-dark);
    border: 1px solid var(--v2v-border);
    border-radius: var(--v2v-radius); }
  .pop--light {
    color: var(--v2v-text-secondary) !important; }
    .pop--light h1, .pop--light h2, .pop--light h3, .pop--light h4, .pop--light h5, .pop--light h6 {
      color: var(--v2v-text-primary) !important; }
    .pop--light a {
      color: var(--v2v-text-primary) !important; }

/*============================================================================
  #Progress Bars
==============================================================================*/
.progress-wrapper .progress {
  background: var(--v2v-bg-card);
  border-radius: var(--v2v-radius-sm); }
.progress-wrapper .progress-bar {
  background: var(--v2v-brand-red) !important;
  border-radius: var(--v2v-radius-sm); }
.progress-wrapper .progress-percent {
  color: var(--v2v-text-secondary); }

/*============================================================================
  #Opt-in Sections
==============================================================================*/
.section--opt_in .optin__panel--boxed {
  background: var(--v2v-bg-card);
  border: 1px solid var(--v2v-border); }

.section--opt_in_bar.section--dark .form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--v2v-border) !important; }

/*============================================================================
  #Sales Page - Dark Theme
==============================================================================*/
.section--sales_page .offers .offer {
  border-color: var(--v2v-border) !important;
  border-bottom-color: var(--v2v-border) !important;
  transition: all 0.3s ease; }
  .section--sales_page .offers .offer:first-of-type {
    border-top-color: var(--v2v-border) !important; }
  .section--sales_page .offers .offer:hover {
    background: rgba(252, 3, 4, 0.03); }
  .section--sales_page .offers .offer__radio {
    border-color: var(--v2v-border) !important; }
  .section--sales_page .offers .offer__title {
    color: var(--v2v-text-primary); }
  .section--sales_page .offers .offer__desc {
    color: var(--v2v-text-subtle); }
.section--sales_page .offers input[type="radio"]:checked + label .offer,
.section--sales_page .offers input[type="checkbox"]:checked + label .offer {
  border-color: rgba(252, 3, 4, 0.5) !important;
  background: rgba(252, 3, 4, 0.05) !important; }
  .section--sales_page .offers input[type="radio"]:checked + label .offer__radio-inner,
  .section--sales_page .offers input[type="checkbox"]:checked + label .offer__radio-inner {
    background-color: var(--v2v-brand-red) !important; }
  .section--sales_page .offers input[type="radio"]:checked + label .offer__price,
  .section--sales_page .offers input[type="checkbox"]:checked + label .offer__price {
    color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Authentication Pages - Dark Theme
==============================================================================*/
.auth__wrapper {
  background: var(--v2v-bg-black) !important; }
.auth__box {
  background: var(--v2v-bg-card);
  border: 1px solid var(--v2v-border);
  border-radius: var(--v2v-radius);
  padding: 40px; }
.auth__title {
  color: var(--v2v-text-primary) !important; }
.auth__label {
  color: var(--v2v-text-secondary) !important; }
.auth__btn {
  background: var(--v2v-brand-red) !important;
  border-color: var(--v2v-brand-red) !important;
  color: #fff !important;
  border-radius: var(--v2v-radius-sm);
  transition: all 0.3s ease; }
  .auth__btn:hover {
    background: var(--v2v-brand-red-dark) !important;
    box-shadow: 0 0 20px rgba(252, 3, 4, 0.4); }
.auth__link a {
  color: var(--v2v-brand-red) !important; }
.auth__404--title {
  color: var(--v2v-brand-red) !important; }
.auth__404--text {
  color: var(--v2v-text-muted) !important; }
.auth__thank-you {
  color: var(--v2v-text-primary); }

/*============================================================================
  #Heading Section
==============================================================================*/
.section--heading__title::after {
  background: var(--v2v-brand-red) !important; }

/*============================================================================
  #User Dropdown - Dark Theme
==============================================================================*/
.user__dropdown {
  background: var(--v2v-bg-card) !important;
  border: 1px solid var(--v2v-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important; }
  .user__dropdown a {
    color: var(--v2v-text-secondary) !important;
    transition: color 0.3s ease; }
    .user__dropdown a:hover {
      color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Gallery - Dark Theme
==============================================================================*/
.gallery-image__overlay {
  transition: opacity 0.3s ease; }
.gallery-image__text-container {
  color: #fff; }

/*============================================================================
  #Search - Dark Theme
==============================================================================*/
.search-result {
  border-top-color: var(--v2v-border); }
  .search-result__title {
    color: var(--v2v-text-primary) !important; }

.search__input:not([type=checkbox]):not([type=radio]) {
  color: var(--v2v-text-primary) !important; }

/*============================================================================
  #Pagination - Dark Theme
==============================================================================*/
.pag__link {
  color: var(--v2v-text-primary) !important;
  transition: color 0.3s ease; }
  .pag__link--current {
    color: var(--v2v-brand-red) !important; }
  .pag__link:hover {
    color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Alerts - Dark compatible
==============================================================================*/
.alert {
  border-radius: var(--v2v-radius-sm); }

/*============================================================================
  #Social Icons - Dark Theme
==============================================================================*/
.social-icons__icon {
  transition: all 0.3s ease; }
  .social-icons__icon:hover {
    color: var(--v2v-brand-red) !important;
    transform: translateY(-2px); }

.social__link {
  color: var(--v2v-text-subtle) !important;
  transition: color 0.3s ease; }
  .social__link:hover {
    color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Spacer / Divider
==============================================================================*/
.section--spacer hr {
  border-color: var(--v2v-border); }

/*============================================================================
  #Logo List
==============================================================================*/
.section--logo_list img {
  filter: brightness(0.8) grayscale(0.3);
  transition: filter 0.3s ease; }
  .section--logo_list img:hover {
    filter: brightness(1) grayscale(0); }

/*============================================================================
  #Instructor
==============================================================================*/
.instructor__title {
  color: var(--v2v-brand-red) !important; }
.instructor__name {
  color: var(--v2v-text-primary) !important; }

/*============================================================================
  #Editor Null State
==============================================================================*/
.editor-null {
  background: var(--v2v-bg-card);
  border-color: var(--v2v-border) !important;
  color: var(--v2v-text-placeholder) !important; }

/*============================================================================
  #Scrollbar Styling
==============================================================================*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px; }

::-webkit-scrollbar-track {
  background: var(--v2v-bg-darkest); }

::-webkit-scrollbar-thumb {
  background: var(--v2v-border-hover);
  border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover {
    background: #4A4A4A; }

/*============================================================================
  #Selection Color
==============================================================================*/
::selection {
  background: rgba(252, 3, 4, 0.3);
  color: #fff; }

::-moz-selection {
  background: rgba(252, 3, 4, 0.3);
  color: #fff; }

/*============================================================================
  #Smooth Transitions on All Interactive Elements
==============================================================================*/
a, .btn, .card, .panel, .blog_post, .pricing, .accordion__item,
.social-icons__icon, .footer__menu-item, .header-menu a {
  transition: all 0.3s ease; }

/*============================================================================
  #Showcase Section
==============================================================================*/
.section--showcase .panel {
  border: 1px solid var(--v2v-border); }

/*============================================================================
  #Custom Content Section
==============================================================================*/
.section--custom_content {
  color: var(--v2v-text-subtle); }

/*============================================================================
  #Page Section
==============================================================================*/
.section--page .panel__body {
  background: var(--v2v-bg-card);
  color: var(--v2v-text-subtle); }
.section--page .page__title {
  color: var(--v2v-text-primary) !important; }

/*============================================================================
  #Video Section
==============================================================================*/
.video .overlay {
  background: rgba(0, 0, 0, 0.8); }

/*============================================================================
  #Slideshow Section
==============================================================================*/
.section--slideshow .slick-dots li button {
  background: var(--v2v-border) !important; }
.section--slideshow .slick-dots li.slick-active button {
  background: var(--v2v-brand-red) !important; }

/*============================================================================
  #Sales Pages Store
==============================================================================*/
.section--sales_pages__tags a {
  color: var(--v2v-text-secondary) !important;
  transition: color 0.3s ease; }
  .section--sales_pages__tags a:hover {
    color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Link List Section
==============================================================================*/
.section--link_list.section--light a, .section--link_list.section--dark a {
  transition: color 0.3s ease; }
  .section--link_list.section--light a:hover, .section--link_list.section--dark a:hover {
    color: var(--v2v-brand-red) !important; }

/*============================================================================
  #Hero V2V Section
==============================================================================*/
.hero-v2v {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 80px;
  background: var(--v2v-bg-black);
  overflow: hidden; }
  .hero-v2v__container {
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 30px;
    width: 100%; }
  .hero-v2v__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center; }
  .hero-v2v__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease; }
    .hero-v2v__content.is-visible {
      opacity: 1;
      transform: translateX(0); }
  .hero-v2v__title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--v2v-text-primary) !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0; }
  .hero-v2v__highlight {
    display: block;
    color: var(--v2v-brand-red) !important; }
  .hero-v2v__subtitle {
    font-size: 1.125rem;
    color: var(--v2v-text-muted);
    max-width: 500px;
    line-height: 1.6;
    margin: 0; }
  .hero-v2v__cta-desktop {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 16px; }
    .hero-v2v__cta-desktop .btn {
      position: relative;
      overflow: visible; }
      .hero-v2v__cta-desktop .btn--solid {
        box-shadow: 0 4px 20px rgba(252, 3, 4, 0.3); }
        .hero-v2v__cta-desktop .btn--solid:hover {
          box-shadow: 0 0 30px rgba(252, 3, 4, 0.5); }
  .hero-v2v__video-wrapper {
    position: relative;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease 0.2s; }
    .hero-v2v__video-wrapper.is-visible {
      opacity: 1;
      transform: scale(1); }
  .hero-v2v__video-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--v2v-bg-card); }
  .hero-v2v__video {
    width: 100%;
    height: 100%;
    border: none; }
  .hero-v2v__video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2v-bg-card);
    color: var(--v2v-text-placeholder);
    font-size: 14px; }
  .hero-v2v__stats {
    position: relative;
    width: 100%;
    margin-top: 48px;
    background: var(--v2v-bg-darker);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v2v-border);
    padding: 24px 0;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease 0.8s; }
    .hero-v2v__stats.is-visible {
      opacity: 1;
      transform: translateY(0); }
  .hero-v2v__stats-container {
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 30px; }
  .hero-v2v__stats-grid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px; }
  .hero-v2v__stat {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: center; }
  .hero-v2v__stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--v2v-brand-red); }
  .hero-v2v__stat-label {
    font-size: 1.125rem;
    color: var(--v2v-text-placeholder); }
  .hero-v2v__stat-divider {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v2v-border); }

@media (max-width: 991px) {
  .hero-v2v {
    min-height: auto;
    padding: 100px 0 60px; }
    .hero-v2v__grid {
      grid-template-columns: 1fr;
      gap: 32px; }
    .hero-v2v__title {
      font-size: 2.5rem;
      text-align: center; }
    .hero-v2v__subtitle {
      text-align: center;
      margin: 0 auto; }
    .hero-v2v__cta-desktop {
      justify-content: center; }
    .hero-v2v__stats-grid {
      gap: 16px; }
    .hero-v2v__stat-value, .hero-v2v__stat-label {
      font-size: 0.875rem; } }
@media (max-width: 544px) {
  .hero-v2v__title {
    font-size: 2rem; }
  .hero-v2v__stats-grid {
    gap: 12px; }
  .hero-v2v__stat-value, .hero-v2v__stat-label {
    font-size: 0.75rem; }
  .hero-v2v__stat-divider {
    width: 4px;
    height: 4px; } }
/*============================================================================
  #Social Proof Section
==============================================================================*/
.social-proof {
  background: var(--v2v-bg-black);
  padding: 48px 0;
  border-bottom: 1px solid var(--v2v-border);
  overflow: hidden;
  position: relative; }
  .social-proof__header {
    text-align: center;
    margin-bottom: 48px;
    padding: 0 16px; }
  .social-proof__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--v2v-text-primary) !important;
    margin: 0; }
  .social-proof__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 128px;
    z-index: 10;
    pointer-events: none; }
    .social-proof__fade--left {
      left: 0;
      background: linear-gradient(to right, var(--v2v-bg-black), transparent); }
    .social-proof__fade--right {
      right: 0;
      background: linear-gradient(to left, var(--v2v-bg-black), transparent); }
  .social-proof__marquee {
    overflow: hidden;
    width: 100%; }
  .social-proof__track {
    display: flex;
    gap: 48px;
    padding: 0 24px;
    width: max-content;
    animation: social-proof-scroll 50s linear infinite; }
  .social-proof__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    flex-shrink: 0;
    width: 140px; }
  .social-proof__avatar-wrapper {
    position: relative; }
  .social-proof__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--v2v-border);
    background: var(--v2v-bg-card);
    transition: border-color 0.3s ease; }
    .social-proof__avatar:hover {
      border-color: var(--v2v-brand-red); }
  .social-proof__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0; }
  .social-proof__avatar-placeholder {
    width: 100%;
    height: 100%;
    background: var(--v2v-bg-card); }
  .social-proof__platform-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: var(--v2v-bg-card);
    border-radius: 50%;
    padding: 4px;
    border: 1px solid var(--v2v-border);
    display: flex;
    align-items: center;
    justify-content: center; }
  .social-proof__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; }
  .social-proof__username {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--v2v-text-primary) !important;
    margin: 0;
    white-space: nowrap; }
  .social-proof__comment {
    font-size: 0.75rem;
    color: var(--v2v-text-muted);
    line-height: 1.4;
    margin: 0; }

@keyframes social-proof-scroll {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); } }
@media (max-width: 767px) {
  .social-proof {
    padding: 32px 0; }
    .social-proof__header {
      margin-bottom: 32px; }
    .social-proof__title {
      font-size: 1.5rem; }
    .social-proof__fade {
      width: 64px; }
    .social-proof__track {
      gap: 24px; }
    .social-proof__card {
      width: 100px; }
    .social-proof__avatar {
      width: 48px;
      height: 48px; }
    .social-proof__platform-badge svg {
      width: 12px;
      height: 12px; }
    .social-proof__username {
      font-size: 0.75rem; }
    .social-proof__comment {
      font-size: 0.625rem; } }
/*============================================================================
  #Founder Story Section
==============================================================================*/
.founder-story {
  background: var(--v2v-bg-black);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--v2v-bg-card); }
  .founder-story__container {
    max-width: 96rem;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 10; }
  .founder-story__header {
    text-align: center;
    margin-bottom: 64px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease; }
    .founder-story__header.is-visible {
      opacity: 1;
      transform: translateY(0); }
  .founder-story__label {
    display: block;
    color: var(--v2v-brand-red);
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 16px; }
  .founder-story__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--v2v-text-primary) !important;
    line-height: 1.2;
    margin: 0; }
  .founder-story__highlight {
    color: var(--v2v-brand-red) !important; }
  .founder-story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start; }
  .founder-story__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.6s ease; }
    .founder-story__content.is-visible {
      opacity: 1;
      transform: translateX(0); }
  .founder-story__quote {
    position: relative;
    padding-left: 24px; }
  .founder-story__quote-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--v2v-brand-red); }
  .founder-story__quote-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--v2v-text-primary);
    line-height: 1.6;
    margin: 0; }
  .founder-story__paragraphs {
    display: flex;
    flex-direction: column;
    gap: 24px; }
  .founder-story__paragraph {
    color: var(--v2v-text-muted);
    line-height: 1.7;
    margin: 0; }
    .founder-story__paragraph strong {
      color: var(--v2v-text-primary);
      font-weight: 500; }
  .founder-story .text-highlight {
    color: var(--v2v-brand-red);
    font-weight: 500; }
  .founder-story__timeline {
    padding-top: 24px; }
  .founder-story__timeline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--v2v-text-primary) !important;
    margin: 0 0 24px; }
    .founder-story__timeline-title svg {
      color: var(--v2v-brand-red); }
  .founder-story__milestones {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; }
  .founder-story__milestone {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--v2v-bg-card);
    border: 1px solid var(--v2v-border);
    border-radius: 9999px;
    padding: 8px 16px; }
    .founder-story__milestone svg {
      color: var(--v2v-brand-red);
      flex-shrink: 0; }
  .founder-story__milestone-year {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--v2v-text-primary); }
  .founder-story__milestone-event {
    font-size: 0.875rem;
    color: var(--v2v-text-placeholder);
    display: none; }
  .founder-story__graphs {
    display: flex;
    flex-direction: column;
    gap: 32px;
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.6s ease 0.3s; }
    .founder-story__graphs.is-visible {
      opacity: 1;
      transform: translateX(0); }
  .founder-story__graph-card {
    background: var(--v2v-bg-darker);
    border: 1px solid var(--v2v-border);
    border-radius: 16px;
    padding: 24px; }
  .founder-story__graph-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px; }
  .founder-story__graph-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; }
    .founder-story__graph-icon--red {
      background: rgba(252, 3, 4, 0.1); }
      .founder-story__graph-icon--red svg {
        color: var(--v2v-brand-red); }
    .founder-story__graph-icon--green {
      background: rgba(34, 197, 94, 0.1); }
      .founder-story__graph-icon--green svg {
        color: var(--v2v-success); }
  .founder-story__graph-info {
    flex: 1; }
  .founder-story__graph-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--v2v-text-primary) !important;
    margin: 0; }
  .founder-story__graph-subtitle {
    font-size: 0.875rem;
    color: var(--v2v-text-placeholder);
    margin: 0; }
  .founder-story__graph-value {
    text-align: right; }
    .founder-story__graph-value--red .founder-story__graph-number {
      color: var(--v2v-brand-red); }
    .founder-story__graph-value--green .founder-story__graph-number {
      color: var(--v2v-success); }
  .founder-story__graph-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700; }
  .founder-story__graph-year {
    font-size: 0.75rem;
    color: var(--v2v-text-placeholder); }
  .founder-story__graph-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 192px;
    position: relative; }
    .founder-story__graph-bars::before {
      content: '';
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none; }
  .founder-story__bar {
    flex: 1;
    background: var(--v2v-brand-red);
    border-radius: 4px 4px 0 0;
    height: 0;
    transition: height 0.4s ease-out;
    box-shadow: 0 0 20px rgba(252, 3, 4, 0.2); }
    .founder-story__bar.is-animated {
      height: var(--bar-height); }
  .founder-story__graph-bars--green .founder-story__bar {
    background: var(--v2v-success);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
  .founder-story__graph-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 4px; }
    .founder-story__graph-labels span {
      font-size: 0.75rem;
      color: var(--v2v-text-placeholder); }
  .founder-story__graph-disclaimer {
    font-size: 0.75rem;
    color: var(--v2v-text-placeholder);
    margin: 16px 0 0; }

@media (min-width: 768px) {
  .founder-story__milestone-event {
    display: inline; } }
@media (max-width: 991px) {
  .founder-story {
    padding: 64px 0; }
    .founder-story__header {
      margin-bottom: 40px; }
    .founder-story__title {
      font-size: 2rem; }
    .founder-story__grid {
      grid-template-columns: 1fr;
      gap: 48px; }
    .founder-story__quote-text {
      font-size: 1.125rem; } }
@media (max-width: 544px) {
  .founder-story__label {
    font-size: 0.625rem; }
  .founder-story__title {
    font-size: 1.75rem; }
  .founder-story__milestones {
    gap: 8px; }
  .founder-story__milestone {
    padding: 6px 12px;
    gap: 8px; }
    .founder-story__milestone svg {
      width: 12px;
      height: 12px; }
  .founder-story__milestone-year {
    font-size: 0.75rem; }
  .founder-story__graph-card {
    padding: 16px; }
  .founder-story__graph-bars {
    height: 144px; }
  .founder-story__graph-number {
    font-size: 1.25rem; } }