/* Softertronics — styles */
:root {
  --bg: #070b12; --bg2: #0b1220; --card: #0e1626; --card2: #111c30;
  --line: #1c2942; --text: #eef3fb; --dim: #93a3bd; --dim2: #64748f;
  --green: #10b981; --green2: #34d399; --cyan: #22d3ee;
  --grad: linear-gradient(96deg, #10b981, #22d3ee);
  --danger: #f87171; --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 40; background: rgba(7, 11, 18, .85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top__in { max-width: 1080px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 9px; font-family: "Sora", sans-serif; font-weight: 800; font-size: 18px; }
.brand em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--grad); color: #04140f; display: grid; place-items: center; font-size: 17px; font-weight: 800; }
.top__nav { display: flex; gap: 4px; margin-left: auto; }
.top__nav a { padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--dim); }
.top__nav a:hover { color: var(--text); background: var(--card); }
.top__nav a.on { color: var(--text); background: var(--card2); }
@media (max-width: 640px) { .top__nav { gap: 0; } .top__nav a { padding: 8px 8px; font-size: 13px; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14.5px; padding: 12px 20px; border-radius: 11px; transition: .15s; }
.btn--primary { background: var(--grad); color: #04140f; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--wa { background: #128c4b; color: #fff; }
.btn--wa:hover { background: #16a35a; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--dim2); background: var(--card); }
.btn--danger { background: #3b1216; color: #fca5a5; border: 1px solid #7f1d1d; }
.btn--sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* hero */
.hero { padding: 76px 0 60px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -40% 0 auto; height: 520px; background: radial-gradient(600px 300px at 50% 0, rgba(16, 185, 129, .16), transparent 70%); pointer-events: none; }
.kicker { letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px; font-weight: 700; color: var(--green2); }
.hero h1 { font-family: "Sora", sans-serif; font-size: clamp(34px, 6vw, 56px); line-height: 1.06; margin: 14px auto 16px; max-width: 760px; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: var(--dim); font-size: 17px; max-width: 640px; margin: 0 auto 28px; }
.hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 780px; margin: 46px auto 0; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 10px; }
.stat b { font-family: "Sora", sans-serif; font-size: 20px; display: block; color: var(--green2); }
.stat span { font-size: 12px; color: var(--dim); }

/* sections */
.sec { padding: 54px 0; }
.sec__head { text-align: center; margin-bottom: 30px; }
.sec__head h2 { font-family: "Sora", sans-serif; font-size: clamp(24px, 4vw, 32px); }
.sec__head p { color: var(--dim); margin-top: 8px; }

/* service cards */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr; } }
.svc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: .15s; }
.svc:hover { border-color: #26554a; transform: translateY(-2px); }
.svc__ico { width: 42px; height: 42px; border-radius: 11px; background: rgba(16, 185, 129, .12); display: grid; place-items: center; font-size: 20px; }
.svc h3 { font-family: "Sora", sans-serif; font-size: 16.5px; }
.svc p { color: var(--dim); font-size: 13.5px; flex: 1; }
.svc__price { font-family: "Sora", sans-serif; font-size: 17px; color: var(--green2); }
.svc__price small { color: var(--dim2); font-family: "Inter", sans-serif; font-size: 11.5px; display: block; font-weight: 500; }
.svc__cta { display: flex; gap: 8px; flex-wrap: wrap; }

/* detail rows on the services page */
.detail { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 16px; }
.detail__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail__top h3 { font-family: "Sora", sans-serif; font-size: 19px; flex: 1; min-width: 200px; }
.detail__price { font-family: "Sora", sans-serif; color: var(--green2); font-size: 18px; }
.detail p { color: var(--dim); font-size: 14px; margin-top: 10px; }
.detail ul { margin: 12px 0 0 18px; color: var(--dim); font-size: 14px; }
.detail ul li { margin: 4px 0; }
.detail__cta { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

/* steps + payment note */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 800px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.step b { color: var(--green2); font-family: "Sora", sans-serif; font-size: 13px; letter-spacing: .08em; }
.step p { color: var(--dim); font-size: 13.5px; margin-top: 6px; }
.paynote { margin-top: 26px; background: linear-gradient(96deg, rgba(18, 140, 75, .16), rgba(34, 211, 238, .1)); border: 1px solid #1d4d33; border-radius: var(--radius); padding: 18px 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.paynote p { flex: 1; min-width: 240px; font-size: 14px; color: var(--text); }
.paynote p small { color: var(--dim); display: block; }

/* contact */
.split { display: grid; grid-template-columns: 1.25fr .9fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.panel h3 { font-family: "Sora", sans-serif; font-size: 18px; margin-bottom: 4px; }
.panel .lead { color: var(--dim); font-size: 13.5px; margin-bottom: 16px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.input, .select, .textarea { width: 100%; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14.5px; padding: 11px 13px; }
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid rgba(16, 185, 129, .5); outline-offset: 0; border-color: var(--green); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.hint { font-size: 12px; color: var(--dim2); margin-top: 5px; }
.side { display: flex; flex-direction: column; gap: 14px; }
.sidecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.sidecard h4 { font-family: "Sora", sans-serif; font-size: 15px; margin-bottom: 6px; }
.sidecard p { color: var(--dim); font-size: 13.5px; }
.sidecard a.wa { color: var(--green2); font-weight: 700; }
.track { margin-top: 20px; }
.track__out { margin-top: 12px; }
.msgcard { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 10px; }
.msgcard .who { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.msgcard .body { margin-top: 6px; font-size: 14.5px; white-space: pre-wrap; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; }
.badge--new { background: rgba(34, 211, 238, .14); color: #7fe3f2; }
.badge--replied { background: rgba(16, 185, 129, .16); color: var(--green2); }
.badge--closed { background: rgba(100, 116, 139, .2); color: #a8b5cc; }
.reply { background: rgba(16, 185, 129, .07); border: 1px solid #1d4d33; border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.reply .from { font-size: 11.5px; font-weight: 700; color: var(--green2); letter-spacing: .05em; text-transform: uppercase; }
.reply p { font-size: 14px; color: var(--text); margin-top: 4px; white-space: pre-wrap; }

/* auth + admin */
.authwrap { max-width: 420px; margin: 60px auto; padding: 0 20px; }
.authwrap .panel { padding: 28px; }
.otp { letter-spacing: .4em; font-size: 18px; text-align: center; }
.admtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 18px; }
.admtop h2 { font-family: "Sora", sans-serif; font-size: 22px; flex: 1; }
.admstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 560px) { .admstats { grid-template-columns: 1fr; } }
.admmsg { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; }
.admmsg .head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admmsg .head b { font-size: 15px; }
.admmsg .meta { color: var(--dim); font-size: 12.5px; }
.admmsg .body { margin-top: 10px; font-size: 14.5px; white-space: pre-wrap; }
.admmsg .replyform { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.admmsg .replyform textarea { flex: 1; min-width: 220px; min-height: 60px; }
.admreply { margin-top: 10px; }
.empty { text-align: center; color: var(--dim); padding: 46px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.err { color: var(--danger); font-size: 13.5px; margin-top: 10px; }
.ok { color: var(--green2); font-size: 13.5px; margin-top: 10px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px); background: #0f2c1f; border: 1px solid #1d4d33; color: #d9fbe9; padding: 11px 18px; border-radius: 11px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .2s; z-index: 90; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* footer */
.foot { border-top: 1px solid var(--line); background: var(--bg2); margin-top: 40px; }
.foot__in { max-width: 1080px; margin: 0 auto; padding: 36px 20px 22px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px; }
@media (max-width: 700px) { .foot__in { grid-template-columns: 1fr; } }
.foot__tag { color: var(--dim); font-size: 13.5px; margin-top: 10px; max-width: 300px; }
.foot__col h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); margin-bottom: 10px; }
.foot__col a { display: block; color: var(--dim); font-size: 14px; padding: 3px 0; }
.foot__col a:hover { color: var(--text); }
.foot__note { color: var(--dim2); font-size: 12.5px; padding: 3px 0; display: block; }
.foot__base { border-top: 1px solid var(--line); text-align: center; color: var(--dim2); font-size: 12.5px; padding: 14px 20px; }

/* whatsapp float */
.wafloat { position: fixed; right: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; background: #128c4b; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); z-index: 50; transition: .15s; }
.wafloat:hover { transform: scale(1.06); }
.boot { text-align: center; color: var(--dim); padding: 80px 20px; }