/* =====================================================
   玹翔旅遊 Enterprise Black Gold v10.0
   Ultimate Final Enterprise Edition
   全站黑金高端商務版
===================================================== */

:root{

  --xx-bg:#070707;
  --xx-bg-2:#101010;
  --xx-bg-3:#181818;

  --xx-gold:#D8B56D;
  --xx-gold-light:#F7DF9B;
  --xx-gold-dark:#9A7531;

  --xx-white:#ffffff;
  --xx-text:#ECECEC;
  --xx-text-light:#CFCFCF;
  --xx-text-muted:#9C9C9C;

  --xx-success:#35c56a;
  --xx-danger:#ff6767;
  --xx-warning:#ffb84d;

  --xx-radius-xs:10px;
  --xx-radius-sm:16px;
  --xx-radius-md:22px;
  --xx-radius-lg:30px;
  --xx-radius-xl:40px;

  --xx-shadow-sm:
  0 4px 12px rgba(0,0,0,.18);

  --xx-shadow:
  0 12px 30px rgba(0,0,0,.30);

  --xx-shadow-lg:
  0 20px 60px rgba(0,0,0,.45);

  --xx-border:
  1px solid rgba(216,181,109,.18);

  --xx-container:1320px;

}

/* =====================================================
   RESET
===================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:
  radial-gradient(circle at top right,
  rgba(216,181,109,.12),
  transparent 40%),
  linear-gradient(
  180deg,
  #050505 0%,
  #090909 100%);
  color:var(--xx-text);
  font-family:
  "Noto Sans TC",
  "Microsoft JhengHei",
  sans-serif;
  line-height:1.8;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  text-decoration:none;
  color:inherit;
}

button,
input,
textarea,
select{
  font:inherit;
}

/* =====================================================
   LAYOUT
===================================================== */

.wrap{
  width:min(
    calc(100% - 32px),
    var(--xx-container)
  );
  margin:auto;
}

.section{
  padding:
  90px
  0;
}

.section-sm{
  padding:
  60px
  0;
}

.section-lg{
  padding:
  120px
  0;
}

/* =====================================================
   HERO
===================================================== */

.hero{

  position:relative;
  overflow:hidden;

  min-height:720px;

  display:flex;
  align-items:center;

  background:
  linear-gradient(
  rgba(0,0,0,.60),
  rgba(0,0,0,.75)),
  url("../images/hero-business.jpg");

  background-size:cover;
  background-position:center;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;

  background:
  radial-gradient(
  circle at center,
  rgba(216,181,109,.18),
  transparent 65%);
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:760px;
}

.hero-badge{

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:
  10px
  18px;

  border-radius:999px;

  border:var(--xx-border);

  background:
  rgba(216,181,109,.12);

  color:var(--xx-gold-light);

  font-size:.9rem;
}

.hero h1{

  margin-top:24px;

  font-size:
  clamp(
  2.6rem,
  6vw,
  5rem);

  line-height:1.15;

  font-weight:900;

  color:#fff;
}

.hero p{

  margin-top:24px;

  font-size:
  clamp(
  1rem,
  2vw,
  1.2rem);

  color:#ddd;
}

.hero-buttons{

  margin-top:36px;

  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* =====================================================
   BUTTON
===================================================== */

.btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:54px;

  padding:
  0
  26px;

  border-radius:999px;

  border:var(--xx-border);

  transition:.3s;

  cursor:pointer;
}

.btn:hover{
  transform:translateY(-3px);
}

.btn-primary{

  color:#000;

  background:
  linear-gradient(
  135deg,
  var(--xx-gold-light),
  var(--xx-gold));
}

.btn-secondary{

  background:
  rgba(255,255,255,.06);

  color:#fff;
}

/* =====================================================
   CARD
===================================================== */

.card{

  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,.04),
  rgba(255,255,255,.02));

  border:var(--xx-border);

  border-radius:var(--xx-radius-lg);

  padding:32px;

  backdrop-filter:blur(14px);

  box-shadow:var(--xx-shadow);
}

.card:hover{
  transform:translateY(-6px);
  transition:.35s;
}

/* =====================================================
   SERVICE
===================================================== */

.service-grid{

  display:grid;

  grid-template-columns:
  repeat(
  auto-fit,
  minmax(280px,1fr));

  gap:24px;
}

.service-card h3{

  margin-top:18px;

  color:
  var(--xx-gold-light);

  font-size:1.35rem;
}

.service-card p{
  margin-top:10px;
  color:#cfcfcf;
}

/* =====================================================
   PROCESS
===================================================== */

.process-grid{

  display:grid;

  grid-template-columns:
  repeat(
  auto-fit,
  minmax(240px,1fr));

  gap:24px;
}

.process-step{

  text-align:center;
}

.process-number{

  width:90px;
  height:90px;

  margin:auto;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  var(--xx-gold),
  var(--xx-gold-light));

  color:#000;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:2rem;
  font-weight:900;
}

.process-step h4{

  margin-top:18px;
  color:#fff;
}

/* =====================================================
   VEHICLES
===================================================== */

.vehicle-grid{

  display:grid;

  grid-template-columns:
  repeat(
  auto-fit,
  minmax(320px,1fr));

  gap:28px;
}

.vehicle-card{

  overflow:hidden;
}

.vehicle-image{

  aspect-ratio:16/10;

  overflow:hidden;
}

.vehicle-image img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:.4s;
}

.vehicle-card:hover img{
  transform:scale(1.08);
}

.vehicle-body{
  padding:24px;
}

.vehicle-body h3{
  color:var(--xx-gold-light);
}

/* =====================================================
   FORM
===================================================== */

.form-grid{

  display:grid;

  grid-template-columns:
  repeat(
  auto-fit,
  minmax(260px,1fr));

  gap:20px;
}

label{

  display:flex;
  flex-direction:column;
  gap:8px;

  color:#ddd;
}

input,
select,
textarea{

  width:100%;

  min-height:56px;

  padding:
  0
  18px;

  border-radius:18px;

  border:
  1px solid rgba(216,181,109,.2);

  background:
  rgba(0,0,0,.65);

  color:#fff;

  transition:.25s;
}

textarea{
  min-height:140px;
  padding:16px;
}

input:focus,
select:focus,
textarea:focus{

  outline:none;

  border-color:
  var(--xx-gold);

  box-shadow:
  0 0 0 4px
  rgba(216,181,109,.15);
}

/* =====================================================
   TITLE
===================================================== */

.section-title{

  text-align:center;

  margin-bottom:60px;
}

.section-title span{

  color:
  var(--xx-gold);

  letter-spacing:2px;
}

.section-title h2{

  margin-top:10px;

  font-size:
  clamp(
  2rem,
  5vw,
  3.5rem);

  color:#fff;
}

.section-title p{

  margin-top:14px;

  color:#cfcfcf;
}

/* =====================================================
   FLOATING
===================================================== */

.xx-floating{

  position:fixed;

  right:20px;
  bottom:20px;

  z-index:999;
}

.xx-floating a{

  width:58px;
  height:58px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:10px;

  background:
  linear-gradient(
  135deg,
  var(--xx-gold-light),
  var(--xx-gold));

  color:#000;

  box-shadow:
  0 10px 24px rgba(0,0,0,.3);
}

/* =====================================================
   FOOTER
===================================================== */

footer{

  border-top:
  1px solid rgba(216,181,109,.12);

  background:#050505;

  padding:
  70px
  0
  40px;
}

.footer-grid{

  display:grid;

  grid-template-columns:
  repeat(
  auto-fit,
  minmax(240px,1fr));

  gap:32px;
}

.footer-title{

  color:
  var(--xx-gold-light);

  margin-bottom:16px;
}

.footer-link{

  display:block;
  color:#bdbdbd;
  margin-bottom:10px;
}

.footer-link:hover{
  color:var(--xx-gold-light);
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:980px){

  .hero{
    min-height:600px;
  }

  .hero h1{
    font-size:2.6rem;
  }

  .section{
    padding:70px 0;
  }

}

@media(max-width:768px){

  .hero{
    min-height:520px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .btn{
    width:100%;
  }

  .card{
    padding:24px;
  }

}

@media(max-width:480px){

  .hero h1{
    font-size:2.1rem;
  }

  .section-title h2{
    font-size:2rem;
  }

}