/* ====================================================================
   CRITICAL CSS — inline so nothing blocks the first paint
   ==================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0098a6;--teal-d:#006f7a;--teal-l:#00d4e8;
  --teal-glow:rgba(0,212,232,.18);
  --dark:#0d1f23;--dark2:#152830;--dark3:#1c3540;
  --mid:#5a7a82;--light-txt:#a8c4ca;
  --white:#fff;--off:#f3f9fa;
  --border:rgba(0,152,166,.2);--border-l:rgba(0,212,232,.12);
  --font-heading:"Helvetica Neue",Helvetica,Roboto,sans-serif;
  --font-body:Roboto,Helvetica,sans-serif;
}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--dark);line-height:1.7;font-size:15px;overflow-x:hidden;font-family:var(--font-body);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}
p{font-family:var(--font-body)}
a{color:var(--teal);text-decoration:none}
img{display:block;max-width:100%;height:auto}

/* Respect user motion preference (required for Lighthouse best-practices) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Off-screen sections get skipped during first paint.
   This is the single biggest rendering-speed win for long pages. */
.cv-auto{content-visibility:auto}

/* --------header-css--------- */
.sh-topbar{background:#096e7b;padding:8px 52px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sh-topbar-info{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.sh-info-item{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.8);font-size:12.5px}
.sh-info-item svg{width:15px;height:15px;stroke:rgba(255,255,255,.65);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sh-info-item a{color:rgba(255,255,255,.85);text-decoration:none;transition:color .15s}
.sh-info-item a:hover{color:#fff}
.sh-socials{display:flex;align-items:center;gap:7px}
.sh-soc{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:.5px solid rgba(255,255,255,.25);text-decoration:none;transition:transform .15s,opacity .15s}
.sh-soc:hover{transform:scale(1.1);opacity:.9}
.sh-soc svg{width:13px;height:13px}

.sh-navbar{background:#fff;border-bottom:3px solid #0a7e8c;padding:0 52px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}
.sh-logo{display:flex;align-items:center;padding:12px 0;flex-shrink:0;text-decoration:none}
.sh-logo img{height:70px;width:auto;object-fit:contain;display:block}
.sh-logo-fallback{display:flex;align-items:center;gap:10px}
.sh-logo-text{font-size:17px;font-weight:800;color:#0a7e8c;letter-spacing:.06em;line-height:1.1}
.sh-logo-text span{display:block;font-size:9px;color:#888;font-weight:400;letter-spacing:.18em;text-transform:uppercase}
.sh-nav{display:flex;align-items:stretch;list-style:none;height:100%}
.sh-nav li a{display:flex;align-items:center;padding:0 16px;height:58px;font-size:15px;font-weight:600;text-transform:uppercase;color:#444;text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;transition:color .18s,border-color .18s;position:relative;top:3px}
.sh-nav li a:hover{color:#0a7e8c;border-bottom-color:#0a7e8c}
.sh-nav li a.active{color:#fff;background:#0a7e8c;border-bottom-color:#0a7e8c}
.sh-nav li a.active:hover{color:#fff}

.sh-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;flex-shrink:0}
.sh-hamburger span{display:block;width:22px;height:2px;background:#444;border-radius:2px;transition:all .25s ease}
.sh-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sh-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.sh-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.sh-mobile-menu{display:none;flex-direction:column;background:#fff;border-top:1px solid #e8e8e8;position:absolute;top:100%;left:0;right:0;z-index:999;box-shadow:0 8px 32px rgba(0,0,0,.12);overflow:hidden;max-height:0;transition:max-height .3s ease}
.sh-mobile-menu.open{display:flex;max-height:600px}
.sh-mobile-menu a{display:block;padding:14px 24px;font-size:14px;font-weight:500;color:#444;text-decoration:none;border-bottom:1px solid #f0f0f0;transition:background .15s,color .15s}
.sh-mobile-menu a:last-child{border-bottom:none}
.sh-mobile-menu a:hover{background:#f0fafb;color:#0a7e8c}
.sh-mobile-menu a.active{background:#0a7e8c;color:#fff}

.mobile-dropdown{border-bottom:1px solid #f0f0f0}
.mobile-dropdown-toggle{padding:14px 24px;font-size:14px;font-weight:500;color:#444;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.mobile-dropdown-toggle:hover{background:#f0fafb;color:#0a7e8c}
.mobile-dropdown .arrow{font-size:18px;transition:transform .3s ease}
.mobile-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;background:#fafafa}
.mobile-submenu a{padding:12px 40px;font-size:13px;border-bottom:1px solid #eee}
.mobile-dropdown.open .mobile-submenu{max-height:400px}
.mobile-dropdown.open .arrow{transform:rotate(45deg)}

.menu-item{position:relative}
.new-dropdown{position:absolute;top:100%;left:0;background:#fff;min-width:240px;display:none;padding:0;border-top:5px solid #096e7b;z-index:999}
.new-dropdown li{list-style:none}
.new-dropdown li a{display:block!important;padding:10px 20px!important;color:#444;text-decoration:none;font-size:14px!important;transition:.3s!important;text-transform:capitalize!important}
.new-dropdown li a:hover{background:#096e7b;color:#fff}
.menu-item:hover .new-dropdown{display:block}

@media (max-width:1024px){.sh-topbar{padding:8px 36px}.sh-socials{display:none}}
@media (max-width:991px){.new-dropdown{display:none;position:static}.has-dropdown.active .new-dropdown{display:block}}
@media (max-width:1024px){.sh-hamburger{display:flex}.sh-nav{display:none}}
@media (max-width:768px){.sh-topbar{padding:8px 20px}.sh-topbar-info .sh-info-item:first-child{display:none}.sh-navbar{padding:0 20px}.sh-nav{display:none}.sh-hamburger{display:flex}}
@media (max-width:520px){.sh-topbar-info .sh-info-item:nth-child(2){display:none}.sh-topbar{display:none}.sh-logo img{height:56px}.new-breadcrumb{padding:12px 22px!important}}

.wrap{max-width:1240px;margin:0 auto;padding:0 12px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--teal-l);margin-bottom:14px}
.eyebrow-bar{width:28px;height:2px;background:var(--teal-l);border-radius:2px;display:block}
.sec-title{font-size:clamp(28px,3.8vw,36px);font-weight:900;color:var(--dark);line-height:1.15;margin-bottom:18px}
.sec-title span{color:var(--teal)}
.sec-title--w{color:#fff}
.sec-sub{font-size:18px;color:#000;line-height:1.8}
.sec-sub--w{color:var(--light-txt)}
.gline{width:64px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--teal-l));text-align:left;margin:16px 0 28px}
.gline-c{margin-left:auto;margin-right:auto}
.color-head .gline{width:64px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--teal-l));text-align:center;margin:16px auto 20px}
.my-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 32px;border-radius:8px;border:none;cursor:pointer;font-family:Roboto,sans-serif;font-size:15px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;transition:all .28s ease}
.btn-p{background:linear-gradient(135deg,#fff 0%,#fff 100%);color:#04545e;box-shadow:0 6px 28px rgba(0,152,166,.35)}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(0,212,232,.45)}
.btn-g{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3)}
.btn-g:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}
.btn-w{background:#fff;color:var(--teal-d);box-shadow:0 4px 20px rgba(0,0,0,.1)}
.btn-w:hover{background:var(--off);transform:translateY(-2px)}

/* INTRO (above-the-fold, must render immediately) */
.intro-sec{background:linear-gradient(160deg,#0d1f23 0%,#152830 45%,#0d2530 100%);padding:40px 0 60px;position:relative;overflow:hidden}
.intro-grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,212,232,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,232,.04) 1px,transparent 1px);background-size:60px 60px}
.intro-sec::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,232,.07) 0%,transparent 65%);top:-150px;right:-100px;pointer-events:none}
.intro-sec::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(0,152,166,.1) 0%,transparent 65%);bottom:-100px;left:10%;pointer-events:none}
.intro-sec-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch;position:relative;z-index:1}
.intro-vid-col{position:sticky;top:100px;height:fit-content}
@media only screen and (max-width:992px){.intro-vid-col{position:unset}}
.intro-sec{overflow:visible}
.vid-frame{position:relative;border-radius:24px;overflow:hidden;width:100%;max-width:100%;height:600px;border:1px solid rgba(0,212,232,.2);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(0,212,232,.1);background:#000;cursor:pointer}
@media only screen and (max-width:767px){.vid-frame{height:300px;}.intro-sec::before{right:0;width:360px}.intro-sec::after{left:0;width:360px}}
@media only screen and (max-width:992px){.intro-sec::before{right:0;width:360px}.intro-sec::after{left:0;width:360px}}
@media only screen and (max-width:1199px){.intro-sec::after,.intro-sec::before{display:none}}
.vid-frame video{width:100%;height:100%;display:block}
.vid-frame img{width:100%;height:100%;display:block;object-fit:cover}
.vid-play-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:background .2s}
.vid-frame:hover .vid-play-overlay{background:rgba(0,0,0,.25)}
.vid-play-btn{width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.6);border:3px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.vid-frame:hover .vid-play-btn{transform:scale(1.08)}
.vid-play-btn svg{width:26px;height:26px;fill:#fff;margin-left:5px}

.intro-sec-content{display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.intro-sec-content h1{font-size:clamp(26px,3.2vw,40px);margin:0;font-weight:900;color:#fff;line-height:1.15}
.intro-sec-content h1 em{font-style:normal;background:linear-gradient(90deg,var(--teal-l),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.intro-sec-paras p{font-size:15px;color:#ffffffeb;line-height:26px;margin-bottom:12px}
.intro-sec-paras p:last-child{margin-bottom:0}
.intro-sec-cta{margin-top:32px;padding-top:28px;border-top:1px solid rgba(0,212,232,.15)}

/* COLOR CHOICE */
.colors-choice{padding:60px 0;background:#fff;position:relative;overflow:hidden;contain-intrinsic-size:auto 900px}
.colors-choice::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--teal-d),var(--teal),var(--teal-l),var(--teal),var(--teal-d))}
.color-head{display:flex;align-items:flex-end;justify-content:space-evenly;margin-bottom:15px;gap:20px;flex-wrap:wrap}
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.color-grid-wrap.hidden{display:none}
.ccard{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;cursor:pointer;background:#0d1f23}
.ccard:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(0,152,166,.25)}
.ccard-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s}
.ccard:hover .ccard-img{transform:scale(1.06)}
@media (max-width:767px){.ccard:hover .ccard-img{transform:unset}.ccard:hover{transform:unset;box-shadow:unset}}
.ccard-label{position:absolute;bottom:0;left:0;right:0;padding:28px 18px 16px;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);color:#fff;font-size:14px;font-weight:800}

/* Lightbox */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.lb-overlay.open{opacity:1;pointer-events:all}
.lb-box{position:relative;max-width:min(700px,90vw);width:100%;animation:lb-in .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes lb-in{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
.lb-img{width:100%;object-fit:cover;border-radius:20px;display:block}
.lb-label{text-align:center;color:#fff;font-size:15px;font-weight:800;margin-top:16px;letter-spacing:1px}
.lb-counter{text-align:center;color:rgba(255,255,255,.45);font-size:12px;margin-top:6px;letter-spacing:.5px}
.lb-close{position:fixed;top:22px;right:26px;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1;opacity:.7;transition:opacity .2s}
.lb-close:hover{opacity:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;width:48px;height:48px;border-radius:50%;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;backdrop-filter:blur(4px)}
.lb-nav:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:-64px}
.lb-next{right:-64px}
@media(max-width:860px){.lb-prev{left:-4px;top:auto;bottom:-66px;transform:none}.lb-next{right:-4px;top:auto;bottom:-66px;transform:none}.lb-box{max-width:88vw}}

/* PRODUCTS PAGE GRID */
.products-showcase{
  max-width:1240px;
  margin:0 auto 46px;
  padding:0 22px;
}
.products-showcase__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}
.product-card{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,126,140,.16);
  box-shadow:0 12px 28px rgba(13,31,35,.08);
  text-decoration:none;
  transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
  isolation:isolate;
}
.product-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(130deg,rgba(255,255,255,0) 45%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 55%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  z-index:2;
  pointer-events:none;
}
.product-card:hover{
  transform:translateY(-9px);
  border-color:rgba(0,126,140,.4);
  box-shadow:0 22px 42px rgba(10,126,140,.22);
}
.product-card:hover::before{
  transform:translateX(120%);
}
.product-card__media{
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(145deg,#10333a,#1d4e56);
}
.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease,filter .45s ease;
}
.product-card:hover .product-card__media img{
  transform:scale(1.07);
  filter:saturate(1.08) contrast(1.05);
}
.product-card__title-wrap{
  padding:16px 16px 18px;
  background:linear-gradient(180deg,#fff 0%,#f4f9fa 100%);
}
.product-card__title{
  margin:0;
  color:#102f35;
  font-size:17px;
  line-height:1.35;
  font-weight:800;
  transition:color .25s ease,letter-spacing .25s ease;
}
.product-card:hover .product-card__title{
  color:#0a7e8c;
  letter-spacing:.2px;
}
@media (max-width:1024px){
  .products-showcase__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .products-showcase{
    padding:0 14px;
  }
  .products-showcase__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .product-card{
    border-radius:14px;
  }
  .product-card:hover{
    transform:none;
  }
  .product-card:hover .product-card__media img{
    transform:none;
    filter:none;
  }
}

/* SPECS */
.my-specs{padding:60px 0;background:linear-gradient(160deg,#0d1f23 0%,#152830 50%,#0d2530 100%);position:relative;overflow:hidden;contain-intrinsic-size:auto 700px}
.my-specs::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,232,.05) 0%,transparent 65%);top:-200px;right:-200px;pointer-events:none}
.specs-layout{grid-template-columns:1fr 1.5fr;gap:72px;align-items:start;position:relative;z-index:1}
.st-card{background:rgba(255,255,255,.03);border:1px solid var(--border-l);border-radius:20px;overflow:hidden;backdrop-filter:blur(8px);margin-top:30px}
.st{width:100%;border-collapse:collapse}
.st thead th{background:#0098a6;color:#fff;padding:16px 24px;text-align:left;font-size:16px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.st tbody tr{border-bottom:1px solid var(--border-l);transition:background .15s}
.st tbody tr:last-child{border-bottom:none}
.st tbody tr:hover{background:rgba(0,212,232,.05)}
.st td{padding:15px 24px;font-size:15px;vertical-align:top}
.st td:first-child{font-weight:700;color:#fff;width:42%}
.st td:last-child{color:var(--light-txt)}

/* Light variant for tables rendered on white sections */
.sizes-table-card{background:#fff;border:1px solid #d8e8eb;box-shadow:0 8px 24px rgba(11,42,48,.08)}
.sizes-table-card .st thead th{background:#0a7e8c}
.sizes-table-card .st tbody tr{border-bottom:1px solid #e6f0f2}
.sizes-table-card .st tbody tr:hover{background:#f4fbfc}
.sizes-table-card .st td:first-child{color:#0f2d33}
.sizes-table-card .st td:last-child{color:#274a50}

/* TYPES */
.my-types{padding:60px 0;background:#fff;overflow:hidden;position:relative;contain-intrinsic-size:auto 800px}
.my-types::after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,152,166,.04) 0%,transparent 65%);top:50%;left:-200px;transform:translateY(-50%)}
.types-head{text-align:center;margin-bottom:48px}
.types-head .eyebrow{justify-content:center}
.types-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:48px}
.tbtn{padding:18px 14px;border-radius:14px;border:2px solid #bbdde1;background:#fff;text-align:left;cursor:pointer;font-family:Roboto,sans-serif;transition:all .25s;position:relative;overflow:hidden}
.tbtn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--teal),var(--teal-l));opacity:0;transition:opacity .25s}
.tbtn:hover::before,.tbtn.active::before{opacity:1}
.tbtn-n{display:block;font-size:18px;font-weight:800;letter-spacing:2.5px;color:var(--teal);text-transform:uppercase;margin-bottom:8px;position:relative;z-index:1;transition:color .25s}
.tbtn-name{font-size:20px;font-weight:800;color:var(--dark);line-height:1.3;position:relative;z-index:1;transition:color .25s}
.tbtn:hover .tbtn-n,.tbtn.active .tbtn-n{color:rgba(255,255,255,.65)}
.tbtn:hover .tbtn-name,.tbtn.active .tbtn-name{color:#fff}
.tpanels{position:relative}
.tpanel{display:none;animation:fup .35s ease}
.tpanel.active{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@keyframes fup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.tvisual{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.15)}
.tvis-inner{width:100%;background:linear-gradient(145deg,#0d1f23,#1c3540);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.tvis-inner img{width:100%;height:auto;display:block}
.tbadge{display:none;position:absolute;bottom:20px;right:12px;background:rgba(0,152,166,.9);backdrop-filter:blur(8px);color:#fff;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:7px 16px;border-radius:6px;border:1px solid rgba(0,212,232,.3)}
.ttitle{font-size:28px;font-weight:900;color:var(--dark);line-height:1.2;margin-bottom:6px}
.tline{width:52px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--teal),var(--teal-l));margin:12px 0 22px}
.tdesc{font-size:16px;color:#000;line-height:1.85}
.pvd-finishes-lead,.pvd-finishes-note{font-size:16px;line-height:1.85;color:#0f2a30}
.pvd-finishes-list{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:10px}
.pvd-finishes-list li{position:relative;padding:12px 14px 12px 44px;border-radius:12px;background:linear-gradient(180deg,#f7fcfd 0%,#f1fafb 100%);border:1px solid rgba(0,152,166,.18);line-height:1.75;color:#102e35}
.pvd-finishes-list li::before{content:"\2713";position:absolute;left:14px;top:12px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(135deg,#0098a6,#00c3d6);box-shadow:0 4px 14px rgba(0,152,166,.35)}
.pvd-finishes-list li strong{color:#006f7a}
.vib-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vib-config-card{background:linear-gradient(180deg,#f6fbfc 0%,#eef8fa 100%);border:1px solid rgba(0,152,166,.18);border-radius:16px;padding:24px}
.vib-config-card .tdesc{margin-bottom:12px}
.vib-config-card .tdesc:last-child{margin-bottom:0}
.mirror-grade-table-wrap{margin-top:12px;overflow-x:auto;border:1px solid #c8c8c8;border-radius:10px;background:#fff}
.mirror-grade-table{width:100%;min-width:620px;border-collapse:collapse;color:#111}
.mirror-grade-table th,.mirror-grade-table td{border:1px solid #b5b5b5;padding:10px 12px;vertical-align:top;line-height:1.35}
.mirror-grade-table thead th{background:#f0f0f0;font-size:15px;font-weight:800;text-align:left}
.mirror-grade-table tbody td{font-size:14px}
@media only screen and (max-width:991px){.my-types p.sec-sub{text-align:left}}
@media only screen and (max-width:991px){.vib-config-grid{grid-template-columns:1fr}}

/* CTA */
.cta{padding:50px 0;border-radius:62px;background:linear-gradient(135deg,#0d1f23 0%,#0a2830 40%,#006f7a 100%);position:relative;overflow:hidden;text-align:center}
.cta-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,212,232,.12);top:50%;left:50%;transform:translate(-50%,-50%);animation:rexp 6s ease infinite;animation-play-state:paused;pointer-events:none;will-change:opacity}
.cta.is-in-view .cta-ring{animation-play-state:running}
.cta-ring:nth-child(1){width:200px;height:200px;animation-delay:0s}
.cta-ring:nth-child(2){width:400px;height:400px;animation-delay:1.2s}
.cta-ring:nth-child(3){width:600px;height:600px;animation-delay:2.4s}
.cta-ring:nth-child(4){width:800px;height:800px;animation-delay:3.6s}
.cta-ring:nth-child(5){width:1000px;height:1000px;animation-delay:4.8s}
@keyframes rexp{0%{opacity:.8;border-color:rgba(0,212,232,.22)}100%{opacity:0;border-color:rgba(0,212,232,0)}}
.cta-inner{position:relative;z-index:1}
.cta-kick{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--teal-l);margin-bottom:18px}
.cta-kick span{width:32px;height:1px;background:var(--teal-l);display:block}
.cta-title{font-size:clamp(28px,4.5vw,52px);font-weight:900;color:#fff;line-height:1.1;max-width:720px;margin:0 auto 36px}
.cta-title em{font-style:normal;color:var(--teal-l);font-size:30px}
.cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* CTA wrapper section */
.cta-wrap-section{margin-top:60px;contain-intrinsic-size:auto 500px}

/* FAQ */
.faq{padding:75px 0 90px;background:#fff;position:relative;overflow:hidden;contain-intrinsic-size:auto 800px}
.faq-layout{display:grid;grid-template-columns:1fr 1.8fr;gap:40px;align-items:start}
.faq-left{position:sticky;top:50px;background:linear-gradient(135deg,#ebebeb 0%,#d7d7d7 40%,#c6c6c6 100%);padding:40px 45px;border-radius:30px;border:1px solid #becfd1;box-shadow:rgba(0,0,0,.35) 0 5px 15px}
.faq-list{display:flex;flex-direction:column;gap:6px}
.fitem{border:1.5px solid #e8f4f6;border-radius:20px;overflow:hidden;transition:border-color .2s,box-shadow .2s;background:#fff;position:relative;height:auto}
.fitem.open{border-color:var(--teal);box-shadow:0 6px 28px rgba(0,152,166,.12)}
.fitem:hover{border-color:var(--teal)}
.fq{width:100%;background:#fff!important;border:1px solid #054b54;border-radius:20px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-family:Roboto,sans-serif;font-size:18px;font-weight:700;color:var(--dark);text-align:left;transition:background .2s}
.fq:hover{background:#f7fcfd}
.fitem.open .fq{background:linear-gradient(90deg,rgba(0,152,166,.06),transparent);color:var(--teal-d);border:0}
.fico{width:32px;height:32px;min-width:32px;border-radius:50%;background:linear-gradient(135deg,#e8f7f9,#d0f0f5);display:flex;align-items:center;justify-content:center;font-size:20px;font-style:normal;color:var(--teal);transition:all .28s cubic-bezier(.34,1.56,.64,1);line-height:1}
.fitem.open .fico{background:linear-gradient(135deg,var(--teal),var(--teal-l));color:#fff;transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);transition:all .35s ease;padding:0 26px}
.fitem.open .faq-answer{max-height:none;opacity:1;transform:translateY(0);padding:3px 20px 14px}
.faq-answer p{font-size:15px;color:#000;line-height:1.5;padding-top:0;margin:0}

/* RESPONSIVE */
@media(max-width:1100px){.intro-sec-layout{gap:40px}.specs-layout{grid-template-columns:1fr;gap:40px}}
@media(max-width:900px){
  .intro-sec-layout{grid-template-columns:1fr}
  .vid-frame{min-height:300px}
  .types-nav{grid-template-columns:1fr 1fr}
  .tpanel.active{grid-template-columns:1fr}
  .faq-layout{grid-template-columns:1fr;gap:40px}
  .faq-left{position:static}
  .color-grid{grid-template-columns:repeat(2,1fr)}
  .app2-grid{display:flex;flex-direction:column}
  .app2-title-block{order:1}
  .app2-right{order:2}
  .app2-list{order:3}
}
@media(max-width:600px){
  .wrap{padding:0 18px}
  .intro-sec{padding:20px 0 40px}
  .my-specs,.apps-sec,.cta,.faq,.colors-choice,.my-types{padding:45px 0}
  .color-grid{grid-template-columns:1fr 1fr;gap:12px}
  .types-nav{grid-template-columns:1fr 1fr;gap:8px}
  .tbtn{padding:14px 10px}
  .cta-title{font-size:26px}
  .fq{font-size:17px;padding:18px}
  .cta-btns{flex-direction:column;align-items:center}
  .faq-left{text-align:center;padding:40px 25px}
  .faq-layout .gline{margin:16px auto 28px}
  .intro-sec-content h1{text-align:center}
  .intro-sec-content .gline{margin:16px auto 28px}
  .intro-sec-cta{text-align:center; margin-top:0px;}
  .app2-grid{text-align:center}
  .app2-gline{margin:16px auto 28px!important}
  .tvis-inner{min-height:auto}
  .app2-left{order:2}
  .app2-rightt{order:1}
}

/* FOOTER */
.sf{background:#0a7e8c;color:#cdf0f4;contain-intrinsic-size:auto 600px}
.sf a{color:#cdf0f4;text-decoration:none;transition:color .18s}
.sf a:hover{color:#fff}
.sf-top{background:linear-gradient(135deg,#0d1f23 0%,#0a2830 40%,#006f7a 100%);border-bottom:1px solid rgba(255,255,255,.1);padding:18px 52px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.sf-top-text{font-size:15px;color:rgba(255,255,255,.7);letter-spacing:.02em}
.sf-top-cta{display:flex;align-items:center;gap:10px}
.sf-top-btn{background:rgba(255,255,255,.12);border:.5px solid rgba(255,255,255,.25);color:#fff;font-size:14px;padding:7px 18px;border-radius:6px;cursor:pointer;transition:background .18s;font-family:inherit}
.sf-top-btn:hover{background:rgba(255,255,255,.22)}
.sf-main{background:linear-gradient(135deg,#0d1f23 0%,#0a2830 40%,#006f7a 100%);padding:52px 52px 40px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:48px}
.sf-col-label{font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:22px;display:flex;align-items:center;gap:10px}
.sf-col-label::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.15)}
.sf-links{list-style:none;display:flex;flex-direction:column;gap:2px}
.sf-links li a{display:flex;align-items:center;gap:10px;font-size:15px;color:rgba(255,255,255,.7);padding:5px 0;transition:color .15s,padding-left .15s}
.sf-links li a:hover{color:#fff;padding-left:4px}
.sf-links li a .licon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-links li a .licon svg{width:22px;height:22px;stroke:rgba(255,255,255,.5);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s}
.sf-links li a:hover .licon svg{stroke:#fff}
.sf-cat-grid{display:flex;flex-direction:column;gap:8px}
.sf-cat-card{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(255,255,255,.08);border:.5px solid rgba(255,255,255,.14);border-radius:9px;transition:background .18s,border-color .18s}
.sf-cat-card:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.sf-cat-card:hover .sf-cat-name{color:#fff}
.sf-cat-ico{width:34px;height:34px;background:rgba(255,255,255,.12);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-cat-ico svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sf-cat-name{font-size:14px;color:rgba(255,255,255,.8);font-weight:400}
.sf-cat-pill{margin-left:auto;font-size:10px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.1);padding:3px 8px;border-radius:20px;letter-spacing:.04em}
.sf-social-grid{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.sf-social-row{display:flex;align-items:center;gap:11px;padding:8px 12px;background:rgba(255,255,255,.07);border:.5px solid rgba(255,255,255,.12);border-radius:8px;transition:background .18s}
.sf-social-row:hover{background:rgba(255,255,255,.15)}
.sf-social-row:hover .sf-sname{color:#fff}
.sf-sico{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-sico svg{width:14px;height:14px}
.sf-sname{font-size:13px;color:rgba(255,255,255,.75)}
.sf-shandle{margin-left:auto;font-size:11px;color:rgba(255,255,255,.3)}
.sf-contact-list{display:flex;flex-direction:column;gap:16px}
.sf-contact-item{display:flex;gap:12px;align-items:flex-start}
.sf-cico{width:34px;height:34px;background:rgba(255,255,255,.1);border:.5px solid rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-cico svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sf-cinfo{font-size:15px;line-height:1.8;color:rgba(255,255,255,.7)}
.sf-cinfo strong{display:block;font-size:12px;font-weight:600;color:#69cfdd;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.sf-cinfo a{color:rgba(255,255,255,.7)}
.sf-cinfo a:hover{color:#fff}
.sf-divider{border:none;border-top:1px solid rgba(255,255,255,.1);margin:0 52px}
.sf-bottom{background:linear-gradient(135deg,#0d1f23 0%,#0a2830 40%,#006f7a 100%);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px 52px 22px}
.sf-copy{font-size:14px;color:#fff}
.sf-blinks{display:flex;gap:20px}
.sf-blinks a{font-size:14px;color:rgba(255,255,255,.74);transition:color .15s}
.sf-blinks a:hover{color:#fff}
@media(max-width:1024px){.sf-main{gap:15px;padding:52px 30px 40px}}
@media(max-width:900px){.sf-main{grid-template-columns:1fr 1fr;gap:36px}.sf-top,.sf-divider,.sf-bottom{padding-left:28px;padding-right:28px}.sf-main{padding:40px 28px 32px}}
@media(max-width:520px){.sf-main{grid-template-columns:1fr}.sf-top,.sf-divider,.sf-bottom{padding-left:20px;padding-right:20px;text-align:center;margin:0 auto}.sf-top img{margin:0 auto}.sf-top-cta{margin:0 auto}.sf-main{padding:32px 20px}.sf-bottom{flex-direction:column;align-items:flex-start}.sf-blinks{margin:0 auto}}

/* BREADCRUMBS */
.new-breadcrumb{font-size:14px;padding:12px 52px;background:linear-gradient(160deg,#0d1f23 0%,#152830 45%,#0d2530 100%);color:#555;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.new-breadcrumb a{text-decoration:none;color:#fff;transition:.3s}
.new-breadcrumb a:hover{color:#01cbde;}
.new-breadcrumb span{color:#00ccdf}
.new-breadcrumb .active{color:#00ccdf;font-weight:500}
@media only screen and (max-width:767px){.new-breadcrumb{text-align:center;display:block}}

/* APP2 */
.app2-sec{background:linear-gradient(160deg,#0a1c20 0%,#122430 50%,#0a1e28 100%);padding:50px 0;position:relative;overflow:hidden;font-family:Roboto,Helvetica,sans-serif;contain-intrinsic-size:auto 900px}
.app2-pat{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(0,212,232,.06) 1px,transparent 1px);background-size:40px 40px;opacity:.6}
.app2-wrap{max-width:1240px;margin:0 auto;padding:0 15px}
.app2-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;align-items:center}
.app2-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#1dd4c4;margin-bottom:14px}
.app2-eyebrow-bar{width:28px;height:2px;background:#1dd4c4;border-radius:2px;display:block}
.app2-title{font-size:clamp(26px,3vw,40px);font-weight:900;color:#fff;line-height:1.18;margin-bottom:8px}
.app2-title span{color:#1dd4c4}
.app2-gline{width:52px;height:4px;border-radius:2px;background:linear-gradient(90deg,#0098a6,#00d4e8);margin:14px 0 20px}
.app2-intro{font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.85;margin-bottom:28px}
.app2-list{display:flex;flex-direction:column;gap:0}
.app2-item{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,212,232,.1);cursor:pointer;transition:all .2s}
.app2-item:last-child{border-bottom:none}
.app2-item.active2 .app2-item-dot{background:linear-gradient(135deg,#0098a6,#00d4e8);box-shadow:0 0 12px rgba(0,212,232,.5)}
.app2-item.active2 .app2-item-title{color:#1dd4c4}
.app2-item-dot{width:12px;height:12px;border-radius:50%;background:rgba(0,212,232,.25);border:2px solid rgba(0,212,232,.4);flex-shrink:0;margin-top:5px;transition:all .2s}
.app2-item-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:3px;transition:color .2s}
.app2-item-desc{font-size:14px;color:rgba(255,255,255,.77);line-height:1.65}
.app2-right{position:relative}
.app2-slider-wrap{position:relative;border-radius:20px;overflow:hidden;background:#0d1f23;border:1px solid rgba(0,212,232,.18);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.app2-slides{position:relative;width:100%;height:700px;overflow:hidden}
.app2-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none}
.app2-slide.active2{opacity:1;pointer-events:auto}
.app2-slide img{width:100%;height:100%;display:block;object-fit:cover}
.app2-slide-caption{position:absolute;bottom:0;left:0;right:0;padding:28px 20px 18px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);color:#fff;font-size:14px;font-weight:700}
.app2-slide-num{font-size:11px;color:rgba(255,255,255,.5);font-weight:400;margin-top:3px}
.app2-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s;backdrop-filter:blur(4px)}
.app2-arrow:hover{background:rgba(0,152,166,.7)}
.app2-arrow-l{left:12px}
.app2-arrow-r{right:12px}
.app2-progress{position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,#0098a6,#00d4e8);border-radius:0;transition:width .1s linear;z-index:4}
.app2-thumbs{display:flex;gap:8px;margin-top:20px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.app2-thumbs::-webkit-scrollbar{display:none}
.app2-thumb{flex-shrink:0;width:100px;height:100px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.6;transition:all .2s}
.app2-thumb.active2{border-color:#00d4e8;opacity:1;transform:translateY(-2px)}
.app2-thumb:hover{opacity:.85}
.app2-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
@media(max-width:900px){
  .app2-grid{display:flex;flex-direction:column;gap:24px}
  .app2-left{display:contents}
  .app2-head{order:1}
  .app2-right{order:2}
  .app2-list{order:3;text-align:left}
  .app2-intro{font-size:14px;margin-bottom:0}
  .app2-slides{height:400px}
}
@media(max-width:520px){.app2-wrap{padding:0 18px}.app2-sec{padding:48px 0}.app2-thumbs{flex-wrap: wrap !important;}.app2-thumb{width:85px;height:85px;}}

/* Mobile/tablet intro order with single H1 */
.intro-h1-top{display:none}
@media(max-width:900px){
  .intro-sec-layout{display:flex;flex-direction:column}
  .intro-h1-top{display:none!important}

  /* Flatten intro content so we can place heading before media on mobile. */
  .intro-sec-content{display:contents}
  .intro-sec-content>div:first-child{display:contents}

  .intro-sec-content h1{
    display:block;
    order:1;
    text-align:center;
    font-size:clamp(26px,5vw,36px);
    font-weight:900;
    color:#fff;
    line-height:1.15
  }
  .intro-sec-content h1 em{font-style:normal;background:linear-gradient(90deg,var(--teal-l),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .intro-sec-content>div>.gline{display:block;order:2;margin:16px auto 0;display:none;}
  .intro-vid-col{order:3}
  .intro-sec-paras{order:4}
  .intro-sec-cta{order:5}
}

/* BACK-TO-TOP (vanilla replacement, no Angular / no Moto) */
.back-to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;background:#0a7e8c;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .18s;z-index:900}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:#096e7b}
.back-to-top svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* VIDEO POPUP */
.video-popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;padding:16px}
.video-popup-overlay.open{display:flex}
.video-popup-inner{position:relative;width:100%;max-width:860px;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 32px 80px rgba(0,0,0,.7)}
.video-popup-close{position:absolute;top:12px;right:14px;z-index:10;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.65);border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;font-family:inherit;backdrop-filter:blur(4px)}
.video-popup-frame{position:relative;padding-top:56.25%}
.video-popup-frame video,.video-popup-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;display:block;background:#000;border:0}


.extra-sec.available-pvd-color-sec{
  padding: 60px 0 0px;
}
.extra-sec{
  padding: 60px 0;
}
.extra-sec h2{
  text-align: center;
}
.extra-sec .gline {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--teal), var(--teal-l));
    text-align: center;
    margin: 16px auto 20px;
}
.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch !important;
}

.table-responsive table{
  min-width:350px;
}
@media only screen and (max-width: 767px){
  .table-responsive .mirror-grade-table {
      min-width: unset;
    width: auto !important;
  }
}