/* ---- Typography rhythm ---- */
body{-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}

/* ---- Calmer, cleaner card hover (was -6px + very heavy shadow) ---- */
.card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.38)}
.feat,.info-card,.sb-rd-card,.sb-frt-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.feat:hover,.info-card:hover{transform:translateY(-3px);border-color:var(--line2)}

/* ---- Buttons: subtle, consistent press feedback ---- */
.btn{transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.btn:active{transform:translateY(0);box-shadow:none}

/* ---- Accessible focus states (branded green ring) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--green,#62d196);outline-offset:2px;border-radius:8px}

/* ---- Unified form fields ---- */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=number],select,textarea{
  transition:border-color .18s ease,box-shadow .18s ease;border-radius:10px}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
input[type=search]:focus,input[type=tel]:focus,input[type=number]:focus,
select:focus,textarea:focus{
  border-color:var(--green,#62d196)!important;
  box-shadow:0 0 0 3px rgba(98,209,150,.14)!important;outline:none}

/* ---- Branded scrollbar ---- */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:10px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28);background-clip:content-box}
html.sb-light *{scrollbar-color:rgba(15,23,42,.22) transparent}
html.sb-light *::-webkit-scrollbar-thumb{background:rgba(15,23,42,.2);background-clip:content-box}

/* ---- FAQ: smoother open/close + clearer affordance ---- */
.faq-item{transition:border-color .2s ease}
.faq-item:hover{border-color:var(--line2)}

/* ---- Images never overflow their cards ---- */
.card .thumb img,.pd-visual img{transition:transform .4s ease}
.card:hover .thumb img{transform:scale(1.03)}

/* ---- Selection colour on brand ---- */
::selection{background:rgba(98,209,150,.28);color:#fff}
html.sb-light ::selection{color:#0f172a}

/* ---- Smooth in-page anchor scrolling (hero "Browse Catalog" etc.) ---- */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
section[id]{scroll-margin-top:90px}

/* ---- Quality tabs: clearer active state ---- */
.qtab{border-radius:100px;transition:background .2s ease,border-color .2s ease,color .2s ease}
.qtab.active{background:rgba(255,255,255,.12);border-color:var(--green,#5cc0ff);color:var(--txt,#fff)}

/* ---- Newsletter panel alignment ---- */
.news-form input[type=email]{min-width:240px}

/* ---- Tighter section rhythm on small screens ---- */
@media(max-width:640px){
  .sec{padding:56px 0}
  .wrap{padding:0 18px}
}