*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',Arial,sans-serif;background:#0a0a0a;color:#fff;line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
h2{font-size:36px;font-weight:800;text-align:center;margin-bottom:10px}
.subtitle{text-align:center;color:#888;margin-bottom:40px;font-size:16px}
.page{padding:80px 0}

header{background:#000;padding:15px 0;position:sticky;top:0;z-index:100;border-bottom:1px solid #1a1a1a}
header .container{display:flex;justify-content:space-between;align-items:center}
.logo-img{height:40px}
nav{display:flex;gap:8px;align-items:center}
nav a{color:#aaa;text-decoration:none;font-weight:500;font-size:13px;padding:10px 16px;border-radius:20px}
nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
nav a.active-page{background:rgba(255,255,255,.1);color:#fff}
nav a.btn-header{background:#fff;color:#000!important;font-weight:600}

.hero{padding:80px 0}
.hero .container{display:flex;align-items:center;gap:50px}
.hero-content{flex:1}
.hero h1{font-size:48px;font-weight:800;line-height:1.2;margin-bottom:20px}
.hero p{color:#888;font-size:18px;margin-bottom:30px}
.hero-buttons{display:flex;gap:15px;flex-wrap:wrap}
.btn-primary{background:#fff;color:#000;padding:14px 28px;border-radius:25px;text-decoration:none;font-weight:600;font-size:15px;border:none;cursor:pointer;display:inline-block}
.btn-primary:hover{background:#ddd}
.btn-outline{border:1px solid #333;color:#fff;padding:14px 28px;border-radius:25px;text-decoration:none;font-weight:600;font-size:15px}
.hero-card{background:#111;border:1px solid #1a1a1a;border-radius:20px;padding:30px;max-width:300px}
.hero-card-icon{font-size:50px;margin-bottom:15px}
.hero-card-title{font-weight:700;font-size:18px;margin-bottom:10px}
.hero-card-sub{color:#888;font-size:14px;margin-bottom:20px}
.hero-card-progress{height:3px;background:#fff;border-radius:2px;width:60%}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.step{background:#111;border-radius:16px;padding:30px 20px;text-align:center;border:1px solid #1a1a1a}
.step-icon{font-size:40px;margin-bottom:15px}
.step h3{font-size:17px;margin-bottom:10px}
.step p{color:#888;font-size:14px}

.pricing{display:flex;gap:25px;justify-content:center;flex-wrap:wrap}
.price-card{background:#111;border-radius:20px;padding:35px;width:340px;border:1px solid #1a1a1a;text-align:center;position:relative}
.price-card.popular{border-color:#fff}
.popular-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fff;color:#000;padding:5px 18px;border-radius:15px;font-size:12px;font-weight:700}
.price-value{font-size:42px;font-weight:800;color:#fff}
.price-card ul{list-style:none;margin:25px 0;text-align:left}
.price-card ul li{padding:8px 0;color:#ccc;font-size:15px}

.order-options{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.order-card{background:#111;border-radius:20px;padding:35px 25px;width:280px;text-align:center;border:2px solid #1a1a1a;cursor:pointer;position:relative}
.order-card.active{border-color:#fff;background:#1a1a1a}
.order-card-icon{font-size:55px;margin-bottom:15px}
.order-card h3{font-size:22px;margin-bottom:8px}
.order-card .price{font-size:28px;font-weight:800;color:#fff}
.order-card .badge{position:absolute;top:15px;right:15px;background:#fff;color:#000;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700}

.order-form{background:#111;border-radius:20px;padding:35px;max-width:600px;margin:0 auto;border:1px solid #1a1a1a}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:600;font-size:14px;color:#ccc}
.form-group input,.form-group textarea{width:100%;padding:16px;border-radius:14px;border:2px solid #1a1a1a;background:#0a0a0a;color:#fff;font-size:16px;outline:none}
.form-group input:focus,.form-group textarea:focus{border-color:#fff}
.form-row{display:flex;gap:15px}
.form-row .form-group{flex:1}
textarea{height:100px;resize:vertical}
.btn-large{width:100%;padding:16px;font-size:17px}

.delivery-types{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.delivery-option{display:flex;align-items:center;gap:15px;padding:18px 20px;border-radius:16px;border:2px solid #1a1a1a;cursor:pointer;background:#0a0a0a}
.delivery-option.active{border-color:#fff;background:#111}
.delivery-option input{display:none}
.delivery-icon{font-size:32px;flex-shrink:0}
.delivery-check{width:24px;height:24px;border-radius:50%;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent}
.delivery-option.active .delivery-check{background:#fff;color:#000;border-color:#fff}

.help-text{background:#111;border-radius:16px;padding:30px;border:1px solid #1a1a1a;line-height:2;font-size:15px;color:#ccc}
.help-text b{color:#fff}

footer{background:#000;padding:50px 0 20px;border-top:1px solid #1a1a1a}
.footer-content{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:30px}
.footer-col h4{margin-bottom:15px;color:#fff}
.footer-col a{display:block;color:#888;text-decoration:none;padding:5px 0}
.footer-bottom{text-align:center;color:#555;font-size:13px;padding-top:20px;border-top:1px solid #1a1a1a}

.form-success{display:none;text-align:center;color:#888;margin-top:20px;font-size:16px;background:#111;padding:15px;border-radius:12px}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:#333 #0a0a0a}

@media(max-width:768px){
    .container{padding:0 12px}
    h2{font-size:24px}
    .page{padding:30px 0}
    header .container{flex-wrap:wrap;justify-content:center;gap:8px}
    nav{flex-wrap:wrap;justify-content:center;gap:3px}
    nav a{font-size:11px;padding:7px 9px;border-radius:14px}
    .logo-img{height:28px}
    .hero{padding:30px 0}
    .hero h1{font-size:26px}
    .hero .container{flex-direction:column;gap:25px}
    .hero-card{max-width:100%}
    .btn-primary,.btn-outline{padding:12px 18px;font-size:14px;width:100%;text-align:center}
    .steps{grid-template-columns:1fr 1fr;gap:10px}
    .pricing{flex-direction:column;align-items:center;gap:12px}
    .price-card{width:100%;padding:20px}
    .price-value{font-size:30px}
    .order-options{flex-direction:column;align-items:center;gap:12px}
    .order-card{width:100%;padding:25px}
    .order-card-icon{font-size:40px}
    .order-card h3{font-size:18px}
    .order-card .price{font-size:22px}
    .order-form{padding:20px 15px}
    .form-row{flex-direction:column}
    .form-group input,.form-group textarea{padding:12px;font-size:14px}
    .delivery-option{padding:14px 12px}
    .delivery-icon{font-size:24px}
    footer{padding:25px 0 12px}
}

.page{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}