*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

.container{ max-width: 1140px; margin: 0 auto; padding: 0 16px; }

a{ text-decoration:none; }

/* Layout */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-link{ display:flex; align-items:center; gap:12px; color: inherit; }
.brand-name{ font-weight:900; letter-spacing: .2px; }
.brand-sub{ font-size:12px; opacity:.8; }

.brand-mark{
  width:42px;
  height:42px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight:900;
}

.header-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.header-metrics{ display:flex; gap:10px; align-items:center; }
.metric{ padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.metric-k{ font-size:11px; text-transform:uppercase; letter-spacing:.6px; opacity:.75; font-weight:800; }
.metric-v{ font-weight:900; margin-top:2px; font-size: 12px; }

.demo-banner{ padding: 10px 0; }
.demo-banner-inner{ font-size: 13px; }

.site-footer{ padding: 18px 0; margin-top: 26px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; }

/* Hero */
.hero{ padding: 22px 0 6px 0; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
}

.hero-title{
  margin:0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 900;
}

.hero-copy{ margin: 12px 0 0 0; max-width: 720px; }

.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

.hero-ctas{
  display:flex;
  gap:10px;
  margin-top: 16px;
  flex-wrap:wrap;
}

.hero-card-title{ font-weight: 900; }

.stats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.stat{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(246,247,251,.12);
  background: rgba(255,255,255,.04);
}

.stat-k{
  font-size: 12px;
  opacity: .8;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.stat-v{
  margin-top: 6px;
  font-size: 26px;
  font-weight: 900;
}

/* Section */
.section{ padding: 18px 0; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:14px;
  flex-wrap:wrap;
}

.section-title{ margin:0; }
.section-sub{ margin-top:6px; opacity:.88; font-size: 13px; }

.filters{ display:flex; gap:10px; flex-wrap:wrap; }

.grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

/* Cards and tiles */
.card, .tile{
  border-radius: 18px;
  padding: 14px;
}

.tile-elegant{ display:grid; gap: 12px; }

.tile-head{ display:grid; gap:4px; }
.tile-head-title{ font-weight:900; font-size:16px; line-height:1.2; letter-spacing:.3px; }
.tile-head-sub{ font-size:12px; opacity:.78; }

.tile-media{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  min-height: 240px;
  border: 1px solid rgba(255,255,255,.14);
}

.tile-emoji{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: 92px;
  opacity: .95;
}

.tile-meta{ display:grid; gap: 8px; }

.meta-row{ display:flex; justify-content:space-between; gap:10px; }
.meta-k{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing:.6px; opacity:.78; }
.meta-v{ font-weight: 900; }

.tile-actions{ margin-top: 2px; display:flex; justify-content:flex-end; }

/* Item page */
.item-card{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
  padding: 16px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .item-card{ grid-template-columns: 1fr; }
}

.item-media{
  border-radius: 18px;
  min-height: 320px;
  border: 1px solid rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.emoji{ font-size: 120px; opacity: .95; }

.item-title{ margin: 0; font-size: 28px; font-weight: 900; }
.item-sub{ margin-top: 6px; opacity: .82; }

.row{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.sep{ height: 1px; background: rgba(255,255,255,.12); margin: 14px 0; }
.item-desc{ opacity: .9; line-height: 1.45; }

/* Pills */
.pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

/* Inputs */
.input{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  outline: none;
}

.label{ font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity:.8; }
.small{ font-size: 12px; }
.muted{ opacity: .78; }

/* Chips */
.chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.chip-good{ border-color: rgba(199,162,74,.44); }
.chip-warn{ border-color: rgba(255,255,255,.22); }

/* Buttons */
.btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .2px;
}

.btn-primary{
  color: #ffffff;
}

.btn-outline{
  background: transparent;
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 100;
}
.modal.open{ display:flex; }

.modal-card{
  width: min(620px, 100%);
  border-radius: 18px;
  padding: 14px;
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}

.modal-title{ font-weight: 900; }
.modal-body{ margin-top: 10px; }
.modal-actions{ display:flex; justify-content:flex-end; gap: 10px; margin-top: 12px; flex-wrap:wrap; }

.icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: inherit;
  cursor:pointer;
  font-size: 20px;
  display:grid;
  place-items:center;
}

/* How section */
.how-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .how-grid{ grid-template-columns: 1fr; }
}
.how-title{ font-weight: 900; font-size: 16px; margin-bottom: 10px; }
.how-step{ display:flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.10); }
.how-num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.how-k{ font-weight: 900; }
.how-v{ opacity: .85; margin-top: 4px; }

/* Theme: luxury navy */
:root{
  --lux-bg: #071427;
  --lux-ink: #f6f7fb;
  --lux-muted: rgba(246,247,251,.72);
  --lux-border: rgba(246,247,251,.14);
  --lux-card: rgba(10,27,51,.72);
  --lux-gold: #c7a24a;
  --lux-royal: #143a76;
}

body{
  background-color: var(--lux-bg);
  color: var(--lux-ink);
  background-image:
    radial-gradient(1100px 700px at 18% 10%, rgba(20,58,118,.28), transparent 60%),
    radial-gradient(900px 600px at 86% 22%, rgba(199,162,74,.14), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Crect width='260' height='260' fill='%23071427'/%3E%3Cg fill='%23c7a24a' fill-opacity='0.06' font-family='Georgia, Times, serif' font-size='44' font-weight='700'%3E%3Ctext x='38' y='110'%3EFP%3C/text%3E%3Ctext x='160' y='214'%3EFP%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 260px 260px;
  background-attachment: fixed, fixed, fixed;
}

.site-header{
  background: rgba(7,20,39,.78);
  border-bottom: 1px solid var(--lux-border);
  backdrop-filter: blur(10px);
}

.site-footer{
  background: rgba(7,20,39,.55);
  border-top: 1px solid var(--lux-border);
}

.demo-banner{
  background: rgba(199,162,74,.12);
  border-bottom: 1px solid var(--lux-border);
}

.card, .tile, .modal-card{
  background: rgba(10,27,51,.72);
  border: 1px solid rgba(246,247,251,.14);
  box-shadow: 0 16px 44px rgba(0,0,0,.28);
}

.brand-mark{
  background: linear-gradient(135deg, #c7a24a, #e3cf86);
  color: #101010;
}

.btn-primary{
  background: linear-gradient(135deg, var(--lux-royal), #0d2a58);
  border: 1px solid rgba(246,247,251,.12);
  box-shadow: 0 12px 26px rgba(20,58,118,.24);
}

.btn-outline{
  border: 1px solid rgba(246,247,251,.14);
  color: rgba(246,247,251,.92);
}

.input{
  background: rgba(10,27,51,.62);
  color: rgba(246,247,251,.96);
}