/* =========================================================
   DIGITAL BY DEVORIE — 2026 redesign
   Palette pulled from her original brand: deep indigo, violet,
   electric pink, hint of teal.
   ========================================================= */

:root {
  --bg:        #08070e;
  --bg-2:      #0d0c17;
  --ink:       #f4f1ff;
  --ink-soft:  #b9b4d6;
  --ink-faint: #6f6a8f;

  --violet:    #a370fc;
  --violet-hi: #c4a4ff;
  --indigo:    #2c2e74;
  --pink:      #fd288d;
  --magenta:   #e71d73;
  --teal:      #00c4cc;

  --grad: linear-gradient(115deg, #a370fc 0%, #c061ff 38%, #fd288d 100%);
  --grad-soft: linear-gradient(115deg, #8b3dff, #fd288d);

  --line: rgba(163,112,252,.16);
  --card: rgba(255,255,255,.035);
  --card-bd: rgba(255,255,255,.08);
  --glass: rgba(13,12,23,.62);

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --ease: cubic-bezier(.22,1,.36,1);
  --shadow: 0 30px 80px -30px rgba(0,0,0,.85);
  --maxw: 1240px;

  --font-d: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-b: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pink); color:#fff; }

img, video { display:block; max-width:100%; }

a { color:inherit; text-decoration:none; }

/* ---------- aurora background ---------- */
.aurora {
  position: fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(44,46,116,.55), transparent 70%),
    var(--bg);
}
.aurora span {
  position:absolute; border-radius:50%;
  filter: blur(90px); opacity:.5;
  will-change: transform;
}
.aurora .b1 { width:46vw; height:46vw; left:-10vw; top:-8vw;  background:#8b3dff; animation:float1 22s var(--ease) infinite; }
.aurora .b2 { width:40vw; height:40vw; right:-12vw; top:10vh; background:#fd288d; opacity:.4; animation:float2 26s var(--ease) infinite; }
.aurora .b3 { width:36vw; height:36vw; left:20vw; bottom:-14vw; background:#2c2e74; opacity:.6; animation:float3 30s var(--ease) infinite; }
.aurora .b4 { width:24vw; height:24vw; right:18vw; bottom:6vh; background:#00c4cc; opacity:.16; animation:float1 28s var(--ease) infinite reverse; }
.grain {
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vh) scale(1.12)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,6vh) scale(1.18)} }
@keyframes float3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-5vh) scale(1.1)} }

/* cursor glow */
.glow {
  position:fixed; top:0; left:0; width:420px; height:420px; z-index:-1;
  border-radius:50%; pointer-events:none; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(163,112,252,.16), transparent 60%);
  transition: opacity .4s; opacity:0;
}

/* ---------- layout ---------- */
.wrap { width:min(92%, var(--maxw)); margin-inline:auto; }
section { position:relative; padding: clamp(80px, 12vh, 150px) 0; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-d); font-size:.74rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--violet-hi);
  padding:.5rem .9rem; border:1px solid var(--line); border-radius:100px;
  background:rgba(163,112,252,.06);
}
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 12px var(--pink); }

h1,h2,h3 { font-family:var(--font-d); font-weight:700; line-height:1.02; letter-spacing:-.02em; }
.h-sec { font-size:clamp(2.1rem, 5vw, 3.8rem); }
.grad-text {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lead { color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.18rem); max-width:54ch; }

/* ---------- buttons ---------- */
.btn {
  --pad: .95rem 1.6rem;
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:var(--pad); border-radius:100px; font-family:var(--font-d);
  font-weight:600; font-size:.96rem; cursor:pointer; border:0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  will-change: transform;
}
.btn svg { width:18px; height:18px; }
.btn-primary {
  background:var(--grad); color:#fff;
  box-shadow: 0 10px 30px -8px rgba(253,40,141,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover { box-shadow: 0 18px 44px -10px rgba(253,40,141,.7); }
.btn-ghost {
  background:rgba(255,255,255,.04); color:var(--ink);
  border:1px solid var(--card-bd); backdrop-filter:blur(8px);
}
.btn-ghost:hover { background:rgba(255,255,255,.09); border-color:var(--violet); }
.btn:active { transform:scale(.96); }

/* ---------- nav ---------- */
header {
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding:18px 0; transition: padding .4s var(--ease);
}
header.scrolled { padding:10px 0; }
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .65rem .55rem 1.2rem; border-radius:100px;
  border:1px solid transparent; transition:all .4s var(--ease);
}
header.scrolled .nav {
  background:var(--glass); border-color:var(--card-bd);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 12px 40px -20px rgba(0,0,0,.8);
}
.logo { font-family:var(--font-d); font-weight:700; font-size:1.18rem; letter-spacing:-.02em; display:flex; align-items:center; gap:.5rem; }
.logo .star { color:var(--pink); animation:spin 8s linear infinite; display:inline-block; }
@keyframes spin { to{ transform:rotate(360deg) } }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { font-size:.92rem; color:var(--ink-soft); transition:color .25s; position:relative; }
.nav-links a:hover { color:var(--ink); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--grad); transition:width .3s var(--ease); border-radius:2px; }
.nav-links a:hover::after { width:100%; }
.nav-cta { padding:.7rem 1.3rem; }
.burger { display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.burger span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(150px, 22vh, 240px); padding-bottom:clamp(60px,8vh,90px); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.hero h1 { font-size:clamp(2.8rem, 7vw, 5.6rem); }
.hero h1 .line { display:block; overflow:hidden; }
.hero h1 .line > span { display:block; transform:translateY(110%); }
.hero .lead { margin:1.6rem 0 2.2rem; font-size:clamp(1.05rem,1.7vw,1.25rem); }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.hero-meta { display:flex; gap:2rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero-meta .m { display:flex; flex-direction:column; }
.hero-meta .m b { font-family:var(--font-d); font-size:1.7rem; line-height:1; }
.hero-meta .m span { font-size:.82rem; color:var(--ink-faint); margin-top:.35rem; }

/* hero phone stack */
.hero-phones { position:relative; height:520px; }
.phone {
  position:absolute; width:208px; aspect-ratio:9/19.5; border-radius:30px;
  overflow:hidden; border:6px solid #15131f;
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.06);
  background:#0c0b14;
}
.phone video, .phone img { width:100%; height:100%; object-fit:cover; }
.phone video { position:absolute; inset:0; opacity:0; transition:opacity .5s; }
.phone.hover-play { cursor:pointer; }
.phone.hover-play.playing video { opacity:1; }
.phone .hover-hint {
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-d); font-size:.66rem; font-weight:600; letter-spacing:.04em;
  color:#fff; padding:.32rem .7rem; border-radius:100px; white-space:nowrap;
  background:rgba(13,12,23,.6); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px);
  transition:opacity .3s; pointer-events:none;
}
.phone.hover-play.playing .hover-hint { opacity:0; }
.phone.p1 { left:8%;  top:0;    transform:rotate(-8deg); z-index:2; animation:bob 7s var(--ease) infinite; }
.phone.p2 { right:2%; top:8%;   transform:rotate(7deg);  z-index:3; width:224px; animation:bob 8s var(--ease) infinite .6s; }
.phone.p3 { left:30%; bottom:0; transform:rotate(-2deg); z-index:4; animation:bob 6.5s var(--ease) infinite .3s; }
@keyframes bob { 0%,100%{ transform:translateY(0) rotate(var(--rot,0)) } 50%{ transform:translateY(-16px) rotate(var(--rot,0)) } }
.phone.p1{ --rot:-8deg } .phone.p2{ --rot:7deg } .phone.p3{ --rot:-2deg }

/* ---------- marquee ---------- */
.marquee { padding:34px 0; border-block:1px solid var(--line); overflow:hidden; background:rgba(255,255,255,.015); }
.marquee-track { display:flex; gap:3.5rem; width:max-content; animation:scrollx 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { font-family:var(--font-d); font-weight:600; font-size:1.5rem; color:var(--ink-faint); display:flex; align-items:center; gap:3.5rem; white-space:nowrap; }
.marquee-track span::after { content:"✦"; color:var(--violet); }
@keyframes scrollx { to{ transform:translateX(-50%) } }

/* ---------- section heads ---------- */
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; }
.sec-head p { color:var(--ink-soft); max-width:42ch; }

/* ---------- reels showcase ---------- */
#reels { padding-bottom: clamp(90px,14vh,170px); }
.reels-hint { display:flex; align-items:center; gap:.5rem; color:var(--ink-faint); font-size:.85rem; font-family:var(--font-d); }
.reels-hint svg { width:16px; height:16px; }
.reels-viewport { position:relative; margin-top:1rem; }
.reels-track {
  display:flex; gap:1.4rem; overflow-x:auto; padding:1.2rem .2rem 2rem;
  cursor:grab; scrollbar-width:none;
}
.reels-track::-webkit-scrollbar{ display:none; }
.reels-track.dragging { cursor:grabbing; }
.reel {
  position:relative; flex:0 0 auto; width:248px; aspect-ratio:9/16;
  border-radius:22px; overflow:hidden;
  background:#0c0b14; border:1px solid var(--card-bd);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  cursor:pointer;
}
.reel:hover { transform:translateY(-8px) scale(1.015); border-color:var(--violet); box-shadow:0 30px 60px -22px rgba(139,61,255,.5); }
.reel img.poster, .reel video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel video { opacity:0; transition:opacity .5s; }
.reel.playing video { opacity:1; }
.reel .overlay {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(8,7,14,.78) 0%, transparent 42%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1rem;
  transition:opacity .3s;
}
.reel .play-badge {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.3); transition:.3s; z-index:3;
}
.reel:hover .play-badge { background:var(--grad); border-color:transparent; transform:translate(-50%,-50%) scale(1.08); }
.reel.playing .play-badge { opacity:0; }
.reel .play-badge svg { width:20px; height:20px; fill:#fff; margin-left:2px; }
.reel .tag { font-family:var(--font-d); font-size:.78rem; font-weight:600; color:#fff; }
.reel .tag small { display:block; color:var(--ink-soft); font-weight:400; font-size:.7rem; }

.reels-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:48px; height:48px; border-radius:50%; border:1px solid var(--card-bd); background:var(--glass); backdrop-filter:blur(12px); color:#fff; cursor:pointer; display:grid; place-items:center; transition:.3s; }
.reels-nav:hover { background:var(--grad); border-color:transparent; }
.reels-nav svg { width:20px; height:20px; }
.reels-nav.prev { left:-12px; } .reels-nav.next { right:-12px; }
@media (max-width:760px){ .reels-nav{ display:none; } }

/* ---------- services ---------- */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card {
  position:relative; padding:2rem 1.8rem; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--card-bd); overflow:hidden;
  transition: transform .4s var(--ease), border-color .4s, background .4s;
}
.card::before {
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(120% 80% at 0% 0%, rgba(163,112,252,.12), transparent 60%);
}
.card:hover { transform:translateY(-6px); border-color:var(--violet); }
.card:hover::before { opacity:1; }
.card .ico { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.3rem; background:var(--grad-soft); box-shadow:0 8px 22px -8px rgba(139,61,255,.6); }
.card .ico svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.8; }
.card h3 { font-size:1.22rem; margin-bottom:.55rem; }
.card p { color:var(--ink-soft); font-size:.94rem; }
.card .num { position:absolute; top:1.3rem; right:1.5rem; font-family:var(--font-d); font-size:.8rem; color:var(--ink-faint); }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat { text-align:center; padding:2.2rem 1rem; border-radius:var(--r-md); background:var(--card); border:1px solid var(--card-bd); }
.stat b { font-family:var(--font-d); font-size:clamp(2.2rem,4vw,3.2rem); line-height:1; display:block; }
.stat span { color:var(--ink-soft); font-size:.9rem; margin-top:.6rem; display:block; }

/* ---------- about ---------- */
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:center; }
.about-media { position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; border:1px solid var(--card-bd); box-shadow:var(--shadow); }
.about-media video, .about-media img { width:100%; height:100%; object-fit:cover; }
.about-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,7,14,.4), transparent 50%); }
.about h2 { margin:.8rem 0 1.4rem; }
.about p + p { margin-top:1rem; }
.about .sign { font-family:var(--font-d); font-size:1.3rem; margin-top:1.6rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.checks { list-style:none; margin:1.6rem 0; display:grid; gap:.7rem; }
.checks li { display:flex; gap:.7rem; align-items:center; color:var(--ink-soft); }
.checks li svg { width:20px; height:20px; flex:0 0 auto; color:var(--teal); }

/* ---------- CTA ---------- */
.cta-box {
  position:relative; text-align:center; padding:clamp(3rem,7vw,5.5rem) 2rem;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--card-bd);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(139,61,255,.28), transparent 60%),
    radial-gradient(70% 120% at 50% 100%, rgba(253,40,141,.22), transparent 60%),
    var(--bg-2);
}
.cta-box h2 { font-size:clamp(2.2rem,5.5vw,4rem); margin-bottom:1rem; }
.cta-box p { color:var(--ink-soft); max-width:46ch; margin:0 auto 2rem; }
.cta-box .btn { --pad:1.1rem 2rem; font-size:1.05rem; }
.cta-email { margin-top:1.4rem; font-family:var(--font-d); color:var(--ink-soft); font-size:.95rem; }
.cta-email a { color:var(--violet-hi); }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--line); padding:3.5rem 0 2.5rem; }
.foot { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:center; }
.foot-soc { display:flex; gap:.8rem; }
.foot-soc a { width:42px; height:42px; border-radius:50%; border:1px solid var(--card-bd); display:grid; place-items:center; transition:.3s; color:var(--ink-soft); }
.foot-soc a:hover { background:var(--grad); border-color:transparent; color:#fff; transform:translateY(-3px); }
.foot-soc svg { width:18px; height:18px; }
.foot small { color:var(--ink-faint); }

/* ---------- lightbox ---------- */
.lightbox {
  position:fixed; inset:0; z-index:100; display:none; place-items:center;
  background:rgba(4,3,9,.86); backdrop-filter:blur(14px); padding:2rem;
}
.lightbox.open { display:grid; animation:fade .3s; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.lb-stage { position:relative; height:min(86vh, 760px); aspect-ratio:9/16; border-radius:26px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--card-bd); background:#000; }
.lb-stage video { width:100%; height:100%; object-fit:cover; }
.lb-close { position:absolute; top:1.4rem; right:1.6rem; width:46px; height:46px; border-radius:50%; border:1px solid var(--card-bd); background:var(--glass); color:#fff; cursor:pointer; display:grid; place-items:center; z-index:10; }
.lb-close:hover { background:var(--pink); border-color:transparent; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:1px solid var(--card-bd); background:var(--glass); color:#fff; cursor:pointer; display:grid; place-items:center; z-index:10; transition:.3s; }
.lb-arrow:hover { background:var(--grad); border-color:transparent; }
.lb-arrow.prev { left:max(1rem,4vw); } .lb-arrow.next { right:max(1rem,4vw); }
.lb-arrow svg, .lb-close svg { width:22px; height:22px; }
.lb-sound { position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); padding:.6rem 1.1rem; border-radius:100px; background:var(--glass); border:1px solid var(--card-bd); color:#fff; font-size:.82rem; font-family:var(--font-d); cursor:pointer; display:flex; gap:.4rem; align-items:center; z-index:10; }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; } .hero-phones{ height:420px; order:-1; }
  .about-grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav-links{ display:none; } .burger{ display:flex; }
  .cards{ grid-template-columns:1fr; }
  .hero-phones{ height:380px; } .phone{ width:160px; } .phone.p2{ width:172px; }
  .hero-meta{ gap:1.4rem; }
  .reel{ width:200px; }
  .foot{ justify-content:center; text-align:center; }
}

/* ---- mobile: center everything ---- */
@media (max-width:680px){
  .hero-copy{ text-align:center; }
  .hero-cta{ justify-content:center; }
  .hero-meta{ justify-content:center; }
  .hero-meta .m{ align-items:center; }
  .lead{ margin-inline:auto; }
  .sec-head{ justify-content:center; text-align:center; }
  .sec-head > div{ width:100%; }
  .reels-hint{ justify-content:center; }
  .card{ text-align:center; }
  .card .ico{ margin-inline:auto; }
  #about .about-grid > div:last-child{ text-align:center; }
  #about .checks{ justify-items:center; }
  #about .checks li{ justify-content:center; }
  #about .sign{ text-align:center; }
  .quote{ text-align:center; align-items:center; }
  .quote figcaption{ align-items:center; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* mobile menu */
.mobile-menu { position:fixed; inset:0; z-index:60; background:var(--bg-2); display:none; flex-direction:column; align-items:center; justify-content:center; gap:2rem; }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-family:var(--font-d); font-size:1.6rem; }
.mobile-menu .lb-close{ top:1.5rem; right:1.5rem; }

/* =========================================================
   v2 — metrics phone, results redesign, testimonials, portrait
   ========================================================= */

/* metrics phone floating in hero (image already includes the phone) */
.metrics-float {
  position:absolute; right:-2%; top:6%; width:250px; z-index:3;
  transform:rotate(6deg);
  mix-blend-mode:lighten;
  filter:drop-shadow(0 30px 50px rgba(139,61,255,.35));
  animation:bob 8s var(--ease) infinite .6s;
}
.metrics-float{ --rot:6deg; }

/* results section */
.results-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:center; }
.results-phone {
  position:relative; display:grid; place-items:center; padding:1rem;
}
.results-phone::before {
  content:""; position:absolute; inset:6% 12%; border-radius:50%;
  background:radial-gradient(circle, rgba(139,61,255,.45), rgba(253,40,141,.18) 55%, transparent 72%);
  filter:blur(34px); z-index:0;
}
.results-phone img {
  position:relative; z-index:1; width:min(100%, 420px);
  mix-blend-mode:lighten;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
}
.results-stats { display:flex; flex-direction:column; gap:1rem; }
.rstat {
  padding:1.5rem 1.7rem; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--card-bd);
  display:flex; flex-direction:column; gap:.3rem;
  transition:border-color .3s, transform .3s var(--ease);
}
.rstat:hover { border-color:var(--violet); transform:translateX(6px); }
.rstat b { font-family:var(--font-d); font-size:clamp(2rem,4vw,2.9rem); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rstat span { color:var(--ink-soft); font-size:.96rem; }

/* testimonials */
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.quote {
  position:relative; padding:2rem 1.8rem; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--card-bd);
  display:flex; flex-direction:column; gap:1rem;
  transition:transform .4s var(--ease), border-color .4s;
}
.quote:hover { transform:translateY(-6px); border-color:var(--violet); }
.quote .stars { color:#ffce47; letter-spacing:2px; font-size:.95rem; }
.quote blockquote { font-size:1rem; line-height:1.6; color:var(--ink); }
.quote figcaption { margin-top:auto; display:flex; flex-direction:column; }
.quote figcaption b { font-family:var(--font-d); }
.quote figcaption span { color:var(--violet-hi); font-size:.85rem; }

/* circular B&W portrait */
.about-portrait { position:relative; display:grid; place-items:center; }
.portrait-ring {
  position:relative; width:min(78%, 380px); aspect-ratio:1; border-radius:50%;
  padding:8px; background:var(--grad);
  box-shadow:0 30px 70px -25px rgba(139,61,255,.6);
}
.portrait-ring::after {
  content:""; position:absolute; inset:-22px; border-radius:50%;
  border:1px solid var(--line); animation:spin 26s linear infinite;
}
.portrait-ring img {
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:5px solid var(--bg);
}
.portrait-badge {
  position:absolute; bottom:6%; right:8%; z-index:2;
  font-family:var(--font-d); font-weight:600; font-size:.9rem;
  padding:.6rem 1.1rem; border-radius:100px; color:#fff;
  background:var(--glass); border:1px solid var(--card-bd); backdrop-filter:blur(10px);
}

/* contact meta line */
.cta-meta { margin-top:1.6rem; font-family:var(--font-d); color:var(--ink-soft); font-size:1rem; display:flex; gap:.8rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.cta-meta a { color:var(--ink); transition:color .25s; }
.cta-meta a:hover { color:var(--violet-hi); }
.cta-meta .dot { color:var(--ink-faint); }

@media (max-width:980px){
  .quotes{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .portrait-ring{ width:min(70%,300px); }
}

/* ---- brand logo wall ---- */
.brands { padding: clamp(50px,8vh,90px) 0; }
.brands-label {
  text-align:center; font-family:var(--font-d); font-size:.78rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:2.4rem;
}
.logo-marquee {
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* gap lives in the items (padding), so the duplicated set tiles seamlessly at -50% */
.logo-track { display:flex; align-items:center; width:max-content; animation:scrollx 40s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state:paused; }
.logo-item { flex:0 0 auto; display:grid; place-items:center; padding:0 2.4rem; }
.logo-item img {
  height:42px; width:auto; max-width:190px; object-fit:contain;
  opacity:.82;
  transition:opacity .3s, transform .3s var(--ease);
}
.logo-item img.emblem { height:58px; opacity:.97; }   /* circular badges: shalom / redeemer / hygloss */
.logo-item img:hover { opacity:1; transform:scale(1.08); }

/* ---- results metric band ---- */
.sec-head.center { justify-content:center; text-align:center; }
.metric-band {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
  margin-top:1rem;
}
.metric {
  text-align:center; padding:2.4rem 1rem; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--card-bd);
  transition:transform .4s var(--ease), border-color .4s;
}
.metric:hover { transform:translateY(-6px); border-color:var(--violet); }
.metric b {
  display:block; font-family:var(--font-d); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.metric span { display:block; margin-top:.7rem; color:var(--ink-soft); font-size:.92rem; }

@media (max-width:880px){
  .metric-band{ grid-template-columns:1fr 1fr; }
  .logo-item{ padding:0 1.6rem; }
  .logo-item img{ height:34px; }
  .logo-item img.emblem{ height:46px; }
}

/* ---- portrait hover swap (B&W headshot -> working photo) ---- */
.portrait-ring .pr-face {
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  border:5px solid var(--bg);
  transition:opacity .5s var(--ease);
}
.pr-work {
  position:absolute; inset:0; z-index:2; border-radius:50%; overflow:hidden;
  border:5px solid var(--bg);
  opacity:0; transition:opacity .5s var(--ease);
}
.portrait-ring:hover .pr-face { opacity:0; }
.portrait-ring:hover .pr-work { opacity:1; }
.pr-work-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(18px) brightness(.42) saturate(1.15);
  transform:scale(1.25);
}
.pr-work img {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60%; height:auto; border-radius:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}