:root{
  --ink:#0b0f19;
  --paper:#fbfbfd;
  --soft:#f1f3f7;
  --line:#e4e7ee;
  --accent:#0a4cff;
  --accent2:#ff2d55;
  --muted:#5b6578;
  --shadow: 0 12px 30px rgba(11,15,25,.10);
  --radius: 18px;
  --max: 1120px;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(10,76,255,.08), transparent 60%),
              radial-gradient(900px 500px at 5% 20%, rgba(255,45,85,.06), transparent 55%),
              var(--paper);
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
.container{ max-width:var(--max); margin:0 auto; padding: 0 18px; }

.topbar{
  border-bottom:1px solid var(--line);
  background: rgba(251,251,253,.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top:0;
  z-index:50;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 0;
}
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand .name{
  font-family: "Playfair Display", Georgia, serif;
  font-weight:700;
  letter-spacing:.2px;
  font-size: 18px;
}
.brand .sub{
  color:var(--muted);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.nav{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav a:hover{
  color: var(--ink);
  border-color: var(--line);
  background: rgba(241,243,247,.7);
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 6px 18px rgba(11,15,25,.06);
  font-size: 13px;
  color: var(--ink);
  font-weight:600;
}
.pill .dot{ width:10px; height:10px; border-radius:999px; background: var(--accent2); }

.hero{ padding: 34px 0 10px; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:stretch;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero-card{
  background: white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  position:relative;
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute;
  inset:-120px -120px auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(10,76,255,.22), transparent 60%);
  transform: rotate(18deg);
}
.hero h1{
  font-family: "Playfair Display", Georgia, serif;
  margin: 0 0 10px;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height:1.05;
  letter-spacing: .2px;
  position:relative;
}
.lede{
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 16px;
  position:relative;
  max-width: 60ch;
}
.cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  font-weight:700;
  font-size: 13px;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(11,15,25,.10); }
.btn.primary{
  background: linear-gradient(135deg, var(--accent), #0033cc);
  color: white;
  border-color: transparent;
}
.btn.secondary{ background: rgba(241,243,247,.9); }

.mini{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  position:relative;
}
@media (max-width: 520px){ .mini{ grid-template-columns: 1fr; } }
.mini .info{
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(251,251,253,.85);
}
.k{ font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing:.08em; }
.v{ font-size: 13px; font-weight:700; margin-top:4px; }

.specials{
  background: linear-gradient(180deg, rgba(255,45,85,.12), rgba(10,76,255,.08));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.specials h2{ margin: 0 0 8px; font-size: 16px; letter-spacing:.02em; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight:700;
}
.special{
  margin-top: 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.special .title{ font-weight:800; font-size: 13px; }
.special .desc{ color: var(--muted); font-size: 13px; margin-top:4px; }
.price{
  margin-top: 10px;
  display:flex;
  gap:10px;
  align-items:baseline;
  flex-wrap:wrap;
}
.price .big{ font-size: 22px; font-weight:900; letter-spacing:.2px; }
.price .small{ color: var(--muted); font-size: 12px; }

.section{ padding: 26px 0; }
.section h3{
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing:.10em;
  text-transform: uppercase;
}

.slider{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.slides{
  display:flex;
  width:100%;
  transform: translateX(0);
  transition: transform 500ms ease;
}
.slide{ min-width: 100%; height: 320px; background: var(--soft); }
@media (max-width: 520px){ .slide{ height: 240px; } }
.slide img{ width:100%; height:100%; object-fit: cover; display:block; filter: contrast(1.02) saturate(1.03); }
.slider-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  border-top:1px solid var(--line);
  background: rgba(251,251,253,.85);
}
.dots{ display:flex; gap:8px; align-items:center; }
.dot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(91,101,120,.35);
  border: 1px solid rgba(91,101,120,.25);
  cursor:pointer;
}
.dot.active{ background: var(--accent); border-color: rgba(10,76,255,.35); }

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items:stretch;
}
@media (max-width: 900px){ .grid2{ grid-template-columns: 1fr; } }

.card{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card h2{ margin:0 0 10px; font-size: 16px; }

.list{ display:grid; gap:10px; margin-top: 12px; }
.list .item{
  display:flex;
  gap:12px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(241,243,247,.65);
  border: 1px solid rgba(228,231,238,.8);
}
.icon{
  width: 36px; height: 36px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,76,255,.10);
  border: 1px solid rgba(10,76,255,.18);
  flex: 0 0 auto;
  font-weight:900;
  color: var(--accent);
}
.item .text .t{ font-weight:800; font-size: 13px; }
.item .text .d{ color: var(--muted); font-size: 13px; margin-top:2px; }

.products{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px){ .products{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .products{ grid-template-columns: 1fr; } }

.product{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: white;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.product .brandline{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.tag{
  font-size: 11px;
  font-weight:800;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,45,85,.10);
  border:1px solid rgba(255,45,85,.18);
  color: #b30024;
}
.product .name{ font-weight:900; }
.product .detail{ color: var(--muted); font-size: 12px; }
.product .buyrow{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; }
.product .price{ display:block; margin:0; }
.product .price .big{ font-size: 16px; }

.smallbtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(10,76,255,.08);
  color: var(--accent);
  font-weight:900;
  font-size: 12px;
  cursor:pointer;
}
.smallbtn:hover{ background: rgba(10,76,255,.12); }

footer{
  padding: 26px 0 92px;
  color: var(--muted);
  border-top:1px solid var(--line);
  background: rgba(251,251,253,.85);
}
footer .footgrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 900px){ footer .footgrid{ grid-template-columns: 1fr; } }
.fine{ font-size: 12px; }
.hours{
  margin-top: 14px;
  border:1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px 10px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.hours-list{
  list-style:none;
  padding:0;
  margin:10px 0 0;
  display:grid;
  gap:8px;
}
.hours-list li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color: rgba(255,255,255,.9);
}
.hours-list li span:first-child{
  opacity:.85;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}
.hours-list li span:last-child{
  font-weight:600;
}

.float-wrap{
  position:fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:60;
}
.float{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 14px 26px rgba(11,15,25,.18);
  border:1px solid rgba(255,255,255,.55);
  cursor:pointer;
  user-select:none;
}
.float.call{
  background: linear-gradient(135deg, var(--accent), #0033cc);
  color:white;
}
.float.wa{
  background: linear-gradient(135deg, #25D366, #1aa84f);
  color:white;
}
.float span{ font-weight: 900; font-size: 16px; }
.float-label{
  position:absolute;
  right: 64px;
  background: white;
  border:1px solid var(--line);
  box-shadow: 0 12px 24px rgba(11,15,25,.10);
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 12px;
  font-weight:800;
  opacity:0;
  transform: translateY(4px);
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  white-space:nowrap;
}
.float:hover + .float-label{
  opacity:1;
  transform: translateY(0);
}



/* Forms */
.form input, .form textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: white;
  font: inherit;
  outline: none;
}
.form input:focus, .form textarea:focus{
  border-color: rgba(10,76,255,.45);
  box-shadow: 0 0 0 4px rgba(10,76,255,.10);
}
.formgrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 700px){ .formgrid{ grid-template-columns: 1fr; } }

/* Modals */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:200;
}
.modal.open{ display:block; }
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,15,25,.55);
  backdrop-filter: blur(4px);
}
.modal-card{
  position:relative;
  max-width: 720px;
  margin: 6vh auto;
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 18px 60px rgba(11,15,25,.30);
  overflow:hidden;
}
@media (max-width: 760px){
  .modal-card{ margin: 3vh 14px; }
}
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(251,251,253,.9);
}
.modal-body{ padding: 16px; }
.iconbtn{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: white;
  cursor:pointer;
  font-weight:900;
}
.checkout-grid{
  display:grid;
  gap:12px;
  margin-top: 12px;
}
.checkout-item{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(241,243,247,.55);
}



/* ===== Fancy NYC Theme Upgrade ===== */
body{
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(255,45,85,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 5%, rgba(10,76,255,.18), transparent 55%),
    radial-gradient(700px 420px at 70% 65%, rgba(0,195,137,.10), transparent 55%),
    linear-gradient(180deg, #070a12 0%, #0b1020 16%, #0c1224 30%, #fbfbfd 55%, #fbfbfd 100%);
}
.topbar{
  background: rgba(9,12,22,.72);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.brand .name{ color: white; }
.brand .sub{ color: rgba(255,255,255,.72); }
.nav a{ color: rgba(255,255,255,.78); }
.nav a:hover{ color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.pill{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  color: white;
}
.hero-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.hero-card:before{
  background: radial-gradient(circle at 30% 30%, rgba(10,76,255,.35), transparent 60%);
}
.hero h1{ color:white; }
.lede{ color: rgba(255,255,255,.78); }
.mini .info{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.k{ color: rgba(255,255,255,.70); }
.v{ color: white; }
.specials{
  background: linear-gradient(180deg, rgba(255,45,85,.18), rgba(10,76,255,.14));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.badge{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
  color: white;
}
.special{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}
.special .desc{ color: rgba(255,255,255,.78); }
.price .small{ color: rgba(255,255,255,.70); }
.section h3{ color: rgba(11,15,25,.80); }
.slider{
  border-color: rgba(11,15,25,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
}
/* Upgrade cards & shop */
.card{
  border-color: rgba(11,15,25,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.12);
}
#shop.card{
  position:relative;
  overflow:hidden;
}
#shop.card:before{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle at 30% 30%, rgba(255,45,85,.16), transparent 60%);
  transform: rotate(12deg);
  pointer-events:none;
}
.products{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.product{
  border-color: rgba(11,15,25,.10);
  box-shadow: 0 12px 30px rgba(11,15,25,.10);
  overflow:hidden;
}
.product .thumb{
  height: 150px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(11,15,25,.10);
  background: rgba(241,243,247,.85);
}
.product .thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.product .name{ font-size: 16px; }
.smallbtn{
  background: linear-gradient(135deg, rgba(10,76,255,.16), rgba(255,45,85,.10));
  border-color: rgba(11,15,25,.10);
}
.smallbtn:hover{
  background: linear-gradient(135deg, rgba(10,76,255,.22), rgba(255,45,85,.16));
}
/* Logo strips */
.logo-strip{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:14px;
}
.logo-pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,15,25,.10);
  background: rgba(241,243,247,.65);
}
.logo-pill img, .logo-pill svg{ width: 92px; height: auto; display:block; }
.logo-pill .fine{ margin:0; }
/* Financing tiles */
.fin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 900px){ .fin-grid{ grid-template-columns: 1fr; } }
.fin-tile{
  border:1px solid rgba(11,15,25,.10);
  border-radius: 18px;
  background: white;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(11,15,25,.12);
}
.fin-tile .head{
  padding: 16px;
  background: linear-gradient(135deg, rgba(10,76,255,.10), rgba(255,45,85,.08));
  border-bottom: 1px solid rgba(11,15,25,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.fin-tile .head img{ width: 120px; height: auto; }
.fin-tile .body{ padding: 16px; }
.fin-tile ul{ margin:10px 0 0 18px; color: var(--muted); font-size: 13px; }



/* ===== March Specials Standout ===== */
.marquee{
  position: sticky;
  top: 64px;
  z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(10,76,255,.22), rgba(255,45,85,.18), rgba(0,195,137,.14));
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.marquee-track{
  display:flex;
  gap: 22px;
  padding: 10px 0;
  align-items:center;
  white-space:nowrap;
  animation: marqueeMove 18s linear infinite;
}
.marquee-item{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: white;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(9,12,22,.35);
  border: 1px solid rgba(255,255,255,.14);
}
@keyframes marqueeMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
/* duplicate track effect by repeating items via CSS (simple) */
.marquee-track:after{
  content: " ★ March Special: Ray‑Ban Savings All Month ★ March Special: LASIK Laser Vision Correction — $2,599.99 per eye ★ Financing Available • Affirm + HFA Financial ★ Insurance Accepted • Humana • VSP Vision • Anthem • Fidelis Care ★ Call Now: (315) 527‑2911";
  color: white;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-left: 22px;
}

/* Specials glow and emphasis */
.specials-standout{
  box-shadow:
    0 18px 70px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 8px rgba(255,45,85,.10),
    0 0 0 14px rgba(10,76,255,.08);
}
.specials-standout h2{
  color: white;
  font-size: 18px;
}
.specials-standout .special .title{
  color: white;
  font-size: 14px;
}
.specials-standout .special .desc{ color: rgba(255,255,255,.80); }
.specials-standout .price .big{
  font-size: 26px;
  text-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.specials-standout .badge{
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.specials-standout .special{
  position:relative;
  overflow:hidden;
}
.specials-standout .special:before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
  transform: rotate(12deg);
}



/* Specials text color fixes */
.specials-standout .price .big{ color: white !important; }
.specials-standout .special .desc{ color: rgba(255,255,255,.86) !important; }
.specials-standout .special .title{ color: white !important; }
.specials-standout .special .price .small{ color: rgba(255,255,255,.78) !important; }
.specials-standout .pricepill, .specials-standout .badge{ color: white; }



/* ===== Luxury depth + motion ===== */
:root{
  --gold: #d7b46a;
}
/* subtle animated grain overlay */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.05), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,.03), transparent 40%);
  mix-blend-mode: overlay;
  opacity:.55;
  animation: floatGlow 10s ease-in-out infinite alternate;
}
@keyframes floatGlow{
  0%{ transform: translateY(0px); }
  100%{ transform: translateY(-10px); }
}

/* section dividers */
.section{
  position:relative;
}
.section:before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(10,76,255,.25), rgba(255,45,85,.22), transparent);
}

/* Premium shop grid tweaks */
.products{
  gap: 14px;
}
.product{
  transition: transform .12s ease, box-shadow .12s ease;
}
.product:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(11,15,25,.14);
}
.product .thumb{
  position:relative;
}
.product .thumb:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.22) 100%);
}

/* Brand ticker */
.ticker{
  margin: 18px 0 0;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(11,15,25,.10);
  background: rgba(255,255,255,.70);
}
.ticker-track{
  display:flex;
  gap: 14px;
  padding: 10px 0;
  align-items:center;
  white-space: nowrap;
  animation: tickerMove 16s linear infinite;
}
@keyframes tickerMove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.ticker-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,15,25,.10);
  background: rgba(241,243,247,.75);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ticker-pill img{
  width: 78px;
  height: auto;
}


.slides{ will-change: transform; }



/* ===== Charcoal + Subtle Gold Premium Refresh ===== */
body{
  background: var(--charcoal);
}
.hero2{
  position:relative;
  padding: 92px 0 36px;
  overflow:hidden;
}
.hero2-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.04);
}
.hero2-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(800px 500px at 20% 25%, rgba(198,169,95,.10), transparent 60%),
              radial-gradient(800px 500px at 80% 10%, rgba(10,76,255,.16), transparent 60%),
              linear-gradient(180deg, rgba(15,17,21,.88), rgba(15,17,21,.74), rgba(15,17,21,.92));
}
.hero2-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .hero2-inner{ grid-template-columns: 1fr; }
}
.hero2-kicker{
  color: rgba(255,255,255,.78);
  letter-spacing:.12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
}
.hero2 h1{
  font-family: "Playfair Display", Georgia, serif;
  color: white;
  font-size: 48px;
  line-height: 1.02;
  margin: 10px 0 10px;
}
@media (max-width: 520px){
  .hero2 h1{ font-size: 38px; }
}
.hero2 .lede{
  color: rgba(255,255,255,.82);
  max-width: 52ch;
}
.hero2-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.hero2-meta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 520px){
  .hero2-meta{ grid-template-columns: 1fr; }
}
.meta-card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 12px 12px;
  backdrop-filter: blur(10px);
}
.hero2-badge{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  border-radius: 22px;
  padding: 14px 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
}
.badge-title{
  font-weight: 900;
  color: white;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 12px;
}
.badge-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(198,169,95,.35);
  background: rgba(198,169,95,.10);
  color: white;
  font-weight: 800;
  font-size: 12px;
}
/* tiles */
.tiles{
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.tile{
  position:relative;
  display:block;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tile-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(15,17,21,.78), rgba(15,17,21,.50) 55%, rgba(15,17,21,.78));
}
.tile-inner{
  position:relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height: 100%;
}
.tile-title{
  color:white;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  line-height:1.08;
}
.tile-title:after{
  content:"";
  display:block;
  width: 72px;
  height: 2px;
  background: rgba(198,169,95,.85);
  margin-top: 10px;
}
.tile-sub{
  margin-top: 10px;
  color: rgba(255,255,255,.78);
  letter-spacing:.12em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
}
@media (min-width: 900px){
  .tile:hover{ transform: translateY(-1px); }
  .tile{ transition: transform .12s ease; }
}

/* content split card */
.card.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0;
  overflow:hidden;
}
@media (max-width: 980px){ .card.split{ grid-template-columns: 1fr; } }
.split-side{
  min-height: 260px;
  background-size: cover;
  background-position: center;
  filter: contrast(1.05) saturate(1.05);
}

/* brand wall */
.brand-wall{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){ .brand-wall{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brand-tile{
  border: 1px solid rgba(11,15,25,.10);
  background: rgba(241,243,247,.70);
  border-radius: 16px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 92px;
  box-shadow: 0 14px 28px rgba(11,15,25,.10);
}
.brand-tile img{ width: 100%; height: auto; max-width: 220px; }

/* lenses */
.lens-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){ .lens-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .lens-grid{ grid-template-columns: 1fr; } }
.lens-card{
  border: 1px solid rgba(11,15,25,.10);
  border-radius: 18px;
  background: white;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(11,15,25,.10);
}
.split2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){ .split2{ grid-template-columns: 1fr; } }
.bullets{ margin: 10px 0 0 18px; color: var(--muted); font-size: 13px; }

/* footer */
.footer{
  background: #0d0f13;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 38px 0 62px;
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr; } }
.foot-brand{ color: white; font-weight: 900; font-size: 18px; }
.foot-title{ color: rgba(255,255,255,.86); font-weight: 900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
.hours div{ display:flex; justify-content:space-between; gap:10px; border-bottom: 1px dashed rgba(255,255,255,.12); padding: 8px 0; color: rgba(255,255,255,.78); font-size: 13px; }
.hours div span:first-child{ font-weight: 900; color: rgba(255,255,255,.86); }

/* floating buttons */
.float{
  position: fixed;
  right: 16px;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  z-index: 60;
}
.float span{ font-size: 12px; color: white; }
.float.whatsapp{ bottom: 86px; background: rgba(0,195,137,.22); }
.float.call{ bottom: 22px; background: rgba(198,169,95,.22); }

/* Make slider always animate */
.slides{ transition: transform 700ms ease; }

/* Technology section */
.tech-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 900px){
  .tech-grid{grid-template-columns:1fr;}
}
.tech-card{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.tech-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.tech-body{padding:14px 14px 18px;}
.tech-body h3{margin:0 0 6px; font-size:18px;}