/* ================================================================
   STARLINE MEUBEL — Custom Stylesheet
   File: public/css/style.css
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --bg: #ffffff;
  --bgAlt: #f4f5f7;
  --bgCard: #f0f2f5;
  --accent: #2B7CE9;
  --accentLight: #4A9AF5;
  --accentDark: #1B5FBF;
  --accentCyan: #2B7CE9;
  --text: #1a1f2e;
  --textMuted: #5a6278;
  --white: #FFF;
  --border: #dde1e9;
  --grey: #6b7280;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; }
::selection { background: rgba(43,124,233,.35); color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(43,124,233,.4); border-radius: 3px; }
input::placeholder, textarea::placeholder { color: var(--accentCyan); opacity: .6; }
a { text-decoration: none; color: inherit; }

/* Utility */
.blue-line { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--accentCyan), transparent); margin: 16px 0; }
.mont { font-family: 'Montserrat', sans-serif; }
.play { font-family: 'Playfair Display', serif; }
.dm { font-family: 'DM Sans', sans-serif; }
.grad-text { background: linear-gradient(135deg, var(--accent), var(--accentCyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ─── NAVIGATION ─────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: all .5s cubic-bezier(.22,1,.36,1); padding: 18px 0;
}
#nav.scrolled {
  background: rgba(255,255,255,.96); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 20px rgba(0,0,0,.08); padding: 8px 0;
}
#nav .inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
}
#nav .logo { cursor: pointer; height: 46px; object-fit: contain; transition: height .4s; }
#nav.scrolled .logo { height: 38px; }
#nav .links { display: flex; gap: 36px; align-items: center; }
.nav-link {
  background: none; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); transition: color .3s; position: relative; padding: 6px 0;
  text-decoration: none;
}
.nav-link:hover, .nav-link.active { color: var(--accent); }
.nav-link.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accentCyan)); border-radius: 1px;
}
.my-starline-btn {
  background: linear-gradient(135deg, var(--accent), var(--accentDark));
  color: #fff; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; padding: 10px 22px;
  border-radius: 3px; transition: all .3s; margin-left: 8px;
  display: flex; align-items: center; gap: 8px; text-decoration: none;
}
.my-starline-btn:hover { box-shadow: 0 4px 20px rgba(43,124,233,.35); transform: translateY(-1px); }

/* ─── SOCIAL SIDEBAR ─────────────────────────────────── */
.social-sidebar {
  position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: 8px;
}
.social-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(43,124,233,.22); backdrop-filter: blur(8px);
  border: 1px solid rgba(92,184,228,.45); border-radius: 8px;
  padding: 14px 10px; cursor: pointer; text-decoration: none;
  writing-mode: vertical-lr; transform: rotate(180deg); transition: all .3s;
}
.social-btn:hover { background: rgba(43,124,233,.40); border-color: rgba(92,184,228,.8); }
.social-btn span {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .15em; color: var(--text); text-transform: uppercase;
}

/* ─── HERO ───────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; display: flex;
  align-items: center; overflow: hidden; background: var(--bg);
}
.hero-bg {
  position: absolute; inset: 0;
  background: url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=1600&h=900&fit=crop') center/cover;
  opacity: .2; filter: saturate(.3) brightness(.7);
}
.hero-glow1 {
  position: absolute; top: -20%; right: -10%; width: 700px; height: 700px;
  border-radius: 50%; background: radial-gradient(circle, rgba(43,124,233,.08), transparent 70%);
}
.hero-glow2 {
  position: absolute; bottom: -10%; left: -5%; width: 500px; height: 500px;
  border-radius: 50%; background: radial-gradient(circle, rgba(92,184,228,.06), transparent 70%);
}
.hero-grad { position: absolute; inset: 0; background: linear-gradient(160deg, var(--bg) 20%, transparent 60%); }
.hero-gradb { position: absolute; bottom: 0; left: 0; right: 0; height: 25%; background: linear-gradient(to top, var(--bg), transparent); }
.hero-content {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 160px 40px 80px; animation: fadeUp 1.2s cubic-bezier(.22,1,.36,1);
}
.hero h1 {
  font-family: 'Playfair Display', serif; font-size: clamp(42px, 6vw, 78px);
  font-weight: 400; color: var(--text); line-height: 1.08; max-width: 720px;
}
.hero-btn {
  display: inline-block; cursor: pointer; font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 16px 36px; transition: all .3s; border-radius: 2px; border: none; text-decoration: none;
}
.hero-btn.primary { background: linear-gradient(135deg, var(--accent), var(--accentDark)); color: #fff; }
.hero-btn.primary:hover { box-shadow: 0 8px 30px rgba(43,124,233,.35); transform: translateY(-2px); }
.hero-btn.secondary { background: transparent; color: var(--accentCyan); border: 1px solid rgba(43,124,233,.3); }
.hero-btn.secondary:hover { background: rgba(43,124,233,.08); border-color: var(--accent); transform: translateY(-2px); }
.scroll-ind {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .4;
}

/* ─── STATS ──────────────────────────────────────────── */
.partners {
  background: var(--bgAlt); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 44px 0; overflow: hidden;
}
.marquee-wrapper {
  position: relative; overflow: hidden;
}
.marquee-wrapper::before, .marquee-wrapper::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee-wrapper::before { left: 0; background: linear-gradient(to right, var(--bgAlt), transparent); }
.marquee-wrapper::after  { right: 0; background: linear-gradient(to left,  var(--bgAlt), transparent); }
.marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 28s linear infinite;
  will-change: transform; transform: translateZ(0);
}
.marquee-track .brand {
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500;
  font-style: normal; color: var(--text); white-space: nowrap; padding: 0 36px;
  text-decoration: none; transition: color .2s; letter-spacing: .08em;
}
.marquee-track .brand:hover { color: var(--accent); }
.marquee-track .sep {
  color: var(--accent); font-size: 10px; flex-shrink: 0;
}
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── FEATURED ───────────────────────────────────────── */
.featured { background: var(--bg); padding: 100px 40px; }
.featured .inner { max-width: 1280px; margin: 0 auto; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cat-card {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 16/10; border-radius: 3px; border: 1px solid var(--border); display: block;
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.cat-card:hover img { transform: scale(1.05); }
.cat-card .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,.92), rgba(8,8,8,.3) 50%, transparent); }
.cat-card .hover-ov { position: absolute; inset: 0; background: rgba(43,124,233,.1); opacity: 0; transition: opacity .5s; }
.cat-card:hover .hover-ov { opacity: 1; }
.cat-card .info { position: absolute; bottom: 36px; left: 36px; right: 36px; }

/* ─── COLLECTION (Banken / Bedden) ───────────────────── */
.collection { background: var(--bg); padding-top: 140px; padding-bottom: 100px; }
.collection .inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card {
  background: var(--bgCard); overflow: hidden; border-radius: 3px;
  border: 1px solid var(--border); transition: all .4s;
  animation: fadeUp .8s cubic-bezier(.22,1,.36,1) both;
}
.product-card:nth-child(2) { animation-delay: .08s; }
.product-card:nth-child(3) { animation-delay: .16s; }
.product-card:nth-child(4) { animation-delay: .24s; }
.product-card:nth-child(5) { animation-delay: .32s; }
.product-card:nth-child(6) { animation-delay: .4s; }
.product-card:hover { border-color: rgba(43,124,233,.3); box-shadow: 0 12px 40px rgba(43,124,233,.1); }
.product-card img { width: 100%; aspect-ratio: 6/5; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.product-card:hover img { transform: scale(1.05); }
.product-card .card-body { padding: 22px 24px 26px; }
.product-card .more {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .2em; color: var(--accent); text-transform: uppercase;
  opacity: .5; transition: opacity .3s; margin-top: 14px;
}
.product-card:hover .more { opacity: 1; }

/* ─── OVER ONS ───────────────────────────────────────── */
.overons { background: var(--bg); padding-top: 140px; padding-bottom: 100px; }
.overons .inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.overons .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.overons .img-wrap { position: relative; }
.overons .img-wrap img { width: 100%; height: 500px; object-fit: cover; border-radius: 3px; }
.overons .deco1 { position: absolute; bottom: -16px; right: -16px; width: 180px; height: 180px; border: 1px solid rgba(43,124,233,.15); border-radius: 3px; }
.overons .deco2 { position: absolute; top: -16px; left: -16px; width: 100px; height: 100px; border: 1px solid rgba(92,184,228,.12); border-radius: 3px; }
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.value-card { padding: 16px 18px; background: var(--bgCard); border: 1px solid var(--border); border-radius: 3px; }

/* ─── CONTACT ────────────────────────────────────────── */
.contact { background: var(--bg); padding-top: 140px; padding-bottom: 100px; }
.contact .inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.contact .grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; }
.contact input, .contact textarea {
  width: 100%; background: var(--bgCard); border: 1px solid var(--border);
  color: var(--text); padding: 14px 18px; font-size: 15px;
  font-family: 'DM Sans', sans-serif; outline: none; border-radius: 3px;
  box-sizing: border-box; transition: border-color .3s;
}
.contact input:focus, .contact textarea:focus { border-color: var(--accent); }
.contact textarea { min-height: 150px; resize: vertical; }
.contact label {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .2em; color: var(--text); text-transform: uppercase;
  display: block; margin-bottom: 8px;
}
.submit-btn {
  background: linear-gradient(135deg, var(--accent), var(--accentDark));
  color: #fff; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; padding: 16px 36px;
  border-radius: 3px; transition: all .3s;
}
.submit-btn:hover { box-shadow: 0 8px 30px rgba(43,124,233,.3); transform: translateY(-2px); }
.quote-box {
  margin-top: 32px; padding: 24px; background: var(--bgCard);
  border: 1px solid var(--border); border-radius: 3px; border-left: 3px solid var(--accent);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ─── FOOTER ─────────────────────────────────────────── */
footer { background: var(--bgAlt); border-top: 1px solid var(--border); padding: 56px 40px 36px; }
footer .inner { max-width: 1280px; margin: 0 auto; }
footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; margin-bottom: 44px; }
footer .bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; }
footer a {
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
  transition: color .3s; display: block; margin-bottom: 10px; text-decoration: none;
}
footer a:hover { color: var(--accent); }

/* ─── SHARED ─────────────────────────────────────────── */
.section-header { text-align: center; margin-bottom: 72px; animation: fadeUp .8s cubic-bezier(.22,1,.36,1); }
.upload-notice { margin-top: 56px; padding: 36px; text-align: center; border: 1px dashed var(--border); border-radius: 3px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── HAMBURGER ───────────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 6px; z-index: 1100;
}
.hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: all .3s cubic-bezier(.22,1,.36,1);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── RESPONSIVE: TABLET (≤1024px) ───────────────────── */
@media (max-width: 1024px) {
  #nav .inner { padding: 0 24px; }
  #nav .links { gap: 20px; }

  footer { padding: 48px 24px 32px; }
  footer .grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  footer .grid > div:first-child { grid-column: 1 / -1; }

  .hero-content { padding: 140px 24px 80px; }
  .featured { padding: 80px 24px; }
  .collection .inner, .overons .inner, .contact .inner { padding: 0 24px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── RESPONSIVE: MOBILE (≤768px) ────────────────────── */
@media (max-width: 768px) {
  /* Hamburger visible */
  .hamburger { display: flex; }

  /* Mobile nav overlay */
  #nav .links {
    display: none;
    position: fixed; top: 0; left: 0; right: 0;
    background: rgba(255,255,255,.97); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    flex-direction: column; align-items: center;
    padding: 80px 20px 32px;
    gap: 20px; z-index: 1050;
  }
  #nav.nav-open .links { display: flex; }
  #nav.nav-open .links .nav-link { font-size: 15px; letter-spacing: .22em; }
  #nav.nav-open .links .my-starline-btn { font-size: 12px; padding: 12px 28px; margin-top: 4px; }

  /* Social sidebar hidden on mobile */
  .social-sidebar { display: none; }

  /* Nav inner + logo */
  #nav .inner { padding: 0 20px; }
  #nav .logo { height: 34px; }
  #nav.scrolled .logo { height: 28px; }

  /* Hero */
  .hero-content { padding: 110px 20px 60px; }
  .hero h1 { font-size: clamp(34px, 9vw, 56px); }

  /* Featured */
  .featured { padding: 60px 20px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card .info { bottom: 24px; left: 24px; right: 24px; }

  /* Footer */
  footer { padding: 40px 20px 28px; }
  footer .grid { grid-template-columns: 1fr; gap: 32px; }
  footer .grid > div:first-child { grid-column: auto; }
  footer .bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* Inner pages */
  .collection { padding-top: 110px; }
  .collection .inner { padding: 0 20px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }

  .overons { padding-top: 110px; }
  .overons .inner { padding: 0 20px; }
  .overons .grid { grid-template-columns: 1fr; gap: 40px; }
  .overons .img-wrap img { height: 300px; }
  .value-grid { grid-template-columns: 1fr; }

  .contact { padding-top: 110px; }
  .contact .inner { padding: 0 20px; }
  .contact .grid { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
}

/* ─── RESPONSIVE: SMALL MOBILE (≤480px) ──────────────── */
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .section-header { margin-bottom: 48px; }
  .cat-card { aspect-ratio: 4/3; }
}