:root{
    --red:#ed1c24;
    --red-dark:#bd1118;
    --black:#111;
    --dark:#171717;
    --gray:#727272;
    --light:#f7f7f7;
    --border:#e8e8e8;
}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#171717;overflow-x:hidden}
a{text-decoration:none}
.navbar{background:rgba(10,10,10,.97);min-height:70px;backdrop-filter:blur(12px)}
.auto-logo{
    width:38px;height:38px;border-radius:11px;background:var(--red);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:20px;
}
.auto-brand{font-weight:900;font-size:20px;line-height:.78;letter-spacing:-1px}
.auto-brand small{display:block;font-size:7px;letter-spacing:1px;color:#aaa;margin-top:7px}
.navbar .nav-link{color:#eee!important;font-size:.9rem;padding:.65rem .75rem!important}
.navbar .nav-link:hover,.navbar .nav-link.active{color:#fff!important}
.navbar .nav-link.active{border-bottom:2px solid var(--red)}
.btn-sense{background:var(--red);color:#fff!important;border:0;border-radius:9px;font-weight:900;padding:12px 18px}
.btn-sense:hover{background:var(--red-dark)}
.btn-outline-sense{color:#fff!important;border:1px solid #777;border-radius:9px;font-weight:800;padding:12px 18px}
.btn-outline-sense:hover{background:#fff;color:#111!important}

.hero{
    min-height:610px;color:#fff;position:relative;overflow:hidden;
    background:
        radial-gradient(circle at 83% 65%,rgba(237,28,36,.35),transparent 28%),
        linear-gradient(110deg,#0d0d0d 0%,#171717 58%,#0c0c0c 100%);
}
.hero-bg{
    position:absolute;inset:0;opacity:.13;
    background:
        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:60px 60px;
}
.hero-row{min-height:610px}
.hero-badge{
    display:inline-block;background:var(--red);padding:7px 12px;border-radius:5px;
    font-size:.72rem;font-weight:900;margin-bottom:17px
}
.hero h1{font-size:clamp(2.7rem,5vw,4.6rem);font-weight:900;line-height:.96;letter-spacing:-2.5px}
.hero h1 span{color:var(--red)}
.hero-text{font-size:1.04rem;color:#d0d0d0;max-width:560px;line-height:1.55}
.hero-mini-features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.hero-mini-features div{display:flex;gap:8px;align-items:center;font-size:.72rem;color:#ddd}
.hero-mini-features i{
    width:29px;height:29px;border:1px solid rgba(237,28,36,.5);border-radius:50%;
    color:var(--red);display:flex;align-items:center;justify-content:center;flex:none
}

.mockup-wrap{position:relative;margin-left:15px}
.laptop{
    background:#fff;border:6px solid #272727;border-radius:16px;
    box-shadow:0 35px 80px rgba(0,0,0,.6);overflow:hidden
}
.screen-top{height:30px;background:#242424;display:flex;align-items:center;gap:5px;padding-left:10px}
.screen-top span{width:7px;height:7px;background:#777;border-radius:50%}
.screen-body{display:flex;height:330px}
.screen-body aside{width:24%;background:#181818;color:#999;padding:13px 8px;font-size:9px}
.screen-body aside strong{color:#fff;display:block;margin-bottom:15px}
.screen-body aside div{padding:6px 7px;border-radius:4px;margin-bottom:2px}
.screen-body aside .active{background:var(--red);color:#fff}
.screen-body main{flex:1;background:#fafafa;padding:16px}
.dash-head strong{display:block;font-size:11px}.dash-head small{font-size:8px;color:#999}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.dash-stats div{background:#fff;border:1px solid #eee;border-radius:5px;padding:8px}
.dash-stats small{display:block;color:#999;font-size:7px}.dash-stats b{font-size:12px}
.dash-chart{height:145px;background:#fff;border:1px solid #eee;border-radius:6px;margin-top:8px;padding:9px;position:relative}
.dash-chart small{font-size:8px;color:#777}
.fake-line{position:absolute;left:7%;right:7%;top:53%;height:45px;border-bottom:2px solid var(--red);border-radius:50%;transform:skewY(-8deg)}
.phone{
    position:absolute;right:-33px;bottom:-45px;width:145px;height:290px;background:#101010;
    border:5px solid #292929;border-radius:22px;box-shadow:0 25px 50px rgba(0,0,0,.6);overflow:hidden
}
.phone-screen{margin:6px;height:calc(100% - 12px);background:#fff;border-radius:16px;overflow:hidden}
.phone-head{background:var(--red);color:#fff;padding:12px 9px;font-size:9px;font-weight:900}
.order-title{padding:10px;font-size:8px;font-weight:900}.order-title span{float:right;background:#f3ad00;color:#111;padding:3px;border-radius:3px}
.phone-box{margin:7px;border:1px solid #eee;border-radius:5px;padding:7px;font-size:8px}.phone-box small,.phone-box b{display:block}.phone-box small{color:#999}.phone-box p{margin:5px 0}.phone-box p b{float:right}
.phone button{position:absolute;left:10px;right:10px;bottom:10px;background:var(--red);border:0;color:#fff;font-size:8px;padding:8px;border-radius:4px;font-weight:900}

.client-strip{padding:23px 0;border-bottom:1px solid #eee;color:#777;font-size:.72rem;font-weight:900}
.client-strip strong{font-size:.85rem;color:#222}.client-strip b{color:#111}.client-strip small{font-weight:500}

.section{padding:82px 0}
.section-kicker{color:var(--red);font-size:.78rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;margin-bottom:7px}
.section-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;letter-spacing:-1.5px}
.section-subtitle{color:#777;line-height:1.65;max-width:620px}

.feature-card{
    min-height:220px;border:1px solid var(--border);border-radius:13px;background:#fff;
    padding:23px;box-shadow:0 7px 25px rgba(0,0,0,.05);transition:.22s
}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(0,0,0,.11)}
.feature-icon{
    width:43px;height:43px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:19px;margin-bottom:20px
}
.feature-icon.red{background:#e5252b}.feature-icon.orange{background:#ef7c18}
.feature-icon.green{background:#4eae5a}.feature-icon.blue{background:#3295ca}
.feature-icon.purple{background:#8951c7}.feature-icon.yellow{background:#e6ad00}
.feature-icon.teal{background:#18aaa0}.feature-icon.pink{background:#df4f70}
.feature-card h3{font-size:1.08rem;font-weight:900}.feature-card p{font-size:.82rem;color:#777;line-height:1.5}
.feature-card a{font-size:.78rem;font-weight:900;color:var(--red)}

.benefits{padding:30px;border-radius:16px;background:#151515;color:#fff}
.benefits h2{font-size:1.35rem;font-weight:900}
.benefits i{color:var(--red);font-size:25px;display:block;margin-bottom:9px}
.benefits strong{display:block;font-size:.78rem;max-width:150px}

.step-card{
    border:1px solid #eee;border-radius:12px;padding:22px;min-height:190px;
    position:relative;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.04)
}
.step-card>span{
    position:absolute;right:15px;top:13px;width:28px;height:28px;border-radius:50%;
    background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem
}
.step-card>i{font-size:27px;color:#555;display:block;margin-bottom:15px}
.step-card h3{font-size:.95rem;font-weight:900}.step-card p{font-size:.78rem;color:#777}

.testimonials{background:#fafafa}
.stars{color:#ffb400;letter-spacing:2px;margin-bottom:10px}
.testimonial{
    background:#fff;border:1px solid #eee;border-radius:14px;padding:25px;
    min-height:190px;box-shadow:0 7px 25px rgba(0,0,0,.04)
}
.testimonial p{color:#555;font-size:.9rem;line-height:1.6}
.testimonial strong{display:block;font-size:.85rem}.testimonial small{color:#999}

.pricing{
    padding:36px 45px;border-radius:18px;color:#fff;
    background:
        radial-gradient(circle at 90% 50%,rgba(237,28,36,.45),transparent 30%),
        linear-gradient(100deg,#9d0d12,#171717 70%);
    display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:35px;align-items:center
}
.pricing-kicker{font-size:.72rem;font-weight:900;color:#ffb1b1}
.pricing h2{font-size:2rem;font-weight:900;margin:5px 0}.pricing p{color:#ddd;margin:0}
.price{font-size:4rem;font-weight:900;white-space:nowrap}.price small{font-size:1rem;font-weight:700}
.security{
    display:flex;gap:25px;align-items:center;padding:32px;border:1px solid #eee;
    border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.05)
}
.security-icon{
    width:70px;height:70px;border-radius:18px;background:rgba(237,28,36,.1);
    color:var(--red);display:flex;align-items:center;justify-content:center;font-size:35px;flex:none
}
.cta{
    padding:45px;border-radius:18px;color:#fff;
    background:linear-gradient(100deg,#ed1c24,#171717 68%);overflow:hidden
}
.cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:900}.cta p{color:#ddd}

footer{background:#111;color:#fff;padding:60px 0 20px}
footer p,footer a{color:#aaa;font-size:.87rem}footer a:hover{color:#fff}
.footer-title{font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:17px}
.social{
    width:36px;height:36px;border:1px solid #444;border-radius:50%;display:inline-flex;
    align-items:center;justify-content:center;margin-right:5px
}
.whatsapp-float{
    position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;
    background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:27px;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,.3)
}
@media(max-width:991px){
    .hero-row{min-height:auto}.mockup-wrap{margin-top:60px;margin-left:0}
    .navbar .btn-sense{display:none}.pricing{grid-template-columns:1fr;text-align:center}
}
@media(max-width:575px){
    .hero h1{letter-spacing:-1.5px}.hero-mini-features{grid-template-columns:1fr 1fr}
    .phone{width:120px;height:245px;right:-5px}.laptop{transform:scale(.96)}
    .pricing{padding:30px 22px}.price{font-size:3.2rem}.security{align-items:flex-start;flex-direction:column}
}