/*
Theme Name: Skinova
Theme URI: https://skinovamed.com
Author: WebVue
Author URI: https://webvue.com.lb
Description: Skinova — premium dermocosmetic marketing theme. Photography-first, fully mobile responsive. Auto-creates all site pages on activation and routes contact + newsletter submissions to the site admin email (works with Fluent SMTP for reliable delivery).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skinova
*/

/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --ink:#12263f; --navy:#1b3c5e; --teal:#2f9bab; --teal-deep:#1f7a89; --teal-tint:#e9f5f7;
  --mist:#f4f8fa; --parchment:#f4f8fa; --body:#51616f; --ink-soft:#51616f; --muted:#8598a5;
  --canvas:#ffffff; --line:#e6edf1;
  --brand:#2f9bab; --brand-bright:#4fbdcd; --brand-deep:#1f7a89; --brand-ink:#12263f;
  --dark:#12263f; --dark-2:#1b3c5e;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --serif:"Hanken Grotesk",system-ui,sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
::selection{background:var(--teal);color:#fff;}
a{text-decoration:none;color:var(--teal-deep);}
a:hover{color:var(--teal);}
img{display:block;max-width:100%;}
main{overflow-x:hidden;background:var(--canvas);}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--mist)}
::-webkit-scrollbar-thumb{background:#cfe0e6;border-radius:8px}

/* =========================================================
   REVEAL
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
[data-reveal].is-in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:#fff;background:var(--ink);padding:9px 9px 9px 24px;border-radius:999px;transition:background .3s,transform .15s;}
.btn-primary .btn-chip{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;transition:background .3s,color .3s;}
.btn-primary:hover{background:var(--teal);color:#fff;}
.btn-primary:hover .btn-chip{background:#fff;color:var(--teal);}
.btn-primary:active{transform:scale(.97);}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);padding:13px 26px;border-radius:999px;transition:border-color .3s,color .3s,transform .15s;}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep);}
.btn-ghost:active{transform:scale(.97);}

/* =========================================================
   PRELOADER
   ========================================================= */
@keyframes hmPre{0%{opacity:0;transform:translateY(14px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes hmBar{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}

/* =========================================================
   NAV
   ========================================================= */
.sn-link{position:relative;}
.sn-link::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--teal);border-radius:2px;transition:right .3s cubic-bezier(.16,1,.3,1);}
.sn-link:hover::after{right:0;}
.sn-link:hover{color:var(--ink)!important;}
#sn-mobile{opacity:0;pointer-events:none;transition:opacity .4s ease;}
#sn-mobile[data-open]{opacity:1;pointer-events:auto;}
.sn-mrow{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.3,1);}
#sn-mobile[data-open] .sn-mrow{opacity:1;transform:none;}
.sn-mlink{transition:color .3s,padding-left .3s;}
.sn-mrow:hover .sn-mlink{color:var(--teal)!important;padding-left:6px;}
.sn-burger{display:none;}
@media(max-width:900px){.sn-desk{display:none!important;}.sn-burger{display:flex!important;}}

/* =========================================================
   FOOTER
   ========================================================= */
.sf-link{transition:color .25s,padding-left .25s;position:relative;}
.sf-link:hover{color:#fff!important;padding-left:4px;}
.sf-social{transition:color .25s,border-color .25s,background .25s,transform .25s;}
.sf-social:hover{color:#0c1b2e!important;background:#5cc4d3!important;border-color:#5cc4d3!important;transform:translateY(-2px);}
.sf-input:focus{outline:none;border-color:#5cc4d3!important;background:rgba(255,255,255,.08)!important;}
.sf-input::placeholder{color:rgba(255,255,255,.4);}
.sf-sub{transition:background .25s,transform .2s;}
.sf-sub:hover{background:#5cc4d3!important;}
.sf-sub:active{transform:scale(.96);}
.sf-legal a{transition:color .25s;color:#5cc4d3;}
.sf-legal a:hover{color:#fff!important;}

/* =========================================================
   HOME
   ========================================================= */
.hm-tile:hover .hm-tileimg{transform:scale(1.04) translateY(-4px);}
.hm-tile:hover{box-shadow:0 32px 70px -40px rgba(18,38,63,.4);transform:translateY(-5px);border-color:#d6e6ea;}
.hm-exp:hover{box-shadow:0 32px 70px -40px rgba(18,38,63,.4);transform:translateY(-5px);border-color:#d6e6ea;}
.hm-exp:hover .hm-explink{gap:12px;color:var(--teal-deep);}
.hm-row:hover .hm-rowtitle{color:var(--teal-deep);}
.hm-row:hover .hm-rowarrow{transform:translateX(6px);color:var(--teal-deep);}

/* =========================================================
   ABOUT
   ========================================================= */
.ab-value:hover{box-shadow:0 30px 66px -42px rgba(18,38,63,.42);transform:translateY(-5px);border-color:#d6e6ea;}
.ab-value:hover .ab-vnum{color:var(--teal);}

/* =========================================================
   PRODUCTS / PRODUCT
   ========================================================= */
.pr-card:hover{box-shadow:0 34px 74px -42px rgba(18,38,63,.42);transform:translateY(-6px);border-color:#d6e6ea;}
.pr-card:hover .pr-img{transform:scale(1.05) translateY(-4px);}
.pr-card:hover .pr-disc{gap:12px;color:var(--teal-deep);}
.pr-tab:active{transform:scale(.96);}
.pr-rel:hover{box-shadow:0 34px 74px -42px rgba(18,38,63,.42);transform:translateY(-6px);border-color:#d6e6ea;}
.pr-rel:hover .pr-relimg{transform:scale(1.05) translateY(-4px);}
@keyframes prFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* =========================================================
   CONTACT
   ========================================================= */
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.rj-field{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:15px 17px;outline:none;transition:border-color .25s,box-shadow .25s;}
.rj-field:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(47,155,171,.1);}
.rj-field::placeholder{color:var(--muted);}
.rj-topic{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;transition:all .2s;user-select:none;display:inline-block;}
.rj-topic:hover{border-color:var(--teal);color:var(--teal-deep);}
.rj-topic-input:checked + .rj-topic{background:var(--ink);border-color:var(--ink);color:#fff;}
.rj-card{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;}
.rj-card:hover{transform:translateY(-6px);box-shadow:0 40px 80px -50px rgba(18,38,63,.5);}

/* =========================================================
   ROUTINE
   ========================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rj-opt{transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s,background .3s;}
.rj-opt:hover{transform:translateY(-5px);border-color:var(--teal);box-shadow:0 20px 44px -26px rgba(47,155,171,.5);}
.rj-step:hover .rj-stepimg{transform:scale(1.06) translateY(-4px);}
.rj-step:hover{border-color:#d6e6ea;box-shadow:0 30px 64px -40px rgba(18,38,63,.4);transform:translateY(-6px);}

/* =========================================================
   SCIENCE / MMHA / PDRN — animated visuals
   ========================================================= */
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(34px,-28px)}100%{transform:translate(0,0)}}
@keyframes drift2{0%{transform:translate(0,0)}50%{transform:translate(-30px,26px)}100%{transform:translate(0,0)}}
@keyframes descend{0%{transform:translateY(-12px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(440px);opacity:0}}
@keyframes helix{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
@keyframes sonar{0%{transform:scale(.18);opacity:.85}100%{transform:scale(1.9);opacity:0}}

/* =========================================================
   RESPONSIVE — layout collapses
   ========================================================= */
@media(max-width:1040px){
  .rj-optrow{grid-template-columns:repeat(2,1fr)!important;}
  .rj-steprow{grid-template-columns:1fr!important;}
}
@media(max-width:1020px){
  .pr-hero{grid-template-columns:1fr!important;gap:48px!important;}
  .pr-hero .pr-stage{order:1;}
  .pr-hero .pr-copy{order:2;}
  .pr-benhead{grid-template-columns:1fr!important;gap:20px!important;}
  .pr-rel3{grid-template-columns:1fr 1fr!important;}
  .pr-ritual{grid-template-columns:1fr!important;gap:34px!important;}
}
@media(max-width:980px){
  .hm-hero,.hm-split{grid-template-columns:1fr!important;gap:44px!important;}
  .hm-stats,.hm-exp3,.hm-prod3{grid-template-columns:1fr!important;}
  .hm-row{grid-template-columns:40px 1fr 24px!important;}
  .hm-rowsub{display:none!important;}
  .ab-hero,.ab-story{grid-template-columns:1fr!important;gap:44px!important;}
  .ab-mv{grid-template-columns:1fr!important;}
  .ab-values{grid-template-columns:1fr 1fr!important;}
  .rj-csplit,.rj-frow,.rj-quickcards{grid-template-columns:1fr!important;}
  .rj-bizbar{flex-direction:column!important;align-items:flex-start!important;}
  .rj-herowrap{padding-top:120px!important;}
  .rj-intro{grid-template-columns:1fr!important;gap:36px!important;}
  .rj-intro>div:last-child{padding-top:0!important;}
  .rj-panel{grid-template-columns:1fr!important;gap:40px!important;}
  .rj-panel.rev>.rj-copy{order:2!important;}
  .rj-vis{display:none!important;}
  .rj-cmp{grid-template-columns:1fr!important;gap:18px!important;}
  .rj-vs{position:static!important;margin:0 auto!important;transform:none!important;}
  .rj-frac{grid-template-columns:1fr!important;}
  .rj-mlh{grid-template-columns:1fr!important;gap:44px!important;}
  .rj-split{grid-template-columns:1fr!important;gap:44px!important;}
  .lab-stats{grid-template-columns:1fr!important;}
  .rj-herogrid{grid-template-columns:1fr!important;gap:48px!important;}
  .rj-herovis{display:none!important;}
  .rj-tier,.rj-trends,.rj-types,.rj-benefits{grid-template-columns:1fr!important;}
  .rj-penmodel{grid-template-columns:1fr!important;gap:40px!important;}
  .rj-steps{grid-template-columns:1fr 1fr!important;}
  .rj-facts{grid-template-columns:1fr!important;}
  .rj-routines{grid-template-columns:1fr!important;gap:32px!important;}
}
@media(max-width:760px){
  main>section{padding-top:72px!important;padding-bottom:72px!important;padding-left:20px!important;padding-right:20px!important;}
  main>section:first-child{padding-top:118px!important;}
  .rj-herowrap{padding-top:116px!important;padding-bottom:172px!important;}
  #rj-results{padding-top:0!important;padding-bottom:0!important;}
}
@media(max-width:620px){
  .pr-grid{grid-template-columns:1fr!important;}
  .pr-ben4{grid-template-columns:1fr 1fr!important;}
  .pr-rel3{grid-template-columns:1fr!important;}
  .pr-meta{flex-wrap:wrap;gap:20px!important;}
  .pr-tabs{gap:10px!important;}
  .rj-tierhead,.rj-benefithead{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;}
  .rj-steps{grid-template-columns:1fr!important;}
  .sf-grid{grid-template-columns:1fr!important;}
  .sf-bot{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:16px!important;}
  .sf-inrow{flex-direction:column!important;}
  .sf-sub{width:100%!important;}
}
@media(max-width:960px){
  .sf-grid{grid-template-columns:1fr 1fr!important;gap:44px 32px!important;}
  .sf-brandcol{grid-column:1 / -1!important;}
}
@media(max-width:560px){
  .rj-optrow{grid-template-columns:1fr!important;}
}
@media(max-width:430px){
  h1{font-size:40px!important;}
}

/* WP admin bar offset for fixed nav */
.admin-bar #skinova-nav{top:32px;}
@media(max-width:782px){.admin-bar #skinova-nav{top:46px;}}