/** * PM Media — $100k Experience Layer (additive) * Exact brand tokens + neon glow (cyan / magenta). * Logo lock: assets/pm-media-neon-logo.png * Toggle: remove this file + .pm-100k-xp from to restore prior look. */ html.pm-100k-xp { --xp-ease: cubic-bezier(0.16, 1, 0.3, 1); --xp-ease-std: cubic-bezier(0.32, 0.72, 0, 1); --xp-cyan: #00f0ff; --xp-magenta: #ff2ea6; --xp-gold: var(--gold, #f0c14b); --xp-bg: var(--bg, #06060c); --xp-bg-deep: #020208; --xp-max: 1180px; --xp-glow-cyan: 0 0 8px rgba(0, 240, 255, 0.95), 0 0 22px rgba(0, 212, 238, 0.55), 0 0 48px rgba(0, 240, 255, 0.28); --xp-glow-magenta: 0 0 10px rgba(255, 46, 166, 0.85), 0 0 28px rgba(232, 50, 138, 0.45); --xp-glow-mixed: 0 0 12px rgba(0, 240, 255, 0.75), 0 0 28px rgba(255, 46, 166, 0.45), 0 0 56px rgba(0, 212, 238, 0.22); } /* Opaque gradient black — kills ghost bleed / favicon show-through */ html.pm-100k-xp, html.pm-100k-xp body { background-color: var(--xp-bg-deep) !important; background-image: radial-gradient(ellipse 90% 55% at 50% -10%, rgba(0, 212, 238, 0.07), transparent 55%), radial-gradient(ellipse 70% 40% at 100% 20%, rgba(255, 46, 166, 0.05), transparent 50%), linear-gradient(180deg, #020208 0%, #06060c 28%, #080810 70%, #020208 100%) !important; background-attachment: fixed; background-repeat: no-repeat; } html.pm-100k-xp body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #020208 0%, #06060c 40%, #05050a 100%); } html.pm-100k-xp main, html.pm-100k-xp .section, html.pm-100k-xp #hero.hero { background-color: transparent; isolation: isolate; } /* ── Fixed film grain (GPU-safe, pointer-none) ── */ html.pm-100k-xp::before { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* ── Entrance veil ── */ html.pm-100k-xp .pm-xp-veil { position: fixed; inset: 0; z-index: 99990; background: var(--xp-bg); pointer-events: none; opacity: 1; transition: opacity 0.9s var(--xp-ease); } html.pm-100k-xp.is-xp-ready .pm-xp-veil { opacity: 0; visibility: hidden; } /* ── Sticky chrome → compact opaque island + collapse ── */ html.pm-100k-xp .site-chrome { position: sticky; top: 0; z-index: 200; padding: 0.35rem 0.65rem 0; background: linear-gradient(180deg, #020208 0%, rgba(2, 2, 8, 0.97) 70%, transparent 100%); border: none; box-shadow: none; transition: padding 0.45s var(--xp-ease), transform 0.55s var(--xp-ease), opacity 0.45s var(--xp-ease); } html.pm-100k-xp .corp-bar { max-width: var(--xp-max); margin: 0 auto 0.28rem; padding: 0.22rem 0.85rem; border-radius: 999px; background: #05050c; border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.62rem; letter-spacing: 0.08em; text-align: center; transition: opacity 0.35s var(--xp-ease), max-height 0.35s var(--xp-ease), margin 0.35s var(--xp-ease), padding 0.35s var(--xp-ease); } html.pm-100k-xp .site-header { max-width: var(--xp-max); margin: 0 auto; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); background: #06060e; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 36px rgba(0, 0, 0, 0.55); transition: transform 0.55s var(--xp-ease), box-shadow 0.55s var(--xp-ease), border-color 0.55s var(--xp-ease), background 0.55s var(--xp-ease), opacity 0.45s var(--xp-ease), max-height 0.55s var(--xp-ease); } html.pm-100k-xp .site-header.is-scrolled { border-color: rgba(0, 212, 238, 0.22); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 16px 44px rgba(0, 0, 0, 0.6), 0 0 32px rgba(0, 212, 238, 0.06); } html.pm-100k-xp .header-inner { padding: 0.4rem 0.75rem; gap: 0.55rem; align-items: center; } /* Chrome collapse control */ html.pm-100k-xp .pm-xp-chrome-toggle { position: fixed; top: 0.55rem; right: 0.65rem; z-index: 260; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(0, 240, 255, 0.35); background: #05050c; color: #e8fbff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 18px rgba(0, 240, 255, 0.22), 0 8px 24px rgba(0, 0, 0, 0.45); transition: transform 0.35s var(--xp-ease), box-shadow 0.35s var(--xp-ease), border-color 0.35s; } html.pm-100k-xp .pm-xp-chrome-toggle:hover { transform: translateY(-1px); border-color: rgba(255, 46, 166, 0.55); box-shadow: 0 0 24px rgba(255, 46, 166, 0.28), 0 0 18px rgba(0, 240, 255, 0.2); } html.pm-100k-xp .pm-xp-chrome-toggle:focus-visible { outline: 2px solid var(--xp-cyan); outline-offset: 2px; } html.pm-100k-xp .pm-xp-chrome-toggle .pm-xp-chevron { display: inline-block; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg); transition: transform 0.35s var(--xp-ease); } html.pm-100k-xp.chrome-collapsed .pm-xp-chrome-toggle .pm-xp-chevron { transform: rotate(45deg); } html.pm-100k-xp.chrome-collapsed .site-chrome { transform: translateY(calc(-100% - 0.5rem)); opacity: 0; pointer-events: none; padding: 0; } html.pm-100k-xp.chrome-collapsed .corp-bar, html.pm-100k-xp.chrome-collapsed .site-header { max-height: 0; overflow: hidden; margin: 0; padding: 0; border-width: 0; opacity: 0; } html.pm-100k-xp .logo-wordmark-mark { background: linear-gradient(135deg, var(--xp-cyan), var(--xp-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; letter-spacing: -0.04em; } /* ── Neon logo — HD / 8K shiny stage (header + hero + posters) ── */ html.pm-100k-xp .site-header .logo--neon { position: relative; display: inline-flex; align-items: center; max-width: min(168px, 36vw); overflow: hidden; border-radius: 0.35rem; text-decoration: none; transition: transform 0.45s var(--xp-ease), filter 0.45s var(--xp-ease); } html.pm-100k-xp .site-header .logo-img--neon, html.pm-100k-xp #hero .hero-logo-img--neon, html.pm-100k-xp #hero .hero-logo-img, html.pm-100k-xp .pm-poster-logo, html.pm-100k-xp footer .logo-img { image-rendering: -webkit-optimize-contrast; image-rendering: high-quality; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } html.pm-100k-xp .site-header .logo-img--neon { width: 100%; height: auto; display: block; filter: contrast(1.14) saturate(1.28) brightness(1.1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 8px rgba(0, 255, 255, 0.95)) drop-shadow(0 0 20px rgba(0, 212, 238, 0.55)) drop-shadow(0 0 32px rgba(255, 46, 166, 0.4)); } html.pm-100k-xp .site-header .logo--neon::after, html.pm-100k-xp #hero .rd-plate-media::after, html.pm-100k-xp .pm-xp-logo-shine::after { content: ""; position: absolute; inset: -10% -40%; background: linear-gradient( 115deg, transparent 35%, rgba(255, 255, 255, 0.08) 42%, rgba(0, 255, 255, 0.45) 50%, rgba(255, 46, 166, 0.28) 54%, transparent 62% ); transform: translateX(-120%) skewX(-18deg); animation: pm-xp-specular 4.2s var(--xp-ease-std) infinite; pointer-events: none; mix-blend-mode: screen; z-index: 3; } @keyframes pm-xp-specular { 0%, 55% { transform: translateX(-130%) skewX(-18deg); opacity: 0; } 60% { opacity: 1; } 78% { transform: translateX(130%) skewX(-18deg); opacity: 0.9; } 100% { transform: translateX(130%) skewX(-18deg); opacity: 0; } } html.pm-100k-xp .site-header .logo--neon:hover { transform: scale(1.04); } html.pm-100k-xp .site-header .logo--neon:hover .logo-img--neon { filter: contrast(1.2) saturate(1.35) brightness(1.16) drop-shadow(0 0 2px #fff) drop-shadow(0 0 12px rgba(0, 255, 255, 1)) drop-shadow(0 0 28px rgba(0, 240, 255, 0.85)) drop-shadow(0 0 48px rgba(255, 46, 166, 0.65)); } html.pm-100k-xp #hero .rd-plate-media { position: relative; overflow: hidden; isolation: isolate; } html.pm-100k-xp #hero .hero-logo-img--neon, html.pm-100k-xp #hero .hero-logo-img { filter: contrast(1.18) saturate(1.32) brightness(1.12) drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(0, 255, 255, 1)) drop-shadow(0 0 22px rgba(0, 240, 255, 0.95)) drop-shadow(0 0 48px rgba(0, 212, 238, 0.75)) drop-shadow(0 0 72px rgba(255, 46, 166, 0.55)) drop-shadow(0 28px 56px rgba(0, 0, 0, 0.7)) !important; animation: pm-xp-neon-breathe 3.4s var(--xp-ease-std) infinite; will-change: filter; } @keyframes pm-xp-neon-breathe { 0%, 100% { filter: contrast(1.14) saturate(1.22) brightness(1.06) drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(0, 255, 255, 0.9)) drop-shadow(0 0 28px rgba(0, 212, 238, 0.7)) drop-shadow(0 0 52px rgba(255, 46, 166, 0.42)) drop-shadow(0 24px 48px rgba(0, 0, 0, 0.68)); } 50% { filter: contrast(1.24) saturate(1.4) brightness(1.18) drop-shadow(0 0 3px #fff) drop-shadow(0 0 16px rgba(0, 255, 255, 1)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.95)) drop-shadow(0 0 80px rgba(255, 46, 166, 0.75)) drop-shadow(0 32px 60px rgba(0, 0, 0, 0.55)); } } html.pm-100k-xp #hero .rd-halo { background: radial-gradient(circle, rgba(0, 240, 255, 0.42) 0%, rgba(255, 46, 166, 0.22) 40%, transparent 68%) !important; box-shadow: var(--xp-glow-mixed); animation: pm-xp-halo-pulse 4s var(--xp-ease-std) infinite; } @keyframes pm-xp-halo-pulse { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } html.pm-100k-xp #hero .pm-noon-3d-stage.pm-neon-sign-stage { position: relative; overflow: hidden; background: #020208 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 0 8px #000, 0 0 0 10px rgba(0, 240, 255, 0.6), 0 0 0 12px rgba(255, 46, 166, 0.28), 0 28px 80px rgba(0, 0, 0, 0.65), 0 0 72px rgba(0, 240, 255, 0.32), 0 0 110px rgba(255, 46, 166, 0.18) !important; transform-style: preserve-3d; transition: transform 0.45s var(--xp-ease); } /* Aceternity-style moving beam border */ html.pm-100k-xp #hero .pm-noon-3d-stage.pm-neon-sign-stage::before { content: ""; position: absolute; inset: -2px; z-index: 1; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--xp-beam-angle, 0deg), transparent 0%, rgba(0, 240, 255, 0.9) 12%, transparent 28%, rgba(255, 46, 166, 0.85) 52%, transparent 68%, rgba(0, 255, 255, 0.7) 88%, transparent 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pm-xp-beam-spin 5.5s linear infinite; pointer-events: none; opacity: 0.85; } @keyframes pm-xp-beam-spin { to { --xp-beam-angle: 360deg; } } @property --xp-beam-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* Spotlight over neon sign */ html.pm-100k-xp #hero .pm-xp-spotlight { position: absolute; width: min(520px, 70vw); height: min(520px, 70vw); border-radius: 50%; top: 10%; left: 50%; transform: translate(-50%, -30%); background: radial-gradient( circle, rgba(255, 255, 255, 0.18) 0%, rgba(0, 240, 255, 0.12) 28%, transparent 65% ); filter: blur(8px); pointer-events: none; z-index: 4; mix-blend-mode: screen; opacity: 0.85; transition: transform 0.35s var(--xp-ease-std), opacity 0.45s; } html.pm-100k-xp .pm-poster-logo { filter: contrast(1.12) saturate(1.2) brightness(1.08) drop-shadow(0 0 8px rgba(0, 240, 255, 0.55)) drop-shadow(0 0 18px rgba(255, 46, 166, 0.35)); } html.pm-100k-xp .nav-main a { position: relative; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(244, 244, 250, 0.72); transition: color 0.35s var(--xp-ease-std); } html.pm-100k-xp .nav-main a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 1px; background: linear-gradient(90deg, var(--xp-cyan), var(--xp-magenta)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--xp-ease); } html.pm-100k-xp .nav-main a:hover, html.pm-100k-xp .nav-main a[aria-current="page"] { color: #fff; text-decoration: none; text-shadow: 0 0 12px rgba(0, 240, 255, 0.55); } html.pm-100k-xp .nav-main a:hover::after, html.pm-100k-xp .nav-main a[aria-current="page"]::after { transform: scaleX(1); } html.pm-100k-xp .header-actions .btn-primary { border-radius: 999px; padding-inline: 1.15rem; background: linear-gradient(135deg, #00e8ff 0%, #00c8e8 40%, #ff2ea6 100%) !important; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 18px rgba(0, 240, 255, 0.45), 0 0 36px rgba(255, 46, 166, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.35s var(--xp-ease), box-shadow 0.35s var(--xp-ease); } html.pm-100k-xp .header-actions .btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 28px rgba(0, 240, 255, 0.65), 0 0 52px rgba(255, 46, 166, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); } html.pm-100k-xp .header-actions .btn-primary:active { transform: scale(0.97); } /* ── Hero: immersive first viewport ── */ html.pm-100k-xp #hero.hero { position: relative; min-height: min(100dvh, 920px); display: flex; align-items: center; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 10vw, 7rem); overflow: hidden; } html.pm-100k-xp #hero .hero-8k-visual { opacity: 0.55; } html.pm-100k-xp #hero::before { content: ""; position: absolute; top: 12%; left: 50%; width: min(720px, 92vw); height: min(720px, 92vw); transform: translate(-50%, -20%); border-radius: 50%; background: radial-gradient(circle at 35% 40%, rgba(0, 240, 255, 0.28) 0%, transparent 55%), radial-gradient(circle at 65% 55%, rgba(255, 46, 166, 0.22) 0%, transparent 58%); filter: blur(48px); pointer-events: none; z-index: 0; animation: pm-xp-glow-drift 8s var(--xp-ease-std) infinite alternate; } @keyframes pm-xp-glow-drift { from { opacity: 0.75; transform: translate(-52%, -22%) scale(1); } to { opacity: 1; transform: translate(-48%, -18%) scale(1.06); } } html.pm-100k-xp #hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(31, 41, 55, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 41, 55, 0.07) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%); pointer-events: none; z-index: 0; opacity: 0.7; } html.pm-100k-xp #hero .pm-noon-hero-inner, html.pm-100k-xp #hero .container { position: relative; z-index: 2; } html.pm-100k-xp #hero .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-inline: auto; padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 244, 250, 0.78); } html.pm-100k-xp #hero .eyebrow::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.8); animation: pm-xp-pulse 2.2s var(--xp-ease-std) infinite; } @keyframes pm-xp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } html.pm-100k-xp #hero .hero-title-noon, html.pm-100k-xp #hero h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(2.35rem, 5.6vw, 4.75rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; font-weight: 800; } html.pm-100k-xp #hero .hero-title-noon em, html.pm-100k-xp #hero h1 em { font-style: italic; font-family: "Instrument Serif", Georgia, serif; font-weight: 400; background: linear-gradient(120deg, #fff 10%, rgba(244, 244, 250, 0.85) 45%, var(--xp-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html.pm-100k-xp #hero .pm-noon-lead, html.pm-100k-xp #hero .lead { max-width: 38rem; margin-inline: auto; font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.65; color: rgba(244, 244, 250, 0.68); text-wrap: pretty; } /* Hero CTA hierarchy — keep all actions, elevate primary */ html.pm-100k-xp #hero .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; } html.pm-100k-xp #hero .hero-cta .btn-primary { border-radius: 1rem; padding: 0.95rem 1.6rem; font-weight: 700; background: linear-gradient(135deg, #00f0ff 0%, #00d4ee 35%, #ff2ea6 100%) !important; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 28px rgba(0, 240, 255, 0.45), 0 0 48px rgba(255, 46, 166, 0.28); transition: transform 0.4s var(--xp-ease), box-shadow 0.4s var(--xp-ease); } html.pm-100k-xp #hero .hero-cta .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 240, 255, 0.65), 0 0 72px rgba(255, 46, 166, 0.4); } html.pm-100k-xp #hero .hero-cta .btn-primary:active { transform: scale(0.97); } html.pm-100k-xp #hero .hero-cta .btn-outline { border-radius: 1rem; border-color: rgba(0, 240, 255, 0.35); background: rgba(0, 240, 255, 0.06); box-shadow: 0 0 18px rgba(0, 240, 255, 0.12); transition: transform 0.35s var(--xp-ease), border-color 0.35s var(--xp-ease), background 0.35s var(--xp-ease), box-shadow 0.35s var(--xp-ease); } html.pm-100k-xp #hero .hero-cta .btn-outline:hover { border-color: rgba(255, 46, 166, 0.55); background: rgba(255, 46, 166, 0.1); box-shadow: 0 0 28px rgba(255, 46, 166, 0.25); transform: translateY(-2px); } html.pm-100k-xp #hero .hero-stat-card, html.pm-100k-xp #hero .hero-convo-details, html.pm-100k-xp #hero .location-badge { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--xp-ease), transform 0.8s var(--xp-ease); } html.pm-100k-xp.is-xp-ready #hero .hero-stat-card, html.pm-100k-xp.is-xp-ready #hero .hero-convo-details, html.pm-100k-xp.is-xp-ready #hero .location-badge { opacity: 1; transform: none; transition-delay: 0.55s; } html.pm-100k-xp #hero .hero-stat-card { margin-top: 1.75rem; border-radius: 1.35rem; border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(16, 16, 28, 0.9), rgba(8, 8, 14, 0.85)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 48px rgba(0, 0, 0, 0.35); padding: 1.25rem 1.4rem; } html.pm-100k-xp #hero .hero-stat-card .num { background: linear-gradient(90deg, var(--xp-cyan), var(--xp-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Brand row + 3D stage breathing room */ html.pm-100k-xp #hero .pm-noon-3d-stage { margin-block: 1.25rem 1.5rem; filter: drop-shadow(0 24px 48px rgba(0, 212, 238, 0.12)); } /* ── Scroll reveals ── */ html.pm-100k-xp .pm-xp-reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.75s var(--xp-ease), transform 0.75s var(--xp-ease), filter 0.75s var(--xp-ease); will-change: transform, opacity; } html.pm-100k-xp .pm-xp-reveal.is-in { opacity: 1; transform: none; filter: none; will-change: auto; } html.pm-100k-xp .pm-xp-reveal[data-xp-i] { transition-delay: calc(var(--xp-i, 0) * 70ms); } /* ── Sections: macro whitespace + double-bezel cards ── */ html.pm-100k-xp main > .section { padding-block: clamp(4.5rem, 10vw, 7.5rem); } html.pm-100k-xp main > .section .eyebrow { letter-spacing: 0.14em; } html.pm-100k-xp main > .section h2 { letter-spacing: -0.03em; text-wrap: balance; max-width: 22ch; margin-inline: auto; } html.pm-100k-xp .service-card, html.pm-100k-xp .video-card, html.pm-100k-xp .pm-academy-mod, html.pm-100k-xp .proof-card, html.pm-100k-xp .tier-card, html.pm-100k-xp .visual-world-card { position: relative; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); padding: 0.35rem; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); transition: transform 0.45s var(--xp-ease), border-color 0.45s var(--xp-ease), box-shadow 0.45s var(--xp-ease); } html.pm-100k-xp .service-card > *, html.pm-100k-xp .video-card > *, html.pm-100k-xp .pm-academy-mod > *, html.pm-100k-xp .proof-card > *, html.pm-100k-xp .tier-card > * { border-radius: calc(1.5rem - 0.35rem); } html.pm-100k-xp .service-card:hover, html.pm-100k-xp .video-card:hover, html.pm-100k-xp .pm-academy-mod:hover, html.pm-100k-xp .proof-card:hover, html.pm-100k-xp .tier-card:hover { transform: translateY(-4px); border-color: rgba(0, 212, 238, 0.28); box-shadow: 0 28px 72px rgba(0, 0, 0, 0.4), 0 0 32px rgba(0, 212, 238, 0.08); } /* ── Video theatre ── */ html.pm-100k-xp #videos { position: relative; } html.pm-100k-xp #videos::before { content: ""; position: absolute; inset: 10% 5% auto; height: 40%; background: radial-gradient(ellipse at center, rgba(232, 50, 138, 0.1), transparent 70%); pointer-events: none; filter: blur(30px); } html.pm-100k-xp #videos .video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } html.pm-100k-xp #videos .video-poster { position: relative; overflow: hidden; border-radius: 1.15rem; aspect-ratio: 16 / 9; } html.pm-100k-xp #videos .video-poster img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 0.7s var(--xp-ease); } html.pm-100k-xp #videos .video-card:hover .video-poster img { transform: scale(1.06); } html.pm-100k-xp #videos .play-btn { width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 8px rgba(0, 212, 238, 0.08); transition: transform 0.4s var(--xp-ease), box-shadow 0.4s var(--xp-ease); } html.pm-100k-xp #videos .video-card:hover .play-btn { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(0, 212, 238, 0.14), 0 0 28px rgba(0, 212, 238, 0.25); } /* UGC phone — premium stage */ html.pm-100k-xp #ugc-explainer .pm-ugc-player-wrap { margin-top: 2rem; filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.55)); } html.pm-100k-xp #ugc-explainer .pm-ugc-phone { transform: translateY(0); transition: transform 0.7s var(--xp-ease); } html.pm-100k-xp #ugc-explainer.is-xp-hot .pm-ugc-phone { transform: translateY(-6px); } /* Book / CTA band */ html.pm-100k-xp #book { position: relative; } html.pm-100k-xp #book .btn-primary { border-radius: 999px; min-height: 3.25rem; padding-inline: 1.75rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 0 40px rgba(0, 212, 238, 0.22); } /* Scroll progress accent */ html.pm-100k-xp .pm-scroll-progress { background: linear-gradient(90deg, var(--xp-cyan), var(--xp-magenta), var(--xp-gold)); height: 2px; opacity: 0.9; } /* Safari / Chrome smooth compositing */ html.pm-100k-xp .site-header, html.pm-100k-xp #hero .hero-cta .btn, html.pm-100k-xp .pm-xp-reveal { -webkit-transform: translateZ(0); transform: translateZ(0); } /* Mobile */ @media (max-width: 900px) { html.pm-100k-xp #videos .video-grid { grid-template-columns: 1fr; } html.pm-100k-xp .site-chrome { padding: 0.3rem 0.45rem 0; } html.pm-100k-xp .corp-bar { display: none; } html.pm-100k-xp .pm-xp-chrome-toggle { top: auto; bottom: 1rem; right: 0.75rem; font-size: 0.62rem; } html.pm-100k-xp #hero { min-height: auto; padding-top: 2rem; } } @media (prefers-reduced-motion: reduce) { html.pm-100k-xp .pm-xp-veil, html.pm-100k-xp .pm-xp-reveal, html.pm-100k-xp #hero .hero-stat-card, html.pm-100k-xp #hero .hero-convo-details, html.pm-100k-xp #hero .location-badge, html.pm-100k-xp .service-card, html.pm-100k-xp .video-card, html.pm-100k-xp .header-actions .btn-primary, html.pm-100k-xp #hero .eyebrow::before, html.pm-100k-xp #hero .hero-logo-img, html.pm-100k-xp #hero::before, html.pm-100k-xp .site-header .logo--neon::after, html.pm-100k-xp #hero .rd-plate-media::after, html.pm-100k-xp #hero .pm-noon-3d-stage.pm-neon-sign-stage::before, html.pm-100k-xp #hero .rd-halo, html.pm-100k-xp .pm-xp-spotlight { transition: none !important; animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; } html.pm-100k-xp #hero .hero-logo-img--neon, html.pm-100k-xp #hero .hero-logo-img, html.pm-100k-xp .site-header .logo-img--neon { filter: contrast(1.12) saturate(1.2) brightness(1.08) drop-shadow(0 0 10px rgba(0, 240, 255, 0.75)) drop-shadow(0 0 28px rgba(255, 46, 166, 0.4)) !important; } html.pm-100k-xp::before { display: none; } }