/* Modern Container & Layout */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Premium Header Design */
.site-header{background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border:none;box-shadow:0 2px 20px rgba(0,0,0,.08);position:sticky;top:0;z-index:100;backdrop-filter:blur(10px)}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #f59e0b 100%);opacity:0.8}
.site-header .container{display:flex;justify-content:space-between;align-items:center;padding:16px 24px}
.site-header .site-title{font-size:24px;font-weight:700;margin:0;letter-spacing:-0.5px}
.site-header .site-title a{background:linear-gradient(135deg, #6366f1, #8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}
.site-nav{display:flex;gap:24px;align-items:center}
.site-nav a{font-weight:500;padding:8px 16px;border-radius:8px;transition:all 0.3s ease;text-decoration:none;color:#374151}
.site-nav a:hover{background:rgba(99,102,241,0.08);color:#6366f1;transform:translateY(-1px)}

.site-footer{background:#1f2937;color:#e5e7eb;border:none;margin-top:60px;padding:40px 0}

/* Soft & Modern Color Palette */
:root{
  --color-primary:#6366f1;
  --color-primary-600:#4f46e5;
  --color-secondary:#8b5cf6;
  --color-secondary-600:#7c3aed;
  --color-accent:#f59e0b;
  --color-accent-600:#d97706;
  --color-success:#10b981;
  --color-warning:#f59e0b;
  --color-info:#06b6d4;
  --color-bg:#fefefe;
  --color-card:#ffffff;
  --color-border:#f1f5f9;
  --color-text:#334155;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04);
  --shadow-md:0 4px 16px rgba(0,0,0,.06);
}

body{color:var(--color-text);background:#fafbfc;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Performance Optimizations */
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%;height:auto}
.will-change-transform{will-change:transform}
.gpu-accelerated{transform:translateZ(0)}

/* 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}
  .btn:before{transition:none}
}

/* Global links */
a{color:var(--color-primary);text-decoration:none;transition:all 0.2s ease}
a:hover{color:var(--color-primary-600);text-decoration:none}

/* Premium Typography with Performance */
body{font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height:1.6;color:#374151;font-display:swap}
h1{font-size:clamp(28px, 5vw, 48px);font-weight:800;margin:24px 0;line-height:1.2;letter-spacing:-1px;color:#1f2937}
h2{font-size:clamp(24px, 4vw, 32px);font-weight:700;margin:32px 0 16px;line-height:1.3;letter-spacing:-0.5px;color:#1f2937}
h3{font-size:clamp(18px, 3vw, 24px);font-weight:600;margin:24px 0 12px;color:#1f2937}
p{line-height:1.7;font-size:clamp(14px, 2vw, 16px);color:#374151}
.lead{font-size:clamp(16px, 2.5vw, 20px);font-weight:400;color:#6b7280}

/* Premium Button System with Accessibility */
.btn{display:inline-block;background:linear-gradient(135deg, var(--color-primary), var(--color-primary-600));color:#fff;padding:12px 24px;text-decoration:none;border-radius:12px;font-weight:600;transition:all 0.3s ease;box-shadow:0 4px 16px rgba(99,102,241,0.2);border:none;cursor:pointer;position:relative;overflow:hidden;min-height:44px;min-width:44px}
.btn:before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.5s ease}
.btn:hover:before{left:100%}
.btn:hover{background:linear-gradient(135deg, var(--color-primary-600), var(--color-primary));transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,0.25);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:focus{outline:3px solid rgba(99,102,241,0.5);outline-offset:2px}
.btn-secondary{background:linear-gradient(135deg, var(--color-secondary), var(--color-secondary-600));box-shadow:0 4px 16px rgba(139,92,246,0.2)}
.btn-secondary:hover{background:linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary));box-shadow:0 8px 24px rgba(139,92,246,0.25)}
.btn-accent{background:linear-gradient(135deg, var(--color-accent), var(--color-accent-600));box-shadow:0 4px 16px rgba(245,158,11,0.2)}
.btn-accent:hover{background:linear-gradient(135deg, var(--color-accent-600), var(--color-accent));box-shadow:0 8px 24px rgba(245,158,11,0.25)}
.btn-success{background:linear-gradient(135deg, var(--color-success), #1b5e20)}
.btn-warning{background:linear-gradient(135deg, var(--color-warning), #f57f17);color:#212121}
.btn-outline{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:none}
.btn-outline:hover{background:var(--color-primary);color:white;box-shadow:0 4px 16px rgba(99,102,241,0.2)}
.btn-loading{position:relative;color:transparent}
.btn-loading:after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,0.3);border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Focus Ring */
a:focus,button:focus,.btn:focus{outline:3px solid rgba(99,102,241,.5);outline-offset:2px}


/* Premium Post Lists */
.post-list{list-style:none;padding:0;display:grid;gap:16px}
.post-list li{padding:24px;border:none;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:all 0.3s ease}
.post-list li:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.post-list li a{font-size:18px;font-weight:600;color:#1f2937;text-decoration:none;display:block;margin-bottom:8px}
.post-list li a:hover{color:#6366f1}
.post-snippet{display:block;margin:8px 0;font-size:14px;color:#6b7280;line-height:1.5}
.post-list small{color:#9ca3af;font-size:12px}

/* Enhanced Forms with Accessibility */
form .field{margin-bottom:16px}
label{display:block;margin-bottom:8px;font-weight:500;color:#374151}
input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea{
  width:100%;
  padding:12px 16px;
  border:2px solid #e2e8f0;
  border-radius:8px;
  font-size:16px;
  transition:all 0.2s ease;
  background:#fff;
  box-sizing:border-box
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(99,102,241,0.1)
}
input[type=text]:invalid, input[type=email]:invalid, input[type=tel]:invalid, input[type=password]:invalid{
  border-color:#ef4444
}
textarea{min-height:120px;resize:vertical}
.form-error{color:#ef4444;font-size:14px;margin-top:4px}
.form-help{color:#6b7280;font-size:14px;margin-top:4px}
.required{color:#ef4444}

/* Enhanced Table with Accessibility */
.table{width:100%;border-collapse:collapse;margin:16px 0;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.table th,.table td{border:1px solid #e2e8f0;padding:12px 16px;text-align:left}
.table th{background:#f8fafc;font-weight:600;color:#374151;position:sticky;top:0;z-index:1}
.table tr:nth-child(even){background:#f8fafc}
.table tr:hover{background:#e2e8f0}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table caption{padding:12px;font-weight:600;text-align:left;background:#f1f5f9;border-bottom:1px solid #e2e8f0}

/* Enhanced Alerts with Accessibility */
.alert{padding:16px 20px;border-radius:8px;margin:16px 0;position:relative;border-left:4px solid;font-weight:500}
.alert-info{background:#eff6ff;border-color:#3b82f6;color:#1e40af}
.alert-success{background:#f0fdf4;border-color:#22c55e;color:#166534}
.alert-warning{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.alert-error{background:#fef2f2;border-color:#ef4444;color:#dc2626}
.alert:before{content:'';position:absolute;left:16px;top:18px;width:16px;height:16px;background-size:contain}
.alert-info:before{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%233b82f6" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>')}
.alert-success:before{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2322c55e" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')}
.alert-warning:before{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f59e0b" viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>')}
.alert-error:before{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ef4444" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>')}
.alert .alert-title{font-weight:700;margin-bottom:4px;margin-left:24px}
.alert .alert-message{margin-left:24px;line-height:1.5}

/* Premium Breadcrumb */
.breadcrumb{font-size:14px;color:#6b7280;margin:20px 0;padding:16px 24px;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.breadcrumb ol{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li+li:before{content:'→';color:#9ca3af;margin:0 8px;font-weight:600}
.breadcrumb a{color:#6366f1;text-decoration:none;font-weight:500;padding:4px 8px;border-radius:6px;transition:all 0.2s ease}
.breadcrumb a:hover{background:rgba(99,102,241,0.08);text-decoration:none}

/* Premium Hero Section */
.sc-hero{background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);color:#1e293b;border:1px solid #e2e8f0;border-radius:24px;padding:80px 40px;margin:40px 0;box-shadow:0 8px 32px rgba(0,0,0,0.06);position:relative;overflow:hidden;text-align:center}
.sc-hero:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.8" fill="%236366f1" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>')}
.sc-hero > *{position:relative;z-index:2}
.sc-hero h1{font-size:48px;font-weight:800;margin:0 0 24px;line-height:1.2;letter-spacing:-1px;color:#1e293b}
.sc-hero p{font-size:20px;margin:0 0 32px;opacity:0.95;line-height:1.6;max-width:800px;margin-left:auto;margin-right:auto}
.sc-hero .btn{margin:0 12px 12px;padding:16px 32px;font-size:16px;font-weight:600;border-radius:12px;box-shadow:0 4px 16px rgba(99,102,241,0.2);transform:translateY(0);transition:all 0.3s ease}
.sc-hero .btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(99,102,241,0.3)}

/* Premium Features Section */
.sc-features{margin:80px 0;padding:0 20px}
.sc-features h2{text-align:center;font-size:36px;font-weight:800;margin-bottom:48px;color:#1f2937}
.feature-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}
.feature-list li{margin:0;padding:24px;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:all 0.3s ease;position:relative}
.feature-list li:before{content:'✓';position:absolute;top:20px;left:20px;width:32px;height:32px;background:linear-gradient(135deg, #10b981, #059669);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.feature-list li:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.feature-list li strong{color:#1f2937;font-size:18px;font-weight:700;display:block;margin-bottom:8px}
.feature-list li{color:#6b7280;line-height:1.6;padding-left:56px}

/* Premium Stats Section */
.stats{margin:60px 0;padding:0 20px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.stat{background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border:none;border-radius:20px;padding:32px 24px;box-shadow:0 8px 32px rgba(0,0,0,0.08);transition:all 0.3s ease;position:relative;overflow:hidden;text-align:center}
.stat:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #6366f1, #8b5cf6, #f59e0b);opacity:0.7}
.stat:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,0.12)}
.stat strong{display:block;font-size:20px;font-weight:700;margin-bottom:8px;color:#1f2937}
.stat p{color:#6b7280;font-size:14px;margin:0;line-height:1.5}

/* Premium FAQ Section */
.sc-faq{margin:80px 0;padding:0 20px}
.sc-faq h2{text-align:center;font-size:36px;font-weight:800;margin-bottom:48px;color:#1f2937}
.sc-faq details{border:none;border-radius:16px;margin:16px 0;padding:0;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:all 0.3s ease;overflow:hidden}
.sc-faq details:hover{box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.sc-faq summary{cursor:pointer;font-weight:700;padding:24px;font-size:18px;color:#1f2937;position:relative;transition:all 0.3s ease}
.sc-faq summary:after{content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;transition:transform 0.3s ease}
.sc-faq details[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.sc-faq details[open] summary{background:rgba(30,136,229,0.05)}
.sc-faq details div{padding:0 24px 24px;color:#6b7280;line-height:1.6;font-size:16px}

/* Premium Quick Links */
.quick-links{margin:80px 0;padding:0 20px}
.quick-links .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.quick-links .card{border:none;border-radius:20px;padding:32px 24px;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);box-shadow:0 8px 32px rgba(0,0,0,0.08);transition:all 0.4s ease;position:relative;overflow:hidden}
.quick-links .card:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #6366f1, #8b5cf6);opacity:0.8;transform:scaleX(0);transition:transform 0.3s ease;transform-origin:left}
.quick-links .card:hover:before{transform:scaleX(1)}
.quick-links .card:hover{transform:translateY(-12px);box-shadow:0 20px 60px rgba(0,0,0,0.15)}
.quick-links .card h3{margin:0 0 12px;font-size:20px;font-weight:700;color:#1f2937}
.quick-links .card h3 a{color:inherit;text-decoration:none}
.quick-links .card p{margin:0 0 20px;color:#6b7280;line-height:1.6}
.quick-links .card .btn{margin-top:auto}

/* Premium How-to Steps */
.howto{margin:80px 0;padding:0 20px}
.howto h2{text-align:center;font-size:36px;font-weight:800;margin-bottom:48px;color:#1f2937}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px}
.steps li{background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border:none;border-radius:20px;padding:40px 32px;box-shadow:0 8px 32px rgba(0,0,0,0.08);position:relative;transition:all 0.3s ease}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:32px;width:48px;height:48px;background:linear-gradient(135deg, #6366f1, #8b5cf6);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;box-shadow:0 4px 16px rgba(99,102,241,0.2)}
.steps li:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,0.12)}
.steps li h3{margin:16px 0 12px;font-size:20px;font-weight:700;color:#1f2937}
.steps li p{color:#6b7280;line-height:1.6;margin:0}

/* Premium Testimonials */
.testimonials{margin:80px 0;padding:0 20px;background:linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);border-radius:24px;padding:60px 40px}
.testimonials h2{text-align:center;font-size:36px;font-weight:800;margin-bottom:48px;color:#1f2937}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:32px}
.quotes blockquote{margin:0;padding:32px;border:none;background:linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,0.08);position:relative;transition:all 0.3s ease}
.quotes blockquote:before{content:'"';position:absolute;top:16px;left:24px;font-size:48px;color:#6366f1;font-weight:700;line-height:1;opacity:0.7}
.quotes blockquote:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.12)}
.quotes p{margin:16px 0 20px;color:#374151;font-size:16px;line-height:1.6;font-style:italic}
.quotes cite{font-style:normal;color:#6b7280;font-weight:600;display:block;text-align:right}

/* Premium CTA Band */
.cta-band{margin:80px 0;padding:60px 40px;border-radius:24px;background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);border:1px solid #e2e8f0;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.06);color:#1e293b;position:relative;overflow:hidden}
.cta-band:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="ctadots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.8" fill="%236366f1" opacity="0.04"/></pattern></defs><rect width="100" height="100" fill="url(%23ctadots)"/></svg>')}
.cta-band > *{position:relative;z-index:2}
.cta-band h2{margin:0 0 16px;font-size:32px;font-weight:800;color:#1e293b}
.cta-band p{font-size:18px;margin:0 0 32px;opacity:0.9}
.cta-band .btn{margin:0 12px 12px}
.cta-band .btn:hover{transform:translateY(-2px)}

/* Tags & Badges */
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(30,136,229,.1);color:var(--color-primary);font-size:12px}
.badge{display:inline-block;padding:3px 6px;border-radius:6px;background:rgba(255,112,67,.12);color:var(--color-accent);font-size:12px}

/* Footer */
.site-footer{border-top:1px solid #eee;margin-top:24px;padding:12px 0}

/* Enhanced Images & Media with Performance */
.img-fluid{max-width:100%;height:auto;display:block}
.img-rounded{border-radius:12px}
.img-lazy{opacity:0;transition:opacity 0.3s ease}
.img-lazy.loaded{opacity:1}
.ratio{position:relative;width:100%;display:block;overflow:hidden;border-radius:8px}
.ratio:before{content:"";display:block;padding-top:56.25%}
.ratio .img-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease}
.ratio:hover .img-cover{transform:scale(1.05)}
.skeleton{background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite}
@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* Enhanced Utilities & Accessibility Helpers */
.divider{height:1px;background:var(--color-border);margin:24px 0}
.muted{color:#6b7280}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-40px;left:6px;background:var(--color-primary);color:white;padding:8px;text-decoration:none;border-radius:4px;z-index:1000}
.skip-link:focus{top:6px}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mt-4{margin-top:16px}
.p-0{padding:0}
.d-none{display:none}
.d-block{display:block}
.d-flex{display:flex}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.items-center{align-items:center}
.gap-4{gap:16px}
.w-full{width:100%}
.h-full{height:100%}
.rounded{border-radius:8px}
.shadow{box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.transition{transition:all 0.2s ease}
.hover\:scale-105:hover{transform:scale(1.05)}
.focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.print\:hidden{display:block}
@media print{.print\:hidden{display:none}}

/* Search Form Styles */
.search-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-input{flex:1;min-width:200px;padding:8px 12px;border:2px solid #e2e8f0;border-radius:6px;font-size:14px}
.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}

/* Pagination Styles */
.pagination{margin:24px 0;text-align:center}
.pagination-links{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.pagination-dots{color:#9ca3af;font-weight:600;padding:0 4px}
.pagination-info{text-align:right}

/* Action Buttons */
.action-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Responsive Adjustments for New Elements */
@media (max-width: 768px){
  .d-flex.justify-between{flex-direction:column;gap:16px}
  .search-form{width:100%}
  .search-input{min-width:unset}
  .pagination-links{gap:4px}
  .pagination-links .btn{padding:8px 12px;font-size:14px}
  .action-buttons{justify-content:center}
}

/* Smooth Animations & Interactions */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.animate-on-scroll:nth-child(1) { animation-delay: 0.1s; }
.animate-on-scroll:nth-child(2) { animation-delay: 0.2s; }
.animate-on-scroll:nth-child(3) { animation-delay: 0.3s; }

/* Enhanced Interactions */
.stat:hover .stat strong {
  animation: pulse 0.6s ease;
}

.btn-pulse {
  animation: pulse 2s infinite;
}

/* Enhanced Responsive Design */
@media (max-width: 1200px) {
  .container { max-width: 100%; padding: 0 20px; }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .quick-links .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .steps { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .quotes { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
  .feature-list { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  
  /* Header Responsive */
  .site-header .container {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }
  
  .site-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  
  /* Hero Responsive */
  .sc-hero {
    padding: 40px 20px;
    margin: 20px 0;
  }
  
  .sc-hero h1 {
    font-size: 36px;
    line-height: 1.1;
  }
  
  .sc-hero p {
    font-size: 18px;
  }
  
  /* Grid Responsive */
  .grid-3, .quick-links .cards, .steps, .quotes, .feature-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* Section Spacing */
  .howto, .stats, .quick-links, .testimonials, .sc-features, .sc-faq {
    margin: 40px 0;
    padding: 0 10px;
  }
  
  .cta-band {
    padding: 40px 20px;
    margin: 40px 0;
  }
  
  .cta-band h2 {
    font-size: 28px;
  }
  
  .testimonials {
    padding: 40px 20px;
  }
  
  /* Typography Responsive */
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 20px; }
  
  /* Table Responsive */
  .table {
    font-size: 14px;
  }
  
  .table th, .table td {
    padding: 6px;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 12px; }
  
  /* Mobile Hero */
  .sc-hero {
    padding: 30px 16px;
    margin: 16px 0;
  }
  
  .sc-hero h1 {
    font-size: 28px;
  }
  
  .sc-hero p {
    font-size: 16px;
  }
  
  /* Mobile Buttons */
  .btn {
    display: block;
    margin: 8px 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  
  .sc-hero .btn {
    display: inline-block;
    margin: 6px;
    width: auto;
  }
  
  /* Mobile Sections */
  .howto, .stats, .quick-links, .testimonials, .sc-features, .sc-faq {
    margin: 30px 0;
    padding: 0 8px;
  }
  
  .cta-band {
    padding: 30px 16px;
    margin: 30px 0;
  }
  
  .testimonials {
    padding: 30px 16px;
  }
  
  /* Mobile Typography */
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  
  /* Mobile Cards */
  .stat, .quick-links .card, .steps li, .quotes blockquote, .feature-list li {
    padding: 20px 16px;
  }
  
  /* Mobile Navigation */
  .site-nav a {
    padding: 6px 12px;
    font-size: 14px;
  }
  
  /* Mobile Breadcrumb */
  .breadcrumb {
    padding: 12px 16px;
    font-size: 12px;
  }
  
  /* Mobile Table */
  .table {
    font-size: 12px;
  }
  
  .table th, .table td {
    padding: 4px;
  }
}

@media (max-width: 320px) {
  .container { padding: 0 8px; }
  
  .sc-hero {
    padding: 20px 12px;
  }
  
  .sc-hero h1 {
    font-size: 24px;
  }
  
  .stat, .quick-links .card, .steps li {
    padding: 16px 12px;
  }
  
  .cta-band, .testimonials {
    padding: 20px 12px;
  }
}