/* Modern CSS with latest features for optimal performance *//* CSS Custom Properties for theming */:root{/* Color System */ --primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-300:#93c5fd;--primary-400:#60a5fa;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-900:#1e3a8a;--secondary-50:#faf5ff;--secondary-100:#f3e8ff;--secondary-200:#e9d5ff;--secondary-300:#d8b4fe;--secondary-400:#c084fc;--secondary-500:#a855f7;--secondary-600:#9333ea;--secondary-700:#7c3aed;--secondary-800:#6b21a8;--secondary-900:#581c87;--accent-50:#ecfeff;--accent-100:#cffafe;--accent-200:#a5f3fc;--accent-300:#67e8f9;--accent-400:#22d3ee;--accent-500:#06b6d4;--accent-600:#0891b2;--accent-700:#0e7490;--accent-800:#155e75;--accent-900:#164e63;/* Semantic Colors */ --color-primary:var(--primary-600);--color-primary-dark:var(--primary-700);--color-secondary:var(--secondary-700);--color-accent:var(--accent-500);/* Text Colors */ --text-primary:#111827;--text-secondary:#6b7280;--text-tertiary:#9ca3af;--text-inverse:#ffffff;/* Background Colors */ --bg-primary:#ffffff;--bg-secondary:#f9fafb;--bg-tertiary:#f3f4f6;--bg-accent:#eff6ff;/* Border Colors */ --border-light:#e5e7eb;--border-medium:#d1d5db;--border-dark:#9ca3af;/* Shadows */ --shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);/* Gradients */ --gradient-primary:linear-gradient(135deg,var(--primary-600) 0%,var(--secondary-700) 100%);--gradient-accent:linear-gradient(135deg,var(--accent-500) 0%,var(--primary-600) 100%);--gradient-hero:linear-gradient(135deg,var(--primary-600) 0%,var(--secondary-700) 50%,var(--accent-500) 100%);/* Typography */ --font-family-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-family-mono:'JetBrains Mono','Fira Code',Consolas,'Liberation Mono',Menlo,Courier,monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-size-6xl:3.75rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;/* Spacing */ --space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;/* Border Radius */ --radius-none:0;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;/* Transitions */ --transition-fast:150ms ease-in-out;--transition-base:300ms ease-in-out;--transition-slow:500ms ease-in-out;/* Z-Index Scale */ --z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080}/* Modern CSS Reset */*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-family-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}/* Container Queries Support */@container (min-width:768px){.container-responsive{padding:var(--space-8)}}@container (min-width:1024px){.container-responsive{padding:var(--space-12)}}/* Modern Grid Layout */.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-4);container-type:inline-size}/* Hero Section with Modern CSS */.hero{background:var(--gradient-hero);color:var(--text-inverse);padding:var(--space-8) 0;text-align:center;position:relative;overflow:hidden;min-height:40vh;display:flex;align-items:center}.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,255,255,0.05) 0%,transparent 50%);pointer-events:none}.hero-content{position:relative;z-index:1;max-width:800px;margin:0 auto}.hero h1{font-size:clamp(var(--font-size-4xl),5vw,var(--font-size-6xl));font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin-bottom:var(--space-6);background:linear-gradient(135deg,#ffffff 0%,rgba(255,255,255,0.8) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:clamp(var(--font-size-lg),2.5vw,var(--font-size-xl));margin-bottom:var(--space-8);opacity:0.9;line-height:var(--line-height-relaxed)}/* Modern Button Styles */.cta-button{display:inline-flex;align-items:center;justify-content:center;background:var(--text-inverse);color:var(--color-primary);padding:var(--space-4) var(--space-8);border-radius:var(--radius-xl);text-decoration:none;font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg);transition:all var(--transition-base);box-shadow:var(--shadow-lg);border:2px solid transparent;position:relative;overflow:hidden}.cta-button::before{content:'';position:absolute;inset:0;background:var(--gradient-primary);opacity:0;transition:opacity var(--transition-base);z-index:-1}.cta-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl);color:var(--text-inverse)}.cta-button:hover::before{opacity:1}.cta-button:active{transform:translateY(0)}/* Discount Banner */.discount-banner{background:#fef3c7;border:3px solid #f59e0b;color:#92400e;padding:var(--space-6);border-radius:var(--radius-xl);margin-top:var(--space-8);position:relative;box-shadow:var(--shadow-lg);border-left:6px solid #f59e0b}.discount-content{text-align:center;position:relative;z-index:1}.discount-content h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-3);color:#92400e}.discount-content p{font-size:var(--font-size-lg);margin:0;color:#78350f;font-weight:var(--font-weight-medium)}.promo-code{background:#f59e0b;color:white;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:var(--font-weight-bold);font-family:var(--font-family-mono);letter-spacing:1px;border:2px solid #d97706;display:inline-block;margin:0 var(--space-2)}.copy-button{background:#f59e0b;color:white;border:2px solid #d97706;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-base);margin-top:var(--space-3);display:inline-block}.copy-button:hover{background:#d97706;transform:translateY(-1px);box-shadow:var(--shadow-md)}.copy-button:active{transform:translateY(0)}/* Steps Section with Modern Layout */.steps-section{padding:var(--space-20) 0;background:var(--bg-secondary);position:relative}.steps-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--border-light) 50%,transparent 100%)}/* Modern Grid with Container Queries */.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8);margin-top:var(--space-12);container-type:inline-size}@container (min-width:768px){.steps-grid{grid-template-columns:repeat(2,1fr)}}@container (min-width:1024px){.steps-grid{grid-template-columns:repeat(4,1fr)}}/* Step Cards with Modern Design */.step-card{background:var(--bg-primary);padding:var(--space-8);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);transition:all var(--transition-base);position:relative;overflow:hidden;border:1px solid var(--border-light)}.step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-accent);transform:scaleX(0);transition:transform var(--transition-base)}.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--color-primary)}.step-card:hover::before{transform:scaleX(1)}.step-number{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;background:var(--gradient-accent);color:var(--text-inverse);border-radius:var(--radius-full);font-weight:var(--font-weight-bold);font-size:var(--font-size-xl);margin-bottom:var(--space-6);box-shadow:var(--shadow-md);position:relative}.step-number::after{content:'';position:absolute;inset:-2px;background:var(--gradient-accent);border-radius:var(--radius-full);z-index:-1;opacity:0;transition:opacity var(--transition-base)}.step-card:hover .step-number::after{opacity:0.3}.step-card h3{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-4);color:var(--text-primary);line-height:var(--line-height-tight)}.step-card p{color:var(--text-secondary);line-height:var(--line-height-relaxed);font-size:var(--font-size-base)}/* Features Section */.features-section{padding:var(--space-20) 0;background:var(--bg-primary)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8);margin-top:var(--space-12)}.feature-item{text-align:center;padding:var(--space-8);border-radius:var(--radius-xl);transition:all var(--transition-base);position:relative}.feature-item:hover{background:var(--bg-accent);transform:translateY(-2px)}.feature-icon{width:4rem;height:4rem;background:var(--gradient-primary);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4);font-size:var(--font-size-2xl);box-shadow:var(--shadow-md);transition:all var(--transition-base)}.feature-item:hover .feature-icon{transform:scale(1.1);box-shadow:var(--shadow-lg)}.feature-item h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-3);color:var(--text-primary)}.feature-item p{color:var(--text-secondary);line-height:var(--line-height-relaxed)}/* CTA Section */.cta-section{background:var(--gradient-primary);color:var(--text-inverse);padding:var(--space-20) 0;text-align:center;position:relative;overflow:hidden}.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 70%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 70% 30%,rgba(255,255,255,0.1) 0%,transparent 50%);pointer-events:none}.cta-section h2{font-size:clamp(var(--font-size-3xl),4vw,var(--font-size-5xl));font-weight:var(--font-weight-bold);margin-bottom:var(--space-6);position:relative;z-index:1}.cta-section p{font-size:var(--font-size-xl);margin-bottom:var(--space-8);opacity:0.9;position:relative;z-index:1}/* Section Titles */.section-title{text-align:center;margin-bottom:var(--space-6)}.section-title h2{font-size:clamp(var(--font-size-3xl),4vw,var(--font-size-5xl));font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-4);line-height:var(--line-height-tight)}.section-title p{font-size:var(--font-size-xl);color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:var(--line-height-relaxed)}/* Responsive Design with Modern Breakpoints */@media (max-width:640px){.container{padding:0 var(--space-3)}.hero{padding:var(--space-12) 0;min-height:50vh}.steps-grid{grid-template-columns:1fr;gap:var(--space-6)}.features-grid{grid-template-columns:1fr;gap:var(--space-6)}.step-card{padding:var(--space-6)}.feature-item{padding:var(--space-6)}}@media (min-width:641px) and (max-width:768px){.steps-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:769px) and (max-width:1024px){.steps-grid{grid-template-columns:repeat(2,1fr)}}/* Performance Optimizations */.loading{opacity:0;animation:fadeIn 0.5s ease-in-out forwards}@keyframes fadeIn{to{opacity:1}}/* Reduced Motion Support */@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}/* High Contrast Mode Support */@media (prefers-contrast:high){:root{--border-light:#000000;--text-secondary:#000000}.step-card,.feature-item{border:2px solid var(--border-light)}}/* Print Styles */@media print{.hero,.cta-section{background:white !important;color:black !important}.cta-button{border:2px solid black;background:white;color:black}}/* Focus Styles for Accessibility */.cta-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}/* Modern CSS Features */@supports (backdrop-filter:blur(10px)){.step-card{backdrop-filter:blur(10px);background:rgba(255,255,255,0.9)}}@supports (aspect-ratio:1){.feature-icon{aspect-ratio:1}}/* Container Queries for Modern Layouts */@container (min-width:400px){.step-card{padding:var(--space-10)}}@container (min-width:600px){.step-card h3{font-size:var(--font-size-3xl)}}