/* =========================
   Critical Above-the-Fold
   ========================= */

/* Tokens (extends your existing custom props without changing look) */
:root {
    --brand:#198754;
    --brand-2:#20c997;
    --accent:#ffc107;
    --accent-2:#ffb300;
    --accent-dark:#e0a800;

    --card-shadow: 0 10px 30px rgba(0,0,0,.1);
    --hover-shadow: 0 20px 40px rgba(0,0,0,.15);
    --soft-shadow: 0 8px 25px rgba(0,0,0,.1);
    --soft-shadow-2: 0 15px 35px rgba(0,0,0,.12);
    --border-radius: 20px;
    --nav-height: 64px;
}

/* Base */
*{box-sizing:border-box}
body{font-family:'Inter',sans-serif;margin:0;padding:0;line-height:1.6}
h1,h2,h3{margin:0 0 1rem;font-weight:600}
.text-center{text-align:center}
.d-flex{display:flex}
.align-items-center{align-items:center}
.justify-content-between{justify-content:space-between}
.container{max-width:1200px;margin:0 auto;padding:0 15px}

/* Buttons (GPU-friendly transitions only) */
.btn{display:inline-block;padding:.75rem 1.5rem;border-radius:8px;text-decoration:none;touch-action:manipulation;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease}
.btn-primary{background:var(--brand);color:#fff;border:0}
.btn-primary:hover{background:#157347;transform:translateY(-2px)}

/* CTA */
.btn-primary-cta{
    position:relative;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
    border:0;color:#212529;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:1.1rem;
    box-shadow:0 8px 25px rgba(255,193,7,.5),0 4px 15px rgba(255,179,0,.4),inset 0 1px 0 rgba(255,255,255,.3);
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease;
    animation:ctaPulse 3s ease-in-out infinite;overflow:hidden;will-change:transform
}
.btn-primary-cta:hover{
    background:linear-gradient(135deg,var(--accent-dark) 0%,#d39e00 100%);
    transform:translateY(-3px) scale(1.05);
    box-shadow:0 15px 35px rgba(255,193,7,.6),0 8px 25px rgba(255,179,0,.5),inset 0 1px 0 rgba(255,255,255,.4);
    color:#212529
}
.btn-primary-cta:active{transform:translateY(-1px) scale(1.02)}
.btn-primary-cta::before{
    content:"";position:absolute;inset:0;left:-100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    transition:left .6s ease
}
.btn-primary-cta:hover::before{left:100%}

/* Secondary button tone-down */
.btn-outline-success{border-color:rgba(25,135,84,.5);color:rgba(25,135,84,.8);font-weight:500;transition:background .3s ease,border-color .3s ease,color .3s ease}
.btn-outline-success:hover{background-color:rgba(25,135,84,.1);border-color:rgba(25,135,84,.7);color:var(--brand)}

/* Header */
.navbar-modern{
    background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 20px rgba(25,135,84,.15);
    border-bottom:1px solid rgba(255,255,255,.1);
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
    min-height:64px;position:sticky;top:0;z-index:1000
}

/* Hero (merged duplicate blocks, preserved visuals) */
.modern-hero{
    background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 50%,#dee2e6 100%);
    min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:1rem 0
}
.modern-hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(45deg,rgba(40,167,69,.1) 0%,rgba(25,135,84,.15) 100%);background-size:cover
}
.hero-content{position:relative;z-index:2}

/* Homepage container */
.homepage-container{
    background:linear-gradient(135deg,rgba(25,135,84,.05) 0%,rgba(32,201,151,.08) 50%,rgba(108,117,125,.03) 100%);
    border-radius:25px;overflow:hidden;position:relative
}

/* Service icons / floaters (isolated paints) */
.service-icon,.section-particle,.bg-orb,.service-glow{contain:paint;will-change:transform}
.service-icon{
    position:absolute;width:60px;height:60px;background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--brand);box-shadow:var(--soft-shadow);animation:serviceFloat 6s ease-in-out infinite
}
.icon-1{top:20%;left:15%;animation-delay:0s}
.icon-2{top:15%;right:20%;animation-delay:2s}
.icon-3{bottom:30%;left:10%;animation-delay:4s}

/* Success badge */
.homepage-badge{animation:homepagePulse 8s ease-in-out infinite;will-change:transform}
.badge-circle{
    width:140px;height:140px;background:rgba(255,255,255,.95);backdrop-filter:blur(20px);
    border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
    box-shadow:0 15px 35px rgba(0,0,0,.15);border:3px solid rgba(25,135,84,.2);text-align:center;position:relative
}
.badge-circle::before{
    content:"";position:absolute;inset:-10px;border:2px solid rgba(25,135,84,.3);border-radius:50%;
    animation:ringPulse 3s ease-out infinite
}
.success-icon{font-size:2.5rem;color:var(--brand);margin-bottom:8px;animation:iconPulse 2s ease-in-out infinite;will-change:transform}
.success-rate{font-size:1.5rem;font-weight:800;color:var(--brand);margin-bottom:2px}
.success-label{font-size:.8rem;color:#6c757d;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* Stat badges */
.stat-badge{animation:statFloat 5s ease-in-out infinite;will-change:transform}
.stat-content{
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
    padding:12px 16px;border-radius:15px;box-shadow:var(--soft-shadow);text-align:center;min-width:80px
}
.stat-number{font-size:1.2rem;font-weight:800;color:var(--brand);margin-bottom:2px}
.stat-label{font-size:.7rem;color:#6c757d;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.stat-1{animation-delay:.5s}.stat-2{animation-delay:2.5s}.stat-3{animation-delay:4.5s}

/* Process / steps */
.step-icon-container{width:80px;height:80px;margin:0 auto;position:relative}
.step-bg-circle{width:80px;height:80px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:50%;position:absolute;top:0;left:0;box-shadow:0 8px 25px rgba(25,135,84,.3)}
.step-icon-modern{width:80px;height:80px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.step-icon-modern i{font-size:1.8rem}
.step-number-badge{
    position:absolute;top:-8px;right:-8px;width:28px;height:28px;background:#fff;color:var(--brand);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:3
}
.process-card .card{transition:transform .3s ease,box-shadow .3s ease;will-change:transform}
.process-card:hover .card{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.1)!important}
.connecting-arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);pointer-events:none}
.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:1.2rem;opacity:.6}
.arrow-1{left:23%}.arrow-2{left:48%}.arrow-3{left:73%}
.process-time{padding:.25rem .75rem;background:rgba(25,135,84,.1);border-radius:15px;display:inline-block}

/* Glass cards */
.glass-why-card,.glass-service-card{
    background:rgba(255,255,255,.2);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.35);
    border-radius:20px;box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;animation:serviceFloat 6s ease-in-out infinite;will-change:transform
}
.glass-why-card:nth-child(2){animation-delay:1s}.glass-why-card:nth-child(3){animation-delay:2s}
.glass-why-card:hover,.glass-service-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:var(--hover-shadow);background:rgba(255,255,255,.3)}
.glass-icon-container{position:relative;width:80px;height:80px;margin:0 auto}
.glass-icon-bg{position:absolute;inset:0;width:80px;height:80px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:50%;box-shadow:0 10px 30px rgba(25,135,84,.3)}
.glass-icon{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.8rem;z-index:2}
.icon-pulse{position:absolute;inset:0;border:2px solid rgba(25,135,84,.3);border-radius:50%;animation:iconPulse 2s ease-in-out infinite}

/* Service grid accents */
.service-icon-wrapper{position:relative;width:60px;height:60px;margin:0 auto}
.service-icon-bg{position:absolute;inset:0;width:60px;height:60px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:15px;box-shadow:0 8px 25px rgba(25,135,84,.25);transform:rotate(45deg)}
.service-icon{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.5rem;z-index:2}
.service-glow{position:absolute;top:-5px;left:-5px;width:70px;height:70px;background:linear-gradient(135deg,rgba(25,135,84,.2),rgba(32,201,151,.2));border-radius:20px;transform:rotate(45deg);animation:serviceGlow 3s ease-in-out infinite;z-index:1}
.services-bg-elements{position:absolute;inset:0;pointer-events:none}
.bg-orb{position:absolute;border-radius:50%;background:linear-gradient(135deg,rgba(25,135,84,.1),rgba(32,201,151,.05));backdrop-filter:blur(5px);animation:orbDrift 8s ease-in-out infinite}
.orb-services-1{width:120px;height:120px;top:10%;right:10%}
.orb-services-2{width:80px;height:80px;bottom:15%;left:15%;animation-delay:3s}

/* Micro-interactions */
.pulse-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}
.stat-card{transition:transform .3s ease,box-shadow .3s ease;min-height:180px;will-change:transform}
.stat-card:hover{transform:translateY(-5px)}
.subject-card,.writer-card,.success-card{
    transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden;will-change:transform
}
.subject-card{min-height:280px}
.writer-card{min-height:420px}
.success-card{min-height:380px}
.subject-card::before,.writer-card::before{
    content:"";position:absolute;inset:0;left:-100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    transition:left .5s ease
}
.subject-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,.1)!important}
.subject-card:hover::before,.writer-card:hover::before{left:100%}
.subject-icon,.expertise-stat,.metric-item,.summary-stat,.stat-icon i{transition:transform .3s ease}
.subject-card:hover .subject-icon{transform:scale(1.1) rotate(5deg)}
.expertise-stat:hover,.success-card:hover .metric-item{transform:scale(1.05)}
.summary-stat:hover{transform:translateY(-5px)}
.summary-stat:hover .stat-icon i{transform:scale(1.2) rotate(5deg)}
.stars i{transition:color .3s ease}
.writer-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(25,135,84,.15);border-color:rgba(25,135,84,.3)}
.writer-card:hover .stars i{color:#ffc107!important;text-shadow:0 0 5px rgba(255,193,7,.5)}

/* Modern cards / sections (kept as-is, targeted transitions) */
.modern-card{
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:var(--border-radius);
    box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease
}
.modern-card:hover{transform:translateY(-10px);box-shadow:var(--hover-shadow)}

.feature-card-modern{
    background:linear-gradient(145deg,#fff,#f8f9fa);border-radius:25px;padding:2rem;text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.1);transition:transform .4s ease,box-shadow .4s ease;border:0;position:relative;overflow:hidden;will-change:transform
}
.feature-card-modern::before{content:"";position:absolute;inset:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease}
.feature-card-modern:hover::before{left:100%}
.feature-card-modern:hover{transform:translateY(-15px) scale(1.02);box-shadow:0 25px 50px rgba(0,0,0,.15)}

.pricing-calculator-modern{
    background:linear-gradient(145deg,#fff,#f8f9fa);border-radius:30px;padding:3rem;box-shadow:0 20px 60px rgba(0,0,0,.1);border:0;position:relative
}
.pricing-calculator-modern::before{content:"";position:absolute;inset:-2px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);border-radius:32px;z-index:-1}

.testimonial-modern{
    background:rgba(255,255,255,.9);backdrop-filter:blur(15px);border-radius:25px;padding:2.5rem;
    box-shadow:0 15px 40px rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.3);transition:transform .3s ease,box-shadow .3s ease
}
.testimonial-modern:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(0,0,0,.12)}

.guarantee-card-modern{
    background:linear-gradient(145deg,#fff,#f8f9fa);border-radius:25px;padding:2.5rem;text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.1);border:2px solid transparent;background-clip:padding-box;position:relative;transition:transform .4s ease,box-shadow .4s ease
}
.guarantee-card-modern::before{
    content:"";position:absolute;inset:0;border-radius:25px;padding:2px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1
}
.guarantee-card-modern:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 25px 60px rgba(0,0,0,.15)}
.guarantee-icon{text-align:center}
.guarantee-icon i{font-size:3rem;color:var(--brand)}

/* Buttons in nav */
.navbar-brand-modern{display:flex;align-items:center;gap:.75rem;text-decoration:none;transition:transform .3s ease}
.navbar-brand-modern:hover{transform:translateY(-2px)}
.brand-text{color:#fff;font-weight:700;font-size:1.25rem;letter-spacing:-.5px}
.btn-nav-modern{padding:.75rem 1.5rem;border-radius:25px;font-weight:600;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease;border:2px solid transparent;display:inline-flex;align-items:center;font-size:.9rem}
.btn-nav-outline{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.btn-nav-outline:hover{color:var(--brand);background:#fff;border-color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}
.btn-nav-primary{color:var(--brand);background:#fff;border-color:#fff}
.btn-nav-primary:hover{color:#fff;background:transparent;border-color:#fff;transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}

/* Testimonials & stats (unchanged look) */
.testimonials-section{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:5rem 0}
.testimonial-card-modern{
    background:rgba(255,255,255,.9);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.1);backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.2);transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden
}
.testimonial-card-modern::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%)}
.testimonial-card-modern:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,.15)}
.quote-icon{color:var(--bs-success);font-size:2rem;opacity:.3}
.rating-stars{color:#ffc107;font-size:1.1rem}
.testimonial-text{font-style:italic;line-height:1.6;color:#555;font-size:1rem}
.testimonial-author{display:flex;align-items:center;gap:1rem}
.author-avatar{width:50px;height:50px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem}
.author-name{font-weight:600;color:#333;margin-bottom:.25rem}
.author-title{font-size:.9rem;color:#666}

.stats-showcase{margin-top:4rem}
.stat-card{background:rgba(255,255,255,.8);border-radius:15px;padding:2rem 1rem;box-shadow:0 8px 25px rgba(0,0,0,.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)}
.stat-card:hover{transform:translateY(-5px);box-shadow:var(--soft-shadow-2)}
.stat-icon{width:60px;height:60px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;color:#fff;font-size:1.5rem}
.stat-label{color:#666;font-size:.95rem;font-weight:500}

/* Feature hero cards */
.feature-card-hero{
    background:rgba(255,255,255,.9);border-radius:20px;padding:1.5rem 1rem;box-shadow:0 8px 25px rgba(0,0,0,.08);
    border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);transition:transform .3s ease,box-shadow .3s ease;height:100%
}
.feature-card-hero:hover{transform:translateY(-5px);box-shadow:var(--soft-shadow-2)}
.feature-icon{width:50px;height:50px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;color:#fff;font-size:1.2rem}

/* Sections / backgrounds */
.section-modern{padding:6rem 0;position:relative}
.floating-elements{position:absolute;inset:0;overflow:hidden;z-index:1;contain:paint;will-change:transform}
.floating-elements::before,.floating-elements::after{
    content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1);animation:float 6s ease-in-out infinite
}
.floating-elements::before{width:100px;height:100px;top:20%;left:10%;animation-delay:0s}
.floating-elements::after{width:150px;height:150px;top:60%;right:15%;animation-delay:3s}

.trust-badge-modern{
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:20px;padding:1.5rem;text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.1);border:1px solid rgba(255,255,255,.3);transition:transform .3s ease,box-shadow .3s ease
}
.trust-badge-modern:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,.15)}

.stats-counter{
    font-size:3rem;font-weight:800;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}

.section-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent);margin:4rem 0}

/* Order / why / writer / how-it-works */
.order-summary-modern{background:linear-gradient(145deg,#fff,#f8f9fa);border:2px solid transparent;background-clip:padding-box;box-shadow:0 15px 35px rgba(0,0,0,.1);position:relative}
.order-summary-modern::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1
}
.how-it-works-modern{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);position:relative;overflow:hidden}
.how-it-works-modern::before{
    content:"";position:absolute;inset:0;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="g" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23000" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>') repeat;
    pointer-events:none
}
.process-timeline{position:relative}
.process-step{position:relative;z-index:2}
.step-circle{
    width:80px;height:80px;background:linear-gradient(135deg,#0d4f2a,#198754);border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin:0 auto 1rem;position:relative;box-shadow:0 10px 30px rgba(25,135,84,.4);border:3px solid #fff;transition:transform .3s ease,box-shadow .3s ease
}
.step-circle:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px rgba(25,135,84,.4)}
.step-number{
    position:absolute;top:-10px;right:-10px;width:24px;height:24px;background:#fff;color:var(--brand);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;box-shadow:0 2px 8px rgba(0,0,0,.1)
}
.step-icon{color:#fff;font-size:1.5rem;text-shadow:0 2px 4px rgba(0,0,0,.3);filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.process-line{
    position:absolute;top:40px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand));z-index:1
}
.process-line::before{content:"";position:absolute;top:-1px;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,rgba(25,135,84,.2),transparent);border-radius:2px}

.writer-showcase-modern{background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);position:relative}
.writer-showcase-modern::before{
    content:"";position:absolute;inset:0;background:
    radial-gradient(circle at 20% 80%,rgba(25,135,84,.05) 0%,transparent 50%),
    radial-gradient(circle at 80% 20%,rgba(32,201,151,.05) 0%,transparent 50%);pointer-events:none
}
.writer-card{background:rgba(255,255,255,.95);border:1px solid rgba(25,135,84,.1)}
/* Writer Cards Animation (fixed invalid HTML comment) */
.writer-status{font-size:.75rem;animation:statusPulse 2s infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.7}}

.why-choose-modern{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);position:relative}
.why-card-modern{
    background:rgba(255,255,255,.95);border-radius:20px;padding:2.5rem 2rem;box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid rgba(25,135,84,.1);transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden
}
.why-card-modern::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%)}
.why-card-modern:hover{transform:translateY(-10px);box-shadow:0 20px 50px rgba(25,135,84,.15)}
.why-icon-modern{width:80px;height:80px;background:linear-gradient(135deg,var(--brand),var(--brand-2));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;box-shadow:0 10px 30px rgba(25,135,84,.3)}
.why-icon-modern i{font-size:2rem;color:#fff}
.why-feature-list .feature-item{padding:.5rem 0;font-size:.9rem;color:#6c757d}

.faq-section-modern{background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%)}

/* Mobile bottom nav */
.mobile-nav-bottom{
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,.1);box-shadow:0 -2px 10px rgba(0,0,0,.1)
}
.mobile-nav-bottom a{padding:.75rem .5rem;border-radius:8px;transition:transform .2s ease,background .2s ease;min-width:60px;touch-action:manipulation}
.mobile-nav-bottom a:hover,.mobile-nav-bottom a:active{background:rgba(25,135,84,.1);transform:translateY(-1px)}
.mobile-nav-bottom i{font-size:1.2rem;margin-bottom:.25rem}

/* Media queries (merged/kept) */
@media (max-width:1200px){.d-hide-in-small-medium{display:none!important}}
@media (max-width:930px){.d-hide-in-small{display:none!important}}
@media (max-width:991.98px){
    .hero-text-content{padding-right:0;text-align:center}
    .value-highlight{text-align:center}
    .navbar-modern{padding:.5rem 0;min-height:56px}
    .navbar-brand-modern{font-size:1.1rem}
    .navbar-brand-modern img{height:20px!important}
    .btn-nav-modern{padding:.4rem .8rem!important;font-size:.9rem}
    .glass-container{height:350px}
    .counter-number{font-size:2rem}
    .stats-grid{gap:1rem}
    .floating-orb{display:none}
}
@media (min-width:992px){
    .modern-hero{min-height:calc(100vh - var(--nav-height));padding:1rem 0}
    .modern-hero .container{padding-top:1rem;padding-bottom:1rem}
    .modern-hero h1.display-4{margin-bottom:1rem!important;font-size:clamp(2rem,4vw,3rem)}
    .modern-hero .lead{margin-bottom:1rem!important;font-size:1.1rem}
    .modern-hero .hero-actions{margin-bottom:1rem!important}
    .modern-hero .hero-actions .btn{padding:.75rem 1.5rem;width:auto}
    .modern-hero .badge{padding:.35rem .75rem!important}
    .modern-hero .hero-features .feature-card-hero{padding:.75rem}
    .modern-hero .hero-features .feature-icon{font-size:1.25rem}
    .modern-hero .hero-stats .h5{font-size:1rem}
    .feature-card-modern{padding:2rem}
    .feature-card-modern:hover{transform:translateY(-15px) scale(1.02)}
    .pricing-calculator-modern{padding:3rem}
    .testimonial-modern{padding:2.5rem}
    .navbar-modern .container,.navbar-modern .d-md-flex{flex-wrap:nowrap!important}
    .navbar-modern .navbar-brand-modern,.navbar-modern .nav-link,.navbar-modern .btn-nav-modern{white-space:nowrap}
    .navbar-modern .nav-link{padding-left:.75rem!important;padding-right:.75rem!important}
    .navbar-modern .btn-nav-modern{padding:.5rem 1rem!important}
    .navbar-modern .navbar-brand-modern{gap:.5rem}
}
@media (min-width:1200px){.container{max-width:1140px}}
@media (max-width:768px){
    .modern-hero{min-height:80vh;padding:2rem 0}
    .container{padding:0 10px}
    .homepage-container{height:350px!important}
    .badge-circle{width:120px;height:120px}
    .success-icon{font-size:2rem}
    .success-rate{font-size:1.3rem}
    .service-icon{width:50px;height:50px;font-size:1.2rem}
}

/* Images / lazy states (kept) */
img{max-width:100%;height:auto}
img.lazy{
    opacity:0;transition:opacity .3s ease;
    background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite
}
img.loaded{opacity:1}
@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* NOTE: .webp img[data-webp] { content: ... } doesn't switch sources on <img>.
         Keep as-is for compatibility with your setup; prefer <picture> in HTML. */
.webp img[data-webp]{content:attr(data-webp)}
img[data-critical="true"]{opacity:1}

/* Utilities */
.hero-actions{margin-bottom:2rem!important}
.hero-actions .btn{width:100%;margin-bottom:.75rem;padding:.875rem 1.5rem;font-size:1rem}
@media (min-width:480px){
    .hero-actions .btn{width:auto;display:inline-block;margin-right:.75rem;margin-bottom:.5rem}
    .feature-card-modern{padding:1.75rem}
    .pricing-calculator-modern{padding:2rem}
}
@media (min-width:768px){
    .modern-hero{padding:2rem 0}
    .feature-card-modern{padding:2rem;margin-bottom:0}
    .feature-card-modern:hover{transform:translateY(-10px) scale(1.02)}
    .pricing-calculator-modern{padding:2.5rem}
    .testimonial-modern{padding:2rem}
}

/* Guarantees section */
.guarantees-section-modern{
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:6rem 0;position:relative;overflow:hidden
}
.guarantees-section-modern::before{
    content:"";position:absolute;inset:0;
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity:.3
}
.guarantees-section-modern .container{position:relative;z-index:2}
.guarantees-section-modern h2{color:#fff}
.guarantees-section-modern .lead{color:rgba(255,255,255,.8)}
.guarantee-icon{
    width:80px;height:80px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;
    color:#fff;font-size:2rem;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.2)
}
.guarantee-badge{
    background:rgba(255,255,255,.2);color:#fff;padding:.75rem 1.5rem;border-radius:25px;font-weight:600;display:inline-block;
    backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3)
}

/* Urgency banner */
.urgency-banner-modern{
    background:linear-gradient(45deg,#ff6b6b,#ee5a24);border-radius:20px;padding:2.5rem;box-shadow:0 15px 35px rgba(238,90,36,.3);position:relative;overflow:hidden
}
.urgency-banner-modern::before{
    content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 3s infinite
}
.urgency-icon{
    width:60px;height:60px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;animation:pulse 2s infinite
}

/* Keyframes (de-duplicated; kept final cascade behavior) */
@keyframes ctaPulse{
    0%,100%{box-shadow:0 8px 25px rgba(255,193,7,.5),0 4px 15px rgba(255,179,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
    50%{box-shadow:0 12px 35px rgba(255,193,7,.6),0 6px 20px rgba(255,179,0,.5),inset 0 1px 0 rgba(255,255,255,.4)}
}
@keyframes serviceFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes homepagePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ringPulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}
/* Use the later version with opacity to preserve current cascade */
@keyframes iconPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.2);opacity:.3}}
@keyframes statFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes serviceGlow{0%,100%{opacity:.3;transform:rotate(45deg) scale(1)}50%{opacity:.6;transform:rotate(45deg) scale(1.1)}}
@keyframes orbDrift{0%,100%{transform:translateX(0) translateY(0)}33%{transform:translateX(15px) translateY(-10px)}66%{transform:translateX(-10px) translateY(15px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}
@keyframes sectionParticleFloat{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-200px) rotate(360deg);opacity:0}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Particles */
.section-particles{position:absolute;inset:0;pointer-events:none}
.section-particle{position:absolute;width:6px;height:6px;background:rgba(25,135,84,.3);border-radius:50%;animation:sectionParticleFloat 12s linear infinite}
.particle-1{top:20%;left:10%;animation-delay:0s}
.particle-2{top:60%;right:15%;animation-delay:4s}
.particle-3{bottom:20%;left:20%;animation-delay:8s}

/* Accessibility / performance guards */
@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .service-icon,.badge-circle,.stat-content,.bg-orb,.modern-card,.testimonial-modern,.trust-badge-modern,.feature-card-hero{backdrop-filter:none}
}

/* Misc small fixes */
.value-highlight{border-left:4px solid var(--bs-success)!important}
.value-icon{width:50px;height:50px;background:rgba(25,135,84,.1);border-radius:50%;display:flex;align-items:center;justify-content:center}
.hero-actions .btn{font-weight:600;letter-spacing:.5px}
.stat-item{padding:.5rem}
img.writer-profile{object-fit:fill!important;height:100px!important;width:100px!important}
/* ===== Testimonials slider shell (perf-friendly) ===== */
.t-slider{position:relative}
.t-viewport{overflow:hidden; outline:none}
.t-track{
    display:flex; gap:24px; will-change:transform;
    transition:transform .5s ease;
    padding: 8px 4px; /* space for focus ring */
}
.t-slide{min-width:clamp(280px, 80vw, 480px); flex:0 0 auto}
@media (min-width:768px){ .t-slide{min-width:calc(50% - 12px)} }    /* 2 per view */
@media (min-width:1200px){ .t-slide{min-width:calc(33.333% - 16px)} }/* 3 per view */

.t-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    border:0; width:44px; height:44px; border-radius:50%;
    background:#fff; box-shadow:0 8px 25px rgba(0,0,0,.12);
    display:grid; place-items:center; font-size:26px; line-height:1;
    color:#198754; cursor:pointer; z-index:3;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.t-prev{left:-6px} .t-next{right:-6px}
.t-nav:hover{transform:translateY(-50%) scale(1.05)}
.t-nav:focus-visible{outline:2px solid #198754; outline-offset:2px}

.t-dots{display:flex; justify-content:center; gap:8px; margin-top:16px}
.t-dots button{
    width:8px;height:8px;border-radius:50%;border:0;background:rgba(25,135,84,.3);
}
.t-dots button[aria-selected="true"]{background:#198754; width:22px; border-radius:10px; transition:width .2s}

@media (prefers-reduced-motion:reduce){
    .t-track{transition:none}
}



/* Writer card slide widths (1/2/3 per view by default) */
.t-slide{min-width:clamp(280px,80vw,480px);flex:0 0 auto}
@media (min-width:768px){ .t-slide{min-width:calc(50% - 12px)} }
@media (min-width:1200px){ .t-slide{min-width:calc(33.333% - 16px)} }

/* Optional: firmer truncation */
.two-line-truncate{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

ul{
    list-style: none;
    padding-left: 0; /* optional: removes default indent */
    margin: 0;
}
.t-track{
    max-width: 420px !important;
}