/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;line-height:1.5;font-family:'Mulish','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;line-height:1.6;color:#1a1a1a;background:#f5f5f7}
img,svg{display:block;max-width:100%;height:auto}
input,select,button,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer;background:none;border:none;padding:0}
ol,ul{list-style:none;padding:0}
hr{border:0;border-top:1px solid rgba(255,255,255,.1)}
.hidden{display:none!important}

/* === Page Background === */
.page-bg{min-height:100vh;background:#f5f5f7}

/* === Layout === */
.container{width:100%;margin:0 auto;padding:0 1rem}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-lg{max-width:32rem}
.max-w-sm{max-width:24rem}
.max-w-xs{max-width:20rem}
.max-w-xl{max-width:36rem}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-white{color:#fff}
.w-full{width:100%}
.block{display:block}
.inline{display:inline}
.relative{position:relative}
.absolute{position:absolute}
.overflow-hidden{overflow:hidden}

/* === Spacing === */
.p-2{padding:.5rem}.p-3{padding:.75rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pb-1{padding-bottom:.25rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}

/* === Card — Top (stepper area) === */
.card-top{
    background:#1e293b;
    border-radius:24px 24px 0 0;
    padding:1.25rem 1.5rem .75rem;
    border:1px solid rgba(0,0,0,.06);
    border-bottom:none;
}

/* === Card — Body === */
.card-body{
    background:#fff;
    border-radius:0 0 24px 24px;
    padding:2rem 1.5rem;
    box-shadow:0 4px 24px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.04);
    border-top:none;
}

/* === Stepper === */
.stepper{display:flex;flex-direction:column;gap:6px;width:100%;padding:.25rem 0}
.stepper-dots{display:flex;align-items:center;width:100%;padding:0 39px}
.stepper-labels{display:flex;justify-content:space-between;width:100%}
.step-dot{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.step-dot::after{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}
.step-dot.done{border-color:#10b981;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.4)}
.step-dot.done::after{content:'✓';background:none;width:auto;height:auto;color:#fff;font-size:11px;font-weight:700}
.step-dot.current{border-color:#fff;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.5);animation:pulse-current 2s infinite}
.step-dot.current::after{background:#1e293b;width:8px;height:8px}
@keyframes pulse-current{0%,100%{box-shadow:0 0 8px rgba(255,255,255,.3)}50%{box-shadow:0 0 16px rgba(255,255,255,.6)}}
.step-line{flex:1;height:3px;background:rgba(255,255,255,.15)}
.step-label{font-size:.75rem;line-height:1.1rem;color:rgba(255,255,255,.35);font-weight:500;text-align:center;width:100px;letter-spacing:.02em}
.step-label.done{color:rgba(255,255,255,.6);font-weight:500}
.step-label.active{color:#fff;font-weight:700}

/* === Badge (title) === */
.badge{
    display:inline-block;
    background:linear-gradient(135deg,#1a1a1a,#2d2d2d);
    color:#fff;
    font-size:1.125rem;
    font-weight:700;
    padding:.75rem 1.5rem;
    border-radius:12px;
    text-align:center;
    letter-spacing:.01em;
    margin:0 auto;
    width:100%;
}

/* === Typography === */
.start-date{font-size:.9375rem;color:#666;text-align:center;margin-top:.75rem}
.start-date strong{color:#1a1a1a}
.description{font-size:.9375rem;font-weight:600;color:#333;text-align:center;padding:0 .5rem;margin:.5rem 0;line-height:1.5}

/* === Urgency Box (Hormozi-style) === */
.urgency-box{
    text-align:center;
    background:#fef3c7;color:#92400e;
    font-size:.8125rem;font-weight:600;line-height:1.4;
    padding:.625rem 1rem;border-radius:10px;
    margin:.75rem 0;
    border:1px solid #fde68a;
}
.urgency-dot{
    width:8px;height:8px;border-radius:50%;background:#f59e0b;
    animation:pulse-dot 1.5s infinite;flex-shrink:0;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}

/* === Form === */
.form{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}
.form-group{display:flex;flex-direction:column;gap:.375rem}
.form-label{font-size:.8125rem;font-weight:600;color:#374151;letter-spacing:.01em}
.form-input{
    display:block;width:100%;
    padding:.75rem 1rem;
    font-size:1rem;
    background:#f9fafb;
    border:1.5px solid #e5e7eb;
    border-radius:12px;
    outline:none;
    transition:border-color .2s,box-shadow .2s;
    color:#1a1a1a;
}
.form-input:focus{border-color:#12a3a3;box-shadow:0 0 0 3px rgba(18,163,163,.12)}
.form-input::placeholder{color:#9ca3af}
.form-error{font-size:.8125rem;color:#ef4444;font-weight:500}

/* === CTA Button (Hormozi-style: green = action) === */
.btn-cta{
    display:block;width:100%;
    padding:1rem 1.5rem;
    background:linear-gradient(135deg,#10b981,#059669);
    color:#fff;
    font-size:1.0625rem;
    font-weight:800;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:all .2s;
    letter-spacing:.04em;
    margin-top:1rem;
    box-shadow:0 4px 14px rgba(5,150,105,.3);
    text-transform:uppercase;
}
.btn-cta:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px);box-shadow:0 6px 20px rgba(5,150,105,.4)}
.btn-cta:active{transform:translateY(0)}
.btn-cta:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* === Trust Line === */
.trust-line{
    text-align:center;font-size:.75rem;color:#9ca3af;margin-top:.75rem;
    display:flex;align-items:center;justify-content:center;gap:.375rem;
}

/* === Buttons === */
.btn-primary{
    display:block;width:100%;
    padding:.875rem 1.5rem;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:#fff;
    font-size:1rem;
    font-weight:700;
    border:none;
    border-radius:14px;
    cursor:pointer;
    transition:all .2s;
    letter-spacing:.02em;
    margin-top:1rem;
    box-shadow:0 4px 14px rgba(37,99,235,.3);
}
.btn-primary:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.4)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Footer telegram */
.btn-telegram-footer{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;padding:.75rem 1rem;
    background:#ef4444;color:#fff;font-size:.875rem;font-weight:600;
    border:none;border-radius:12px;
    transition:all .2s;
}
.btn-telegram-footer:hover{background:#dc2626}

.btn-telegram{
    display:flex;align-items:center;justify-content:center;gap:.625rem;
    width:100%;padding:.75rem 1rem;
    background:rgba(255,255,255,.08);
    color:#fff;font-size:.875rem;font-weight:500;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    transition:all .2s;
}
.btn-telegram:hover{background:rgba(255,255,255,.15)}

/* === Footer === */
.site-footer{margin-top:3rem;padding:2rem 0;border-top:1px solid rgba(0,0,0,.06)}
.footer-text{font-size:.8125rem;color:#4b5563;line-height:1.5}
.footer-phone{font-size:.875rem;color:#6b7280;border:1px solid #e5e7eb;padding:.25rem .75rem;border-radius:999px;transition:all .2s}
.footer-phone:hover{color:#374151;border-color:#d1d5db}
.footer-link{font-size:.8125rem;color:#9ca3af;text-decoration:underline;text-underline-offset:2px}
.footer-link:hover{color:#6b7280}
.footer-legal{font-size:.6875rem;color:#6b7280;line-height:1.4;max-width:320px}

/* === Payment Page === */
.payment-header{display:flex;justify-content:flex-end;padding:.5rem 0}
.payment-avatar{display:flex;align-items:center;gap:.5rem}
.payment-name{font-size:.9375rem;font-weight:500;color:#1a1a1a;text-align:right}
.payment-phone{font-size:.8125rem;color:#6b7280;text-align:right}

.payment-card{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,#eff7ff,#dbeafe);
    border-radius:16px;padding:1.25rem;
}
.payment-card h2{font-size:1.25rem;font-weight:700;color:#1e293b}
.payment-tariff{font-size:.9375rem;font-weight:500;color:#475569;margin-top:.25rem}
.payment-price{font-size:2.25rem;font-weight:800;color:#1e293b;letter-spacing:-.02em;margin-top:.25rem}
.timer-box{background:#fff;border-radius:12px;padding:.5rem 1.5rem;font-weight:600}
.timer-text{font-size:1.125rem;color:#dc2626}

.timeout-box{display:none;border-radius:16px;background:#fef2f2;padding:1.25rem;margin-top:.75rem}
.timeout-box.show{display:flex}
.timeout-title{font-size:1rem;font-weight:700;color:#1e293b}
.timeout-desc{font-size:.8125rem;color:#475569;margin-top:.25rem}
.btn-restart{background:#3b82f6;color:#fff;padding:.5rem 1.25rem;border-radius:10px;font-size:.875rem;font-weight:600;margin-top:.75rem;transition:all .2s}
.btn-restart:hover{background:#2563eb}

.payment-methods{border-radius:16px;background:#fff;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.payment-link{
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    border:1px solid #e5e7eb;border-radius:12px;padding:.75rem;
    transition:all .2s;flex:1;min-height:5rem;
}
.payment-link:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,.1)}
.payment-link span{font-size:.75rem;color:#9ca3af;margin-top:.25rem}

.visa-card{border:1px solid #e5e7eb;border-radius:12px;background:#fafafa;padding:1rem}
.visa-number{font-size:1.125rem;font-weight:600;color:#1a1a1a;letter-spacing:.05em}
.visa-name{font-size:.8125rem;color:#6b7280}
.copy-msg{font-size:.8125rem;font-weight:600;color:#059669}
.btn-copy{background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;padding:.75rem;transition:all .2s}
.btn-copy:hover{background:#dbeafe}

.radio-group{display:flex;gap:.5rem}
.radio-option{
    flex:1;display:flex;align-items:center;
    border:1.5px solid #e5e7eb;border-radius:12px;
    padding:.75rem;cursor:pointer;transition:all .2s;
}
.radio-option:has(input:checked){border-color:#3b82f6;background:#eff6ff}
.radio-option input{accent-color:#3b82f6;margin:0 .5rem 0 .25rem}
.radio-option label{font-size:.875rem;cursor:pointer;flex:1}

.file-upload{
    border:2px dashed #d1d5db;border-radius:12px;
    padding:1.25rem;text-align:center;cursor:pointer;
    transition:all .2s;color:#6b7280;font-size:.875rem;
}
.file-upload:hover{border-color:#3b82f6;background:#f8fafc}

/* === Help Box === */
.help-box{background:#fafafa;border-radius:16px;padding:1.5rem;text-align:center;margin-top:1rem;border:1px solid #f0f0f0}
.help-box p{font-size:1rem;font-weight:500;color:#374151;line-height:1.5}
.btn-help{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;padding:.75rem;margin-top:1rem;
    background:#ef4444;color:#fff;border-radius:12px;font-size:.875rem;font-weight:600;
    transition:all .2s;
}
.btn-help:hover{background:#dc2626}

/* === Thank You Page === */
.thankyou-page{min-height:100vh;background:#0a0a0a;padding:2rem .5rem}
.thankyou-card{max-width:36rem;margin:0 auto;padding:2rem}
.thankyou-icon{margin:0 auto;color:#10b981}
.thankyou-title{
    text-align:center;font-size:1.75rem;font-weight:700;
    margin:1.25rem 0;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.thankyou-info{display:flex;flex-direction:column;gap:1rem;font-size:1rem;font-weight:500;color:rgba(255,255,255,.85);line-height:1.6}
.thankyou-receipt{
    border:1px solid rgba(255,255,255,.15);border-radius:16px;
    padding:1.25rem;margin-top:.5rem;
}
.receipt-badge{
    text-align:center;font-size:1.5rem;font-weight:700;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:.75rem;
}
.receipt-line{font-size:.9375rem;font-weight:600;color:rgba(255,255,255,.85)}

/* === Misc utilities kept for payment page === */
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:.5rem}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1)}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}
.text-red-500{color:#ef4444}.text-green-500{color:#22c55e}.text-green-700{color:#15803d}
.bg-white{background:#fff}.bg-black{background:#000}
.border{border:1px solid #e5e7eb}
.border-slate-200{border-color:#e2e8f0}
.opacity-50{opacity:.5}
.transition{transition:all .2s}
.animate-spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cursor-pointer{cursor:pointer}
.select-none{user-select:none}
.pointer-events-none{pointer-events:none}
.list-decimal{list-style-type:decimal}
.pl-6{padding-left:1.5rem}
.-ml-6{margin-left:-1.5rem}
.ml-2{margin-left:.5rem}
.mr-2{margin-right:.5rem}
.mt-8{margin-top:2rem}
.min-h-20{min-height:5rem}.min-h-24{min-height:6rem}
.h-4{height:1rem}.w-4{width:1rem}.h-5{height:1.25rem}.w-5{width:1.25rem}
.h-full{height:100%}
.flex-1{flex:1 1 0%}
.z-10{z-index:10}.z-20{z-index:20}
.right-0{right:0}
.-bottom-10{bottom:-2.5rem}
.uppercase{text-transform:uppercase}
.break-words{overflow-wrap:break-word}
.underline{text-decoration:underline}
.-translate-y-0\.5{transform:translateY(-.125rem)}
.min-w-\[100px\]{min-width:100px}
.bg-\[\#ebf2ff\]{background:#ebf2ff}
.text-\[\#2f3462\]{color:#2f3462}
.text-\[\#535888\]{color:#535888}
.text-\[\#797a88\]{color:#797a88}
.text-\[\#d1444e\]{color:#d1444e}
.text-black\/50{color:rgba(0,0,0,.5)}
.bg-gray-50{background:#f9fafb}
.bg-gray-100{background:#f3f4f6}
.bg-stone-50{background:#fafaf9}
.border-gray-300{border-color:#d1d5db}
.text-blue-600{color:#2563eb}
.focus\:ring-blue-500:focus{box-shadow:0 0 0 2px #3b82f6}
.focus\:border-blue-500:focus{border-color:#3b82f6}
.disabled\:opacity-50:disabled{opacity:.5}

@media(min-width:640px){.sm\:p-8{padding:2rem}.sm\:text-base{font-size:1rem}}
@media(min-width:1024px){.lg\:pt-3{padding-top:.75rem}.lg\:pt-10{padding-top:2.5rem}.lg\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}}