/* ==============================
   Genius.ai — styles.css (consolidated)
   ============================== */

/* ---------- Theme Tokens ---------- */
:root {
    --primary-color: #166534;
    --primary-dark: #14532d;
    --secondary-color: #15803d;
    --accent-color: #16a34a;
    --warning-color: #ea580c;
    --success-color: #22c55e;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --background: #ffffff;
    --surface: #f8fafc;
    --border: #e2e8f0;
  
    --gradient-1: linear-gradient(135deg, #166534 0%, #15803d 100%);
    --gradient-2: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    --gradient-3: linear-gradient(135deg, #15803d 0%, #166534 100%);
    --gradient-rainbow: linear-gradient(90deg, #166534, #15803d, #16a34a, #22c55e);
  
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  
    /* New: global grid + bronze palette */
    --grid-bg: #fefce8;
    --grid-line: rgba(156,163,175,0.12);
  
    --bronze-1: #3b2c22;
    --bronze-2: #6e5335;
    --bronze-3: #b08d57;
    --gradient-bronze: linear-gradient(
      90deg,
      var(--bronze-1) 0%,
      var(--bronze-2) 30%,
      var(--bronze-3) 50%,
      var(--bronze-2) 70%,
      var(--bronze-1) 100%
    );
  }
  
  /* ---------- Reset ---------- */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; height: 100%; }
  body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: #ffffff;
    overflow-x: hidden;
    position: relative;
  }
  
  /* ---------- Global Yellow Graph Background (behind all) ---------- */
  body::before{
    content:'';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--grid-bg);
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  
  /* ---------- Layout ---------- */
  .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 1; }
  
  /* Make sections transparent so the global grid shows through */
  main { background: transparent !important; }
  /* keep grid showing through these sections */
  .how-it-works, .upload, .demo { background: transparent !important; }
  
  /* ---------- Header (rounded + sticky) ---------- */
  .header{
    position: sticky !important;
    top: 12px;
    z-index: 1000;
    background: #ffffff !important; /* opaque so grid doesn’t bleed */
    border: 1px solid rgba(22,101,52,0.10);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-radius: 16px;
    width: calc(100% - 32px);
    max-width: 1200px;
    margin: 12px auto 0;
  }
  .header::before{ content:none; } /* remove previous decorative line */
  
  .nav{
    display:flex; justify-content:space-between; align-items:center;
    padding: 0.75rem 1.25rem; max-width: 100%;
  }
  .nav-links{ display:flex; list-style:none; align-items:center; gap:2rem; }
  .nav-links a{
    text-decoration:none; color:var(--text-primary); font-weight:500; transition:.3s all; position:relative;
  }
  .nav-links a:hover{ color:var(--primary-color); transform: translateY(-2px); }
  .nav-links a::after{
    content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px;
    background: var(--gradient-rainbow); transition: width .3s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{
    background: var(--gradient-1) !important; color:#fff !important;
    padding: .75rem 1.5rem; border-radius:2rem; transition:.3s all; box-shadow: 0 4px 15px rgba(99,102,241,.3);
  }
  .nav-cta:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 25px rgba(99,102,241,.4); }
  
  /* ---------- Bronze Logos (header + footer) ---------- */
  .logo-text,
  .footer-logo-text{
    background: var(--gradient-bronze) !important;
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: bronze-sheen 8s linear infinite !important;
    letter-spacing: 0.3px;
  }
  .logo-text{ font-size: 1.8rem; font-weight: 800; margin: 0; }
  .footer-logo-text{ font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
  
  @keyframes bronze-sheen{
    0%{   background-position:   0% 50%; filter: brightness(1); }
    50%{  background-position: 100% 50%; filter: brightness(1.06); }
    100%{ background-position: 200% 50%; filter: brightness(1); }
  }
  
  /* ---------- Buttons ---------- */
  .btn{
    padding:.75rem 1.5rem; border-radius:2rem; font-weight:600; text-decoration:none;
    border:none; cursor:pointer; transition:.3s all; display:inline-block; text-align:center; position:relative; overflow:hidden;
  }
  .btn::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 .6s, height .6s;
  }
  .btn:hover::before{ width:300px; height:300px; }
  .btn-primary{ background: var(--gradient-1); color:#fff; box-shadow: 0 4px 15px rgba(99,102,241,.3); }
  .btn-primary:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 6px 25px rgba(99,102,241,.4); }
  .btn-secondary{ background:#fff; color:var(--primary-color); border:2px solid var(--primary-color); }
  .btn-secondary:hover{ background:var(--primary-color); color:#fff; transform: translateY(-3px) scale(1.05); }
  .btn-large{ padding: 1rem 2rem; font-size: 1.1rem; }
  
  /* ---------- Hero ---------- */
  .hero{
    padding: 8rem 2rem 4rem;
    background: transparent;
    display:flex; align-items:center; min-height:100vh; max-width:1200px; margin:0 auto; position:relative;
  }
  .hero-content{ flex:1; max-width:600px; z-index:2; }
  .badge-container{ display:flex; gap:1rem; margin-bottom:1rem; }
  .badge{ padding:.25rem .75rem; border-radius:1rem; font-size:.875rem; font-weight:600; display:inline-flex; align-items:center; }
  .badge-process{ background: linear-gradient(135deg,#166534,#15803d); color:#fff; box-shadow: 0 2px 10px rgba(22,101,52,.3); font-size:1rem; padding:.5rem 1.5rem; gap:.5rem; }
  
  .hero-title{ font-size:3.5rem; font-weight:800; line-height:1.1; margin-bottom:1rem; color:var(--text-primary); }
  .animated-text{
    background: var(--gradient-1);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    position:relative; animation: text-glow 3s ease-in-out infinite;
  }
  @keyframes text-glow{ 0%,100%{ filter: brightness(1);} 50%{ filter:brightness(1.2);} }
  .hero-subtitle-big{ font-size:2rem; font-weight:700; color:var(--secondary-color); margin-bottom:1rem; }
  .hero-subtitle{ font-size:1.25rem; color:var(--text-secondary); margin-bottom:2rem; line-height:1.6; }
  .hero-buttons{ display:flex; gap:1rem; margin-bottom:2rem; }
  
  .hero-visual{ flex:1; display:flex; justify-content:center; align-items:center; position:relative; min-height:500px; }
  .workflow-demo{ position:relative; width:100%; max-width:450px; animation: float 3s ease-in-out infinite; }
  @keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} }
  
  .screen-container{
    background: linear-gradient(135deg,#1e293b 0%, #0f172a 100%);
    border-radius:1rem; overflow:hidden; box-shadow: 0 20px 40px rgba(0,0,0,.2); border:1px solid #334155; position:relative;
  }
  .screen-header{ background:#334155; padding:.75rem 1rem; display:flex; justify-content:space-between; align-items:center; }
  .screen-dots{ display:flex; gap:.5rem; }
  .recording-indicator{ display:flex; align-items:center; gap:.5rem; color:#ef4444; font-size:.875rem; font-weight:600; }
  .rec-dot{ width:8px; height:8px; background:#ef4444; border-radius:50%; animation: pulse-red 1.5s ease-in-out infinite; }
  @keyframes pulse-red{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.2);} }
  
  /* Clean left-aligned icons list in screen */
  .screen-content{ padding:2rem; min-height:250px; display:flex; align-items:flex-start; justify-content:flex-start; }
  .workflow-steps{ display:flex; justify-content:flex-start; flex-direction:column; gap:1rem; width:100%; }
  .workflow-step{
    display:grid; grid-template-columns:48px 1fr; align-items:center; gap:1rem;
    padding:1rem; background: rgba(255,255,255,0.1); border-radius:.5rem; color:#fff; font-weight:500;
    opacity:0; transform: translateX(-20px); animation: step-reveal .8s ease-out forwards;
  }
  .workflow-step.step-1{ animation-delay: 1s; }
  .workflow-step.step-2{ animation-delay: 2s; }
  .workflow-step.step-3{ animation-delay: 3s; }
  .workflow-step.step-4{ animation-delay: 4s; }
  @keyframes step-reveal{ to{ opacity:1; transform: translateX(0);} }
  .workflow-steps .step-icon{
    width:48px; height:48px; margin:0; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  }
  
  /* ---------- Analysis overlay in hero ---------- */
  .analysis-overlay{
    position:absolute; top:50%; right:-200px; width:280px;
    background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.95) 100%);
    backdrop-filter: blur(10px); border-radius:1rem; padding:1.5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.1); border:1px solid rgba(255,255,255,.2);
    opacity:0; transform: translateY(20px); animation: analysis-appear 1s ease-out 5s forwards;
  }
  @keyframes analysis-appear{ from{ opacity:0; transform: translateY(calc(-50% + 20px));} to{ opacity:1; transform: translateY(-50%);} }
  .analysis-title{ font-weight:700; font-size:1.1rem; color:var(--primary-color); margin-bottom:1rem; text-align:center; }
  .analysis-items{ display:flex; flex-direction:column; gap:.75rem; }
  .analysis-item{
    display:flex; align-items:center; gap:.75rem; padding:.75rem;
    background: rgba(22,101,52,0.05); border-radius:.5rem; font-size:.9rem; color:var(--text-primary);
    opacity:0; transform: translateX(20px); animation: item-slide-in .5s ease-out forwards;
  }
  .analysis-item:nth-child(1){ animation-delay:5.5s; }
  .analysis-item:nth-child(2){ animation-delay:6s; }
  .analysis-item:nth-child(3){ animation-delay:6.5s; }
  @keyframes item-slide-in{ to{ opacity:1; transform: translateX(0);} }
  .opportunity-icon{
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    background: var(--primary-color); border-radius:50%; color:#fff; font-size:.8rem;
  }
  
  /* ---------- Section Titles ---------- */
  .section-title{ font-size:2.5rem; font-weight:800; text-align:center; margin-bottom:3rem; color:var(--text-primary); }
  
  /* ---------- How it Works (transparent to show grid) ---------- */
  .how-it-works{ padding:6rem 0; position:relative; overflow:hidden; }
  .journey-path{ 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    max-width:1000px; 
    margin:0 auto 3rem; 
    position:relative; 
    gap: 1rem;
    flex-wrap: wrap;
    padding: 2rem 0;
  }
  .journey-step{
    background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.95) 100%);
    backdrop-filter: blur(10px); 
    border-radius:.75rem; 
    padding:2rem 1.5rem; 
    text-align:center; 
    position:relative; 
    z-index:1;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); 
    transition: box-shadow .3s, z-index .3s, border-color .3s; 
    border:2px solid rgba(22,101,52,.1);
    width: 220px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* Scattered card effect with different rotations */
  .journey-step:nth-child(1){ transform: rotate(-3deg) translateY(-5px); }
  .journey-step:nth-child(2){ transform: rotate(2deg) translateY(8px); }
  .journey-step:nth-child(3){ transform: rotate(-2deg) translateY(-3px); }
  .journey-step:nth-child(4){ transform: rotate(3deg) translateY(5px); }
  
  .journey-step:hover{ 
    transform: rotate(0deg) translateY(-15px) scale(1.05); 
    box-shadow: 0 25px 50px rgba(0,0,0,.2); 
    z-index: 10;
    border-color: var(--primary-color);
    transition: transform .3s, box-shadow .3s, z-index .3s, border-color .3s;
  }
  
  .journey-step h3{ 
    font-size:1.3rem; 
    font-weight:700; 
    margin-bottom:1rem; 
    color:var(--primary-color); 
    line-height: 1.3;
  }
  .journey-step p{ 
    color:var(--text-secondary); 
    font-size:.95rem; 
    line-height: 1.5;
  }
  
  /* ---------- Stats ---------- */
  .stats-row{ display:flex; justify-content:center; gap:4rem; margin-top:4rem; }
  .stat-item{ text-align:center; }
  .stat-number{ font-size:3rem; font-weight:800; color:var(--primary-color); }
  .stat-label{ display:block; color:var(--text-secondary); font-size:1rem; margin-top:.5rem; }
  
  /* ---------- Upload (Get Started) ---------- */
  .upload{ padding:6rem 2rem; position:relative; }
  .upload-area{
    display:grid; grid-template-columns: 1fr 1fr; gap:4rem; align-items:stretch; margin-top:3rem;
  }
  .upload-box{
    background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,250,252,.95) 100%);
    backdrop-filter: blur(10px);
    border: 2px dashed var(--primary-color);
    border-radius: 1rem;
    padding: 2.25rem; /* condensed slightly */
    text-align: center;
    transition:.3s all; cursor:pointer; position:relative; overflow:hidden; box-shadow: 0 4px 20px rgba(0,0,0,.05);
    display:flex; flex-direction:column; height:100%;
  }
  .upload-box:hover{ border-color:var(--primary-dark); transform: translateY(-5px); box-shadow: var(--shadow-xl), 0 0 30px rgba(22,101,52,.2); }
  .upload-icon{ font-size:4rem; margin-bottom:1rem; animation: float 3s ease-in-out infinite; }
  .upload-box h3{ font-size:1.5rem; margin-bottom:1rem; color:var(--text-primary); }
  .upload-box p{ color:var(--text-secondary); margin-bottom:1.5rem; }
  .upload-formats{ 
    position: relative;
    height: 120px;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: .4rem;
    padding: 0 1rem;
  }
  
  .format-badge{ 
    padding:.4rem .9rem; 
    background: #94a3b8;
    border-radius: 20px; 
    font-size:.875rem; 
    color: white;
    font-weight: 500;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transform-origin: center;
    opacity: 0;
    transform: translateY(-300px);
  }
  
  .format-badge.animate {
    animation: badgeFall 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  }
  
  /* Falling animation with different delays and landing positions */
  @keyframes badgeFall {
    0% {
      transform: translateY(-300px) rotate(0deg);
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: translateY(0) rotate(var(--final-rotation));
      opacity: 1;
    }
  }
  
  /* Individual badge animations and rotations for messy heap effect */
  .format-badge.badge-1 {
    animation-delay: 0.1s;
    --final-rotation: -8deg;
    z-index: 7;
  }
  
  .format-badge.badge-2 {
    animation-delay: 0.3s;
    --final-rotation: 5deg;
    z-index: 6;
    margin-left: -10px;
  }
  
  .format-badge.badge-3 {
    animation-delay: 0.5s;
    --final-rotation: -3deg;
    z-index: 5;
  }
  
  .format-badge.badge-4 {
    animation-delay: 0.7s;
    --final-rotation: 7deg;
    z-index: 4;
    margin-left: -5px;
  }
  
  .format-badge.badge-5 {
    animation-delay: 0.9s;
    --final-rotation: -5deg;
    z-index: 3;
    margin-top: -15px;
  }
  
  .format-badge.badge-6 {
    animation-delay: 1.1s;
    --final-rotation: 4deg;
    z-index: 2;
    margin-left: -8px;
    margin-top: -10px;
  }
  
  .format-badge.badge-7 {
    animation-delay: 1.3s;
    --final-rotation: -4deg;
    z-index: 1;
    margin-top: -15px;
    margin-left: 200px;
  }
  
  .format-badge:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.1);
    z-index: 10;
    transition: all 0.3s ease;
  }
  .upload-note{ font-size:.875rem; color:var(--text-secondary); margin-top:1rem; }
  
  .upload-benefits{ display:flex; flex-direction:column; height:100%; }
  .benefits-title{
    font-size:1.5rem; font-weight:700; color:var(--primary-color);
    margin-bottom: 1.25rem; text-align:center;
  }
  .benefits-cards{ display:flex; flex-direction:column; gap:1rem; margin-top:.75rem; }
  
  /* Condensed benefit cards, left icons, hover reactive, no icon animations */
  .benefits-cards .capability-card{
    background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(248,250,252,.9) 100%);
    backdrop-filter: blur(10px);
    border-radius: .75rem;
    border: 1px solid rgba(255,255,255,.2);
    padding: 1rem 1rem !important;
    display:grid !important;
    grid-template-columns: 36px 1fr;
    grid-auto-rows: min-content;
    gap: .25rem .75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }
  .benefits-cards .capability-card:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }
  .benefits-cards .card-icon-big{
    grid-row: 1 / span 2; grid-column: 1;
    align-self: start;
    font-size: 1.4rem !important;
    margin: 0 !important;
    animation: none !important; /* remove icon animations */
  }
  .benefits-cards h3{
    grid-column: 2; margin: 0 0 .25rem 0 !important;
    font-size: 1.1rem !important; line-height:1.2;
  }
  .benefits-cards .capability-description{
    grid-column: 2; margin: 0 0 .5rem 0 !important; font-size: .95rem;
  }
  .benefits-cards .card-features{ grid-column:2; display:flex; flex-wrap:wrap; gap:.4rem; }
  .benefits-cards .feature-tag{ font-size:.8rem; padding:.2rem .5rem; }
  .benefits-cards .card-number, .benefits-cards .sparkles{ display:none !important; }
  
  /* ---------- Demo Section (transparent background) ---------- */
  .demo{ padding:6rem 0; position:relative; overflow:hidden; }
  .demo-content{ text-align:center; }
  .demo-area{ max-width:800px; margin:0 auto 3rem; }
  .demo-screen{
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius:1rem; overflow:hidden; box-shadow: 0 8px 32px rgba(0,0,0,.3); border:1px solid #334155;
  }
  .demo-header{ background:#334155; padding:.75rem; display:flex; gap:.5rem; }
  .dot{ width:12px; height:12px; border-radius:50%; }
  .dot.red{ background:#ef4444; } .dot.yellow{ background:#f59e0b; } .dot.green{ background:#10b981; }
  .demo-body{ padding:3rem; min-height:300px; display:flex; align-items:center; justify-content:center; }
  .report-preview{ padding:2rem; background:#fff; border-radius:10px; }
  .report-preview h4{ font-size:1.25rem; margin-bottom:1.5rem; color:var(--primary-color); }
  .opportunity-list{ display:flex; flex-direction:column; gap:1rem; }
  .opportunity-item{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem; background:var(--surface); border-radius:8px; transition:.3s all;
  }
  .opportunity-item:hover{ background:#fff; box-shadow: var(--shadow-md); }
  .opportunity-name{ flex:1; font-weight:500; }
  .complexity-badge{ padding:.25rem .75rem; border-radius:15px; font-size:.875rem; margin:0 1rem; }
  .complexity-badge.low{ background: rgba(16,185,129,.1); color: var(--success-color); }
  .complexity-badge.medium{ background: rgba(245,158,11,.1); color: var(--warning-color); }
  .complexity-badge.high{ background: rgba(239,68,68,.1); color:#ef4444; }
  .time-saved{ font-weight:600; color:var(--primary-color); }
  .total-savings{ margin-top:1.5rem; padding-top:1.5rem; border-top:2px solid var(--border); text-align:center; font-size:1.25rem; color:var(--primary-color); }
  
  /* ---------- CTA (keep gradient + faint grid overlay) ---------- */
  .cta{
    padding:6rem 0;
    color:#fff;
    text-align:center;
    position:relative; overflow:hidden;
    /* Layer order: top grid (x,y), then green gradient base */
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
      var(--gradient-1);
    background-size: 20px 20px, 20px 20px, auto;
    background-position: top left, top left, center;
  }
  .cta::before{
    content:'';
    position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    pointer-events:none;
  }
  @keyframes rotate{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
  
  .cta-content{ position:relative; z-index:1; }
  .cta-content h2{ font-size:2.5rem; font-weight:800; margin-bottom:1rem; }
  .cta-content p{ font-size:1.2rem; margin-bottom:2rem; opacity:.95; }
  .cta-buttons{ display:flex; justify-content:center; gap:1rem; margin-bottom:2rem; }
  .trust-badges{ display:flex; justify-content:center; gap:2rem; margin-top:2rem; }
  .trust-badge{ padding:.5rem 1rem; background: rgba(255,255,255,0.2); border-radius:2rem; font-weight:600; backdrop-filter: blur(10px); }
  .cta .btn-primary{ background:#fff; color:var(--primary-color); }
  .cta .btn-primary:hover{ background: var(--surface); }
  .cta .btn-secondary{ border-color:#fff; color:#fff; background:transparent; }
  .cta .btn-secondary:hover{ background:#fff; color:var(--primary-color); }
  
  /* ---------- Footer (dark, bronze logo applied above) ---------- */
  .footer{
    background: var(--text-primary);
    color:#fff;
    padding:4rem 0 2rem;
    position:relative; z-index:1;
  }
  .footer-content{ display:grid; grid-template-columns: 1fr 2fr; gap:4rem; margin-bottom:2rem; }
  .footer-brand p{ color:#94a3b8; line-height:1.6; }
  .footer-links{ display:grid; grid-template-columns: repeat(3,1fr); gap:2rem; }
  .footer-column h4{ font-weight:600; margin-bottom:1rem; }
  .footer-column ul{ list-style:none; }
  .footer-column li{ margin-bottom:.5rem; }
  .footer-column a{ color:#94a3b8; text-decoration:none; transition: color .3s ease; }
  .footer-column a:hover{ color:#fff; }
  .footer-bottom{
    border-top:1px solid #334155; padding-top:2rem;
    display:flex; justify-content:space-between; align-items:center; color:#94a3b8;
  }
  .footer-legal{ display:flex; gap:2rem; }
  .footer-legal a{ color:#94a3b8; text-decoration:none; transition: color .3s ease; }
  .footer-legal a:hover{ color:#fff; }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 768px){
    .nav-links{ gap:1rem; }
    .nav-links a{ font-size:.9rem; }
  
    .hero{ flex-direction:column; text-align:center; padding:6rem 1rem 4rem; }
    .hero-title{ font-size:2.5rem; }
    .hero-subtitle-big{ font-size:1.5rem; }
    .hero-buttons{ flex-direction:column; align-items:center; }
  
    .journey-path{ 
      flex-direction:column; 
      gap:1.5rem; 
      padding: 1rem;
    }
    .journey-step {
      width: 85%;
      max-width: 280px;
      height: 160px;
      padding: 1.5rem 1rem;
    }
    /* Maintain scattered effect on mobile with less rotation */
    .journey-step:nth-child(1){ transform: rotate(-2deg) translateX(-5px); }
    .journey-step:nth-child(2){ transform: rotate(1.5deg) translateX(5px); }
    .journey-step:nth-child(3){ transform: rotate(-1.5deg) translateX(-3px); }
    .journey-step:nth-child(4){ transform: rotate(2deg) translateX(3px); }
    
    .journey-step:hover{ 
      transform: rotate(0deg) translateY(-10px) scale(1.02); 
    }
  
    .stats-row{ flex-direction:column; gap:2rem; }
  
    .upload-area{ grid-template-columns: 1fr; gap:2rem; }
    .benefits-cards .capability-card{ grid-template-columns: 32px 1fr; }
    .benefits-cards .card-icon-big{ font-size:1.2rem !important; }
  
    .cta-buttons{ flex-direction:column; align-items:center; }
    .footer-content{ grid-template-columns: 1fr; gap:2rem; }
    .footer-links{ grid-template-columns: 1fr; gap:2rem; }
    .footer-bottom{ flex-direction:column; gap:1rem; text-align:center; }
  }
  
  @media (max-width: 480px){
    .nav{ padding:1rem; }
    .logo-text{ font-size:1.5rem; }
    .hero-title{ font-size:2rem; }
    .section-title{ font-size:2rem; }
    .cta-content h2{ font-size:2rem; }
  }
  
  /* ---------- Misc Decorative ---------- */
  @keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:translateY(0);} }
  
  /* ---------- End of styles.css ---------- */
  /* --- FIX: Bronze logo should be gradient text, not a gradient box --- */
@keyframes bronze-sheen-position {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
  }
  
  .logo-text,
  .footer-logo-text{
    display: inline-block;                             /* helps some engines with clipping */
    background: var(--gradient-bronze) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;   /* WebKit/Blink */
    color: transparent !important;                     /* fallback */
    animation: bronze-sheen-position 8s linear infinite !important;
    /* ensure no stray background-color can leak */
    background-origin: padding-box;
  }
  
  /* Optional: slower sheen on footer */
  .footer-logo-text{
    animation-duration: 10s !important;
  }

  /* ---------- Backed By Section ---------- */
  .backed-by {
    padding: 4rem 0;
    background: transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  .backed-by-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3rem;
    position: relative;
  }

  .backed-by-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--gradient-1);
    border-radius: 2px;
  }

  .carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2rem 0;
  }

  .carousel-wrapper::before,
  .carousel-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  .carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--grid-bg), transparent);
  }

  .carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--grid-bg), transparent);
  }

  .partner-logos-carousel {
    overflow: hidden;
    position: relative;
  }

  .carousel-track {
    display: flex;
    animation: scroll-logos 30s linear infinite;
    gap: 4rem;
  }

  @keyframes scroll-logos {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .carousel-track:hover {
    animation-play-state: paused;
  }

  .partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(22, 101, 52, 0.08);
    border-radius: 12px;
    min-height: 100px;
    min-width: 200px;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }

  .partner-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(22, 101, 52, 0.15);
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 1);
  }

  .partner-logo img {
    max-width: 150px;
    max-height: 60px;
    width: auto;
    height: auto;
    transition: all 0.3s ease;
  }

  .partner-logo:hover img {
    transform: scale(1.1);
  }

  /* Special styling for larger logos */
  .partner-logo img[alt="Union Labs Ventures"] {
    max-width: 293px;  /* 225px + 30% */
    max-height: 117px;  /* 90px + 30% */
  }

  .partner-logo img[alt="Google for Startups"] {
    max-width: 195px;  /* 150px + 30% */
    max-height: 78px;  /* 60px + 30% */
  }

  .partner-logo img[alt="AWS Activate"] {
    max-width: 195px;  /* 150px + 30% */
    max-height: 78px;  /* 60px + 30% */
  }

  .logo-placeholder {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Mobile responsive for backed-by section */
  @media (max-width: 768px) {
    .carousel-track {
      animation-duration: 20s;
      gap: 2rem;
    }
    
    .partner-logo {
      min-width: 150px;
      padding: 1rem;
    }

    .partner-logo img {
      max-width: 120px;
      max-height: 50px;
    }

    /* Special styling for larger logos on tablet */
    .partner-logo img[alt="Union Labs Ventures"] {
      max-width: 234px;  /* 180px + 30% */
      max-height: 98px;  /* 75px + 30% */
    }

    .partner-logo img[alt="Google for Startups"] {
      max-width: 156px;  /* 120px + 30% */
      max-height: 65px;  /* 50px + 30% */
    }

    .partner-logo img[alt="AWS Activate"] {
      max-width: 156px;  /* 120px + 30% */
      max-height: 65px;  /* 50px + 30% */
    }
    
    .backed-by-title {
      font-size: 1.75rem;
    }
  }

  @media (max-width: 480px) {
    .carousel-track {
      animation-duration: 15s;
      gap: 1.5rem;
    }
    
    .partner-logo {
      min-width: 130px;
      padding: 0.75rem;
      min-height: 80px;
    }

    .partner-logo img {
      max-width: 100px;
      max-height: 40px;
    }

    /* Special styling for larger logos on mobile */
    .partner-logo img[alt="Union Labs Ventures"] {
      max-width: 195px;  /* 150px + 30% */
      max-height: 78px;  /* 60px + 30% */
    }

    .partner-logo img[alt="Google for Startups"] {
      max-width: 130px;  /* 100px + 30% */
      max-height: 52px;  /* 40px + 30% */
    }

    .partner-logo img[alt="AWS Activate"] {
      max-width: 130px;  /* 100px + 30% */
      max-height: 52px;  /* 40px + 30% */
    }

    .carousel-wrapper::before,
    .carousel-wrapper::after {
      width: 50px;
    }
  }