:root{
  --bg:#0a1e3c;
  --ink:#0c1b2a;
  --brand:#0f7abf;
  --brand-2:#26b1ff;
  --soft:#f5f7fb;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:#0c1b2a;background:#ffffff;scroll-behavior:smooth}
a{text-decoration:none;color:var(--brand)}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin-inline:auto}

header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid #eaeef4}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;gap:.8rem;align-items:center}
.brand img{width:54px;height:38px;object-fit:cover;border-radius:6px}
.brand .title{font-weight:800;letter-spacing:.2px}
.nav-links{display:flex;gap:1.2rem}
.nav-links a{padding:.4rem .6rem;border-radius:8px}
.nav-links a:hover{background:#f2f6fb}

.hero{position:relative;min-height:78vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 70% 0%, rgba(38,177,255,.22), transparent 60%), #061426}
.hero .bg{position:absolute;inset:0;z-index:-2}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.2) 60%, rgba(255,255,255,1) 95%);z-index:-1}
.hero .content{text-align:center;color:#ffffff;padding:2rem 0}
.hero h1{font-size:clamp(36px,5vw,64px);margin:0 0 .6rem}
.hero p{font-size:clamp(16px,2vw,20px);opacity:.95;margin:0 0 1.2rem}

.search-card{margin-top:1rem;background:#ffffff;border:1px solid #e9eef5;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:1rem}
.form-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem}
.form-grid .field{display:flex;flex-direction:column}
.field label{font-size:.85rem;color:#3a5165;margin-bottom:.3rem}
.field input,.field select{padding:.8rem .9rem;border:1px solid #dce5f2;border-radius:12px;background:#fff;font:inherit}
.btn{cursor:pointer;border:none;border-radius:12px;padding:.95rem 1.1rem;font-weight:700;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff}
.btn:active{transform:translateY(1px)}

@media (max-width: 980px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .form-grid{grid-template-columns:1fr}
}

.section{padding:3.2rem 0}
.section h2{font-size:clamp(26px,3.6vw,34px);margin:0 0 1.2rem}
.deals{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width: 920px){.deals{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 580px){.deals{grid-template-columns:1fr}}

.card{border:1px solid #e9eef5;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.card .thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;padding:.3rem .55rem;border-radius:999px}
.card .body{padding:1rem}
.card .title{font-weight:700;margin:0 0 .4rem}
.card .meta{color:#44566c;font-size:.92rem}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{padding:1rem;border:1px dashed #d8e4f3;border-radius:16px;background:#f9fbfe}
.step h3{margin:.3rem 0;font-size:1.1rem}
.step p{margin:0;color:#47607a}

.results{display:none;margin-top:1rem}
.result-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width: 880px){.result-list{grid-template-columns:1fr}}
.result{border:1px solid #e9eef5;border-radius:16px;padding:1rem;display:flex;gap:1rem;align-items:center;background:#fff}
.result img{width:120px;height:80px;object-fit:cover;border-radius:12px}
.result .name{font-weight:700}
.result .price{margin-left:auto;font-weight:800}

footer{background:#061426;color:#c9d7eb;padding:2rem 0;margin-top:2rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
footer a{color:#e6f0ff}
footer .small{color:#9db1cc;margin-top:1rem;font-size:.9rem}
@media (max-width: 800px){footer .cols{grid-template-columns:1fr}}