/* ===================================
   Liftlio Landing Page - Complete CSS
   =================================== */

/* Animations */
@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

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

@keyframes pulseAnimation {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

@keyframes floatAnimation {
    0%, 100% { 
        transform: translateY(0); 
    }
    50% { 
        transform: translateY(-20px); 
    }
}

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

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    background: var(--color-header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-light);
    transition: all 0.3s ease;
}

.header.scrolled {
    background: var(--color-header-bg-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

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

.logo {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -1px;
    background: var(--gradient-landing);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

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

.nav-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

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

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-icon {
    background: transparent;
    color: var(--color-text-primary);
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    transition: color 0.3s ease;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    border-radius: 8px;
}

.btn-icon:hover {
    color: var(--color-primary);
}

.btn-login {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-login:hover {
    background: var(--color-card-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Mobile Menu rules removed — conflicted with inline styles in landing-page.html
   (used wrong class name .open instead of .active, and undefined var --color-card-bg
   which made menu background transparent). All mobile menu styles now live inline. */

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background: radial-gradient(circle at 20% 50%, var(--color-primary-alpha) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, var(--color-secondary-alpha) 0%, transparent 50%);
}

[data-theme="dark"] .hero-background {
    opacity: 0.3;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    z-index: 10;
    position: relative;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-badge-bg);
    border: 1px solid var(--color-badge-border);
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}

.hero-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
}

.hero-description {
    font-size: 20px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    gap: 16px;
}

.btn-primary {
    background: var(--gradient-landing);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--color-primary-alpha);
}

.dashboard-preview {
    width: 100%;
    max-width: 600px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px var(--color-shadow-large);
}

[data-theme="light"] .dashboard-preview {
    background: rgba(255, 255, 255, 0.95);
}

.dashboard-preview::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-primary-alpha) 0%, transparent 70%);
    /* animation: pulseAnimation 4s ease-in-out infinite; - Removida para parar o piscar */
}

.dashboard-preview img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* Trust Section */
.trust-section {
    padding: 60px 0;
    background: var(--color-trust-bg);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.trust-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-icon {
    font-size: 24px;
    color: var(--color-primary);
}

.trust-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.trust-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Section Styles */
.section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.section-description {
    font-size: 18px;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
    margin-bottom: 60px;
}

.feature-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    background: var(--color-card-hover-bg);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-landing);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-landing);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: white;
}

.feature-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.feature-description {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Process Section */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

.process-step {
    text-align: center;
    position: relative;
}

.process-number {
    width: 60px;
    height: 60px;
    background: var(--gradient-landing);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
}

.process-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-text-primary);
}

.process-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Pricing Section */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    padding: 40px 32px;
    position: relative;
    transition: all 0.3s ease;
}

.pricing-card.featured {
    background: var(--color-pricing-featured-bg);
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card.featured:hover {
    transform: scale(1.08);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-landing);
    color: white;
    padding: 4px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.pricing-plan {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

.pricing-price {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.pricing-price span {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.pricing-description {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

/* Responsive Design */
@media (max-width: 968px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .hero-visual {
        display: none;
    }
    
    .cta-buttons {
        justify-content: center;
    }
    
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .header {
        padding: 16px 0;
    }
    
    .nav {
        display: none;
    }
    
    /* Mobile menu display handled inline in landing-page.html */

    .hero-section {
        padding: 100px 0 60px;
    }
    
    .hero-title {
        font-size: 42px;
        line-height: 1.1;
    }
    
    .hero-description {
        font-size: 18px;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    .section-title {
        font-size: 36px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .trust-container {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 24px;
    }
    
    .header {
        padding: 12px 0;
    }
    
    .hero-section {
        padding: 80px 0 40px;
    }
    
    .hero-title {
        font-size: 32px;
        line-height: 1.15;
    }
    
    .hero-description {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 32px;
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    .section {
        padding: 40px 0;
    }
    
    .section-header {
        margin-bottom: 32px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-description {
        font-size: 16px;
    }
    
    .feature-card {
        padding: 24px;
        border-radius: 12px;
    }
    
    .features-grid {
        gap: 20px;
        margin-bottom: 40px;
    }
}

@media (max-width: 380px) {
    .hero-title {
        font-size: 24px;
    }
    
    .hero-description {
        font-size: 15px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .section-description {
        font-size: 15px;
    }
    
    .feature-card {
        padding: 20px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Icon styles */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Language-specific classes removed - English only */

/* Print styles */
@media print {
    .header,
    .mobile-menu,
    .mobile-menu-overlay,
    .cta-buttons,
    .btn-primary {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
        background: white;
    }
}

/* ═══════════════════════════════════════════════════════════
   EDITORIAL REDESIGN — Landing Page
   Consistent with dashboard: Fraunces display + Geist Mono
   Aesthetic: editorial manifesto, luxury tech magazine
════════════════════════════════════════════════════════════ */

/* Atmospheric background layers */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1000px 600px at 20% 15%,rgba(139,92,246,.08),transparent 55%),
    radial-gradient(900px 500px at 85% 30%,rgba(236,72,153,.06),transparent 60%),
    radial-gradient(800px 500px at 50% 85%,rgba(59,130,246,.05),transparent 60%);
  animation:heroMeshDrift 28s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:overlay;
}
.header,.hero-section,.section,.final-cta{position:relative;z-index:2}

@keyframes heroMeshDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-30px,-15px) scale(1.03)}
  100%{transform:translate(15px,8px) scale(1)}
}

/* HEADER — refined */
.header .logo-text,.header .liftlio-text{
  font-family:'Fraunces',serif !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
}
.header .beta-badge,
.header .badge-beta,
.header [class*="beta"]{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:9px !important;
  letter-spacing:.2em !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  padding:3px 8px !important;
  background:rgba(139,92,246,.12) !important;
  border:1px solid rgba(139,92,246,.25) !important;
  color:#c4b5fd !important;
  border-radius:6px !important;
  display:inline-flex;align-items:center;
}
.header .nav-link{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
.btn,.btn-primary,.btn-secondary,.cta-button{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  font-weight:500 !important;
}

/* HERO — Editorial manifesto cover */
.hero,.hero-section{
  padding-top:140px !important;
  padding-bottom:100px !important;
}
.badge{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:10px !important;
  letter-spacing:.22em !important;
  text-transform:uppercase !important;
  font-weight:500 !important;
  padding:8px 14px !important;
  background:rgba(139,92,246,.1) !important;
  border:1px solid rgba(139,92,246,.25) !important;
  color:#c4b5fd !important;
  border-radius:999px !important;
  display:inline-flex;align-items:center;gap:8px;
}
.badge::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#a78bfa;box-shadow:0 0 12px #a78bfa;
  animation:pulseAnimation 2s ease-in-out infinite;
}

.hero-text,.hero-content > div:first-child{max-width:720px !important}
.hero h1,
.hero-title,
.hero .headline,
#hero-section h1{
  font-family:'Fraunces',serif !important;
  font-weight:300 !important;
  font-size:clamp(34px,4.6vw,60px) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  margin:0 0 28px !important;
  max-width:720px !important;
  padding-bottom:.15em !important;
  word-break:keep-all;
  overflow-wrap:break-word;
  overflow:visible !important;
}
.hero h1 .gradient-text{
  padding-bottom:.1em !important;
  display:inline-block;
}

/* Language select dropdown (EN default, PT/ES/RU options) */
.lang-select{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  padding:6px 28px 6px 12px;
  border-radius:8px;
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:10px !important;
  letter-spacing:.14em;
  font-weight:500;
  cursor:pointer;
  text-transform:uppercase;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23a8a8b4' d='M6 8L2 4h8z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  transition:all .2s;
  margin-right:4px;
}
.lang-select:hover{
  background-color:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.15);
}
.lang-select:focus{
  outline:none;
  border-color:rgba(139,92,246,.4);
}
.lang-select option{
  background:#0a0a0f;
  color:#fff;
  font-family:'Geist Mono',ui-monospace,monospace;
}
.hero h1 strong,.hero h1 b{font-weight:500 !important}
.hero h1 .gradient-text,
.hero h1 em,
.gradient-text{
  font-style:italic !important;
  font-weight:300 !important;
  background:linear-gradient(135deg,#a78bfa 0%,#ec4899 55%,#a78bfa 100%) !important;
  background-size:200% 200% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  animation:heroGradient 8s ease-in-out infinite;
}
@keyframes heroGradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.hero-description,
.hero p,
.hero .description,
.hero .subtitle{
  font-family:'Fraunces',serif !important;
  font-style:italic !important;
  font-size:clamp(18px,2.2vw,22px) !important;
  font-weight:300 !important;
  line-height:1.55 !important;
  max-width:640px !important;
  color:rgba(255,255,255,.72) !important;
  margin-bottom:32px !important;
}

/* Hero CTAs */
.cta-buttons{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-top:40px !important;
}
.btn-primary,.cta-button.primary,a.btn-primary{
  padding:16px 28px !important;
  background:linear-gradient(135deg,#8b5cf6,#ec4899) !important;
  border:none !important;
  border-radius:12px !important;
  color:#fff !important;
  box-shadow:0 10px 40px rgba(139,92,246,.25);
  transition:all .3s cubic-bezier(.4,0,.2,1) !important;
}
.btn-primary:hover,.cta-button.primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 15px 50px rgba(139,92,246,.4) !important;
}
.btn-secondary,.cta-button.secondary,a.btn-secondary{
  padding:16px 28px !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:12px !important;
  color:#fff !important;
  transition:all .3s !important;
}
.btn-secondary:hover{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.2) !important;
}

/* Hero AI brain v2: cinematic, minimal, no missing image dependency */
.hero .hero-image{
  min-height:540px;
}

.ai-brain-visual-v2{
  width:min(100%,660px);
  aspect-ratio:1.1;
  transform:translateX(20px);
  filter:drop-shadow(0 34px 90px rgba(2,6,23,.62));
}

.ai-brain-visual-v2::before{
  content:"";
  position:absolute;
  inset:9% 4% 7%;
  border-radius:50%;
  background:
    radial-gradient(circle at 48% 42%,rgba(236,72,153,.2),transparent 24%),
    radial-gradient(circle at 46% 44%,rgba(34,211,238,.22),transparent 34%),
    radial-gradient(ellipse at center,rgba(167,139,250,.13),transparent 66%);
  filter:blur(18px);
  opacity:.82;
}

.brain-v2-atmosphere{
  position:absolute;
  inset:1% 0 0;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.16),transparent 3%),
    radial-gradient(circle at 68% 34%,rgba(103,232,249,.18),transparent 2%),
    radial-gradient(circle at 40% 72%,rgba(236,72,153,.18),transparent 2%),
    radial-gradient(ellipse at center,rgba(15,23,42,.34),rgba(2,6,23,.04) 58%,transparent 72%);
  box-shadow:inset 0 0 72px rgba(255,255,255,.04);
}

.brain-v2-grid{
  position:absolute;
  inset:12% 8% 10%;
  opacity:.38;
  border-radius:50%;
  background:
    linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at center,#000 49%,transparent 74%);
}

.brain-v2-ring{
  position:absolute;
  left:50%;
  top:51%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(226,232,240,.12);
  pointer-events:none;
}

.brain-v2-ring.ring-a{
  width:76%;
  height:68%;
  border-top-color:rgba(103,232,249,.45);
  border-left-color:rgba(139,92,246,.34);
  animation:brainV2Orbit 28s linear infinite;
}

.brain-v2-ring.ring-b{
  width:60%;
  height:54%;
  border-right-color:rgba(236,72,153,.36);
  border-bottom-color:rgba(250,204,21,.28);
  transform:translate(-50%,-50%) rotate(-12deg);
  animation:brainV2OrbitB 24s linear infinite;
}

.brain-v2-ring.ring-c{
  width:42%;
  height:38%;
  border-color:rgba(255,255,255,.1);
  box-shadow:0 0 34px rgba(103,232,249,.08);
}

.brain-v2-sculpture{
  position:absolute;
  left:50%;
  top:51%;
  width:72%;
  max-width:470px;
  transform:translate(-50%,-50%);
  z-index:3;
  overflow:visible;
}

.brain-v2-floor{
  fill:rgba(15,23,42,.52);
  filter:blur(2px);
}

.brain-v2-lobe,
.brain-v2-stem{
  fill:url(#brain-v2-glass);
  stroke:url(#brain-v2-rim);
  stroke-width:1.35;
  filter:url(#brain-v2-soft);
}

.brain-v2-stem{
  opacity:.66;
}

.brain-v2-rimline{
  fill:none;
  stroke:rgba(255,255,255,.58);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.46;
}

.brain-v2-rimline.right{
  stroke:rgba(103,232,249,.48);
}

.brain-v2-folds path{
  fill:none;
  stroke:rgba(255,255,255,.38);
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.62;
}

.brain-v2-folds path:nth-child(2n){
  stroke:rgba(103,232,249,.42);
}

.brain-v2-folds path:nth-child(3n){
  stroke:rgba(236,72,153,.36);
}

.brain-v2-nodes circle{
  fill:#f8fafc;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.95));
  opacity:.92;
}

.brain-v2-scanline{
  position:absolute;
  left:26%;
  right:26%;
  top:30%;
  height:1px;
  z-index:4;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),rgba(103,232,249,.88),transparent);
  box-shadow:0 0 22px rgba(103,232,249,.65);
  animation:brainV2Scan 5.8s ease-in-out infinite;
}

.brain-v2-ray{
  position:absolute;
  left:50%;
  top:51%;
  z-index:2;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(103,232,249,.72),transparent);
  opacity:.42;
}

.brain-v2-ray.ray-a{width:228px;transform:rotate(-31deg)}
.brain-v2-ray.ray-b{width:238px;transform:rotate(42deg)}
.brain-v2-ray.ray-c{width:204px;transform:rotate(174deg)}

.brain-v2-chip{
  position:absolute;
  left:50%;
  top:51%;
  z-index:5;
  transform:translate(-50%,-50%);
  min-width:160px;
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(5,8,16,.72),rgba(5,8,16,.52));
  box-shadow:
    0 18px 40px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  text-align:center;
}

.brain-v2-chip span,
.brain-v2-signal{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}

.brain-v2-chip span{
  display:block;
  font-size:9px;
  line-height:1;
  color:rgba(226,232,240,.62);
  margin-bottom:5px;
}

.brain-v2-chip strong{
  display:block;
  font-family:'Inter',sans-serif !important;
  font-size:15px;
  line-height:1.05;
  letter-spacing:0;
  color:#fff;
  white-space:nowrap;
}

.brain-v2-signal{
  position:absolute;
  z-index:6;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(5,8,16,.5);
  color:rgba(226,232,240,.74);
  font-size:9px;
  line-height:1;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}

.brain-v2-signal::before{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:7px;
  border-radius:50%;
  background:#67e8f9;
  box-shadow:0 0 12px rgba(103,232,249,.8);
  vertical-align:1px;
}

.signal-top{left:49%;top:11%;transform:translateX(-50%)}
.signal-right{right:5%;top:47%}
.signal-bottom{left:49%;bottom:5%;transform:translateX(-50%)}
.signal-left{left:4%;top:47%}

@keyframes brainV2Orbit{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes brainV2OrbitB{
  from{transform:translate(-50%,-50%) rotate(-12deg)}
  to{transform:translate(-50%,-50%) rotate(348deg)}
}

@keyframes brainV2Scan{
  0%,100%{top:29%;opacity:.16}
  45%{opacity:.78}
  55%{top:68%;opacity:.56}
  75%{opacity:.12}
}

[data-theme="light"] .ai-brain-visual-v2{
  filter:drop-shadow(0 34px 90px rgba(15,23,42,.2));
}

[data-theme="light"] .brain-v2-atmosphere{
  background:
    radial-gradient(circle at 34% 22%,rgba(15,23,42,.12),transparent 3%),
    radial-gradient(circle at 68% 34%,rgba(6,182,212,.18),transparent 2%),
    radial-gradient(circle at 40% 72%,rgba(236,72,153,.16),transparent 2%),
    radial-gradient(ellipse at center,rgba(255,255,255,.64),rgba(226,232,240,.12) 58%,transparent 72%);
}

[data-theme="light"] .brain-v2-grid{
  background:
    linear-gradient(rgba(15,23,42,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.06) 1px,transparent 1px);
}

[data-theme="light"] .brain-v2-chip,
[data-theme="light"] .brain-v2-signal{
  background:rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.12);
  color:rgba(15,23,42,.68);
}

[data-theme="light"] .brain-v2-chip span{
  color:rgba(15,23,42,.55);
}

[data-theme="light"] .brain-v2-chip strong{
  color:#0f172a;
}

/* SECTIONS — editorial treatment */
.section{
  padding:120px 0 !important;
  background:transparent !important;
  position:relative;
}
.section-header{margin-bottom:64px !important;position:relative}
.section-header::before{
  content:"";
  display:block;
  width:48px;height:2px;
  background:linear-gradient(90deg,#a78bfa,#ec4899);
  margin:0 auto 24px;
}
.section-title{
  font-family:'Fraunces',serif !important;
  font-weight:300 !important;
  font-size:clamp(42px,5.5vw,68px) !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
  margin:0 0 20px !important;
}
.section-title strong,.section-title b{font-weight:500 !important}
.section-title .gradient-text,
.section-title em{
  font-style:italic !important;
  font-weight:400 !important;
  background:linear-gradient(135deg,#a78bfa,#ec4899) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.section-description{
  font-family:'Fraunces',serif !important;
  font-style:italic !important;
  font-size:clamp(17px,2vw,21px) !important;
  font-weight:300 !important;
  line-height:1.55 !important;
  color:rgba(255,255,255,.65) !important;
  max-width:640px !important;
  margin:0 auto !important;
}

/* Feature cards — refined */
.feature-card,.step-card,.dilemma-item{
  background:rgba(255,255,255,.02) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:16px !important;
  padding:36px 28px !important;
  transition:all .35s cubic-bezier(.4,0,.2,1) !important;
  position:relative;
  overflow:hidden;
}
.feature-card:hover,.step-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.035) !important;
}
.feature-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;left:0 !important;
  width:100% !important;height:3px !important;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),rgba(236,72,153,.4),transparent) !important;
  opacity:.3 !important;
  transition:opacity .3s !important;
}
.feature-card:hover::before{opacity:1 !important}
.feature-title,.step-title{
  font-family:'Fraunces',serif !important;
  font-weight:500 !important;
  font-size:22px !important;
  letter-spacing:-.01em !important;
  line-height:1.25 !important;
  margin:0 0 14px !important;
}
.feature-description,.step-description{
  font-family:'Inter',sans-serif !important;
  font-size:15px !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,.62) !important;
  font-weight:400 !important;
}

/* Numbered steps — italic roman */
.step-number,.feature-number{
  font-family:'Fraunces',serif !important;
  font-style:italic !important;
  font-weight:400 !important;
  font-size:28px !important;
  color:rgba(167,139,250,.7) !important;
  background:none !important;
  border:none !important;
  width:auto !important;height:auto !important;
  padding:0 !important;
  letter-spacing:.05em !important;
}

/* Pricing — editorial receipt */
.pricing-card{
  padding:48px 36px !important;
  background:rgba(255,255,255,.02) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:20px !important;
  position:relative;
  transition:all .35s cubic-bezier(.4,0,.2,1) !important;
}
.pricing-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(255,255,255,.15) !important;
  background:rgba(255,255,255,.04) !important;
}
.pricing-card.featured{
  border-color:rgba(139,92,246,.35) !important;
  background:linear-gradient(180deg,rgba(139,92,246,.06) 0%,rgba(255,255,255,.02) 100%) !important;
}
.pricing-card h3,
.pricing-name{
  font-family:'Fraunces',serif !important;
  font-weight:400 !important;
  font-size:28px !important;
  letter-spacing:-.01em !important;
  margin-bottom:12px !important;
}
.pricing-card .price,
.pricing-card .plan-price,
.pricing-price,
.pricing-amount{
  font-family:'Fraunces',serif !important;
  font-weight:300 !important;
  font-size:64px !important;
  letter-spacing:-.04em !important;
  line-height:1 !important;
  margin:16px 0 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
}
.pricing-currency{
  font-family:'Fraunces',serif !important;
  font-size:36px !important;
  color:rgba(255,255,255,.6) !important;
  vertical-align:top !important;
  font-weight:300 !important;
}
.pricing-period{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.5) !important;
}
.pricing-touchpoints{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#c4b5fd !important;
}
.pricing-card .price-period,.pricing-card .billing{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.5) !important;
}
.pricing-card ul li,.pricing-card .feature{
  font-family:'Inter',sans-serif !important;
  font-size:14px !important;
  color:rgba(255,255,255,.72) !important;
  padding:10px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.04);
}

/* Final CTA */
.final-cta{
  padding:140px 0 120px !important;
  position:relative;
  overflow:hidden;
}
.final-cta::before{
  content:"";
  position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%);
  filter:blur(80px);
  pointer-events:none;
}
.final-cta h2{
  font-family:'Fraunces',serif !important;
  font-weight:300 !important;
  font-size:clamp(44px,6vw,80px) !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
  position:relative;z-index:1;
}
.final-cta h2 em{
  font-style:italic !important;
  background:linear-gradient(135deg,#a78bfa,#ec4899) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.final-cta p{
  font-family:'Fraunces',serif !important;
  font-style:italic !important;
  font-size:clamp(17px,2vw,21px) !important;
  font-weight:300 !important;
  color:rgba(255,255,255,.65) !important;
  max-width:600px;margin:24px auto;
  position:relative;z-index:1;
}

/* Footer refinement */
footer,.footer{
  padding-top:80px !important;
  padding-bottom:40px !important;
  border-top:1px solid rgba(255,255,255,.06);
}
footer a,.footer a{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.5) !important;
  transition:color .2s !important;
}
footer a:hover{color:#fff !important}
.footer-bottom,.footer-copyright{
  font-family:'Geist Mono',ui-monospace,monospace !important;
  font-size:10px !important;
  letter-spacing:.15em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.35) !important;
}

/* Editorial entrance animations */
.hero-title,.hero-description,.badge,.cta-buttons{
  animation:editorialEntry 1s cubic-bezier(.16,1,.3,1) backwards;
}
.badge{animation-delay:.1s}
.hero-title{animation-delay:.25s}
.hero-description{animation-delay:.5s}
.cta-buttons{animation-delay:.7s}
@keyframes editorialEntry{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* Responsive */
@media (max-width: 768px){
  .hero-section{padding-top:100px !important;padding-bottom:60px !important}
  .section{padding:80px 0 !important}
  .hero-title{font-size:clamp(40px,11vw,64px) !important}
  .section-title{font-size:clamp(32px,8vw,48px) !important}
  .pricing-card{padding:32px 24px !important}
  .pricing-card .price{font-size:48px !important}
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — Editorial Redesign overrides
════════════════════════════════════════════════════════════ */

[data-theme="light"] body::before{
  background:
    radial-gradient(1000px 600px at 20% 15%,rgba(139,92,246,.05),transparent 55%),
    radial-gradient(900px 500px at 85% 30%,rgba(236,72,153,.04),transparent 60%),
    radial-gradient(800px 500px at 50% 85%,rgba(59,130,246,.03),transparent 60%) !important;
  opacity:.7;
}
[data-theme="light"] body::after{opacity:.015 !important;mix-blend-mode:multiply !important}

/* Light theme: hide all particle animations for clean editorial look */
[data-theme="light"] #particles-canvas,
[data-theme="light"] .hero-background,
[data-theme="light"] .hero-3d-container,
[data-theme="light"] #hero-3d-container,
[data-theme="light"] .hero canvas,
[data-theme="light"] .hero-section canvas,
[data-theme="light"] #hero-section canvas{
  display:none !important;
  visibility:hidden !important;
}

[data-theme="light"] .hero h1,
[data-theme="light"] .hero-title,
[data-theme="light"] .section-title,
[data-theme="light"] .final-cta h2{
  background:linear-gradient(180deg,#0a0a0f 0%,#3f3f4a 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:#0a0a0f !important;
}
[data-theme="light"] .hero h1 .gradient-text,
[data-theme="light"] .section-title .gradient-text,
[data-theme="light"] .final-cta h2 em,
[data-theme="light"] .gradient-text{
  background:linear-gradient(135deg,#7c3aed,#ec4899) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

[data-theme="light"] .hero-description,
[data-theme="light"] .hero p,
[data-theme="light"] .section-description{
  color:rgba(15,15,15,.65) !important;
}

[data-theme="light"] .badge{
  background:rgba(139,92,246,.08) !important;
  border:1px solid rgba(139,92,246,.2) !important;
  color:#7c3aed !important;
}

/* Feature/step/dilemma/pricing cards */
[data-theme="light"] .feature-card,
[data-theme="light"] .step-card,
[data-theme="light"] .dilemma-item,
[data-theme="light"] .pricing-card{
  background:rgba(255,255,255,.8) !important;
  border:1px solid rgba(15,15,15,.08) !important;
  box-shadow:0 4px 20px rgba(15,15,15,.04);
}
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .step-card:hover,
[data-theme="light"] .pricing-card:hover{
  background:rgba(255,255,255,1) !important;
  border-color:rgba(15,15,15,.15) !important;
  box-shadow:0 12px 40px rgba(15,15,15,.08);
}
[data-theme="light"] .pricing-card.featured{
  border-color:rgba(139,92,246,.35) !important;
  background:linear-gradient(180deg,rgba(139,92,246,.04),rgba(255,255,255,.95)) !important;
  box-shadow:0 12px 40px rgba(139,92,246,.12);
}

[data-theme="light"] .feature-title,
[data-theme="light"] .step-title,
[data-theme="light"] .pricing-card h3,
[data-theme="light"] .pricing-name{
  color:#0a0a0f !important;
}
[data-theme="light"] .feature-description,
[data-theme="light"] .step-description{
  color:rgba(15,15,15,.65) !important;
}
[data-theme="light"] .pricing-card ul li,
[data-theme="light"] .pricing-card .feature{
  color:rgba(15,15,15,.72) !important;
  border-bottom:1px solid rgba(15,15,15,.06) !important;
}
[data-theme="light"] .pricing-price,
[data-theme="light"] .pricing-amount,
[data-theme="light"] .pricing-card .price{
  color:#0a0a0f !important;
  -webkit-text-fill-color:#0a0a0f !important;
}
[data-theme="light"] .pricing-currency{
  color:rgba(15,15,15,.5) !important;
}
[data-theme="light"] .pricing-period{
  color:rgba(15,15,15,.5) !important;
}

/* Navigation */
[data-theme="light"] .header .nav-link{
  color:rgba(15,15,15,.7) !important;
}
[data-theme="light"] .header .nav-link:hover{color:#0a0a0f !important}
[data-theme="light"] .lang-select{
  background:rgba(15,15,15,.04) !important;
  border:1px solid rgba(15,15,15,.12) !important;
  color:#0a0a0f !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23555' d='M6 8L2 4h8z'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 8px center !important;
}
[data-theme="light"] .lang-select option{
  background:#fff !important;color:#0a0a0f !important;
}
[data-theme="light"] .btn-secondary{
  background:rgba(15,15,15,.04) !important;
  border:1px solid rgba(15,15,15,.12) !important;
  color:#0a0a0f !important;
}
[data-theme="light"] .btn-secondary:hover{
  background:rgba(15,15,15,.08) !important;
  border-color:rgba(15,15,15,.2) !important;
}
[data-theme="light"] .header .beta-badge{
  background:rgba(139,92,246,.08) !important;
  border:1px solid rgba(139,92,246,.2) !important;
  color:#7c3aed !important;
}

/* Comparison chip + footer */
[data-theme="light"] .cost-compare,
[data-theme="light"] .price-comparison{
  background:rgba(15,15,15,.03) !important;
  border:1px solid rgba(15,15,15,.08) !important;
}
[data-theme="light"] footer a,[data-theme="light"] .footer a{
  color:rgba(15,15,15,.55) !important;
}
[data-theme="light"] footer a:hover{color:#0a0a0f !important}
[data-theme="light"] .footer-bottom,[data-theme="light"] .footer-copyright{
  color:rgba(15,15,15,.4) !important;
}

/* Section dividers */
[data-theme="light"] .section-header::before{
  background:linear-gradient(90deg,#7c3aed,#ec4899) !important;
  opacity:.8;
}

/* Platform stat numbers — keep purple but darker */
[data-theme="light"] [class*="stat-number"],
[data-theme="light"] [class*="percentage"]{
  color:#7c3aed !important;
}

@media (max-width:1024px){
  .ai-brain-visual-v2{
    width:min(100%,590px) !important;
    transform:translateX(0);
  }

  .brain-v2-sculpture{
    width:70%;
  }

  .brain-v2-ray.ray-a{width:198px}
  .brain-v2-ray.ray-b{width:204px}
  .brain-v2-ray.ray-c{width:184px}
}

@media (max-width:768px){
  .hero .hero-image{
    min-height:390px !important;
  }

  .ai-brain-visual-v2{
    width:min(100%,430px) !important;
    aspect-ratio:1.05;
  }

  .brain-v2-sculpture{
    width:76%;
  }

  .brain-v2-chip{
    min-width:136px;
    padding:10px 13px;
  }

  .brain-v2-chip strong{
    font-size:13px;
  }

  .brain-v2-signal{
    padding:7px 9px;
    font-size:8px;
  }

  .signal-right{right:0;top:46%}
  .signal-left{left:0;top:46%}
  .signal-top{top:6%}
  .signal-bottom{bottom:2%}
}

@media (max-width:480px){
  .hero .hero-image{
    min-height:350px !important;
  }

  .ai-brain-visual-v2{
    width:min(100%,350px) !important;
  }

  .brain-v2-signal{
    color:transparent;
    width:28px;
    height:28px;
    padding:0;
    display:grid;
    place-items:center;
  }

  .brain-v2-signal::before{
    margin:0;
  }

  .brain-v2-ray.ray-a{width:126px}
  .brain-v2-ray.ray-b{width:134px}
  .brain-v2-ray.ray-c{width:118px}
}

@media (prefers-reduced-motion:reduce){
  .brain-v2-ring,
  .brain-v2-scanline{
    animation:none !important;
  }
}