/* ================================================================
   ZAPLO — Main Stylesheet
   ================================================================ */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;
    --primary-bg: #eff6ff;
    --navy: #0f172a;
    --navy-dark: #020617;
    --green: #16a34a;
    --green-dark: #15803d;
    --green-bg: #f0fdf4;
    --amber: #f59e0b;
    --amber-bg: #fffbeb;
    --red: #ef4444;
    --red-bg: #fef2f2;
    --g50: #f8fafc; --g100: #f1f5f9; --g200: #e2e8f0; --g300: #cbd5e1;
    --g400: #94a3b8; --g500: #64748b; --g600: #475569; --g700: #334155;
    --g800: #1e293b; --g900: #0f172a; --white: #fff;
    --sh-sm: 0 1px 3px rgba(0,0,0,.06);
    --sh-md: 0 4px 12px rgba(0,0,0,.08);
    --sh-lg: 0 12px 24px rgba(0,0,0,.08);
    --sh-xl: 0 20px 40px rgba(0,0,0,.1);
    --r: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.25rem; --r-full: 9999px;
    --ease: cubic-bezier(.4,0,.2,1);
}

/* Reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--g800);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%}
a{text-decoration:none;color:inherit;transition:.2s var(--ease)}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 1.5rem;width:100%}
.hidden{display:none!important}
.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}
.text-gradient{background:linear-gradient(135deg,var(--primary),#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-weight:600;font-size:.875rem;border:none;border-radius:var(--r-md);cursor:pointer;transition:.2s var(--ease);padding:.65rem 1.35rem;white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 2px 8px rgba(37,99,235,.3)}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 16px rgba(37,99,235,.35);transform:translateY(-1px)}
.btn-green{background:var(--green);color:var(--white);box-shadow:0 2px 8px rgba(22,163,74,.3)}
.btn-green:hover{background:var(--green-dark);transform:translateY(-1px)}
.btn-outline{background:var(--white);color:var(--primary);border:1.5px solid var(--g200)}
.btn-outline:hover{background:var(--primary-bg);border-color:var(--primary)}
.btn-sm{padding:.4rem .85rem;font-size:.8rem}
.btn-lg{padding:.8rem 1.6rem;font-size:.95rem}
.btn-full{width:100%}

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--g200);transition:.2s}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:inline-flex;align-items:baseline;gap:0;font-family:'Montserrat',sans-serif}
.logo-icon{font-weight:800;font-size:1.4rem;color:var(--primary)}
.logo-text{font-weight:800;font-size:1.4rem;color:var(--navy)}
.logo-text .logo-accent{color:var(--primary)}
.nav{display:flex;gap:1.5rem}
.nav a{font-weight:500;color:var(--g600);font-size:.82rem}
.nav a:hover{color:var(--primary)}
.header-cta{display:block}
.mobile-menu-btn{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;z-index:1002}
.mobile-menu-btn span{width:20px;height:2px;background:var(--g700);border-radius:2px;transition:.2s var(--ease)}
.mobile-menu{position:fixed;top:60px;left:0;right:0;bottom:0;background:var(--white);display:flex;flex-direction:column;padding:1rem 1.5rem;overflow-y:auto;z-index:1001;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
.mobile-menu.open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}
.mobile-menu a{font-weight:600;color:var(--g700);padding:.85rem 0;border-bottom:1px solid var(--g100);font-size:.92rem;display:flex;align-items:center;justify-content:space-between}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:active{color:var(--primary)}
.mobile-menu a::after{content:'›';font-size:1.2rem;color:var(--g400);font-weight:400}

/* ===== Hero ===== */
.hero{padding:120px 0 60px;background:var(--g50);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-200px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.06) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.hero-content{display:grid;grid-template-columns:1fr 400px;gap:3rem;align-items:center}
.hero-pill{display:inline-block;padding:.35rem .85rem;background:var(--green-bg);color:var(--green-dark);border:1px solid rgba(22,163,74,.2);border-radius:var(--r-full);font-size:.75rem;font-weight:700;margin-bottom:1.25rem}
.hero-text h1{font-size:2.5rem;font-weight:800;line-height:1.15;color:var(--navy);margin-bottom:1rem;letter-spacing:-.03em}
.hero-subtitle{font-size:1rem;color:var(--g500);margin-bottom:1.75rem;max-width:460px;line-height:1.7}
.hero-highlights{display:inline-flex;align-items:center;gap:1.5rem;padding:1rem 1.75rem;background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.hero-hl{text-align:center}
.hero-hl-value{font-size:1.35rem;font-weight:800;color:var(--primary);line-height:1.2}
.hero-hl-label{font-size:.7rem;color:var(--g500);margin-top:.1rem}
.hero-hl-divider{width:1px;height:32px;background:var(--g200);flex-shrink:0}

/* ===== Calculator ===== */
.calc-card{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg);border:1px solid var(--g200);overflow:hidden}
.calc-header{padding:1.15rem 1.5rem;background:var(--primary);color:var(--white)}
.calc-header h2{font-size:1rem;font-weight:700}
.calc-header p{font-size:.78rem;color:rgba(255,255,255,.75);margin-top:.1rem}
.calc-body{padding:1.25rem 1.5rem}
.slider-group{margin-bottom:1.25rem}
.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.82rem;font-weight:500;color:var(--g700)}
.slider-value{font-size:1.15rem;font-weight:700;color:var(--primary)}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--g200);outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary);cursor:pointer;border:3px solid var(--white);box-shadow:0 2px 6px rgba(37,99,235,.3)}
.slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--primary);cursor:pointer;border:3px solid var(--white);box-shadow:0 2px 6px rgba(37,99,235,.3)}
.slider-range{display:flex;justify-content:space-between;font-size:.7rem;color:var(--g400);margin-top:.3rem}
.calc-result{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-md);padding:.85rem 1rem;margin-bottom:1rem}
.calc-result-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--g600)}
.calc-result-row + .calc-result-row{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--g200)}
.result-value{font-weight:700;color:var(--navy)}
.result-total{font-size:1.1rem;color:var(--green)}
.calc-trust{display:flex;justify-content:center;gap:.85rem;margin-top:.75rem;flex-wrap:wrap}
.calc-trust span{display:flex;align-items:center;gap:.2rem;font-size:.68rem;color:var(--g400)}
.calc-trust svg{color:var(--green)}

/* ===== Categories ===== */
.categories{padding:2.5rem 0;background:var(--white)}
.categories-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.category-card{display:block;text-decoration:none;background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r-lg);padding:1.5rem 1.25rem;text-align:center;transition:.2s var(--ease)}
.category-card:hover{border-color:var(--primary);box-shadow:var(--sh-md);transform:translateY(-2px)}
.category-icon{width:52px;height:52px;margin:0 auto .75rem;background:var(--primary-bg);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:.2s}
.category-card:hover .category-icon{background:var(--primary)}
.category-card h3{font-size:.9rem;font-weight:700;color:var(--navy);margin-bottom:.25rem}
.category-card p{font-size:.78rem;color:var(--g500)}

/* ===== Section Header ===== */
.section-header{text-align:center;margin-bottom:2.5rem}
.section-header h2{font-size:1.75rem;font-weight:800;color:var(--navy);margin-bottom:.4rem;letter-spacing:-.01em}
.section-header p{font-size:.95rem;color:var(--g500)}

/* ===== How it Works ===== */
.how-it-works{padding:4rem 0;background:var(--g50);border-top:1px solid var(--g200)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.step-card{background:var(--white);border-radius:var(--r-lg);padding:2rem 1.5rem;text-align:center;box-shadow:var(--sh-sm);border:1px solid var(--g200);transition:.2s var(--ease)}
.step-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.step-number{width:36px;height:36px;border-radius:50%;background:var(--primary);color:var(--white);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.step-card h3{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:.4rem}
.step-card p{font-size:.82rem;color:var(--g500);line-height:1.6}

/* ===== Top Offers ===== */
.top-offers{padding:4rem 0;background:var(--white)}
.offers-showcase{display:grid;gap:1rem}

/* ===== Offer Card ===== */
.offer-card{background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r-lg);transition:.2s var(--ease);position:relative;overflow:hidden}
.offer-card:hover{box-shadow:var(--sh-lg);border-color:var(--g300)}
.offer-card.best{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--sh-md)}
.offer-card.best::before{content:'\2605  Najlepsza oferta';position:absolute;top:0;right:0;background:var(--green);color:var(--white);font-size:.68rem;font-weight:700;padding:.25rem .7rem;border-radius:0 0 0 var(--r);z-index:2}
.oc-inner{display:grid;grid-template-columns:1fr 190px;overflow:hidden}
.oc-left{padding:1.25rem 1.5rem}
.oc-right{display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1.25rem;border-left:1px solid var(--g200);background:var(--g50)}
.oc-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap}
.offer-logo{width:140px;height:50px;background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;padding:.3rem .75rem}
.offer-logo img{max-width:100%;max-height:100%;object-fit:contain}
.offer-logo-text{font-weight:800;font-size:.82rem;color:var(--navy);text-align:center;line-height:1.1}
.oc-name-wrap{display:flex;flex-direction:column;gap:.05rem}
.oc-name{font-size:1.05rem;font-weight:800;color:var(--navy);line-height:1.2;margin:0}
.offer-rating{display:flex;align-items:center;gap:.25rem}
.stars{color:var(--amber);font-size:.82rem}
.rating-score{font-size:.72rem;font-weight:700;color:var(--g500)}
.offer-badges{display:flex;flex-wrap:wrap;gap:.25rem;margin-left:auto}
.offer-badge{font-size:.62rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--r-full);white-space:nowrap}
.badge-free{background:var(--green-bg);color:var(--green);border:1px solid rgba(22,163,74,.15)}
.badge-nobik{background:var(--primary-bg);color:var(--primary);border:1px solid rgba(37,99,235,.12)}
.badge-type{background:var(--amber-bg);color:#92400e;border:1px solid rgba(245,158,11,.2)}

/* Details 3x2 */
.oc-details{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:.75rem;border:1px solid var(--g200);border-radius:var(--r);overflow:hidden}
.oc-detail{display:flex;flex-direction:column;gap:.05rem;padding:.55rem .65rem;border-right:1px solid var(--g200);border-bottom:1px solid var(--g200)}
.oc-detail:nth-child(3n){border-right:none}
.oc-detail:nth-child(n+4){border-bottom:none}
.oc-detail-label{font-size:.65rem;color:var(--g400)}
.oc-detail-value{font-size:.88rem;font-weight:700;color:var(--navy)}
.oc-detail-value.oc-green{color:var(--green)}
.oc-features{display:flex;flex-wrap:wrap;gap:.25rem}
.feature-tag{display:inline-flex;align-items:center;gap:.2rem;font-size:.68rem;color:var(--g600);background:var(--g50);border:1px solid var(--g200);padding:.15rem .45rem;border-radius:var(--r-full)}
.feature-tag .check{color:var(--green);font-weight:700;font-size:.72rem}
.oc-disclaimer{font-size:.58rem;color:var(--g400);padding:.45rem 1.5rem;line-height:1.4;background:var(--g50);border-top:1px solid var(--g200)}

/* ===== Benefits ===== */
.benefits-section{padding:4.5rem 0;background:var(--navy);color:var(--white)}
.benefits-section .section-header h2{color:var(--white)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.benefit-item{padding:1.5rem 1.25rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);transition:.2s var(--ease)}
.benefit-item:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.benefit-icon{width:44px;height:44px;border-radius:var(--r);background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.85rem}
.benefit-item h3{font-size:.88rem;font-weight:700;color:var(--white);margin-bottom:.4rem}
.benefit-item p{font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.6}

/* ===== Comparison Cards ===== */
.home-comparison{padding:4.5rem 0;background:var(--g50);border-top:1px solid var(--g200)}
.compare-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:800px;margin:0 auto}
.compare-card{background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r-xl);padding:2rem 1.75rem;position:relative;transition:.2s var(--ease)}
.compare-card:hover{box-shadow:var(--sh-lg)}
.compare-highlight{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--sh-md)}
.compare-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--white);font-size:.68rem;font-weight:700;padding:.25rem .85rem;border-radius:var(--r-full)}
.compare-card h3{font-size:1.25rem;font-weight:800;color:var(--navy);margin-bottom:.75rem;text-align:center}
.compare-price{text-align:center;margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--g200)}
.compare-price{font-size:2rem;font-weight:800;color:var(--primary);line-height:1.1}
.compare-price span{display:block;font-size:.75rem;font-weight:500;color:var(--g500);margin-top:.25rem}
.compare-list{list-style:none;padding:0;margin:0 0 1.5rem}
.compare-list li{padding:.5rem 0;border-bottom:1px solid var(--g100);font-size:.85rem;color:var(--g600);display:flex;align-items:center;gap:.35rem}
.compare-list li:last-child{border-bottom:none}
.compare-list li::before{content:'✓';color:var(--green);font-weight:700;font-size:.8rem;flex-shrink:0}
.compare-list li strong{color:var(--navy);font-weight:700}

/* ===== Blog Preview ===== */
.blog-preview{padding:4.5rem 0;background:var(--g50);border-top:1px solid var(--g200)}
.blog-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.blog-preview-card{display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--g200);border-radius:var(--r-lg);padding:1.25rem;transition:.2s var(--ease);text-decoration:none;color:inherit}
.blog-preview-card:hover{box-shadow:var(--sh-md);border-color:var(--primary);transform:translateY(-2px)}
.blog-preview-tag{font-size:.65rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6rem}
.blog-preview-card h3{font-size:.88rem;font-weight:700;color:var(--navy);margin-bottom:.4rem;line-height:1.35}
.blog-preview-card p{font-size:.78rem;color:var(--g500);line-height:1.6;flex:1;margin-bottom:.6rem}
.blog-preview-meta{font-size:.7rem;color:var(--g400);margin-top:auto}

/* ===== CTA Banner ===== */
.cta-banner{padding:3.5rem 0;background:var(--primary);color:var(--white)}
.cta-banner-inner{text-align:center;max-width:550px;margin:0 auto}
.cta-banner-inner h2{font-size:1.5rem;font-weight:800;margin-bottom:.6rem;color:var(--white)}
.cta-banner-inner p{font-size:.92rem;color:rgba(255,255,255,.8);margin-bottom:1.25rem}

/* ===== FAQ ===== */
.faq-section{padding:4.5rem 0;background:var(--white)}
.faq-list{max-width:750px;margin:0 auto;display:flex;flex-direction:column;gap:.4rem}
.faq-item{background:var(--white);border-radius:var(--r-md);border:1.5px solid var(--g200);overflow:hidden;transition:.2s var(--ease)}
.faq-item:hover{border-color:var(--g300)}
.faq-item.open{border-color:var(--primary)}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.85rem 1.15rem;background:none;border:none;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--g800);cursor:pointer;text-align:left}
.faq-question svg{color:var(--g400);flex-shrink:0;transition:transform .3s}
.faq-item.open .faq-question{color:var(--primary)}
.faq-item.open .faq-question svg{transform:rotate(180deg);color:var(--primary)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s}
.faq-answer p{padding:0 1.15rem 1rem;font-size:.85rem;color:var(--g600);line-height:1.7}

/* ===== Social Proof ===== */
.social-proof-banner{padding:2rem 0;background:var(--navy);color:var(--white)}
.proof-inner{display:flex;justify-content:center;gap:3.5rem;flex-wrap:wrap}
.proof-item{display:flex;align-items:center;gap:.65rem}
.proof-item svg{opacity:.5}
.proof-number{font-size:1.25rem;font-weight:800;display:block;line-height:1.2}
.proof-label{font-size:.78rem;opacity:.6}

/* ===== Footer ===== */
.footer{padding:3rem 0 0;background:var(--navy);color:var(--white)}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .logo{color:var(--white);margin-bottom:.6rem}
.footer-brand .logo-icon{color:var(--primary-light)}
.footer-brand .logo-text{color:var(--white)}
.footer-brand .logo-text .logo-accent{color:var(--primary-light)}
.footer-brand p{font-size:.82rem;color:rgba(255,255,255,.5);line-height:1.6}
.footer-links h4{font-size:.78rem;font-weight:700;margin-bottom:.75rem;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.06em}
.footer-links a{display:block;font-size:.8rem;color:rgba(255,255,255,.45);padding:.2rem 0}
.footer-links a:hover{color:var(--white)}
.footer-bottom{padding:1.25rem 0;text-align:center}
.footer-bottom p{font-size:.72rem;color:rgba(255,255,255,.3)}
.footer-disclaimer{margin-top:.4rem!important;max-width:700px;margin-left:auto;margin-right:auto;font-size:.65rem!important;line-height:1.5}

/* ===== Modal ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:2000;display:none;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .3s}
.modal-overlay.open{display:flex;opacity:1}
.modal{background:var(--white);border-radius:var(--r-xl);width:100%;max-width:540px;max-height:92vh;overflow-y:auto;box-shadow:var(--sh-xl);animation:modalUp .3s var(--ease);scrollbar-width:none;-ms-overflow-style:none;transition:max-width .3s}
.modal::-webkit-scrollbar{display:none}
.modal.modal-wide{max-width:900px;background:var(--g50)}
@keyframes modalUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.modal-step{padding:1.75rem}
#modalStepResults .results-list{display:flex;flex-direction:column;gap:1rem}
#modalStepResults .results-summary{background:var(--white);border:1px solid var(--g200)}
.modal-close{width:34px;height:34px;border-radius:50%;border:none;background:var(--g100);color:var(--g600);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;position:sticky;top:.4rem;float:right;z-index:10}
.modal-close:hover{background:var(--g200)}
.modal-header{margin-bottom:1.25rem}
.modal-header h2{font-size:1.25rem;font-weight:800;color:var(--navy)}
.modal-header p{font-size:.85rem;color:var(--g500);margin-top:.15rem}
.modal-calc-summary{display:flex;gap:.6rem;background:var(--primary-bg);border-radius:var(--r-md);padding:.75rem 1rem;margin-bottom:1.25rem;border:1px solid rgba(37,99,235,.1)}
.summary-item{display:flex;flex-direction:column;flex:1;font-size:.75rem;color:var(--g500)}
.summary-item strong{font-size:.95rem;color:var(--navy);margin-top:.05rem}

/* Form */
.form-group{margin-bottom:.85rem}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--g700);margin-bottom:.25rem}
.form-group input{width:100%;padding:.6rem .85rem;border:1.5px solid var(--g200);border-radius:var(--r-md);font-family:inherit;font-size:.88rem;color:var(--g800);transition:.2s;background:var(--white)}
.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-group input.error{border-color:var(--red)}
.form-required{color:var(--red);font-weight:700}
.phone-input-wrap{display:flex;align-items:center;border:1.5px solid var(--g200);border-radius:var(--r-md);overflow:hidden;transition:.2s}
.phone-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.phone-prefix{padding:0 .65rem;font-size:.85rem;font-weight:600;color:var(--g500);background:var(--g50);border-right:1px solid var(--g200);display:flex;align-items:center;flex-shrink:0}
.phone-input-wrap input{border:none!important;box-shadow:none!important;border-radius:0;padding-left:.65rem}
.phone-input-wrap input:focus{outline:none}
.form-error{font-size:.7rem;color:var(--red);margin-top:.15rem;display:block}
.form-checkbox{display:flex;gap:.5rem;margin-bottom:.75rem;align-items:flex-start}
.form-checkbox input[type="checkbox"]{width:16px;height:16px;margin-top:1px;flex-shrink:0;accent-color:var(--primary);cursor:pointer}
.form-checkbox label{font-size:.7rem;color:var(--g500);line-height:1.4;cursor:pointer}
.form-checkbox label a{color:var(--primary);text-decoration:underline}

/* Loading */
.loading-container{text-align:center;padding:2.5rem 1rem}
.spinner-wrap{position:relative;width:64px;height:64px;margin:0 auto 1.5rem}
.loading-spinner{width:64px;height:64px;border:3px solid var(--g200);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
.spinner-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:var(--primary)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:1rem}
.loading-bar-wrapper{width:100%;height:5px;background:var(--g200);border-radius:3px;overflow:hidden;margin-bottom:.85rem}
.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--green));border-radius:3px;transition:width .1s linear}
.loading-status{font-size:.85rem;color:var(--g500);min-height:1.4em}

/* Results */
.results-summary{background:var(--green-bg);border:1px solid rgba(22,163,74,.15);border-radius:var(--r-md);padding:.75rem 1rem;font-size:.85rem;color:var(--g700);margin-bottom:1rem}
.results-list{display:flex;flex-direction:column;gap:.85rem}
.result-card{border:1.5px solid var(--g200);border-radius:var(--r-md);padding:1rem;transition:.2s}
.result-card:hover{border-color:var(--g300);box-shadow:var(--sh-md)}
.result-card.best-result{border-color:var(--green);background:var(--green-bg)}
.result-card.best-result .result-badge{display:inline-block}
.result-badge{display:none;background:var(--green);color:var(--white);font-size:.65rem;font-weight:600;padding:.15rem .4rem;border-radius:var(--r-full);margin-bottom:.4rem}
.result-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.result-brand-name{font-size:1rem;font-weight:700;color:var(--navy)}
.result-brand-rating{font-size:.78rem;color:var(--amber)}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:.85rem}
.result-stat{text-align:center;padding:.4rem;background:var(--g50);border-radius:var(--r)}
.result-stat-label{font-size:.6rem;color:var(--g400);text-transform:uppercase;letter-spacing:.04em}
.result-stat-value{font-size:.88rem;font-weight:700;color:var(--navy)}
.result-stat-value.green{color:var(--green)}
.result-card .btn{margin-top:.2rem}

/* ===== Responsive ===== */
@media(max-width:1024px){
    .hero-content{grid-template-columns:1fr;gap:2rem}
    .hero-text{text-align:center}
    .hero-subtitle{margin:0 auto 1.75rem}
    .hero-highlights{margin:0 auto}
    .hero-form-wrapper{max-width:440px;margin:0 auto}
    .oc-inner{grid-template-columns:1fr}
    .oc-right{border-left:none;border-top:1px solid var(--g200);flex-direction:row}
    .oc-right .btn{flex:1}
    .footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
    .footer-brand{grid-column:1 / -1}
}
@media(max-width:768px){
    .container{padding:0 1rem}
    .nav,.header-cta{display:none}
    .mobile-menu-btn{display:flex}
    .hero{padding:85px 0 40px}
    .hero-text h1{font-size:1.65rem}
    .hero-text h1 br{display:none}
    .hero-subtitle{font-size:.9rem}
    .hero-pill{font-size:.7rem}
    .hero-highlights{gap:1rem;padding:.85rem 1.25rem}
    .hero-hl-value{font-size:1.1rem}
    .hero-hl-label{font-size:.62rem}
    .hero-hl-divider{height:26px}
    .categories-grid,.benefits-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}
    .benefit-item{padding:1.15rem}
    .compare-cards{grid-template-columns:1fr;max-width:400px}
    .blog-preview-grid{grid-template-columns:1fr;gap:.75rem}
    .steps-grid{grid-template-columns:1fr;gap:1rem}
    .oc-left{padding:1rem}
    .oc-right{padding:.85rem 1rem;flex-direction:column}
    .oc-header{flex-direction:column;align-items:flex-start;gap:.5rem}
    .offer-logo{width:120px;height:42px}
    .offer-badges{margin-left:0}
    .oc-details{grid-template-columns:repeat(2,1fr)}
    .oc-detail{border-right:1px solid var(--g200)!important;border-bottom:1px solid var(--g200)!important}
    .oc-detail:nth-child(2n){border-right:none!important}
    .oc-detail:nth-child(5),.oc-detail:nth-child(6){border-bottom:none!important}
    .oc-disclaimer{padding:.4rem 1rem}
    .footer-grid{grid-template-columns:1fr;gap:1.25rem;text-align:center}
    .footer-brand .logo{justify-content:center}
    .footer-links{text-align:center}
    .proof-inner{flex-direction:column;align-items:center;gap:1rem}
    .modal{max-width:100%;border-radius:var(--r-lg)}
    .modal.modal-wide{max-width:100%}
    .modal-step{padding:1.25rem}
    .modal-calc-summary{flex-direction:column;gap:.35rem}
    .summary-item{flex-direction:row;justify-content:space-between;align-items:center}
    .cta-banner-inner h2{font-size:1.25rem}
    .section-header h2{font-size:1.4rem}
    .faq-question{font-size:.82rem;padding:.75rem 1rem}
    .faq-answer p{padding:0 1rem .85rem;font-size:.8rem}
}
@media(max-width:400px){
    .hero-text h1{font-size:1.35rem}
    .hero-highlights{gap:.5rem;padding:.7rem .85rem}
    .hero-hl-value{font-size:.95rem}
    .categories-grid{gap:.5rem}
    .category-card{padding:1.15rem .85rem}
    .category-icon{width:44px;height:44px;font-size:1.2rem}
    .logo-text,.logo-icon{font-size:1.2rem}
    .offer-logo{width:110px;height:38px}
}