/* ============================================ PREMIUM LANDING PAGE — ai-invoicemaker.com ============================================ */:root{ --primary:#2563eb; --primary-dark:#1e40af; --primary-light:#3b82f6; --secondary:#64748b; --accent:#f59e0b; --bg-light:#f8fafc; --bg-white:#ffffff; --text-dark:#0f172a; --text-light:#475569; --gradient-hero:linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #ffffff 100%); --gradient-primary:linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%); --gradient-dark:linear-gradient(135deg, #0f172a 0%, #1e293b 100%); --shadow-card:0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); --shadow-hover:0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); --shadow-elevated:0 20px 60px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06); --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --transition-fast:0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth:0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-spring:0.5s cubic-bezier(0.34, 1.56, 0.64, 1);}*,*::before,*::after{ box-sizing:border-box;}body{ font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; margin:0; padding:0; color:var(--text-dark); background:var(--bg-white); line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;}h1, h2, h3, h4{ font-weight:800; line-height:1.15; margin-bottom:1rem; letter-spacing:-0.03em;}h1{font-size:clamp(2.5rem, 5vw, 3.75rem);}h2{font-size:clamp(2rem, 4vw, 2.75rem);}h3{font-size:1.35rem;}p{ color:var(--text-light); font-size:1.1rem; margin-bottom:1.5rem; line-height:1.75;}.container{ max-width:1200px; margin:0 auto; padding:0 2rem;}.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center;}.grid-3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.75rem;}.grid-4{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.75rem;}.reveal{ opacity:0; transform:translateY(32px); transition:opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);}.reveal.visible{ opacity:1; transform:translateY(0);}.reveal-delay-1{transition-delay:0.1s;}.reveal-delay-2{transition-delay:0.2s;}.reveal-delay-3{transition-delay:0.3s;}.reveal-delay-4{transition-delay:0.4s;}.reveal-delay-5{transition-delay:0.5s;}nav{ padding:1rem 0; position:sticky; top:0; background:rgba(255, 255, 255, 0.72); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); z-index:1000; border-bottom:1px solid rgba(226, 232, 240, 0.6); transition:all var(--transition-fast);}nav .container{ display:flex; justify-content:space-between; align-items:center;}nav.scrolled{ padding:0.6rem 0; box-shadow:0 4px 30px rgba(0, 0, 0, 0.04);}.logo{ font-size:1.5rem; font-weight:900; color:var(--primary); text-decoration:none; letter-spacing:-0.5px; display:flex; align-items:center; gap:0.5rem; transition:transform var(--transition-fast);}.logo:hover{ transform:scale(1.02);}.logo i{ font-size:1.3rem;}.nav-links{ display:flex; gap:2rem; align-items:center;}.nav-links a{ text-decoration:none; color:var(--text-dark); font-weight:500; font-size:0.95rem; transition:color var(--transition-fast); position:relative;}.nav-links a:not(.btn)::after{ content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--primary); border-radius:2px; transition:width var(--transition-smooth);}.nav-links a:not(.btn):hover::after{ width:100%;}.nav-links a:hover{ color:var(--primary);}.nav-links .btn-primary{ color:white !important;}.nav-links .btn-primary::after{ display:none;}.btn{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.8rem 1.75rem; border-radius:50px; text-decoration:none; font-weight:600; font-size:0.95rem; transition:all var(--transition-smooth); cursor:pointer; border:2px solid transparent; position:relative; overflow:hidden;}.btn-primary{ background:var(--gradient-primary); color:white; box-shadow:0 4px 15px rgba(37, 99, 235, 0.3), 0 1px 3px rgba(37, 99, 235, 0.2);}.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(37, 99, 235, 0.2);}.btn-primary:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(37, 99, 235, 0.3);}.btn-outline{ border-color:rgba(37, 99, 235, 0.3); color:var(--primary); background:rgba(37, 99, 235, 0.04);}.btn-outline:hover{ background:var(--primary); border-color:var(--primary); color:white; box-shadow:0 4px 15px rgba(37, 99, 235, 0.3);}.btn-hero-glow{ position:relative; overflow:hidden; padding:1rem 2.25rem; font-size:1.05rem; letter-spacing:0.3px; background:var(--gradient-primary); border:none;}.btn-hero-glow::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent); transition:left 0.6s ease;}.btn-hero-glow:hover::before{ left:100%;}.btn-hero-glow:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 12px 35px rgba(37, 99, 235, 0.4);}.btn-hero-glow i{ transition:transform var(--transition-smooth); margin-right:6px;}.btn-hero-glow:hover i{ transform:rotate(90deg);}.btn-hero-glow{ animation:glow-pulse 3s ease-in-out infinite;}@keyframes glow-pulse{ 0%, 100%{box-shadow:0 4px 15px rgba(37, 99, 235, 0.3);} 50%{box-shadow:0 4px 25px rgba(37, 99, 235, 0.5), 0 0 40px rgba(37, 99, 235, 0.15);}}.hero{ padding:7rem 0 5rem; background:var(--gradient-hero); overflow:hidden; position:relative;}.hero::before{ content:''; position:absolute; top:-120px; right:-80px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%); animation:float-orb 8s ease-in-out infinite; pointer-events:none;}.hero::after{ content:''; position:absolute; bottom:-60px; left:-40px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%); animation:float-orb 10s ease-in-out infinite reverse; pointer-events:none;}@keyframes float-orb{ 0%, 100%{transform:translate(0, 0) scale(1);} 33%{transform:translate(20px, -30px) scale(1.05);} 66%{transform:translate(-15px, 15px) scale(0.95);}}.hero-content h1 span{ background:linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}.hero-image img{ width:100%; max-width:600px; border-radius:var(--radius-xl); box-shadow:var(--shadow-elevated); transform:perspective(1200px) rotateY(-4deg) rotateX(3deg); transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);}.hero-image img:hover{ transform:perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.02); box-shadow:0 30px 80px rgba(0, 0, 0, 0.15);}.trust-badges{ display:flex; align-items:center; flex-wrap:wrap; gap:0.25rem;}.stats-row{ display:flex; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgba(226, 232, 240, 0.8);}.stat-item{ position:relative;}.stat-item strong{ display:block; font-size:1.5rem; color:var(--text-dark); font-weight:800; letter-spacing:-0.02em;}.stat-item span{ font-size:0.85rem; color:var(--secondary); font-weight:500;}.section{ padding:6rem 0;}.bg-light{ background:var(--bg-light);}.text-center{ text-align:center;}.section-header{ max-width:680px; margin:0 auto 3.5rem; text-align:center;}.section-header p{ font-size:1.15rem; color:var(--secondary);}.feature-card{ background:white; padding:2.25rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); transition:all var(--transition-smooth); border:1px solid rgba(226, 232, 240, 0.6); position:relative; overflow:hidden;}.feature-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-primary); transform:scaleX(0); transform-origin:left; transition:transform var(--transition-smooth);}.feature-card:hover::before{ transform:scaleX(1);}.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(37, 99, 235, 0.12);}.icon-box{ width:56px; height:56px; background:linear-gradient(135deg, #eff6ff, #dbeafe); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:var(--primary); margin-bottom:1.25rem; transition:all var(--transition-smooth);}.feature-card:hover .icon-box{ background:var(--gradient-primary); color:white; transform:scale(1.08) rotate(-3deg); box-shadow:0 6px 20px rgba(37, 99, 235, 0.25);}.step-card{ text-align:center; position:relative; padding:1rem;}.step-number{ width:48px; height:48px; background:var(--gradient-primary); color:white; font-weight:700; font-size:1.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; position:relative; z-index:2; box-shadow:0 4px 15px rgba(37, 99, 235, 0.3); transition:all var(--transition-smooth);}.step-card:hover .step-number{ transform:scale(1.1); box-shadow:0 6px 25px rgba(37, 99, 235, 0.4);}.step-card::after{ content:''; position:absolute; top:24px; left:60%; width:calc(100% - 20%); height:2px; background:linear-gradient(90deg, rgba(37,99,235,0.3), rgba(37,99,235,0.05)); z-index:1;}.step-card:last-child::after{ display:none;}.testimonial-card{ background:white; padding:2rem 2rem 1.75rem; border-radius:var(--radius-lg); box-shadow:var(--shadow-card); border:1px solid rgba(226, 232, 240, 0.6); transition:all var(--transition-smooth); position:relative;}.testimonial-card::before{ content:'\201C'; position:absolute; top:1rem; right:1.5rem; font-size:4rem; line-height:1; color:rgba(37, 99, 235, 0.08); font-family:Georgia, serif; pointer-events:none;}.testimonial-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover);}.stars{ color:var(--accent); margin-bottom:0.75rem; font-size:1.1rem; letter-spacing:2px;}.testimonial-card p{ font-size:1rem; line-height:1.7; color:var(--text-light); font-style:italic;}.user-profile{ display:flex; align-items:center; gap:0.75rem; margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid rgba(226, 232, 240, 0.6);}.avatar{ width:46px; height:46px; background:linear-gradient(135deg, #eff6ff, #dbeafe); border-radius:50%; font-size:1.25rem; display:flex; align-items:center; justify-content:center;}.user-profile strong{ font-size:0.95rem;}.user-profile small{ color:var(--secondary); font-size:0.8rem;}.faq-item{ background:white; border-radius:var(--radius-md); margin-bottom:0.75rem; border:1px solid rgba(226, 232, 240, 0.6); overflow:hidden; transition:all var(--transition-fast);}.faq-item:hover{ border-color:rgba(37, 99, 235, 0.15);}.faq-item.active{ border-color:rgba(37, 99, 235, 0.2); box-shadow:0 4px 20px rgba(37, 99, 235, 0.06);}.faq-question{ padding:1.25rem 1.5rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1rem; transition:color var(--transition-fast); user-select:none;}.faq-question:hover{ color:var(--primary);}.faq-question i{ transition:transform var(--transition-smooth); color:var(--secondary); font-size:0.85rem;}.faq-item.active .faq-question i{ transform:rotate(180deg); color:var(--primary);}.faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding:0 1.5rem; color:var(--text-light); line-height:1.7;}.faq-item.active .faq-answer{ max-height:300px; padding:0 1.5rem 1.25rem;}.cta-section{ background:var(--gradient-dark); color:white; border-radius:var(--radius-xl); padding:5rem 2rem; margin:3rem auto; text-align:center; position:relative; overflow:hidden;}.cta-section::before{ content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(37, 99, 235, 0.15), transparent 60%); animation:float-orb 12s ease-in-out infinite;}.cta-section::after{ content:''; position:absolute; bottom:-30%; left:-10%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(245, 158, 11, 0.08), transparent 60%); animation:float-orb 9s ease-in-out infinite reverse;}.cta-content{ position:relative; z-index:2;}.cta-section h2{ color:white; font-size:clamp(1.75rem, 3vw, 2.25rem);}.cta-section p{ color:rgba(255, 255, 255, 0.7); font-size:1.1rem; max-width:500px; margin:0 auto 1.5rem;}footer{ background:var(--bg-light); padding:4rem 0 2rem; border-top:1px solid rgba(226, 232, 240, 0.8);}.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem;}.footer-col h4{ margin-bottom:1.25rem; font-size:0.95rem; font-weight:700;}.footer-links{ list-style:none; padding:0;}.footer-links li{ margin-bottom:0.6rem;}.footer-links a{ text-decoration:none; color:var(--secondary); font-size:0.95rem; transition:all var(--transition-fast);}.footer-links a:hover{ color:var(--primary); padding-left:4px;}.copyright{ text-align:center; padding-top:2rem; border-top:1px solid rgba(226, 232, 240, 0.6); color:var(--secondary); font-size:0.9rem;}@media (max-width:768px){ .grid-2{ grid-template-columns:1fr; gap:2rem;} .hero{ padding:5rem 0 3rem;} .hero-image{ display:none;} .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem;} .step-card::after{ display:none;} .stats-row{ gap:1.5rem;} nav{ padding:1rem;} .nav-links{ gap:1rem;} .section{ padding:4rem 0;}}@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr;} .stats-row{ flex-direction:column; gap:1rem;}}