:root{
    --bg:#07111f;
    --bg2:#0b1930;
    --panel:#0f2038;
    --panel2:#132a47;
    --line:#244263;
    --text:#f4f8ff;
    --muted:#97abc2;
    --primary:#17d18a;
    --primary-dark:#0ca968;
    --danger:#ff657b;
    --blue:#5b9cff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top right,#123e69 0,#07111f 42%);color:var(--text);min-height:100vh}
a{text-decoration:none;color:#8ed9ff}
button,input,select{font:inherit}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1180px)/2));position:sticky;top:0;z-index:30;background:#07111eea;border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-size:20px;font-weight:900}
.brand span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#4fe0ff);color:#04150f}
.topbar nav{display:flex;align-items:center;gap:20px}
.topbar nav>a{color:#d8e7f7;font-weight:700;font-size:14px}
main{min-height:70vh}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#03170f;font-weight:900;padding:14px 20px;cursor:pointer;box-shadow:0 12px 32px #17d18a22}
.btn.small{padding:10px 14px}
.btn.large{padding:17px 25px;font-size:16px}
.btn.full{width:100%}
.ghost{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid var(--line);border-radius:12px;color:#dcecff;background:#ffffff06;font-weight:800}
.ghost.light{border-color:#ffffff55;color:#fff}
.eyebrow,.step-label{display:inline-block;font-size:12px;letter-spacing:.13em;font-weight:900;color:#5be5ac}
.hero{max-width:1180px;margin:auto;padding:90px 24px 70px;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(46px,6vw,76px);line-height:.98;letter-spacing:-.04em;margin:19px 0 24px}
.hero p{font-size:19px;line-height:1.7;color:var(--muted);max-width:700px}
.hero-actions{display:flex;gap:14px;margin-top:30px}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;color:#bcd1e8;font-size:14px}
.dashboard-preview{background:linear-gradient(145deg,#162f50,#0b1728);border:1px solid #2c4d71;border-radius:24px;box-shadow:0 30px 90px #0008;overflow:hidden;transform:perspective(1000px) rotateY(-5deg) rotateX(2deg)}
.preview-top{height:42px;border-bottom:1px solid #294866;display:flex;gap:7px;align-items:center;padding:0 16px}
.preview-top span{width:9px;height:9px;border-radius:50%;background:#5f7690}
.preview-body{display:grid;grid-template-columns:100px 1fr;min-height:390px}
.preview-body aside{padding:18px;background:#091523;display:flex;flex-direction:column;gap:16px}
.preview-body aside i{height:9px;border-radius:10px;background:#23415f}
.preview-body section{padding:23px}
.preview-title{width:45%;height:20px;background:#d9e8f522;border-radius:7px;margin-bottom:25px}
.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preview-cards div{height:92px;border-radius:14px;background:linear-gradient(135deg,#17d18a33,#4b9cff33);border:1px solid #416586}
.preview-chart{height:170px;border-radius:16px;margin-top:17px;background:linear-gradient(180deg,#4b9cff28,#081523);border:1px solid #294866;position:relative}
.preview-chart:after{content:"";position:absolute;left:12%;right:10%;bottom:25%;height:2px;background:linear-gradient(90deg,transparent,#43dcff,#17d18a,transparent);transform:skewY(-10deg)}
.section{max-width:1180px;margin:auto;padding:70px 24px}
.section-head{text-align:center;max-width:740px;margin:0 auto 38px}
.section-head h2{font-size:42px;margin:13px 0}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.feature-grid article,.price-card,.admin-card,.portal-card,.contract-card{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:20px;padding:25px;box-shadow:0 22px 60px #0004}
.feature-grid article>span{font-size:12px;color:#5be5ac;font-weight:900}
.feature-grid h3{font-size:20px;margin:17px 0 9px}
.feature-grid p,.price-card p{color:var(--muted);line-height:1.6}
.plans-section{padding-top:45px}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,420px));justify-content:center;gap:20px}
.price-card{padding:31px}
.plan-cycle{font-size:11px;font-weight:900;color:#5be5ac}
.price-card h3{font-size:25px;margin:12px 0}
.price{font-size:42px;font-weight:900;margin:10px 0}
.cta{max-width:1132px;margin:45px auto 80px;padding:40px;border-radius:25px;background:linear-gradient(135deg,#116d4c,#0d3151);display:flex;justify-content:space-between;align-items:center;border:1px solid #2f6b70}
.cta h2{font-size:36px;margin:9px 0}
footer{max-width:1180px;margin:auto;padding:40px 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted)}
.alert{max-width:1180px;margin:18px auto;padding:15px 18px;border-radius:13px}
.alert.success{background:#17d18a20;border:1px solid #17d18a66}
.alert.error{background:#ff657b20;border:1px solid #ff657b66}
.alert.info{background:#5b9cff20;border:1px solid #5b9cff66}
.contract-shell{max-width:1120px;margin:55px auto 90px;padding:0 24px;display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:start}
.contract-info{padding:35px 10px}
.contract-info h1{font-size:48px;line-height:1.05;margin:14px 0}
.contract-info p{color:var(--muted);line-height:1.7}
.steps-list{display:grid;gap:15px;margin-top:32px}
.steps-list>div{display:flex;gap:14px;align-items:center}
.steps-list b{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#17d18a1d;border:1px solid #17d18a55;color:#5be5ac}
.steps-list span strong,.steps-list span small{display:block}
.steps-list small{color:var(--muted);margin-top:3px}
.contract-card{padding:32px}
.wizard-step{display:none}
.wizard-step.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wizard-step h2{font-size:31px;margin:12px 0 23px}
label{display:block;font-weight:800;color:#dcecff;margin:14px 0}
input,select{width:100%;margin-top:8px;background:#081626;border:1px solid var(--line);border-radius:12px;padding:15px;color:#fff;outline:none}
input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #17d18a16}
.wizard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.plan-select{display:grid;gap:13px}
.plan-option{margin:0}
.plan-option input{display:none}
.plan-option span{display:block;border:1px solid var(--line);border-radius:15px;padding:18px;cursor:pointer;background:#081626}
.plan-option input:checked+span{border-color:var(--primary);box-shadow:0 0 0 3px #17d18a12}
.plan-option small,.plan-option strong,.plan-option b,.plan-option em{display:block}
.plan-option small{color:#5be5ac;font-size:11px}
.plan-option strong{font-size:19px;margin-top:5px}
.plan-option b{font-size:27px;margin:9px 0}
.plan-option em{font-style:normal;color:var(--muted);font-size:13px}
.secure-note{text-align:center;color:var(--muted);font-size:13px}
.login-page{max-width:1000px;margin:70px auto 100px;padding:0 24px;display:grid;grid-template-columns:1.1fr .9fr}
.login-presentation{padding:60px;background:linear-gradient(135deg,#126c4b,#0a3a62);border-radius:24px 0 0 24px}
.login-presentation h1{font-size:47px;line-height:1.05;margin:17px 0}
.login-presentation p{font-size:17px;line-height:1.7;color:#d2e7e1}
.login-benefits{display:grid;gap:12px;margin:26px 0}
.login-box{padding:55px 42px;background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:0 24px 24px 0}
.login-box h2{font-size:31px}
.admin-hint{font-size:12px;color:var(--muted);margin-top:20px}
.client-head{max-width:1180px;margin:45px auto 24px;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.client-head h1{font-size:42px;margin:10px 0 5px}
.client-head p{color:var(--muted)}
.portal-list{max-width:1180px;margin:0 auto 80px;padding:0 24px;display:grid;gap:20px}
.portal-card-top{display:flex;justify-content:space-between;gap:20px}
.portal-card h2{font-size:29px;margin:7px 0}
.portal-card p{color:var(--muted)}
.status{display:inline-flex;height:max-content;padding:8px 11px;border-radius:999px;background:#ffffff12;font-size:11px;font-weight:900;text-transform:uppercase}
.status.active{background:#17d18a20;color:#62e7b3}
.status.installing{background:#5b9cff20;color:#9bc0ff}
.status.error{background:#ff657b20;color:#ff9cab}
.activation-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.activation-flow div{padding:13px;border-radius:13px;background:#081626;color:#72879d;display:flex;gap:10px;align-items:center}
.activation-flow div.done{color:#dffdf1;border:1px solid #17d18a44}
.activation-flow b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#17334e}
.credential-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.credential-grid>div{background:#081626;border-radius:14px;padding:17px}
.credential-grid small,.credential-grid strong{display:block}
.credential-grid small{color:var(--muted);margin-bottom:7px}
.waiting-text{font-size:13px}
.payment-overlay{display:none;position:fixed;inset:0;background:#020912d9;z-index:100;place-items:center;padding:20px}
.payment-overlay.open{display:grid}
.payment-modal{width:min(470px,100%);background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:24px;padding:34px;position:relative;box-shadow:0 35px 100px #000}
.modal-close{position:absolute;right:16px;top:12px;background:none;border:0;color:#fff;font-size:29px;cursor:pointer}
.payment-status{margin-top:20px;text-align:center;color:var(--muted);font-size:13px}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 7px #17d18a16;margin-right:7px}
.admin-links{display:flex;gap:14px;flex-wrap:wrap}
.stats-grid{max-width:1180px;margin:0 auto 20px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats-grid>div{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:22px}
.stats-grid small,.stats-grid strong{display:block}
.stats-grid strong{font-size:34px;margin-top:6px}
.admin-card{max-width:1132px;margin:20px auto;padding:28px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line)}
td small{display:block;color:var(--muted);margin-top:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.inline-check{display:flex;align-items:center;gap:10px}
.inline-check input{width:auto;margin:0}
.template-help{margin-top:30px;padding-top:25px;border-top:1px solid var(--line)}
code{background:#081626;border:1px solid var(--line);padding:5px 8px;border-radius:7px}
@media(max-width:850px){
    .topbar nav>a:not(.btn){display:none}
    .hero,.contract-shell,.login-page{grid-template-columns:1fr}
    .dashboard-preview{transform:none}
    .feature-grid{grid-template-columns:1fr 1fr}
    .login-presentation,.login-box{border-radius:24px}
    .stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .hero{padding-top:55px}
    .hero h1,.contract-info h1,.login-presentation h1{font-size:39px}
    .hero-actions,.cta,.client-head{align-items:stretch;flex-direction:column}
    .feature-grid,.price-grid,.credential-grid,.activation-flow,.form-grid{grid-template-columns:1fr}
    .trust-row{display:grid}
    .cta{margin-left:16px;margin-right:16px}
    .section-head h2{font-size:34px}
    .stats-grid{grid-template-columns:1fr 1fr}
    footer{flex-direction:column;gap:15px}
}

textarea{width:100%;margin-top:8px;background:#081626;border:1px solid var(--line);border-radius:12px;padding:15px;color:#fff;outline:none;resize:vertical}
textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #17d18a16}
label small{display:block;color:var(--muted);font-weight:500;margin-top:6px}
.settings-form{padding-bottom:70px}
.webhook-box{margin-top:18px;padding:18px;background:#081626;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.webhook-box small{width:100%;color:var(--muted)}
.webhook-box code{overflow-wrap:anywhere}
.save-bar{max-width:1132px;margin:20px auto;text-align:right}

.template-grid{display:grid;gap:18px}
.template-card{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;padding:20px;background:#081626;border:1px solid var(--line);border-radius:16px}
.template-card h3{margin:7px 0}
.template-card p{color:var(--muted);margin:0 0 8px}
.template-icon{width:62px;height:62px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:grid;place-items:center;color:#04120d;font-weight:900}
.template-actions,.row-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.template-actions form,.row-actions form{margin:0}
.danger-btn,.warning-btn,.success-btn{border:0;border-radius:10px;padding:10px 13px;font-weight:800;cursor:pointer}
.danger-btn{background:#ff5468;color:#fff}
.warning-btn{background:#ffb84d;color:#251600}
.success-btn{background:#17d18a;color:#04150f}
.filter-bar{display:grid;grid-template-columns:1fr 220px auto;gap:12px}
.remove-details{position:relative}
.remove-details summary{cursor:pointer;color:#ff8391;font-weight:800}
.remove-details form{position:absolute;right:0;z-index:20;width:320px;padding:15px;background:#0c1d30;border:1px solid var(--line);border-radius:14px;box-shadow:0 15px 45px #0008}
.check-line{display:flex!important;gap:9px;align-items:flex-start;margin-bottom:12px;font-size:13px}
.check-line input{width:auto;margin-top:3px}
.status.blocked{background:#ffb84d22;color:#ffbf5d}
@media(max-width:760px){
 .template-card{grid-template-columns:1fr}
 .filter-bar{grid-template-columns:1fr}
 .remove-details form{position:fixed;left:15px;right:15px;bottom:15px;width:auto}
}

.domain-register-option{display:flex!important;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:14px;background:#081626}.domain-register-option input{width:auto}.domain-result{margin:10px 0}.domain-result.available{color:#62e7b3}.domain-result.unavailable{color:#ff9cab}
.billing-box{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;margin:18px 0}.billing-box>div,.billing-box form{background:#081626;border-radius:14px;padding:16px}
.resource-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.resource-list div{padding:15px;border:1px solid var(--line);border-radius:13px;background:#0c1d31}.resource-list span{color:var(--primary);font-weight:900}
.clients-strip{padding:70px 0;overflow:hidden}.clients-track{display:flex;gap:18px;width:max-content;animation:marquee 28s linear infinite}.client-logo-card{width:220px;min-height:125px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel2),var(--panel));display:grid;place-items:center;text-align:center}.client-logo-card img{max-width:150px;max-height:55px;object-fit:contain}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media(max-width:760px){.billing-box,.resource-list{grid-template-columns:1fr}}