/*
Theme Name: ReachVisi
Theme URI: https://www.yourdomain.com/
Author: ReachVisi
Description: Custom theme for the ReachVisi digital marketing website (SEO, AI visibility, PPC, social, content, web design). Every page of the original static site is included as a page template.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reachvisi
*/

body{margin:0}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
.navlink:hover{color:#ffffff}
.btn-primary:hover{background:#4A3BEA}
.btn-ghost:hover{background:rgba(255,255,255,0.10)}
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(14,18,38,0.10)}
.foot a:hover{color:#ffffff}
:focus-visible{outline:3px solid #2DD4BF;outline-offset:2px}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-track{display:flex;width:max-content;animation:scrollx 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}.card{transition:none}}
.social a:hover{background:#5B4BFF;border-color:#5B4BFF}
@media (prefers-reduced-motion: reduce){.card{transition:none}}
html{scroll-behavior:smooth}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
.faq-minus{display:none}
details[open] .faq-minus{display:block}
details[open] .faq-plus{display:none}
.skip-link{position:absolute;left:-9999px;top:8px;background:#ffffff;color:#0E1226;padding:10px 16px;border-radius:8px;z-index:100;font-weight:600}
.skip-link:focus{left:8px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---- mobile menu (CSS-only toggle; works without JavaScript) ---- */
.nav-toggle{width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,0.3);border-radius:12px;color:#ffffff;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-toggle:hover{background:rgba(255,255,255,0.10)}
.nav-toggle .icon-close{display:none}
.nav-check:checked ~ .nav-toggle .icon-open{display:none}
.nav-check:checked ~ .nav-toggle .icon-close{display:block}
.nav-check:focus-visible ~ .nav-toggle{outline:3px solid #2DD4BF;outline-offset:2px}
@media (max-width:1024px){
.site-header{padding:16px 24px!important}
.header-cta{display:none!important}
.nav-toggle{display:inline-flex!important}
.site-nav{display:none!important;order:3;width:100%;flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;background:#171C38;border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:6px 18px 18px}
.nav-check:checked ~ .site-nav{display:flex!important}
.site-nav .navlink{display:flex;align-items:center;min-height:50px;font-size:16px;border-bottom:1px solid rgba(255,255,255,0.10)!important}
.site-nav .navlink[style]{color:#2DD4BF!important}
.site-nav .nav-cta{display:flex!important;justify-content:center;margin-top:16px}
}

/* ---- header: Home link + Services dropdown ---- */
.nav-item{position:relative;display:flex;align-items:stretch}
.sub-check{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sub-toggle{display:inline-flex;align-items:center;padding-left:5px;color:inherit;pointer-events:none}
.sub-toggle svg{transition:transform .2s}
.nav-item:hover .sub-toggle svg,.nav-item:focus-within .sub-toggle svg{transform:rotate(180deg)}
.subnav{display:none;position:absolute;top:calc(100% + 10px);left:-16px;z-index:60;min-width:280px;margin:0;padding:8px;list-style:none;background:#171C38;border:1px solid rgba(255,255,255,0.12);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,0.35)}
.subnav::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-item:hover .subnav,.nav-item:focus-within .subnav{display:block}
.subnav a{display:block;padding:11px 14px;border-radius:10px;color:#C9CDE6;font-size:15px;font-weight:500;white-space:nowrap}
.subnav a:hover,.subnav a:focus-visible{background:rgba(255,255,255,0.08);color:#ffffff}
.subnav a[aria-current]{color:#2DD4BF}
@media (max-width:1024px){
.nav-item{flex-wrap:wrap;width:100%;border-bottom:1px solid rgba(255,255,255,0.10)}
.site-nav .nav-item>.navlink{flex:1 1 auto;border-bottom:0!important}
.sub-toggle{pointer-events:auto;width:50px;justify-content:center;padding:0;cursor:pointer}
.nav-item .subnav{display:none!important;position:static;width:100%;min-width:0;padding:0 0 8px 14px;background:transparent;border:0;box-shadow:none}
.subnav::before{display:none}
.sub-check:checked ~ .subnav{display:block!important}
.sub-check:checked ~ .sub-toggle svg{transform:rotate(180deg)}
.sub-check:focus-visible ~ .sub-toggle{outline:3px solid #2DD4BF;outline-offset:-3px;border-radius:8px}
.subnav a{white-space:normal;padding:12px 14px}
}

/* ---- animated illustrations (start when scrolled into view; static if JS or motion is off) ---- */
.illus *{transform-box:fill-box;transform-origin:center}
.illus .bar{transform-origin:50% 100%}
.illus .grow{transform-origin:0 50%}
.illus .draw{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes ill-fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ill-fl2{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(7px) scale(1.06)}}
@keyframes ill-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ill-tw{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.4}}
@keyframes ill-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ill-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ill-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ill-ring{from{stroke-dashoffset:470}to{stroke-dashoffset:0}}
@keyframes ill-ping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes ill-pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes ill-slide{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes ill-flow{to{stroke-dashoffset:-140}}
@keyframes ill-cur{0%,55%,100%{transform:translate(0,0) scale(1)}65%{transform:translate(-5px,-4px) scale(.86)}75%{transform:translate(0,0) scale(1)}}
@keyframes ill-wig{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes ill-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes ill-halo{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.18);opacity:.3}}
@keyframes ill-rocket{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-10px)}}
@keyframes ill-knob{from{transform:translateX(-60px)}to{transform:translateX(0)}}
@keyframes ill-type{0%,100%{opacity:.25}50%{opacity:1}}
.illus.play .fl{animation:ill-fl 4.2s ease-in-out infinite;animation-delay:var(--d,0s)}
.illus.play .fl2{animation:ill-fl2 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.illus.play .bob{animation:ill-bob 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.illus.play .tw{animation:ill-tw 2.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.illus.play .bar{animation:ill-bar .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*.09s)}
.illus.play .grow{animation:ill-grow 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.illus.play .draw{animation:ill-draw 1.6s ease-out both;animation-delay:.2s}
.illus.play .ring{animation:ill-ring 1.6s ease-out both}
.illus.play .ping{animation:ill-ping 2.4s ease-out infinite;animation-delay:var(--d,0s)}
.illus.play .pop{animation:ill-pop .7s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0s)}
.illus.play .slide{animation:ill-slide .8s ease-out both;animation-delay:var(--d,0s)}
.illus.play .flow line{animation:ill-flow 9s linear infinite}
.illus.play .cur{animation:ill-cur 3.2s ease-in-out infinite}
.illus.play .wig{animation:ill-wig 3s ease-in-out infinite}
.illus.play .beat{animation:ill-beat 1.4s ease-in-out infinite}
.illus.play .halo{animation:ill-halo 3s ease-in-out infinite;animation-delay:var(--d,0s)}
.illus.play .rocket{animation:ill-rocket 3s ease-in-out infinite}
.illus.play .knob{animation:ill-knob .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
.illus.play .typing circle{animation:ill-type 1.2s ease-in-out infinite}
.illus.play .typing circle:nth-child(2){animation-delay:.2s}
.illus.play .typing circle:nth-child(3){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){.illus *{animation:none!important}}

.brand-logo{display:block;height:48px;width:auto}
.brand-logo-foot{display:block;height:64px;width:auto}
@media (max-width:480px){.brand-logo{height:40px}}

/* sliders (reviews + stats): native scroll-snap, arrows/dots enhance */
.slider-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slider-track::-webkit-scrollbar{display:none}
.slider-track>.slide{flex:0 0 calc((100% - 48px)/3);min-width:0;scroll-snap-align:start}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.slider-nav[hidden]{display:none}
.sl-btn{width:44px;height:44px;border-radius:50%;border:1px solid #C9CDE6;background:#ffffff;color:#1B1F3A;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sl-btn:hover:not(:disabled){background:#5B4BFF;border-color:#5B4BFF;color:#ffffff}
.sl-btn:disabled{opacity:.35;cursor:default}
.sl-dots{display:flex;align-items:center}
.sl-dot{width:24px;height:44px;border:0;background:none;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sl-dot::before{content:"";width:10px;height:10px;border-radius:5px;background:#C9CDE6;transition:width .2s ease,background .2s ease}
.sl-dot[aria-current="true"]::before{width:24px;background:#5B4BFF}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stat-num{font-size:44px}
.stat-lbl{color:#5A6080;font-size:15px}
@media (max-width:1024px){.slider-track>.slide{flex-basis:calc((100% - 24px)/2)}}
@media (max-width:760px){
.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
.stat-num{font-size:36px}
.stat-lbl{font-size:14px}
}
@media (max-width:640px){.slider-track>.slide{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.sl-dot::before{transition:none}}

/* contact form notices */
.rv-notice{border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;scroll-margin-top:90px}
.rv-notice.ok{background:#E6FAF6;color:#0B5B4F;border:1px solid #2DD4BF}
.rv-notice.err{background:#FDECEC;color:#8A1F1F;border:1px solid #F2A6A6}

/* ---- About page: animated team avatars ---- */
.illus .avbob{transform-origin:50% 100%}
@keyframes av-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(-1.2deg)}}
@keyframes av-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes av-sign{0%,100%{opacity:1}45%{opacity:.35}50%{opacity:1}}
.illus.play .avbob{animation:av-bob 4.2s ease-in-out infinite}
.illus.play .blink{animation:av-blink 4.6s infinite}
.illus.play .sign{animation:av-sign 2.4s infinite}
@media (prefers-reduced-motion:reduce){.illus .avbob,.illus .blink,.illus .sign{animation:none!important}}