/* Fox Web: animated benefit numbers + calm ambient gradients. No new libraries. */
/* The ambient orbs are decorative: no layout shift and no interaction interception. */
.hero{position:relative;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;z-index:0;border-radius:42% 58% 63% 37%/55% 34% 66% 45%;will-change:transform;animation:fox-orbit 19s ease-in-out infinite alternate}
.hero::before{width:clamp(230px,36vw,570px);height:clamp(230px,35vw,570px);top:7%;left:-14%;opacity:.64;filter:blur(37px);background:radial-gradient(circle at 43% 40%,#ffe0d3 0%,#ffebdf9c 54%,transparent 75%)}
.hero::after{width:clamp(210px,32vw,470px);height:clamp(210px,30vw,450px);right:-13%;bottom:-17%;opacity:.60;filter:blur(32px);background:radial-gradient(circle at 45% 50%,#e1ddffbb 0%,#f6e7ff8a 45%,transparent 74%);animation:fox-orbit-alt 24s ease-in-out infinite alternate}
.hero>.container{position:relative;z-index:1}
.hero .art-halo{animation:fox-halo-breathe 14s ease-in-out infinite alternate}
.fox-stats-section{position:relative;isolation:isolate;overflow:hidden;padding:48px 0 62px;background:linear-gradient(135deg,#fffdfb 3%,#fff8f4 45%,#f9f9ff 100%)}
.fox-stats-section::before,.fox-stats-section::after{content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%;filter:blur(38px);animation:fox-orbit 22s ease-in-out infinite alternate}
.fox-stats-section::before{width:280px;height:280px;top:-160px;left:10%;background:#ffe8db;opacity:.76}
.fox-stats-section::after{width:260px;height:260px;bottom:-190px;right:8%;background:#e9e4ff;opacity:.8;animation-name:fox-orbit-alt}
.fox-stats-section .container{position:relative;z-index:1}
.fox-stats-header{text-align:center;margin-bottom:23px}
.fox-stats-header .fox-stats-kicker{margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:1.6px;color:#e85d44;text-transform:uppercase}
.fox-stats-header h2{margin:0;font-size:clamp(21px,2.5vw,29px);letter-spacing:-.75px;line-height:1.25;color:#26334b}
.fox-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fox-stat-card{position:relative;min-width:0;text-align:center;padding:23px 12px 20px;border:1px solid rgba(241,218,212,.75);border-radius:19px;background:rgba(255,255,255,.83);box-shadow:0 13px 35px rgba(51,39,57,.045);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.fox-stat-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(214,117,83,.11);border-color:#ffc9b5}
.fox-stat-icon{display:inline-grid;place-items:center;width:35px;height:35px;margin-bottom:12px;border-radius:12px;background:#fff0e9;color:#e15a40;font-size:17px}
.fox-stat-number{display:block;font-size:clamp(34px,4vw,49px);font-weight:850;line-height:1;letter-spacing:-1.8px;font-variant-numeric:tabular-nums;color:#ed5f3c;white-space:nowrap}
.fox-stat-label{display:block;margin-top:11px;font-weight:750;font-size:13px;line-height:1.34;color:#30415d}
.fox-stat-footnote{display:block;margin-top:5px;font-size:11px;line-height:1.4;color:#738299}
/* Ambient light in the interactive preview workshop, away from forms and text. */
.fox-lab{isolation:isolate;overflow:hidden}
.fox-lab::before,.fox-lab::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(35px);animation:fox-orbit-alt 24s ease-in-out infinite alternate}
.fox-lab::before{width:300px;height:300px;left:-160px;top:8%;opacity:.6;background:#ffe3d2}
.fox-lab::after{width:310px;height:310px;right:-170px;bottom:3%;opacity:.45;background:#e9ddff}
.fox-lab>.container{position:relative;z-index:1}
@keyframes fox-orbit{from{transform:translate3d(-8px,4px,0) rotate(-9deg) scale(.98)}to{transform:translate3d(24px,-18px,0) rotate(9deg) scale(1.07)}}
@keyframes fox-orbit-alt{from{transform:translate3d(17px,-12px,0) rotate(10deg) scale(1.05)}to{transform:translate3d(-19px,18px,0) rotate(-11deg) scale(.97)}}
@keyframes fox-halo-breathe{from{transform:scale(.985) rotate(-4deg)}to{transform:scale(1.04) rotate(5deg)}}
@media(max-width:790px){.fox-stats-section{padding:42px 0 53px}.fox-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.fox-stat-card{padding:19px 9px 17px}.fox-stat-number{font-size:clamp(35px,9vw,45px)}.fox-stat-label{font-size:12px}.fox-stat-footnote{font-size:10px}.hero::before,.hero::after{filter:blur(32px);opacity:.4}.fox-lab::before,.fox-lab::after{filter:blur(35px);opacity:.32}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after,.hero .art-halo,.fox-stats-section::before,.fox-stats-section::after,.fox-lab::before,.fox-lab::after{animation:none!important;will-change:auto}.fox-stat-card{transition:none!important}}


/* --- Fox Web: floating 3D cards and soft section color transitions --- */
.hero,.feature-strip,.fox-stats-section,.plans,.website-diagnosis,.website-builder,.fox-lab,.portfolio,.about,.process,.faq,.quote-section,.contact-cta{position:relative;isolation:isolate}
.hero{background:linear-gradient(180deg,#fffdfc 0%,#fff8f4 54%,#fff4ee 100%),radial-gradient(circle at 10% 24%,rgba(255,226,210,.7) 0,transparent 34%),radial-gradient(circle at 92% 12%,rgba(235,228,255,.55) 0,transparent 26%)}
.feature-strip{background:linear-gradient(180deg,#fff4ee 0%,#fff7f3 100%)}
.fox-stats-section{background:linear-gradient(180deg,#fff7f3 0%,#fff5ef 100%)}
.plans{background:linear-gradient(180deg,#fff5ef 0%,#fff2eb 100%)}
.website-diagnosis{background:linear-gradient(180deg,#fff2eb 0%,#fff6f0 100%)}
.website-builder{background:linear-gradient(180deg,#fff6f0 0%,#fff8f3 100%)}
.fox-lab{background:linear-gradient(180deg,#fff8f3 0%,#fff7f6 100%)}
.portfolio{background:linear-gradient(180deg,#fff7f6 0%,#fff4ef 100%)}
.about{background:linear-gradient(180deg,#fff4ef 0%,#fff8f4 100%)}
.process{background:linear-gradient(180deg,#fff8f4 0%,#fffdfc 100%)}
.faq{background:linear-gradient(180deg,#fffdfc 0%,#fff8f5 100%)}
.contact-cta{background:linear-gradient(180deg,#fff8f5 0%,#fffdfc 100%)}

.hero::before,.hero::after,.plans::before,.website-builder::after,.portfolio::before,.fox-lab::after{content:"";position:absolute;border-radius:999px;pointer-events:none;filter:blur(40px);z-index:-1;opacity:.6}
.hero::before{width:220px;height:220px;left:-80px;top:12%;background:rgba(255,213,198,.85)}
.hero::after{width:240px;height:240px;right:-90px;bottom:5%;background:rgba(229,221,255,.8)}
.plans::before{width:260px;height:260px;right:-120px;top:60px;background:rgba(255,221,206,.72)}
.website-builder::after{width:220px;height:220px;left:-100px;bottom:40px;background:rgba(255,232,217,.8)}
.portfolio::before{width:230px;height:230px;right:-110px;top:30px;background:rgba(255,229,216,.78)}
.fox-lab::after{width:240px;height:240px;left:-120px;top:35px;background:rgba(233,225,255,.68)}

.hero-art{position:relative;overflow:visible}
.floating-site-cards{position:absolute;inset:0;pointer-events:none;z-index:8}
.floating-site-card{position:absolute;display:flex;flex-direction:column;gap:4px;min-width:170px;max-width:205px;padding:13px 14px 12px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(247,224,213,.95);box-shadow:0 18px 40px rgba(34,31,44,.10);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform-style:preserve-3d;pointer-events:auto;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;animation:foxFloatCard 7.5s ease-in-out infinite}
.floating-site-card:hover{transform:translateY(-8px) rotateX(4deg) rotateY(-6deg) scale(1.04);box-shadow:0 24px 44px rgba(34,31,44,.16);border-color:#f3b39c}
.floating-site-card strong{font-size:14px;line-height:1.2;color:#1e2a40;letter-spacing:-.25px}
.floating-site-card small{font-size:11px;line-height:1.4;color:#5b6c82}
.floating-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:5px 9px;border-radius:999px;background:rgba(255,241,234,.95);border:1px solid rgba(248,214,201,.95);font-size:10px;font-weight:800;letter-spacing:.35px;color:#cc6145;text-transform:uppercase}
.floating-card-detail{display:block;margin-top:2px;font-size:10px;font-weight:700;color:#7c6072;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease}
.floating-site-card:hover .floating-card-detail{opacity:1;transform:translateY(0)}
.card-catalog{left:-2%;top:8%;animation-delay:0s}
.card-business{right:-7%;top:14%;animation-delay:-2.1s}
.card-store{right:8%;bottom:3%;animation-delay:-4.1s}
.card-catalog::after,.card-business::after,.card-store::after{content:"";position:absolute;inset:auto 16px 9px 16px;height:22px;border-radius:999px;background:linear-gradient(90deg,rgba(255,114,92,.13),rgba(160,173,255,.04));filter:blur(10px);z-index:-1}

.goal-option,.plan-card,.case-copy,.floating-site-card{overflow:visible;isolation:isolate}
.goal-option > *, .plan-card > *, .case-copy > *, .floating-site-card > *{position:relative;z-index:1}
@keyframes foxFloatCard{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.2deg)}}

@media(max-width:930px){
  .card-catalog{left:0;top:4%}
  .card-business{right:-1%;top:12%}
  .card-store{right:4%;bottom:-4px}
  .floating-site-card{min-width:156px;max-width:186px;padding:12px}
}
@media(max-width:690px){
  .floating-site-cards{position:relative;display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
  .floating-site-card{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;max-width:none;width:100%;animation:none;pointer-events:auto}
  .floating-card-detail{opacity:1;transform:none}
}


/* Official Fox Web brand mark (uploaded original, unredrawn) */
.brand .fox-mark-official{display:block;flex-shrink:0;width:52px;height:52px;object-fit:contain;border-radius:4px;background:white;filter:none}
@media(max-width:690px){.brand .fox-mark-official{width:44px;height:44px}}
@media(max-width:400px){.brand .fox-mark-official{width:40px;height:40px}}