/*
Theme Name: Zoovit
Theme URI: https://zoovit.org
Author: Ekaterina Avyshegor
Author URI: https://zoovit.org
Description: Профессиональный лендинг для зоолога-нутрициолога Екатерины. Современный дизайн в оранжево-фиолетовой палитре.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
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: zoovit
Tags: one-page, landing-page, custom-colors
*/

/* ── RESET & ROOT ─────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:  #f94500;
  --orange2: #f77a11;
  --cream:   #f4efea;
  --dark:    #1a0035;
  --dark2:   #220048;
  --amber:   #ffc844;
  --white:   #fffdf9;
  --radius:  14px;
}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:var(--cream);color:var(--dark);overflow-x:hidden}

/* ── NAV ─────────────────────────────────────── */
nav#main-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2.5rem;height:60px;
  background:rgba(26,0,53,0.95);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(249,69,0,0.2);
  transition:background 0.3s;
}
.nav-logo-link{text-decoration:none;display:flex;align-items:center}
ul.nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center;margin:0;padding:0}
ul.nav-links li a,ul.nav-links a{
  font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(244,239,234,.65);text-decoration:none;
  transition:color .2s;
}
ul.nav-links li a:hover,ul.nav-links a:hover{color:var(--cream)}
.nav-cta,ul.nav-links li.nav-cta a{
  background:var(--orange)!important;color:var(--cream)!important;
  padding:.45rem 1.2rem;border-radius:30px;
  box-shadow:0 0 18px rgba(249,69,0,.35);
  transition:box-shadow .2s,transform .15s!important;
}
.nav-cta:hover,ul.nav-links li.nav-cta a:hover{
  box-shadow:0 0 28px rgba(249,69,0,.55)!important;
  transform:translateY(-1px)!important;
}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.nav-burger span{display:block;width:22px;height:2px;background:var(--cream);border-radius:2px;transition:all .25s}

/* ── HERO ─────────────────────────────────────── */
.hero{
  min-height:auto;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(255,200,68,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 50%, rgba(255,255,255,.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1' fill='%23f4efea' opacity='0.07'/%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-left{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:4rem 2rem 3rem;
  position:relative;z-index:1;
  max-width:900px;width:100%;
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--cream);opacity:.7;margin-bottom:2rem;
}
.hero-tag::before,.hero-tag::after{
  content:'';display:block;width:28px;height:1.5px;
  background:var(--cream);opacity:.7;
}
.hero-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(3.5rem,9vw,8rem);
  font-weight:900;line-height:.9;
  letter-spacing:-.04em;text-transform:uppercase;
  color:var(--cream);margin-bottom:1.6rem;
}
.hero-title .stroke{
  color:transparent;
  -webkit-text-stroke:2.5px var(--cream);
}
.hero-name{
  font-family:'Caveat',cursive;
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  font-weight:700;color:rgba(244,239,234,.55);
  letter-spacing:.05em;margin-bottom:1.5rem;
}
.hero-desc{
  font-size:1rem;font-weight:600;line-height:1.75;
  color:rgba(244,239,234,.78);
  max-width:500px;margin-bottom:2.5rem;text-align:center;
}
.hero-desc em{font-style:normal;color:var(--amber);font-weight:800}
.btn-dark{
  display:inline-block;background:var(--dark);color:var(--cream);
  font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:.9rem 2.2rem;border-radius:50px;border:none;
  text-decoration:none;cursor:pointer;
  box-shadow:4px 4px 0 rgba(0,0,0,.25);transition:all .15s;
}
.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,0,0,.3);color:var(--amber)}

/* ── KEYWORDS BAR ───────────────────────────── */
.keywords-bar{
  background:var(--dark);
  padding:1.1rem 2.5rem;
  border-top:2px solid var(--orange);
  border-bottom:1px solid rgba(249,69,0,.2);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.5rem .2rem;
}
.kw-item{
  font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--cream);white-space:nowrap;padding:.2rem .9rem;
}
.kw-dot{color:var(--orange);font-size:1.1rem;line-height:1;display:flex;align-items:center}

/* ── SERVICES ───────────────────────────────── */
.services-section{background:var(--dark2);padding:3rem 5rem}
.section-head{margin-bottom:2rem}
.section-eyebrow{
  font-family:'Unbounded',sans-serif;font-size:.55rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--orange);margin-bottom:.8rem;display:block;
}
.section-head h2{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:900;line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;color:var(--cream);
}
.section-head h2 em{font-style:normal;-webkit-text-stroke:1.5px var(--cream);color:transparent}
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;border:1px solid rgba(244,239,234,.06);
}
.svc-card{
  background:rgba(244,239,234,.03);
  padding:2rem 1.75rem;
  border:1px solid rgba(244,239,234,.06);
  transition:background .2s;position:relative;overflow:hidden;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.svc-card:hover{background:rgba(244,239,234,.06)}
.svc-card:hover::before{transform:scaleX(1)}
.svc-num{
  font-family:'Unbounded',sans-serif;font-size:.52rem;font-weight:700;
  color:var(--orange);letter-spacing:.08em;margin-bottom:1.2rem;display:block;
}
.svc-icon{font-size:1.8rem;margin-bottom:.75rem;display:block}
.svc-card h3{
  font-family:'Unbounded',sans-serif;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--cream);margin-bottom:.6rem;line-height:1.3;
}
.svc-card p{font-size:.82rem;line-height:1.65;color:rgba(244,239,234,.5);font-weight:600}

/* ── STATS ──────────────────────────────────── */
.stats-section{
  background:var(--orange);padding:3rem 5rem;
  display:grid;grid-template-columns:repeat(3,1fr);
  position:relative;overflow:hidden;
}
.stats-section::before{
  content:'';position:absolute;
  width:600px;height:600px;border-radius:50%;
  background:rgba(255,255,255,.05);
  top:-200px;right:-200px;pointer-events:none;
}
.stat{
  text-align:center;padding:2rem 1.5rem;
  border-right:1px solid rgba(244,239,234,.2);position:relative;
}
.stat:last-child{border-right:none}
.stat-num{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(3rem,6vw,5.5rem);
  font-weight:900;line-height:1;color:var(--cream);
  display:block;margin-bottom:.6rem;
}
.stat-lbl{
  font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(244,239,234,.65);line-height:1.65;display:block;
}

/* ── ABOUT ──────────────────────────────────── */
.about-section{
  background:var(--cream);padding:3.5rem 5rem;
  display:grid;grid-template-columns:380px 1fr;gap:5rem;align-items:center;
}
.about-photo-wrap{position:relative}
.about-frame-outer{
  position:absolute;top:20px;left:20px;right:-20px;bottom:-20px;
  border:2.5px solid var(--orange);border-radius:var(--radius);
}
.about-photo{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 15%;
  border-radius:var(--radius);display:block;position:relative;z-index:1;
}
.about-photo-placeholder{
  width:100%;aspect-ratio:3/4;border-radius:var(--radius);
  background:linear-gradient(160deg,#f0d8c0 0%,#dab8a0 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;position:relative;z-index:1;
}
.about-photo-placeholder span:first-child{font-size:4rem}
.about-photo-placeholder p{
  font-family:'Unbounded',sans-serif;font-size:.52rem;font-weight:700;
  color:rgba(28,17,5,.3);text-transform:uppercase;letter-spacing:.1em;text-align:center;
}
.about-badge{
  position:absolute;bottom:-16px;right:24px;z-index:2;
  background:var(--orange);color:var(--cream);
  font-family:'Unbounded',sans-serif;font-size:.52rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.5rem 1rem;border-radius:30px;
  box-shadow:3px 3px 0 rgba(26,0,53,.15);
}
.about-text .section-head{margin-bottom:1.5rem}
.about-text .section-head h2{color:var(--dark)}
.about-text .section-head h2 em{color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.about-text p{
  font-size:.92rem;line-height:1.78;font-weight:600;
  color:rgba(26,0,53,.65);margin-bottom:1rem;
}
.about-text p em{font-style:normal;color:var(--orange);font-weight:800}
.about-quote{
  margin:1.5rem 0;border-left:3px solid var(--orange);
  padding:.9rem 1.5rem;background:rgba(249,69,0,.05);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:'Caveat',cursive;font-size:1.15rem;font-weight:700;
  color:var(--dark);line-height:1.55;
}

/* ── TIPS ───────────────────────────────────── */
.tips-section{background:var(--dark2);padding:3rem 5rem}
.tips-section .section-head h2{color:var(--cream)}
.tips-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
.tip-card{
  background:rgba(244,239,234,.04);
  border:1px solid rgba(244,239,234,.08);
  border-radius:var(--radius);overflow:hidden;transition:all .2s;
}
.tip-card:hover{background:rgba(244,239,234,.08);transform:translateY(-4px)}
.tip-thumb{
  width:100%;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;border-bottom:1px solid rgba(244,239,234,.08);
}
.tip-card:nth-child(1) .tip-thumb{background:rgba(249,69,0,.12)}
.tip-card:nth-child(2) .tip-thumb{background:rgba(247,122,17,.12)}
.tip-card:nth-child(3) .tip-thumb{background:rgba(255,200,68,.1)}
.tip-body{padding:1.4rem}
.tip-cat{
  display:inline-block;background:var(--orange);color:var(--cream);
  font-family:'Unbounded',sans-serif;font-size:.5rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.2rem .7rem;border-radius:4px;margin-bottom:.7rem;
}
.tip-body h3{
  font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:700;
  text-transform:uppercase;color:var(--cream);margin-bottom:.5rem;line-height:1.3;
}
.tip-body p{font-size:.8rem;line-height:1.65;color:rgba(244,239,234,.5);font-weight:600;margin-bottom:.8rem}
.tip-link{
  font-family:'Unbounded',sans-serif;font-size:.55rem;font-weight:700;
  color:var(--orange);text-decoration:none;letter-spacing:.06em;
  border-bottom:1px solid rgba(249,69,0,.4);padding-bottom:1px;
  transition:border-color .2s;
}
.tip-link:hover{border-color:var(--orange)}

/* ── APPROACH ───────────────────────────────── */
.approach-section{background:var(--orange);padding:3rem 5rem}
.approach-section .section-head h2{color:var(--cream)}
.approach-section .section-head h2 em{-webkit-text-stroke:1.5px var(--cream)}
.approach-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.5px;margin-top:3rem;
  border:1.5px solid rgba(244,239,234,.15);
}
.approach-item{
  padding:2.2rem 2rem;background:rgba(244,239,234,0);
  border:1.5px solid rgba(244,239,234,.15);
  display:flex;gap:1.5rem;align-items:flex-start;transition:background .2s;
}
.approach-item:hover{background:rgba(244,239,234,.08)}
.approach-num{
  font-family:'Unbounded',sans-serif;font-size:2.8rem;font-weight:900;
  color:rgba(244,239,234,.18);line-height:1;flex-shrink:0;letter-spacing:-.04em;
}
.approach-item h3{
  font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--cream);margin-bottom:.5rem;line-height:1.3;
}
.approach-item p{font-size:.82rem;line-height:1.65;color:rgba(244,239,234,.65);font-weight:600}

/* ── CTA ────────────────────────────────────── */
.cta-section{
  background:var(--dark);padding:3.5rem 5rem;
  text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  width:700px;height:700px;border-radius:50%;
  border:1px solid rgba(249,69,0,.08);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.cta-section::after{
  content:'';position:absolute;
  width:400px;height:400px;border-radius:50%;
  border:1px solid rgba(249,69,0,.12);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.cta-eyebrow{
  font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--orange);margin-bottom:1.2rem;display:block;
}
.cta-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(2rem,5vw,4.5rem);
  font-weight:900;line-height:1;
  text-transform:uppercase;letter-spacing:-.02em;
  color:var(--cream);margin-bottom:1rem;
}
.cta-title em{font-style:normal;color:var(--orange)}
.cta-sub{
  font-size:.92rem;font-weight:600;color:rgba(244,239,234,.45);
  line-height:1.7;max-width:440px;margin:0 auto 2.5rem;
}
.btn-orange{
  display:inline-block;background:var(--orange);color:var(--cream);
  font-family:'Unbounded',sans-serif;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:1rem 2.5rem;border-radius:50px;border:none;
  text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 rgba(249,69,0,0);transition:all .2s;
  position:relative;z-index:1;
}
.btn-orange:hover{box-shadow:0 0 40px rgba(249,69,0,.5);transform:scale(1.03)}

/* ── FOOTER ─────────────────────────────────── */
.footer-wrap{background:var(--cream)}
.footer-divider{
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
}
footer.site-footer{
  padding:2.5rem 5rem;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:1.5rem;
}
.footer-email a{
  font-family:'Unbounded',sans-serif;font-size:.75rem;font-weight:700;
  color:var(--orange);text-decoration:none;text-align:center;display:block;transition:opacity .2s;
}
.footer-email a:hover{opacity:.75}
.footer-right{text-align:right}
.footer-nav{display:flex;gap:1.5rem;list-style:none;justify-content:flex-end;margin-bottom:.3rem;flex-wrap:wrap;padding:0}
.footer-nav a{
  font-family:'Unbounded',sans-serif;font-size:.52rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:rgba(26,0,53,.35);text-decoration:none;transition:color .2s;
}
.footer-nav a:hover{color:var(--orange)}
.footer-copy{font-size:.65rem;font-weight:600;color:rgba(26,0,53,.3)}
.footer-paw{text-align:center;padding:.6rem;font-size:1.1rem;background:var(--cream)}

/* ── WAVE DIVIDERS ─────────────────────────── */
.div-wave{line-height:0;display:block}
.div-wave svg{display:block;width:100%}

/* ── SCROLL ANIMATIONS ─────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* ── MOBILE ─────────────────────────────────── */
@media(max-width:900px){
  nav#main-nav{padding:0 1.5rem}
  ul.nav-links{
    display:none;flex-direction:column;position:absolute;
    top:60px;left:0;right:0;
    background:rgba(26,0,53,.97);backdrop-filter:blur(14px);
    padding:1.5rem;gap:1rem;
    border-bottom:1px solid rgba(249,69,0,.2);z-index:199;
  }
  ul.nav-links.open{display:flex}
  .nav-burger{display:flex}
  .hero-left{padding:7rem 1.5rem 4rem}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .services-section,.about-section,.tips-section,.approach-section,.cta-section{padding:4rem 1.5rem}
  .stats-section{padding:4rem 1.5rem;grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid rgba(244,239,234,.2)}
  .stat:last-child{border-bottom:none}
  .about-section{grid-template-columns:1fr;gap:3rem}
  .about-photo-wrap{max-width:240px;margin:0 auto}
  .tips-grid{grid-template-columns:1fr}
  .approach-grid{grid-template-columns:1fr}
  footer.site-footer{grid-template-columns:1fr;text-align:center;padding:2rem 1.5rem}
  .footer-right{text-align:center}
  .footer-nav{justify-content:center}
  .keywords-bar{padding:.8rem 1rem}
}
@media(max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .hero-title{font-size:2.6rem}
  .cta-title{font-size:2rem}
  nav#main-nav{padding:0 1.25rem}
}