/* Websperia main theme: midnight purple background (#0e0a1f), purple #550df4, yellow #f8ffa8 */
:root{
  --bg:#0e0a1f; --bg2:#140f2b; --card:#1a1436; --ink:#ffffff; --ink-2:rgba(205,224,255,.68);
  --ink-3:rgba(255,255,255,.3); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --purple:#550df4; --purple-hover:#4810c4; --purple-light:#8f6aff; --yellow:#f8ffa8; --green:#3ddc84;
}
body{color:rgba(255,255,255,.88)}
::selection{background:var(--purple);color:#fff}

.nav{background:rgba(14,10,31,.78)}
.logo .dot{background:var(--yellow)}
.nav-links a:hover{color:var(--yellow)}

.hero{background:
  radial-gradient(ellipse 45% 40% at 50% 28%,rgba(85,13,244,.45) 0%,transparent 70%),
  radial-gradient(ellipse 30% 30% at 62% 20%,rgba(143,106,255,.25) 0%,transparent 70%)}
h1 .t,h2 .t{color:var(--yellow)}

.btn-dark{background:var(--purple);color:#fff}
.btn-dark:hover{background:var(--purple-hover);box-shadow:0 12px 30px -8px rgba(85,13,244,.75)}
.btn-ghost{color:#fff}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--yellow);color:var(--yellow)}
.btn-light{background:var(--yellow);color:#000}
.btn-light:hover{background:#fffd90}

.stats strong em{color:var(--purple-light)}
.quote-card{box-shadow:0 30px 80px -30px rgba(85,13,244,.45)}
.stars{color:var(--yellow)}
.quote-card b{color:#fff;box-shadow:inset 0 -.32em 0 rgba(85,13,244,.55)}

.work{background:var(--bg2)}
.project .shot{background:var(--card)}
.project:hover .meta b{color:var(--yellow)}

.num{color:var(--purple-light)}
.col h3::after{content:"";display:block;width:24px;height:2px;background:var(--purple-light);margin-top:12px;transition:width .3s}
.col:hover h3::after{width:56px}

.who{background:var(--bg2)}
.ind:hover{border-color:var(--purple-light);box-shadow:0 20px 50px -24px rgba(85,13,244,.6)}
.circle{background:var(--purple)}
.included li:hover{border-color:var(--yellow);color:var(--yellow)}
summary::after{color:var(--purple-light)}
details[open] summary{color:var(--yellow)}

.final{background:linear-gradient(180deg,#0e0a1f 0%,#2a1b5c 100%);color:#fff}
.final h2{color:#fff}
.final h2 .t{color:var(--yellow)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--purple-light);background:rgba(143,106,255,.08)}
.form-ok{color:var(--green)}
.foot{background:#0a0717;color:rgba(255,255,255,.45)}

/* bigger logo */
.nav-in{height:84px}
.logo-img{height:60px;width:auto;display:block}
html{scroll-padding-top:96px}
@media (max-width:640px){.nav-in{height:72px}.logo-img{height:50px}}

/* header sizes for the image logo: bigger at top, current size when scrolled */
:root{--nav-h-top:96px;--nav-h:84px}
.logo-img{height:74px;transition:height .5s var(--nav-ease)}
.nav.scrolled .logo-img{height:60px}
@media (max-width:640px){
  :root{--nav-pad:10px;--nav-h-top:80px;--nav-h:72px}
  .logo-img{height:60px}
  .nav.scrolled .logo-img{height:50px}
}

/* stats: all white, small svg star */
.stats strong,.stats strong em{color:#fff}

/* mobile menu accents */
.mmenu{background:radial-gradient(ellipse 80% 50% at 80% 0%,rgba(85,13,244,.28) 0%,transparent 70%),var(--bg)}
.mmenu-links a:hover,.mmenu-links a:focus-visible{color:var(--yellow)}
.socials a:hover{border-color:var(--yellow);color:var(--yellow)}

/* hero social-proof badge (replaces the eyebrow line) */
.hero-proof{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:0 auto 26px;padding:6px 20px 6px 7px;border-radius:999px;
  background:linear-gradient(180deg,rgba(85,13,244,.22),rgba(26,20,54,.85));border:1px solid rgba(143,106,255,.28);box-shadow:0 10px 30px -18px rgba(85,13,244,.8)}
.hero-proof-faces{display:flex}
.hero-proof-faces span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;
  border:2px solid var(--bg);margin-left:-8px}
.hero-proof-faces span:first-child{margin-left:0;background:#3a1a9c}
.hero-proof-faces span:nth-child(2){background:var(--purple)}
.hero-proof-faces span:nth-child(3){background:var(--purple-light)}
.hero-proof p{margin:0;font-size:14px;font-weight:300;color:var(--ink-2);white-space:nowrap}
.hero-proof p b{font-weight:500;color:#fff}
@media (max-width:640px){
  .hero .hero-proof{margin-top:auto;margin-bottom:26px}
  .hero-proof{gap:10px;padding:5px 16px 5px 6px}
  .hero-proof-faces span{width:28px;height:28px;font-size:10px;margin-left:-7px}
  .hero-proof p{font-size:13px}
}

/* mobile hero: more breathing room between header, badge, headline, buttons and stats */
@media (max-width:640px){
  .hero{
    min-height:calc(100vh - var(--nav-pad) - var(--nav-h-top));
    min-height:calc(100svh - var(--nav-pad) - var(--nav-h-top));
    padding:64px 0 48px}
  .hero .hero-proof{margin-top:0;margin-bottom:40px}
  .hero .lede{margin-top:36px}
  .hero-cta{margin-top:44px;margin-bottom:72px}
  .hero .stats{margin-top:auto}
}

/* hero audit button: a yellow line that keeps running around the border */
@property --glow-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn-glow{position:relative;isolation:isolate}
.btn-glow::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--glow-a),transparent 0deg 220deg,rgba(248,255,168,.35) 280deg,var(--yellow) 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:glow-run 2.6s linear infinite}
@keyframes glow-run{to{--glow-a:360deg}}
@media (prefers-reduced-motion:reduce){
  .btn-glow::before{animation:none;background:rgba(248,255,168,.6)}
}

/* hero stats: each of the 3 boxes fades in and rises up, one after another */
.hero .stats.reveal{transform:none}
.hero .stats.reveal > div{opacity:0;transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hero .stats.reveal.in > div{opacity:1;transform:none}
.hero .stats.reveal.in > div:nth-child(1){transition-delay:.25s}
.hero .stats.reveal.in > div:nth-child(2){transition-delay:.4s}
.hero .stats.reveal.in > div:nth-child(3){transition-delay:.55s}
.no-js .hero .stats.reveal > div{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero .stats.reveal > div{opacity:1;transform:none;transition:none}
}

/* contrast fixes (PageSpeed): dark text on the light purple SV circle, brighter footer text */
.hero-proof-faces span:nth-child(3){color:var(--bg)}
.foot{color:rgba(255,255,255,.62)}