/* styles.css - extracted from index.html */

/* CSS Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root{
    --bg:#0b0f1a; --surface:#0f1629; --text:#e6e9f2; --muted:#98a2b3;
    --primary:#7c5cff; --primary-2:#4cc9f0; --border:#1f2a44;
    --success:#22c55e; --warning:#f59e0b; --danger:#ef4444;
    --gradient: linear-gradient(135deg,#7c5cff 0%,#4cc9f0 100%);
    --radius:12px; --transition: all 0.3s ease;
}
html,body{height:100%}
body{
    background-color:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
    font-size:16px; line-height:26px; -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-weight:700; line-height:1.2; margin-bottom:1rem;}
h1{font-size:48px; line-height:56px;} h2{font-size:36px; line-height:44px;} h3{font-size:28px; line-height:36px;}
p{margin-bottom:1.5rem}
a{color:var(--primary); text-decoration:none; transition:var(--transition)}
img{max-width:100%; height:auto}

/* Utilities */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.text-center{text-align:center}
.muted{color:var(--muted)}
.mono{font-family:'Space Mono',monospace}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; border-radius:var(--radius); font-weight:600; font-size:16px; cursor:pointer; transition:var(--transition); border:none; outline:none}
.btn-primary{background:var(--gradient); color:white}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(124,92,255,0.3)}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-secondary:hover{background:rgba(255,255,255,0.05); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--text); position:relative}
.btn-ghost::after{content:''; position:absolute; bottom:8px; left:24px; right:24px; height:1px; background:var(--primary); transform:scaleX(0); transition:transform 0.3s ease}
.btn-ghost:hover::after{transform:scaleX(1)}
.card{background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:var(--radius); padding:32px; backdrop-filter:blur(6px); transition:var(--transition)}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(124,92,255,0.1)}
.badge{display:inline-block; padding:4px 12px; border-radius:20px; font-size:14px; font-weight:600}
.badge-success{background-color:var(--success); color:var(--bg)}
.badge-warning{background-color:var(--warning); color:var(--bg)}
.badge-danger{background-color:var(--danger); color:var(--bg)}

/* Header */
header{position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(11,15,26,0); backdrop-filter:blur(0); border-bottom:1px solid transparent; transition:var(--transition); padding:16px 0}
header.scrolled{background:rgba(11,15,26,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); box-shadow:0 4px 20px rgba(0,0,0,0.2); padding:8px 0}
.header-container{display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0 24px}
.logo{display:flex; align-items:center; gap:12px}
.logo svg{width:32px; height:32px}
.logo-text{font-weight:700; font-size:20px}
nav[role="navigation"] ul{display:flex; list-style:none; gap:32px; margin:0}
nav a{color:var(--text); font-weight:500; position:relative}
nav a::after{content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--gradient); transition:width 0.3s ease}
nav a:hover::after{width:100%}
.header-actions{display:flex; gap:16px}
.mobile-toggle{display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer}

/* HERO */
.hero{padding:180px 0 96px; position:relative; overflow:hidden;
    background:
        radial-gradient(ellipse at 70% 20%, rgba(124,92,255,0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(76,201,240,0.1) 0%, transparent 60%);
}
.hero::before{
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-43...z' fill='%231f2a44' fill-opacity='0.2'/%3E%3C/svg%3E");
    opacity:0.3; z-index:-1; background-repeat:repeat;
}

.hero-content{max-width:600px; position:relative; z-index:2}
.hero-title{font-size:52px; line-height:60px; margin-bottom:24px; background:linear-gradient(to right,#e6e9f2,#98a2b3); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-title span{background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-subtitle{font-size:20px; line-height:32px; margin-bottom:32px; color:var(--muted)}
.hero-actions{display:flex; gap:16px; margin-bottom:64px}
.hero-visual{position:relative; display:flex; justify-content:center; align-items:center}

.floating-dashboard{position:relative; width:100%; max-width:500px; animation:float 6s ease-in-out infinite}
.dashboard-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:0 10px 30px rgba(0,0,0,0.3); backdrop-filter:blur(10px)}
.dashboard-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.dashboard-title{font-size:18px; font-weight:600}
.score-circle{width:80px; height:80px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-size:24px; font-weight:700; color:white; position:relative}
.score-circle::after{content:'/100'; position:absolute; bottom:-20px; font-size:14px; color:var(--muted)}
.dashboard-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}

.metric{display:flex; flex-direction:column; align-items:center; padding:12px; background:rgba(255,255,255,0.03); border-radius:8px}
.metric-value{font-family:'Space Mono',monospace; font-size:20px; font-weight:700; margin-bottom:4px}
.metric-label{font-size:12px; color:var(--muted)}

.floating-element{position:absolute; border-radius:8px; background:rgba(255,255,255,0.05); backdrop-filter:blur(5px); border:1px solid var(--border); padding:12px; display:flex; align-items:center; gap:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); animation:float-secondary 4s ease-in-out infinite}
.floating-element:nth-of-type(1){top:-20px; right:40px; animation-delay:0s}
.floating-element:nth-of-type(2){bottom:40px; left:-20px; animation-delay:1s}
.floating-element:nth-of-type(3){bottom:-10px; right:20px; animation-delay:2s}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float-secondary{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(2deg)}}

/* Social Proof */
.social-proof{padding:48px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.logos{display:flex; justify-content:center; align-items:center; gap:48px; flex-wrap:wrap}
.logo-placeholder{width:120px; height:40px; background:var(--surface); border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px}

/* Features */
.features{padding:96px 0}
.section-header{text-align:center; max-width:700px; margin:0 auto 64px}
.section-subtitle{color:var(--muted); font-size:18px}
.feature-icon{width:48px; height:48px; background:rgba(124,92,255,0.1); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:20px}
.feature-icon svg{width:24px; height:24px; color:var(--primary)}

/* How it works */
.how-it-works{padding:96px 0; background:var(--surface)}
.step{display:flex; flex-direction:column; align-items:center; text-align:center}
.step-number{width:48px; height:48px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:24px}

/* Demo */
.live-demo{padding:96px 0; background:var(--bg); position:relative}
.demo-container{background:var(--surface); border-radius:var(--radius); padding:32px; border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.2); overflow:hidden}
.demo-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px}
.demo-tabs{display:flex; gap:8px; margin-bottom:24px; background:rgba(255,255,255,0.03); border-radius:8px; padding:4px}
.demo-tab{padding:8px 16px; border-radius:6px; background:transparent; border:none; color:var(--text); cursor:pointer; transition:var(--transition); font-weight:500}
.demo-tab.active{background:var(--primary)}
.demo-content{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.demo-visualization{background:rgba(255,255,255,0.02); border-radius:8px; padding:20px; border:1px solid var(--border)}
.provider-filters{display:flex; gap:8px}
.provider-filter{padding:4px 8px; border-radius:4px; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text); font-size:12px; cursor:pointer}
.provider-filter.active{background:var(--primary); border-color:var(--primary)}
.placement-chart{display:grid; grid-template-columns:100px 1fr; gap:12px; align-items:center}
.placement-label{font-size:14px; color:var(--muted)}
.placement-bar{height:24px; border-radius:12px; background:rgba(255,255,255,0.05); overflow:hidden; position:relative}
.placement-fill{height:100%; border-radius:12px; transition:width 0.5s ease}
.inbox-fill{background:var(--success); width:85%}
.promotions-fill{background:var(--warning); width:10%}
.spam-fill{background:var(--danger); width:5%}
.demo-stats{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px}
.demo-stat{background:rgba(255,255,255,0.03); border-radius:8px; padding:16px; text-align:center}
.demo-stat-value{font-family:'Space Mono',monospace; font-size:24px; font-weight:700; margin-bottom:4px}
.demo-stat-label{font-size:12px; color:var(--muted)}
.demo-controls{display:flex; flex-direction:column; gap:20px}
.control-group{display:flex; flex-direction:column; gap:8px}
.control-label{font-size:14px; font-weight:600}
.control-input, .control-select{background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:6px; padding:10px 12px; color:var(--text); font-family:'Inter',sans-serif}
.control-actions{display:flex; gap:12px; margin-top:8px}
.control-btn{padding:8px 16px; border-radius:6px; background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text); cursor:pointer; transition:var(--transition); font-size:14px}
.control-btn.primary{background:var(--primary); border-color:var(--primary)}
.control-btn:hover{transform:translateY(-1px)}

/* Outcomes */
.outcomes{padding:96px 0; background:var(--surface)}
.outcomes-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.metric-comparison{width:100%; max-width:400px}
.metric-bar{display:flex; align-items:center; margin-bottom:24px}
.metric-info{width:120px; font-size:14px; color:var(--muted)}
.metric-visual{flex:1; display:flex; align-items:center}
.metric-before, .metric-after{height:24px; border-radius:12px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font-size:12px; font-weight:600; color:white; position:relative; transition:width 1s ease}
.metric-before{background:rgba(255,255,255,0.1); width:40%; margin-right:8px}
.metric-after{background:var(--gradient); width:85%}
.metric-arrow{margin:0 12px; color:var(--primary)}
.outcomes-stats{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px}
.outcome-stat{text-align:center; padding:20px; background:rgba(255,255,255,0.03); border-radius:12px; border:1px solid var(--border)}
.outcome-value{font-family:'Space Mono',monospace; font-size:36px; font-weight:700; margin-bottom:8px; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
.outcome-label{font-size:14px; color:var(--muted)}

/* Pricing */
.pricing-preview{padding:96px 0}
.pricing-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.pricing-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column}
.pricing-card.featured{border-color:var(--primary); transform:scale(1.05); position:relative}
.pricing-card.featured::before{content:'Most Popular'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gradient); color:white; padding:4px 16px; border-radius:20px; font-size:12px; font-weight:600}
.pricing-header{margin-bottom:24px}
.pricing-name{font-size:24px; margin-bottom:8px}
.pricing-price{font-family:'Space Mono',monospace; font-size:40px; font-weight:700; margin-bottom:8px}
.pricing-period{color:var(--muted)}
.pricing-features{flex-grow:1; margin-bottom:32px}
.pricing-feature{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.pricing-feature svg{width:16px; height:16px; color:var(--success)}

/* Testimonials */
.testimonials{padding:96px 0}
.testimonial-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.testimonial-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px}
.testimonial-text{font-style:italic; margin-bottom:24px}
.testimonial-author{display:flex; align-items:center; gap:12px}
.testimonial-avatar{width:48px; height:48px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:white; font-weight:700}
.testimonial-info h4{margin-bottom:4px}
.testimonial-info p{margin-bottom:0; color:var(--muted); font-size:14px}

/* Final CTA */
.final-cta{padding:128px 0; background:var(--surface); text-align:center}
.final-cta h2{margin-bottom:24px}
.final-cta p{max-width:600px; margin:0 auto 32px; color:var(--muted)}

/* Footer */
footer{background:var(--bg); border-top:1px solid var(--border); padding:80px 0 32px; position:relative}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px}
.footer-description{color:var(--muted); margin-bottom:24px; max-width:300px}
.footer-newsletter{display:flex; flex-direction:column; gap:12px; margin-bottom:24px}
.footer-newsletter-input{display:flex; gap:8px}
.footer-newsletter input{flex-grow:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; color:var(--text)}
.footer-newsletter button{background:var(--gradient); color:white; border:none; border-radius:var(--radius); padding:12px 20px; cursor:pointer; font-weight:600; transition:var(--transition)}
.footer-newsletter button:hover{transform:translateY(-2px)}
.footer-consent{font-size:12px; color:var(--muted)}
.footer-heading{font-size:18px; margin-bottom:20px; color:var(--text)}
.footer-links{list-style:none}
.footer-links li{margin-bottom:12px}
.footer-links a{color:var(--muted); display:flex; align-items:center; gap:8px}
.footer-links a:hover{color:var(--primary)}
.footer-links a i{font-size:14px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:32px; border-top:1px solid var(--border)}
.footer-copyright{color:var(--muted)}
.footer-social{display:flex; gap:16px}
.footer-social a{color:var(--muted); font-size:18px; transition:var(--transition)}
.footer-social a:hover{color:var(--primary); transform:translateY(-2px)}
.status-dot{display:inline-flex; align-items:center; gap:8px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--success); animation:pulse 2s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:0.5}100%{opacity:1}}

/* Responsive */
@media (max-width:1024px){
    .grid-2, .grid-3, .stats, .pricing-cards, .testimonial-cards { grid-template-columns:1fr 1fr }
    .footer-grid{grid-template-columns:1fr 1fr 1fr}
    .outcomes-grid, .demo-content{grid-template-columns:1fr}
}
@media (max-width:768px){
    h1{font-size:36px; line-height:44px}
    h2{font-size:28px; line-height:36px}
    .hero-title{font-size:40px; line-height:48px}
    .grid-2, .grid-3, .stats, .pricing-cards, .testimonial-cards{grid-template-columns:1fr}
    .hero-actions{flex-direction:column}
    .mobile-toggle{display:block}
    nav{position:fixed; top:70px; left:0; right:0; background:var(--surface); padding:24px; transform:translateY(-100%); opacity:0; visibility:hidden; transition:var(--transition); border-bottom:1px solid var(--border)}
    nav.active{transform:translateY(0); opacity:1; visibility:visible}
    nav ul{flex-direction:column; gap:16px}
    .header-actions{display:none}
    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column; gap:16px; text-align:center}
    .demo-content{grid-template-columns:1fr}

    /* ensure newsletter stacks last on mobile */
    .footer-newsletter-col { order: 999; }
}
@media (max-width:576px){
    .container{padding:0 16px}
    .hero{padding:140px 0 64px}
    .features, .how-it-works, .live-demo, .outcomes, .pricing-preview, .testimonials, .final-cta{padding:64px 0}
    .demo-stats, .outcomes-stats{grid-template-columns:1fr}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important}
}
button:focus, a:focus, input:focus{outline:2px solid var(--primary); outline-offset:2px}

/* small helpers */
.sr-only{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}