/* ==========================================
   OPTIK KINTAMANI — Premium Optical Store
   Redesigned CSS — Blue Royal Identity
   ========================================== */

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

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --blue:        #1F23A8;
  --blue-dark:   #15197A;
  --blue-deeper: #0D1055;
  --blue-accent: #4D6BFF;
  --blue-light:  #E8EAFF;
  --blue-soft:   #F0F1FD;
  --white:       #FFFFFF;
  --gray-light:  #F5F5F7;
  --gray-mid:    #E4E4E8;
  --gray-text:   #6B6B7A;
  --ink:         #0D0E1A;
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   24px;
  --shadow-sm:   0 2px 12px rgba(31,35,168,.08);
  --shadow:      0 8px 32px rgba(31,35,168,.14);
  --shadow-lg:   0 24px 64px rgba(31,35,168,.2);
  --font-d: 'Playfair Display', serif;
  --font-b: 'Montserrat', sans-serif;
  --transition:   0.28s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
}

/* ── CUSTOM CURSOR ─────────────────────────── */
.cursor-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: width .22s, height .22s, background .22s, opacity .22s;
}
.cursor-dot.big {
  width: 38px;
  height: 38px;
  background: rgba(31,35,168,.15);
  border: 1.5px solid var(--blue);
}

/* ── HEADER ────────────────────────────────── */
header {
  background-color: rgba(255,255,255,.96);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 0 56px;
  /*transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);*/
}
header.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(31,35,168,.1), var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

/* Logo — uses brand image style */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-eye {
  width: 42px;
  height: 42px;
  background: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-eye::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,.9) 0deg 20deg,
    transparent 20deg 40deg,
    rgba(255,255,255,.9) 40deg 60deg,
    transparent 60deg 80deg,
    rgba(255,255,255,.9) 80deg 100deg,
    transparent 100deg 120deg,
    rgba(255,255,255,.9) 120deg 140deg,
    transparent 140deg 160deg,
    rgba(255,255,255,.9) 160deg 180deg,
    transparent 180deg 200deg,
    rgba(255,255,255,.9) 200deg 220deg,
    transparent 220deg 240deg,
    rgba(255,255,255,.9) 240deg 260deg,
    transparent 260deg 280deg,
    rgba(255,255,255,.9) 280deg 300deg,
    transparent 300deg 320deg,
    rgba(255,255,255,.9) 320deg 340deg,
    transparent 340deg 360deg
  );
  opacity: .35;
}
.logo-eye::after {
  content: 'K';
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .85rem;
  color: var(--white);
  z-index: 1;
}
/* Logo image (when using <img> tag instead of CSS eye icon) */
.logo-img {
  height: 42px;
  width: auto;
  max-height: 42px;
  max-width: 130px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.logo:hover .logo-img {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-name {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--blue);
  text-transform: uppercase;
}
.logo-sub {
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-text);
}
/* Original logo structure compatibility */
.logo-k {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
}
.logo-rest {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .04em;
}

nav {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-link {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-text);
  text-decoration: none;
  position: relative;
  transition: color var(--transition);
  padding-bottom: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: width var(--transition);
}
.nav-link:hover,
.nav-link.active { color: var(--blue); }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

.nav-cta {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: var(--blue);
  padding: 10px 22px;
  border-radius: 999px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.nav-cta:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(31,35,168,.3);
}

.menu-toggle { display: none; }

/* ── HERO ──────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: var(--blue-deeper);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 120px 56px 80px;
  gap: 80px;
}

/* Abstract eye-inspired background elements */
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.hero-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Radial / eye-inspired circles from logo */
.hero-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.c1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(77,107,255,.18) 0%, transparent 70%);
  top: -200px; right: -150px;
  animation: pulseCircle 8s ease-in-out infinite;
}
.c2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(31,35,168,.25) 0%, transparent 70%);
  bottom: -150px; left: -50px;
  animation: pulseCircle 10s ease-in-out infinite reverse;
}
.c3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(77,107,255,.1) 0%, transparent 70%);
  top: 30%; left: 35%;
  animation: pulseCircle 6s ease-in-out infinite;
}

/* Decorative eye arc — abstract eye shape from logo */
.hero-arc {
  position: absolute;
  width: 900px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(77,107,255,.12);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-arc-2 {
  position: absolute;
  width: 1200px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(77,107,255,.06);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@keyframes pulseCircle {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .7; }
}

.hero-content {
  position: relative;
  flex: 1;
  max-width: 560px;
  z-index: 1;
}
.hero-eyebrow {
  font-size: .68rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin-bottom: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--blue-accent);
  flex-shrink: 0;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6vw, 5.8rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 24px;
  letter-spacing: -.01em;
}
.hero-title em {
  font-style: italic;
  color: var(--blue-accent);
  font-weight: 400;
}
.hero-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 44px;
  line-height: 1.7;
  font-weight: 300;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue-accent);
  color: var(--white);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  border: none;
  cursor: none;
}
.btn-primary:hover {
  background: #3D5BEF;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(77,107,255,.4);
}
.btn-primary.light {
  background: var(--white);
  color: var(--blue);
}
.btn-primary.light:hover {
  background: var(--blue-light);
  box-shadow: 0 12px 32px rgba(255,255,255,.2);
}

.btn-ghost {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--transition);
}
.btn-ghost:hover { color: var(--white); }

/* Hero Visual — abstract optical lens */
.hero-visual {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  z-index: 1;
}
.lens-frame {
  display: flex;
  align-items: center;
  animation: floatGlasses 5s ease-in-out infinite;
}
@keyframes floatGlasses {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-16px) rotate(1.5deg); }
}
.lens {
  width: 148px;
  height: 106px;
  border: 2.5px solid rgba(77,107,255,.7);
  border-radius: 50% 50% 46% 46%;
  background: rgba(77,107,255,.07);
  box-shadow:
    inset 0 0 40px rgba(77,107,255,.1),
    0 0 60px rgba(77,107,255,.15),
    0 0 0 1px rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.lens::before {
  content: '';
  position: absolute;
  top: 12%; left: 14%;
  width: 28%; height: 22%;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  transform: rotate(-30deg);
}
/* Radial burst inside lens — like logo center */
.lens::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 22deg,
    rgba(77,107,255,.06) 22deg 28deg,
    transparent 28deg 52deg,
    rgba(77,107,255,.06) 52deg 58deg,
    transparent 58deg 82deg,
    rgba(77,107,255,.06) 82deg 88deg,
    transparent 88deg 112deg,
    rgba(77,107,255,.06) 112deg 118deg,
    transparent 118deg 142deg,
    rgba(77,107,255,.06) 142deg 148deg,
    transparent 148deg 172deg,
    rgba(77,107,255,.06) 172deg 178deg,
    transparent 178deg 202deg,
    rgba(77,107,255,.06) 202deg 208deg,
    transparent 208deg 232deg,
    rgba(77,107,255,.06) 232deg 238deg,
    transparent 238deg 262deg,
    rgba(77,107,255,.06) 262deg 268deg,
    transparent 268deg 292deg,
    rgba(77,107,255,.06) 292deg 298deg,
    transparent 298deg 322deg,
    rgba(77,107,255,.06) 322deg 328deg,
    transparent 328deg 352deg,
    rgba(77,107,255,.06) 352deg 360deg
  );
  border-radius: inherit;
}
.lens-bridge {
  width: 44px;
  height: 2px;
  background: linear-gradient(to right, rgba(77,107,255,.7), rgba(77,107,255,.4), rgba(77,107,255,.7));
  margin-top: -22px;
  flex-shrink: 0;
}
.hero-tags { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tag {
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 500;
}
.tag-1 {
  background: rgba(77,107,255,.15);
  color: #8CA4FF;
  border: 1px solid rgba(77,107,255,.3);
}
.tag-2 {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.12);
}
.tag-3 {
  background: rgba(31,35,168,.3);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(77,107,255,.2);
}

.hero-scroll {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.25);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  z-index: 1;
}
.scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(77,107,255,.7), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: .4; }
  50% { opacity: 1; }
}

/* ── MARQUEE STRIP ─────────────────────────── */
.strip {
  background: var(--blue);
  overflow: hidden;
  padding: 13px 0;
}
.strip-inner {
  display: flex;
  gap: 28px;
  white-space: nowrap;
  animation: marquee 20s linear infinite;
  width: max-content;
}
.strip-inner span {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.strip-inner .dot { color: rgba(255,255,255,.3); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── FEATURES ──────────────────────────────── */
.features {
  padding: 96px 56px;
  background: var(--gray-light);
  position: relative;
  overflow: hidden;
}
.features::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(31,35,168,.06);
  top: 50%; right: -200px;
  transform: translateY(-50%);
  pointer-events: none;
}
.features::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(31,35,168,.04);
  top: 50%; right: -100px;
  transform: translateY(-50%);
  pointer-events: none;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--gray-mid);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.feat-item {
  text-align: center;
  padding: 44px 28px;
  background: var(--white);
  transition: background var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}
.feat-item::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  background: var(--blue);
  border-radius: 2px 2px 0 0;
  transition: width var(--transition);
}
.feat-item:hover::before { width: 60%; }
.feat-item:hover { background: var(--blue-soft); }

.feat-icon {
  width: 52px; height: 52px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--blue);
  position: relative;
  transition: background var(--transition), transform var(--transition);
}
.feat-item:hover .feat-icon {
  background: var(--blue);
  color: var(--white);
  transform: scale(1.1);
}
.feat-item h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ink);
}
.feat-item p {
  font-size: .8rem;
  color: var(--gray-text);
  line-height: 1.65;
  font-weight: 300;
}

/* ── PRODUCTS ──────────────────────────────── */
.products {
  padding: 96px 56px;
  max-width: 1320px;
  margin: 0 auto;
}
.products-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-eyebrow {
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin-bottom: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--blue-accent);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
}
.section-title em {
  font-style: italic;
  color: var(--blue);
  font-weight: 400;
}
.see-all {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid var(--blue-light);
  padding: 9px 18px;
  border-radius: 999px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.see-all:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-mid);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(31,35,168,.1);
}
.card-image-wrap {
  position: relative;
  overflow: hidden;
  height: 230px;
  background: white;
}
.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.product-card:hover .card-image-wrap img { transform: scale(1); }

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,16,85,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
  backdrop-filter: blur(4px);
}
.product-card:hover .card-overlay { opacity: 1; }
.overlay-btn {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
  transform: translateY(10px);
  transition: transform .3s .05s, background var(--transition), box-shadow var(--transition);
  box-shadow: 0 0 0 0 rgba(77,107,255,0);
}
.product-card:hover .overlay-btn { transform: translateY(0); }
.overlay-btn:hover {
  background: var(--blue-accent);
  box-shadow: 0 8px 24px rgba(77,107,255,.5);
}

.card-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--blue);
  color: var(--white);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}

.card-body { padding: 20px 20px 22px; }
.card-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 14px;
  line-height: 1.2;
  color: var(--ink);
}
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price {
  font-size: .92rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -.01em;
}
.detail-link {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-text);
  text-decoration: none;
  transition: color var(--transition);
}
.detail-link:hover { color: var(--blue); }

/* ── CTA BANNER ────────────────────────────── */
.cta-banner {
  position: relative;
  overflow: hidden;
  background: var(--blue-deeper);
  padding: 110px 56px;
  text-align: center;
}
.cta-bg { position: absolute; inset: 0; pointer-events: none; }

/* Eye-arc decorative */
.cta-arc {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(77,107,255,.08);
}
.cta-arc-1 {
  width: 800px; height: 420px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.cta-arc-2 {
  width: 1100px; height: 580px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.cta-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.cc1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(77,107,255,.18) 0%, transparent 70%);
  top: -200px; left: -100px;
}
.cc2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(31,35,168,.25) 0%, transparent 70%);
  bottom: -150px; right: -50px;
}

.cta-content { position: relative; z-index: 1; }
.cta-eyebrow {
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin-bottom: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.cta-eyebrow::before,
.cta-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--blue-accent);
}
.cta-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 300;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 18px;
}
.cta-content h2 span {
  color: #8CA4FF;
  font-style: italic;
  font-weight: 400;
}
.cta-content > p {
  color: rgba(255,255,255,.45);
  font-size: .88rem;
  margin-bottom: 40px;
  font-weight: 300;
  letter-spacing: .03em;
}
.cta-content strong {
  color: #8CA4FF;
  font-weight: 500;
}

/* ── FOOTER ────────────────────────────────── */
footer {
  background: var(--blue-deeper);
  padding: 72px 56px 0;
  border-top: 1px solid rgba(77,107,255,.15);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-brand .logo { margin-bottom: 18px; }
.footer-brand .logo-name { color: var(--white); }
.footer-brand .logo-k { color: var(--white); }
.footer-brand .logo-rest { color: var(--white); }
.footer-brand p {
  font-size: .8rem;
  color: rgba(255,255,255,.38);
  line-height: 1.75;
  font-weight: 300;
}

.footer-links h4,
.footer-social h4 {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.footer-links a {
  font-size: .82rem;
  color: rgba(255,255,255,.42);
  text-decoration: none;
  transition: color var(--transition), padding-left var(--transition);
  font-weight: 300;
}
.footer-links a:hover {
  color: var(--white);
  padding-left: 6px;
}

.socials { display: flex; gap: 10px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(77,107,255,.25);
  border-radius: 50%;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
}
.social-btn:hover {
  border-color: var(--blue-accent);
  color: var(--white);
  background: rgba(77,107,255,.2);
  transform: translateY(-2px);
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom p {
  font-size: .72rem;
  color: rgba(255,255,255,.2);
  font-weight: 300;
}

/* ── REVEAL ANIMATIONS ─────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.visible,
.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── CATALOG PAGE (compatibility) ─────────── */
.cream-dark { background: var(--gray-light); }
--danger { color: #e53e3e; }

/* Catalog/search/filter reusable */
.catalog-hero,
.page-hero {
  background: var(--blue-deeper);
  padding: 140px 56px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.catalog-hero h1,
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 300;
  color: var(--white);
}
.catalog-hero p,
.page-hero p {
  color: rgba(255,255,255,.5);
  font-size: .9rem;
  margin-top: 12px;
}

/* Filter bar */
.filter-bar,
.search-bar {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}
.filter-bar input,
.filter-bar select,
.search-bar input,
.search-bar select {
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--ink);
  outline: none;
  transition: border-color var(--transition);
  background: var(--white);
}
.filter-bar input:focus,
.filter-bar select:focus,
.search-bar input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,35,168,.08);
}
.filter-bar button,
.search-bar button {
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: .78rem;
  font-weight: 600;
  cursor: none;
  letter-spacing: .06em;
  transition: background var(--transition);
}
.filter-bar button:hover,
.search-bar button:hover { background: var(--blue-dark); }

/* Product detail page */
.product-detail {
  padding: 100px 56px 72px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.product-gallery {
  position: sticky;
  top: 100px;
}
.gallery-main {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-light);
  aspect-ratio: 1;
  margin-bottom: 12px;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.gallery-main:hover img { transform: scale(1.04); }
.gallery-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 70px; height: 70px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--gray-mid);
  cursor: none;
  transition: border-color var(--transition);
}
.gallery-thumb.active,
.gallery-thumb:hover { border-color: var(--blue); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { padding-top: 8px; }
.product-info .section-eyebrow { margin-bottom: 10px; }
.product-info h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
}
.product-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 24px;
  letter-spacing: -.02em;
}
.product-description {
  font-size: .85rem;
  color: var(--gray-text);
  line-height: 1.75;
  margin-bottom: 32px;
  font-weight: 300;
}
.product-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 36px;
  font-size: .8rem;
}
.product-meta span {
  color: var(--gray-text);
}
.product-meta strong {
  color: var(--ink);
  font-weight: 600;
}
.btn-add-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-add-cart:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(31,35,168,.3);
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: var(--white);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-whatsapp:hover {
  background: #128C7E;
  transform: translateY(-2px);
}

/* Admin / table styles */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.admin-table th {
  background: var(--blue);
  color: var(--white);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 18px;
  text-align: left;
}
.admin-table td {
  padding: 14px 18px;
  font-size: .82rem;
  border-bottom: 1px solid var(--gray-mid);
  color: var(--ink);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--blue-soft); }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.badge-blue { background: var(--blue-light); color: var(--blue); }
.badge-green { background: #DCFCE7; color: #16A34A; }
.badge-red { background: #FEE2E2; color: #DC2626; }

/* Form elements */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 8px;
}
.form-control {
  width: 100%;
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31,35,168,.08);
}
textarea.form-control { resize: vertical; min-height: 100px; }

/* Alert/notification */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  margin-bottom: 16px;
  border-left: 3px solid;
}
.alert-success {
  background: #F0FDF4;
  border-color: #16A34A;
  color: #166534;
}
.alert-error {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #991B1B;
}
.alert-info {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue-dark);
}

/* Pagination */
.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 48px;
  flex-wrap: wrap;
}
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-mid);
  color: var(--gray-text);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.page-link:hover,
.page-link.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 120px 32px 72px;
    gap: 56px;
  }
  .hero-actions { justify-content: center; }
  .hero-eyebrow { justify-content: center; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .product-detail { grid-template-columns: 1fr; gap: 40px; }
  .product-gallery { position: static; }
}
@media (max-width: 768px) {
  header { padding: 0 24px; }
  nav { display: none; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: none;
  }
  .menu-toggle span {
    width: 24px; height: 1.5px;
    background: var(--blue);
    display: block;
  }
  header.scrolled .menu-toggle span { background: var(--ink); }
  .hero { padding: 100px 24px 72px; }
  .lens { width: 106px; height: 76px; }
  .features,
  .products { padding: 64px 24px; }
  .cta-banner { padding: 72px 24px; }
  footer { padding: 48px 24px 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .products-header { flex-direction: column; align-items: flex-start; }
  .product-detail { padding: 100px 24px 64px; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.8rem; }
  .product-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
}