/* ===== Header ===== */
.net-header{position:sticky;top:0;z-index:80;background:var(--bg);border-bottom:1px solid var(--border);height:64px;display:flex;align-items:center}
.net-nav{display:flex;align-items:center;gap:16px;width:100%}
.net-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin-inline-end:auto}
.net-links{display:flex;gap:4px}
.net-links a{padding:8px 14px;border-radius:10px;font-size:.9rem;font-weight:500;color:var(--muted);transition:all .25s}
.net-links a:hover,.net-links a.active{color:var(--accent);background:var(--accent-soft)}
.burger{display:none}

/* ===== Hero ===== */
.net-hero{padding-block:clamp(60px,10vw,100px) clamp(40px,6vw,60px);text-align:center}
.net-hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;line-height:1.3;margin-bottom:16px}
.net-hero p{color:var(--muted);font-size:1.05rem;max-width:52ch;margin-inline:auto}
.net-hero .cta-row{display:flex;justify-content:center;gap:12px;margin-top:30px;flex-wrap:wrap}

/* ===== Services Grid ===== */
.services-section{padding-block:clamp(50px,8vw,80px)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:36px}
.service-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;cursor:pointer;transition:all .3s var(--ease);position:relative;overflow:hidden}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.service-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease)}
.service-card:hover::before{transform:scaleX(1)}
.service-card .s-icon{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:16px}
.service-card .s-icon svg{width:26px;height:26px}
.service-card h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:8px}
.service-card p{color:var(--muted);font-size:.85rem;line-height:1.7}

/* ===== Service Modal/Form ===== */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:all .3s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--r);width:min(520px,100%);max-height:90vh;overflow-y:auto;padding:30px;transform:translateY(20px);transition:transform .3s var(--ease)}
.modal-overlay.open .modal-panel{transform:none}
.modal-panel header{display:flex;justify-content:space-between;align-items:start;margin-bottom:22px}
.modal-panel h2{font-family:var(--font-display);font-size:1.2rem}
.modal-panel .close-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;transition:all .2s}
.modal-panel .close-btn:hover{background:var(--err);color:#fff;border-color:var(--err)}
.modal-panel .close-btn svg{width:18px;height:18px}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-status{margin-top:16px;padding:13px 16px;border-radius:var(--r-sm);font-size:.88rem;font-weight:500;display:none}
.form-status.ok{display:block;background:rgba(22,163,74,.1);color:var(--ok);border:1px solid rgba(22,163,74,.25)}
.form-status.err{display:block;background:rgba(220,38,38,.08);color:var(--err);border:1px solid rgba(220,38,38,.25)}

/* ===== About & Contact ===== */
.about-section,.contact-section{padding-block:clamp(50px,8vw,80px)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-text p{color:var(--muted);margin-bottom:14px;line-height:1.9}
.about-features{display:grid;gap:12px;margin-top:20px}
.about-features li{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500}
.about-features svg{width:20px;height:20px;color:var(--ok);flex-shrink:0}
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:30px}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:24px;text-align:center;transition:all .3s var(--ease)}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.contact-card svg{width:32px;height:32px;color:var(--accent);margin-bottom:12px}
.contact-card strong{display:block;font-size:.95rem;margin-bottom:4px}
.contact-card span,.contact-card a{color:var(--muted);font-size:.85rem}
.contact-card a:hover{color:var(--accent)}

/* ===== Track Page ===== */
.track-box{max-width:480px;margin:60px auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:36px}
.track-result{margin-top:24px;padding:20px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--border);display:none}
.track-result.show{display:block}
.track-result .tr-code{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--accent);letter-spacing:.08em}
.track-result .tr-status{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:999px;font-size:.78rem;font-weight:700}
.tr-status.new{background:rgba(59,130,246,.12);color:var(--accent)}
.tr-status.in_progress{background:rgba(217,119,6,.15);color:#D97706}
.tr-status.done{background:rgba(22,163,74,.13);color:var(--ok)}
.tr-status.delivered{background:rgba(100,116,139,.12);color:var(--muted)}

/* ===== Footer ===== */
.net-footer{border-top:1px solid var(--border);padding:24px 0;text-align:center;color:var(--muted);font-size:.82rem;margin-top:40px}

/* ===== Responsive ===== */
@media(max-width:768px){
  .net-links{position:fixed;top:64px;inset-inline:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;padding:12px;gap:2px;transform:translateY(-120%);transition:transform .3s var(--ease);z-index:70}
  .net-links.open{transform:translateY(0)}
  .burger{display:grid}
  .form-row{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ===== Multi-step Form Styles ===== */
.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.step-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent);
}
.step-indicator {
  font-size: .8rem;
  color: var(--muted);
  background: var(--surface);
  padding: 4px 12px;
  border-radius: 999px;
}
.step-notice {
  background: rgba(217, 119, 6, .1);
  border: 1px solid rgba(217, 119, 6, .25);
  color: #D97706;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: .85rem;
  margin-bottom: 18px;
  line-height: 1.7;
}
.step-progress {
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
}
.step-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width .4s var(--ease);
}
.file-field {
  position: relative;
}
.file-preview {
  max-width: 120px;
  max-height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid var(--border);
}
input[type="file"] {
  padding: 10px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  width: 100%;
}
input[type="file"]:hover {
  border-color: var(--accent);
}
/* ===== Logo Styles ===== */
.logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.brand:hover .logo-img {
  transform: scale(1.05);
}

/* Dark mode adjustment - if logo has white background */
html[data-theme="dark"] .logo-img {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, .3));
}

/* Responsive */
@media (max-width: 640px) {
  .logo-img {
    height: 36px;
  }
}