/* ==========================================================================
   APEX MEDIA — Design tokens
   ========================================================================== */
:root{
  --black:        #0a0a0a;
  --black-deep:   #050505;
  --charcoal:     #131313;
  --charcoal-2:   #1a1a1a;
  --charcoal-3:   #202020;
  --line:         rgba(255,255,255,0.08);
  --line-strong:  rgba(255,255,255,0.14);
  --white:        #f5f4f2;
  --gray:         #9c9a97;
  --gray-dim:     #6f6d6a;

  --red:          #e10600;
  --red-bright:   #ff2a1a;
  --red-deep:     #7a0500;
  --red-glow:     rgba(225,6,0,0.35);
  --red-glow-soft:rgba(225,6,0,0.16);
  --orange-red:   #ff5a2a;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-serif:   'Zilla Slab', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1240px;
  --radius: 14px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--red-bright); outline-offset:3px; }

.section-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

/* grain + cursor glow ambience */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:998;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.cursor-glow{
  position:fixed; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow-soft) 0%, transparent 70%);
  top:0; left:0; transform:translate(-50%,-50%);
  pointer-events:none; z-index:2; opacity:0; transition:opacity .4s var(--ease);
  will-change:transform;
}
@media (hover:hover){ .cursor-glow.active{ opacity:1; } }

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; font-size:12.5px; color:var(--red-bright);
  margin:0 0 18px;
}
.eyebrow.center{ justify-content:center; }
.eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 12px 2px var(--red-glow); flex:none; }

.section-title{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:clamp(32px,4.4vw,54px);
  line-height:1.1;
  margin:0 0 20px;
}
.section-title.center{ text-align:center; max-width:820px; margin-left:auto; margin-right:auto; }
.text-red{ color:var(--red-bright); text-shadow:0 0 26px var(--red-glow); }

.section-sub{
  font-size:17px; line-height:1.65; color:var(--gray);
  max-width:640px; margin:0 0 8px;
}
.section-sub.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:17px 30px; border-radius:999px; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  white-space:nowrap; position:relative;
}
.btn svg{ transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

.btn-red{
  background:linear-gradient(180deg, var(--red-bright), var(--red));
  color:#fff;
  box-shadow:0 8px 30px -8px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-red:hover{ transform:translateY(-3px); box-shadow:0 14px 40px -8px var(--red-glow), 0 0 0 1px var(--red-bright); }

.btn-ghost{
  background:rgba(255,255,255,.04);
  color:var(--white);
  border-color:var(--line-strong);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ border-color:var(--red-bright); background:rgba(225,6,0,.08); transform:translateY(-3px); }

.btn-outline{
  background:transparent; color:var(--white); border-color:var(--line-strong);
}
.btn-outline:hover{ border-color:var(--red-bright); color:var(--red-bright); box-shadow:0 0 0 1px var(--red-bright) inset; }

.btn-large{ padding:19px 34px; font-size:15.5px; }
.btn-small{ padding:12px 22px; font-size:13.5px; }
.btn-full{ width:100%; }

/* ==========================================================================
   Reveal-on-scroll utility
   ========================================================================== */
.reveal-up{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal-up.in-view{ opacity:1; transform:translateY(0); }

.reveal-line{ overflow:hidden; display:block; }
.reveal-inner{ display:block; transform:translateY(110%); transition:transform .9s var(--ease); }
.reveal-line.in-view .reveal-inner{ transform:translateY(0); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:22px 0;
  transition:padding .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  padding:14px 0;
  background:rgba(8,8,8,.78);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:38px; height:38px; border-radius:10px; flex:none;
  background:linear-gradient(155deg, var(--red-bright), var(--red-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:20px; color:#fff;
  box-shadow:0 6px 18px -6px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-word{ font-family:var(--font-display); font-size:19px; letter-spacing:.05em; }
.brand-word em{ font-style:normal; color:var(--red-bright); }

.main-nav{ display:flex; gap:34px; }
.main-nav a{
  font-size:13.5px; font-weight:600; letter-spacing:.03em; color:var(--gray);
  position:relative; padding:4px 0; transition:color .3s;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--red-bright); transition:width .35s var(--ease);
}
.main-nav a:hover{ color:var(--white); }
.main-nav a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--white); border-radius:2px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:150px 32px 90px; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(225,6,0,.16), transparent 60%),
    linear-gradient(180deg, #0d0a0a 0%, var(--black) 55%, var(--black-deep) 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-glow{
  position:absolute; top:-10%; left:50%; transform:translateX(-50%);
  width:1100px; height:700px; border-radius:50%;
  background:radial-gradient(ellipse at center, var(--red-glow) 0%, transparent 65%);
  filter:blur(10px); animation:pulseGlow 7s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{ opacity:.75; transform:translateX(-50%) scale(1);} 50%{ opacity:1; transform:translateX(-50%) scale(1.06);} }

.hero-beam{
  position:absolute; width:2px; height:140%; top:-20%;
  background:linear-gradient(180deg, transparent, var(--red-glow) 40%, transparent 80%);
  opacity:.5; filter:blur(1px);
}
.beam-1{ left:18%; transform:rotate(9deg); animation:beamDrift 12s ease-in-out infinite; }
.beam-2{ right:14%; transform:rotate(-7deg); animation:beamDrift 9s ease-in-out infinite reverse; }
@keyframes beamDrift{ 0%,100%{ opacity:.25;} 50%{ opacity:.6;} }

.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 80%);
}
.hero-lines{ position:absolute; inset:0; width:100%; height:100%; }
.hline{ stroke:var(--line); stroke-width:1; }

.hero-content{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; }

.hero-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(46px,8.4vw,104px); line-height:0.98; letter-spacing:.005em;
  margin:0 0 26px;
}
.hero-title em{ font-style:normal; color:var(--red-bright); text-shadow:0 0 50px var(--red-glow); }

.hero-sub{
  font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:var(--gray);
  max-width:640px; margin:0 auto 40px;
}
.hero-actions{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:64px; }

.hero-scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gray-dim);
}
.scroll-line{ width:1px; height:46px; background:linear-gradient(180deg, var(--red-bright), transparent); position:relative; overflow:hidden; }
.scroll-line::after{
  content:''; position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--white); animation:scrollDrip 2.2s ease-in-out infinite;
}
@keyframes scrollDrip{ 0%{ top:-40%; } 100%{ top:100%; } }

/* ==========================================================================
   Creator showcase slider
   ========================================================================== */
.creators{ position:relative; padding:64px 0 78px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--black-deep); }
.creators-label{
  text-align:center; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gray-dim); margin:0 0 36px;
}
.creator-track-wrap{ position:relative; overflow:hidden; }
.creator-track{
  display:flex; gap:26px; width:max-content;
  animation:creatorScroll 42s linear infinite;
}
.creator-track:hover{ animation-play-state:paused; }
@keyframes creatorScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.creator-card{
  position:relative; flex:none; width:170px; padding-top:26px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transition:transform .45s var(--ease);
}
.creator-card:hover{ transform:translateY(-8px); }
.creator-photo-wrap{
  width:104px; height:104px; border-radius:50%; padding:4px;
  background:conic-gradient(from 180deg, var(--red-bright), var(--red-deep), var(--red-bright));
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 14px 30px -12px rgba(0,0,0,.7);
  position:relative;
}
.creator-photo-wrap::after{
  content:''; position:absolute; inset:-10px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow-soft), transparent 70%);
  opacity:0; transition:opacity .4s;
}
.creator-card:hover .creator-photo-wrap::after{ opacity:1; }
.creator-photo{
  width:100%; height:100%; border-radius:50%; overflow:hidden; background:var(--charcoal-2);
  border:2px solid var(--black-deep);
}
.creator-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }
.creator-name{ font-size:13.5px; font-weight:700; }
.creator-role{ font-size:11.5px; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.08em; }

.creator-fade{ position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.creator-fade-l{ left:0; background:linear-gradient(90deg, var(--black-deep), transparent); }
.creator-fade-r{ right:0; background:linear-gradient(-90deg, var(--black-deep), transparent); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ position:relative; padding:160px 0; overflow:hidden; }
.about-glow{
  position:absolute; top:20%; left:-10%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow-soft), transparent 70%); filter:blur(20px);
}
.about-grid{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:88px; align-items:center; }

.about-frame{
  position:relative; aspect-ratio:1/1.05; border-radius:22px; overflow:hidden;
  background:linear-gradient(155deg, var(--charcoal), var(--black-deep));
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.about-frame-glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, var(--red-glow-soft), transparent 55%);
}
.about-frame-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at center, black 10%, transparent 70%);
}
.about-frame-core{ position:relative; width:180px; height:180px; display:flex; align-items:center; justify-content:center; }
.core-ring{
  position:absolute; border-radius:50%; border:1px solid var(--red-glow);
}
.ring-1{ inset:0; animation:ringSpin 14s linear infinite; }
.ring-2{ inset:26px; border-color:rgba(255,255,255,.12); animation:ringSpin 20s linear infinite reverse; }
.ring-3{ inset:52px; border-style:dashed; animation:ringSpin 30s linear infinite; }
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
.core-mark{
  font-family:var(--font-display); font-size:56px; color:var(--red-bright);
  text-shadow:0 0 40px var(--red-glow);
}
.about-frame-scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red-bright), transparent);
  box-shadow:0 0 20px 4px var(--red-glow); top:0;
  animation:scanMove 5s ease-in-out infinite;
}
@keyframes scanMove{ 0%,100%{ top:6%; opacity:.2; } 50%{ top:92%; opacity:.9; } }

.about-text{ font-size:16.5px; line-height:1.8; color:var(--gray); margin:0 0 20px; max-width:560px; }
.about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:40px; padding-top:36px; border-top:1px solid var(--line); }
.stat{ display:flex; flex-direction:column; gap:6px; }
.stat-number{ font-family:var(--font-display); font-size:clamp(28px,3vw,38px); color:#fff; }
.stat-label{ font-size:12px; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.06em; line-height:1.4; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ padding:150px 0; background:linear-gradient(180deg, var(--black), #0d0808 50%, var(--black)); position:relative; }
.testi-carousel{ position:relative; max-width:760px; margin:64px auto 0; }
.testi-glow{
  position:absolute; inset:-40px; background:radial-gradient(ellipse at center, var(--red-glow-soft), transparent 70%);
  z-index:0; pointer-events:none;
}
.testi-track{ position:relative; min-height:340px; z-index:1; }

.testi-card{
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  border:1px solid var(--line-strong); border-radius:20px;
  padding:44px 44px 36px;
  display:flex; flex-direction:column; gap:22px;
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.testi-card.active{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.testi-quote-mark{ font-family:var(--font-display); font-size:56px; color:var(--red); opacity:.5; line-height:.5; }
.testi-text{ font-size:18px; line-height:1.65; color:#eee; flex:1; }
.testi-rating{ display:flex; gap:4px; color:var(--red-bright); font-size:15px; letter-spacing:2px; }
.testi-footer{ display:flex; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--line); }
.testi-avatar{ width:50px; height:50px; border-radius:50%; overflow:hidden; border:1.5px solid var(--red-bright); flex:none; background:var(--charcoal-3); }
.testi-avatar img{ width:100%; height:100%; object-fit:cover; }
.testi-name{ font-weight:700; font-size:14.5px; }
.testi-role{ font-size:12.5px; color:var(--gray-dim); }

.testi-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:34px; position:relative; z-index:1; }
.testi-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03); color:var(--white); display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.testi-arrow:hover{ border-color:var(--red-bright); color:var(--red-bright); background:rgba(225,6,0,.08); transform:scale(1.08); }
.testi-dots{ display:flex; gap:9px; }
.testi-dot{ width:8px; height:8px; border-radius:50%; background:var(--charcoal-3); border:1px solid var(--line-strong); transition:all .35s var(--ease); }
.testi-dot.active{ background:var(--red-bright); box-shadow:0 0 10px 1px var(--red-glow); width:22px; border-radius:5px; border-color:transparent; }

.center-cta{ text-align:center; margin-top:46px; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:150px 0; background:var(--black-deep); }
.service-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

.service-card{
  position:relative; border-radius:18px; padding:30px 26px 26px;
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  border:1px solid var(--line); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  opacity:0; transform:translateY(24px);
}
.service-card.in-view{ opacity:1; transform:translateY(0); }
.service-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), var(--red-glow-soft), transparent 60%);
}
.service-card:hover{
  transform:translateY(-9px) scale(1.015);
  border-color:var(--red-glow);
  box-shadow:0 24px 50px -20px rgba(225,6,0,.28);
}
.service-card:hover::before{ opacity:1; }
.service-icon{
  width:52px; height:52px; border-radius:13px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, rgba(225,6,0,.18), rgba(225,6,0,.03));
  border:1px solid var(--red-glow-soft);
  color:var(--red-bright);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
.service-card:hover .service-icon{ transform:scale(1.1) rotate(-4deg); background:linear-gradient(155deg, rgba(225,6,0,.35), rgba(225,6,0,.06)); }
.service-title{ font-size:17.5px; font-weight:800; margin:0 0 10px; letter-spacing:.01em; }
.service-desc{ font-size:14px; line-height:1.6; color:var(--gray-dim); margin:0; position:relative; z-index:1; }
.service-num{
  position:absolute; top:24px; right:26px; font-family:var(--font-display); font-size:13px; color:var(--gray-dim);
  letter-spacing:.05em; opacity:.6;
}

/* ==========================================================================
   TEAM — signature beam diagram
   ========================================================================== */
.team{ position:relative; padding:160px 0 140px; overflow:hidden; }
.team-glow{
  position:absolute; top:10%; left:50%; transform:translateX(-50%); width:900px; height:900px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow-soft), transparent 65%); pointer-events:none;
}
.team-diagram{ position:relative; margin-top:70px; min-height:560px; }
.team-beams{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.beam-path{ fill:none; stroke:url(#beamGrad); stroke-width:1.4; stroke-dasharray:8 10; opacity:.55; }
.beam-pulse{ fill:none; stroke:var(--red-bright); stroke-width:2; filter:drop-shadow(0 0 6px var(--red-bright)); stroke-dasharray:60 900; opacity:.9; }

.team-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:118px; height:118px; border-radius:50%;
  background:radial-gradient(circle, var(--red-deep), #1a0402);
  border:1px solid var(--red-glow);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 60px 10px var(--red-glow-soft), inset 0 0 20px rgba(0,0,0,.5);
}
.team-core .ring-1{ inset:-16px; }
.team-core .ring-2{ inset:-32px; border-style:dashed; }
.team-core-mark{ font-family:var(--font-display); font-size:42px; color:#fff; text-shadow:0 0 20px var(--red-glow); }

.team-nodes{ position:relative; z-index:2; height:560px; }
.team-node{
  position:absolute; width:150px; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.team-node.in-view{ opacity:1; }
.node-photo-wrap{
  width:84px; height:84px; border-radius:50%; padding:3px;
  background:linear-gradient(160deg, var(--red-bright), var(--red-deep));
  box-shadow:0 10px 26px -10px rgba(225,6,0,.5);
  transition:transform .4s var(--ease);
}
.team-node:hover .node-photo-wrap{ transform:scale(1.08) translateY(-4px); }
.node-photo{ width:100%; height:100%; border-radius:50%; overflow:hidden; border:2px solid var(--black); background:var(--charcoal-3); }
.node-photo img{ width:100%; height:100%; object-fit:cover; }
.node-role{ font-size:12.5px; font-weight:700; text-align:center; letter-spacing:.02em; }
.node-title{ font-size:10.5px; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.08em; text-align:center; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{ padding:130px 0 150px; background:var(--black-deep); }
.process-track{ position:relative; margin-top:70px; }
.process-line{ width:100%; height:8px; display:block; margin-bottom:0; }
.process-line-bg{ stroke:var(--line-strong); stroke-width:2; }
.process-line-fill{ stroke:var(--red-bright); stroke-width:2; stroke-dasharray:1200; stroke-dashoffset:1200; filter:drop-shadow(0 0 6px var(--red-glow)); transition:stroke-dashoffset 1.6s var(--ease); }
.process-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:-4px; }
.process-step{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.process-step.in-view{ opacity:1; transform:translateY(0); }
.process-dot{
  width:18px; height:18px; border-radius:50%; background:var(--charcoal-2);
  border:2px solid var(--red-glow); position:relative;
}
.process-dot::after{
  content:''; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--red-glow-soft);
}
.process-step.in-view .process-dot{ background:var(--red-bright); box-shadow:0 0 16px 3px var(--red-glow); }
.process-name{ font-size:15px; font-weight:800; }
.process-desc{ font-size:12.5px; color:var(--gray-dim); line-height:1.55; max-width:190px; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.portfolio{ padding:150px 0; }
.portfolio-tabs{ display:flex; justify-content:center; gap:12px; margin-top:44px; flex-wrap:wrap; }
.p-tab{
  padding:13px 26px; border-radius:999px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.02); color:var(--gray); font-weight:700; font-size:13.5px;
  letter-spacing:.02em; transition:all .35s var(--ease);
}
.p-tab:hover{ color:var(--white); border-color:var(--red-glow); }
.p-tab.active{ color:#fff; background:linear-gradient(180deg, var(--red-bright), var(--red)); border-color:transparent; box-shadow:0 10px 24px -10px var(--red-glow); }

.portfolio-grid{
  margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.portfolio-grid.mode-short{ grid-template-columns:repeat(4,1fr); }
.portfolio-grid.mode-thumb{ grid-template-columns:repeat(3,1fr); }

.p-card{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--charcoal); cursor:pointer;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  opacity:0; transform:translateY(22px) scale(.98);
}
.p-card.show{ animation:pcardIn .6s var(--ease) forwards; }
@keyframes pcardIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
.p-card:hover{ transform:translateY(-8px); border-color:var(--red-glow); box-shadow:0 26px 50px -22px rgba(225,6,0,.32); }

.p-thumb{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--charcoal-3); }
.p-card[data-ratio="9x16"] .p-thumb{ aspect-ratio:9/16; }
.p-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s; filter:brightness(.82); }
.p-card:hover .p-thumb img{ transform:scale(1.08); filter:brightness(1); }
.p-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s var(--ease);
}
.p-card:hover .p-play{ opacity:1; }
.p-play span{
  width:56px; height:56px; border-radius:50%; background:rgba(225,6,0,.85); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 30px var(--red-glow);
  transform:scale(.85); transition:transform .4s var(--ease);
}
.p-card:hover .p-play span{ transform:scale(1); }
.p-info{ padding:18px 20px 22px; }
.p-cat{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--red-bright); margin:0 0 6px; }
.p-title{ font-size:15.5px; font-weight:700; letter-spacing:.005em; line-height:1.4; margin:0; }

/* ==========================================================================
   GROWTH / RESULTS
   ========================================================================== */
.growth{ padding:150px 0; background:linear-gradient(180deg, var(--black-deep), #0c0707); }
.growth-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:80px; align-items:center; }
.growth-list{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.growth-list li{ display:flex; align-items:center; gap:12px; font-size:15px; color:#e8e6e4; }
.check{ color:var(--red-bright); font-weight:800; }

.growth-card{
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  border:1px solid var(--line-strong); border-radius:20px; padding:30px 30px 24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  transform:translateY(56px); opacity:0;
  transition:transform 1s cubic-bezier(.16,.8,.24,1), opacity .9s ease;
}
.growth-card.animate{ transform:translateY(0); opacity:1; }
.growth-card-head{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--gray-dim); margin-bottom:18px; }
.growth-badge{ color:var(--red-bright); font-weight:800; background:rgba(225,6,0,.1); padding:4px 12px; border-radius:999px; border:1px solid var(--red-glow-soft); }
.growth-chart{ width:100%; height:auto; display:block; }
.growth-gridlines line{ stroke:var(--line); stroke-width:1; }
.growth-area{ fill:url(#growthFill); opacity:0; transition:opacity 1s var(--ease) .6s; }
.growth-area.animate{ opacity:1; }
.growth-line{ fill:none; stroke:var(--red-bright); stroke-width:3; filter:drop-shadow(0 0 8px var(--red-glow)); stroke-dasharray:1600; stroke-dashoffset:1600; transition:stroke-dashoffset 2.1s var(--ease); }
.growth-line.animate{ stroke-dashoffset:0; }
.growth-dot{ fill:#fff; stroke:var(--red-bright); stroke-width:4; opacity:0; transition:opacity .4s var(--ease) 2s; }
.growth-dot.animate{ opacity:1; }
.growth-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--gray-dim); letter-spacing:.05em; }
.growth-peak{
  position:absolute; margin-top:-256px; margin-left:calc(100% - 150px);
  font-size:12px; font-weight:800; background:var(--black); border:1px solid var(--red-glow); color:#fff;
  padding:6px 12px; border-radius:8px; opacity:0; transition:opacity .5s var(--ease) 2.2s;
}
.growth-peak.animate{ opacity:1; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing{ padding:150px 0; background:var(--black-deep); }
.pricing-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.price-card{
  position:relative; border-radius:20px; padding:38px 32px; border:1px solid var(--line-strong);
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.price-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -26px rgba(0,0,0,.6); }
.price-card.featured{
  border-color:var(--red);
  background:linear-gradient(165deg, #1c0f0e, var(--charcoal));
  box-shadow:0 0 0 1px var(--red-glow), 0 30px 70px -26px rgba(225,6,0,.35);
  transform:scale(1.03);
}
.price-card.featured:hover{ transform:scale(1.03) translateY(-8px); }
.price-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--red-bright), var(--red)); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:7px 18px; border-radius:999px;
  box-shadow:0 8px 20px -6px var(--red-glow);
}
.price-name{ font-family:var(--font-display); font-weight:400; font-size:25px; letter-spacing:.045em; line-height:1.25; margin:6px 0 8px; text-transform:uppercase; }
.price-desc{ font-size:13.5px; color:var(--gray-dim); line-height:1.55; margin:0 0 22px; min-height:40px; }
.price-amount{ font-family:var(--font-display); font-size:44px; margin-bottom:26px; display:flex; align-items:baseline; gap:2px; }
.currency{ font-size:22px; color:var(--gray); }
.per{ font-family:var(--font-body); font-size:14px; color:var(--gray-dim); font-weight:600; margin-left:4px; }
.price-features{ display:flex; flex-direction:column; gap:13px; margin-bottom:30px; flex:1; }
.price-features li{ font-size:14px; color:#e2e0dd; padding-left:24px; position:relative; }
.price-features li::before{ content:'✓'; position:absolute; left:0; color:var(--red-bright); font-weight:800; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{ position:relative; padding:190px 0; overflow:hidden; text-align:center; }
.final-cta-bg{ position:absolute; inset:0; background:radial-gradient(ellipse 80% 70% at 50% 50%, #1a0605, var(--black) 70%); }
.fc-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1000px; height:600px;
  background:radial-gradient(ellipse, var(--red-glow) 0%, transparent 65%); filter:blur(20px);
  animation:pulseGlow 6s ease-in-out infinite;
}
.fc-particles{ position:absolute; inset:0; }
.fc-particle{
  position:absolute; width:3px; height:3px; border-radius:50%; background:var(--red-bright);
  box-shadow:0 0 8px 2px var(--red-glow); opacity:.6; animation:particleFloat linear infinite;
}
@keyframes particleFloat{ 0%{ transform:translateY(0); opacity:0;} 10%{opacity:.7;} 90%{opacity:.4;} 100%{ transform:translateY(-260px); opacity:0;} }

.final-title{
  font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(34px,5.4vw,66px); line-height:1.04; max-width:900px; margin:0 auto 22px;
  position:relative; z-index:1;
}
.final-cta .section-sub{ position:relative; z-index:1; max-width:560px; margin:0 auto 44px; }
.final-cta-actions{ position:relative; z-index:1; display:flex; justify-content:center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--black-deep); border-top:1px solid var(--line); padding:88px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:50px; padding-bottom:70px; }
.footer-brand .brand{ margin-bottom:20px; }
.footer-desc{ font-size:14px; line-height:1.7; color:var(--gray-dim); max-width:320px; margin:0 0 24px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--gray);
  transition:all .3s var(--ease);
}
.footer-social a:hover{ color:#fff; border-color:var(--red-bright); background:rgba(225,6,0,.12); }
.footer-col h4{ font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-dim); margin:0 0 20px; }
.footer-col{ display:flex; flex-direction:column; gap:13px; }
.footer-col a, .footer-static{ font-size:14px; color:#cfcdca; transition:color .3s; }
.footer-col a:hover{ color:var(--red-bright); }
.footer-bottom{ border-top:1px solid var(--line); padding:24px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--gray-dim); flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; gap:20px; }
.footer-legal a:hover{ color:var(--white); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .about-grid, .growth-grid{ grid-template-columns:1fr; gap:56px; }
  .about-frame{ max-width:420px; margin:0 auto; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-grid, .portfolio-grid.mode-short{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; }
  .price-card.featured{ transform:none; order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .process-steps{ grid-template-columns:repeat(5,1fr); }
}

@media (max-width:860px){
  .main-nav, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .about-stats{ grid-template-columns:repeat(2,1fr); }
  .process-steps{ grid-template-columns:1fr; gap:36px; }
  .process-line{ display:none; }
  .team-diagram{ min-height:auto; }
  .team-nodes{ position:static; height:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:32px 16px; }
  .team-node{ position:static; transform:none; opacity:1; }
  .team-core{ position:relative; top:auto; left:auto; transform:none; margin:0 auto 46px; }
  .team-beams{ display:none; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:640px){
  .section-inner{ padding:0 22px; }
  .hero{ padding:130px 20px 70px; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .service-grid{ grid-template-columns:1fr; }
  .portfolio-grid, .portfolio-grid.mode-short, .portfolio-grid.mode-thumb{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; gap:20px; }
  .team-nodes{ grid-template-columns:repeat(2,1fr); }
  .testi-card{ padding:32px 24px 28px; }
  .growth-peak{ display:none; }
  .final-cta{ padding:130px 0; }
  .footer-bottom-inner{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   APEX MEDIA — Cinematic Media Modal (video + image lightbox)
   ========================================================================== */
body.apex-modal-lock{ overflow:hidden; }
.apex-modal-overlay{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  padding:32px 20px; background:rgba(5,5,5,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transition:opacity .32s cubic-bezier(.16,.8,.24,1), visibility 0s linear .32s;
}
.apex-modal-overlay.open{ opacity:1; visibility:visible; transition:opacity .32s cubic-bezier(.16,.8,.24,1); }
.apex-modal{
  position:relative; width:100%; max-width:880px; background:linear-gradient(180deg, rgba(26,26,26,.92), rgba(10,10,10,.96));
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:14px 14px 18px; box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(225,6,0,.08);
  transform:scale(.92) translateY(18px); opacity:0; transition:transform .38s cubic-bezier(.16,.8,.24,1), opacity .32s ease;
  max-height:92vh; overflow-y:auto;
}
.apex-modal-overlay.open .apex-modal{ transform:scale(1) translateY(0); opacity:1; }
.apex-modal.portrait{ max-width:400px; }
.apex-modal-media{ position:relative; width:100%; border-radius:14px; overflow:hidden; background:#000; aspect-ratio:16/9; }
.apex-modal.portrait .apex-modal-media{ aspect-ratio:9/16; max-height:76vh; margin:0 auto; }
.apex-modal.image-mode .apex-modal-media{ aspect-ratio:auto; background:#000; display:flex; align-items:center; justify-content:center; }
.apex-modal.image-mode .apex-modal-media img{ width:100%; height:auto; max-height:76vh; object-fit:contain; display:block; }
.apex-modal-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.apex-modal-media video{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; background:#000; }
.apex-modal-fallback{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--gray,#9c9a97); text-align:center; padding:20px; }
.apex-modal-meta{ padding:16px 10px 4px; }
.apex-modal-meta h3{ font-family:var(--font-display,'Anton',sans-serif); font-size:19px; margin:0 0 4px; color:var(--white,#f5f4f2); letter-spacing:.01em; }
.apex-modal-meta span{ font-size:12.5px; color:var(--gray,#9c9a97); text-transform:uppercase; letter-spacing:.06em; }
.apex-modal-close{
  position:absolute; top:-14px; right:-14px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, var(--red-bright,#ff2a1a), var(--red,#e10600)); color:#fff; font-size:20px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(225,6,0,.4); transition:transform .2s; z-index:5;
}
.apex-modal-close:hover{ transform:scale(1.08) rotate(90deg); }
@media (max-width:600px){
  .apex-modal{ padding:10px 10px 14px; border-radius:16px; max-height:88vh; }
  .apex-modal-close{ top:-12px; right:-6px; }
}

/* Testimonial cards: optional play affordance (never a forced YouTube icon) */
.testi-avatar{ position:relative; }
.testi-play{
  position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%;
  background:rgba(225,6,0,.85); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 14px rgba(225,6,0,.5); pointer-events:none;
}
.testi-stat-badge{
  margin-left:auto; font-size:11.5px; font-weight:800; color:var(--red-bright,#ff2a1a);
  background:rgba(225,6,0,.1); border:1px solid var(--red-glow-soft,rgba(225,6,0,.14)); padding:3px 10px; border-radius:999px;
}
/* Fix: JS renders .testi-person / .testi-stars — bring them up to the same
   look the original .testi-footer / .testi-rating rules intended. */
.testi-person{ display:flex; align-items:center; gap:14px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.testi-person strong{ font-weight:700; font-size:14.5px; display:block; }
.testi-person span{ font-size:12.5px; color:var(--gray-dim); }
.testi-stars{ display:flex; gap:4px; color:var(--red-bright); font-size:15px; letter-spacing:2px; margin-bottom:6px; }

/* ==========================================================================
   APEX MEDIA — Services page: admin-uploadable value-section image
   (replaces the old animated "A" scanning graphic).
   ========================================================================== */
.value-image-frame{
  position:relative; aspect-ratio:1/1.05; border-radius:22px; overflow:hidden;
  background:linear-gradient(155deg, var(--charcoal), var(--black-deep));
  border:1px solid var(--line-strong);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.value-image-frame::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(225,6,0,.12), transparent 55%);
}
.value-image-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){
  .value-image-frame{ max-width:420px; margin:0 auto; }
}

/* ==========================================================================
   APEX MEDIA — Testimonials page: static grid-card variant (the carousel's
   .testi-card is positioned absolutely for its slide stack, so the wall/grid
   page uses its own non-absolute card shell around the same inner classes).
   ========================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:28px; margin-top:56px; }
.testi-grid-card{
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  border:1px solid var(--line-strong); border-radius:20px;
  padding:36px 32px 30px; display:flex; flex-direction:column; gap:18px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.testi-grid-card .testi-text{ font-size:16.5px; }

/* ==========================================================================
   APEX MEDIA — Testimonials sub-sections (video + picture proof headings)
   ========================================================================== */
.testi-subsection{ margin:0 0 70px; }
.testi-subsection .eyebrow{ margin-bottom:14px; }
.testi-subsection .section-title{ margin-bottom:10px; }
.testi-subsection .section-sub{ margin-bottom:6px; }

.video-testi-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  max-width:920px;
  margin:36px auto 0;
}
.video-testi-card{
  background:linear-gradient(160deg, var(--charcoal-2), var(--charcoal));
  border:1px solid var(--line-strong); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 50px -26px rgba(0,0,0,.65);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.video-testi-card:hover{
  transform:translateY(-6px);
  border-color:var(--red-glow);
  box-shadow:0 30px 60px -24px rgba(225,6,0,.3);
}
.video-testi-frame{
  position:relative; width:100%; aspect-ratio:9/16; background:#000; overflow:hidden;
}
.video-testi-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;
}
.video-testi-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--gray-dim); font-size:12px; text-align:center; padding:16px; background:var(--charcoal-3);
}
.video-testi-fallback img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-testi-play-btn{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  background:rgba(225,6,0,.85); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px var(--red-glow); transition:transform .3s var(--ease), background .3s var(--ease);
  z-index:3;
}
.video-testi-play-btn:hover{ transform:scale(1.1); background:rgba(225,6,0,1); }
.video-testi-badge{
  position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg, var(--red-bright), var(--red)); padding:4px 10px; border-radius:999px;
  box-shadow:0 8px 20px -8px var(--red-glow); z-index:2; letter-spacing:.02em;
}
.video-testi-meta{
  padding:12px 14px 14px; display:flex; flex-direction:column; gap:2px; text-align:center;
}
.video-testi-meta strong{ font-size:13.5px; }
.video-testi-meta span{ font-size:11px; color:var(--gray-dim); }
.video-testi-meta .video-testi-for{ color:var(--red-bright); font-weight:600; }

.picture-proof-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:22px;
  margin:36px auto 0; max-width:1100px;
}
.picture-proof-card{
  background:var(--charcoal); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.picture-proof-img{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--charcoal-3); }
.picture-proof-img img{ width:100%; height:100%; object-fit:cover; }
.picture-proof-badge{
  position:absolute; top:10px; left:10px; font-size:11px; font-weight:800; color:#fff;
  background:rgba(225,6,0,.88); padding:4px 10px; border-radius:999px;
}
.picture-proof-body{ padding:10px 14px 14px; }
.picture-proof-name{ font-size:13px; font-weight:700; color:var(--white); }
.picture-proof-for{ font-size:11.5px; color:var(--gray-dim); margin-top:2px; }

@media (max-width:900px){
  .video-testi-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:600px; }
}
@media (max-width:560px){
  .video-testi-grid{ grid-template-columns:1fr; max-width:280px; }
  .picture-proof-grid{ grid-template-columns:1fr; }
}