:root {
  --base: #1B2A41;
  --base-deep: #121d2e;
  --base-light: #26395a;
  --muga: #B8862E;
  --muga-light: #d4a14e;
  --paat: #4E6E58;
  --paat-light: #83a58c;
  --eri: #8A7A65;
  --eri-light: #b8aa98;
  --tasar: #8A5A44;
  --tasar-light: #b47a62;
  --cream: #f4ecd8;
  --paper: #e9e0c9;
  --accent: var(--muga);
  --accent-light: var(--muga-light);
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', sans-serif;
  background: var(--base);
  color: var(--cream);
  overflow-x: hidden;
}

.font-display { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144; }
.font-display-tight { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144; letter-spacing: 0; }

.silk-noise {
  background-image:
    radial-gradient(ellipse at top left, rgba(184,134,46,0.07), transparent 46%),
    radial-gradient(ellipse at bottom right, rgba(78,110,88,0.06), transparent 48%),
    repeating-linear-gradient(45deg, transparent 0 3px, rgba(244,236,216,0.012) 3px 4px);
}
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nav-blur { backdrop-filter: blur(18px) saturate(160%); background: rgba(18,29,46,0.82); }
.ulink { position: relative; }
.ulink::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; background: var(--accent); transition: width .35s ease; }
.ulink:hover::after { width: 100%; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

.btn-fill { background: var(--accent); color: var(--base-deep); transition: all .35s; position: relative; overflow: hidden; }
.btn-fill::before { content: ''; position: absolute; inset: 0; background: var(--cream); transform: translateY(101%); transition: transform .42s cubic-bezier(.65,0,.35,1); }
.btn-fill:hover::before { transform: translateY(0); }
.btn-fill span { position: relative; z-index: 1; }

.btn-outline { border: 1px solid rgba(244,236,216,.35); color: var(--cream); transition: all .35s; position: relative; overflow: hidden; }
.btn-outline::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .42s cubic-bezier(.65,0,.35,1); }
.btn-outline:hover { border-color: var(--accent); color: var(--base-deep); }
.btn-outline:hover::before { transform: translateY(0); }
.btn-outline span { position: relative; z-index: 1; }

.lift { transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .35s, background .35s; }
.lift:hover { transform: translateY(-6px); border-color: rgba(184,134,46,.5); }

.swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(244,236,216,.25); }

.theme-muga { --accent: #B8862E; --accent-light: #d4a14e; }
.theme-paat { --accent: #4E6E58; --accent-light: #83a58c; }
.theme-eri { --accent: #8A7A65; --accent-light: #b8aa98; }
.theme-tasar { --accent: #8A5A44; --accent-light: #b47a62; }

.product-frame { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(18,29,46,.7); }
.product-visual {
  min-height: 320px;
  background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent-light) 45%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #121d2e), #121d2e 62%);
}
.thread-card {
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 30%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #121d2e), #121d2e 64%);
}
.thread-lines { position: absolute; inset: 0; opacity: .32; background-image: repeating-linear-gradient(110deg, transparent 0 12px, rgba(244,236,216,.18) 13px, transparent 15px); transform: scale(1.12); }

@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee-track { animation: marquee 38s linear infinite; }

.field { background: transparent; border: none; border-bottom: 1px solid rgba(244,236,216,.22); padding: 14px 0; color: var(--cream); width: 100%; transition: border-color .3s; }
.field:focus { outline: none; border-bottom-color: var(--accent); }
.field::placeholder { color: rgba(244,236,216,.42); }

.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .74; filter: saturate(1.08) contrast(1.06); }
.hero-video-wrapper { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.hero-video-wrapper video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .74; filter: saturate(1.08) contrast(1.06); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,29,46,.94), rgba(18,29,46,.72) 46%, rgba(18,29,46,.35)), linear-gradient(0deg, var(--base) 0%, transparent 32%); }

.mobile-panel { display: none; }
.spec-row { display: grid; grid-template-columns: minmax(9rem, .7fr) 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }

@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  .mobile-panel { display: block; }
}
@media (max-width: 768px) {
  .hero-video, .hero-video-wrapper video { opacity: .54; }
  .hero-overlay { background: linear-gradient(0deg, rgba(18,29,46,.96), rgba(18,29,46,.74)); }
  .spec-row { grid-template-columns: 1fr; gap: .3rem; }
}