/* ============================================================
   landing-index.css
   Styles for Landing Index: hero section + ClientsStrip.
   HowItWorksSection / LandingActionableSection / FinalCtaSection
   styles live in <style> blocks inside Index.cshtml — intentional.
   ============================================================ */

/* ── Legacy Navbar (markup is commented out; kept for reference) ── */
.main-menu { max-width:1920px; margin:0 auto; padding:0 24px; height:64px; display:flex; justify-content:space-between; align-items:center; position:absolute; top:24px; left:0; right:0; box-sizing:border-box; z-index:100; }
.logo-holder .logo-img { width:32px; height:32px; }
.menu-items { display:flex; gap:40px; }
.menu-items a { text-decoration:none; color:white; font-size:18px; font-weight:500; }
.onboarding-actions { display:flex; gap:24px; }
.btn-login { background-color:transparent; color:#F3F3F3; border:1px solid #F3F3F3; }
.btn-login:hover { background-color:#F3F3F3; color:#773BF1; }
.btn-signup { background-color:#F3F3F3; color:#773BF1; }
.btn-signup:hover { background-color:#ddd; }

/* ── Hero Container ── */
.landing-container { width:100%; position:relative; background-image:url('../assets/img/Hero BG.png'); background-size:cover; background-position:center top; height:962px; min-height:100vh; box-sizing:border-box; }

/* ── Hero Section ── */
.hero-section { position:absolute; top:98px; left:0; width:100%; height:864px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; padding:0 24px; box-sizing:border-box; }

/* ── Decorative Images ── */
.joystick-shadow,.joystick,.chart-shadow,.hero-chart { position:absolute; transition:opacity 0.5s ease-in-out; }
.joystick-shadow { width:562px; height:619px; left:0; top:156px; mix-blend-mode:multiply; }
.joystick        { width:481px; height:563px; left:0; top:156px; }
.chart-shadow    { width:482px; height:617px; right:0; top:156px; mix-blend-mode:multiply; }
.hero-chart      { width:472px; height:473px; right:0; top:156px; }

/* ── Hero Content ── */
.hero-content { max-width:954px; margin-top:100px; display:flex; flex-direction:column; align-items:center; gap:32px; text-align:center; z-index:20; color:#F2F6FD; }
.hero-badge { padding:8px 32px; border-radius:12px; border:0.2px solid white; display:inline-flex; align-items:center; gap:10px; color:#F2F6FD; font-size:18px; font-weight:700; }
.analysis-icon { width:21px; height:24px; }
.hero-headlines { width:100%; overflow:visible; text-align:center; }
.hero-headlines h1 { color:#F2F6FD !important; font-size:clamp(24px,3.5vw,48px); font-weight:700; line-height:1; margin:0; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block; max-width:100% !important; }
.hero-headlines h2 { color:#F2F6FD !important; font-size:clamp(16px,2.2vw,28px); font-weight:600; line-height:1.2; margin-top:24px; margin-bottom:0; white-space:normal !important; overflow:visible !important; text-overflow:unset !important; display:block; max-width:100% !important; }
.hero-description { max-width:750px; color:rgba(249,251,255,0.8); font-size:22px; font-weight:500; line-height:1.25; margin:0; }
.hero-cta-buttons { display:flex; justify-content:center; gap:15px; margin-top:16px; flex-wrap:wrap; }
.btn-primary-cta,.btn-secondary-cta { width:261px; height:59px; padding:16px 28px; border-radius:12px; font-size:16px; font-weight:500; cursor:pointer; box-sizing:border-box; display:flex; justify-content:center; align-items:center; transition:transform 0.2s; }
.btn-primary-cta:hover,.btn-secondary-cta:hover { transform:translateY(-2px); }
.btn-primary-cta  { background:#F3F3F3; color:#6227ED; border:none; }
.btn-secondary-cta { background:transparent; color:white; border:1px solid white; }

/* ── ClientsStrip ── */
.ClientsStrip { background:linear-gradient(180deg,#0c0a1e 0%,#0e0b22 100%); border-top:1px solid rgba(124,58,237,0.18); border-bottom:1px solid rgba(124,58,237,0.18); padding:28px 0; }
.ClientsStripInner { max-width:1280px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.ClientsStripLabel { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#94a3b8; flex-shrink:0; white-space:nowrap; }
.client-logo { height:68px; width:auto; max-width:160px; object-fit:contain; border-radius:10px; filter:grayscale(1) opacity(0.5); transition:filter 0.25s ease; }
.client-logo:hover { filter:grayscale(0) opacity(1); }

/* ── Responsive ── */
@media (max-width:1850px) {
    .joystick-shadow,.joystick,.chart-shadow,.hero-chart { opacity:0.5; }
    .hero-headlines h1 { font-size:clamp(24px,3.5vw,48px); }
    .hero-headlines h2 { font-size:clamp(16px,2.4vw,28px); }
    .hero-description  { font-size:18px; }
}
@media (max-width:1500px) {
    .joystick-shadow,.joystick,.chart-shadow,.hero-chart { opacity:0.3; }
}
@media (max-width:992px) {
    .menu-items { display:none; }
    .hero-section { align-items:center; text-align:center; }
    .hero-content { margin-top:0; }
    .joystick-shadow,.joystick,.chart-shadow,.hero-chart { display:none; }
    .hero-headlines h1 { font-size:clamp(24px,3.5vw,48px); }
    .hero-headlines h2 { font-size:clamp(16px,3.5vw,20px); }
}
@media (max-width:768px) {
    .landing-container { height:auto; min-height:100vh; padding-bottom:50px; }
    .main-menu { flex-direction:row; justify-content:space-between; padding:0 16px; }
    .onboarding-actions { gap:12px; }
    .hero-section { position:static; height:auto; padding-top:120px; }
    .hero-badge { font-size:14px; padding:6px 16px; }
    .analysis-icon { width:18px; height:21px; }
    .hero-description { font-size:16px; }
    .hero-headlines h1 { font-size:clamp(18px,5vw,48px); line-height:1.1; }
    .hero-headlines h2 { font-size:clamp(12px,4.5vw,16px); line-height:1.3; }
    .hero-cta-buttons { flex-direction:column; align-items:center; width:100%; }
    .btn-primary-cta,.btn-secondary-cta { width:100%; max-width:280px; font-size:18px; }
    .ClientsStripInner { gap:24px; padding:0 16px; }
    .ClientsStripLabel { width:100%; text-align:center; margin-bottom:4px; }
    .client-logo { height:44px; max-width:110px; border-radius:8px; }
}
/* landing-index.css */