/* Dentaline LUX (Business / Premium) */

:root{
  --ink:#0b1220;
  --ink2:#111b2e;
  --muted:#6b7280;
  --line:rgba(15,23,42,.10);
  --glass:rgba(255,255,255,.76);
  --gold1:#f5d38a;
  --gold2:#caa14a;
  --gold3:#8a6a2a;
  --emerald:#10b981;
}

html, body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; overflow-x: hidden; }
*,*::before,*::after{ box-sizing:border-box; }
img,svg,video,canvas{ max-width:100%; height:auto; }
h1,h2,h3,.lux-serif{ font-family: ui-serif, Georgia, "Times New Roman", serif; letter-spacing: -.02em; }

/* subtle noise */
.noise{
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .28;
  pointer-events:none;
}

/* Lux cards */
.card{
  border-radius: 1.6rem;
  border: 1px solid var(--line);
  background: var(--glass);
  box-shadow: 0 16px 50px rgba(2,6,23,.10);
  backdrop-filter: blur(14px);
}

.lux-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border-radius: 999px;
  border: 1px solid rgba(202,161,74,.28);
  background: linear-gradient(90deg, rgba(245,211,138,.18), rgba(202,161,74,.10));
  padding: .45rem .8rem;
  color: rgba(17,27,46,.85);
  font-weight: 600;
  font-size: .9rem;
}

.lux-gradient{
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(245,211,138,.26), transparent 55%),
    radial-gradient(850px 420px at 88% 20%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 55%);
}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, var(--gold2), var(--gold1));
  color: var(--ink);
  padding: .9rem 1.15rem;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(202,161,74,.25);
  border: 1px solid rgba(202,161,74,.38);
}
.btn-primary:hover{ filter: brightness(.98); transform: translateY(-1px); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 1.1rem;
  border: 1px solid rgba(17,27,46,.16);
  padding: .9rem 1.15rem;
  font-weight: 800;
  color: rgba(17,27,46,.78);
  background: rgba(255,255,255,.70);
}
.btn-ghost:hover{ transform: translateY(-1px); }

.input{
  width:100%;
  border-radius: 1.1rem;
  border: 1px solid rgba(17,27,46,.18);
  background: rgba(255,255,255,.92);
  padding: .9rem 1rem;
  outline: none;
}
.input:focus{
  border-color: rgba(202,161,74,.60);
  box-shadow: 0 0 0 7px rgba(245,211,138,.18);
}

.label{ display:block; font-size:.85rem; font-weight:800; color: rgba(17,27,46,.74); }

.navlink{ font-size:.95rem; font-weight:700; color: rgba(17,27,46,.72); }
.navlink:hover{ color: rgba(11,18,32,1); }

.social{
  display:inline-flex; align-items:center; justify-content:center;
  height: 42px; width: 42px;
  border-radius: 1.1rem;
  border: 1px solid rgba(17,27,46,.14);
  background: rgba(255,255,255,.75);
  color: rgba(17,27,46,.75);
}
.social:hover{ transform: translateY(-1px); }

/* premium whatsapp floating */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display:flex; align-items:center; gap:.65rem;
  border-radius: 999px;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, rgba(16,185,129,1), rgba(16,185,129,.82));
  color: white;
  font-weight: 800;
  box-shadow: 0 18px 45px rgba(16,185,129,.25);
}
.wa-float small{ font-weight:600; opacity:.92; }

/* Signature */
.signature{
  display:block;
  width: min(680px, 100%);
  max-width: 680px;
  height: auto;
  opacity: .98;
}
/* Certificates */
.filter-chip{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(17,27,46,.16);
  padding: .55rem 1rem;
  font-weight: 800;
  font-size: .92rem;
  background: rgba(255,255,255,.70);
  color: rgba(17,27,46,.78);
}
.filter-chip:hover{ transform: translateY(-1px); }
.filter-chip.is-active{
  border-color: rgba(202,161,74,.55);
  background: linear-gradient(135deg, rgba(202,161,74,.18), rgba(245,211,138,.14));
  color: rgba(11,18,32,1);
}

.cert-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .18s ease;
  background: linear-gradient(180deg, rgba(11,18,32,.08), rgba(11,18,32,.35));
}
.cert-overlay span{
  display:inline-flex; align-items:center;
  border-radius: 999px;
  padding: .55rem 1rem;
  background: rgba(255,255,255,.18);
  color: white;
  font-weight: 900;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25);
}
.cert-card:hover .cert-overlay,
.cert-thumb:hover .cert-overlay{ opacity:1; }

/* Lightbox */
.lb-backdrop{ position:fixed; inset:0; z-index:80; display:none; background: rgba(2,6,23,.70); padding: 24px; }
.lb-backdrop.is-open{ display:flex; align-items:center; justify-content:center; }
.lb-card{
  width:min(1100px, 95vw);
  max-height: 92vh;
  overflow:hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  box-shadow: 0 25px 80px rgba(0,0,0,.35);
}
.lb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 16px; border-bottom: 1px solid rgba(15,23,42,.12); }
.lb-caption{ font-weight: 900; color: rgba(11,18,32,1); font-size: .95rem; }
.lb-close, .lb-nav{
  display:inline-flex; align-items:center; justify-content:center;
  height: 44px; width: 44px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  color: rgba(11,18,32,.85);
  font-weight: 900;
}
.lb-close:hover, .lb-nav:hover{ transform: translateY(-1px); }
.lb-body{ position:relative; background: rgba(2,6,23,.04); }
.lb-body img{ width:100%; height:auto; max-height: 78vh; object-fit: contain; display:block; }
.lb-nav-wrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding: 0 12px; pointer-events:none; }
.lb-nav{ pointer-events:auto; }


/* WATERMARK (subtle pattern) */
main.lux-gradient{ position: relative; overflow: hidden; }
main.lux-gradient::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("/assets/img/logo.png");
  background-repeat: repeat;
  background-size: 180px;
  background-position: 0 0;
  opacity: .035;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  transform: rotate(-10deg) scale(1.12);
  transform-origin: center;
}
main.lux-gradient > *{ position: relative; }
@media (max-width: 640px){
  main.lux-gradient::before{ background-size: 140px; opacity: .03; }
}


/* Bayezit Media credit */
.bayezit-credit{
  font-family: "Allura", cursive;
  font-size: 22px;
  line-height: 1;
  color: #caa14a;
  letter-spacing: .02em;
}
.bayezit-credit:hover{ text-decoration: underline; }


/* Horizontal slider scroll (home top visuals) */
.lux-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(17,27,46,.20) transparent;
}
.lux-scroll::-webkit-scrollbar{ height: 10px; }
.lux-scroll::-webkit-scrollbar-track{ background: transparent; }
.lux-scroll::-webkit-scrollbar-thumb{
  background: rgba(17,27,46,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}


/* Auto marquee (home top visuals)
   NOTE: We use clip-path to avoid any accidental horizontal overflow on mobile. */
.lux-marquee{
  overflow: hidden;
  max-width: 100%;
  clip-path: inset(0);
  contain: paint;
}
.lux-marquee-track{
  display:flex;
  width: max-content;
  gap: 1rem;
  animation: luxMarquee 20s linear infinite;
  will-change: transform;
}
.lux-marquee-item{ flex: 0 0 auto; }
.lux-marquee:hover .lux-marquee-track{ animation-play-state: paused; }

/* Certificate chips (home) */
.cert-chip{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:200px;
  min-width:200px;
  padding:12px;
  border-radius:18px;
  background: rgba(255,255,255,.86);
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
  text-decoration:none;
}
.cert-chip:focus{ outline:2px solid rgba(202,161,74,.55); outline-offset:3px; }
.cert-chip-img{
  width:100%;
  height:120px;
  object-fit:contain;
  border-radius:14px;
  background: rgba(248,250,252,.92);
  border:1px solid rgba(15,23,42,.08);
}
.cert-chip-title{
  font-size:12px;
  line-height:1.25;
  color:#0b1220;
  opacity:.86;
}
@media (max-width: 640px){
  .cert-chip{ width:160px; min-width:160px; padding:10px; border-radius:16px; }
  .cert-chip-img{ height:104px; border-radius:12px; }
}
@keyframes luxMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .lux-marquee-track{ animation: none; }
}


/* Single-image carousel (home top visuals) — lightweight + mobile friendly */
.lux-carousel{ max-width: 100%; }
.lux-carousel-viewport{
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(226,232,240,.7);
  background: rgba(255,255,255,.7);
}
.lux-carousel-viewport > a{ display:block; }
.lux-carousel-img{
  width: 100%;
  height: clamp(240px, 55vw, 460px);
  object-fit: contain;
  background: #fff;
  display:block;
}
.lux-carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  height: 44px;
  width: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(15,23,42,.35);
  color: #fff;
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lux-carousel-btn:hover{ background: rgba(15,23,42,.5); }
.lux-carousel-prev{ left: 12px; }
.lux-carousel-next{ right: 12px; }

.lux-carousel-footer{
  margin-top: .8rem;
  display:flex;
  gap: .75rem;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lux-carousel-dots{ display:flex; gap: .4rem; align-items:center; }
.lux-carousel-dot{
  height: 8px;
  width: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.8);
  border: 0;
}
.lux-carousel-dot[aria-current="true"]{ width: 18px; background: rgba(245,158,11,.9); }

.lux-carousel-toggle{
  display:flex;
  gap:.4rem;
  align-items:center;
  padding: .45rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.7);
  background: rgba(255,255,255,.7);
  color: #334155;
  font-weight: 700;
  font-size: .85rem;
}
.lux-carousel-toggle:hover{ background: rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce){
  .lux-carousel-btn{ transition:none; }
}



/* -------------------------------------------------------
   Mobile performance: disable expensive effects
------------------------------------------------------- */
@media (max-width: 768px){
  .noise{ display:none !important; }
  header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background: rgba(255,255,255,.96) !important; }
  .card{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background: rgba(255,255,255,.96) !important; }
  .btn-ghost{ background: rgba(255,255,255,.92) !important; }
}


/* Certificates carousel (home) */
.cert-carousel .lux-carousel-viewport{
  aspect-ratio: 16 / 9;
  max-height: 520px;
  background: rgba(255,255,255,.55);
}
.cert-carousel .lux-carousel-img{ object-fit: contain; }

.cert-carousel-caption{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.cert-carousel-caption .cert-title{
  font-weight: 800;
  color: #0f172a;
  letter-spacing: .2px;
}
.cert-carousel-caption .cert-sub{
  font-size: 13px;
  color: #64748b;
}

@media (max-width: 640px){
  .cert-carousel .lux-carousel-viewport{
    aspect-ratio: 4 / 3;
    max-height: 360px;
  }
}


/* Back to top button */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 32px rgba(2,6,23,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.to-top.is-show{ opacity:1; transform: translateY(0); pointer-events:auto; }
.to-top:hover{ background:#fff; }

@media (max-width:640px){
  .to-top{ bottom: 86px; right: 14px; }
}

/* Reduce expensive effects on low-end devices */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}
/* Minimal utility fallbacks (prevents layout glitches before Tailwind loads) */
.hidden{display:none !important;}
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}

@supports (overflow: clip){
  html,body{overflow-x:clip;}
}
html,body{touch-action:pan-y;}

/* --- Performance + no horizontal overflow --- */
img,video,canvas,svg{max-width:100%;height:auto;}

/* Disable heavy visual layers that can cause scroll jank */
.noise{display:none !important;}

/* Keep ultra-subtle brand pattern without expensive blending/filters */
main.lux-gradient::before{
  opacity: .02;
  mix-blend-mode: normal;
  filter: none;
  transform: none;
}

/* On tablets/phones the watermark is fully disabled for smooth scrolling */
@media (max-width: 1024px){
  main.lux-gradient::before{ display:none; }
}

/* Remove backdrop-filter globally to prevent freezing on scroll */
header, .card{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}



/* Photo chips (home showcase marquee) */
.photo-chip{
  display:block;
  width:280px;
  min-width:280px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 12px 32px rgba(2,6,23,.14);
  background: rgba(255,255,255,.76);
  text-decoration:none;
}
.photo-chip:focus{ outline:2px solid rgba(202,161,74,.55); outline-offset:3px; }
.photo-chip-img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}
@media (max-width: 640px){
  .photo-chip{ width:220px; min-width:220px; border-radius:18px; }
  .photo-chip-img{ height:140px; }
}