:root{
  --bg:#070d1b;
  --card:#0e172a;
  --card-2:#111d35;
  --text:#e6eeff;
  --muted:#9fb0d3;
  --line:rgba(159,176,211,.25);
  --primary:#3b82f6;
  --cyan:#22d3ee;
  --green:#34d399;
  --amber:#f59e0b;
  --violet:#a78bfa;
}

.contact-page{
  background: var(--bg);
  color: var(--text);
}

/* common */
.contact-container{
  width:min(1200px,92%);
  margin:0 auto;
}
.section-head{
  text-align:center;
  margin-bottom:24px;
}
.section-head h2{
  margin:0 0 10px;
  font-size:30px;
}
.section-head p{
  margin:0;
  color:var(--muted);
}

/* hero */
.contact-hero{
  padding:72px 0 56px;
  background:
    radial-gradient(900px 280px at 15% -20%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(850px 260px at 90% 0%, rgba(34,211,238,.14), transparent 60%);
}
.hero-tag{
  display:inline-block;
  padding:6px 10px;
  border:1px solid rgba(34,211,238,.35);
  border-radius:20px;
  font-size:12px;
  letter-spacing:.8px;
  color:#7dd3fc;
}
.contact-hero h1{
  margin:14px 0 12px;
  font-size:42px;
}
.contact-hero p{
  max-width:760px;
  color:var(--muted);
  line-height:1.8;
}
.hero-actions{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.btn-primary,.btn-ghost{
  padding:11px 18px;
  border-radius:10px;
  font-size:14px;
}
.btn-primary{
  background:linear-gradient(180deg,#38bdf8,#2563eb);
  color:#fff;
}
.btn-ghost{
  border:1px solid rgba(125,211,252,.4);
  color:#9bdfff;
}
.btn-ghost:hover{background:rgba(125,211,252,.08);}

/* quick contact */
.quick-contact{padding:26px 0 18px;}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.quick-card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 16px;
}
.quick-card h3{margin:10px 0 8px;font-size:18px;}
.quick-card p{margin:0 0 10px;color:var(--muted);line-height:1.7;font-size:14px;}
.quick-card a,.quick-card span{color:#d9e7ff;font-size:14px;word-break:break-all;}

/* original icon */
.qc-ico{
  width:22px;height:22px;display:inline-block;position:relative;border-radius:6px;
  background:rgba(148,163,184,.1);
}
.qc-mail:before{content:"";position:absolute;left:3px;right:3px;top:5px;bottom:5px;border:2px solid var(--cyan);border-radius:3px;}
.qc-mail:after{content:"";position:absolute;left:5px;right:5px;top:9px;height:2px;background:var(--cyan);}
.qc-phone:before{content:"";position:absolute;left:6px;top:4px;width:10px;height:13px;border:2px solid var(--green);border-radius:4px;}
.qc-map:before{content:"";position:absolute;left:5px;top:3px;width:11px;height:11px;border:2px solid var(--amber);border-radius:50% 50% 50% 0;transform:rotate(-45deg);}
.qc-time:before{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;border:2px solid var(--violet);border-radius:50%;}

/* accordion */
.contact-accordion-wrap{padding:30px 0;}
.contact-accordion{
  display:grid;
  gap:12px;
}
.acc-item{
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(180deg,#0d162b,#0f1b33);
  overflow:hidden;
}
.acc-btn{
  width:100%;
  border:none;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px;
  text-align:left;
  font-size:16px;
  cursor:pointer;
}
.acc-plus{
  margin-left:auto;
  width:18px;height:18px;position:relative;
}
.acc-plus:before,.acc-plus:after{
  content:"";position:absolute;left:8px;top:2px;width:2px;height:14px;background:#9cc6ff;transition:.25s;
}
.acc-plus:after{transform:rotate(90deg);}
.acc-item.active .acc-plus:before{transform:rotate(90deg);}
.acc-item.active .acc-plus:after{opacity:0;}

.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.acc-panel p,.acc-panel ul{
  margin:0;
  padding:0 16px 14px 52px;
}
.acc-panel p{color:var(--muted);line-height:1.8;}
.acc-panel ul{padding-bottom:16px;}
.acc-panel li{
  margin:8px 0;
  color:#cfe0ff;
  position:relative;
  padding-left:14px;
}
.acc-panel li:before{
  content:"";
  position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;
  background:#60a5fa;
}

.acc-ico{
  width:18px;height:18px;border-radius:5px;display:inline-block;background:rgba(148,163,184,.18);position:relative;
}
.ai-phone:before,.ai-mail:before,.ai-chat:before,.ai-share:before,.ai-office:before{
  content:"";position:absolute;inset:4px;border:2px solid #7dd3fc;border-radius:3px;
}

/* form area */
.contact-form-wrap{padding:20px 0 56px;}
.form-grid{
  display:grid;
  grid-template-columns:1.5fr .9fr;
  gap:16px;
}
.form-card,.info-card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.form-card h2{margin:0 0 8px;}
.form-card p{margin:0 0 14px;color:var(--muted);}

.form-row{margin-bottom:12px;}
.form-row label{
  display:block;margin-bottom:6px;font-size:13px;color:#b7c8ea;
}
.form-row input,.form-row textarea{
  width:100%;
  border:1px solid rgba(159,176,211,.35);
  background:#0a1326;
  color:#e8efff;
  border-radius:10px;
  padding:11px 12px;
  outline:none;
}
.form-row input:focus,.form-row textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.2);
}
.form-row.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.submit-btn{
  border:none;
  border-radius:10px;
  padding:12px 18px;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(180deg,#38bdf8,#2563eb);
}

.info-card h3{margin:0 0 12px;}
.info-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.info-card li{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid rgba(159,176,211,.18);
  border-radius:10px;padding:10px;
}
.info-card small{display:block;color:var(--muted);margin-bottom:3px;}
.info-card a,.info-card span{color:#dce9ff;word-break:break-all;}

.info-ico{width:20px;height:20px;min-width:20px;border-radius:6px;background:rgba(148,163,184,.13);position:relative;}
.ii-phone:before,.ii-mail:before,.ii-map:before{content:"";position:absolute;inset:4px;border:2px solid #7dd3fc;border-radius:4px;}

/* responsive */
@media (max-width:1024px){
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .contact-hero h1{font-size:32px;}
  .quick-grid{grid-template-columns:1fr;}
  .form-row.two{grid-template-columns:1fr;}
  .section-head h2{font-size:25px;}
}