/* ============================================================
   SHARED — Common styles for all pages (vars, navbar, footer, buttons, utilities)
   ============================================================ */

/* ============================================================
   SHREE LENSNOOK OPTOTECH — Based on TemplateMo 545 Finance Business
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
  /* --primary:    #131318;
  --primary-dk: #000000;  */
  --primary:    #131318; 
  --primary-dk: #000000; 
  --accent:     #ffe300;
  --accent2:    #ffe300;
  --teal:       #2eaaa0;
  --teal-lt:    #3dc8bc;
  --light-bg:   #f4f7fc;
  --light-bg2:  #eaf0f8;
  --white:      #ffffff;
  /* --dark:       #000000;
  --text:       #555e6d; */
  --dark:       #000000;
  --text:       #131318;
  /* --text-lt:    #8a95a3;3c3a3a */
  --text-lt:    #3c3a3a;
  --border:     #dde3eb;
  --shadow:     0 4px 24px rgba(30,58,95,0.10);
  --shadow-lg:  0 12px 40px rgba(30,58,95,0.18);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Open Sans',sans-serif; color:var(--text); background:var(--white); overflow-x:hidden; }
a { text-decoration:none; color:inherit; transition:color 0.3s; }
img { max-width:100%; }

/* ---- TOP BAR ---- */
.top-bar {
  background: var(--primary-dk);
  padding: 8px 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
}
.top-bar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.top-bar a { color:rgba(255,255,255,0.75); }
.top-bar a:hover { color: var(--accent); }
.top-bar-items { display:flex; gap:2rem; }
.top-bar-items span { display:flex; align-items:center; gap:0.4rem; }

/* ---- NAVBAR ---- */
.navbar {
  background: var(--white);
  border-bottom: 3px solid var(--accent);
  position: sticky; top: 0; z-index: 999;
  box-shadow: var(--shadow);
}
.navbar .container { display:flex; align-items:center; justify-content:space-between; padding:0 1rem; }
.navbar-brand {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 14px 0;
}
.brand-logo-icon {
  width: 46px; height: 46px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-family:'Raleway',sans-serif; font-size:1.3rem; font-weight:900;
}
.brand-text { line-height:1.15; }
.brand-text .brand-main { font-family:'Raleway',sans-serif; font-size:1.15rem; font-weight:800; color:var(--primary); letter-spacing:0.5px; }
.brand-text .brand-sub { font-size:0.68rem; color:var(--teal); font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.nav-menu { display:flex; align-items:center; list-style:none; gap:0.25rem; }
.nav-menu li a {
  display:block; padding:22px 16px;
  font-family:'Raleway',sans-serif; font-size:0.88rem; font-weight:700;
  color:var(--text); text-transform:uppercase; letter-spacing:0.8px;
  border-bottom: 3px solid transparent; margin-bottom:-3px;
  transition: all 0.3s;
}
.nav-menu li a:hover, .nav-menu li a.active {
  color: var(--primary);
  border-bottom-color: var(--accent);
}
.nav-menu li a.nav-btn {
  background: var(--accent); color: var(--white);
  padding: 10px 22px; border-radius: 4px; margin-left:0.5rem;
  border-bottom: none; margin-bottom:0;
}
.nav-menu li a.nav-btn:hover { background: var(--accent2); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:26px; height:2px; background:var(--primary); }

/* ---- HERO SLIDER ---- */
.hero-slider { position:relative; overflow:hidden; }
.slide { display:none; min-height:580px; align-items:center; position:relative; overflow:hidden; }
.slide.active { display:flex; }
.slide-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(0.45);
}
.slide-1-bg {
  background: url('../images/slide_01.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45); /* darkens image so text is readable */
}
.slide-2-bg {
  background: url('../images/slide_02.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45);
}
.slide-3-bg {
  background: url('../images/slide_03.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45);
}
.slide-particles { position:absolute; inset:0; overflow:hidden; }
.slide-particles::before, .slide-particles::after {
  content:''; position:absolute; border-radius:50%; opacity:0.08;
}
.slide-particles::before { width:600px; height:600px; background:var(--teal); top:-200px; right:-100px; }
.slide-particles::after  { width:400px; height:400px; background:var(--accent); bottom:-150px; left:5%; }
.slide-content { 
  position:relative; z-index:2; max-width:650px; padding:80px 0; 
  animation: slideIn 0.8s ease; 
}
@keyframes slideIn { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.slide-tag { display:inline-block; background:rgba(232,160,32,0.2); color:var(--accent); border:1px solid rgba(232,160,32,0.4); padding:0.3rem 1rem; border-radius:20px; font-size:0.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:1.2rem; }
.slide h2 { font-family:'Raleway',sans-serif; font-size:clamp(2rem,4.5vw,3.2rem); font-weight:900; color:var(--white); line-height:1.15; margin-bottom:1.2rem; }
.slide h2 em { color:var(--accent); font-style:normal; }
.slide p { color:rgba(255,255,255,0.78); font-size:1rem; line-height:1.8; margin-bottom:2rem; max-width:520px; }
.slide-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.btn { display:inline-block; padding:0.85rem 2rem; border-radius:4px; font-family:'Raleway',sans-serif; font-size:0.88rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; transition:all 0.3s; border:2px solid transparent; cursor:pointer; }
.btn-accent { background:var(--accent); color:var(--white); }
.btn-accent:hover { background:var(--accent2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,160,32,0.35); }
.btn-outline-white { border-color:rgba(255,255,255,0.5); color:var(--white); background:transparent; }
.btn-outline-white:hover { border-color:var(--white); background:rgba(255,255,255,0.1); }
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-dk); transform:translateY(-2px); }
.btn-teal { background:var(--teal); color:var(--white); }
.btn-teal:hover { background:var(--teal-lt); transform:translateY(-2px); }
.slider-controls { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.slider-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:all 0.3s; border:none; }
.slider-dot.active { background:var(--accent); width:28px; border-radius:5px; }
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:var(--white); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.3s; font-size:1.1rem; backdrop-filter:blur(4px); }
.slider-arrow:hover { background:var(--accent); border-color:var(--accent); }
.slider-prev { left:20px; }
.slider-next { right:20px; }

/* ---- CTA STRIP ---- */
.cta-strip { background:var(--primary); padding:22px 0; }
.cta-strip .container { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.cta-strip h4 { font-family:'Raleway',sans-serif; font-size:1.2rem; font-weight:700; color:var(--white); }
.cta-strip p { color:rgba(255,255,255,0.7); font-size:0.88rem; margin-top:0.2rem; }

/* ---- SECTION UTILITIES ---- */
.section { padding:80px 0; }
.section-light { background:var(--light-bg); }
.section-dark { background:var(--primary); }
.section-teal { background:var(--teal); }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section-head { text-align:center; margin-bottom:3rem; }
.section-head .label { font-size:0.78rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-bottom:0.6rem; }
.section-head h2 { font-family:'Raleway',sans-serif; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:800; color:var(--primary); line-height:1.2; }
.section-head h2 em { color:var(--accent); font-style:normal; }
.section-head p { color:var(--text); max-width:580px; margin:0.8rem auto 0; line-height:1.8; }
.divider { width:50px; height:3px; background:var(--accent); margin:1rem auto 0; border-radius:2px; }

/* ---- ABOUT SECTION (index) ---- */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-images { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about-images img { border-radius:8px; box-shadow:var(--shadow-lg); width:100%; height:200px; object-fit:cover; }
.about-images .img-tall { grid-row:span 2; height:412px; }
.about-text .label { font-size:0.78rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-bottom:0.8rem; }
.about-text h2 { font-family:'Raleway',sans-serif; font-size:2.2rem; font-weight:800; color:var(--primary); line-height:1.2; margin-bottom:1.2rem; }
.about-text h2 em { color:var(--accent); font-style:normal; }
.about-text p { color:var(--text); line-height:1.85; margin-bottom:1rem; }
.about-check { display:flex; gap:0.6rem; align-items:flex-start; margin:0.5rem 0; color:var(--text); font-size:0.92rem; }
.about-check::before { content:"✔"; color:var(--teal); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ---- SERVICES ---- */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.service-card { background:var(--white); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); transition:all 0.3s; border:1px solid var(--border); }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.service-img { width:100%; height:180px; object-fit:cover; display:block; background:var(--light-bg2); }
.service-img-placeholder { width:100%; height:180px; display:flex; align-items:center; justify-content:center; font-size:3rem; background:linear-gradient(135deg,var(--light-bg),var(--light-bg2)); }
.service-body { padding:1.5rem; }
.service-body h4 { font-family:'Raleway',sans-serif; font-size:1.15rem; font-weight:700; color:var(--primary); margin-bottom:0.6rem; }
.service-body p { color:var(--text); font-size:0.88rem; line-height:1.7; margin-bottom:1rem; }
.read-more { color:var(--teal); font-weight:700; font-size:0.85rem; display:inline-flex; align-items:center; gap:0.3rem; }
.read-more:hover { color:var(--primary); }

/* ---- STATS STRIP ---- */
.stats-strip { background:var(--primary); padding:50px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-item h3 { font-family:'Raleway',sans-serif; font-size:2.8rem; font-weight:900; color:var(--accent); }
.stat-item p { color:rgba(255,255,255,0.7); font-size:0.88rem; text-transform:uppercase; letter-spacing:1.5px; margin-top:0.4rem; }

/* ---- INFO SPLIT ---- */
.info-split { display:grid; grid-template-columns:1fr 1fr; }
.info-split-left { background:var(--primary); padding:60px; }
.info-split-right { background:var(--teal); padding:60px; }
.info-split h3 { font-family:'Raleway',sans-serif; font-size:1.8rem; font-weight:800; color:var(--white); margin-bottom:1rem; }
.info-split h3 em { color:var(--accent); font-style:normal; }
.info-split p { color:rgba(255,255,255,0.78); line-height:1.8; margin-bottom:1.5rem; }

/* ---- TESTIMONIALS ---- */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.testimonial-card { background:var(--white); border-radius:10px; padding:1.8rem; box-shadow:var(--shadow); border:1px solid var(--border); position:relative; }
.testimonial-card::before { content:'"'; font-family:'Raleway',sans-serif; font-size:5rem; color:var(--accent); line-height:1; position:absolute; top:-5px; left:20px; opacity:0.2; }
.testimonial-text { color:var(--text); font-size:0.9rem; line-height:1.8; margin-bottom:1.2rem; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:0.8rem; }
.author-avatar { width:44px; height:44px; border-radius:50%; background:var(--light-bg2); border:2px solid var(--teal); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'Raleway',sans-serif; color:var(--primary); font-size:1.1rem; flex-shrink:0; }
.author-name { font-weight:700; font-size:0.9rem; color:var(--primary); }
.author-role { font-size:0.78rem; color:var(--teal); }

/* ---- CONTACT FORM STRIP ---- */
.contact-strip { background:var(--light-bg); padding:50px 0; }
.contact-strip-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.contact-strip h3 { font-family:'Raleway',sans-serif; font-size:1.6rem; font-weight:800; color:var(--primary); }
.contact-strip h3 em { color:var(--accent); font-style:normal; }
.contact-strip p { color:var(--text); margin-top:0.3rem; }
.inline-form { display:flex; gap:0.75rem; flex-wrap:wrap; }
.inline-form input { padding:0.8rem 1.2rem; border:1px solid var(--border); border-radius:4px; font-family:'Open Sans',sans-serif; font-size:0.9rem; color:var(--text); background:var(--white); min-width:200px; }
.inline-form input:focus { outline:none; border-color:var(--teal); }

/* ---- CLIENT LOGOS ---- */
.clients-bar { background:var(--white); padding:30px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.clients-inner { display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap; opacity:0.6; }
.client-logo { font-family:'Raleway',sans-serif; font-size:1.1rem; font-weight:800; color:var(--primary); letter-spacing:1px; }

/* ---- FOOTER ---- */
footer { background:var(--dark); padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:2.5fr 1fr 1fr 1.5fr; gap:3rem; padding-bottom:40px; }
.footer-brand .brand-main { font-family:'Raleway',sans-serif; font-size:1.5rem; font-weight:800; color:var(--white); }
.footer-brand .brand-main span { color:var(--accent); }
.footer-brand p { color:rgba(255,255,255,0.55); font-size:0.88rem; line-height:1.8; margin-top:0.8rem; }
.footer-col h5 { font-family:'Raleway',sans-serif; font-size:0.95rem; font-weight:700; color:var(--white); letter-spacing:1px; text-transform:uppercase; margin-bottom:1.2rem; position:relative; padding-bottom:0.7rem; }
.footer-col h5::after { content:''; position:absolute; bottom:0; left:0; width:30px; height:2px; background:var(--accent); }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.65rem; }
.footer-col ul li a { color:rgba(255,255,255,0.55); font-size:0.88rem; transition:color 0.3s; display:flex; align-items:center; gap:0.4rem; }
.footer-col ul li a:hover { color:var(--accent); }
.footer-col ul li a::before { content:'›'; color:var(--teal); }
.footer-contact-item { display:flex; gap:0.75rem; margin-bottom:0.9rem; }
.fc-icon { color:var(--accent); font-size:1rem; flex-shrink:0; margin-top:2px; }
.fc-text strong { display:block; color:var(--white); font-size:0.88rem; }
.fc-text span { color:rgba(255,255,255,0.55); font-size:0.82rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:18px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { color:rgba(255,255,255,0.4); font-size:0.82rem; }
.footer-bottom a { color:var(--teal); }

/* ---- PAGE HERO (inner pages) ---- */
.page-hero { background: url('../images/page-heading-bg.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45); padding:60px 0; position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(255,255,255,0.03); top:-200px; right:-100px; }
.page-hero-content { position:relative; z-index:2; }
.page-hero h1 { font-family:'Raleway',sans-serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:900; color:var(--white); }
.page-hero p { color:rgba(255,255,255,0.7); margin-top:0.6rem; font-size:0.95rem; }
.breadcrumb { display:flex; align-items:center; gap:0.5rem; margin-top:0.8rem; font-size:0.82rem; color:rgba(255,255,255,0.5); }
.breadcrumb a { color:rgba(255,255,255,0.7); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .sep { color:rgba(255,255,255,0.3); }
.breadcrumb .current { color:var(--accent); }

/* ---- CARDS ---- */
.card { background:var(--white); border-radius:10px; box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; }
.card-body { padding:1.8rem; }

/* ---- TABLE ---- */
.table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; min-width:600px; }
thead tr { background:var(--primary); }
thead th { padding:1rem 1.2rem; text-align:left; font-family:'Raleway',sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--white); white-space:nowrap; }
thead th:first-child { border-radius:0; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.2s; }
tbody tr:last-child { border:none; }
tbody tr:hover { background:var(--light-bg); }
tbody tr:nth-child(even) { background:var(--light-bg2); }
tbody tr:nth-child(even):hover { background:#e0eaf5; }
tbody td { padding:0.9rem 1.2rem; font-size:0.88rem; color:var(--text); }
tbody td:first-child { font-weight:600; color:var(--primary); }
.badge { display:inline-block; padding:0.22rem 0.7rem; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.5px; }
.badge-success { background:#d4f4e8; color:#1a8c5a; }
.badge-warning { background:#fef3cd; color:#9a6800; }
.badge-info    { background:#d0e8ff; color:#1a5fa0; }
.badge-primary { background:#d5e3f5; color:var(--primary); }
.badge-orange  { background:#ffe8d0; color:#c05500; }

/* ---- FORM STYLES ---- */
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--primary); margin-bottom:0.5rem; }
.form-control { width:100%; padding:0.85rem 1rem; border:1px solid var(--border); border-radius:6px; font-family:'Open Sans',sans-serif; font-size:0.9rem; color:var(--text); background:var(--white); transition:border-color 0.3s; outline:none; }
.form-control:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(46,170,160,0.12); }
textarea.form-control { min-height:120px; resize:vertical; }
select.form-control { cursor:pointer; }

/* ---- NEXLENS PAGE ---- */
.nexlens-hero { background:linear-gradient(135deg,#0d1b2e 0%,#131318 40%,#2eaaa0 100%); padding:80px 0; }
.nexlens-hero h1 { font-family:'Raleway',sans-serif; font-size:clamp(2.5rem,5vw,3.8rem); font-weight:900; color:var(--white); }
.nexlens-hero h1 em { color:#00d4c2; font-style:normal; }
.nexlens-hero p { color:rgba(255,255,255,0.75); font-size:1.05rem; line-height:1.8; max-width:540px; margin:1rem 0 2rem; }

/* ---- REVEAL ANIMATION ---- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal.delay-1 { transition-delay:0.1s; }
.reveal.delay-2 { transition-delay:0.2s; }
.reveal.delay-3 { transition-delay:0.3s; }
.reveal.delay-4 { transition-delay:0.4s; }

/* ---- TRACKING ---- */
.tracking-hero-form { background:var(--white); border-radius:12px; padding:2.5rem; box-shadow:var(--shadow-lg); max-width:560px; }
.tracking-result { margin-top:2.5rem; }
.track-timeline { display:flex; flex-direction:column; gap:0; margin:2rem 0; position:relative; }
.track-timeline::before { content:''; position:absolute; left:19px; top:0; bottom:0; width:2px; background:var(--border); }
.track-step { display:flex; gap:1.2rem; align-items:flex-start; position:relative; padding-bottom:1.5rem; }
.track-step:last-child { padding-bottom:0; }
.track-dot { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; z-index:1; position:relative; border:2px solid var(--border); background:var(--white); }
.track-dot.done { background:var(--teal); border-color:var(--teal); color:var(--white); }
.track-dot.current { background:var(--accent); border-color:var(--accent); color:var(--white); }
.track-dot.pending { background:var(--light-bg); border-color:var(--border); color:var(--text-lt); }
.track-info h5 { font-family:'Raleway',sans-serif; font-size:0.95rem; font-weight:700; color:var(--primary); }
.track-info p { color:var(--text); font-size:0.83rem; margin-top:0.2rem; }
.track-info .time { color:var(--text-lt); font-size:0.78rem; margin-top:0.15rem; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f0f4f8; }
::-webkit-scrollbar-thumb { background:var(--teal); border-radius:3px; }

/* ---- RESPONSIVE ---- */
@media (max-width:992px) {
  .about-grid { grid-template-columns:1fr; }
  .info-split { grid-template-columns:1fr; }
  .info-split-left, .info-split-right { padding:40px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .nav-menu { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--white); border-top:1px solid var(--border); padding:1rem 0; box-shadow:var(--shadow); }
  .nav-menu.open { display:flex; }
  .nav-menu li a { padding:12px 20px; border-bottom:none !important; }
  .hamburger { display:flex; }
  .slide { min-height:460px; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .about-images { grid-template-columns:1fr; }
  .about-images .img-tall { height:220px; grid-row:auto; }
}


/* ============================================================
   INDEX PAGE — Homepage specific styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800;900&family=Open+Sans:wght@300;400;600;700&display=swap');
:root{
  --primary:#131318;--primary-dk:#000000;--accent:#ffe300;--accent2:#ffe300;
  --teal:#2eaaa0;--teal-lt:#3dc8bc;--light-bg:#f4f7fc;--light-bg2:#eaf0f8;
  --white:#fff;--dark:#000000;--text:#555e6d;--text-lt:#8a95a3;
  --border:#dde3eb;--shadow:0 4px 24px rgba(30,58,95,.10);--shadow-lg:0 12px 40px rgba(30,58,95,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Open Sans',sans-serif;color:var(--text);background:#fff;overflow-x:hidden;}
a{text-decoration:none;color:inherit;transition:color .3s;}

/* TOP BAR */
.top-bar{background:var(--primary-dk);padding:8px 0;font-size:.82rem;color:rgba(255,255,255,.75);}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;}
.top-bar a{color:rgba(255,255,255,.75);}
.top-bar a:hover{color:var(--accent);}
.tbi{display:flex;gap:2rem;}
.tbi span{display:flex;align-items:center;gap:.4rem;}

/* NAVBAR */
.navbar{background:#fff;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:999;box-shadow:var(--shadow);}
.navbar .container{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;}
.brand{display:flex;align-items:center;gap:.8rem;padding:14px 0;}
.brand-icon{width:46px;height:46px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Raleway',sans-serif;font-size:1.3rem;font-weight:900;}
.brand-main{font-family:'Raleway',sans-serif;font-size:1.15rem;font-weight:800;color:var(--primary);}
.brand-sub{font-size:.68rem;color:var(--teal);font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.nav-menu{display:flex;align-items:center;list-style:none;gap:.15rem;}
.nav-menu li a{display:block;padding:22px 13px;font-family:'Raleway',sans-serif;font-size:.8rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.8px;border-bottom:3px solid transparent;margin-bottom:-3px;transition:all .3s;}
.nav-menu li a:hover,.nav-menu li a.active{color:var(--primary);border-bottom-color:var(--accent);}
.nav-menu li a.nav-cta{background:var(--accent);color:#fff;padding:10px 16px;border-radius:4px;margin-left:.5rem;border-bottom:none;margin-bottom:0;}
.nav-menu li a.nav-cta:hover{background:var(--accent2);}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;}
.hamburger span{display:block;width:26px;height:2px;background:var(--primary);}

/* HERO SLIDER */
.hero-slider{position:relative;overflow:hidden;}
.slide{display:none;min-height:560px;align-items:center;position:relative;overflow:hidden;}
.slide.active{display:flex;}
.slide-bg{position:absolute;inset:0;}
.s1{background: url('../images/slide_01.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45); /* darkens image so text is readable */}
.s2{background: url('../images/slide_02.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45); /* darkens image so text is readable */}
.s3{background: url('../images/slide_03.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45); /* darkens image so text is readable */}
.slide-fx{position:absolute;inset:0;overflow:hidden;}
.slide-fx::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:var(--teal);opacity:.08;top:-200px;right:-100px;}
.slide-fx::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:var(--accent);opacity:.08;bottom:-150px;left:5%;}
.slide-content{
  position:relative;z-index:2;max-width:650px;padding:80px 0;
  animation:sIn .8s ease;
}
@keyframes sIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.slide-tag{display:inline-block;background:rgba(232,160,32,.2);color:var(--accent);border:1px solid rgba(232,160,32,.4);padding:.3rem 1rem;border-radius:20px;font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:1.2rem;}
.slide h2{font-family:'Raleway',sans-serif;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:900;color:#fff;line-height:1.15;margin-bottom:1.2rem;}
.slide h2 em{color:var(--accent);font-style:normal;}
.slide p{color:rgba(255,255,255,.78);font-size:1rem;line-height:1.8;margin-bottom:2rem;max-width:520px;}
.slide-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.btn{display:inline-block;padding:.85rem 2rem;border-radius:4px;font-family:'Raleway',sans-serif;font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;transition:all .3s;border:2px solid transparent;cursor:pointer;}
.btn-a{background:var(--accent);color:#000;}
.btn-a:hover{background:var(--accent2);transform:translateY(-2px);}
.btn-ow{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;}
.btn-ow:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.btn-p{background:var(--primary);color:#fff;}
.btn-p:hover{background:var(--primary-dk);transform:translateY(-2px);}
.btn-t{background:var(--teal);color:#fff;}
.btn-t:hover{background:var(--teal-lt);}
.slider-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s;border:none;}
.dot.active{background:var(--accent);width:28px;border-radius:5px;}
.sarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;font-size:1.4rem;}
.sarrow:hover{background:var(--accent);border-color:var(--accent);}
#sPrev{left:20px;}#sNext{right:20px;}

/* LAYOUT */
.section{padding:80px 0;}
.pale{background:var(--light-bg);}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.sec-head{text-align:center;margin-bottom:3rem;}
.sec-head .lbl{font-size:.78rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem;}
.sec-head h2{font-family:'Raleway',sans-serif;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;color:var(--primary);line-height:1.2;}
.sec-head h2 em{color:var(--accent);font-style:normal;}
.sec-head p{color:var(--text);max-width:580px;margin:.8rem auto 0;line-height:1.8;}
.divider{width:50px;height:3px;background:var(--accent);margin:1rem auto 0;border-radius:2px;}

/* CTA STRIP */
.cta-strip{background:var(--primary);padding:22px 0;}
.cta-strip .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.cta-strip h4{font-family:'Raleway',sans-serif;font-size:1.2rem;font-weight:700;color:#fff;}
.cta-strip p{color:rgba(255,255,255,.7);font-size:.88rem;margin-top:.2rem;}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.img-tall{grid-row:span 2;height:412px;border-radius:10px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;}
.img-sm{height:200px;border-radius:10px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;}
.abt-lbl{font-size:.78rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem;}
.about-grid h2{font-family:'Raleway',sans-serif;font-size:2.2rem;font-weight:800;color:var(--primary);line-height:1.2;margin-bottom:1.2rem;}
.about-grid h2 em{color:var(--accent);font-style:normal;}
.about-grid p{color:var(--text);line-height:1.85;margin-bottom:1rem;}
.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.5rem 0;color:var(--text);font-size:.92rem;}
.chk::before{content:"✔";color:var(--teal);font-weight:700;flex-shrink:0;margin-top:1px;}

/* FOR A CLEAR VISION */
.cv-bg{background:#edf0f8;padding:80px 0;}
.cv-wrap{display:grid;grid-template-columns:230px 1fr;gap:3rem;align-items:start;}
.cv-h{font-family:'Raleway',sans-serif;font-size:2.4rem;font-weight:900;color:#000000;line-height:1.15;margin-bottom:1rem;}
.cv-intro p{color:#555e6d;line-height:1.8;margin-bottom:1.6rem;font-size:.95rem;}
.cv-all-link{display:flex;align-items:center;gap:.75rem;font-family:'Raleway',sans-serif;font-weight:700;font-size:.9rem;color:#000000;}
.ybtn{width:34px;height:34px;background:#ffe300;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:900;color:#000000;flex-shrink:0;}
.cv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.cv-col{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(30,58,95,.07);border:1px solid #e4e8f2;}
.cv-col-hd{display:flex;align-items:center;gap:.6rem;padding:1.2rem 1.2rem .9rem;border-bottom:1px solid #edf0f8;flex-wrap:wrap;}
.cv-col-hd h4{font-family:'Raleway',sans-serif;font-size:.9rem;font-weight:800;color:#000000;flex:1;}
.va-btn{border:1px solid #ccd0de;border-radius:20px;padding:.2rem .7rem;font-size:.72rem;font-weight:700;color:#555;background:#fff;text-decoration:none;white-space:nowrap;transition:all .2s;}
.va-btn:hover{background:#000000;color:#fff;border-color:#000000;}
.cv-item{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;border-bottom:1px solid #edf0f8;}
.cv-item:last-child{border:none;}
.cv-item-body{flex:1;}
.cv-item-body h5{font-family:'Raleway',sans-serif;font-size:.85rem;font-weight:800;color:#000000;margin-bottom:.25rem;}
.cv-item-body p{font-size:.78rem;color:#666;line-height:1.45;}
.y-arrow{width:30px;height:30px;background:#ffe300;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:#000000;text-decoration:none;flex-shrink:0;transition:transform .2s;}
.y-arrow:hover{transform:scale(1.12);}

/* VISION CONDITIONS */
.vc-bg{background:#edf0f8;padding:80px 0;}
.vc-h{font-family:'Raleway',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#000000;line-height:1.15;text-align:center;margin-bottom:2.5rem;}
.vc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.vc-card{background:#e4e7f2;border-radius:16px;padding:1.8rem 1.5rem 1.5rem;display:flex;flex-direction:column;}
.vc-card h4{font-family:'Raleway',sans-serif;font-size:1.05rem;font-weight:800;color:#000000;margin-bottom:.8rem;}
.vc-card p{color:#555e6d;font-size:.87rem;line-height:1.75;flex:1;margin-bottom:1.4rem;}
.lm-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:'Raleway',sans-serif;font-weight:700;font-size:.85rem;color:#000000;text-decoration:none;}
.lm-dot{width:28px;height:28px;background:#ffe300;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;color:#000000;flex-shrink:0;}

/* PROTECTION & LIGHT FILTERING */
.plf-bg{background:#edf0f8;padding:80px 0;}
.plf-h{font-family:'Raleway',sans-serif;font-size:clamp(2rem,4vw,3rem);font-weight:900;color:#000000;line-height:1.15;text-align:center;margin-bottom:.8rem;}
.plf-sub{color:#555e6d;font-size:.95rem;max-width:640px;margin:0 auto 2.5rem;line-height:1.8;text-align:center;}
.plf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:800px;margin:0 auto;}
.plf-card{background:#e4e7f2;border-radius:16px;padding:2rem 1.8rem;}
.plf-card h4{font-family:'Raleway',sans-serif;font-size:1.1rem;font-weight:800;color:#000000;margin-bottom:.8rem;}
.plf-card p{color:#555e6d;font-size:.88rem;line-height:1.75;margin-bottom:1.4rem;}

/* IMAGE + TEXT SPLITS */
.its-wrap{padding:60px 0;}
.its-wrap.pale{background:#f4f7fc;}
.its-block{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(30,58,95,.08);}
.its-img{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:340px;
  /* padding:2.5rem; */
}
.its-img .emoji{font-size:5.5rem;line-height:1;}
.its-img .ilabel{font-family:'Raleway',sans-serif;font-weight:700;font-size:1.1rem;margin-top:.8rem;text-align:center;}
.its-text{padding:3.5rem 3rem;background:linear-gradient(135deg,#f8f9fd,#eef2fa);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;}
.its-text::after{content:'';position:absolute;top:-20px;right:-20px;width:180px;height:180px;border:2px solid rgba(200,210,230,.25);border-radius:50%;}
.its-text::before{content:'';position:absolute;bottom:-40px;right:30px;width:110px;height:110px;border:2px solid rgba(200,210,230,.18);border-radius:50%;}
.its-text h2{font-family:'Raleway',sans-serif;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:900;color:#000000;line-height:1.2;margin-bottom:1rem;}
.its-bar{width:44px;height:3px;background:#ffe300;border-radius:2px;margin-bottom:1.2rem;}
.its-text p{color:#555e6d;font-size:.92rem;line-height:1.8;margin-bottom:.75rem;}
.its-cta{display:inline-block;background:#ffe300;color:#000000;font-family:'Raleway',sans-serif;font-weight:800;font-size:.88rem;padding:.85rem 1.8rem;border-radius:30px;text-decoration:none;transition:all .3s;margin-top:.7rem;}
.its-cta:hover{background:#e0c800;transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,216,0,.4);}
.its-block.rev .its-img{order:2;}
.its-block.rev .its-text{order:1;}

/* STATS */
.stats-strip{background:var(--primary);padding:50px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center;}
.stat-item h3{font-family:'Raleway',sans-serif;font-size:2.8rem;font-weight:900;color:var(--accent);}
.stat-item p{color:rgba(255,255,255,.7);font-size:.88rem;text-transform:uppercase;letter-spacing:1.5px;margin-top:.4rem;}

/* INFO SPLIT */
.info-split{display:grid;grid-template-columns:1fr 1fr;}
.isl{background:var(--primary);padding:60px;}
.isr{background:var(--teal);padding:60px;}
.info-split h3{font-family:'Raleway',sans-serif;font-size:1.8rem;font-weight:800;color:#fff;margin-bottom:1rem;}
.info-split h3 em{color:var(--accent);font-style:normal;}
.info-split p{color:rgba(255,255,255,.78);line-height:1.8;margin-bottom:1.5rem;}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;}
.testi-card{background:#fff;border-radius:10px;padding:1.8rem;box-shadow:var(--shadow);border:1px solid var(--border);position:relative;}
.testi-card::before{content:'"';font-family:'Raleway',sans-serif;font-size:5rem;color:var(--accent);line-height:1;position:absolute;top:-5px;left:20px;opacity:.2;}
.testi-text{color:var(--text);font-size:.9rem;line-height:1.8;margin-bottom:1.2rem;font-style:italic;}
.testi-author{display:flex;align-items:center;gap:.8rem;}
.testi-av{width:44px;height:44px;border-radius:50%;background:var(--light-bg2);border:2px solid var(--teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Raleway',sans-serif;color:var(--primary);font-size:1.1rem;flex-shrink:0;}
.testi-name{font-weight:700;font-size:.9rem;color:var(--primary);}
.testi-role{font-size:.78rem;color:var(--teal);}

/* CONTACT STRIP */
.cs-wrap{background:var(--light-bg);padding:50px 0;}
.cs-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.cs-wrap h3{font-family:'Raleway',sans-serif;font-size:1.6rem;font-weight:800;color:var(--primary);}
.cs-wrap h3 em{color:var(--accent);font-style:normal;}
.cs-wrap .sp{color:var(--text);margin-top:.3rem;}
.inline-form{display:flex;gap:.75rem;flex-wrap:wrap;}
.inline-form input{padding:.8rem 1.2rem;border:1px solid var(--border);border-radius:4px;font-family:'Open Sans',sans-serif;font-size:.9rem;color:var(--text);background:#fff;min-width:200px;outline:none;}
.inline-form input:focus{border-color:var(--teal);}

/* HOYA STRIP */
/* .hoya-strip{background:linear-gradient(135deg,#3d5080,#4a5e96,#3a4e7a);padding:60px 0;} */
.hoya-strip{background:linear-gradient(135deg,#ffe300,#000000,#ffe300);padding:60px 0;}
.hoya-inner{display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center;}
.hoya-txt{text-align:center;}
.hoya-txt h3{font-family:'Raleway',sans-serif;font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:3px;text-transform:uppercase;margin-bottom:1rem;}
.hoya-hr{width:100%;height:1px;background:rgba(255,255,255,.25);margin-bottom:1.4rem;}
.hoya-txt p{color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.9;margin-bottom:1.8rem;}
.hoya-lm{display:inline-flex;align-items:center;gap:.75rem;color:#fff;font-family:'Raleway',sans-serif;font-size:.9rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.hoya-lm span{width:32px;height:32px;border:2px solid rgba(255,255,255,.6);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .3s;}
.hoya-lm:hover span{background:rgba(255,255,255,.2);border-color:#fff;}
.hoya-img-circle{width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12);border:4px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25);}
.hoya-img-inner{font-size:5rem;background:linear-gradient(135deg,#e0e8f8,#c0d0ec);width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;}

/* CLIENTS */
.clients-bar{background:#fff;padding:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.clients-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;opacity:.6;}
.cli-logo{font-family:'Raleway',sans-serif;font-size:1.1rem;font-weight:800;color:var(--primary);letter-spacing:1px;}

/* FOOTER */
footer{background:var(--dark);padding:60px 0 0;}
.foot-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1.5fr;gap:3rem;padding-bottom:40px;}
.foot-brand .fn{font-family:'Raleway',sans-serif;font-size:1.5rem;font-weight:800;color:#fff;}
.foot-brand .fn span{color:var(--accent);}
.foot-brand p{color:rgba(255,255,255,.55);font-size:.88rem;line-height:1.8;margin-top:.8rem;}
.foot-col h5{font-family:'Raleway',sans-serif;font-size:.95rem;font-weight:700;color:#fff;letter-spacing:1px;text-transform:uppercase;margin-bottom:1.2rem;position:relative;padding-bottom:.7rem;}
.foot-col h5::after{content:'';position:absolute;bottom:0;left:0;width:30px;height:2px;background:var(--accent);}
.foot-col ul{list-style:none;}
.foot-col ul li{margin-bottom:.65rem;}
.foot-col ul li a{color:rgba(255,255,255,.55);font-size:.88rem;display:flex;align-items:center;gap:.4rem;transition:color .3s;}
.foot-col ul li a:hover{color:var(--accent);}
.foot-col ul li a::before{content:'›';color:var(--teal);}
.foot-ci{display:flex;gap:.75rem;margin-bottom:.9rem;}
.fc-icon{color:var(--accent);font-size:1rem;flex-shrink:0;margin-top:2px;}
.fc-text strong{display:block;color:#fff;font-size:.88rem;}
.fc-text span{color:rgba(255,255,255,.55);font-size:.82rem;}
.foot-btm{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.foot-btm p{color:rgba(255,255,255,.4);font-size:.82rem;}
.foot-btm a{color:var(--teal);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal.d1{transition-delay:.1s;}.reveal.d2{transition-delay:.2s;}.reveal.d3{transition-delay:.3s;}.reveal.d4{transition-delay:.4s;}

/* SCROLLBAR */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:#f0f4f8;}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:3px;}

/* RESPONSIVE */
@media(max-width:1100px){.cv-wrap{grid-template-columns:1fr;}.cv-cols{grid-template-columns:1fr 1fr;}}
@media(max-width:992px){
  .about-grid{grid-template-columns:1fr;}.info-split{grid-template-columns:1fr;}
  .isl,.isr{padding:40px;}.foot-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}.vc-grid{grid-template-columns:1fr 1fr;}
  .its-block{grid-template-columns:1fr;}.its-block.rev .its-img{order:0;}.its-block.rev .its-text{order:1;}
  .hoya-inner{grid-template-columns:1fr;}.hoya-img-circle{margin:0 auto;}
}
@media(max-width:768px){
  .nav-menu{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:1rem 0;box-shadow:var(--shadow);}
  .nav-menu.open{display:flex;}.nav-menu li a{padding:12px 20px;border-bottom:none!important;}
  .hamburger{display:flex;}.slide{min-height:460px;}
  .foot-grid{grid-template-columns:1fr;gap:2rem;}.about-imgs{grid-template-columns:1fr;}
  .img-tall{height:220px;grid-row:auto;}.plf-grid{grid-template-columns:1fr;}
  .cv-cols{grid-template-columns:1fr;}
}
@media(max-width:600px){.vc-grid{grid-template-columns:1fr;}.stats-grid{grid-template-columns:1fr 1fr;}}


/* ============================================================
   HOYA PAGE — Hoya lens page specific styles
   ============================================================ */

/* ===== HOYA PAGE SPECIFIC STYLES ===== */

    /* Hero */
    .hoya-page-hero {
      background: linear-gradient(135deg, #3d5080 0%, #4a5e96 50%, #3a4e7a 100%);
      padding: 80px 0 70px;
      position: relative;
      overflow: hidden;
    }
    .hoya-page-hero::before {
      content: '';
      position: absolute;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
      top: -200px; right: -100px;
    }
    .hoya-page-hero::after {
      content: '';
      position: absolute;
      width: 300px; height: 300px;
      border-radius: 50%;
      background: rgba(255,255,255,0.03);
      bottom: -100px; left: 5%;
    }
    .hoya-hero-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 5rem;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .hoya-hero-text h1 {
      font-family: 'Raleway', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 3.2rem);
      font-weight: 900;
      color: #fff;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 1.2rem;
    }
    .hoya-hero-divider {
      width: 100%;
      max-width: 650px;
      height: 1px;
      background: rgba(255,255,255,0.3);
      margin-bottom: 1.5rem;
    }
    .hoya-hero-text p {
      color: rgba(255,255,255,0.88);
      font-size: 1rem;
      line-height: 1.9;
      max-width: 650px;
      margin-bottom: 2rem;
      text-align: center;
    }
    .hoya-learn-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      color: #fff;
      font-family: 'Raleway', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
      transition: opacity 0.3s;
    }
    .hoya-learn-btn .circle-arrow {
      width: 34px; height: 34px;
      border: 2px solid rgba(255,255,255,0.6);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: all 0.3s;
    }
    .hoya-learn-btn:hover .circle-arrow {
      background: rgba(255,255,255,0.2);
      border-color: #fff;
    }
    .hoya-hero-img {
      width: 220px; height: 220px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      border: 4px solid rgba(255,255,255,0.3);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 16px 50px rgba(0,0,0,0.3);
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }
    .hoya-hero-img-bg {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #dce8f8 0%, #b8ccec 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 5rem;
    }

    /* Breadcrumb bar */
    .bread-bar {
      background: rgba(0,0,0,0.15);
      padding: 10px 0;
      position: relative; z-index: 2;
    }
    .bread-bar .breadcrumb { margin: 0; }

    /* About strip matching screenshot layout */
    .hoya-about-strip {
      background: linear-gradient(135deg, #3d5080 0%, #4a5e96 60%, #3a4e7a 100%);
      padding: 60px 0;
    }
    .hoya-about-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 4rem;
      align-items: center;
    }
    .hoya-about-text { text-align: center; }
    .hoya-about-text h2 {
      font-family: 'Raleway', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .hoya-hr { width: 100%; height: 1px; background: rgba(255,255,255,0.25); margin-bottom: 1.4rem; }
    .hoya-about-text p {
      color: rgba(255,255,255,0.88);
      font-size: 0.95rem;
      line-height: 1.9;
      margin-bottom: 1.8rem;
    }

    /* Stats section */
    .hoya-stats {
      background: #fff;
      padding: 60px 0;
    }
    .hoya-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      text-align: center;
    }
    .hoya-stat {
      padding: 2rem 1rem;
      border-right: 1px solid var(--border);
    }
    .hoya-stat:last-child { border-right: none; }
    .hoya-stat h3 {
      font-family: 'Raleway', sans-serif;
      font-size: 2.8rem;
      font-weight: 900;
      color: #4a5e96;
    }
    .hoya-stat p {
      color: var(--text);
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-top: 0.4rem;
    }

    /* Products grid */
    .hoya-prod-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }
    .hoya-prod-card {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
      transition: all 0.3s;
    }
    .hoya-prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .hoya-prod-head {
      padding: 1.8rem;
      background: linear-gradient(135deg, #3d5080, #4a5e96);
      position: relative;
    }
    .hoya-prod-head h4 {
      font-family: 'Raleway', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      color: #fff;
    }
    .hoya-prod-head p { color: rgba(255,255,255,0.7); font-size: 0.83rem; margin-top: 0.3rem; }
    .hoya-prod-tag {
      position: absolute; top: 1rem; right: 1rem;
      background: rgba(255,255,255,0.2);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 0.2rem 0.7rem;
      border-radius: 20px;
      letter-spacing: 0.5px;
    }
    .hoya-prod-body { padding: 1.5rem; background: #fff; }
    .hoya-prod-body ul { list-style: none; }
    .hoya-prod-body ul li {
      padding: 0.45rem 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.88rem;
      color: var(--text);
      display: flex; gap: 0.6rem; align-items: flex-start;
    }
    .hoya-prod-body ul li:last-child { border: none; }
    .hoya-prod-body ul li::before { content: '✦'; color: #4a5e96; font-size: 0.65rem; margin-top: 3px; flex-shrink: 0; }

    /* Technology section */
    .hoya-tech-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.5rem;
    }
    .hoya-tech-card {
      background: #fff;
      border-radius: 10px;
      padding: 2rem;
      box-shadow: var(--shadow);
      border-top: 4px solid #4a5e96;
      border-bottom: 1px solid var(--border);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      transition: all 0.3s;
    }
    .hoya-tech-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-top-color: var(--accent); }
    .hoya-tech-icon { font-size: 2.2rem; margin-bottom: 0.8rem; }
    .hoya-tech-card h5 {
      font-family: 'Raleway', sans-serif;
      font-size: 1.05rem;
      font-weight: 800;
      color: #3d5080;
      margin-bottom: 0.5rem;
    }
    .hoya-tech-card p { color: var(--text); font-size: 0.87rem; line-height: 1.75; }

    /* Timeline */
    .hoya-timeline { position: relative; padding-left: 40px; }
    .hoya-timeline::before {
      content: '';
      position: absolute;
      left: 8px; top: 0; bottom: 0;
      width: 2px;
      background: linear-gradient(180deg, #4a5e96, var(--teal));
    }
    .hoya-tl-item {
      position: relative;
      margin-bottom: 2.5rem;
    }
    .hoya-tl-item::before {
      content: '';
      position: absolute;
      left: -36px; top: 5px;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: #4a5e96;
      border: 3px solid #fff;
      box-shadow: 0 0 0 2px #4a5e96;
    }
    .hoya-tl-year {
      font-family: 'Raleway', sans-serif;
      font-size: 1rem;
      font-weight: 900;
      color: #4a5e96;
      margin-bottom: 0.3rem;
    }
    .hoya-tl-item h5 {
      font-family: 'Raleway', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 0.3rem;
    }
    .hoya-tl-item p { color: var(--text); font-size: 0.87rem; line-height: 1.7; }

    /* CTA banner */
    .hoya-cta-banner {
      background: linear-gradient(135deg, #3d5080 0%, #4a5e96 60%, #2eaaa0 100%);
      padding: 70px 0;
      text-align: center;
    }
    .hoya-cta-banner h2 {
      font-family: 'Raleway', sans-serif;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 900;
      color: #fff;
      margin-bottom: 1rem;
    }
    .hoya-cta-banner p {
      color: rgba(255,255,255,0.78);
      max-width: 560px;
      margin: 0 auto 2rem;
      line-height: 1.8;
    }
    .hoya-cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

    @media(max-width: 900px) {
      .hoya-hero-inner, .hoya-about-inner { grid-template-columns: 1fr; }
      .hoya-hero-img { margin: 0 auto; }
      .hoya-stats-grid { grid-template-columns: repeat(2, 1fr); }
      .hoya-stat { border-right: none; border-bottom: 1px solid var(--border); }
      .hoya-stat:last-child, .hoya-stat:nth-child(even) { border: none; }
    }
    @media(max-width: 600px) {
      .hoya-stats-grid { grid-template-columns: 1fr 1fr; }
    }
  



/* ===== HOYA PAGE SPECIFIC STYLES ===== */
.hoya-about-strip { background:linear-gradient(135deg,#3d5080 0%,#4a5e96 60%,#3a4e7a 100%); padding:60px 0; }
.hoya-about-inner { display:grid; grid-template-columns:1fr auto; gap:4rem; align-items:center; }
.hoya-about-text { text-align:center; }
.hoya-about-text h2 { font-family:'Raleway',sans-serif; font-size:1.4rem; font-weight:800; color:#fff; letter-spacing:3px; text-transform:uppercase; margin-bottom:1rem; }
.hoya-hr { width:100%; height:1px; background:rgba(255,255,255,0.25); margin-bottom:1.4rem; }
.hoya-about-text p { color:rgba(255,255,255,0.88); font-size:0.95rem; line-height:1.9; margin-bottom:1.8rem; }
.hoya-learn-btn { display:inline-flex; align-items:center; gap:0.75rem; color:#fff; font-family:'Raleway',sans-serif; font-size:0.9rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none; }
.hoya-learn-btn .circle-arrow { width:34px; height:34px; border:2px solid rgba(255,255,255,0.6); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; transition:all 0.3s; }
.hoya-learn-btn:hover .circle-arrow { background:rgba(255,255,255,0.2); border-color:#fff; }
.hoya-hero-img { width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.1); border:4px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 50px rgba(0,0,0,0.3); overflow:hidden; flex-shrink:0; }
.hoya-hero-img-bg { width:100%; height:100%; background:linear-gradient(135deg,#dce8f8,#b8ccec); display:flex; align-items:center; justify-content:center; font-size:5rem; }
.hoya-stats { background:#fff; padding:60px 0; }
.hoya-stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.hoya-stat { padding:2rem 1rem; border-right:1px solid var(--border); }
.hoya-stat:last-child { border-right:none; }
.hoya-stat h3 { font-family:'Raleway',sans-serif; font-size:2.8rem; font-weight:900; color:#4a5e96; }
.hoya-stat p { color:var(--text); font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; margin-top:0.4rem; }
.hoya-prod-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.hoya-prod-card { border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.3s; }
.hoya-prod-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.hoya-prod-head { padding:1.8rem; background:linear-gradient(135deg,#3d5080,#4a5e96); position:relative; }
.hoya-prod-head h4 { font-family:'Raleway',sans-serif; font-size:1.3rem; font-weight:800; color:#fff; }
.hoya-prod-head p { color:rgba(255,255,255,0.7); font-size:0.83rem; margin-top:0.3rem; }
.hoya-prod-tag { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,0.2); color:#fff; font-size:0.7rem; font-weight:700; padding:0.2rem 0.7rem; border-radius:20px; }
.hoya-prod-body { padding:1.5rem; background:#fff; }
.hoya-prod-body ul { list-style:none; }
.hoya-prod-body ul li { padding:0.45rem 0; border-bottom:1px solid var(--border); font-size:0.88rem; color:var(--text); display:flex; gap:0.6rem; align-items:flex-start; }
.hoya-prod-body ul li:last-child { border:none; }
.hoya-prod-body ul li::before { content:'✦'; color:#4a5e96; font-size:0.65rem; margin-top:3px; flex-shrink:0; }
.hoya-tech-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.hoya-tech-card { background:#fff; border-radius:10px; padding:2rem; box-shadow:var(--shadow); border-top:4px solid #4a5e96; border-bottom:1px solid var(--border); border-left:1px solid var(--border); border-right:1px solid var(--border); transition:all 0.3s; }
.hoya-tech-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-top-color:var(--accent); }
.hoya-tech-icon { font-size:2.2rem; margin-bottom:0.8rem; }
.hoya-tech-card h5 { font-family:'Raleway',sans-serif; font-size:1.05rem; font-weight:800; color:#3d5080; margin-bottom:0.5rem; }
.hoya-tech-card p { color:var(--text); font-size:0.87rem; line-height:1.75; }
.hoya-timeline { position:relative; padding-left:40px; }
.hoya-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(180deg,#4a5e96,var(--teal)); }
.hoya-tl-item { position:relative; margin-bottom:2.5rem; }
.hoya-tl-item::before { content:''; position:absolute; left:-36px; top:5px; width:14px; height:14px; border-radius:50%; background:#4a5e96; border:3px solid #fff; box-shadow:0 0 0 2px #4a5e96; }
.hoya-tl-year { font-family:'Raleway',sans-serif; font-size:1rem; font-weight:900; color:#4a5e96; margin-bottom:0.3rem; }
.hoya-tl-item h5 { font-family:'Raleway',sans-serif; font-size:0.95rem; font-weight:700; color:var(--primary); margin-bottom:0.3rem; }
.hoya-tl-item p { color:var(--text); font-size:0.87rem; line-height:1.7; }
.hoya-cta-banner { background:linear-gradient(135deg,#3d5080,#4a5e96,#2eaaa0); padding:70px 0; text-align:center; }
.hoya-cta-banner h2 { font-family:'Raleway',sans-serif; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; color:#fff; margin-bottom:1rem; }
.hoya-cta-banner p { color:rgba(255,255,255,0.78); max-width:560px; margin:0 auto 2rem; line-height:1.8; }
.hoya-cta-btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
@media(max-width:900px) {
  .hoya-about-inner { grid-template-columns:1fr; }
  .hoya-hero-img { margin:0 auto; }
  .hoya-stats-grid { grid-template-columns:repeat(2,1fr); }
}


/* ============================================================
   NEXLENS PAGE — NeXlens catalogue page specific styles
   ============================================================ */

/* NeXlens-specific dark theme overlays */
    .nx-hero { background: url('../images/slide_01.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45); padding:80px 0; position:relative; overflow:hidden; }
    .nx-hero::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(0,180,170,0.07); top:-150px; right:-100px; }
    .nx-hero::after  { content:''; position:absolute; width:350px; height:350px; border-radius:50%; background:rgba(232,160,32,0.06); bottom:-100px; left:5%; }
    .nx-hero-content { position:relative; z-index:2; max-width:660px; }
    .nx-hero h1 { font-family:'Raleway',sans-serif; font-size:clamp(2.2rem,4.5vw,3.5rem); font-weight:900; color:#fff; line-height:1.15; }
    .nx-hero h1 em { color:#00d4c2; font-style:normal; }
    .nx-hero p { color:rgba(255,255,255,0.72); font-size:1rem; line-height:1.8; max-width:520px; margin:1rem 0 2rem; }
    .nx-tag { display:inline-block; background:rgba(0,212,194,0.15); color:#00d4c2; border:1px solid rgba(0,212,194,0.35); padding:0.3rem 1rem; border-radius:20px; font-size:0.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:1.2rem; }
    .nx-stats { display:flex; gap:2.5rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,0.1); }
    .nx-stat h3 { font-family:'Raleway',sans-serif; font-size:1.9rem; font-weight:900; color:#00d4c2; }
    .nx-stat p { color:rgba(255,255,255,0.55); font-size:0.75rem; text-transform:uppercase; letter-spacing:1px; }

    /* Tab nav */
    .tab-nav { display:flex; gap:0.5rem; flex-wrap:wrap; border-bottom:2px solid var(--border); margin-bottom:2.5rem; padding-bottom:0; }
    .tab-btn { padding:0.65rem 1.4rem; background:transparent; border:none; border-bottom:3px solid transparent; margin-bottom:-2px; font-family:'Raleway',sans-serif; font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--text); cursor:pointer; transition:all 0.25s; }
    .tab-btn:hover { color:var(--primary); }
    .tab-btn.active { color:var(--primary); border-bottom-color:var(--accent); }
    .tab-panel { display:none; }
    .tab-panel.active { display:block; }

    /* Product cards */
    .prod-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
    .prod-card { background:var(--white); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.3s; }
    .prod-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
    /* .prod-card-head { padding:1.8rem; background:linear-gradient(135deg,var(--primary),var(--primary-dk)); position:relative; } */
    .prod-card-head {
    padding: 4.8rem;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

 .prod-card-head.black {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-011.jpg');
}

.prod-card-head.teal {
    
     background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-012.jpg');
}

.prod-card-head.amber {
    
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-013.jpg');
    
    
}

 .prod-card-head.framefit {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-frame-fit.jpg');
}
 .prod-card-head.sportsfit {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-sports.jpg');
}
 .prod-card-head.fsv {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-fsv.jpg');
}
 .prod-card-head.flatTopD {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/bifocal_flattop_d.jpg');
}
 .prod-card-head.kryptoc {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/bifocal_kryptoc.jpg');
}
 .prod-card-head.noline {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/img-fsv.jpg');
}
 .prod-card-head.executive {
   
    background: linear-gradient(
        135deg,
        rgba(19,19,24,0.8),
        rgba(0,0,0,0.7)
    ),
    url('../images/bifocal_executive.jpg');
}
    /* .prod-card-head.teal { background:linear-gradient(135deg,#1a3a3a,var(--teal)); }
    .prod-card-head.amber { background:linear-gradient(135deg,#3a2a10,#7a5020); } */
    .prod-tier { position:absolute; top:1rem; right:1rem; padding:0.2rem 0.7rem; border-radius:20px; font-size:0.7rem; font-weight:700; letter-spacing:0.5px; }
    .tier-entry { background:rgba(46,170,160,0.3); color:#7ef5ee; }
    .tier-mid   { background:rgba(100,140,255,0.3); color:#aac4ff; }
    .tier-prem  { background:rgba(232,160,32,0.3); color:#f5d070; }
    .prod-card-head h3 { font-family:'Raleway',sans-serif; font-size:1.5rem; font-weight:800; color:#fff; }
    .prod-card-head p { color:rgba(255,255,255,0.65); font-size:0.83rem; margin-top:0.3rem; }
    .prod-card-body { padding:1.5rem; }
    .feat-list { list-style:none; margin-bottom:1rem; }
    .feat-list li { display:flex; align-items:flex-start; gap:0.6rem; padding:0.4rem 0; color:var(--text); font-size:0.88rem; border-bottom:1px solid var(--border); }
    .feat-list li:last-child { border:none; }
    .feat-list li::before { content:'✦'; color:var(--teal); font-size:0.65rem; margin-top:3px; flex-shrink:0; }
    .perf-row { display:flex; align-items:center; gap:0.5rem; margin:0.4rem 0; font-size:0.8rem; }
    .perf-label { min-width:88px; color:var(--teal); font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; }
    .dot-f { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--teal); }
    .dot-e { display:inline-block; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--border); }

    /* Colors swatches */
    .swatch-row { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
    .swatch { text-align:center; }
    .swatch-circle { width:48px; height:48px; border-radius:50%; margin:0 auto 0.35rem; border:3px solid rgba(255,255,255,0.8); box-shadow:0 2px 8px rgba(0,0,0,0.15); }

    /* Thickness bars */
    .thick-section { background:var(--light-bg); border-radius:10px; padding:1.5rem; }
    .thick-row { display:flex; align-items:center; gap:1rem; margin-bottom:0.7rem; }
    .thick-idx { min-width:65px; font-weight:700; font-size:0.85rem; color:var(--primary); }
    .thick-wrap { flex:1; background:var(--border); border-radius:4px; height:13px; overflow:hidden; }
    .thick-bar { height:100%; border-radius:4px; }
    .bar-teal { background:linear-gradient(90deg,var(--teal),var(--teal-lt)); }
    .bar-purple { background:linear-gradient(90deg,#7c3aed,#b060f0); }
    .thick-val { min-width:65px; text-align:right; font-size:0.82rem; color:var(--text); }

    /* Special cards */
    .special-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
    .special-card { background:var(--white); border-radius:10px; padding:1.8rem; box-shadow:var(--shadow); border-top:4px solid var(--teal); border-bottom:1px solid var(--border); border-left:1px solid var(--border); border-right:1px solid var(--border); transition:all 0.3s; }
    .special-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-top-color:var(--accent); }
    .special-card .icon { font-size:2.2rem; margin-bottom:0.8rem; }
    .special-card h4 { font-family:'Raleway',sans-serif; font-size:1.1rem; font-weight:800; color:var(--primary); margin-bottom:0.4rem; }
    .special-card .tag { font-size:0.72rem; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:1px; margin-bottom:0.7rem; display:block; }
    .special-card p { color:var(--text); font-size:0.87rem; line-height:1.75; }

    /* Addon cards */
    .addon-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
    .addon-card { background:var(--white); border-radius:8px; padding:1.3rem; border:1px solid var(--border); text-align:center; transition:all 0.3s; }
    .addon-card:hover { border-color:var(--teal); box-shadow:var(--shadow); }
    .addon-card h5 { font-family:'Raleway',sans-serif; font-size:0.95rem; font-weight:700; color:var(--primary); margin-bottom:0.35rem; }
    .addon-card p { color:var(--text); font-size:0.82rem; line-height:1.6; }
    .addon-price { color:var(--teal); font-weight:700; font-size:1rem; margin-top:0.4rem; }

    /* Price table tiers */
    .t-comet { color:var(--teal); font-weight:700; }
    .t-elite { color:#4a7aef; font-weight:700; }
    .t-stellar { color:#c08020; font-weight:700; }
    .price-snowy { color:var(--teal); font-weight:600; }
    .price-olive { color:#9a6800; font-weight:600; }
    .price-lapis { color:#1a5fa0; font-weight:600; }


/* ============================================================
   CONTACT PAGE — Contact page specific styles
   ============================================================ */

.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:3.5rem; align-items:start; }
    .contact-info-card { background:var(--primary); border-radius:12px; padding:2.5rem; color:white; }
    .contact-info-card h3 { font-family:'Raleway',sans-serif; font-size:1.6rem; font-weight:800; margin-bottom:0.5rem; }
    .contact-info-card h3 em { color:var(--accent); font-style:normal; }
    .contact-info-card > p { color:rgba(255,255,255,0.7); line-height:1.8; margin-bottom:2rem; font-size:0.92rem; }
    .ci-item { display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
    .ci-icon { width:44px; height:44px; background:rgba(255,255,255,0.1); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
    .ci-text strong { display:block; color:white; font-size:0.92rem; margin-bottom:0.2rem; }
    .ci-text span { color:rgba(255,255,255,0.65); font-size:0.86rem; line-height:1.6; }
    .hours-table { margin-top:2rem; border-top:1px solid rgba(255,255,255,0.12); padding-top:1.5rem; }
    .hours-table h5 { font-family:'Raleway',sans-serif; font-size:0.9rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); margin-bottom:1rem; }
    .hours-row { display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:0.85rem; }
    .hours-row span:first-child { color:rgba(255,255,255,0.7); }
    .hours-row span:last-child { color:white; font-weight:600; }
    .form-card { background:white; border-radius:12px; padding:2.5rem; box-shadow:0 4px 24px rgba(30,58,95,0.10); border:1px solid var(--border); }
    .form-card h3 { font-family:'Raleway',sans-serif; font-size:1.5rem; font-weight:800; color:var(--primary); margin-bottom:0.4rem; }
    .form-card h3 em { color:var(--accent); font-style:normal; }
    .form-card > p { color:var(--text); font-size:0.88rem; margin-bottom:1.8rem; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .map-section { background:var(--light-bg); border-radius:12px; overflow:hidden; height:280px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); margin-top:2rem; }
    .map-placeholder { text-align:center; }
    .map-placeholder .icon { font-size:3rem; margin-bottom:0.8rem; }
    .map-placeholder p { color:var(--text-lt); font-size:0.9rem; }
    .faq-list { margin-top:3rem; }
    .faq-item { background:white; border-radius:8px; border:1px solid var(--border); margin-bottom:0.8rem; overflow:hidden; }
    .faq-q { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; cursor:pointer; font-family:'Raleway',sans-serif; font-weight:700; font-size:0.95rem; color:var(--primary); }
    .faq-q:hover { background:var(--light-bg); }
    .faq-q .arrow { transition:transform 0.3s; color:var(--teal); }
    .faq-item.open .faq-q .arrow { transform:rotate(180deg); }
    .faq-a { display:none; padding:0 1.5rem 1.2rem; color:var(--text); font-size:0.88rem; line-height:1.8; border-top:1px solid var(--border); padding-top:1rem; }
    .faq-item.open .faq-a { display:block; }
    @media(max-width:768px) { .contact-grid { grid-template-columns:1fr; } .form-row { grid-template-columns:1fr; } }


/* ============================================================
   TRACKING PAGE — Order tracking page specific styles
   ============================================================ */

/* Tracking page specific */
    .track-hero { background: url('../images/page-heading-bg-old.jpg') no-repeat center center;
  background-size: cover;
  filter: brightness(0.45);
   padding:70px 0; position:relative; overflow:hidden; }
    .track-hero::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(46,170,160,0.06); top:-120px; right:-80px; }
    .track-hero-inner { display:grid; grid-template-columns:1.1fr 0.9fr; gap:4rem; align-items:center; position:relative; z-index:2; }
    .track-hero-text h1 { font-family:'Raleway',sans-serif; font-size:clamp(2rem,4vw,2.8rem); font-weight:900; color:white; }
    .track-hero-text h1 em { color:var(--accent); font-style:normal; }
    .track-hero-text p { color:rgba(255,255,255,0.7); line-height:1.8; margin:0.8rem 0 0; font-size:0.95rem; }
    .track-form-card { background:white; border-radius:12px; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
    .track-form-card h4 { font-family:'Raleway',sans-serif; font-size:1.2rem; font-weight:800; color:var(--primary); margin-bottom:0.4rem; }
    .track-form-card p { color:var(--text); font-size:0.85rem; margin-bottom:1.2rem; }
    .track-input-row { display:flex; gap:0.75rem; }
    .track-input-row .form-control { flex:1; }
    .sample-ids { margin-top:0.75rem; font-size:0.78rem; color:var(--text-lt); }
    .sample-ids span { background:var(--light-bg); padding:0.15rem 0.5rem; border-radius:4px; font-weight:600; margin-left:0.3rem; color:var(--teal); cursor:pointer; border:1px solid var(--border); }
    .sample-ids span:hover { background:var(--teal); color:white; }

    /* Order detail layout */
    .order-detail-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:2rem; margin-top:2rem; }
    .order-summary-section h5 { font-family:'Raleway',sans-serif; font-size:1rem; font-weight:800; color:var(--primary); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--border); }
    .order-timeline-section h5 { font-family:'Raleway',sans-serif; font-size:1rem; font-weight:800; color:var(--primary); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid var(--border); }

    /* All Orders Table */
    .orders-table-section { margin-top:3rem; }
    .orders-table-section h3 { font-family:'Raleway',sans-serif; font-size:1.4rem; font-weight:800; color:var(--primary); margin-bottom:0.5rem; }
    .orders-table-section p { color:var(--text); font-size:0.88rem; margin-bottom:1.5rem; }
    .filter-row { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; align-items:center; }
    .filter-row select, .filter-row input { padding:0.55rem 1rem; border:1px solid var(--border); border-radius:6px; font-family:'Open Sans',sans-serif; font-size:0.85rem; color:var(--text); background:white; outline:none; }
    .filter-row select:focus, .filter-row input:focus { border-color:var(--teal); }
    .filter-row label { font-size:0.82rem; font-weight:700; color:var(--text-lt); text-transform:uppercase; letter-spacing:0.5px; }

    /* Status indicator in table */
    .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
    .sd-delivered { background:#1a8c5a; }
    .sd-transit   { background:#1a5fa0; }
    .sd-processing{ background:#9a6800; }
    .sd-cancelled { background:#c0392b; }

    /* Progress bar in table */
    .progress-mini { height:6px; background:var(--border); border-radius:3px; overflow:hidden; min-width:80px; }
    .progress-mini-fill { height:100%; border-radius:3px; }
    .pf-25 { width:25%; background:#f0c040; }
    .pf-50 { width:50%; background:#4a7aef; }
    .pf-75 { width:75%; background:#2eaaa0; }
    .pf-100 { width:100%; background:#1a8c5a; }

    /* Pagination */
    .pagination { display:flex; gap:0.4rem; justify-content:center; margin-top:1.5rem; }
    .page-btn { padding:0.5rem 0.9rem; border:1px solid var(--border); border-radius:5px; background:white; font-size:0.85rem; cursor:pointer; color:var(--text); transition:all 0.2s; font-family:'Raleway',sans-serif; font-weight:600; }
    .page-btn:hover, .page-btn.active { background:var(--primary); color:white; border-color:var(--primary); }

    /* How it works */
    .how-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
    .how-step { text-align:center; padding:1.8rem 1rem; background:white; border-radius:10px; box-shadow:var(--shadow); border:1px solid var(--border); position:relative; }
    .step-num { width:44px; height:44px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Raleway',sans-serif; font-size:1.2rem; font-weight:800; color:white; margin:0 auto 1rem; }
    .how-step h5 { font-family:'Raleway',sans-serif; font-size:0.95rem; font-weight:700; color:var(--primary); margin-bottom:0.4rem; }
    .how-step p { color:var(--text); font-size:0.82rem; line-height:1.6; }

    @media(max-width:900px) { .track-hero-inner { grid-template-columns:1fr; } .order-detail-grid { grid-template-columns:1fr; } }
    @media(max-width:600px) { .track-input-row { flex-direction:column; } }