@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#155EEF;
  --blue-dark:#0B3EA8;
  --orange:#FFCC00;
  --orange-dark:#EA580C;
  --ink:#111827;
  --text:#374151;
  --muted:#6B7280;
  --line:#E5E7EB;
  --soft:#F8FAFC;
  --white:#FFFFFF;
  --success:#16A34A;
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',Arial,sans-serif;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  background:var(--soft);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.top{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:14px clamp(18px,5vw,72px);
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.logo img{height:80px;width:auto;object-fit:contain}
.top nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.top nav a{
  padding:9px 12px;
  border-radius:999px;
  color:#374151;
  font-size:13px;
  font-weight:600;
}
.top nav a:hover{background:#EEF4FF;color:var(--blue)}
.top nav a:last-child{background:var(--blue);color:#fff}
.top nav a:last-child:hover{background:var(--blue-dark);color:#fff}

.clean-wrap{width:min(1160px,calc(100% - 36px));margin:0 auto}
.clean-hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 58px;
  background:
    radial-gradient(circle at top right,rgba(249,115,22,.26),transparent 32%),
    linear-gradient(135deg,#0B3EA8 0%,#155EEF 58%,#1D4ED8 100%);
  color:#fff;
}
.clean-hero:after{
  content:"";
  position:absolute;
  inset:auto -10% -42% -10%;
  height:220px;
  background:rgba(255,255,255,.11);
  transform:rotate(-3deg);
}
.clean-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:34px;
  align-items:center;
}
.clean-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.clean-hero h1{
  max-width:720px;
  margin:0 0 16px;
  color:#fff;
  font-size:clamp(34px,5vw,58px);
  line-height:1.04;
  letter-spacing:-.045em;
}
.clean-hero p{max-width:650px;margin:0 0 26px;color:#EAF2FF;font-size:17px;line-height:1.7}
.clean-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.clean-trust{display:flex;gap:10px;flex-wrap:wrap;color:#fff}
.clean-trust span{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:13px;
  font-weight:700;
}
.clean-trust span:before{content:"✓";margin-right:7px;color:#BBF7D0}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
.clean-orange,.btn.clean-orange{background:var(--orange);color:#fff;border-color:var(--orange)}
.clean-orange:hover,.btn.clean-orange:hover{background:var(--orange-dark);border-color:var(--orange-dark);transform:translateY(-1px)}
.clean-outline{background:#fff;color:var(--blue);border-color:#fff}
.clean-outline:hover{background:#EEF4FF;color:var(--blue-dark)}
.btn.full{width:100%;margin-top:16px}

.clean-quote-card{
  padding:24px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:24px;
  background:rgba(255,255,255,.97);
  color:var(--ink);
}
.clean-quote-card h3{margin:0 0 5px;font-size:22px;color:var(--ink)}
.clean-quote-card p{margin:0 0 18px;color:var(--muted);font-size:14px}
.clean-device-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.clean-device-grid a{
  min-height:88px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#F9FAFB;
  font-size:24px;
  text-align:center;
}
.clean-device-grid b{font-size:13px;color:var(--ink)}
.clean-device-grid a:hover{border-color:var(--blue);background:#EEF4FF}
.clean-estimate-box{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  border-radius:16px;
  background:#0F172A;
  color:#fff;
}
.clean-estimate-box small{color:#CBD5E1;font-weight:700}
.clean-estimate-box strong{font-size:28px;line-height:1;color:#fff}

.clean-section{padding:66px 0;background:#fff}
.clean-soft{background:#F8FAFC}
.clean-section-head{max-width:720px;margin:0 auto 30px;text-align:center}
.clean-section-head span{display:block;margin-bottom:8px;color:var(--orange);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
h2{margin:0 0 10px;color:var(--ink);font-size:clamp(26px,3vw,38px);line-height:1.15;letter-spacing:-.03em}
.clean-section-head p{margin:0;color:var(--muted);font-size:15px}
.clean-flow-wrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
.clean-steps{position:sticky;top:96px;display:grid;gap:10px}
.cc-flow-step-dot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--muted);
  font-weight:700;
}
.cc-flow-step-dot b{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border-radius:999px;
  background:#EEF2FF;
  color:var(--blue);
}

.flow-top-new{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.back-btn{
  white-space:nowrap;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--text);
  padding:10px 13px;
  font-weight:800;
  cursor:pointer;
}
.back-btn:hover{border-color:var(--blue);color:var(--blue)}
.progress{height:9px;flex:1;overflow:hidden;border-radius:999px;background:#EEF2F7}
.progress span{display:block;height:100%;width:20%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--orange));transition:.25s ease}
.flow-step{display:none}.flow-step.active{display:block}
.step-label{margin-bottom:8px;color:var(--orange);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.flow-step h2{margin-bottom:6px}.muted{margin:0 0 20px;color:var(--muted)}
.choice-grid,.condition-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.choice,.condition,.model-choice{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  padding:16px;
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
}
.choice:hover,.condition:hover,.model-choice:hover{border-color:var(--blue);background:#F8FBFF;transform:translateY(-1px)}
.choice i{display:block;margin-bottom:10px;font-style:normal;font-size:26px}
.choice strong,.condition strong,.model-choice b{display:block;color:var(--ink);font-size:15px}
.choice span,.condition span,.model-choice small{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}
.search,input,select,textarea{
  width:100%;
  min-height:44px;
  margin:0 0 14px;
  padding:11px 13px;
  border:1px solid #D1D5DB;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(21,94,239,.10)}
label{display:block;margin:12px 0 6px;color:var(--ink);font-size:13px;font-weight:800}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.model-list{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:4px}
.model-choice{display:flex;align-items:center;justify-content:space-between;gap:14px}
.model-choice em{font-style:normal;color:var(--blue);font-size:12px;font-weight:800}
.condition.picked{border-color:var(--success);background:#F0FDF4}
.quote-total{margin-top:18px;padding:16px;border-radius:16px;background:#F8FAFC;border:1px solid var(--line);font-weight:800;color:var(--ink)}
.quote-total strong{color:var(--success);font-size:24px}
.clean-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.clean-info-grid>div{
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
}
.clean-info-grid b{display:block;margin-bottom:8px;color:var(--ink);font-size:16px}
.clean-info-grid p{margin:0;color:var(--muted)}
.clean-benefits>div{background:#F8FAFC}
.clean-cta{
  padding:56px 0;
  text-align:center;
  background:#0F172A;
  color:#fff;
}
.clean-cta h2{color:#fff}.clean-cta p{margin:0 0 22px;color:#CBD5E1}
.footer{background:#0B1220;color:#CBD5E1;padding:26px 0;border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{width:min(1160px,calc(100% - 36px));margin:0 auto;display:flex;justify-content:center;text-align:center}
.footer-links{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px}
.footer-links a{color:#E5E7EB}.footer-links a:hover{color:#fff;text-decoration:underline}.footer-links b{font-weight:500;color:#94A3B8}

@media (max-width:900px){
  .top{position:relative;align-items:flex-start;flex-direction:column;gap:12px}.top nav{justify-content:flex-start}
  .clean-hero-grid,.clean-flow-wrap{grid-template-columns:1fr}.clean-steps{position:relative;top:auto;grid-template-columns:repeat(5,1fr)}
  .cc-flow-step-dot{justify-content:center}.cc-flow-step-dot span{display:none}.clean-info-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  body{font-size:13px}.clean-hero{padding:48px 0}.clean-device-grid,.row,.clean-info-grid{grid-template-columns:1fr}
  .clean-steps{grid-template-columns:repeat(5,1fr);gap:6px}.cc-flow-step-dot{padding:8px}.cc-flow-step-dot b{width:26px;height:26px;font-size:12px}
  .clean-flow-card,.quote-shell-new,.clean-quote-card{padding:20px;border-radius:18px}.top nav a{font-size:12px;padding:8px 9px}
}

/* Real-photo professional home layout */
.trade-hero-real{
	position:relative;
	min-height:560px;
	overflow:hidden;
	background:#eaf2ff;
	margin-bottom: 44px;
}
.trade-hero-bg{
  position:absolute;
  inset:0;
background:#0050C9;
}
.trade-hero-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:#0050C9;
}
.trade-hero-inner{
  position:relative;
  z-index:1;
  min-height:560px;
  display:flex;
  align-items:center;
  padding:46px 0;
}
.trade-glass-card{
  width:min(650px,100%);
  padding:34px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 55px rgba(15,23,42,.14);
}
.trade-glass-card .clean-badge{
  color:#155EEF;
  background:#eff6ff;
  border-color:#dbeafe;
}
.trade-glass-card h1{
  margin:0 0 8px;
  color:#07152d;
  font-size:clamp(32px,4vw,48px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.trade-glass-card p{
  margin:0 0 24px;
  color:#64748b;
  font-size:18px;
}
.hero-device-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:20px;
}
.hero-device-grid a{
  min-height:138px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:rgba(255,255,255,.92);
  color:#07152d;
  transition:.18s ease;
}
.hero-device-grid a:hover{
  border-color:#155EEF;
  background:#fff;
  transform:translateY(-2px);
}
.hero-device-grid img{
  width:76px;
  height:58px;
  object-fit:contain;
}
.hero-device-grid b{
  color:#07152d;
  font-size:17px;
  font-weight:800;
}
.hero-estimate-real{
  padding:22px 28px;
  border-radius:10px;
  background:linear-gradient(135deg,#07152d,#0b2a5b);
}
.hero-estimate-real small{font-size:16px;color:#dbeafe}
.hero-estimate-real strong{font-size:46px;letter-spacing:.02em}

.clean-section#quoteFlow{
  margin-top:0;
  padding:0 0 70px;
  background:linear-gradient(180deg,#eef6ff 0%,#ffffff 35%);
}
.clean-section#quoteFlow .clean-wrap{
  position:relative;
  top:-26px;
}
.clean-section#quoteFlow .clean-section-head{
  display:none;
}
.clean-flow-wrap{
  display:block;
}
.clean-steps{
  position:relative;
  top:auto;
  max-width:800px;
  margin:0 0 22px 34px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.cc-flow-step-dot{
  border:0;
  background:transparent;
  padding:0;
  font-size:0;
}
.cc-flow-step-dot b{
	width:100%;
	height:8px;
	border-radius:999px;
	font-size:0;
	background:#e7edf5;
		
}
.cc-flow-step-dot.active b{
  background:linear-gradient(90deg,#155EEF,#FFCC00);
}
.quote-shell-new.clean-flow-card{
  padding:36px;
  border-radius:26px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);

}
.flow-top-new{display:none}
.step-label{color:#155EEF}
.category-grid-new{
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.category-grid-new .choice{
  min-height:118px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px;
}
.category-grid-new .choice i{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:0;
  border-radius:14px;
  background:linear-gradient(135deg,#155EEF,#0B63F6);
  color:#fff;
  font-size:24px;
}
.category-grid-new .choice strong{font-size:18px}
.category-grid-new .choice:after{
  content:'›';
  margin-left:auto;
  color:#64748b;
  font-size:34px;
  line-height:1;
}

/* Clean professional admin CSS */
.admin{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  background:#f6f8fb;
}
.side{
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  padding:22px 16px;
  background:#0b1220;
  color:#cbd5e1;
}
.side h2{
  margin:0 0 18px;
  color:#fff;
  font-size:20px;
  letter-spacing:-.02em;
}
.side a{
  display:block;
  margin:3px 0;
  padding:10px 12px;
  border-radius:10px;
  color:#cbd5e1;
  font-weight:700;
  font-size:13px;
}
.side a:hover{background:#1e293b;color:#fff}
.main{
  width:100%;
  max-width:1280px;
  padding:30px;
}
.main h1{
  margin:0 0 18px;
  color:#0f172a;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.03em;
}
.admin-card,.tablebox,.main .card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 25px rgba(15,23,42,.04);
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:22px}
.main .card h3{margin:0 0 8px;color:#64748b;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.price{font-size:34px;font-weight:800;color:#155EEF}
.tablebox{overflow:auto;padding:0}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{padding:14px 16px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
.table th{background:#f8fafc;color:#334155;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.table tr:hover td{background:#fbfdff}
.smallbtn,.main button,.main input[type=submit],.main .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 14px;
  border:1px solid #155EEF;
  border-radius:10px;
  background:#155EEF;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.smallbtn:hover,.main button:hover,.main input[type=submit]:hover{background:#0b3ea8;border-color:#0b3ea8;color:#fff}
.main form{max-width:100%}
.main label{margin-top:12px}
.main input,.main select,.main textarea{background:#fff}
.notice,.alert,.success{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#1e3a8a;
}

@media (max-width:900px){
  .trade-hero-bg{background:linear-gradient(180deg,rgba(239,246,255,.92),rgba(239,246,255,.72)),url('../img/hero-devices.jpg') center/cover no-repeat}
  .trade-hero-inner{align-items:flex-end}.trade-glass-card{width:100%}
  .category-grid-new{grid-template-columns:1fr}.clean-steps{margin-left:0}
  .admin{grid-template-columns:1fr}.side{position:relative;height:auto}.main{padding:20px}
}
@media (max-width:620px){
  .trade-hero-real,.trade-hero-inner{min-height:auto}.trade-hero-inner{padding:34px 0}
  .trade-glass-card{padding:22px;border-radius:22px}.hero-device-grid{grid-template-columns:1fr}.hero-estimate-real strong{font-size:34px}
  .quote-shell-new.clean-flow-card{padding:22px}.clean-steps{gap:5px}
}

/* Category admin improvements */
.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.admin-topbar p{margin:6px 0 0;color:#64748b}
.admin-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.full-field{grid-column:1/-1}
.admin-actions{display:flex;gap:10px;align-items:center}
.btn.secondary,.smallbtn.secondary{background:#fff;color:#155EEF;border-color:#bfdbfe}
.btn.secondary:hover,.smallbtn.secondary:hover{background:#eff6ff;color:#0b3ea8}
.smallbtn.danger{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.smallbtn.danger:hover{background:#dc2626;border-color:#dc2626;color:#fff}
.notice.danger{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.admin-thumb{width:68px;height:54px;object-fit:contain;border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:5px}
.category-photo-preview{margin-top:12px}
.category-photo-preview img{width:140px;height:105px;object-fit:contain;border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:8px}
.choice .choice-photo{width:70px;height:58px;object-fit:contain;margin-right:14px;border-radius:12px;background:#eff6ff;padding:8px}
.category-grid-new .choice .choice-photo + strong{margin-left:0}
@media (max-width:700px){.admin-topbar{align-items:flex-start;flex-direction:column}.admin-actions{flex-direction:column;align-items:stretch}.admin-actions .btn{width:100%}}

/* Homepage category photo cards */
.category-grid-new{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px;
}
.category-grid-new .choice.category-choice-card{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:26px 22px;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.06);
}
.category-grid-new .choice.category-choice-card:hover{
  border-color:#155EEF;
  background:#fbfdff;
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(21,94,239,.12);
}
.category-grid-new .choice.category-choice-card .choice-photo{
  width:140px;
  height:112px;
  margin:0 0 8px;
  padding:10px;
  object-fit:contain;
  border:0;
  border-radius:18px;
  background:#f8fafc;
}
.category-grid-new .choice.category-choice-card strong{
  margin:0;
  color:#0f172a;
  font-size:20px;
  font-weight:800;
  line-height:1.2;
}
.category-grid-new .choice.category-choice-card span{
  margin:0;
  color:#64748b;
  font-size:13px;
  font-weight:600;
}
.category-grid-new .choice.category-choice-card:after{display:none;content:none}

@media (max-width:620px){
  .category-grid-new .choice.category-choice-card{min-height:200px;padding:22px 18px}
  .category-grid-new .choice.category-choice-card .choice-photo{width:120px;height:95px}
}