*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{margin:0!important;margin-top:0!important;padding-top:0!important}
.page-lp-darf{margin-top:0!important}
:root{
  --bg:#fff;--fg:hsl(20,20%,20%);--card:#fff;--card-fg:hsl(20,20%,20%);
  --primary:hsl(20,93%,62%);--primary-fg:#fff;
  --secondary:hsl(25,60%,96%);--secondary-fg:hsl(20,60%,35%);
  --muted:hsl(30,15%,95%);--muted-fg:hsl(20,10%,46%);
  --border:hsl(30,15%,90%);--input:hsl(30,15%,90%);
  --ring:hsl(20,93%,62%);--hero-bg:hsl(20,80%,96%);
  --footer-bg:hsl(20,30%,22%);--radius:0.75rem;
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select{font-family:inherit}
img{max-width:100%;display:block}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-inner{max-width:72rem;margin:0 auto;padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.125rem;font-weight:700;color:var(--primary)}
.btn-primary{padding:0.5rem 1rem;border-radius:0.5rem;background:var(--primary);color:#fff!important;font-size:0.875rem;font-weight:600;transition:opacity .2s}
.btn-primary:hover{opacity:.9}

/* Hero */
.hero{background:var(--hero-bg);padding:2rem 0}
.hero-inner{max-width:72rem;margin:0 auto;padding:0 1rem}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.hero h1{font-size:1.5rem;font-weight:800;color:#000;line-height:1.2}
.hero p.subtitle{font-size:1rem;color:rgba(0,0,0,0.8);line-height:1.6}
.badges{display:flex;flex-wrap:wrap;gap:0.5rem}
.badge{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.75rem;font-weight:500;color:var(--fg);background:#fff;padding:0.25rem 0.625rem;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.badge svg{width:14px;height:14px;color:var(--primary)}

/* Simulator */
.simulator{background:var(--card);border-radius:1rem;box-shadow:0 10px 25px -5px rgba(0,0,0,0.1);border:1px solid var(--border);padding:1.5rem;width:100%;max-width:28rem}
.sim-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem}
.sim-header svg{color:var(--primary)}
.sim-header h3{font-size:1.125rem;font-weight:700;color:var(--fg)}
.sim-fields{display:flex;flex-direction:column;gap:1rem}
.sim-label{display:block;font-size:0.875rem;font-weight:500;color:var(--muted-fg);margin-bottom:0.375rem}
.sim-input,.sim-select{width:100%;padding:0.75rem 1rem;border-radius:0.5rem;border:2px solid #ccc!important;background:#fff;color:var(--fg);font-size:1rem;outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}
.sim-input:focus,.sim-select:focus{box-shadow:0 0 0 2px var(--ring)}
.sim-btn{width:100%;padding:0.75rem;border-radius:0.5rem;background:var(--primary);color:var(--primary-fg);font-weight:600;font-size:1rem;transition:opacity .2s}
.sim-btn:hover{opacity:.9}
.sim-result{margin-top:1rem;padding:1rem;border-radius:0.5rem;background:var(--secondary)}
.sim-row{display:flex;justify-content:space-between;font-size:0.875rem;margin-bottom:0.5rem}
.sim-row .label{color:var(--muted-fg)}
.sim-row .value{font-weight:600;color:var(--fg)}
.sim-note{font-size:0.75rem;color:var(--muted-fg);margin-top:0.5rem}

/* Carousel */
.carousel-wrap{width:100%;margin-top:1.5rem;position:relative}
.carousel-viewport{overflow:hidden;border-radius:0.75rem}
.carousel-track{display:flex;gap:0.5rem;transition:transform 0.3s ease}
.carousel-slide{flex:0 0 30%;min-width:80px}
.carousel-slide img{width:100%;height:6rem;object-fit:contain;border-radius:0.5rem}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(255,255,255,0.8);backdrop-filter:blur(4px);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.carousel-btn.prev{left:0.25rem}
.carousel-btn.next{right:0.25rem}
.carousel-dots{display:flex;justify-content:center;gap:0.25rem;margin-top:0.5rem}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,0.15);transition:background .2s}
.carousel-dot.active{background:var(--primary)}

/* Barcode */
.barcode{padding:1.5rem 0;background:var(--bg)}
.barcode-inner{max-width:42rem;margin:0 auto;padding:0 1rem;text-align:center}
.barcode h2{font-size:1.125rem;font-weight:700;color:var(--fg)}
.barcode p{font-size:0.875rem;color:var(--muted-fg);margin:0.75rem 0}
.barcode-form{display:flex;gap:0.5rem;max-width:32rem;margin:0 auto}
.barcode-input{flex:1;padding:0.625rem 0.75rem;border-radius:0.5rem;border:2px solid #ccc !important;background:var(--bg);color:var(--fg);font-size:0.875rem;outline:none}
.barcode-input:focus{box-shadow:0 0 0 2px var(--ring)}

/* Testimonials */
.testimonials{padding:2rem 0;background:var(--bg)}
.testimonials-inner{max-width:72rem;margin:0 auto;padding:0 1rem}
.testimonials h2{font-size:1.25rem;font-weight:700;color:var(--fg);text-align:center;margin-bottom:1.5rem}
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.testimonial-card{background:var(--card);border-radius:0.75rem;padding:1rem 1.5rem;border:1px solid var(--border);transition:box-shadow .2s}
.testimonial-card:hover{box-shadow:0 10px 25px -5px rgba(0,0,0,0.1)}
.stars{display:flex;align-items:center;gap:0.25rem;color:var(--primary);font-size:1rem}
.stars span.count{font-size:0.75rem;color:var(--muted-fg);margin-left:0.5rem}
.testimonial-text{color:var(--muted-fg);line-height:1.6;margin:0.75rem 0;font-style:italic;font-size:0.875rem}
.testimonial-name{font-weight:600;color:var(--fg);font-size:0.875rem}

/* Certs + Benefits */
.certs-benefits{padding:2rem 0;background:rgba(0,0,0,0.02)}
.certs-benefits-inner{max-width:72rem;margin:0 auto;padding:0 1rem}
.certs-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}
.certs-row img{height:2.5rem;object-fit:contain}
.section-header{text-align:center;margin-bottom:2rem}
.section-header h2{font-size:1.25rem;font-weight:700;color:var(--fg)}
.section-header p{font-size:0.875rem;color:var(--muted-fg);max-width:36rem;margin:0.5rem auto 0}
.benefits-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem}
.benefit-card{background:var(--card);border-radius:0.75rem;padding:1rem 1.5rem;border:1px solid var(--border);transition:box-shadow .2s}
.benefit-card:hover{box-shadow:0 10px 25px -5px rgba(0,0,0,0.1)}
.benefit-icon{width:2rem;height:2rem;border-radius:0.5rem;background:var(--secondary);display:flex;align-items:center;justify-content:center;margin-bottom:0.75rem}
.benefit-icon svg{width:18px;height:18px;color:var(--primary)}
.benefit-card h3{font-weight:600;color:var(--fg);font-size:0.875rem;margin-bottom:0.25rem}
.benefit-card p{font-size:0.75rem;color:var(--muted-fg)}

/* CTA */
.cta{padding:2rem 0;background:var(--primary);color:var(--primary-fg)}
.cta-inner{max-width:48rem;margin:0 auto;padding:0 1rem;text-align:center}
.cta h2{font-size:1.25rem;font-weight:700;margin-bottom:1rem}
.cta p.desc{color:rgba(255,255,255,0.8);font-size:1rem;margin-bottom:1.5rem}
.cta-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 1.5rem;border-radius:0.5rem;background:var(--bg);color:#000!important;font-weight:600;font-size:0.875rem;transition:opacity .2s}
.cta-btn:hover{opacity:.9}
.cta-btn svg{width:18px;height:18px;stroke:#000!important}
.cta .secure{font-size:0.75rem;color:rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center;gap:0.375rem;margin-top:1rem}
.cta .secure svg{width:14px;height:14px}

/* FAQ */
.faq{padding:2rem 0;background:var(--bg)}
.faq-inner{max-width:48rem;margin:0 auto;padding:0 1rem}
.faq h2{font-size:1.25rem;font-weight:700;color:var(--fg);text-align:center;margin-bottom:1.5rem}
.faq-list{border-radius:0.75rem;border:1px solid var(--border);overflow:hidden}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:none}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;text-align:left;font-weight:600;color:var(--fg);font-size:0.875rem;transition:background .2s}
.faq-btn:hover{background:rgba(0,0,0,0.03)}
.faq-btn svg{width:1rem;height:1rem;color:var(--muted-fg);transition:transform .2s;flex-shrink:0;margin-left:0.5rem}
.faq-btn.open svg{transform:rotate(180deg)}
.faq-answer{padding:0 1rem 0.75rem;color:var(--muted-fg);line-height:1.6;font-size:0.875rem;display:none}
.faq-answer.show{display:block}

/* Footer */
.footer{padding:1.5rem 0;background:var(--footer-bg);color:#fff}
.footer-inner{max-width:72rem;margin:0 auto;padding:0 1rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.footer .logo{color:#fff;font-size:1rem;display:flex;justify-content:center}
.footer .contact{font-size:0.75rem;color:rgba(255,255,255,0.7);margin:0.5rem 0}
.footer .socials{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin:0.5rem 0}
.footer .socials a{color:rgba(255,255,255,0.7);transition:color .2s}
.footer .socials a:hover{color:#fff}
.footer .socials svg{width:1rem;height:1rem}
.footer .hours{font-size:0.625rem;color:rgba(255,255,255,0.5)}

/* Responsive */
@media(max-width:639px){
  .carousel-slide{flex:0 0 28%;min-width:90px}
  .carousel-slide img{height:5rem;object-fit:contain}
}
@media(min-width:640px){
  .header-inner{padding:1rem 1.5rem}
  .logo{font-size:1.25rem}
  .btn-primary{padding:0.5rem 1.25rem}
  .hero{padding:3rem 0}
  .hero-inner{padding:0 1.5rem}
  .hero h1{font-size:1.875rem}
  .hero p.subtitle{font-size:1.125rem}
  .badge{font-size:0.875rem;padding:0.375rem 0.75rem}
  .simulator{padding:2rem}
  .carousel-slide{flex:0 0 22%;min-width:100px}
  .carousel-slide img{height:7rem;object-fit:contain}
  .carousel-dots{gap:0.375rem}
  .carousel-dot{width:8px;height:8px}
  .carousel-btn{width:2rem;height:2rem}
  .barcode h2{font-size:1.25rem}
  .barcode p{font-size:1rem}
  .barcode-form{gap:0.5rem}
  .barcode-input,.barcode .btn-primary{padding:0.75rem 1rem;font-size:1rem}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .testimonial-card{padding:1.5rem}
  .certs-row img{height:3rem}
  .section-header h2{font-size:1.5rem}
  .benefits-grid{gap:1.5rem}
  .benefit-card{padding:1.5rem}
  .benefit-icon{width:2.5rem;height:2.5rem}
  .cta h2{font-size:1.5rem}
  .faq h2{font-size:1.5rem}
  .faq-btn{padding:1rem 1.5rem;font-size:1rem}
  .faq-answer{padding:0 1.5rem 1rem;font-size:1rem}
  .footer{padding:2rem 0}
}
@media(min-width:1024px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:3rem}
  .hero h1{font-size:3rem}
  .carousel-slide{flex:0 0 16%}
  .testimonials-grid{grid-template-columns:repeat(3,1fr)}
  .certs-row{gap:2.5rem}
  .certs-row img{height:4rem}
  .section-header h2{font-size:1.875rem}
  .benefits-grid{grid-template-columns:repeat(4,1fr)}
  .cta h2{font-size:1.875rem}
  .faq h2{font-size:1.875rem}
}

