:root {
  --velari-primary: #1fb6ff; /* sky */
  --velari-deep: #0f172a;    /* deep sea / slate */
  --velari-foam: #e6f9ff;    /* foam */
  --velari-accent: #64d2ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: 'Inter', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#111; background:#fff; }

.v-header { position: fixed; top:0; left:0; right:0; z-index: 1000; background: rgba(15,23,42,0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.v-nav { max-width: 1200px; margin: 0 auto; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding: 14px 18px; gap: 12px; }
.v-brand { color:#fff; font-weight:800; letter-spacing:2px; text-decoration:none; }
.v-menu { display:flex; gap:24px; list-style:none; margin:0; padding:0; justify-content:center; }
.v-menu a { color:#fff; text-decoration:none; font-weight:600; opacity:0.9; }
.v-menu a:hover { opacity:1; }
.v-actions { display:flex; align-items:center; gap: 12px; justify-self:end; }
.v-menu-toggle { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
.v-cart-icon { position: relative; width: 28px; height: 28px; border-radius: 8px; border:1px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.v-cart-icon::before { content:''; width:18px; height:18px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>') no-repeat center/contain; }
.v-cart-count { position:absolute; top:-6px; right:-6px; background:#fff; color:#0f172a; border-radius: 999px; width:18px; height:18px; font-size:11px; display:none; align-items:center; justify-content:center; font-weight:800; }

@media (max-width: 768px) {
  .v-menu-toggle { display:block; }
  .v-menu { position: absolute; top:56px; left:0; right:0; background:#0f172a; flex-direction: column; padding:16px; display:none; }
  .v-menu.show { display:flex; }
}

.v-hero { position: relative; min-height: 100vh; display:grid; place-items:center; text-align:center; color:#fff; }
.v-hero-bg { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(4,18,28,0.65) 0%, rgba(4,18,28,0.85) 100%),
  radial-gradient(1200px 600px at 70% 30%, rgba(100,210,255,0.25), transparent),
  radial-gradient(1000px 600px at 30% 70%, rgba(31,182,255,0.3), transparent),
  url('/VELARI/assets/images/og.png') center/cover no-repeat;
}
.v-hero-content { position:relative; z-index:1; padding: 0 16px; }
.v-logo { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.v-cta { margin-top: 16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.v-btn { display:inline-block; padding:12px 20px; border-radius: 999px; text-decoration:none; font-weight:700; letter-spacing:0.5px; }
.v-btn-primary { background: var(--velari-primary); color:#002b3a; }
.v-btn-primary:hover { background:#52c6ff; }
.v-btn-ghost { border:1px solid rgba(255,255,255,0.5); color:#fff; }
.v-btn-ghost:hover { border-color:#fff; }

.v-section-title { text-align:center; margin: 80px auto 24px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; color:#0f172a; letter-spacing:-0.5px; }

.v-features { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; max-width: 1200px; margin: 20px auto 40px; padding: 0 16px; }
.v-feature { background:#f6fbff; color:#0f172a; border:1px solid #e8f5ff; border-radius: 12px; padding:16px; text-align:center; font-weight:700; }

.v-shop { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); padding: 10px 0 40px; }
.v-products { max-width: 1200px; margin: 0 auto; padding: 0 16px; display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:28px; }
.v-card { background:#fff; border:1px solid #eef4fa; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 10px 30px rgba(7, 89, 133, 0.05); }
.v-card-media { width:100%; aspect-ratio: 1 / 1; background: radial-gradient(600px 300px at 70% 30%, rgba(100,210,255,0.15), transparent), radial-gradient(500px 300px at 30% 70%, rgba(31,182,255,0.18), transparent), #0f172a; display:grid; place-items:center; padding: 12px; }
.v-card-media img { width:100%; height:100%; object-fit: contain; }
.v-card-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.v-card-title { margin:0; font-weight:800; letter-spacing:0.2px; }
.v-card-desc { margin:0; color:#475569; }
.v-card-footer { margin-top:auto; display:flex; align-items:center; justify-content: space-between; gap:12px; }
.v-price { font-weight:800; color:#0f172a; }
.v-size { padding:10px 12px; border-radius: 999px; border:1px solid #e2e8f0; background:#fff; color:#0f172a; font-weight:600; }
.v-cart-item-meta { color:#cbd5e1; font-size:0.9em; margin-top:4px; }

.v-gallery { padding: 10px 0 40px; }
.v-gallery-grid { max-width: 1200px; margin: 0 auto; padding: 0 16px; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.v-gallery-grid img { width:100%; height:auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }

.v-about { max-width: 1000px; margin: 0 auto 40px; padding: 0 16px; }
.v-about-content { background:#0f172a; color:#e6f9ff; border-radius: 16px; padding: 26px; border:1px solid #10263a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
.v-bullets { margin:12px 0 0; padding-left: 20px; }
.v-bullets li { margin:6px 0; }

.v-contact { text-align:center; margin: 40px auto 80px; padding: 0 16px; }
.v-contact-intro { color:#475569; margin-bottom: 12px; }
.v-contact .v-btn-ghost { border-color: var(--velari-primary); color: var(--velari-primary); }
.v-contact .v-btn-ghost:hover { border-color: #52c6ff; color: #52c6ff; }

.v-footer { background:#0f172a; color:#fff; }
.v-footer-inner { max-width: 1200px; margin: 0 auto; padding: 18px 16px; display:flex; gap:20px; align-items:center; justify-content:center; }
.v-footer-link { color:#64d2ff; text-decoration:none; font-weight:600; }
.v-footer-link:hover { text-decoration:underline; }

/* Cart Drawer */
.v-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; z-index: 2100; }
.v-cart-overlay.show { display: block; }
.v-cart-drawer { position: fixed; right: 0; top: 0; height: 100%; width: min(420px, 100%); max-width: 100vw; background: #0f172a; color: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,0.4); transform: translateX(100%); transition: transform 0.3s ease; z-index: 2200; box-sizing: border-box; }
.v-cart-drawer.show { transform: translateX(0); }
.v-cart-header { display:flex; align-items:center; justify-content:space-between; padding: 16px; background: rgba(255,255,255,0.05); }
.v-cart-title { font-weight:800; letter-spacing:1px; }
.v-cart-close { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
.v-cart-items { flex:1; overflow:auto; }
.v-cart-item { display:grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.v-cart-item img { width:64px; height:64px; object-fit:contain; background:#0f172a; border-radius:6px; }
.v-cart-item-title { font-weight:700; }
.v-cart-item-meta { color:#cbd5e1; font-size:0.9em; margin-top:4px; }
.v-qty-controls { display:flex; align-items:center; gap:6px; margin-top:8px; }
.v-qty-btn { width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background: transparent; color:#fff; cursor:pointer; }
.v-qty-input { width:44px; text-align:center; border:1px solid rgba(255,255,255,0.2); background: transparent; color:#fff; border-radius:6px; padding:6px; }
.v-remove-btn { background: none; border: none; color: var(--velari-accent); cursor: pointer; font-size: 0.9em; margin-left: 8px; }
.v-cart-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.v-cart-total { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-weight:800; }
.v-cart-actions { display:flex; gap:10px; }
.v-btn-block { width:100%; text-align:center; }

@media (max-width: 480px) { .v-cart-drawer { width: 100vw; } }