@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root{
  --bg:#070707;
  --bg2:#0c0c0c;
  --panel:#111111;
  --panel2:#151515;
  --text:#f5f1e8;
  --muted:#a9a39a;
  --red:#ff2b2b;
  --red2:#a90000;
  --ivory:#efe5d6;
  --line:rgba(255,255,255,.12);
  --soft:rgba(255,255,255,.05);
  --shadow:0 30px 90px rgba(0,0,0,.48);
  --max:1260px;
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
radial-gradient(circle at 15% 10%,rgba(255,43,43,.13),transparent 24%),
radial-gradient(circle at 82% 12%,rgba(239,229,214,.07),transparent 22%),
linear-gradient(180deg,#050505 0%,#090909 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit}.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.1;z-index:99;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,43,43,.13),rgba(255,43,43,0) 68%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);mix-blend-mode:screen}
header{position:sticky;top:0;z-index:30;background:rgba(5,5,5,.68);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.logo-mark{width:42px;height:42px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#171717,#090909);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.4);position:relative;overflow:hidden}.logo-mark:after{content:"";position:absolute;width:28px;height:5px;background:var(--red);transform:rotate(-18deg);bottom:7px;right:-3px}.logo small{display:block;color:#7d7770;font-size:.66rem;letter-spacing:.18em;font-weight:700;margin-top:2px}.navlinks{display:flex;align-items:center;gap:22px}.navlinks a{text-decoration:none;color:#b9b2aa;font-size:.92rem}.navlinks a:hover{color:#fff}.pill{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:12px 18px;border-radius:999px;border:1px solid var(--line);font-weight:800}.pill.red{background:var(--red);border-color:var(--red);color:white;box-shadow:0 14px 40px rgba(255,43,43,.24)}
.hero{min-height:calc(100vh - 76px);display:grid;align-items:center;padding:54px 0 40px;position:relative;z-index:2}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center}.eyebrow{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#bcb4ac;text-transform:uppercase;letter-spacing:.15em;font-size:.76rem}.eyebrow i{width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 20px var(--red)}
.hero h1{font-size:clamp(4rem,8vw,8rem);line-height:.82;letter-spacing:-.075em;margin:18px 0 20px;text-transform:uppercase;font-weight:950}.hero h1 .outline{display:block;color:transparent;-webkit-text-stroke:1px rgba(245,241,232,.55)}.hero h1 .red{color:var(--red)}.hero-copy{max-width:690px;color:#b4aea6;font-size:1.08rem;line-height:1.75}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:999px;text-decoration:none;font-weight:900;border:1px solid var(--line);transition:.25s ease}.btn.primary{background:var(--text);color:#080808;border-color:var(--text)}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(239,229,214,.15)}.btn.ghost:hover{background:rgba(255,255,255,.06)}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}.metric{padding:18px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.03)}.metric strong{display:block;font-size:1.6rem}.metric span{color:#837d76;font-size:.82rem}
.hero-visual{position:relative;min-height:650px}.hero-card{position:absolute;inset:10px 0 0 40px;border-radius:36px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);background:#101010;transform:perspective(1400px) rotateY(-6deg) rotateX(1.5deg);transform-style:preserve-3d}.hero-card img.bg{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);opacity:.86}.hero-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.18),rgba(5,5,5,.02) 45%,rgba(5,5,5,.4)),linear-gradient(180deg,transparent 45%,rgba(5,5,5,.7))}.hero-real{position:absolute;width:245px;height:310px;right:-12px;bottom:-18px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 70px rgba(0,0,0,.55);transform:rotate(4deg);z-index:4;background:#171717}.hero-real img{width:100%;height:100%;object-fit:cover}.hero-real:after{content:"EDITORIAL";position:absolute;left:16px;bottom:14px;font-size:.67rem;letter-spacing:.18em;background:rgba(0,0,0,.7);padding:7px 10px;border-radius:999px}.hero-badge{position:absolute;left:0;bottom:32px;z-index:5;width:250px;padding:18px;border-radius:24px;background:rgba(12,12,12,.83);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow)}.hero-badge small{color:#777;letter-spacing:.16em;text-transform:uppercase}.hero-badge strong{display:block;font-size:1.2rem;margin-top:7px}.hero-badge span{color:#aaa39c;font-size:.92rem;line-height:1.55;display:block;margin-top:7px}
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#090909;position:relative;z-index:2}.track{display:flex;width:max-content;gap:36px;padding:16px 0;animation:marquee 26s linear infinite;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#8f8982}.track b{color:var(--red)}@keyframes marquee{to{transform:translateX(-50%)}}
.section{padding:110px 0;position:relative;z-index:2}.section-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:end;margin-bottom:34px}.kicker{color:var(--red);text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:900}.section h2{margin:10px 0 0;font-size:clamp(2.8rem,5vw,5.2rem);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}.section-head p{margin:0;color:#9f9890;line-height:1.78;font-size:1.05rem;max-width:700px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));border-radius:28px;padding:26px;position:relative;overflow:hidden;min-height:280px;box-shadow:var(--shadow)}.card:before{content:"";position:absolute;inset:-60% auto auto -20%;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,43,43,.17),transparent 70%)}.card .n{font-size:.72rem;letter-spacing:.2em;color:#6f6963;text-transform:uppercase}.card h3{font-size:1.5rem;margin:54px 0 12px}.card p{color:#9c958e;line-height:1.68}.card .arrow{position:absolute;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}.image-panel,.copy-panel{border:1px solid var(--line);border-radius:32px;overflow:hidden;background:#0e0e0e;min-height:560px;box-shadow:var(--shadow)}.image-panel{position:relative}.image-panel img{width:100%;height:100%;object-fit:cover;filter:grayscale(15%) contrast(1.06)}.image-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.68))}.image-panel .caption{position:absolute;z-index:2;left:26px;bottom:22px}.image-panel .caption small{letter-spacing:.15em;text-transform:uppercase;color:#b8aea4}.image-panel .caption strong{display:block;margin-top:8px;font-size:1.7rem}.copy-panel{padding:40px;display:flex;flex-direction:column;justify-content:center}.quote{font-size:clamp(2rem,4vw,4rem);line-height:1.02;letter-spacing:-.045em;font-weight:900;text-transform:uppercase}.quote em{color:var(--red);font-style:normal}.copy-panel p{color:#a39b93;line-height:1.8}.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.fact{padding:17px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}.fact b{display:block}.fact span{display:block;color:#79736d;font-size:.82rem;margin-top:5px}
.goal-wrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:16px}.goal-menu,.goal-output{border:1px solid var(--line);border-radius:30px;padding:28px;background:#0d0d0d}.goal-btn{width:100%;text-align:left;background:transparent;color:#c8c0b8;border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:10px;font-weight:850;cursor:pointer;transition:.22s}.goal-btn.active,.goal-btn:hover{background:#171717;color:#fff;border-color:rgba(255,43,43,.55)}.goal-output{background:linear-gradient(145deg,#111,#090909);position:relative;overflow:hidden}.goal-output:before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-100px;top:-100px;background:radial-gradient(circle,rgba(255,43,43,.18),transparent 68%)}.goal-output .label{color:var(--red);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:900}.goal-output h3{font-size:2.4rem;line-height:1;margin:14px 0}.goal-output p{color:#9e9790;line-height:1.75}.steps{display:grid;gap:10px;margin-top:22px}.step{display:flex;gap:12px;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}.step i{width:28px;height:28px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.75rem}
.clash-hero{border:1px solid var(--line);border-radius:36px;min-height:620px;overflow:hidden;position:relative;background:url('img/hero-3d.png') center/cover no-repeat;box-shadow:var(--shadow)}.clash-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.2)),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75))}.clash-content{position:absolute;z-index:2;left:42px;bottom:42px;max-width:620px}.clash-content h3{font-size:clamp(3rem,6vw,6rem);line-height:.82;text-transform:uppercase;letter-spacing:-.06em;margin:10px 0}.clash-content p{color:#c2bbb4;line-height:1.75}.floating-cube{position:absolute;right:60px;top:70px;width:180px;height:180px;transform-style:preserve-3d;animation:float 5s ease-in-out infinite;z-index:3}.floating-cube .face{position:absolute;inset:0;border:1px solid rgba(255,43,43,.55);background:linear-gradient(135deg,rgba(255,43,43,.15),rgba(255,255,255,.02));backdrop-filter:blur(8px);display:grid;place-items:center;font-weight:950;font-size:2rem;letter-spacing:.08em}.front{transform:translateZ(90px)}.back{transform:rotateY(180deg) translateZ(90px)}.right{transform:rotateY(90deg) translateZ(90px)}.left{transform:rotateY(-90deg) translateZ(90px)}.top{transform:rotateX(90deg) translateZ(90px)}.bottom{transform:rotateX(-90deg) translateZ(90px)}@keyframes float{0%,100%{transform:rotateX(-15deg) rotateY(28deg) translateY(0)}50%{transform:rotateX(8deg) rotateY(60deg) translateY(-18px)}}
.press{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.press a{min-height:130px;border:1px solid var(--line);border-radius:22px;padding:20px;text-decoration:none;background:rgba(255,255,255,.025);display:flex;flex-direction:column;justify-content:space-between}.press b{font-size:1.1rem}.press span{color:#77716b;font-size:.82rem}.press a:hover{border-color:rgba(255,43,43,.55);transform:translateY(-2px)}
.cta{border:1px solid var(--line);border-radius:34px;padding:44px;background:linear-gradient(135deg,rgba(255,43,43,.12),rgba(255,255,255,.035));display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}.cta h3{font-size:clamp(2.7rem,5vw,5rem);line-height:.9;margin:0;text-transform:uppercase;letter-spacing:-.05em}.cta p{color:#a39c94;line-height:1.75}.cta .cta-actions{display:flex;gap:10px;flex-wrap:wrap}
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:#77716b;font-size:.88rem;position:relative;z-index:2}.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer-grid strong{color:#cfc7bf}.disclaimer{max-width:750px;line-height:1.65}.tag{display:inline-flex;padding:7px 10px;border:1px solid var(--line);border-radius:999px;margin:4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}.reveal.in{opacity:1;transform:none}
.subhero{padding:90px 0 50px}.subhero h1{font-size:clamp(4rem,9vw,9rem);line-height:.82;letter-spacing:-.07em;text-transform:uppercase;margin:16px 0}.subhero p{max-width:760px;color:#a69f97;line-height:1.8;font-size:1.08rem}.feature-list{display:grid;gap:10px}.feature-row{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center}.feature-row .num{color:var(--red);font-weight:900}.feature-row b{font-size:1.15rem}.feature-row span{color:#7f7972;font-size:.9rem}
@media(max-width:980px){.hero-grid,.section-head,.split,.goal-wrap,.cta{grid-template-columns:1fr}.hero-visual{min-height:560px}.hero-card{inset:10px 0 0 0}.hero-real{right:10px}.section{padding:80px 0}.grid3,.press{grid-template-columns:1fr 1fr}.navlinks a:not(.pill){display:none}.clash-content{left:24px;bottom:24px}.floating-cube{right:24px;top:36px;width:120px;height:120px}.front{transform:translateZ(60px)}.back{transform:rotateY(180deg) translateZ(60px)}.right{transform:rotateY(90deg) translateZ(60px)}.left{transform:rotateY(-90deg) translateZ(60px)}.top{transform:rotateX(90deg) translateZ(60px)}.bottom{transform:rotateX(-90deg) translateZ(60px)}}
@media(max-width:680px){.container{width:min(calc(100% - 24px),var(--max))}.nav{height:68px}.logo span:not(.logo-mark){display:none}.hero{padding-top:34px}.hero h1{font-size:3.9rem}.hero-metrics,.grid3,.press,.facts{grid-template-columns:1fr}.hero-visual{min-height:460px}.hero-card{height:410px}.hero-real{width:160px;height:205px;right:8px;bottom:6px}.hero-badge{width:210px;left:10px;bottom:-6px}.section{padding:64px 0}.image-panel,.copy-panel{min-height:unset}.image-panel{height:460px}.copy-panel{padding:28px}.goal-menu,.goal-output{padding:22px}.clash-hero{min-height:580px}.floating-cube{display:none}.clash-content h3{font-size:3.3rem}.cta{padding:28px}.feature-row{grid-template-columns:48px 1fr}.feature-row span{grid-column:2}.cursor-glow{display:none}}

/* Added editorial content — uses the existing visual system without changing legacy sections */
.editorial-copy .long-copy{max-width:760px;color:#a39c94;line-height:1.82;font-size:1.05rem}
.editorial-copy .long-copy p{margin:0 0 20px}
.editorial-copy .manifesto-line{color:var(--text);font-weight:950;text-transform:uppercase;letter-spacing:-.025em;font-size:clamp(1.35rem,2.4vw,2.2rem);line-height:1.05;margin:28px 0!important}
.editorial-copy .editorial-cta{margin-top:16px}
.editorial-bridge{margin-top:16px;border:1px solid var(--line);border-radius:32px;padding:36px;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,43,43,.08));display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.editorial-bridge h3{font-size:clamp(2.1rem,4vw,4rem);line-height:.96;letter-spacing:-.045em;text-transform:uppercase;margin:10px 0 0}
.editorial-bridge p{color:#a39c94;line-height:1.78;margin:0 0 22px}
.compact-head{margin-top:72px}
@media(max-width:980px){.editorial-bridge{grid-template-columns:1fr}}
@media(max-width:680px){.editorial-bridge{padding:28px}.compact-head{margin-top:52px}}

.editorial-copy .single-head{grid-template-columns:1fr}

/* =========================================================
   OFFICIAL PREMIUM PASS — 21st.dev inspired, static-native
   Cinematic depth · spotlight surfaces · floating glass nav
   ========================================================= */
:root{
  --glass:rgba(13,13,13,.72);
  --glass-strong:rgba(14,14,14,.88);
  --hairline:rgba(255,255,255,.09);
  --hot:rgba(255,43,43,.34);
  --ease-premium:cubic-bezier(.2,.8,.2,1);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 18%,#000 0%,transparent 66%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 18%,#000 0%,transparent 66%);
  opacity:.55
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% -10%,transparent 0 25%,rgba(0,0,0,.22) 58%,rgba(0,0,0,.66) 100%);
}
::selection{background:var(--red);color:#fff}

/* floating glass navigation */
header{top:12px;background:transparent;border:0;backdrop-filter:none;padding:0 12px;transition:.35s var(--ease-premium)}
header .nav{
  height:68px;width:min(100%,calc(var(--max) + 20px));padding:0 13px 0 10px;
  border:1px solid rgba(255,255,255,.1);border-radius:22px;
  background:linear-gradient(180deg,rgba(18,18,18,.84),rgba(8,8,8,.74));
  backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 18px 55px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.055);
  transition:.35s var(--ease-premium)
}
header.is-scrolled .nav{background:rgba(8,8,8,.9);box-shadow:0 18px 70px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.05)}
.logo-mark{border-radius:16px;transition:transform .35s var(--ease-premium),border-color .35s ease,box-shadow .35s ease}
.logo:hover .logo-mark{transform:rotate(-4deg) scale(1.04);border-color:rgba(255,43,43,.46);box-shadow:0 12px 34px rgba(255,43,43,.12),inset 0 0 0 1px rgba(255,255,255,.04)}
.navlinks a{position:relative;transition:color .25s ease,transform .25s ease}
.navlinks a:not(.pill):after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--red);transition:right .3s var(--ease-premium)}
.navlinks a:not(.pill):hover:after{right:0}
.pill.red{position:relative;overflow:hidden;background:linear-gradient(180deg,#ff3838,#e31919);box-shadow:0 10px 28px rgba(255,43,43,.24),inset 0 1px 0 rgba(255,255,255,.27)}
.pill.red:before{content:"";position:absolute;inset:-1px;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:transform .65s var(--ease-premium)}
.pill.red:hover:before{transform:translateX(120%) skewX(-20deg)}

/* cinematic hero treatment */
.hero{isolation:isolate;min-height:calc(100svh - 80px);padding-top:74px}
.hero:before,.subhero:before{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(10px)}
.hero:before{width:min(52vw,760px);height:min(52vw,760px);right:-12vw;top:-16vw;background:radial-gradient(circle,rgba(255,43,43,.17),rgba(255,43,43,.045) 42%,transparent 72%)}
.hero:after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.018) 44.2%,transparent 44.4%,transparent 57%,rgba(255,43,43,.045) 57.15%,transparent 57.3%)}
.hero .eyebrow,.subhero .eyebrow{background:rgba(12,12,12,.46);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hero h1{filter:drop-shadow(0 22px 44px rgba(0,0,0,.46))}
.hero h1 .outline{-webkit-text-stroke:1px rgba(245,241,232,.68);text-shadow:0 0 50px rgba(239,229,214,.05)}
.hero h1 .red{background:linear-gradient(180deg,#ff5353 0%,#ff2020 46%,#a90808 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 14px 30px rgba(255,43,43,.12))}
.hero-copy{font-size:1.03rem;max-width:650px}
.hero-visual{perspective:1500px;transform-style:preserve-3d}
.hero-visual:before{content:"";position:absolute;inset:8% 3% 4% 12%;border-radius:48px;background:radial-gradient(circle at 58% 50%,rgba(255,43,43,.22),transparent 58%);filter:blur(38px);opacity:.7;transform:translateZ(-30px)}
.hero-card{will-change:transform;transition:transform .18s ease-out,box-shadow .45s ease,border-color .45s ease;box-shadow:0 45px 120px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025),inset 0 1px 0 rgba(255,255,255,.08)}
.hero-card:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(650px circle at var(--shine-x,55%) var(--shine-y,35%),rgba(255,255,255,.13),transparent 38%);mix-blend-mode:screen;opacity:.66}
.hero-card:hover{border-color:rgba(255,255,255,.24);box-shadow:0 52px 145px rgba(0,0,0,.64),0 0 70px rgba(255,43,43,.075),inset 0 1px 0 rgba(255,255,255,.1)}
.hero-real{box-shadow:0 35px 90px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);transition:transform .5s var(--ease-premium),box-shadow .5s ease}
.hero-visual:hover .hero-real{transform:rotate(1.8deg) translate3d(-7px,-7px,24px);box-shadow:0 42px 110px rgba(0,0,0,.72),0 0 45px rgba(255,43,43,.09)}
.hero-badge{background:linear-gradient(145deg,rgba(20,20,20,.88),rgba(8,8,8,.72));backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);box-shadow:0 28px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .45s var(--ease-premium),border-color .45s ease}
.hero-visual:hover .hero-badge{transform:translate3d(6px,-7px,40px);border-color:rgba(255,43,43,.3)}

/* premium metrics / surfaces */
.hero-metrics{gap:12px}.metric{position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:transform .35s var(--ease-premium),border-color .35s ease,background .35s ease}.metric:hover{transform:translateY(-4px);border-color:rgba(255,43,43,.28);background:rgba(255,255,255,.05)}
.metric strong{letter-spacing:-.045em}.metric span{line-height:1.45}

/* editorial rhythm */
.section{isolation:isolate}.section:before{content:"";position:absolute;left:50%;top:0;width:min(calc(100% - 40px),var(--max));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 18%,rgba(255,255,255,.08) 82%,transparent);opacity:.45}
.section-head{position:relative}.section-head:after{content:"";position:absolute;width:64px;height:2px;left:0;bottom:-18px;background:linear-gradient(90deg,var(--red),transparent)}
.section h2{filter:drop-shadow(0 18px 30px rgba(0,0,0,.26))}
.kicker{display:flex;align-items:center;gap:10px}.kicker:before{content:"";width:18px;height:1px;background:currentColor;box-shadow:0 0 12px rgba(255,43,43,.38)}

/* Spotlight cards inspired by 21st.dev Spotlight Card */
.card,.press a,.fact,.goal-menu,.goal-output,.editorial-bridge,.cta{--mx:50%;--my:50%;position:relative;isolation:isolate}
.card{transform-style:preserve-3d;transition:transform .18s ease-out,border-color .35s ease,box-shadow .35s ease;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.card:after,.press a:after,.fact:after,.goal-menu:after,.goal-output:after,.editorial-bridge:after,.cta:after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,255,255,.09),rgba(255,43,43,.035) 27%,transparent 58%);
  opacity:0;transition:opacity .35s ease
}
.card:hover:after,.press a:hover:after,.fact:hover:after,.goal-menu:hover:after,.goal-output:hover:after,.editorial-bridge:hover:after,.cta:hover:after{opacity:1}
.card:hover{border-color:rgba(255,255,255,.22);box-shadow:0 36px 110px rgba(0,0,0,.54),0 0 45px rgba(255,43,43,.05)}
.card.reveal.in:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px)}
.card .n{transition:color .3s ease}.card:hover .n{color:#b8afa7}.card h3{transition:transform .35s var(--ease-premium)}.card:hover h3{transform:translateY(-3px)}
.card .arrow{overflow:hidden;transition:transform .4s var(--ease-premium),background .35s ease,border-color .35s ease}.card:hover .arrow{transform:rotate(45deg);background:var(--red);border-color:var(--red);box-shadow:0 10px 30px rgba(255,43,43,.22)}

/* tactile / magnetic CTAs */
.btn{position:relative;overflow:hidden;will-change:transform;transition:transform .3s var(--ease-premium),box-shadow .3s ease,background .3s ease,border-color .3s ease}
.btn:after{content:"";position:absolute;width:80px;height:160%;left:var(--btn-x,50%);top:50%;transform:translate(-50%,-50%) rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);opacity:0;transition:opacity .25s ease;pointer-events:none}
.btn:hover:after{opacity:1}.btn.primary{background:linear-gradient(180deg,#fffaf1,#e9dfd2);box-shadow:0 10px 30px rgba(0,0,0,.24),inset 0 1px 0 #fff}.btn.primary:hover{box-shadow:0 18px 44px rgba(239,229,214,.16),0 0 0 1px rgba(255,255,255,.08)}
.btn.ghost{background:rgba(255,255,255,.025);backdrop-filter:blur(8px)}

/* image / clash depth */
.image-panel{transition:transform .5s var(--ease-premium),border-color .45s ease,box-shadow .45s ease}.image-panel:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 45px 120px rgba(0,0,0,.58)}
.image-panel img{transition:transform 1s var(--ease-premium),filter .7s ease}.image-panel:hover img{transform:scale(1.035);filter:grayscale(0) contrast(1.08)}
.clash-hero{box-shadow:0 48px 140px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.clash-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(700px circle at var(--mx,72%) var(--my,28%),rgba(255,43,43,.18),transparent 48%);mix-blend-mode:screen}
.floating-cube{filter:drop-shadow(0 28px 36px rgba(0,0,0,.62)) drop-shadow(0 0 25px rgba(255,43,43,.12))}
.floating-cube .face{box-shadow:inset 0 0 24px rgba(255,43,43,.07)}

/* subpage hero */
.subhero{position:relative;isolation:isolate;padding-top:120px;padding-bottom:72px;overflow:hidden}
.subhero:before{width:700px;height:700px;left:55%;top:-420px;background:radial-gradient(circle,rgba(255,43,43,.15),transparent 67%)}
.subhero:after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.02) 7.08% 7.18%,transparent 7.24% 92%,rgba(255,255,255,.02) 92.08% 92.18%,transparent 92.24%)}
.subhero h1{filter:drop-shadow(0 28px 50px rgba(0,0,0,.48))}.subhero h1 .red{background:linear-gradient(180deg,#ff4e4e,#ff2424 48%,#a70808);-webkit-background-clip:text;background-clip:text;color:transparent}

/* CTA becomes a hero-like closing surface */
.cta{overflow:hidden;background:linear-gradient(135deg,rgba(255,43,43,.13),rgba(255,255,255,.025) 48%,rgba(255,255,255,.045));box-shadow:0 34px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.055)}
.cta:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-90px;bottom:-180px;background:radial-gradient(circle,rgba(255,43,43,.22),transparent 68%);filter:blur(4px);z-index:-1}
.cta h3{filter:drop-shadow(0 18px 26px rgba(0,0,0,.32))}
.editorial-bridge{overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05)}

/* moving marquee polish */
.marquee{background:rgba(6,6,6,.72);backdrop-filter:blur(8px)}.track{animation-duration:34s}.marquee:hover .track{animation-play-state:paused}.track b{text-shadow:0 0 24px rgba(255,43,43,.22)}

/* scroll progress */
.scroll-progress{position:fixed;z-index:150;top:0;left:0;width:100%;height:2px;pointer-events:none;background:rgba(255,255,255,.025)}
.scroll-progress span{display:block;width:100%;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#750000,var(--red),#ff8d8d);box-shadow:0 0 16px rgba(255,43,43,.65);will-change:transform}

/* stronger entrance choreography */
.reveal{opacity:0;transform:translateY(32px) scale(.985);filter:blur(7px);transition:opacity .85s var(--ease-premium),transform .85s var(--ease-premium),filter .85s var(--ease-premium)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.grid3 .reveal:nth-child(2){transition-delay:.08s}.grid3 .reveal:nth-child(3){transition-delay:.16s}.press .reveal:nth-child(2){transition-delay:.06s}.press .reveal:nth-child(3){transition-delay:.12s}.press .reveal:nth-child(4){transition-delay:.18s}

/* accessibility + performance */
@media (prefers-reduced-motion:reduce) and (max-width:0px){html{scroll-behavior:auto}.track,.floating-cube{animation:none!important}.reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.hero-card,.card,.btn,.hero-real,.hero-badge{transform:none!important;transition:none!important}}
@media(max-width:980px){header{top:8px}.hero{padding-top:56px}.hero-visual:before{inset:10% 2% 4% 2%}.subhero{padding-top:96px}.section:before{width:calc(100% - 24px)}}
@media(max-width:680px){
  body:before{background-size:52px 52px;opacity:.4}
  header{padding:0 6px;top:6px}.nav{height:60px!important;border-radius:18px!important}.logo-mark{width:40px;height:40px;border-radius:14px}.pill{padding:10px 14px;font-size:.82rem}
  .hero{min-height:auto;padding-top:48px}.hero h1{font-size:clamp(3.45rem,17vw,4.65rem);line-height:.8;margin-top:20px}.hero-copy{font-size:.98rem;line-height:1.68}.hero-actions{gap:8px}.hero-actions .btn{flex:1 1 auto;padding:14px 16px}
  .hero-visual{min-height:490px;margin-top:12px}.hero-card{height:435px;border-radius:28px}.hero-card:before{display:none}.hero-real{width:150px;height:192px;border-radius:22px}.hero-badge{width:218px;padding:15px;border-radius:20px}
  .section{padding:72px 0}.section-head:after{bottom:-14px}.card{min-height:250px;padding:23px;border-radius:24px}.card h3{margin-top:42px}.card.reveal.in:hover{transform:translateY(-4px)}
  .subhero{padding:92px 0 56px}.subhero h1{font-size:clamp(3.55rem,17vw,5rem)}
  .cta,.editorial-bridge{border-radius:26px}.cta{padding:26px}.image-panel,.copy-panel{border-radius:26px}.clash-hero{border-radius:28px}
}

/* =========================================================
   21st.dev BACKGROUND PASS — Crimson Veil × Gateway Flow
   Static-native adaptation: animated canvas + motion grid
   ========================================================= */
body{background:#050505}
main,footer{position:relative;z-index:2}
.pz-animated-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(circle at 72% 12%,rgba(136,0,0,.11),transparent 29%),
    radial-gradient(circle at 18% 64%,rgba(255,43,43,.055),transparent 31%),
    linear-gradient(180deg,#040404 0%,#070606 45%,#050505 100%);
}
.pz-animated-bg:before{
  content:"";position:absolute;inset:-18%;opacity:.8;filter:blur(72px) saturate(120%);
  background:
    radial-gradient(ellipse at 68% 28%,rgba(255,31,31,.18) 0 8%,rgba(143,0,0,.095) 19%,transparent 46%),
    radial-gradient(ellipse at 26% 74%,rgba(255,64,64,.085) 0 7%,rgba(91,0,0,.08) 22%,transparent 48%),
    radial-gradient(ellipse at 47% 44%,rgba(239,229,214,.026),transparent 34%);
  transform:translate3d(-2%,-1%,0) scale(1.04) rotate(-4deg);
  animation:pzCrimsonDrift 17s cubic-bezier(.45,.05,.2,.95) infinite alternate;
  will-change:transform,opacity;
}
.pz-animated-bg:after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 32%,transparent 0 24%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.62) 100%);
}
.pz-bg-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9;mix-blend-mode:screen}
.pz-motion-grid{
  position:absolute;inset:-16%;opacity:.2;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:76px 76px;
  transform:perspective(700px) rotateX(62deg) rotateZ(-9deg) translate3d(0,0,0) scale(1.35);
  transform-origin:50% 20%;
  mask-image:radial-gradient(ellipse at 52% 42%,#000 0 23%,rgba(0,0,0,.72) 44%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 52% 42%,#000 0 23%,rgba(0,0,0,.72) 44%,transparent 72%);
  animation:pzGridFlow 22s linear infinite;
  will-change:background-position,transform;
}
.pz-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.34),transparent 20%,transparent 78%,rgba(0,0,0,.3)),
    linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,rgba(0,0,0,.28));
}
@keyframes pzCrimsonDrift{
  0%{transform:translate3d(-4%,-2%,0) scale(1.02) rotate(-5deg);opacity:.62}
  48%{transform:translate3d(3%,2%,0) scale(1.11) rotate(1deg);opacity:.88}
  100%{transform:translate3d(-1%,5%,0) scale(1.06) rotate(5deg);opacity:.7}
}
@keyframes pzGridFlow{
  0%{background-position:0 0,0 0;transform:perspective(700px) rotateX(62deg) rotateZ(-9deg) translate3d(-2%,-2%,0) scale(1.35)}
  100%{background-position:76px 152px,76px 152px;transform:perspective(700px) rotateX(62deg) rotateZ(-9deg) translate3d(2%,2%,0) scale(1.35)}
}
/* let the new background breathe through the original premium overlays */
body:before{opacity:.28;mix-blend-mode:screen}
body:after{background:radial-gradient(circle at 50% -10%,transparent 0 27%,rgba(0,0,0,.13) 60%,rgba(0,0,0,.5) 100%)}
.noise{opacity:.075}
.hero:before{background:radial-gradient(circle,rgba(255,43,43,.115),rgba(255,43,43,.035) 42%,transparent 72%)}
.subhero:before{background:radial-gradient(circle,rgba(255,43,43,.1),transparent 67%)}
.section,.hero,.subhero,.marquee{background-color:transparent}
@media(max-width:680px){
  .pz-motion-grid{opacity:.12;background-size:58px 58px;animation-duration:28s}
  .pz-animated-bg:before{filter:blur(58px);opacity:.65;animation-duration:22s}
  .pz-bg-canvas{opacity:.68}
}
@media(prefers-reduced-motion:reduce) and (max-width:0px){
  .pz-animated-bg:before,.pz-motion-grid{animation:none!important}
  .pz-bg-canvas{display:none}
}

/* =========================================================
   MOTION DIRECTOR V3 — 21st.dev Animated Hero inspired
   Desktop-first cinematic motion with mobile-safe fallbacks
   ========================================================= */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pzVTOut .34s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pzVTIn .56s cubic-bezier(.16,1,.3,1) both}
@keyframes pzVTOut{to{opacity:0;transform:scale(.992);filter:blur(5px)}}
@keyframes pzVTIn{from{opacity:0;transform:translateY(10px) scale(1.006);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}

/* cinematic page wipe fallback */
.pz-page-wipe{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;visibility:hidden}
.pz-page-wipe:before,.pz-page-wipe:after{content:"";display:block;background:#070707;transform:scaleY(0);transform-origin:bottom;will-change:transform}
.pz-page-wipe:after{background:linear-gradient(180deg,#160000,#070707)}
body.is-leaving .pz-page-wipe{visibility:visible}
body.is-leaving .pz-page-wipe:before{animation:pzWipeUp .5s cubic-bezier(.77,0,.18,1) forwards}
body.is-leaving .pz-page-wipe:after{animation:pzWipeUp .5s .045s cubic-bezier(.77,0,.18,1) forwards}
@keyframes pzWipeUp{to{transform:scaleY(1)}}

/* entrance choreography — visibly alive on desktop */
body.motion-ready .hero .eyebrow,
body.motion-ready .subhero .eyebrow{opacity:0;transform:translateY(14px) scale(.98)}
body.motion-ready .hero h1,
body.motion-ready .subhero h1{opacity:0;transform:translateY(26px);filter:blur(8px)}
body.motion-ready .hero-copy,
body.motion-ready .subhero p{opacity:0;transform:translateY(20px)}
body.motion-ready .hero-actions{opacity:0;transform:translateY(18px)}
body.motion-ready .hero-metrics{opacity:0;transform:translateY(18px)}
body.motion-ready .hero-visual{opacity:0;transform:translateY(28px) scale(.97)}
body.motion-live .hero .eyebrow,
body.motion-live .subhero .eyebrow{animation:pzIntro .65s .06s var(--ease-premium) both}
body.motion-live .hero h1,
body.motion-live .subhero h1{animation:pzTitleIn .9s .12s cubic-bezier(.16,1,.3,1) both}
body.motion-live .hero-copy,
body.motion-live .subhero p{animation:pzIntro .75s .24s var(--ease-premium) both}
body.motion-live .hero-actions{animation:pzIntro .72s .32s var(--ease-premium) both}
body.motion-live .hero-metrics{animation:pzIntro .75s .4s var(--ease-premium) both}
body.motion-live .hero-visual{animation:pzVisualIn 1s .16s cubic-bezier(.16,1,.3,1) both}
@keyframes pzIntro{to{opacity:1;transform:none}}
@keyframes pzTitleIn{0%{opacity:0;transform:translateY(34px);filter:blur(10px)}65%{filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes pzVisualIn{0%{opacity:0;transform:translateY(40px) scale(.955) rotateY(-2deg)}100%{opacity:1;transform:none}}

/* headline layers gently breathe after load */
body.motion-live .hero h1 .outline{animation:pzOutlinePulse 5.8s 1.2s ease-in-out infinite}
body.motion-live .hero h1 .red{background-size:100% 180%;animation:pzRedFlow 5.5s 1s ease-in-out infinite alternate}
@keyframes pzOutlinePulse{0%,100%{-webkit-text-stroke-color:rgba(245,241,232,.52);opacity:.88}50%{-webkit-text-stroke-color:rgba(255,255,255,.9);opacity:1}}
@keyframes pzRedFlow{from{background-position:50% 0}to{background-position:50% 100%}}

/* 21st.dev-inspired responsive particle matrix */
.pz-dot-field{position:absolute;z-index:1;pointer-events:none;inset:4% -3% 2% 41%;overflow:hidden;opacity:.56;mask-image:radial-gradient(ellipse at 52% 45%,#000 0 32%,rgba(0,0,0,.76) 55%,transparent 82%);-webkit-mask-image:radial-gradient(ellipse at 52% 45%,#000 0 32%,rgba(0,0,0,.76) 55%,transparent 82%)}
.pz-dot-field .pz-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:hsl(1 88% var(--dot-l,58%));box-shadow:0 0 var(--dot-glow,10px) rgba(255,43,43,.46);opacity:var(--dot-a,.5);mix-blend-mode:screen;will-change:transform;transition:transform .16s cubic-bezier(.25,.46,.45,.94),opacity .3s ease}
.hero:hover .pz-dot-field{opacity:.68}
.subhero .pz-dot-field{inset:-10% -4% -2% 48%;opacity:.42}

/* hero visual never looks static */
.hero-card img.bg{transform:scale(1.025);animation:pzHeroImageDrift 13s ease-in-out infinite alternate;will-change:transform}
.hero-card:after{overflow:hidden}
.hero-card .pz-scanline{position:absolute;z-index:4;left:-20%;right:-20%;height:18%;top:-24%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.055),rgba(255,43,43,.06),transparent);filter:blur(6px);transform:skewY(-6deg);animation:pzScan 7.8s 1.1s ease-in-out infinite}
@keyframes pzHeroImageDrift{0%{transform:scale(1.025) translate3d(-.8%,-.5%,0)}100%{transform:scale(1.075) translate3d(1.1%,.8%,0)}}
@keyframes pzScan{0%,14%{top:-28%;opacity:0}25%{opacity:1}63%{opacity:.75}78%,100%{top:112%;opacity:0}}

.hero-real{animation:pzPortraitFloat 5.8s 1.1s ease-in-out infinite}
.hero-badge{animation:pzBadgeFloat 6.6s 1.5s ease-in-out infinite}
@keyframes pzPortraitFloat{0%,100%{translate:0 0}50%{translate:-5px -10px}}
@keyframes pzBadgeFloat{0%,100%{translate:0 0}50%{translate:6px -8px}}
.hero-visual:hover .hero-real,.hero-visual:hover .hero-badge{animation-play-state:paused}

/* premium reveal variants */
.reveal[data-motion="left"]{transform:translate3d(-34px,14px,0) scale(.986)}
.reveal[data-motion="right"]{transform:translate3d(34px,14px,0) scale(.986)}
.reveal[data-motion="scale"]{transform:translateY(18px) scale(.94)}
.reveal.in[data-motion]{transform:none}
.section-head.reveal.in:after{animation:pzLineGrow .8s .18s var(--ease-premium) both;transform-origin:left}
@keyframes pzLineGrow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* parallax hooks */
.hero-visual,.image-panel,.clash-hero,.cta,.editorial-bridge{--pz-parallax:0px}
.motion-parallax{transform:translate3d(0,var(--pz-parallax),0)}
.image-panel.motion-parallax{overflow:hidden}
.image-panel.motion-parallax img{transform:translate3d(0,var(--pz-img-parallax,0px),0) scale(1.06)}
.image-panel.motion-parallax:hover img{transform:translate3d(0,var(--pz-img-parallax,0px),0) scale(1.09)}

/* kinetic metrics */
.metric{overflow:hidden}
.metric strong{position:relative;display:inline-block}
.metric strong.is-counting:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:linear-gradient(90deg,var(--red),transparent);animation:pzMetricLine .8s ease-out both}
@keyframes pzMetricLine{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* cursor energy trail */
.pz-cursor-spark{position:fixed;z-index:120;pointer-events:none;width:7px;height:7px;border-radius:50%;background:rgba(255,60,60,.84);box-shadow:0 0 18px rgba(255,43,43,.72);transform:translate(-50%,-50%);animation:pzSparkOut .65s ease-out forwards}
@keyframes pzSparkOut{to{opacity:0;transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) scale(.15);filter:blur(2px)}}

/* richer card motion */
.card{will-change:transform}
.card .pz-card-glint{position:absolute;z-index:3;inset:-40% auto -40% -45%;width:25%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);transform:skewX(-18deg);opacity:0}
.card:hover .pz-card-glint{animation:pzGlint .9s ease-out both}
@keyframes pzGlint{0%{left:-45%;opacity:0}20%{opacity:.75}100%{left:120%;opacity:0}}

/* animated goal transitions */
.goal-output.goal-swap{animation:pzGoalSwap .48s cubic-bezier(.16,1,.3,1) both}
@keyframes pzGoalSwap{0%{opacity:.45;transform:translateY(8px) scale(.992);filter:blur(5px)}100%{opacity:1;transform:none;filter:none}}
.goal-btn{position:relative;overflow:hidden}
.goal-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,43,43,.09),transparent);transform:translateX(-110%);transition:transform .5s ease}
.goal-btn:hover:after,.goal-btn.active:after{transform:translateX(110%)}

/* nav link / logo micro-motion */
.navlinks a:not(.pill):hover{transform:translateY(-2px)}
.pill.red{position:relative;overflow:hidden}
.pill.red:before{content:"";position:absolute;inset:-2px;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.25) 48%,transparent 76%);transform:translateX(-120%);animation:pzPillSweep 5.4s 1.8s ease-in-out infinite}
@keyframes pzPillSweep{0%,72%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

/* mobile keeps premium motion but trims expensive effects */
@media(max-width:980px){
  .pz-dot-field{inset:2% -14% 0 26%;opacity:.38}
  .hero-card img.bg{animation-duration:16s}
}
@media(max-width:680px){
  .pz-dot-field{inset:37% -24% -4% 18%;opacity:.26}
  .pz-dot-field .pz-dot{width:4px;height:4px}
  .pz-cursor-spark{display:none}
  .hero-real{animation-duration:7s}.hero-badge{animation-duration:7.6s}
  body.motion-ready .hero-visual{transform:translateY(20px) scale(.985)}
}

/* Reduced motion remains accessible without making the site look dead. */
@media(prefers-reduced-motion:reduce) and (max-width:0px){
  .pz-dot-field,.pz-cursor-spark,.pz-scanline{display:none!important}
  .hero-card img.bg,.hero-real,.hero-badge,.pill.red:before{animation:none!important}
  body.motion-ready .hero .eyebrow,body.motion-ready .subhero .eyebrow,
  body.motion-ready .hero h1,body.motion-ready .subhero h1,
  body.motion-ready .hero-copy,body.motion-ready .subhero p,
  body.motion-ready .hero-actions,body.motion-ready .hero-metrics,body.motion-ready .hero-visual{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .reveal{opacity:0!important;transform:none!important;filter:none!important;transition:opacity .45s ease!important}
  .reveal.in{opacity:1!important}
  .pz-animated-bg:before{display:block!important;animation:pzReducedBreathe 14s ease-in-out infinite alternate!important}
  .pz-motion-grid{animation:none!important}
  @keyframes pzReducedBreathe{from{opacity:.5}to{opacity:.72}}
}
\n\n/* =========================================================\n   MOTION V4 — always-on premium desktop motion\n   The system reduced-motion preference only softens intensity via class;\n   it does not make the site static.\n   ========================================================= */\nhtml:not(.motion-off) .track{animation:marquee 22s linear infinite!important}\nhtml:not(.motion-off) .floating-cube{animation:float 4.8s ease-in-out infinite!important}\nhtml:not(.motion-off) .hero-card img.bg{animation:pzHeroImageDrift 10s ease-in-out infinite alternate!important}\nhtml:not(.motion-off) .hero-real{animation:pzPortraitFloat 5.4s 1s ease-in-out infinite!important}\nhtml:not(.motion-off) .hero-badge{animation:pzBadgeFloat 6.2s 1.4s ease-in-out infinite!important}\nhtml:not(.motion-off) .pill.red:before{animation:pzPillSweep 4.8s 1.2s ease-in-out infinite!important}\nhtml:not(.motion-off) .pz-animated-bg:before{animation:pzCrimsonDrift 13s cubic-bezier(.45,.05,.2,.95) infinite alternate!important}\nhtml:not(.motion-off) .pz-motion-grid{animation:pzGridFlow 18s linear infinite!important}\n\n/* unmistakable living halo around hero */\n.hero-visual:before{content:"";position:absolute;inset:4% -4% 0 5%;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 45%,rgba(255,43,43,.16),rgba(255,43,43,.04) 42%,transparent 68%);filter:blur(26px);animation:pzHeroHalo 4.6s ease-in-out infinite alternate}\n@keyframes pzHeroHalo{from{transform:scale(.94) translate3d(-1%,1%,0);opacity:.52}to{transform:scale(1.08) translate3d(2%,-2%,0);opacity:.9}}\n\n/* subtle vertical float on metric cards */\n.metric:nth-child(1){animation:pzMetricFloat 5.2s ease-in-out infinite}\n.metric:nth-child(2){animation:pzMetricFloat 5.8s -.9s ease-in-out infinite}\n.metric:nth-child(3){animation:pzMetricFloat 6.3s -1.7s ease-in-out infinite}\n@keyframes pzMetricFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}\n\n/* system reduced motion = softer, not static */\n.system-reduced-motion .pz-dot-field{opacity:.34}\n.system-reduced-motion .pz-cursor-spark{display:none}\n.system-reduced-motion .hero-card img.bg{animation-duration:18s!important}\n.system-reduced-motion .hero-real,.system-reduced-motion .hero-badge{animation-duration:10s!important}\n.system-reduced-motion .track{animation-duration:40s!important}\n.system-reduced-motion .floating-cube{animation-duration:9s!important}\n.system-reduced-motion .metric{animation-duration:10s!important}\n\n@media(max-width:680px){\n  .hero-visual:before{filter:blur(22px);opacity:.65}\n  .metric{animation-duration:8s!important}\n}\n

/* =========================================================
   V6 — 21st.dev GLASS MOTION CARDS
   Inspired by 21st.dev Glass Cards / Glare Cards / 3D cards.
   Frosted backdrop + cursor glare + subtle 3D response.
   ========================================================= */
:root{
  --font-ui:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk","Manrope",Inter,ui-sans-serif,system-ui,sans-serif;
}
body{font-family:var(--font-ui)}

/* upgraded typography inside the interactive surfaces */
.card h3,.fact b,.metric strong,.goal-output h3,.copy-panel .quote{
  font-family:var(--font-display);
  font-optical-sizing:auto;
}
.card h3{
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.04;
  text-wrap:balance;
}
.card p{
  font-family:var(--font-ui);
  font-weight:500;
  letter-spacing:-.012em;
  line-height:1.72;
}
.card .n{
  font-family:var(--font-ui);
  font-weight:800;
  letter-spacing:.22em;
}
.fact b{font-weight:700;letter-spacing:-.025em;font-size:1.02rem}
.fact span{font-family:var(--font-ui);font-weight:500;letter-spacing:-.01em}

/* The mindset panel itself becomes translucent, so the living background
   remains visible through the frosted fact cards. */
.copy-panel{
  position:relative;
  background:linear-gradient(145deg,rgba(17,17,17,.62),rgba(8,8,8,.42));
  -webkit-backdrop-filter:blur(24px) saturate(135%);
  backdrop-filter:blur(24px) saturate(135%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 42px 120px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.055);
}
.copy-panel:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 22%,transparent 70%,rgba(255,43,43,.035));
  opacity:.7;
}
.copy-panel>*{position:relative;z-index:1}

/* shared glass material */
.card,.fact{
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.024) 46%,rgba(255,43,43,.018)),
    rgba(9,9,9,.28);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:
    0 26px 80px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 0 -1px 0 rgba(255,255,255,.025);
  transform-style:preserve-3d;
  will-change:transform;
}

/* hairline glass rim */
.card:before,.fact:before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.15),transparent 16%,transparent 71%,rgba(255,43,43,.08)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 32%);
  opacity:.66;
  mix-blend-mode:screen;
}

/* mouse-follow glare */
.card:after,.fact:after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:1;pointer-events:none;
  background:
    radial-gradient(310px circle at var(--mx) var(--my),rgba(255,255,255,.16),rgba(255,72,72,.065) 20%,rgba(255,43,43,.025) 38%,transparent 64%);
  opacity:.18;
  transition:opacity .28s ease;
  mix-blend-mode:screen;
}
.card:hover:after,.fact:hover:after{opacity:1}
.card>*:not(.pz-card-glint),.fact>*{position:relative;z-index:2}

/* stronger but controlled physical response */
.card,.fact{
  transition:
    transform .16s cubic-bezier(.2,.72,.2,1),
    border-color .35s ease,
    box-shadow .42s ease,
    background .42s ease;
}
.card.reveal.in:hover,.fact:hover{
  transform:perspective(1050px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,-7px,18px);
  border-color:rgba(255,255,255,.26);
  background:
    linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.03) 48%,rgba(255,43,43,.028)),
    rgba(9,9,9,.31);
  box-shadow:
    0 38px 115px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 46px rgba(255,43,43,.055),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* content gets a tiny parallax depth */
.card h3,.card p,.card .n,.card .arrow,.fact b,.fact span{
  transition:transform .32s cubic-bezier(.2,.72,.2,1),color .3s ease,opacity .3s ease;
}
.card:hover h3{transform:translate3d(0,-4px,22px)}
.card:hover p{transform:translate3d(0,-2px,14px)}
.card:hover .n{transform:translate3d(0,-1px,12px);color:#d4cbc1}
.card:hover .arrow{transform:translate3d(0,0,26px) rotate(45deg) scale(1.04)}
.fact:hover b{transform:translate3d(0,-2px,18px);color:#fff}
.fact:hover span{transform:translate3d(0,-1px,11px);color:#aaa29a}

/* diagonal liquid-glass reflection */
.card .pz-card-glint,.fact .pz-card-glint{
  position:absolute;z-index:3;inset:-45% auto -45% -38%;width:17%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.19),rgba(255,255,255,.055),transparent);
  filter:blur(.3px);
  transform:skewX(-18deg) translateX(-180%);
  opacity:0;
}
.card:hover .pz-card-glint,.fact:hover .pz-card-glint{animation:pzGlassSweep .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes pzGlassSweep{
  0%{transform:skewX(-18deg) translateX(-180%);opacity:0}
  16%{opacity:.82}
  100%{transform:skewX(-18deg) translateX(900%);opacity:0}
}

/* four mindset facts become compact glass tiles */
.facts{gap:12px}
.fact{
  min-height:80px;
  padding:19px 20px;
  border-radius:20px;
}
.fact:after{background:radial-gradient(210px circle at var(--mx) var(--my),rgba(255,255,255,.18),rgba(255,43,43,.055) 28%,transparent 64%)}

/* large service cards: softer spacing and refined heading hierarchy */
.grid3 .card{border-radius:30px}
.grid3 .card h3{font-size:clamp(1.38rem,1.6vw,1.72rem)}
.grid3 .card p{color:#aaa29a}
.grid3 .card .arrow{
  background:rgba(255,255,255,.018);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

/* touch/mobile: keep glass + entrance motion, remove fake mouse tilt */
@media (hover:none),(pointer:coarse){
  .card,.fact{-webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%)}
  .card.reveal.in:hover,.fact:hover{transform:none}
  .card:after,.fact:after{opacity:.34;background:radial-gradient(260px circle at 22% 15%,rgba(255,255,255,.095),rgba(255,43,43,.035) 34%,transparent 68%)}
}

@media(max-width:680px){
  .fact{padding:17px 18px;min-height:74px}
  .grid3 .card{border-radius:25px}
  .card h3{letter-spacing:-.025em}
}

/* =========================================================
   V7 — LIQUID GLASS / KINETIC TYPE / HIGH-MOTION CARDS
   Direction informed by 21st.dev Liquid Glass Hover Card,
   Optimized Tilt Card, Glass Cards and 3D Card Gallery.
   ========================================================= */
:root{
  --font-body:"Inter Tight",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-impact:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --glass-white:rgba(255,255,255,.16);
  --glass-red:rgba(255,42,42,.38);
  --glass-red-soft:rgba(255,42,42,.10);
}
body{font-family:var(--font-body);font-feature-settings:"ss01" 1,"cv11" 1}

/* A much more editorial / performance-oriented type system */
.hero h1,.subhero h1,.section-head h2,.quote,.clash-content h3,.cta h3,.editorial-bridge h3{
  font-family:var(--font-impact);
  font-weight:800;
  letter-spacing:-.035em;
  font-stretch:condensed;
}
.hero h1,.subhero h1{letter-spacing:-.045em}
.section-head h2{font-size:clamp(3.4rem,6vw,6.5rem);line-height:.88;text-transform:uppercase}
.card h3{
  font-family:var(--font-impact);
  font-size:clamp(1.8rem,2.25vw,2.35rem)!important;
  font-weight:800;
  line-height:.92;
  letter-spacing:-.018em;
  text-transform:uppercase;
  max-width:92%;
}
.card p{font-size:1.01rem;line-height:1.68;color:rgba(237,232,224,.68)!important;font-weight:450}
.card .n,.kicker,.eyebrow{
  font-family:var(--font-body);
  font-weight:750!important;
  letter-spacing:.22em!important;
  text-transform:uppercase;
}
.card .n{font-size:.69rem!important;color:rgba(255,255,255,.42)!important}
.fact b{font-family:var(--font-impact);font-size:1.4rem!important;line-height:1;text-transform:uppercase;letter-spacing:.015em!important}
.fact span{font-size:.82rem!important;letter-spacing:.015em;color:rgba(255,255,255,.46)!important}
.copy-panel .quote{font-size:clamp(3rem,5.3vw,5.9rem);line-height:.84;letter-spacing:-.025em}

/* stronger translucent parent so the animated crimson background reads through */
.copy-panel{
  background:linear-gradient(145deg,rgba(10,10,10,.38),rgba(8,8,8,.22))!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
  border-color:rgba(255,255,255,.11)!important;
}

/* liquid glass material */
.card,.fact{
  --mx:50%;--my:50%;--rx:0deg;--ry:0deg;--tx:0px;--ty:0px;--glow-alpha:.13;
  border:1px solid transparent!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 46%,rgba(255,40,40,.035)) padding-box,
    linear-gradient(115deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 23%,rgba(255,45,45,.24) 58%,rgba(255,255,255,.13)) border-box!important;
  -webkit-backdrop-filter:blur(30px) saturate(175%) contrast(103%)!important;
  backdrop-filter:blur(30px) saturate(175%) contrast(103%)!important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.07) inset,
    0 -1px 0 rgba(255,255,255,.025) inset,
    0 0 0 1px rgba(255,255,255,.018)!important;
  transform-origin:center center;
  isolation:isolate;
}
.card{min-height:310px!important;padding:29px!important}
.fact{min-height:92px!important;padding:20px 22px!important}

/* cursor-follow refracted lens */
.card:after,.fact:after{
  content:""!important;
  position:absolute!important;inset:-2px!important;z-index:0!important;border-radius:inherit!important;pointer-events:none!important;
  background:
    radial-gradient(360px circle at var(--mx) var(--my),rgba(255,255,255,.24),rgba(255,255,255,.075) 15%,rgba(255,42,42,.105) 30%,transparent 61%),
    radial-gradient(190px circle at var(--mx) var(--my),rgba(255,255,255,.11),transparent 64%)!important;
  opacity:.28!important;
  mix-blend-mode:screen!important;
  filter:saturate(125%);
  transition:opacity .24s ease!important;
}
.card:hover:after,.fact:hover:after{opacity:1!important}

/* glass edge + slow animated red energy around the perimeter */
.card:before,.fact:before{
  content:""!important;position:absolute!important;inset:0!important;z-index:1!important;border-radius:inherit!important;pointer-events:none!important;
  background:
    linear-gradient(125deg,rgba(255,255,255,.20),transparent 15%,transparent 68%,rgba(255,50,50,.13)),
    linear-gradient(180deg,rgba(255,255,255,.09),transparent 27%)!important;
  opacity:.72!important;mix-blend-mode:screen;
  box-shadow:inset 0 0 35px rgba(255,255,255,.018),inset 0 -25px 50px rgba(255,20,20,.02);
}
.card>*:not(.pz-card-glint):not(.pz-card-aura),.fact>*:not(.pz-card-glint):not(.pz-card-aura){position:relative;z-index:3}

/* visible liquid-light blob moving with cursor */
.pz-card-aura{
  position:absolute;z-index:2;pointer-events:none;width:230px;height:230px;border-radius:50%;
  left:var(--mx);top:var(--my);transform:translate(-50%,-50%) scale(.62);
  background:radial-gradient(circle,rgba(255,255,255,.13) 0,rgba(255,72,72,.105) 20%,rgba(255,35,35,.04) 45%,transparent 70%);
  filter:blur(12px);opacity:.12;transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1);
  mix-blend-mode:screen;
}
.card:hover .pz-card-aura,.fact:hover .pz-card-aura{opacity:.95;transform:translate(-50%,-50%) scale(1)}

/* stronger three-dimensional hover */
.card,.fact{transition:transform .12s ease-out,box-shadow .35s ease,filter .35s ease,background .35s ease!important}
.card.reveal.in:hover,.fact:hover{
  transform:perspective(850px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,-10px,30px)!important;
  box-shadow:
    0 42px 95px rgba(0,0,0,.46),
    0 18px 58px rgba(105,0,0,.16),
    0 0 0 1px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.17)!important;
  filter:saturate(112%) brightness(1.05);
}

/* content parallax inside the tilt */
.card h3{transform:translate3d(var(--tx),var(--ty),18px);transition:transform .12s ease-out,color .25s ease!important}
.card p{transform:translate3d(var(--tx55),var(--ty55),10px);transition:transform .14s ease-out,color .25s ease!important}
.card .n{transform:translate3d(var(--tx35),var(--ty35),12px);transition:transform .14s ease-out,color .25s ease!important}
.card .arrow{transform:translate3d(var(--tx65),var(--ty65),25px);transition:transform .16s cubic-bezier(.16,1,.3,1),background .28s ease,border-color .28s ease!important}
.card:hover .arrow{transform:translate3d(var(--tx65),var(--ty65),34px) rotate(45deg) scale(1.12)!important;background:var(--red)!important;border-color:var(--red)!important;box-shadow:0 12px 38px rgba(255,43,43,.32)!important}
.fact b{transform:translate3d(var(--tx),var(--ty),16px);transition:transform .12s ease-out,color .25s ease!important}
.fact span{transform:translate3d(var(--tx50),var(--ty50),8px);transition:transform .14s ease-out,color .25s ease!important}

/* brighter multi-pass sweep */
.card .pz-card-glint,.fact .pz-card-glint{
  z-index:4!important;width:23%!important;left:-52%!important;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),rgba(255,255,255,.40),rgba(255,74,74,.11),transparent)!important;
  filter:blur(1.1px)!important;mix-blend-mode:screen;
}
.card:hover .pz-card-glint,.fact:hover .pz-card-glint{animation:v7LiquidSweep 1.05s cubic-bezier(.16,1,.3,1) both!important}
@keyframes v7LiquidSweep{0%{left:-55%;opacity:0;transform:skewX(-20deg)}18%{opacity:.95}100%{left:126%;opacity:0;transform:skewX(-20deg)}}

/* idle kinetic motion: subtle, but clearly alive */
.grid3 .card:nth-child(1){animation:v7CardFloatA 6.4s ease-in-out infinite}
.grid3 .card:nth-child(2){animation:v7CardFloatB 7.2s -.8s ease-in-out infinite}
.grid3 .card:nth-child(3){animation:v7CardFloatA 6.8s -1.6s ease-in-out infinite reverse}
.facts .fact:nth-child(1){animation:v7FactFloat 5.3s ease-in-out infinite}
.facts .fact:nth-child(2){animation:v7FactFloat 5.9s -.9s ease-in-out infinite}
.facts .fact:nth-child(3){animation:v7FactFloat 5.5s -1.7s ease-in-out infinite}
.facts .fact:nth-child(4){animation:v7FactFloat 6.2s -2.4s ease-in-out infinite}
.grid3 .card:hover,.facts .fact:hover{animation-play-state:paused}
@keyframes v7CardFloatA{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes v7CardFloatB{0%,100%{translate:0 -2px}50%{translate:0 4px}}
@keyframes v7FactFloat{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* entrance feels like a designed motion sequence, not a generic fade */
.grid3 .card.reveal{clip-path:inset(14% 0 0 0 round 30px);transform:perspective(900px) translateY(42px) rotateX(7deg) scale(.97);filter:blur(8px);opacity:0}
.grid3 .card.reveal.in{clip-path:inset(0 0 0 0 round 30px);transform:none;filter:none;opacity:1;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .75s ease,clip-path .95s cubic-bezier(.16,1,.3,1)}
.grid3 .card.reveal:nth-child(2){transition-delay:.11s!important}.grid3 .card.reveal:nth-child(3){transition-delay:.22s!important}
.facts .fact{opacity:0;transform:translateY(16px) scale(.96)}
.copy-panel.reveal.in .facts .fact{animation:v7FactIn .7s cubic-bezier(.16,1,.3,1) forwards}
.copy-panel.reveal.in .facts .fact:nth-child(2){animation-delay:.08s}.copy-panel.reveal.in .facts .fact:nth-child(3){animation-delay:.16s}.copy-panel.reveal.in .facts .fact:nth-child(4){animation-delay:.24s}
@keyframes v7FactIn{to{opacity:1;transform:none}}

/* kinetic underline on service headings */
.card h3:after{
  content:"";display:block;width:34px;height:2px;margin-top:14px;background:linear-gradient(90deg,var(--red),rgba(255,43,43,0));
  transform-origin:left;transform:scaleX(.55);opacity:.7;transition:transform .35s cubic-bezier(.16,1,.3,1),width .35s ease,opacity .35s ease;
}
.card:hover h3:after{width:72px;transform:scaleX(1);opacity:1}

/* compact facts get a red corner pulse */
.fact:before{background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 20%,transparent 70%,rgba(255,35,35,.15))!important}
.fact:hover b{color:#fff!important}.fact:hover span{color:rgba(255,255,255,.72)!important}

/* mobile retains the expensive-looking glass but not cursor physics */
@media (hover:none),(pointer:coarse){
  .card,.fact{-webkit-backdrop-filter:blur(22px) saturate(155%)!important;backdrop-filter:blur(22px) saturate(155%)!important}
  .grid3 .card,.facts .fact{animation-duration:8.5s!important}
  .card h3,.card p,.card .n,.card .arrow,.fact b,.fact span{transform:none!important}
  .pz-card-aura{left:18%;top:12%;opacity:.35;transform:translate(-50%,-50%) scale(.8)}
}
@media(max-width:680px){
  .section-head h2{font-size:clamp(3.25rem,16vw,4.7rem)}
  .card{min-height:285px!important;padding:25px!important}
  .card h3{font-size:2rem!important;max-width:100%}
  .card p{font-size:.96rem}
  .copy-panel .quote{font-size:clamp(3.1rem,15vw,4.7rem)}
  .fact b{font-size:1.28rem!important}
}