/* ============================================================
   NXT-Mobile — Industrial repair-shop aesthetic
   Dark workshop · electric lime accent · monospace data
   ============================================================ */
:root{
  --bg:#0b0d0c;--bg-2:#121615;--panel:#161b19;--panel-2:#1d2421;
  --line:#2a322e;--ink:#eef2ee;--ink-soft:#9aa69f;--muted:#6c776f;
  --amber:#ffb454;--red:#ff5c5c;
  /* Accent remapped from lime to amber per brand update */
  --acid:var(--amber);--acid-dim:#c8862f;
  --cyan:#4ee3f2;--radius:14px;
  --mono:'Space Mono',ui-monospace,monospace;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  overflow-x:hidden;
  background:
    radial-gradient(900px 500px at 85% -10%,#1a221d 0%,transparent 60%),
    radial-gradient(700px 400px at 5% 110%,#161d24 0%,transparent 55%),
    var(--bg);
  color:var(--ink);font-family:var(--disp);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:700;line-height:1.1;letter-spacing:-.02em}
.mono{font-family:var(--mono)}.muted{color:var(--muted)}.soft{color:var(--ink-soft)}

.site-head{display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(11,13,12,.7)}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{color:var(--acid);font-size:20px;letter-spacing:-3px}
.brand-name{font-weight:800;font-size:20px;letter-spacing:-.03em}
.brand-name span{color:var(--acid)}.brand-name.small{font-size:18px}
.nav{display:flex;align-items:center;gap:26px;font-size:14.5px}
.nav a{color:var(--ink-soft);transition:color .15s;font-weight:600}
.nav a:hover,.nav a.on{color:var(--ink)}.nav .ghost{color:var(--muted)}
.btn-pill{background:var(--acid);color:#0b0d0c!important;padding:10px 18px;
  border-radius:999px;font-weight:700;transition:transform .15s,box-shadow .15s}
.btn-pill:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px var(--acid)}

.wrap{max-width:1180px;margin:0 auto;
  padding:clamp(28px,6vw,72px) clamp(20px,5vw,40px)}
.site-foot{position:relative;border-top:1px solid var(--line);
  margin-top:80px;padding:54px clamp(20px,5vw,64px) 30px;
  background:var(--bg-2);overflow:hidden;isolation:isolate}
.site-foot::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/assets/img/footer-bg.jpg") center/cover no-repeat}
.site-foot::after{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,13,12,.82)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:34px;max-width:1180px;margin:0 auto}
.foot-grid h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--acid);margin-bottom:14px}
.foot-grid a{display:block;color:var(--ink-soft);font-size:14px;
  padding:3px 0;transition:color .15s}
.foot-grid a:hover{color:var(--ink)}
.foot-grid p{font-size:13.5px;margin-top:8px}
.foot-base{display:flex;justify-content:space-between;max-width:1180px;
  margin:36px auto 0;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}

.hero{position:relative;padding:64px 0 54px;
  overflow:hidden;isolation:isolate;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:calc(-1 * clamp(28px,6vw,72px))}
.hero-inner{max-width:1180px;margin:0 auto;
  padding:0 clamp(20px,5vw,40px)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("/assets/img/hero-bg.jpg") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(11,13,12,.78) 0%,
    rgba(11,13,12,.55) 42%,rgba(11,13,12,.22) 100%)}
.kicker{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acid);border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;background:var(--panel)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--acid);box-shadow:0 0 12px var(--acid)}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);margin:26px 0 18px;
  letter-spacing:-.04em}
.hero h1 .out{color:transparent;-webkit-text-stroke:1.5px var(--ink-soft)}
.hero h1 .hi{color:var(--acid)}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink-soft);
  max-width:620px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;
  border:1px solid transparent;transition:.18s;font-family:var(--disp)}
.btn-primary{background:var(--acid);color:#0b0d0c}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 14px 40px -12px var(--acid)}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--acid);color:var(--acid)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:54px 0}
.stat{background:var(--panel);padding:26px 22px}
.stat b{display:block;font-size:1.9rem;font-family:var(--mono);
  color:var(--acid);letter-spacing:-.03em}
.stat span{font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em}

.sec-head{margin:70px 0 30px}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.sec-head p{color:var(--ink-soft);margin-top:10px;max-width:560px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;position:relative;
  transition:.2s;overflow:hidden}
.card:hover{border-color:var(--acid-dim);transform:translateY(-3px)}
.card .num{font-family:var(--mono);font-size:13px;color:var(--acid);
  letter-spacing:.1em}
.card h3{font-size:1.25rem;margin:14px 0 8px}
.card p{color:var(--ink-soft);font-size:14.5px}
.card::after{content:"";position:absolute;right:-40px;top:-40px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--acid) 0%,transparent 70%);
  opacity:0;transition:opacity .25s}
.card:hover::after{opacity:.08}

/* Horizontal steps carousel (home page) */
.carousel{position:relative;margin:8px 0 4px}
.carousel-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:6px 2px 18px;scrollbar-width:thin;
  scrollbar-color:var(--acid-dim) transparent}
.carousel-track::-webkit-scrollbar{height:8px}
.carousel-track::-webkit-scrollbar-thumb{background:var(--acid-dim);border-radius:99px}
.carousel-track::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.carousel-track .card{flex:0 0 clamp(260px,80vw,360px);scroll-snap-align:center}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:3;
  transition:.16s}
.carousel-nav:hover{border-color:var(--acid);color:var(--acid);
  box-shadow:0 8px 24px -10px var(--acid)}
.carousel-nav.prev{left:-10px}.carousel-nav.next{right:-10px}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.carousel-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);
  cursor:pointer;transition:.16s}
.carousel-dots i.on{background:var(--acid);width:24px;border-radius:99px}
@media(max-width:640px){.carousel-nav{display:none}}

.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(24px,4vw,44px)}
.panel-narrow{max-width:520px;margin:0 auto}
.panel h1{font-size:1.9rem;margin-bottom:6px}
.panel .sub{color:var(--ink-soft);margin-bottom:28px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;
  letter-spacing:.04em;margin-bottom:7px;color:var(--ink-soft)}
.field label .req{color:var(--acid)}
.input,select,textarea{width:100%;background:var(--bg);
  border:1px solid var(--line);color:var(--ink);padding:13px 15px;
  border-radius:10px;font-family:var(--disp);font-size:15px;
  transition:.15s;outline:none}
textarea{resize:vertical;min-height:96px;font-family:var(--mono);font-size:14px}
.input:focus,select:focus,textarea:focus{border-color:var(--acid);
  box-shadow:0 0 0 3px rgba(198,242,78,.12)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.help{font-size:12.5px;color:var(--muted);margin-top:6px}
.full{width:100%;justify-content:center;margin-top:8px}
.otp{display:flex;gap:10px;justify-content:center;margin:8px 0 4px}
.otp input{width:52px;height:62px;text-align:center;font-size:24px;
  font-family:var(--mono);background:var(--bg);border:1px solid var(--line);
  color:var(--acid);border-radius:10px}
.otp input:focus{border-color:var(--acid);
  box-shadow:0 0 0 3px rgba(198,242,78,.15)}

.alert{padding:13px 16px;border-radius:10px;font-size:14px;
  margin-bottom:20px;border:1px solid}
.alert-ok{background:rgba(198,242,78,.08);border-color:var(--acid-dim);
  color:var(--acid)}
.alert-err{background:rgba(255,92,92,.08);border-color:var(--red);
  color:#ff8f8f}
.alert-info{background:rgba(78,227,242,.07);border-color:var(--cyan);
  color:var(--cyan)}

.badge{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;padding:5px 11px;
  border-radius:999px;border:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.08em}
.badge::before{content:"";width:6px;height:6px;border-radius:50%}
.b-pending{color:var(--amber)}.b-pending::before{background:var(--amber)}
.b-quoted{color:var(--cyan)}.b-quoted::before{background:var(--cyan)}
.b-accepted{color:var(--acid)}.b-accepted::before{background:var(--acid)}
.b-repair{color:var(--amber)}.b-repair::before{background:var(--amber)}
.b-ready{color:var(--acid)}.b-ready::before{background:var(--acid)}
.b-completed{color:var(--ink-soft)}.b-completed::before{background:var(--ink-soft)}
.b-cancelled{color:var(--red)}.b-cancelled::before{background:var(--red)}
.b-paid{color:var(--acid)}.b-paid::before{background:var(--acid)}
.b-unpaid{color:var(--muted)}.b-unpaid::before{background:var(--muted)}

.qlist{display:grid;gap:14px}
.qrow{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;transition:.15s}
.qrow:hover{border-color:var(--acid-dim)}
.qrow .ref{font-family:var(--mono);color:var(--acid);font-size:14px}
.qrow .dev{font-weight:700;margin-top:3px}
.qrow .meta{font-size:13px;color:var(--muted)}
.qrow .price{font-family:var(--mono);font-size:1.15rem;text-align:right}

.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
.kv{display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;gap:18px}
.kv:last-child{border:0}
.kv span:first-child{color:var(--muted);white-space:nowrap}
.kv span:last-child{font-weight:600;text-align:right}
.price-big{font-family:var(--mono);font-size:2.4rem;color:var(--acid);
  letter-spacing:-.03em}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.thumbs img{width:84px;height:84px;object-fit:cover;border-radius:9px;
  border:1px solid var(--line)}

.chat{display:flex;flex-direction:column;height:430px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);overflow:hidden}
.chat-log{flex:1;overflow-y:auto;padding:20px;display:flex;
  flex-direction:column;gap:12px}
.msg{max-width:75%;padding:11px 15px;border-radius:13px;font-size:14px;
  line-height:1.5;word-wrap:break-word}
.msg .who{font-family:var(--mono);font-size:11px;opacity:.6;
  margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}
.msg.them{align-self:flex-start;background:var(--panel-2);
  border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end;background:var(--acid);color:#0b0d0c;
  border-bottom-right-radius:4px}
.msg.me .who{color:#0b0d0c;opacity:.55}
.chat-in{display:flex;gap:10px;padding:14px;
  border-top:1px solid var(--line);background:var(--panel)}
.chat-in input{flex:1;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);padding:12px 14px;border-radius:10px;font-size:14px;
  outline:none}
.chat-in input:focus{border-color:var(--acid)}
.chat-in button{background:var(--acid);color:#0b0d0c;border:0;
  padding:0 22px;border-radius:10px;font-weight:700;cursor:pointer}

.pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.pay-opt{border:1px solid var(--line);border-radius:12px;padding:20px;
  text-align:center;cursor:pointer;transition:.15s;background:var(--bg)}
.pay-opt:hover{border-color:var(--acid)}
.pay-opt.sel{border-color:var(--acid);background:rgba(198,242,78,.06)}
.pay-opt b{display:block;margin-bottom:4px}
.pay-opt small{color:var(--muted)}
#paypal-box{margin-top:18px;min-height:46px}

.divider{height:1px;background:var(--line);margin:26px 0}
.center{text-align:center}.mt{margin-top:18px}.mb{margin-bottom:18px}
.linkish{color:var(--acid);font-weight:700;cursor:pointer}
.spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,.25);
  border-top-color:#0b0d0c;border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.reveal{opacity:0;transform:translateY(20px);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.reveal:nth-child(2){animation-delay:.08s}
.reveal:nth-child(3){animation-delay:.16s}
.reveal:nth-child(4){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}

@media(max-width:880px){
  .stats{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav{gap:16px;font-size:13px}
  .row3{grid-template-columns:1fr}
  .pay-opts{grid-template-columns:1fr}
}
@media(max-width:560px){
  .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .qrow{flex-direction:column;align-items:flex-start}
  .nav a:not(.btn-pill){display:none}
}