/*
Theme Name: PixelUp Media
Theme URI: https://pixelupmedia.com
Author: PixelUp Media
Version: 14.8.0
Description: Esports & gaming broadcast production theme
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: pixelup
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Share+Tech+Mono&display=swap');

:root {
  --black:   #03040a;
  --deep:    #070a14;
  --dark:    #0c1020;
  --surface: #121826;
  --raised:  #18202e;
  --border:  #1e2a3a;
  --bl2:     #263040;
  --muted:   #6a85a0;
  --dim:     #94afc4;
  --text:    #c8dcea;
  --white:   #eaf4fc;
  --cyan:    #6B60F7;
  --cyan-dim:#4F45D0;
  --cyan-dark:#1a1250;
  --orange:  #ff5f1a;
  --font-display:'Sora',sans-serif;
  --font-body:'Sora',sans-serif;
  --font-mono:'Share Tech Mono',monospace;
  --max-w:1340px;
  --r-sm:2px;
  --r-md:8px;
  --r-lg:16px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{background:var(--black);color:var(--text);font-family:var(--font-body);overflow-x:hidden;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 2rem}
.section{padding:7rem 0}
.section--dark{background:var(--deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:800;line-height:1.05;color:var(--white);letter-spacing:-0.02em;text-transform:uppercase}
h1{font-size:clamp(3rem,9vw,8.5rem)}
h2{font-size:clamp(2.2rem,5vw,4.5rem)}
h3{font-size:clamp(1.3rem,2.5vw,1.8rem)}
p{color:var(--dim);line-height:1.75;font-size:1rem}
.text-cyan{background:linear-gradient(135deg,#6B60F7,#9D96FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.eyebrow{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem}
.eyebrow::before{content:'';display:block;width:22px;height:1.5px;background:var(--cyan);flex-shrink:0}

/* Word split */
.word-wrap{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.05em}
.word{display:inline-block;transform:translateY(110%) rotate(2deg);opacity:0;transition:transform 0.6s var(--ease-out),opacity 0.4s ease}
.word--visible{transform:translateY(0) rotate(0deg);opacity:1}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);filter:blur(2px);transition:opacity 0.75s var(--ease-smooth),transform 0.75s var(--ease-out),filter 0.6s ease;will-change:opacity,transform}
.reveal.in-view{opacity:1;transform:translateY(0);filter:blur(0)}
.reveal--left{opacity:0;transform:translateX(-32px);filter:blur(2px);transition:opacity 0.75s var(--ease-smooth),transform 0.75s var(--ease-out),filter 0.6s ease}
.reveal--left.in-view{opacity:1;transform:translateX(0);filter:blur(0)}
.reveal--right{opacity:0;transform:translateX(32px);filter:blur(2px);transition:opacity 0.75s var(--ease-smooth),transform 0.75s var(--ease-out),filter 0.6s ease}
.reveal--right.in-view{opacity:1;transform:translateX(0);filter:blur(0)}
.reveal--scale{opacity:0;transform:scale(0.93) translateY(16px);filter:blur(3px);transition:opacity 0.6s var(--ease-smooth),transform 0.7s var(--ease-spring),filter 0.6s ease}
.reveal--scale.in-view{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
.reveal--tilt{opacity:0;transform:perspective(800px) rotateX(8deg) translateY(20px);filter:blur(2px);transition:opacity 0.75s var(--ease-smooth),transform 0.8s var(--ease-out),filter 0.6s ease}
.reveal--tilt.in-view{opacity:1;transform:perspective(800px) rotateX(0) translateY(0);filter:blur(0)}
.reveal-delay-1{transition-delay:0.08s}
.reveal-delay-2{transition-delay:0.16s}
.reveal-delay-3{transition-delay:0.24s}
.reveal-delay-4{transition-delay:0.32s}
.reveal-delay-5{transition-delay:0.44s}

/* ── Clip wipe reveal (curtain opening from center) ── */
.reveal--wipe{clip-path:inset(0 50% 0 50%);opacity:0;transition:clip-path 0.9s var(--ease-out),opacity 0.4s ease}
.reveal--wipe.in-view{clip-path:inset(0 0% 0 0%);opacity:1}

/* ── 3D flip reveal (card flips in from bottom) ── */
.reveal--flip{opacity:0;transform:perspective(600px) rotateX(25deg) translateY(40px);transform-origin:center bottom;transition:opacity 0.6s var(--ease-smooth),transform 0.8s var(--ease-spring)}
.reveal--flip.in-view{opacity:1;transform:perspective(600px) rotateX(0) translateY(0)}

/* ── Elastic spring up ── */
.reveal--spring{opacity:0;transform:translateY(60px) scale(0.9);transition:opacity 0.5s ease,transform 0.9s var(--ease-spring)}
.reveal--spring.in-view{opacity:1;transform:translateY(0) scale(1)}

/* ── Slide and rotate from left ── */
.reveal--rotate-left{opacity:0;transform:translateX(-50px) rotate(-3deg);transition:opacity 0.7s var(--ease-smooth),transform 0.8s var(--ease-out)}
.reveal--rotate-left.in-view{opacity:1;transform:translateX(0) rotate(0)}

/* ── Slide and rotate from right ── */
.reveal--rotate-right{opacity:0;transform:translateX(50px) rotate(3deg);transition:opacity 0.7s var(--ease-smooth),transform 0.8s var(--ease-out)}
.reveal--rotate-right.in-view{opacity:1;transform:translateX(0) rotate(0)}

/* ── Zoom blur (far to near) ── */
.reveal--zoom{opacity:0;transform:scale(0.7);filter:blur(8px);transition:opacity 0.6s ease,transform 1s var(--ease-out),filter 0.8s ease}
.reveal--zoom.in-view{opacity:1;transform:scale(1);filter:blur(0)}

/* ── Rise with shadow (lifts off the page) ── */
.reveal--lift{opacity:0;transform:translateY(30px);box-shadow:none;transition:opacity 0.6s ease,transform 0.7s var(--ease-out),box-shadow 0.7s ease}
.reveal--lift.in-view{opacity:1;transform:translateY(0);box-shadow:0 20px 60px rgba(0,0,0,0.3)}

/* ── Diagonal slide ── */
.reveal--diagonal{opacity:0;transform:translate(-30px,30px) rotate(-2deg);transition:opacity 0.6s ease,transform 0.8s var(--ease-out)}
.reveal--diagonal.in-view{opacity:1;transform:translate(0,0) rotate(0)}

/* ── Typewriter heading cursor ── */
@keyframes cursor-blink{0%,100%{border-color:var(--cyan)}50%{border-color:transparent}}
.reveal--type{opacity:0;transform:none;transition:opacity 0.3s ease}
.reveal--type.in-view{opacity:1}
.typing-cursor{border-right:2px solid var(--cyan);padding-right:4px;animation:cursor-blink 0.8s step-end infinite}

/* ── LoL-style click pulse ── */
@keyframes click-ring-expand{0%{width:0;height:0;opacity:1;border-width:2px}60%{opacity:0.6}100%{width:60px;height:60px;opacity:0;border-width:1px}}
@keyframes click-ring-outer{0%{width:0;height:0;opacity:0.6;border-width:1px}100%{width:90px;height:90px;opacity:0;border-width:0.5px}}
@keyframes click-diamond{0%{transform:translate(-50%,-50%) scale(0) rotate(45deg);opacity:1}40%{transform:translate(-50%,-50%) scale(1) rotate(45deg);opacity:0.9}100%{transform:translate(-50%,-50%) scale(0.6) rotate(45deg);opacity:0}}
@keyframes click-line{0%{transform:translate(-50%,-50%) scaleY(0);opacity:0.8}50%{transform:translate(-50%,-50%) scaleY(1);opacity:0.5}100%{transform:translate(-50%,-50%) scaleY(0.3);opacity:0}}
.click-pulse{position:fixed;pointer-events:none;z-index:9999}
.click-pulse__ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--cyan);animation:click-ring-expand 0.5s var(--ease-out) forwards;box-shadow:0 0 8px rgba(107,96,247,0.3)}
.click-pulse__ring--outer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--cyan);opacity:0.4;animation:click-ring-outer 0.65s var(--ease-out) forwards}
.click-pulse__diamond{position:absolute;top:50%;left:50%;width:8px;height:8px;background:var(--cyan);animation:click-diamond 0.45s var(--ease-out) forwards;box-shadow:0 0 12px var(--cyan)}
.click-pulse__line{position:absolute;top:50%;left:50%;width:1px;height:18px;background:linear-gradient(to bottom,var(--cyan),transparent);transform-origin:center center;animation:click-line 0.4s var(--ease-out) forwards}
.click-pulse__line:nth-child(3){transform:translate(-50%,-50%) rotate(0deg)}
.click-pulse__line:nth-child(4){transform:translate(-50%,-50%) rotate(90deg)}
.click-pulse__line:nth-child(5){transform:translate(-50%,-50%) rotate(45deg)}
.click-pulse__line:nth-child(6){transform:translate(-50%,-50%) rotate(-45deg)}


/* ── 3D tilt cards ── */
.tilt-card{transition:transform 0.35s var(--ease-out),box-shadow 0.35s ease;transform-style:preserve-3d;will-change:transform}
.tilt-card:hover{box-shadow:0 25px 60px rgba(0,0,0,0.35),0 0 30px rgba(107,96,247,0.1)}

/* ── Hero line stagger clip reveal ── */
.hero__title .line-cyan,
.hero__title .line-solid,
.hero__title .line-accent{opacity:0;transform:translateX(-40px) skewX(-2deg);filter:blur(6px);transition:all 0.8s var(--ease-out)}
.hero.animated .hero__title .line-cyan{opacity:1;transform:translateX(0) skewX(0);filter:blur(0);transition-delay:0.1s}
.hero.animated .hero__title .line-solid{opacity:1;transform:translateX(0) skewX(0);filter:blur(0);transition-delay:0.3s}
.hero.animated .hero__title .line-accent{opacity:1;transform:translateX(0) skewX(0);filter:blur(0);transition-delay:0.5s}

/* ── Text shimmer on accent gradient text ── */
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
.text-shimmer{background:linear-gradient(90deg,#6B60F7 0%,#9D96FF 25%,#c4bfff 50%,#9D96FF 75%,#6B60F7 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite}

/* ── Glowing border sweep on panels ── */
@keyframes border-sweep{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.glow-border::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent);background-size:200% 100%;animation:border-sweep 3s ease infinite}

/* ── Floating badge pulse ── */
@keyframes badge-glow{0%,100%{box-shadow:0 0 12px rgba(107,96,247,0.15)}50%{box-shadow:0 0 24px rgba(107,96,247,0.35),0 0 48px rgba(107,96,247,0.1)}}
.hero__badge{animation:badge-glow 3s ease-in-out infinite}

/* ── Stat value glow pulse on reveal ── */
@keyframes stat-glow{0%{text-shadow:none;opacity:0;transform:translateY(12px)}60%{text-shadow:0 0 40px rgba(107,96,247,0.5);opacity:1;transform:translateY(0)}100%{text-shadow:0 0 20px rgba(107,96,247,0.2);opacity:1;transform:translateY(0)}}
.hero__stat-value.counted{animation:stat-glow 1s var(--ease-out) both}

/* ── Award item hover lift ── */
.award-item{transition:transform 0.3s var(--ease-out),box-shadow 0.3s ease,background 0.3s ease}
.award-item:hover{transform:translateX(6px);box-shadow:inset 3px 0 0 var(--cyan)}

/* ── Project row hover highlight ── */
.project-row{transition:background 0.25s ease,transform 0.25s var(--ease-out)}
.project-row:hover{background:rgba(107,96,247,0.04);transform:translateX(4px)}

/* ── Section entrance stagger for grids ── */
@keyframes card-rise{from{opacity:0;transform:translateY(30px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.stagger-cards.in-view .brand-card,
.stagger-cards.in-view .post-card{animation:card-rise 0.6s var(--ease-out) both}
.stagger-cards.in-view > :nth-child(1){animation-delay:0s}
.stagger-cards.in-view > :nth-child(2){animation-delay:0.07s}
.stagger-cards.in-view > :nth-child(3){animation-delay:0.14s}
.stagger-cards.in-view > :nth-child(4){animation-delay:0.21s}
.stagger-cards.in-view > :nth-child(5){animation-delay:0.28s}
.stagger-cards.in-view > :nth-child(6){animation-delay:0.35s}
.stagger-cards.in-view > :nth-child(7){animation-delay:0.42s}
.stagger-cards.in-view > :nth-child(8){animation-delay:0.49s}

/* ── Smooth scroll-linked parallax fade for sections ── */
.section[data-scroll-fade]{transition:opacity 0.3s ease}

/* ── Glitch text hover for hero (optional fun touch) ── */
@keyframes glitch-1{0%,100%{clip-path:inset(0 0 95% 0)}25%{clip-path:inset(30% 0 50% 0)}50%{clip-path:inset(60% 0 10% 0)}75%{clip-path:inset(10% 0 70% 0)}}
@keyframes glitch-2{0%,100%{clip-path:inset(95% 0 0 0)}25%{clip-path:inset(50% 0 30% 0)}50%{clip-path:inset(10% 0 60% 0)}75%{clip-path:inset(70% 0 10% 0)}}

/* ── Scrolling Marquee Ticker ── */
@keyframes ticker-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.scroll-ticker{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--deep);padding:1.25rem 0;position:relative}
.scroll-ticker::before,.scroll-ticker::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.scroll-ticker::before{left:0;background:linear-gradient(90deg,var(--deep),transparent)}
.scroll-ticker::after{right:0;background:linear-gradient(270deg,var(--deep),transparent)}
.scroll-ticker__track{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;animation:ticker-scroll 30s linear infinite;width:max-content}
.scroll-ticker__track span{font-family:var(--font-display);font-size:clamp(0.9rem,1.5vw,1.15rem);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted)}
.scroll-ticker__dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex-shrink:0;box-shadow:0 0 8px rgba(107,96,247,0.4)}

/* ── Timeline draw-on-scroll ── */
.timeline::before{transition:none}
.timeline--animated::before{background:linear-gradient(180deg,var(--cyan) var(--draw-progress,0%),var(--border) var(--draw-progress,0%))}
.timeline-item{opacity:0;transform:translateX(-16px);transition:opacity 0.5s var(--ease-out),transform 0.5s var(--ease-out)}
.timeline-item.tl-visible{opacity:1;transform:translateX(0)}
.timeline-item.tl-visible::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(107,96,247,0.5)}

/* ── Section zoom entrance ── */
.section-zoom{opacity:0;transform:scale(0.96);transition:opacity 0.8s var(--ease-smooth),transform 0.9s var(--ease-out)}
.section-zoom.zoomed-in{opacity:1;transform:scale(1)}

/* ── Parallax number float ── */
.parallax-num{transition:transform 0.1s linear;will-change:transform}


/* ── About stat rows stagger reveal ── */
.about__stat-row{opacity:0;transform:translateX(20px);transition:opacity 0.4s var(--ease-out),transform 0.4s var(--ease-out),background 0.15s}
.about__stat-row.stat-visible{opacity:1;transform:translateX(0)}

/* ── Award items stagger from left ── */
.award-item{opacity:0;transform:translateX(-20px);transition:transform 0.3s var(--ease-out),box-shadow 0.3s ease,background 0.3s ease,opacity 0.4s var(--ease-out)}
.award-item.award-visible{opacity:1;transform:translateX(0)}

/* ── Project row slide-in from right ── */
.project-row{opacity:0;transform:translateX(24px);transition:background 0.25s ease,transform 0.4s var(--ease-out),opacity 0.4s var(--ease-out)}
.project-row.row-visible{opacity:1;transform:translateX(0)}

/* ── Floating decorative particles in sections ── */
@keyframes float-particle{0%,100%{transform:translateY(0) rotate(0deg);opacity:0.3}25%{transform:translateY(-20px) rotate(90deg);opacity:0.6}50%{transform:translateY(-40px) rotate(180deg);opacity:0.3}75%{transform:translateY(-20px) rotate(270deg);opacity:0.6}}
.section-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.section-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);opacity:0.2;animation:float-particle 8s ease-in-out infinite}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.85rem 1.9rem;font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;border-radius:var(--r-sm);transition:all 0.2s var(--ease-out);white-space:nowrap}
.btn-primary{background:var(--cyan);color:#ffffff !important;font-weight:700;letter-spacing:0.04em}
.btn-primary:hover{background:#8b82ff;transform:translateY(-2px);box-shadow:0 8px 30px rgba(107,96,247,0.45);color:#ffffff !important}
.btn-outline{background:transparent;color:var(--white);border:1.5px solid var(--bl2)}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,0.05);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(107,96,247,0.08);border-color:var(--cyan-dim);color:var(--cyan)}

/* Announcement bar */
.announcement-bar{
  background:linear-gradient(90deg,#07111e,#0a1a2e,#07111e);
  border-bottom:1px solid var(--cyan-dark);
  padding:0.6rem 1rem;
  overflow:hidden;
  position:relative;
  max-height:60px;
  transition:max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  opacity:1;
}
/* Hide announcement bar when scrolled — navbar stays at top:0 always */
.site-header.scrolled .announcement-bar{
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}
.announcement-bar::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(107,96,247,0.06),transparent);animation:sweep 3s linear infinite}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.announcement-bar__inner{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;position:relative;z-index:1}
.announcement-bar__badge{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;background:var(--cyan);color:var(--black);padding:0.18rem 0.5rem;border-radius:1px;font-weight:700}
.announcement-bar__text{font-family:var(--font-display);font-size:0.95rem;font-weight:600;letter-spacing:0.04em;color:var(--white)}
.announcement-bar__cta{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);border:1px solid var(--cyan-dark);padding:0.22rem 0.7rem;border-radius:1px;transition:all 0.15s}
.announcement-bar__cta:hover{background:rgba(107,96,247,0.1)}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:998;
  transition:background 0.3s ease,backdrop-filter 0.3s ease,border-color 0.3s ease;
}
.site-header__bg{
  position:absolute;inset:0;
  background:transparent;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:
    background 0.6s cubic-bezier(0.4,0,0.2,1),
    backdrop-filter 0.6s cubic-bezier(0.4,0,0.2,1),
    -webkit-backdrop-filter 0.6s cubic-bezier(0.4,0,0.2,1),
    border-color 0.6s cubic-bezier(0.4,0,0.2,1);
}
.site-header.scrolled .site-header__bg{
  background:rgba(5,8,18,0.55);
  backdrop-filter:blur(28px) saturate(200%) brightness(0.95);
  -webkit-backdrop-filter:blur(28px) saturate(200%) brightness(0.95);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;max-width:var(--max-w);margin:0 auto;position:relative;z-index:1}
.site-logo{display:flex;align-items:center;gap:0.65rem}
.site-logo__mark svg{width:34px;height:34px;filter:drop-shadow(0 2px 8px rgba(107,96,247,0.4))}
.site-logo__mark img{width:34px;height:34px;filter:drop-shadow(0 2px 8px rgba(107,96,247,0.4));object-fit:contain}
.site-logo__text{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--white);line-height:1.1}
.site-logo__text span{color:var(--cyan)}
.site-nav ul{display:flex;align-items:center;gap:2rem}
.site-nav a{font-family:var(--font-display);font-size:0.9rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--white);transition:color 0.15s;position:relative}
.site-nav a::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1.5px;background:var(--cyan);transform:scaleX(0);transition:transform 0.15s var(--ease-out);transform-origin:left}
.site-nav a:hover{color:var(--white)}
.site-nav a:hover::after{transform:scaleX(1)}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
  position:fixed;
  /* Sits in the navbar row, below announcement bar */
  top:calc(var(--ann-h, 40px) + 0.7rem);
  right:1.25rem;
  z-index:99999;
  background:transparent;
  border:none;
  cursor:pointer;
  transition:top 0.3s ease;
}
/* When scrolled, announcement bar is gone — move up */
.scrolled-page .nav-toggle,
body.scrolled .nav-toggle{
  top:0.7rem;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);transition:all 0.25s ease;transform-origin:center}
.nav-toggle.active span{background:var(--cyan)}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;background:rgba(3,4,10,0.98);backdrop-filter:blur(24px);z-index:998;flex-direction:column;align-items:center;justify-content:center;gap:2rem;opacity:0;transform:translateY(-16px);transition:all 0.3s var(--ease-out);pointer-events:none}
.mobile-menu.active{opacity:1;transform:translateY(0);pointer-events:all}
.mobile-menu a{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--text);transition:color 0.15s}
.mobile-menu a:hover{color:var(--cyan)}

/* Hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;padding-top:160px;padding-bottom:5rem}
@keyframes hero-breathe{0%,100%{transform:scale(1.08)}50%{transform:scale(1.14)}}
.hero__bg-photo{position:absolute;inset:-20px;background-size:cover;background-position:center 30%;z-index:0;opacity:0.15;filter:saturate(0.6);animation:hero-breathe 20s ease-in-out infinite;will-change:transform;transition:transform 0.15s ease-out}
.hero__bg-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,var(--deep) 0%,transparent 30%,transparent 60%,var(--deep) 100%)}
#particleCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__grid{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(107,96,247,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(107,96,247,0.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%)}
.hero__scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px)}
.hero__orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;animation:orb-float 10s ease-in-out infinite}
.hero__orb--1{top:-20%;left:40%;width:600px;height:600px;background:radial-gradient(ellipse,rgba(107,96,247,0.08) 0%,transparent 70%);animation-duration:12s}
.hero__orb--2{bottom:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(ellipse,rgba(255,95,26,0.07) 0%,transparent 70%);animation-duration:9s;animation-delay:-4s}
.hero__orb--3{top:30%;left:-10%;width:300px;height:300px;background:radial-gradient(ellipse,rgba(107,96,247,0.04) 0%,transparent 70%);animation-duration:15s;animation-delay:-8s}
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1)}33%{transform:translateY(-30px) scale(1.05)}66%{transform:translateY(15px) scale(0.97)}}
.hero__content{position:relative;z-index:3;max-width:var(--max-w);margin:0 auto;padding:0 2rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hero__left{animation:fade-up 0.9s var(--ease-out) both}
.hero__right{animation:fade-up 0.9s 0.15s var(--ease-out) both}
@keyframes fade-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
.hero__badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(107,96,247,0.07);border:1px solid rgba(107,96,247,0.2);border-radius:2px;padding:0.35rem 0.9rem;margin-bottom:1.5rem}
.hero__badge-dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.15}}
.hero__badge-text{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--cyan)}
.hero__title{font-size:clamp(3.2rem,7vw,6.5rem);line-height:0.9;letter-spacing:-0.025em;margin-bottom:1.5rem;font-weight:800;text-transform:uppercase}
.hero__title .line-cyan{display:block;color:var(--cyan)}
.hero__title .line-solid{display:block;color:var(--white)}
.hero__title .line-accent{display:block;color:var(--orange)}
.hero__sub{font-family:var(--font-mono);font-size:0.9rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--text);margin-bottom:1.5rem}
.hero__desc{font-size:1.05rem;color:var(--dim);max-width:490px;line-height:1.75;margin-bottom:2.5rem}
.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}
.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.hero__stat-value{font-family:var(--font-display);font-size:3rem;font-weight:800;color:var(--cyan);line-height:1;letter-spacing:-0.03em;margin-bottom:0.2rem}
.hero__stat-label{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text)}
.hero__panel{background:#000;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative;z-index:2}
.hero__emmy-main{padding:2rem 1.5rem;text-align:center;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.hero__emmy-main::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(107,96,247,0.06) 0%,transparent 70%);pointer-events:none}
.hero__emmy-num{font-family:var(--font-display);font-size:5rem;font-weight:800;color:var(--cyan);line-height:1;letter-spacing:-0.05em;text-shadow:0 0 60px rgba(107,96,247,0.3);animation:emmy-pulse 3s ease-in-out infinite;position:relative;z-index:1}
@keyframes emmy-pulse{0%,100%{text-shadow:0 0 40px rgba(107,96,247,0.25)}50%{text-shadow:0 0 80px rgba(107,96,247,0.5),0 0 120px rgba(107,96,247,0.2)}}
.hero__emmy-label{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text);margin-top:0.4rem;position:relative;z-index:1;line-height:1.5}
.hero__award-list{padding:0.5rem 0}
.hero__award-row{display:flex;align-items:center;gap:1rem;padding:0.85rem 1.5rem;border-bottom:1px solid var(--border);transition:background 0.15s}
.hero__award-row:last-child{border-bottom:none}
.hero__award-row:hover{background:rgba(107,96,247,0.04)}
.hero__award-year{font-family:var(--font-mono);font-size:0.8rem;color:var(--cyan);letter-spacing:0.06em;flex-shrink:0;width:36px;font-weight:700}
.hero__award-text{font-family:var(--font-display);font-size:0.96rem;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:0.04em;line-height:1.2}
.hero__award-sub{font-size:0.82rem;color:var(--dim);margin-top:0.15rem;font-family:var(--font-body);line-height:1.4}

/* Trust bar section removed - brands grid is the single brand display */

/* Services */
.services__intro{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-bottom:4rem}
/* Services interactive showcase */
.services__showcase{display:grid;grid-template-columns:0.85fr 1.15fr;gap:2.5rem;align-items:start}
.services__nav{display:flex;flex-direction:column}
.svc-tab{display:flex;align-items:center;gap:0.9rem;padding:0.9rem 1.1rem;border-left:2px solid var(--border);cursor:pointer;transition:all 0.35s var(--ease-out);user-select:none}
.svc-tab:hover{border-left-color:rgba(107,96,247,0.35);background:rgba(107,96,247,0.03)}
.svc-tab.is-active{border-left-color:var(--cyan);background:rgba(107,96,247,0.05)}
.svc-tab__num{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.12em;color:var(--muted);width:18px;flex-shrink:0;transition:color 0.35s}
.svc-tab.is-active .svc-tab__num{color:var(--cyan)}
.svc-tab__body{flex:1;min-width:0}
.svc-tab__title{font-family:var(--font-display);font-size:0.9rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text);transition:color 0.35s;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0.3rem}
.svc-tab.is-active .svc-tab__title{color:var(--white)}
.svc-tab__bar{height:1.5px;background:rgba(255,255,255,0.06);border-radius:1px;overflow:hidden;opacity:0;transition:opacity 0.35s}
.svc-tab.is-active .svc-tab__bar{opacity:1}
.svc-tab__bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),rgba(107,96,247,0.5));border-radius:1px}
.svc-tab__arrow{color:var(--border);transition:all 0.35s;flex-shrink:0;opacity:0}
.svc-tab.is-active .svc-tab__arrow,.svc-tab:hover .svc-tab__arrow{opacity:1;color:var(--cyan)}

/* Stage — the glass panel on the right */
.services__stage{position:relative;min-height:440px}
.svc-panel{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease;
  /* Glass */
  background:rgba(8,14,28,0.45);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r-lg);
  padding:2.5rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 28px 70px rgba(0,0,0,0.45);
}
.svc-panel.is-active{
  opacity:1;
  pointer-events:all;
  position:relative;
}
.svc-panel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.svc-panel__icon{width:52px;height:52px;background:rgba(107,96,247,0.08);border:1px solid rgba(107,96,247,0.22);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--cyan)}
.svc-panel__num{font-family:var(--font-display);font-size:5rem;font-weight:800;color:rgba(107,96,247,0.08);line-height:1;letter-spacing:-0.05em}
.svc-panel__title{font-size:clamp(1.5rem,2.5vw,2.1rem);font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;color:var(--white);margin-bottom:0.9rem;line-height:1.05}
.svc-panel__desc{color:var(--dim);font-size:0.95rem;line-height:1.78;margin-bottom:1.8rem}
.svc-panel__features{display:flex;flex-direction:column;gap:0.65rem}
.svc-panel__features li{display:flex;align-items:center;gap:0.7rem;font-size:0.85rem;color:var(--text);font-family:var(--font-mono);letter-spacing:0.03em;line-height:1.5}
.svc-panel__features li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0;box-shadow:0 0 6px rgba(107,96,247,0.5)}

/* Awards */
.awards{background:linear-gradient(180deg,var(--black) 0%,var(--deep) 50%,var(--black) 100%);position:relative;overflow:hidden}
.awards__glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:800px;height:400px;background:radial-gradient(ellipse,rgba(107,96,247,0.05) 0%,transparent 70%);pointer-events:none}
.awards__grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:4rem}
.awards p{color:var(--dim);font-size:1rem}
.awards__emmy-list{display:flex;flex-direction:column;gap:0.75rem}
.award-item{display:flex;align-items:center;gap:1.25rem;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);transition:all 0.2s;cursor:default}
.award-item:hover{background:var(--raised);border-color:rgba(107,96,247,0.2);transform:translateX(4px)}
.award-item__icon{width:40px;height:40px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 6px rgba(107,96,247,0.3))}
.award-item__title{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--white)}
.award-item__meta{font-family:var(--font-mono);font-size:0.8rem;color:var(--dim);margin-top:0.2rem}
.awards__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.award-stat{background:var(--dark);padding:2rem;text-align:center;transition:background 0.2s}
.award-stat:hover{background:var(--surface)}
.award-stat--wide{grid-column:span 2}
.award-stat__val{font-family:var(--font-display);font-size:3.5rem;font-weight:800;color:var(--cyan);line-height:1;letter-spacing:-0.03em;margin-bottom:0.3rem}
.award-stat--wide .award-stat__val{font-size:5rem}
.award-stat__label{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text)}
.award-stat__sub{font-size:0.88rem;color:var(--dim);margin-top:0.5rem;line-height:1.6}

/* Projects */
.projects__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;flex-wrap:wrap;gap:1.5rem}
.projects__filters{display:flex;gap:0.5rem}
.filter-btn{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.4rem 1rem;border-radius:2px;border:1px solid var(--border);color:var(--dim);background:transparent;transition:all 0.15s;cursor:pointer}
.filter-btn:hover,.filter-btn.active{border-color:var(--cyan);color:var(--cyan);background:rgba(107,96,247,0.05)}
.projects__table{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.projects__table-head{display:grid;grid-template-columns:80px 1fr 160px 160px 120px;padding:0.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border)}
.projects__table-head span{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.project-row{display:grid;grid-template-columns:80px 1fr 160px 160px 120px;padding:1rem 1.5rem;align-items:center;border-bottom:1px solid var(--border);background:var(--dark);transition:background 0.15s,opacity 0.3s,transform 0.3s}
.project-row:last-child{border-bottom:none}
.project-row:hover{background:var(--surface)}
.project-row__year{font-family:var(--font-mono);font-size:0.82rem;color:var(--cyan);letter-spacing:0.06em}
.project-row__title{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--white)}
.project-row__cat{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase}
.project-row__cat--sports{color:var(--orange)}
.project-row__cat--esports{color:var(--cyan)}
.project-row__role{font-size:0.88rem;color:var(--dim)}
.project-row__badge{display:inline-flex;align-items:center;gap:0.3rem;font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan);background:rgba(107,96,247,0.08);border:1px solid rgba(107,96,247,0.2);padding:0.2rem 0.55rem;border-radius:2px}
.project-row__badge--empty{color:transparent;background:transparent;border-color:transparent}

/* History */
.history__grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem 5rem;margin-top:4rem}
.history__col-label{font-family:var(--font-mono);font-size:0.75rem;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.history__col-label--sports{color:var(--orange)}
.history__col-label--esports{color:var(--cyan)}
.timeline{position:relative;padding-left:1.5rem}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:1.6rem;padding-left:1.25rem}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:-1.6rem;top:6px;width:7px;height:7px;border-radius:50%;background:var(--border);border:1px solid var(--bl2);transition:all 0.2s}
.timeline-item:hover::before,.timeline-item--emmy::before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px rgba(107,96,247,0.5)}
.timeline-item__year{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.1em;color:var(--muted);margin-bottom:0.2rem}
.timeline-item__title{font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;color:var(--white)}
.timeline-item__role{font-size:0.84rem;color:var(--dim);margin-top:0.1rem}
.timeline-item__emmy{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan);margin-top:0.2rem}

/* ─────────────────────────────────────────
   BRANDS GRID
   Dark glassmorphism cards — fits the site's
   dark aesthetic. Each logo gets a frosted
   dark surface card. Logo images show at
   full natural colour and proper size.
───────────────────────────────────────── */
.brands-section {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, #141e30 0%, #03040a 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
}
.brands-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255,255,255,0.03) 0%, transparent 100%);
  pointer-events: none;
}
.brands-section__intro { text-align: center; margin-bottom: 3.5rem; }
.brands-section__intro p { max-width: 480px; margin: 0.75rem auto 0; }

.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Frosted dark card — matches dark site perfectly */
.brand-card {
  background: #ffffff;
  border: none;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  min-height: 130px;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Subtle inner glow on the card itself */
.brand-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(107,96,247,0.04), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Top border light — like a backlit panel */
.brand-card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(107,96,247,0.3), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.brand-card:hover {
  background: #ffffff;
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.brand-card:hover::before, .brand-card:hover::after { opacity: 1; }

.brand-card img {
  height: 72px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  transition: transform 0.2s;
}
.brand-card:hover img {
  transform: scale(1.04);
}
/* Bigger feature logos */
.brand-card img.brand-logo--riot { height: 95px; max-width: 210px; }
.brand-card img.brand-logo--espn { height: 95px; max-width: 240px; }
.brand-card img.brand-logo--euro { height: 105px; max-width: 250px; }
.brand-card img.brand-logo--hbs { height: 90px; max-width: 200px; }
.brand-card img.brand-logo--argus { height: 90px; max-width: 220px; }

/* Text brands — bright on dark */
.brand-card__text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e293b;
  transition: color 0.2s;
}
.brand-card:hover .brand-card__text { color: #000; }

/* Emmy image — soft glow treatment */
.emmy-icon-svg {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,67,0.08);
  border-radius: 50%;
  border: 1px solid rgba(212,168,67,0.3);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(212,168,67,0.15);
}

/* Services section intro alignment fix */
.services__intro-desc {
  color: var(--dim);
  font-size: 1rem;
  line-height: 1.75;
  align-self: center;
}

/* About */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.about__content p{margin-bottom:1.25rem;color:var(--dim);font-size:1rem;line-height:1.75}
.about__stats-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;position:relative}
.about__stats-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--orange))}
.about__stat-row{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 2rem;border-bottom:1px solid var(--border);transition:background 0.15s}
.about__stat-row:last-child{border-bottom:none}
.about__stat-row:hover{background:var(--raised)}
.about__stat-label{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.about__stat-val{font-family:var(--font-display);font-size:1.5rem;font-weight:800;letter-spacing:-0.01em;color:var(--cyan)}
.about__stat-val--text{font-size:1rem;color:var(--white);letter-spacing:0.04em;text-transform:uppercase}

/* Event */
.event-section{text-align:center;position:relative;overflow:hidden}
.event-section__bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(107,96,247,0.05) 0%,transparent 70%);pointer-events:none}
.event-section__border{position:absolute;inset:2rem;border:1px solid rgba(107,96,247,0.07);border-radius:var(--r-lg);pointer-events:none}
.event-section__content{position:relative;z-index:1;max-width:700px;margin:0 auto}
.event-section__content p{margin:1rem auto 0;max-width:530px;color:var(--dim)}
.event-section__actions{display:flex;gap:1rem;justify-content:center;margin-top:2.5rem;flex-wrap:wrap}
.event-section__meta{display:flex;align-items:center;justify-content:center;gap:2rem;margin-top:2.5rem;flex-wrap:wrap}
.event-meta-item{text-align:center}
.event-meta-item__val{font-family:var(--font-display);font-size:1.8rem;font-weight:800;text-transform:uppercase;color:var(--cyan)}
.event-meta-item__label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text);margin-top:0.15rem}
.event-meta-sep{width:1px;height:40px;background:var(--border)}

/* CTA */
/* ── Photo break section ── */
.photo-break{position:relative;width:100%;height:clamp(300px,40vw,500px);overflow:hidden}
.photo-break__img{position:absolute;inset:0;background-size:cover;background-position:center 40%;transition:transform 8s linear}
.photo-break:hover .photo-break__img{transform:scale(1.04)}
.photo-break__overlay{position:absolute;inset:0;background:linear-gradient(180deg,var(--deep) 0%,rgba(10,10,18,0.5) 30%,rgba(10,10,18,0.6) 70%,var(--deep) 100%)}
.photo-break__content{position:absolute;bottom:2.5rem;left:2.5rem;z-index:2;max-width:550px;background:rgba(10,10,18,0.6);backdrop-filter:blur(8px);padding:1.25rem 1.5rem;border-radius:var(--r-sm);border:1px solid rgba(107,96,247,0.15)}
.photo-break__tag{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--cyan);display:inline-block;margin-bottom:0.5rem;padding:0.3rem 0.8rem;border:1px solid rgba(107,96,247,0.3);border-radius:var(--r-sm);background:rgba(107,96,247,0.08)}
.photo-break__caption{font-size:0.95rem;color:var(--dim);line-height:1.5;margin:0}
@media(max-width:640px){.photo-break{height:250px}.photo-break__content{bottom:1.5rem;left:1.5rem;right:1.5rem}}

.cta-section{text-align:center;position:relative;overflow:hidden;background:var(--deep);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,95,26,0.04) 0%,transparent 70%)}
.cta-section__content{position:relative;z-index:1;max-width:680px;margin:0 auto}
.cta-section__content p{margin-bottom:2.5rem;font-size:1.05rem;color:var(--dim)}
.cta-section__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* Blog */
.blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.post-card{background:var(--dark);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:all 0.2s var(--ease-out)}
.post-card:hover{border-color:rgba(107,96,247,0.2);transform:translateY(-3px)}
.post-card__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--surface)}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}
.post-card:hover .post-card__thumb img{transform:scale(1.04)}
.post-card__thumb-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.post-card__body{padding:1.5rem}
.post-card__cat{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.4rem}
.post-card__title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--white);margin-bottom:0.5rem;transition:color 0.15s}
.post-card:hover .post-card__title{color:var(--cyan)}
.post-card__excerpt{font-size:0.88rem;color:var(--dim);line-height:1.65;margin-bottom:1rem}
.post-card__meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--muted)}
.post-card__read{color:var(--cyan)}

/* Contact */
.contact-section{text-align:center}
.contact-section__desc{max-width:540px;margin:1rem auto 4rem;font-size:1rem;color:var(--dim)}
.contact-details{display:grid;grid-template-columns:1.1fr 0.8fr 1.1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;max-width:1060px;margin:0 auto}
.contact-cell{background:var(--dark);padding:2.5rem 2rem;text-align:left;display:flex;gap:1.25rem;align-items:flex-start;transition:background 0.15s}
.contact-cell:hover{background:var(--surface)}
.contact-cell__icon{width:42px;height:42px;background:rgba(107,96,247,0.06);border:1px solid rgba(107,96,247,0.12);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--cyan);flex-shrink:0}
.contact-cell__label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:0.35rem}
.contact-cell__value{font-family:var(--font-display);font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--white)}
.contact-cell__value a{color:var(--white);transition:color 0.15s}
.contact-cell__value a:hover{color:var(--cyan)}

/* Footer */
.site-footer{background:var(--deep);border-top:1px solid var(--border);padding:5rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.footer__brand p{font-size:0.88rem;color:var(--dim);margin-top:1rem;max-width:260px;line-height:1.65}
.footer__heading{font-family:var(--font-display);font-size:0.82rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text);margin-bottom:1.25rem}
.footer__links{display:flex;flex-direction:column;gap:0.6rem}
.footer__links a{font-size:0.86rem;color:var(--muted);transition:color 0.15s}
.footer__links a:hover{color:var(--cyan)}
.footer__contact-item{display:flex;align-items:center;gap:0.6rem;font-size:0.86rem;color:var(--muted);margin-bottom:0.6rem}
.footer__contact-item a{color:var(--muted);transition:color 0.15s}
.footer__contact-item a:hover{color:var(--cyan)}
.footer__bottom{border-top:1px solid var(--border);padding-top:2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer__copy{font-size:0.8rem;color:var(--muted)}
.footer__legal{display:flex;gap:1.5rem}
.footer__legal a{font-size:0.8rem;color:var(--muted);transition:color 0.15s}
.footer__legal a:hover{color:var(--text)}

/* WP */
.alignnone{margin:1rem 0}.aligncenter{margin:1rem auto;display:block}
.alignright{float:right;margin:0 0 1rem 2rem}.alignleft{float:left;margin:0 2rem 1rem 0}
.wp-caption{max-width:100%}.wp-caption-text{font-size:0.78rem;color:var(--muted);margin-top:0.4rem}


/* ═══════════════════════════════════════════════════════
   PROPER GLASSMORPHISM
   How it works:
   • Each section gets isolation:isolate so its z-index:-1
     children stay INSIDE the stacking context and are
     visible to backdrop-filter on glass panels above.
   • Vibrant gradient blobs (20-28% opacity) give the blur
     something colourful to refract.
   • Opaque grid backgrounds (var(--border)) are replaced
     with semi-transparent fills so blobs reach the glass.
   • Glass panels: translucent fill + blur + white border
     + inner top sheen = real frosted glass look.
═══════════════════════════════════════════════════════ */

/* ── 1. Isolated stacking contexts so blobs stay contained ── */
#services, #projects, #about, #contact, #news {
  position: relative;
  isolation: isolate;
}
#awards {
  position: relative;
  isolation: isolate;
}

/* ── 2. Upgrade the existing awards glow to be strong enough ── */
.awards__glow {
  z-index: -1;
  width: 900px;
  height: 600px;
  background:
    radial-gradient(ellipse 60% 80% at 40% 50%, rgba(107,96,247,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 75% 30%, rgba(255,95,26,0.18) 0%, transparent 60%);
}

/* ── 3. Colourful blobs per section (z-index:-1, contained by isolation) ── */
#services::before,
#projects::before,
#about::before,
#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#services::before {
  background:
    radial-gradient(ellipse 55% 80% at 12% 50%, rgba(107,96,247,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 65% at 90% 20%, rgba(255,95,26,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 65% 90%, rgba(80,60,210,0.14) 0%, transparent 55%);
}
#projects::before {
  background:
    radial-gradient(ellipse 55% 75% at 6% 18%, rgba(107,96,247,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 65% at 94% 78%, rgba(255,95,26,0.16) 0%, transparent 60%);
}
#about::before {
  background:
    radial-gradient(ellipse 55% 70% at 92% 40%, rgba(107,96,247,0.24) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 4% 78%, rgba(255,95,26,0.14) 0%, transparent 55%);
}
#contact::before {
  background:
    radial-gradient(ellipse 65% 75% at 50% 8%, rgba(107,96,247,0.24) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 88% 92%, rgba(255,95,26,0.14) 0%, transparent 55%);
}

/* ── 4. Hero panel — gradient canvas already behind it ── */
.hero__panel {
  background: rgba(5,10,22,0.38);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 20px 60px rgba(0,0,0,0.45);
  transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

/* ── 5. Services — svc-panel handles glass in its own rules above ── */
.services__grid {
  background: rgba(8,14,28,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.4);
}
.service-card { background: rgba(10,16,32,0.55); transition: background 0.35s var(--ease-out); }
.service-card:hover { background: rgba(18,26,46,0.65); }

/* ── 6. Award stat tiles ── */
.awards__stats {
  background: rgba(8,14,28,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.4);
}
.award-stat { background: rgba(10,16,32,0.55); transition: background 0.35s var(--ease-out); }
.award-stat:hover { background: rgba(18,26,46,0.65); }

/* Award list items */
.award-item {
  background: rgba(8,14,28,0.40);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 28px rgba(0,0,0,0.3);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.award-item:hover { background: rgba(14,22,40,0.55); border-color: rgba(107,96,247,0.28); transform: translateX(4px); }

/* ── 7. Projects table ── */
.projects__table {
  background: rgba(8,14,28,0.40);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.4);
}
.projects__table-head { background: rgba(107,96,247,0.05); border-bottom-color: rgba(255,255,255,0.08); }
.project-row { background: transparent; transition: background 0.25s ease; border-left: 2px solid transparent; }
.project-row:hover { background: rgba(107,96,247,0.06); border-left-color: rgba(107,96,247,0.45); }

/* Polished filter buttons */
.filter-btn { border-color: rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); transition: all 0.3s var(--ease-out); }
.filter-btn:hover { border-color: rgba(107,96,247,0.4); color: var(--cyan); background: rgba(107,96,247,0.07); transform: translateY(-1px); }
.filter-btn.active { border-color: var(--cyan); color: var(--cyan); background: rgba(107,96,247,0.10); box-shadow: 0 0 12px rgba(107,96,247,0.15); }

/* ── 8. About stats panel ── */
.about__stats-panel {
  background: rgba(8,14,28,0.40);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.4);
}
.about__stat-row { transition: background 0.3s ease; }
.about__stat-row:hover { background: rgba(107,96,247,0.06); }

/* ── 9. Contact details ── */
.contact-details {
  background: rgba(8,14,28,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 20px 50px rgba(0,0,0,0.4);
}
.contact-cell { background: rgba(10,16,32,0.55); transition: background 0.35s var(--ease-out); }
.contact-cell:hover { background: rgba(18,26,46,0.68); }

/* ── 10. Blog post cards ── */
.post-card {
  background: rgba(8,14,28,0.40);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border-color: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 36px rgba(0,0,0,0.35);
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(107,96,247,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(107,96,247,0.08);
}

/* ── 11. Announcement bar ── */
.announcement-bar {
  background: linear-gradient(90deg, rgba(3,4,10,0.50), rgba(7,14,28,0.55), rgba(3,4,10,0.50));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* ── 12. Reduce blur on mobile ── */
@media (max-width:640px) {
  .awards__stats, .projects__table, .contact-details,
  .about__stats-panel, .hero__panel, .award-item, .post-card, .svc-panel {
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
  }
}



/* Responsive */
@media(max-width:1100px){
  .hero__content{grid-template-columns:1fr}.hero__right{display:none}
  .services__intro{grid-template-columns:1fr;gap:1.5rem}
  .services__showcase{grid-template-columns:1fr;gap:1.5rem}
  .services__stage{min-height:380px}
  .projects__table-head,.project-row{grid-template-columns:70px 1fr 140px 130px}
  .projects__table-head span:last-child,.project-row>*:nth-child(5){display:none}
  .awards__grid,.about__grid{grid-template-columns:1fr;gap:3rem}
  .brands-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .site-nav,.site-nav__cta{display:none}
  .nav-toggle{display:flex}.mobile-menu{display:flex}
  .contact-details{grid-template-columns:1fr}
  .blog__grid{grid-template-columns:1fr 1fr}
  .history__grid{grid-template-columns:1fr}
  .brands-grid{grid-template-columns:repeat(2,1fr)}
  .logo-item{padding:1.2rem 2rem;height:64px}
  .logo-item img{height:24px}
}
@media(max-width:640px){
  .section{padding:4.5rem 0}
  .hero{padding-top:180px}
  .services__showcase{gap:1rem}
  .services__stage{min-height:360px}
  .svc-panel{padding:1.5rem}
  .svc-tab{padding:0.7rem 0.9rem}
  .projects__table-head{display:none}
  .project-row{grid-template-columns:60px 1fr}
  .project-row__cat,.project-row__role,.project-row__badge{display:none}
  .awards__stats{grid-template-columns:1fr 1fr}
  .award-stat--wide{grid-column:span 2}
  .blog__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .brands-grid{grid-template-columns:1fr 1fr;gap:0.75rem}
  .brand-card{padding:1.5rem 1rem;min-height:90px}
  .brand-card img{height:36px;max-width:120px}
  .brand-card img.brand-logo--riot{height:50px;max-width:140px}
  .brand-card img.brand-logo--espn{height:50px;max-width:150px}
  .brand-card img.brand-logo--euro{height:54px;max-width:160px}
  .brand-card__text{font-size:1rem}
  .contact-details{grid-template-columns:1fr}
}


/* Hide categories, authors, min read everywhere */
.post-card__cat,
.post-card__meta,
.post-meta,
.entry-meta,
.cat-links,
.byline,
.posted-on { display: none !important; }

/* Mobile announcement bar fix */
@media(max-width:640px){
  .announcement-bar{padding:0.5rem 1rem}
  .announcement-bar__inner{gap:0.4rem}
  .announcement-bar__text{font-size:0.78rem;text-align:center;line-height:1.4}
  .announcement-bar__cta{display:none}
}

/* Mobile scroll animation adjustments */
@media(max-width:768px){
  .scroll-ticker__track{animation-duration:20s}
  .scroll-ticker__track span{font-size:0.8rem}
  .section-zoom{opacity:1;transform:none;transition:none}
  .section-zoom.zoomed-in{transform:none}
}