:root{
  --bg: #0f172a; --card:#0b1226; --text:#e5e7eb; --muted:#9ca3af;
  --brand:#22d3ee; --brand-2:#60a5fa; --accent:#34d399; --error:#f43f5e;
  --shadow: 0 10px 30px rgba(0,0,0,.25); --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); background: radial-gradient(1200px 800px at 80% -10%, #1e293b 0%, var(--bg) 45%) no-repeat;}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1100px,92%); margin-inline:auto}

/* Hide mobile menu by default (prevents duplicate nav on desktop) */
.mobile-menu { display: none; }


header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background-color:rgba(15,23,42,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo-badge{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:grid; place-items:center; box-shadow:var(--shadow)}
.logo-badge svg{width:22px; height:22px}
.nav a.button{padding:10px 14px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b1226; font-weight:700; box-shadow:var(--shadow)}
.nav-links{display:flex; gap:20px; align-items:center}
.hamburger{display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--text)}
@media (max-width:800px){.nav-links{display:none}.hamburger{display:block}.mobile-menu{display:none; padding:10px 0 20px; border-top:1px solid rgba(255,255,255,.08)} .mobile-menu a{display:block; padding:10px 0} .mobile-menu .button{margin-top:6px; display:inline-block}}

.hero{position:relative; padding:30px 0 60px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero h1{font-size:clamp(28px,6vw,52px); line-height:1.08; margin:6px 0 12px; letter-spacing:.2px}
.hero p{color:var(--muted); font-size:clamp(14px,2.5vw,18px)}
.hero .ctas{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.btn{padding:12px 16px; border-radius:14px; font-weight:700; border:1px solid rgba(255,255,255,.1)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#0b1226; box-shadow:var(--shadow)}
.btn-ghost{background:transparent}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:var(--radius); display:grid; gap:14px}
.kv{aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06); background: conic-gradient(from 200deg at 60% 40%, #1f2937 0%, #0b1226 40%, #1e293b 100%); position:relative}
.kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

/* --- Hero carousel --- */
.carousel{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:#0b1226;
  aspect-ratio:1/1;
}
.car-viewport{ overflow:hidden; }
.car-track{ display:flex; transition:transform .5s ease; will-change:transform; }
.car-slide{ min-width:100%; user-select:none; }
.car-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center;
  cursor:pointer; backdrop-filter: blur(4px);
}
.car-btn:hover{ background:rgba(0,0,0,.5); }
.car-btn.prev{ left:10px; }
.car-btn.next{ right:10px; }

.car-dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; gap:8px; justify-content:center;
}
.car-dots .car-dot{
  width:8px; height:8px; border-radius:999px; border:none; cursor:pointer;
  background:rgba(255,255,255,.45);
}
.car-dots .car-dot.active{ background:var(--brand); }

@media (max-width: 640px){
  .carousel{ aspect-ratio:1/1; }
  .car-btn { 
    display: none !important;
  }
}

section{padding:56px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px}
h2{font-size:clamp(22px,4vw,34px); margin:0}
.sub{color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:18px}
.card h3{margin:0 0 6px}
.pill{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#0b1226; background:linear-gradient(135deg,var(--brand),var(--brand-2)); padding:6px 10px; border-radius:999px; font-weight:800}
.icon{width:18px; height:18px}
@media (max-width:960px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

.badges{display:flex; flex-wrap:wrap; gap:10px}
.badge{border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:8px 12px; color:var(--muted); background:rgba(255,255,255,.02)}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.price{display:grid; gap:8px}
.price .row{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px dashed rgba(255,255,255,.1); border-radius:12px}
.details{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px}
summary{cursor:pointer; font-weight:700}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

form{display:grid; gap:12px}
input, textarea, select{width:100%; padding:12px 14px; border-radius:12px; color:var(--text); background:#0b1226; border:1px solid rgba(255,255,255,.08)}
textarea{min-height:120px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

footer{padding:26px 0 70px; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)}
.foot-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}

.fab{position:fixed; right:18px; bottom:18px; border:none; cursor:pointer; width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--brand)); color:#041424; font-weight:900; box-shadow:var(--shadow)}
.to-top{position:fixed; right:18px; bottom:88px; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:var(--text); display:none; place-items:center}

.reveal{opacity:0; transform:translateY(12px); transition:all .6s ease}
.reveal.show{opacity:1; transform:none}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; color:transparent}