/* ============================================ PREMIUM SHARED PAGES — ai-invoicemaker.com Landing pages, Blog, About, Contact, Reviews, 404 ============================================ */.page-hero{ padding:5rem 0 3.5rem; text-align:center; position:relative; overflow:hidden;}.page-hero::before{ content:''; position:absolute; top:-100px; right:-60px; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%); animation:hero-orb 10s ease-in-out infinite; pointer-events:none;}.page-hero::after{ content:''; position:absolute; bottom:-80px; left:-40px; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%); animation:hero-orb 8s ease-in-out infinite reverse; pointer-events:none;}@keyframes hero-orb{ 0%, 100%{transform:translate(0, 0) scale(1);} 50%{transform:translate(20px, -25px) scale(1.08);}}.page-hero h1{ font-size:clamp(2rem, 4.5vw, 2.75rem); margin-bottom:1rem; line-height:1.15; letter-spacing:-0.03em; color:white; position:relative; z-index:1;}.page-hero p{ font-size:1.1rem; opacity:0.9; max-width:680px; margin:0 auto 2rem; color:rgba(255,255,255,0.9); line-height:1.7; position:relative; z-index:1;}.page-hero .container{ position:relative; z-index:1;}.hero-blue{background:linear-gradient(135deg, #0f2d59 0%, #2563eb 100%);}.hero-green{background:linear-gradient(135deg, #064e3b 0%, #059669 100%);}.hero-teal{background:linear-gradient(135deg, #134e4a 0%, #0d9488 100%);}.hero-emerald{background:linear-gradient(135deg, #14532d 0%, #16a34a 100%);}.hero-purple{background:linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);}.hero-navy{background:linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);}.hero-trust{ margin-top:1.5rem; font-size:0.88rem; opacity:0.85; color:rgba(255,255,255,0.85); position:relative; z-index:1;}.hero-breadcrumb{ font-size:0.85rem; margin-bottom:1rem; position:relative; z-index:1;}.hero-breadcrumb a{ color:rgba(255,255,255,0.75); text-decoration:none; transition:color 0.2s;}.hero-breadcrumb a:hover{ color:rgba(255,255,255,1);}.hero-breadcrumb span{ color:rgba(255,255,255,0.6);}.lp-body{ padding:4rem 0;}.lp-section{ margin-bottom:4rem;}.lp-section h2{ font-size:1.75rem; color:#0f172a; margin-bottom:1rem; letter-spacing:-0.02em;}.lp-section p{ line-height:1.8;}.steps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; margin-top:1.5rem;}.step-box{ background:white; border:1px solid rgba(226,232,240,0.6); border-radius:16px; padding:2rem 1.5rem; text-align:center; transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1); position:relative; overflow:hidden;}.step-box::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--primary, #2563eb), var(--primary-light, #3b82f6)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);}.step-box:hover{ transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.06);}.step-box:hover::before{ transform:scaleX(1);}.step-box .num{ background:linear-gradient(135deg, var(--primary, #2563eb), #3b82f6); color:white; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; margin:0 auto 1rem; box-shadow:0 4px 12px rgba(37,99,235,0.25); transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);}.step-box:hover .num{ transform:scale(1.1);}.step-box h3{ font-size:1.1rem; margin-bottom:0.5rem;}.step-box p{ font-size:0.92rem; color:#64748b; margin:0;}.feature-list{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0.85rem; margin-top:1.5rem;}.feature-list li{ background:white; border:1px solid rgba(226,232,240,0.6); border-radius:12px; padding:1rem 1.2rem; display:flex; align-items:center; gap:0.75rem; font-size:0.95rem; font-weight:500; color:#334155; transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);}.feature-list li:hover{ border-color:rgba(37,99,235,0.15); transform:translateX(4px); box-shadow:0 2px 12px rgba(0,0,0,0.04);}.feature-list li i{ font-size:1.1rem; width:20px; text-align:center; flex-shrink:0;}.feature-list.green li i{color:#059669;}.feature-list.teal li i{color:#0d9488;}.feature-list.purple li i{color:#7c3aed;}.feature-list.blue li i{color:#2563eb;}.checklist{ list-style:none; padding:0; margin-top:1rem;}.checklist li{ padding:0.7rem 0; display:flex; align-items:flex-start; gap:0.75rem; border-bottom:1px solid rgba(226,232,240,0.5); line-height:1.6; font-size:0.98rem;}.checklist li:last-child{ border:none;}.checklist i{ margin-top:4px; font-size:0.95rem; flex-shrink:0;}.checklist.green i{color:#059669;}.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem;}.compare-bad,.compare-good{ border-radius:16px; padding:1.75rem; border-width:1px; border-style:solid;}.compare-bad{ background:rgba(239,68,68,0.03); border-color:rgba(252,165,165,0.5);}.compare-good{ background:rgba(16,185,129,0.03); border-color:rgba(134,239,172,0.5);}.compare-bad h3{color:#dc2626;font-size:1.05rem;}.compare-good h3{color:#16a34a;font-size:1.05rem;}.compare-bad ul,.compare-good ul{ padding-left:1.2rem; line-height:2.2; margin-top:0.75rem;}.pdf-compare{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem;}.cmp-card{ border-radius:16px; padding:1.75rem; border:1.5px solid; transition:transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);}.cmp-card:hover{ transform:translateY(-3px);}.cmp-bad{ border-color:#e2e8f0; background:#f9fafb;}.cmp-good{ border-color:#7c3aed; background:rgba(124,58,237,0.03);}.mistakes-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.25rem; margin-top:1.5rem;}.mistake-card{ background:rgba(239,68,68,0.03); border:1px solid rgba(252,165,165,0.4); border-radius:14px; padding:1.5rem; transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);}.mistake-card:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(239,68,68,0.06);}.mistake-card h3{ color:#dc2626; font-size:0.95rem; margin-bottom:0.5rem;}.mistake-card p{ font-size:0.9rem; margin:0; color:#64748b;}.req-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin-top:1.5rem;}.req-card{ background:rgba(16,185,129,0.03); border:1px solid rgba(134,239,172,0.4); border-radius:14px; padding:1.35rem; transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1);}.req-card:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(16,185,129,0.06);}.req-card h3{ color:#14532d; font-size:0.92rem; font-weight:700; margin-bottom:0.35rem;}.req-card p{ font-size:0.88rem; margin:0; color:#64748b;}.gst-box{ background:rgba(251,191,36,0.06); border:1.5px solid rgba(251,191,36,0.4); border-radius:16px; padding:2rem; margin-top:1.5rem;}.gst-box h3{ margin-bottom:1rem; color:#92400e;}.cta-box{ color:white; border-radius:20px; padding:3.5rem 2rem; text-align:center; margin-top:4rem; position:relative; overflow:hidden;}.cta-box::before{ content:''; position:absolute; top:-40%; right:-20%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 60%); pointer-events:none;}.cta-box h2{ margin-bottom:0.75rem; color:white; position:relative; z-index:1; font-size:clamp(1.5rem, 3vw, 2rem);}.cta-box p{ color:rgba(255,255,255,0.85); position:relative; z-index:1; max-width:500px; margin:0 auto;}.cta-box .btn{ position:relative; z-index:1;}.cta-box small{ position:relative; z-index:1;}.cta-blue{background:linear-gradient(135deg, #1d4ed8, #0f2d59);}.cta-green{background:linear-gradient(135deg, #059669, #064e3b);}.cta-teal{background:linear-gradient(135deg, #0d9488, #134e4a);}.cta-emerald{background:linear-gradient(135deg, #16a34a, #14532d);}.cta-purple{background:linear-gradient(135deg, #7c3aed, #4c1d95);}.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; padding:3rem 0;}.blog-card{ background:white; border:1px solid rgba(226,232,240,0.6); border-radius:16px; padding:1.75rem; text-decoration:none; color:inherit; transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1); position:relative; overflow:hidden;}.blog-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #2563eb, #3b82f6); transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);}.blog-card:hover{ box-shadow:0 8px 30px rgba(0,0,0,0.08); transform:translateY(-4px); border-color:rgba(37,99,235,0.12);}.blog-card:hover::before{ transform:scaleX(1);}.blog-tag{ background:rgba(37,99,235,0.08); color:#1d4ed8; font-size:0.75rem; font-weight:700; padding:0.3rem 0.85rem; border-radius:100px; display:inline-block; margin-bottom:0.75rem; letter-spacing:0.02em; text-transform:uppercase;}.blog-card h2{ font-size:1.05rem; color:#0f172a; margin-bottom:0.5rem; line-height:1.4; font-weight:700;}.blog-card p{ font-size:0.9rem; color:#64748b; line-height:1.65; margin-bottom:0.75rem;}.blog-card .read-more{ font-size:0.85rem; color:#2563eb; font-weight:600; transition:padding-left 0.2s;}.blog-card:hover .read-more{ padding-left:4px;}.blog-date{ font-size:0.78rem; color:#94a3b8;}.blog-cta-box{ background:linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02)); border:1px solid rgba(37,99,235,0.12); border-radius:20px; padding:3rem; text-align:center; margin-bottom:3rem;}.blog-cta-box h2{ margin-bottom:0.75rem; font-size:1.5rem;}.blog-cta-box p{ max-width:450px; margin:0 auto 1.25rem;}.blog-hero{ background:linear-gradient(135deg, #0f172a, #1e40af); color:white; padding:5rem 0 4rem; text-align:center; position:relative; overflow:hidden;}.blog-hero::before{ content:''; position:absolute; top:-80px; right:-60px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,0.15), transparent 60%); pointer-events:none;}.blog-hero h1{ font-size:clamp(1.75rem, 4vw, 2.5rem); max-width:900px; margin:0 auto 1.25rem; line-height:1.2; font-weight:800; color:white;}.blog-meta{ font-size:0.92rem; opacity:0.85; font-weight:500; color:rgba(255,255,255,0.85);}.blog-body{ max-width:850px; margin:0 auto; padding:4rem 1.5rem; line-height:1.85; color:#334155; font-size:1.05rem;}.blog-body h2{ font-size:1.6rem; color:#0f172a; margin:3rem 0 1rem; padding-left:1.25rem; border-left:4px solid #2563eb; font-weight:800; letter-spacing:-0.02em;}.blog-body h3{ font-size:1.25rem; color:#1e40af; margin:2rem 0 0.75rem; font-weight:700;}.blog-body p{margin-bottom:1.5rem;}.blog-body ul,.blog-body ol{ padding-left:1.8rem; margin-bottom:1.5rem;}.blog-body li{margin-bottom:0.5rem;}.blog-body img{ border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.06); margin:2rem 0;}.blog-body table{ width:100%; border-collapse:collapse; margin:2rem 0; font-size:0.95rem; border-radius:12px; overflow:hidden; border:1px solid #e2e8f0;}.blog-body th{ background:#f8fafc; padding:1rem; text-align:left; border-bottom:2px solid #e2e8f0; color:#64748b; font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em;}.blog-body td{ padding:0.85rem 1rem; border-bottom:1px solid #e2e8f0;}.cta-bar{ background:linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02)); border:1px solid rgba(37,99,235,0.12); border-radius:16px; padding:2.5rem; margin:3rem 0; text-align:center;}.cta-bar p{ margin:0 0 1.25rem; font-weight:700; color:#0f172a; font-size:1.05rem;}.related-box{ background:#f8fafc; border-radius:16px; padding:2rem; margin-top:4rem; border:1px solid rgba(226,232,240,0.6);}.related-box h3{ margin-bottom:1.25rem; color:#0f172a; font-size:1.15rem; font-weight:800;}.related-box ul{ list-style:none; padding:0;}.related-box li{ padding:0.75rem 0; border-bottom:1px solid rgba(226,232,240,0.6);}.related-box li:last-child{border:none;}.related-box a{ color:#2563eb; text-decoration:none; font-weight:500; transition:padding-left 0.2s;}.related-box a:hover{ padding-left:6px;}.code-box{ background:#0f172a; color:#f8fafc; border-radius:14px; padding:1.5rem; font-family:'SFMono-Regular', Consolas, monospace; font-size:0.9rem; line-height:1.8; margin:1.5rem 0; overflow-x:auto; border:1px solid #1e293b;}.about-section{ padding:4rem 0;}.about-card{ background:white; border:1px solid rgba(226,232,240,0.6); border-radius:16px; padding:2.25rem; margin-bottom:1.5rem; box-shadow:0 1px 3px rgba(0,0,0,0.04);}.about-card h2{ font-size:1.5rem; color:#0f172a; margin-bottom:1rem;}.value-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1.25rem;}.value-item{ background:white; border:1px solid rgba(226,232,240,0.6); border-radius:16px; padding:1.75rem; transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position:relative; overflow:hidden;}.value-item::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, #2563eb, #3b82f6); transform:scaleX(0); transform-origin:left; transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);}.value-item:hover{ transform:translateY(-4px); box-shadow:0 8px 25px rgba(0,0,0,0.06); border-color:rgba(37,99,235,0.12);}.value-item:hover::before{ transform:scaleX(1);}.value-item i{ font-size:1.75rem; color:#2563eb; margin-bottom:1rem; display:block; transition:transform 0.3s;}.value-item:hover i{ transform:scale(1.1);}.value-item h3{ font-size:1.1rem; margin-bottom:0.5rem;}.value-item p{ font-size:0.92rem; color:#64748b; margin:0;}.contact-section{ padding:4rem 0;}.contact-grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; max-width:950px; margin:0 auto;}.contact-info h2{ font-size:1.4rem; margin-bottom:1rem; letter-spacing:-0.02em;}.contact-info p{ color:#64748b; margin-bottom:1.5rem; line-height:1.75;}.contact-detail{ display:flex; align-items:flex-start; gap:0.85rem; margin-bottom:1.25rem; padding:0.85rem; background:rgba(37,99,235,0.03); border-radius:12px; transition:background 0.2s;}.contact-detail:hover{ background:rgba(37,99,235,0.06);}.contact-detail i{ color:#2563eb; font-size:1rem; width:20px; margin-top:3px; flex-shrink:0;}.contact-detail strong{ display:block; font-size:0.9rem; color:#0f172a; margin-bottom:2px;}.contact-form{ background:white; border:1px solid rgba(226,232,240,0.6); border-radius:20px; padding:2.5rem; box-shadow:0 4px 24px rgba(0,0,0,0.04);}.contact-form h2{ margin-bottom:1.5rem; font-size:1.3rem;}.contact-form .form-group{ margin-bottom:1.25rem;}.contact-form label{ display:block; font-weight:600; color:#334155; margin-bottom:0.4rem; font-size:0.88rem;}.contact-form input,.contact-form textarea,.contact-form select{ width:100%; padding:0.75rem 0.9rem; border:1.5px solid rgba(226,232,240,0.8); border-radius:10px; font-family:inherit; font-size:0.92rem; box-sizing:border-box; transition:all 0.2s; background:#f8fafc;}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{ outline:none; border-color:#2563eb; background:white; box-shadow:0 0 0 3px rgba(37,99,235,0.08);}.contact-form textarea{ height:140px; resize:vertical;}.success-msg{ background:rgba(16,185,129,0.08); color:#059669; padding:1rem 1.5rem; border-radius:12px; margin-bottom:1.5rem; font-weight:600; border:1px solid rgba(16,185,129,0.15); font-size:0.92rem; animation:msg-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1);}@keyframes msg-enter{ from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);}}.review-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1.5rem; padding:3rem 0;}.review-card{ background:white; padding:1.75rem; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); border:1px solid rgba(226,232,240,0.6); transition:all 0.35s cubic-bezier(0.16, 1, 0.3, 1); position:relative;}.review-card::before{ content:'\201C'; position:absolute; top:0.75rem; right:1.25rem; font-size:3.5rem; line-height:1; color:rgba(37,99,235,0.06); font-family:Georgia, serif; pointer-events:none;}.review-card:hover{ transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.06);}.review-header{ display:flex; align-items:center; gap:0.85rem; margin-bottom:0.85rem;}.avatar-circle{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:bold;}.reviewer-info h4{ margin:0; font-size:0.95rem; letter-spacing:-0.01em;}.reviewer-info span{ font-size:0.82rem; color:#94a3b8;}.rating{ color:#f59e0b; margin-bottom:0.65rem; font-size:0.95rem; letter-spacing:2px;}.review-date{ font-size:0.75rem; color:#94a3b8; display:block; margin-top:0.85rem;}.summary-box{ background:linear-gradient(135deg, rgba(37,99,235,0.04), rgba(37,99,235,0.01)); border:1px solid rgba(37,99,235,0.1); border-radius:20px; padding:3rem; text-align:center; margin-bottom:1.5rem;}.big-rating{ font-size:4rem; font-weight:800; color:#0f172a; line-height:1; letter-spacing:-0.03em;}.total-stars{ color:#f59e0b; font-size:1.5rem; margin:0.5rem 0;}.error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:#f8fafc; font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; position:relative; overflow:hidden;}.error-page::before{ content:''; position:fixed; top:-50%; right:-30%; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,0.05), transparent 60%); animation:hero-orb 12s ease-in-out infinite; pointer-events:none;}.error-container{ padding:2rem; max-width:500px; animation:auth-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;}@keyframes auth-enter{ from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);}}.error-code{ font-size:8rem; margin:0; font-weight:900; background:linear-gradient(135deg, #2563eb, #3b82f6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:0.2; letter-spacing:-0.05em;}.error-title{ font-size:1.75rem; margin-top:-1.5rem; font-weight:800; color:#0f172a; letter-spacing:-0.02em;}.error-links{ margin-top:2.5rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}.error-links a{ color:#2563eb; text-decoration:none; font-size:0.9rem; font-weight:600; transition:color 0.2s;}.error-links a:hover{ color:#1e40af;}@media (max-width:768px){ .page-hero{ padding:4rem 0 2.5rem;} .page-hero h1{ font-size:1.85rem;} .compare-grid, .pdf-compare{ grid-template-columns:1fr;} .contact-grid{ grid-template-columns:1fr;} .blog-hero{ padding:4rem 0 3rem;} .blog-body{ padding:2.5rem 1.25rem; font-size:1rem;} .blog-body h2{ font-size:1.4rem; margin:2.5rem 0 1rem;} .cta-bar, .blog-cta-box{ padding:2rem 1.5rem;}}@media (max-width:480px){ .steps-grid{ grid-template-columns:1fr;} .feature-list{ grid-template-columns:1fr;}}.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);}.reveal.visible{ opacity:1; transform:translateY(0);}