*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* === Refined Lime v2 — aligned with mobile app 2026-04-29 === */
/* Brand accents */
--lime: #B8E04C; /* primary brand — was #B8E04C */
--lime-rgb: 184,224,76; /* for rgba(var(--lime-rgb), .X) */
--mint: #6FD9C2; /* secondary — AI/CorteX, LIVE indicators */
--mint-rgb: 111,217,194;
/* Surfaces */
--bg: #0E1A1A; /* root background — forest void */
--surface: #16292A; /* cards, sheets */
--surface-hi:#1E3536; /* elevated surface */
--hairline: #274142; /* borders, dividers */
/* Status — 3px dots ONLY, never large fills */
--hot: #FF7E5F;
--warm: #F2C24A;
/* Text */
--text-hi: #ECF2EE; /* body / primary */
--text-md: #8FA09A; /* secondary */
--text-lo: #5A6B65; /* captions, placeholders */
/* On-color text (over filled CTAs) */
--on-primary: #1F3008; /* on lime */
--on-secondary: #0A4438; /* on mint */
/* Surface-deep — slightly darker than --bg, used for footer/form-input backgrounds. */
--surface-deep: #0A1718;
}
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background: var(--surface); color: var(--text-hi); overflow-x: hidden; }
/* Force consistent Bricolage Grotesque rendering across heading sizes — disables auto opsz so big and small headings match. 2026-04-29 */
h1, h2, h3, h4, .section-title, .hero h1, .exh-h2, .vis-h2, .org-h2 { font-optical-sizing: none; font-variation-settings: 'opsz' 48; }
/* B1 — noise grain. Single SVG layer, fixed full-viewport, no compounding GPU effects. Opacity 0.10 sits at the visibility floor (per parked-backgrounds memory: <10% reads as no pattern). 2026-04-29 Session 2. */
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.10;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size: 200px 200px; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 3px; }
/* === FANCY POLISH (2026-04-29) — safe-fancy enhancements per /simplify ruleset.
NO backdrop-filter, NO infinite animations, NO canvases. Hover-only transitions.
Apply to all role pages (visitor=lime, exhibitor=cyan, organiser=amber) for consistency. === */
/* Subtle dot-grid texture — pseudo-element overlay, opacity ~6%. Add `dotgrid-section` class to a positioned section. */
.dotgrid-section { position: relative; isolation: isolate; }
.dotgrid-section > * { position: relative; z-index: 1; }
.dotgrid-section::before { content:''; position:absolute; inset:0; pointer-events:none; z-index:0; background-size: 32px 32px; }
.dotgrid-lime::before { background-image: radial-gradient(rgba(184,224,76,0.18) 1.4px, transparent 1.4px); }
.dotgrid-amber::before { background-image: radial-gradient(rgba(242,194,74,0.18) 1.4px, transparent 1.4px); }
.dotgrid-white::before { background-image: radial-gradient(rgba(255,255,255,0.12) 1.4px, transparent 1.4px); }
/* Text glow — 2-layer text-shadow, dialled back per Round 2 feedback (was too intense).
Tight 24px close halo + soft 48px ambient halo. Keeps premium feel without overwhelming. */
.glow-lime { text-shadow: 0 0 24px rgba(184,224,76,0.40), 0 0 48px rgba(184,224,76,0.12) !important; }
.glow-cyan { text-shadow: 0 0 24px rgba(111,217,194,0.40), 0 0 48px rgba(111,217,194,0.12) !important; } /* alias mint */
.glow-mint { text-shadow: 0 0 24px rgba(111,217,194,0.40), 0 0 48px rgba(111,217,194,0.12) !important; }
.glow-amber { text-shadow: 0 0 24px rgba(242,194,74,0.40), 0 0 48px rgba(242,194,74,0.10) !important; }
/* B5 — top-edge specular gloss on role cards. The role classes (.vis-card, .exh-card, .org-card)
already have position:relative + overflow:hidden defined inline per page, so ::before composes cleanly.
This is the single thin highlight at the top edge — pure additive layer, no card geometry change. */
.vis-card::before, .exh-card::before, .org-card::before {
content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,224,76,0.32) 50%, transparent);
pointer-events: none; z-index: 2;
}
.exh-card::before { background: linear-gradient(90deg, transparent, rgba(111,217,194,0.32) 50%, transparent); }
/* Home role cards (data-role attribute) get role-tinted gloss */
.role-card[data-role="visitor"]::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,224,76,0.35) 50%, transparent); pointer-events: none; z-index: 2; }
.role-card[data-role="exhibitor"]::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(111,217,194,0.35) 50%, transparent); pointer-events: none; z-index: 2; }
.role-card[data-role="organiser"]::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(242,194,74,0.35) 50%, transparent); pointer-events: none; z-index: 2; }
.role-card { position: relative; overflow: hidden; }
/* Hover lift for cards — single transition, hover-only GPU work. */
.card-hover { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); }
.card-hover-lime:hover { border-color: rgba(184,224,76,0.5) !important; box-shadow: 0 8px 28px rgba(184,224,76,0.10); }
.card-hover-cyan:hover { border-color: rgba(46,229,255,0.5) !important; box-shadow: 0 8px 28px rgba(46,229,255,0.12); }
.card-hover-amber:hover { border-color: rgba(255,181,71,0.5) !important; box-shadow: 0 8px 28px rgba(255,181,71,0.12); }
/* Section accent divider — soft gradient line. Use as between sections. */
.divider { height: 1px; max-width: 800px; margin: 0 auto; }
.divider-lime { background: linear-gradient(90deg, transparent, rgba(184,224,76,0.08) 30%, rgba(184,224,76,0.32) 50%, rgba(184,224,76,0.08) 70%, transparent); }
.divider-cyan { background: linear-gradient(90deg, transparent, rgba(46,229,255,0.08) 30%, rgba(46,229,255,0.32) 50%, rgba(46,229,255,0.08) 70%, transparent); }
.divider-amber { background: linear-gradient(90deg, transparent, rgba(255,181,71,0.08) 30%, rgba(255,181,71,0.32) 50%, rgba(255,181,71,0.08) 70%, transparent); }
.divider-mint { background: linear-gradient(90deg, transparent, rgba(111,217,194,0.08) 30%, rgba(111,217,194,0.40) 50%, rgba(111,217,194,0.08) 70%, transparent); }
/* B9 — live-dot radar-ping expanding ring. Generic .live-dot utility + retrofit on existing .occ-live-dot.
Single animated pseudo, single keyframe — no GPU compounding. Honors prefers-reduced-motion. 2026-04-29 Session 5. */
.live-dot, .occ-live-dot { position: relative; }
.live-dot::after, .occ-live-dot::after {
content: ''; position: absolute; inset: -3px;
border-radius: 50%; background: var(--lime);
opacity: 0.6; pointer-events: none;
animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
0% { transform: scale(0.8); opacity: 0.6; }
100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot::after, .occ-live-dot::after { animation: none; opacity: 0; }
}
/* === END FANCY POLISH === */
/* NAV */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 20px 60px;
background: rgba(4,10,12,0.92); backdrop-filter: blur(24px) saturate(1.4);
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: padding 0.3s;
}
nav.scrolled { padding: 14px 60px; background: rgba(3,7,9,0.97) !important; }
#nav-hamburger { display: none; }
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 800; font-size: 1.5rem; text-decoration: none; color: var(--text-hi); margin-right: 32px; }
/* Nav logo image — sized via CSS so scrolled-nav and mobile rules can override.
Explicit aspect-ratio + object-fit + max-width:none guards against parent flex/img-resize edge cases.
Source PNG is 327x80 (ratio ~4.09:1). 2026-04-29 Session 2/3 fixes. */
.nav-logo {
height: 40px;
width: auto;
max-width: none;
aspect-ratio: 327 / 80;
display: block;
object-fit: contain;
object-position: left center;
image-rendering: auto;
flex-shrink: 0;
transition: height 0.3s ease;
}
nav.scrolled .nav-logo { height: 32px; }
@media (max-width: 760px) { .nav-logo { height: 32px; } }
@media (max-width: 380px) { .nav-logo { height: 28px; } }
.logo .x { color: var(--lime); }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links > a, .nav-dropdown-trigger { font-size: 0.78rem; font-weight: 800; color: #ECF2EE; text-decoration: none; letter-spacing: 0.03em; text-transform: uppercase; transition: color 0.2s; }
.nav-links > a:hover, .nav-dropdown-trigger:hover { color: var(--lime); }
.nav-cta { background: var(--lime) !important; color: var(--surface) !important; padding: 10px 24px; border-radius: 6px; font-weight: 700 !important; }
.nav-cta:hover { box-shadow: 0 8px 24px rgba(184,224,76,0.35) !important; }
.nav-book-demo { border: 1.5px solid rgba(184,224,76,0.5) !important; color: var(--lime) !important; padding: 9px 22px; border-radius: 6px; font-weight: 700 !important; transition: border-color 0.2s, box-shadow 0.2s !important; }
.nav-book-demo:hover { border-color: var(--lime) !important; box-shadow: 0 4px 16px rgba(184,224,76,0.2) !important; }
/* COMPANY DROPDOWN */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 0; }
.nav-chevron { transition: transform 0.25s ease; }
.nav-dropdown.open .nav-chevron { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); background: rgba(9,26,38,0.97); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 8px 0; min-width: 220px; z-index: 1000; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; box-shadow: 0 24px 64px rgba(0,0,0,0.5); }
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown-menu a { display: block; padding: 11px 20px; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.78); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.15s, background 0.15s; white-space: nowrap; }
.nav-dropdown-menu a:hover { color: var(--lime); background: rgba(184,224,76,0.05); }
.nav-dropdown-menu .nav-section-label { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(184,224,76,0.7); padding: 10px 20px 4px; pointer-events: none; user-select: none; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 6px; }
.nav-dropdown-menu .nav-section-label:first-child { border-top: none; margin-top: 0; padding-top: 8px; }
/* === SHARED ORGANISER + PERSONA-PAGE PRIMITIVES === */
/* Used by organiser.html, ceo.html, event-director.html, operations.html. */
.org-accent { color: var(--lime); }
.org-card { position:relative; overflow:hidden; background:radial-gradient(circle at 0% 0%,rgba(184,224,76,0.05) 0%,transparent 40%),linear-gradient(180deg,#1A2D2E 0%,#142426 100%); border:1px solid rgba(184,224,76,0.22); border-top:4px solid var(--lime); border-radius:14px; padding:32px 28px; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.org-card::after { content:''; position:absolute; bottom:-50px; right:-50px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(184,224,76,0.05) 0%,transparent 70%); pointer-events:none; }
.org-card:hover { transform: translateY(-4px); border-color: rgba(184,224,76,0.5); box-shadow: 0 12px 32px rgba(184,224,76,0.15); }
.org-card > * { position:relative; z-index:1; }
.org-eyebrow { display:inline-flex; align-items:center; gap:14px; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--lime); margin-bottom:14px; }
.org-eyebrow::before, .org-eyebrow::after { content:''; flex:0 0 28px; height:1px; background:linear-gradient(90deg, transparent, rgba(184,224,76,0.65), transparent); }
.org-h2 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:clamp(1.8rem, 3.5vw, 2.6rem); color:#ECF2EE; line-height:1.15; letter-spacing:-0.02em; margin:0 0 14px; }
.org-sub { font-size:1rem; color:rgba(255,255,255,0.6); line-height:1.7; max-width:640px; margin:0 auto; font-weight:300; }
.org-section { padding:90px 60px; }
@media(max-width:760px){ .org-section { padding:60px 24px; } }
/* === SITE-WIDE MOBILE RESPONSIVE LAYER === */
/* Most sections use inline grid-template-columns and padding. These overrides
collapse multi-col grids and reduce paddings without requiring per-page edits. */
/* Tablets: 3-col → 2-col where it makes sense */
@media (max-width: 900px) {
section > div[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}
/* Phones: collapse to single column */
@media (max-width: 760px) {
/* All inline 2-col & 3-col grids inside sections → 1 col */
section [style*="grid-template-columns:1fr 1fr 1fr"],
section [style*="grid-template-columns:1.2fr 1fr"],
section [style*="grid-template-columns:1fr 1.2fr"],
section [style*="grid-template-columns:1.7fr 1fr"],
section [style*="grid-template-columns:1fr 1.7fr"] {
grid-template-columns: 1fr !important;
}
/* Hero sections: reduce excessive top padding */
section[id="home"] { padding: 100px 24px 56px !important; }
/* Hero H1 sane mobile size */
section[id="home"] h1 { font-size: clamp(1.9rem, 7vw, 2.6rem) !important; line-height: 1.15 !important; }
/* Generic section padding reductions for inline-styled paddings */
section[style*="padding:140px 60px"],
section[style*="padding:120px 60px"],
section[style*="padding:110px 60px"],
section[style*="padding:100px 60px"],
section[style*="padding:96px 60px"],
section[style*="padding:90px 60px"] { padding: 70px 20px !important; }
/* Hero card on mobile: full width, smaller paddings */
.org-hero-card { padding: 22px 20px !important; box-sizing: border-box; }
.org-hero-card-num { font-size: 2.4rem !important; }
.org-hero-card-grid { gap: 10px !important; }
/* Hero buttons: stack & fill */
.hero-actions { flex-direction: column !important; align-items: stretch !important; }
.hero-actions > a { justify-content: center !important; }
/* Persona band cards stack */
.persona-band-cards { grid-template-columns: 1fr !important; }
.persona-band { padding: 60px 24px !important; }
/* Cinema mockups never overflow viewport */
.web-mockup, .web-mockup-frame { max-width: 100% !important; box-sizing: border-box; }
/* H2 / H3 sane mobile sizes for org-pages */
.org-h2 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }
}
/* Very narrow phones: extra collapse */
@media (max-width: 480px) {
.org-hero-card-grid { grid-template-columns: 1fr !important; }
section[id="home"] { padding: 96px 18px 48px !important; }
.org-hero-card-num { font-size: 2rem !important; }
}
.org-chapter { position:relative; max-width:1100px; margin:0 auto 48px; text-align:center; }
.org-chapter-num { position:absolute; top:-8px; left:0; font-family:'Bricolage Grotesque',sans-serif; font-weight:900; font-size:clamp(5rem, 12vw, 10rem); line-height:0.85; letter-spacing:-0.04em; background: linear-gradient(160deg, rgba(184,224,76,0.32) 0%, rgba(111,217,194,0.18) 60%, transparent 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; pointer-events:none; user-select:none; z-index:0; }
.org-chapter > .org-eyebrow, .org-chapter > .org-h2, .org-chapter > .org-sub { position:relative; z-index:1; }
@media(max-width:900px) { .org-chapter-num { font-size:6rem; opacity:0.6; } }
/* Cross-page persona band (shared by ceo / event-director / operations) */
.persona-band { padding:80px 60px; background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(184,224,76,0.08) 0%,transparent 60%),#0E1A1A; border-top:1px solid rgba(184,224,76,0.12); }
.persona-band-head { max-width:1100px; margin:0 auto 36px; text-align:center; }
.persona-band-cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1100px; margin:0 auto; }
.persona-card { padding:28px; background:linear-gradient(180deg,#1A2D2E 0%,#142426 100%); border:1px solid rgba(184,224,76,0.22); border-top:3px solid var(--lime); border-radius:14px; transition: transform 0.3s ease, border-color 0.3s ease; }
.persona-card:hover { transform: translateY(-4px); border-color: rgba(184,224,76,0.5); }
.persona-card-icon { width:36px; height:36px; margin-bottom:14px; color:var(--lime); }
.persona-card-tag { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--lime); margin-bottom:8px; }
.persona-card-title { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:1.15rem; color:#ECF2EE; margin:0 0 8px; }
.persona-card-body { font-size:0.9rem; color:rgba(255,255,255,0.6); line-height:1.55; margin:0 0 16px; }
.persona-card-cta { display:inline-flex; align-items:center; gap:6px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.85rem; color:var(--lime); text-decoration:none; }
@media(max-width:760px) { .persona-band-cards { grid-template-columns:1fr; } }
/* HERO */
.hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 60px 80px; position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(111,217,194,0.12) 0%, transparent 70%); }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 80px 80px; }
@keyframes gridMove { from { background-position: 0 0; } to { background-position: 60px 60px; } }
.blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.blob-1 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(111,217,194,0.22) 0%, transparent 70%); top: -200px; right: -150px; animation: float1 10s ease-in-out infinite; }
.blob-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(111,217,194,0.1) 0%, transparent 70%); bottom: -100px; left: 0; animation: float2 12s ease-in-out infinite; }
.blob-3 { position:absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(17,42,51,0.5) 0%, transparent 70%); top: 20%; left: 30%; pointer-events:none; filter:blur(80px); }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-20px)} }
.hero-content { position: relative; z-index: 1; max-width: 900px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(111,217,194,0.1); border: 1px solid rgba(184,224,76,0.2); padding: 7px 18px; border-radius: 100px; margin-bottom: 40px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(184,224,76,0.85); animation: fadeUp 0.8s ease both; }
.hero-badge-dot { width: 6px; height: 6px; background: var(--lime); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
.hero h1 { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 800; font-size: clamp(2.4rem, 5.5vw, 5.5rem); line-height: 1.08; letter-spacing: -0.02em; animation: fadeUp 0.8s 0.15s ease both;
color: #ECF2EE;
text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 0 rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
}
.hero h1 .accent { color: #ECF2EE; display: block; font-size: 0.62em; text-shadow: 0 2px 4px rgba(0,0,0,0.5); letter-spacing: -0.01em; margin-top: 4px; }
.hero-sub { margin-top: 28px; max-width: 600px; font-size: 1.05rem; font-weight: 300; color: #ECF2EE !important; line-height: 1.8; letter-spacing: 0.01em; animation: fadeUp 0.8s 0.3s ease both; }
.hero-actions { margin-top: 48px; display: flex; gap: 16px; align-items: center; animation: fadeUp 0.8s 0.45s ease both; }
.btn-primary { background: var(--lime); color: var(--surface); padding: 16px 36px; border-radius: 8px; font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s, box-shadow 0.2s; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(184,224,76,0.4); }
.btn-secondary { border: 1px solid rgba(255,255,255,0.2); color: var(--text-hi); padding: 16px 36px; border-radius: 8px; font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 600; font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: border-color 0.2s, background 0.2s; }
.btn-secondary:hover { border-color: var(--lime); background: rgba(111,217,194,0.1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* MARQUEE */
/* A5 (2026-04-29): inverted from lime fill to dark band with lime text — refined editorial look. */
.marquee-wrap { overflow: hidden; background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 18px 0; position: relative; }
.marquee-wrap::before, .marquee-wrap::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,224,76,0.4) 50%, transparent); pointer-events: none; }
.marquee-wrap::before { top: 0; }
.marquee-wrap::after { bottom: 0; }
.marquee-track { display: flex; animation: marquee 25s linear infinite; white-space: nowrap; }
.marquee-track span { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); padding: 0 32px; }
.marquee-item::after { content: '✦'; margin-left: 32px; color: var(--lime); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* SECTION BASE */
section { padding: 100px 60px; }
.section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(184,224,76,0.7); margin-bottom: 20px; }
.section-label::before { content: ''; display: block; width: 20px; height: 1.5px; background: rgba(184,224,76,0.5); }
.section-title { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.section-title .accent { color: var(--lime); }
.section-desc { font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 520px; margin-top: 16px; letter-spacing: 0.01em; }
/* SEGMENTS */
#segments { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); }
.segments-header .section-label { justify-content: center; }
.segments-header .section-label::before { display: none; }
.segments-header .section-desc { margin: 12px auto 0; text-align: center; }
@keyframes chipFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes scanLine { 0%{top:8px;opacity:1} 100%{top:62px;opacity:0.3} }
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(184,224,76,0.6); }
70% { box-shadow: 0 0 0 7px rgba(184,224,76,0); }
100%{ box-shadow: 0 0 0 0 rgba(184,224,76,0); }
}
.features-section.alt { background: var(--bg); }
.features-section.alt .fcard { background: var(--surface); }
/* ABOUT */
#about { background: var(--surface); }
@keyframes rotateBadge { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
/* TESTIMONIALS */
#testimonials { background: var(--bg); }
.testimonials-header .section-label { justify-content: center; }
.testimonials-header .section-label::before { display: none; }
.testi-card { background: var(--surface-deep); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 32px; transition: border-color 0.3s, transform 0.3s; }
.testi-card:hover { border-color: rgba(184,224,76,0.25); transform: translateY(-4px); }
/* CONTACT */
#contact { background: var(--surface); }
/* FOOTER */
footer { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.04); padding: 60px 60px 32px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; }
.footer-brand .logo { margin-bottom: 16px; display: inline-flex; }
.footer-brand p { font-size: 0.88rem; font-weight: 300; color: rgba(255,255,255,0.6); max-width: 260px; line-height: 1.65; }
.footer-col h4 { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--mint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col a { display: block; font-size: 0.88rem; font-weight: 300; color: rgba(255,255,255,0.5); text-decoration: none; margin-bottom: 10px; transition: color 0.2s; }
.footer-col a:hover { color: var(--text-hi); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 0.82rem; color: rgba(255,255,255,0.5); }
.footer-socials { display: flex; gap: 12px; }
/* PRICING */
#pricing { background: var(--bg); border-top: 1px solid rgba(255,255,255,0.04); }
@media(max-width:900px){ .pricing-grid { grid-template-columns:1fr; } }
/* RESPONSIVE */
@media (max-width: 900px) {
nav { padding: 18px 24px; }
.nav-links { display: none; }
/* Mobile nav: show when hamburger toggled */
.nav-links.open {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100vh;
background: rgba(6,14,24,0.98);
backdrop-filter: blur(20px);
padding: 80px 28px 40px;
gap: 6px;
z-index: 9999;
overflow-y: auto;
box-shadow: -10px 0 40px rgba(0,0,0,0.5);
border-left: 1px solid rgba(184,224,76,0.1);
animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.nav-links.open > a,
.nav-links.open .nav-dropdown-trigger {
font-size: 0.95rem;
padding: 14px 16px;
border-radius: 10px;
width: 100%;
text-align: left;
transition: background 0.2s;
}
.nav-links.open > a:hover,
.nav-links.open .nav-dropdown-trigger:hover {
background: rgba(184,224,76,0.06);
}
.nav-links.open .nav-book-demo {
margin-top: 12px;
text-align: center;
padding: 14px 20px !important;
}
.nav-links.open .nav-cta {
text-align: center;
padding: 14px 20px !important;
}
.nav-links.open .nav-dropdown {
width: 100%;
}
.nav-links.open .nav-dropdown-menu {
position: static !important;
background: rgba(255,255,255,0.03) !important;
border: none !important;
border-radius: 8px !important;
margin-top: 4px !important;
padding: 4px 0 !important;
box-shadow: none !important;
display: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
left: auto !important;
top: auto !important;
min-width: 0 !important;
width: 100% !important;
}
.nav-links.open .nav-dropdown.open .nav-dropdown-menu {
display: block !important;
}
.nav-links.open .nav-dropdown-menu a {
padding: 12px 24px;
font-size: 0.85rem;
}
/* Hamburger icon animation — 44x44 touch target (iOS min) */
#nav-hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 12px;
min-width: 44px;
min-height: 44px;
z-index: 10000;
position: relative;
-webkit-tap-highlight-color: transparent;
}
#nav-hamburger span {
width: 22px;
height: 2px;
background: #ECF2EE;
border-radius: 2px;
transition: all 0.3s ease;
}
#nav-hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
#nav-hamburger.open span:nth-child(2) {
opacity: 0;
}
#nav-hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Language selector in mobile menu */
.nav-links.open .lang-selector {
margin-top: 16px;
width: 100%;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 16px;
}
section, .features-section { padding: 70px 24px; }
.hero { padding: 100px 24px 60px; }
.hero-stats { gap: 30px; flex-wrap: wrap; }
.segments-grid, .features-grid, .testi-grid { grid-template-columns: 1fr; }
.about-inner, .contact-inner { grid-template-columns: 1fr; }
.about-visual { display: none; }
.form-row { grid-template-columns: 1fr; }
footer { padding: 40px 24px 24px; }
.footer-top { flex-direction: column; }
.footer-links { flex-wrap: wrap; gap: 32px; }
}
/* ── SCROLL REVEAL ── */
/* Animations: purely CSS, content always visible */
/* No animation on .sr — content always visible. Hero animates independently. */
.sr { opacity: 1; transform: none; }
.sr.sr-left { transform: translateX(-44px); }
.sr.sr-right { transform: translateX(44px); }
.sr.sr-scale { transform: scale(0.93); }
.sr.in { opacity: 1 !important; transform: none !important; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
/* ── PARTICLES ── */
#particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
@keyframes particleFloat { 0%{transform:translateY(0) rotate(0deg);opacity:0} 10%{opacity:0.4} 90%{opacity:0.1} 100%{transform:translateY(-110vh) rotate(720deg);opacity:0} }
/* ── SHIMMER ── */
.btn-primary, .phase-label { position: relative; overflow: hidden; }
.btn-primary::after, .phase-label::after { content:''; position:absolute; top:0; left:-100%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent); transform:skewX(-18deg); animation:shimmer 3.5s ease infinite; }
@keyframes shimmer { 0%{left:-100%} 40%,100%{left:160%} }
/* ── PROGRESS BAR ── */
#page-progress { position:fixed; top:0; left:0; z-index:9999; height:3px; width:0%; background:var(--lime); box-shadow:0 0 10px rgba(184,224,76,0.7); transition:width 0.15s; }
/* ── STAGGER ── */
.stagger > *:nth-child(1){transition-delay:0s}
.stagger > *:nth-child(2){transition-delay:0.08s}
.stagger > *:nth-child(3){transition-delay:0.16s}
.stagger > *:nth-child(4){transition-delay:0.24s}
.stagger > *:nth-child(5){transition-delay:0.32s}
.stagger > *:nth-child(6){transition-delay:0.40s}
.pain-thead .pain-col { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.pain-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
.pain-group:last-child { border-bottom: none; }
.pain-row { display: grid; grid-template-columns: 100px 1fr 1.4fr 160px; gap: 0; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.04); align-items: center; transition: background 0.2s; }
.pain-row:last-child { border-bottom: none; }
.pain-row:hover { background: rgba(255,255,255,0.02); }
.pain-col { font-size: 0.82rem; color: rgba(255,255,255,0.65); line-height: 1.5; padding-right: 16px; }
.pain-col strong { color: rgba(255,255,255,0.9); font-weight: 600; display: block; }
.pain-sub { font-size: 0.75rem; color: rgba(255,255,255,0.55); }
.pain-col--result { font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.pain-metric { color: var(--lime); font-weight: 700; font-size: 0.92rem; }
.pain-badge { display: inline-block; padding: 3px 9px; border-radius: 100px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pain-badge--data { background: rgba(100,180,255,0.12); color: #64b4ff; border: 1px solid rgba(100,180,255,0.25); }
.pain-badge--crm { background: rgba(184,224,76,0.10); color: var(--lime); border: 1px solid rgba(184,224,76,0.25); }
.pain-badge--roi { background: rgba(255,165,80,0.12); color: #ffa550; border: 1px solid rgba(255,165,80,0.25); }
.pain-badge--sec { background: rgba(180,120,255,0.12); color: #b478ff; border: 1px solid rgba(180,120,255,0.25); }
@media (max-width: 900px) { .pain-thead { display: none; } .pain-row { grid-template-columns: 1fr; gap: 6px; } }
/* ══════════════════════════════════════════════════════
PREMIUM CINEMATIC DESIGN SYSTEM
══════════════════════════════════════════════════════ */
/* Deep atmospheric background with subtle radial depth */
body { background: #0D2230; }
/* Hero 3D metallic text effect */
.hero h1 {
color: transparent !important;
background: linear-gradient(
160deg,
#c5e8de 0%,
#7ec8a8 18%,
#3d8f6e 32%,
#205c43 45%,
#3d8f6e 58%,
#7ec8a8 72%,
#a8d8c8 85%,
#e8f8f0 100%
);
-webkit-background-clip: text;
background-clip: text;
text-shadow: none !important;
filter: drop-shadow(0 4px 24px rgba(0,0,0,0.7)) drop-shadow(0 1px 0 rgba(255,255,255,0.05));
}
.hero h1 .accent {
color: transparent !important;
background: linear-gradient(150deg, #e8ff60 0%, #B8E04C 40%, #a8d420 70%, #B8E04C 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow: none !important;
filter: drop-shadow(0 0 40px rgba(184,224,76,0.35)) drop-shadow(0 4px 20px rgba(0,0,0,0.6));
}
/* Section titles — metallic teal gradient */
.section-title {
background: linear-gradient(145deg, #d0ece4 0%, #8ecfb2 35%, #5aad88 60%, #8ecfb2 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-title .accent {
background: linear-gradient(140deg, #e8ff60 0%, #B8E04C 50%, #b8e828 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Hero sub — slightly more visible */
.hero-sub { color: rgba(255,255,255,0.42) !important; }
/* Deep cinematic section backgrounds */
section { background: #0D2230; }
#segments { background: #112A33 !important; }
#pricing { background: #112A33 !important; }
#why { background: #0D2230 !important; }
#about { background: linear-gradient(180deg, #112A33 0%, #0D2230 100%) !important; }
#contact { background: linear-gradient(180deg, #112A33 0%, #0D2230 100%) !important; }
footer { background: #112A33 !important; }
/* Marquee — keep lime strip as accent */
.marquee-wrap { background: var(--surface); }
/* Hero badge — more ghost-like */
.hero-badge {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: rgba(184,224,76,0.7) !important;
letter-spacing: 0.16em;
}
/* Primary button — sharper */
.btn-primary {
background: linear-gradient(135deg, #d4ff40 0%, #B8E04C 50%, #b0d820 100%) !important;
box-shadow: 0 0 0 1px rgba(184,224,76,0.2), 0 4px 24px rgba(184,224,76,0.15) !important;
letter-spacing: 0.02em;
}
.btn-primary:hover {
box-shadow: 0 0 0 1px rgba(184,224,76,0.4), 0 8px 40px rgba(184,224,76,0.3) !important;
}
/* Cards — deep glass morphism */
.fcard, .segment-card, .price-card, .testi-card, .why-cat {
background: linear-gradient(145deg, rgba(10,20,26,0.98) 0%, rgba(4,8,10,0.99) 100%) !important;
border-color: rgba(255,255,255,0.045) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.5) !important;
}
/* Nav — ultra-dark glass */
nav {
background: rgba(17,42,51,0.97) !important;
border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
/* Hero — deep atmospheric background */
.hero {
background:
radial-gradient(ellipse 70% 50% at 65% 35%, rgba(25,70,52,0.18) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 20% 80%, rgba(184,224,76,0.04) 0%, transparent 60%),
#0D2230 !important;
}
/* Grid — barely visible, premium */
.hero-grid {
background-image:
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px) !important;
background-size: 100px 100px !important;
}
/* Section label — refined */
.section-label { color: rgba(184,224,76,0.55) !important; letter-spacing: 0.2em; }
.section-label::before { background: rgba(184,224,76,0.35) !important; }
/* Scrollbar */
::-webkit-scrollbar-track { background: #112A33; }
::-webkit-scrollbar-thumb { background: rgba(184,224,76,0.4); }
/* Nav CTA — lime glow */
.nav-cta { box-shadow: 0 0 20px rgba(184,224,76,0.15) !important; }
.nav-cta:hover { box-shadow: 0 0 32px rgba(184,224,76,0.3) !important; }
/* Hero blob — more atmospheric */
.blob-1 {
background: radial-gradient(circle, rgba(25,75,55,0.22) 0%, transparent 65%) !important;
width: 800px !important; height: 800px !important;
}
.blob-2 {
background: radial-gradient(circle, rgba(184,224,76,0.045) 0%, transparent 65%) !important;
}
/* Page progress bar */
#page-progress { background: linear-gradient(90deg, #B8E04C, #a8d420) !important; }
/* Testimonials quote mark */
.testi-card::before { color: rgba(111,217,194,0.1) !important; }
/* Footer links */
.footer-col h4 { color: rgba(111,217,194,0.8) !important; }
/* ── HERO SPLIT ── */
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; max-width: 1400px; }
.hero-photo-panel {
position: relative; border-radius: 24px; overflow: hidden;
height: 580px;
box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
}
.hero-photo-panel img {
width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
display: block;
filter: brightness(0.68) saturate(0.85);
}
.hero-photo-panel iframe {
width: 100%; height: 100%; border: none; display: block;
background: transparent;
pointer-events: none;
}
.hero-photo-panel::after {
content: '';
position: absolute; inset: 0;
background: none;
}
/* Floating stat chip on photo */
.hero-photo-chip {
position: absolute; z-index: 3;
background: rgba(7,14,18,0.88);
border: 1px solid rgba(184,224,76,0.25);
backdrop-filter: blur(12px);
border-radius: 14px;
padding: 12px 16px;
display: flex; align-items: center; gap: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.hero-photo-chip .chip-num { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--lime); line-height: 1; }
.hero-photo-chip .chip-lbl { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; }
.hero-photo-chip--tl { top: 24px; left: 24px; }
.hero-photo-chip--br { bottom: 28px; right: 24px; }
.hero-photo-chip--bl { bottom: 28px; left: 24px; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex-shrink: 0; box-shadow: 0 0 8px rgba(184,224,76,0.6); animation: pulse 2s infinite; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .hero-photo-panel { height: 280px; } }
/* ── WHY SECTION BG IMAGE ── */
.why-bg-image {
position: absolute; inset: 0; z-index: 0;
background-image: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1920&q=80');
background-size: cover; background-position: center 40%;
opacity: 0.06;
filter: grayscale(1);
}
/* ── ABOUT PHOTO ── */
.about-photo {
position: relative; border-radius: 20px; overflow: hidden;
height: 520px;
box-shadow: 0 32px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
}
.about-photo img {
width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
display: block;
filter: brightness(0.65) saturate(0.85);
}
.about-photo::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(145deg, rgba(7,14,18,0.3) 0%, transparent 60%, rgba(7,14,18,0.6) 100%);
}
/* ── FEATURE SECTION BANNER ── */
.feature-banner {
width: 100%; height: 260px; border-radius: 20px; overflow: hidden;
position: relative; margin-bottom: 56px;
box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
}
.feature-banner img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.6) saturate(0.85);
}
.feature-banner-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(17,42,51,0.9) 0%, rgba(4,8,10,0.72) 40%, rgba(17,42,51,0.9) 100%); }
.feature-banner-text {}
.feature-banner-text .section-label { margin-bottom: 10px; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }
.feature-banner-text h2 { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.1; text-shadow: 0 4px 24px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,1); }
/* ── TESTIMONIALS BG ── */
.testi-bg {
position: absolute; inset: 0; z-index: 0;
background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1920&q=80');
background-size: cover; background-position: center 30%;
opacity: 0.055;
filter: grayscale(1);
}
#testimonials { position: relative; overflow: hidden; }
/* ── PHOTO SEGMENT CARDS ── */
.seg-photo-card {
position: relative; border-radius: 20px; overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s, border-color 0.35s;
cursor: default;
}
.seg-photo-card:hover { transform: translateY(-8px); border-color: rgba(184,224,76,0.25); box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,224,76,0.08); }
.seg-photo-card__img { width:100%; height:260px; object-fit:cover; display:block; filter:brightness(0.55) saturate(0.85); transition: transform 0.5s ease, filter 0.4s; }
.seg-photo-card:hover .seg-photo-card__img { transform:scale(1.04); filter:brightness(0.45) saturate(0.8); }
.seg-photo-card__overlay {
position:absolute; inset:0;
background: linear-gradient(to bottom, transparent 35%, rgba(4,8,10,0.97) 100%);
}
.seg-photo-card__body { position:absolute; bottom:0; left:0; right:0; padding:28px 28px 24px; }
.seg-photo-card__tag {
display:inline-flex; align-items:center; gap:6px;
background:rgba(184,224,76,0.1); border:1px solid rgba(184,224,76,0.2);
color:var(--lime); font-size:0.65rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
padding:4px 10px; border-radius:20px; margin-bottom:12px;
}
.seg-photo-card__title { font-family:'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:800; font-size:1.4rem; color:#ECF2EE; letter-spacing:-0.02em; margin-bottom:8px; }
.seg-photo-card__desc { font-size:0.82rem; color:rgba(255,255,255,0.5); line-height:1.55; margin-bottom:16px; }
/* Phase tabs */
.seg-phases { display:flex; gap:0; border:1px solid rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; margin-bottom:16px; }
.seg-phase { flex:1; padding:7px 6px; text-align:center; font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.03); border-right:1px solid rgba(255,255,255,0.06); transition:all 0.2s; cursor:pointer; }
.seg-phase:last-child { border-right:none; }
.seg-phase.active { color:var(--lime); background:rgba(111,217,194,0.12); }
.seg-phase-content { display:none; }
.seg-phase-content.active { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; }
.seg-phase-pill { font-size:0.68rem; font-weight:600; color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:20px; padding:3px 9px; }
.seg-photo-card__link {
display:inline-flex; align-items:center; gap:6px;
font-size:0.78rem; font-weight:700; color:rgba(184,224,76,0.8); letter-spacing:0.04em;
text-decoration:none; transition:color 0.2s, gap 0.2s;
}
.seg-photo-card__link:hover { color:var(--lime); gap:10px; }
.seg-photo-card__link svg { width:14px; height:14px; transition: transform 0.2s; }
.seg-photo-card:hover .seg-photo-card__link svg { transform:translateX(4px); }
@media (max-width:900px) { .seg-photo-card__img { height:200px; } }
/* ── COMPACT FEATURE TABS ── */
.ftabs-wrap { max-width: 1200px; margin: 0 auto; }
.ftabs-nav { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 40px; }
.ftab-btn {
padding: 14px 28px; font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.55); background: none; border: none; cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s;
}
.ftab-btn.active { color: var(--lime); border-bottom-color: var(--lime); }
.ftab-btn:hover:not(.active) { color: rgba(255,255,255,0.7); }
.ftab-panel { display: none; }
.ftab-panel.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fcard-compact {
background: linear-gradient(145deg, rgba(10,20,26,0.98), rgba(4,8,10,0.99));
border: 1px solid rgba(255,255,255,0.05); border-radius: 14px;
padding: 20px 20px; transition: border-color 0.25s, transform 0.25s;
}
.fcard-compact:hover { border-color: rgba(184,224,76,0.18); transform: translateY(-3px); }
.fcard-compact__icon { width: 36px; height: 36px; background: rgba(184,224,76,0.07); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--lime); margin-bottom: 12px; }
.fcard-compact__icon svg { width: 18px; height: 18px; }
.fcard-compact__name { font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight: 700; font-size: 0.88rem; color: rgba(255,255,255,0.9); margin-bottom: 6px; line-height: 1.3; }
.fcard-compact__desc { font-size: 0.77rem; color: rgba(255,255,255,0.6); line-height: 1.55; }
@media (max-width: 900px) { .ftab-panel.active { grid-template-columns: 1fr; } .ftab-btn { padding: 12px 16px; font-size: 0.72rem; } }
.feature-banner::after {
content: '';
position: absolute;
inset: 0;
background: transparent;
z-index: 0;
}
.feature-banner-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(17,42,51,0.9) 0%, rgba(4,8,10,0.72) 40%, rgba(17,42,51,0.9) 100%); }
.feature-banner img { z-index: -1; position: relative; }
/* ══════════════════════════════════════════
PREMIUM VISUAL EFFECTS
══════════════════════════════════════════ */
/* Animated gradient border on cards hover */
@property --angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate-border {
to { --angle: 360deg; }
}
.seg-photo-card:hover,
.fcard-compact:hover,
.price-card--featured {
animation: card-glow 2s ease infinite alternate;
}
@keyframes card-glow {
from { box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(184,224,76,0.12); }
to { box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 40px rgba(184,224,76,0.08), 0 0 0 1px rgba(184,224,76,0.28); }
}
/* Floating lime dots background pattern */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: radial-gradient(circle, rgba(111,217,194,0.06) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
/* Smooth scroll behaviour */
html { scroll-behavior: smooth; }
/* Hero section animated gradient orbs */
.blob { filter: blur(90px); opacity: 0.12; }
/* Section entrance fade + slide */
.sr {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.sr.visible {
opacity: 1;
transform: translateY(0);
}
/* Lime accent underline on section titles */
.section-title { position: relative; display: inline-block; }
/* Glowing CTA button */
.btn-primary {
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: rgba(255,255,255,0.18);
transform: skewX(-20deg);
transition: left 0.5s ease;
pointer-events: none;
}
.btn-primary:hover::before {
left: 125%;
}
/* Feature tab panel fade transition */
.ftab-panel {
animation: fadeIn 0.35s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Nav blur backdrop */
#navbar {
backdrop-filter: blur(20px) saturate(1.5);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
}
/* Testimonial cards shimmer border */
.testi-card {
background: linear-gradient(145deg, rgba(13,34,48,0.98), rgba(9,26,38,0.99));
border: 1px solid rgba(255,255,255,0.05);
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.testi-card:hover {
border-color: rgba(184,224,76,0.18);
box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,224,76,0.08);
transform: translateY(-4px);
}
/* Segment photo card parallax hint */
.seg-photo-card .seg-photo-card__img {
transition: transform 0.6s cubic-bezier(.16,1,.3,1), filter 0.4s;
}
@keyframes pulse-ring {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Hero stats chips float */
.hero-photo-chip {
animation: float-chip 3s ease-in-out infinite;
}
.hero-photo-chip--tl {
animation-delay: 0s;
}
.hero-photo-chip--br {
animation-delay: 1.5s;
}
@keyframes float-chip {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
}
/* Lime gradient text for accent spans */
.accent {
background: linear-gradient(135deg, #B8E04C, #8ec86b, #6FD9C2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Page scroll progress indicator */
#page-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
background: linear-gradient(90deg, #B8E04C, #6FD9C2);
z-index: 9999;
transition: width 0.1s ease;
box-shadow: 0 0 10px rgba(184,224,76,0.5);
}
/* Section label underline dash pulse */
.section-label span:first-child {
animation: dash-pulse 2s ease infinite;
}
@keyframes dash-pulse {
0%, 100% { width: 24px; opacity: 1; }
50% { width: 36px; opacity: 0.7; }
}
/* ══════════════════════════════════════════
PREMIUM VISUAL EFFECTS — v2 Final
═══════════════════════════════════════════ */
/* Glassmorphism cards on hover */
.why-cat, .fcard-compact, .price-card {
backdrop-filter: blur(2px);
}
@keyframes gradientBorder {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes floatUp {
0% { transform: translateY(0) scale(1); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.3; }
100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}
/* Subtle scan line overlay on hero */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.04) 2px,
rgba(0,0,0,0.04) 4px
);
pointer-events: none;
z-index: 1;
opacity: 0.5;
}
/* Lime glow on section labels */
.section-label {
filter: drop-shadow(0 0 8px rgba(184,224,76,0.3));
}
/* Shimmer effect on hero chips */
.hero-photo-chip {
position: relative;
overflow: hidden;
}
.hero-photo-chip::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
animation: shimmer 3s ease infinite;
}
@keyframes shimmer {
0% { left: -100%; }
100% { left: 200%; }
}
/* Segment photo card zoom animation */
.seg-photo-card__img {
transition: transform 0.7s cubic-bezier(.16,1,.3,1), filter 0.5s ease !important;
}
.seg-photo-card:hover .seg-photo-card__img {
transform: scale(1.06) !important;
}
/* Feature tab panel fade in */
.ftab-panel.active {
animation: fadeInPanel 0.35s ease both;
}
@keyframes fadeInPanel {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Seg phase content fade */
.seg-phase-content.active {
animation: fadeInPanel 0.25s ease both;
}
/* Glowing border on active nav link */
.nav-links a.active-nav {
color: var(--lime) !important;
}
/* Testimonial card subtle hover lift */
.testi-card {
transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s, border-color 0.35s !important;
}
.testi-card:hover {
transform: translateY(-6px) !important;
border-color: rgba(184,224,76,0.18) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
}
/* Gradient text for major headings */
.hero h1 {
background: linear-gradient(135deg, #ECF2EE 0%, rgba(255,255,255,0.85) 100%);
-webkit-background-clip: text;
background-clip: text;
}
/* Animated underline on hover for nav */
.nav-links a {
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--lime);
transition: width 0.3s ease;
border-radius: 2px;
}
.nav-links a:hover::after,
.nav-links a.active-nav::after {
width: 100%;
}
.nav-links a.nav-cta::after { display: none; }
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Noise texture overlay on dark sections */
section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
opacity: 0.018;
pointer-events: none;
z-index: 0;
}
/* CTA button pulse glow */
.hero-cta--primary {
animation: ctaPulse 3s ease-in-out infinite;
}
@keyframes ctaPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(184,224,76,0); }
50% { box-shadow: 0 0 0 8px rgba(184,224,76,0.12); }
}
/* Progress indicator dots for segment phase tabs */
.seg-phase.active {
background: rgba(111,217,194,0.18) !important;
box-shadow: inset 0 0 0 1px rgba(184,224,76,0.2);
}
/* Feature compact card icon glow on hover */
.fcard-compact:hover .fcard-compact__icon {
background: rgba(184,224,76,0.15);
box-shadow: 0 0 16px rgba(184,224,76,0.2);
}
.fcard-compact .fcard-compact__icon {
transition: background 0.25s, box-shadow 0.25s;
}
/* Smooth scroll behavior */
html { scroll-behavior: smooth; }
/* ══════════════════════════════════════════════════
PREMIUM VISUAL EFFECTS — engageX v2 Final
══════════════════════════════════════════════════ */
/* Smooth scroll */
html { scroll-behavior: smooth; }
/* Page scroll progress bar */
#page-progress {
position: fixed; top: 0; left: 0;
height: 3px; z-index: 9999;
background: linear-gradient(90deg, #B8E04C, #6FD9C2, #B8E04C);
background-size: 200% 100%;
animation: progress-shimmer 2s ease infinite;
box-shadow: 0 0 12px rgba(184,224,76,0.6);
transition: width 0.15s ease;
}
@keyframes progress-shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
/* Subtle grid texture overlay on body */
body::before {
content: '';
position: fixed; inset: 0;
background-image: radial-gradient(circle, rgba(184,224,76,0.025) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
z-index: 0;
}
/* Nav blur */
#navbar {
backdrop-filter: blur(24px) saturate(1.6);
-webkit-backdrop-filter: blur(24px) saturate(1.6);
}
#navbar.scrolled {
background: rgba(5,10,13,0.92) !important;
border-bottom: 1px solid rgba(184,224,76,0.08);
}
/* Glowing primary button shine sweep */
.btn-primary, .price-cta--filled, .nav-cta {
position: relative;
overflow: hidden;
}
.btn-primary::before, .price-cta--filled::before, .nav-cta::before {
content: '';
position: absolute;
top: -50%; left: -80%;
width: 50%; height: 200%;
background: rgba(255,255,255,0.2);
transform: skewX(-20deg);
transition: left 0.55s ease;
pointer-events: none;
}
.btn-primary:hover::before, .price-cta--filled:hover::before, .nav-cta:hover::before {
left: 130%;
}
/* Feature tab fade-in animation */
.ftab-panel.active {
animation: tab-fade 0.3s ease forwards;
}
@keyframes tab-fade {
from { opacity:0; transform: translateY(10px); }
to { opacity:1; transform: translateY(0); }
}
/* Seg phase content fade */
.seg-phase-content.active {
animation: tab-fade 0.25s ease forwards;
}
/* Accent gradient text */
.accent {
background: linear-gradient(135deg, #B8E04C, #8ec86b, #6FD9C2);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes pulse-glow {
0%,100% { opacity:0.5; }
50% { opacity:1; }
}
/* Floating hero chips */
.hero-photo-chip {
animation: float-gentle 3s ease-in-out infinite;
}
.hero-photo-chip:nth-child(2) { animation-delay: 1.5s; }
@keyframes float-gentle {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
/* Testimonial card hover lift */
.testi-card {
transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
}
.testi-card:hover {
transform: translateY(-6px);
border-color: rgba(184,224,76,0.2);
box-shadow: 0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,224,76,0.08);
}
/* Segment photo card image zoom on hover */
.seg-photo-card:hover .seg-photo-card__img {
transform: scale(1.06);
filter: brightness(0.62) saturate(0.85);
}
/* Section divider pulse */
@keyframes divider-pulse {
0%,100% { opacity:0.04; }
50% { opacity:0.1; }
}
/* Lime label dash animated */
.section-label span[style*="width:24px"] {
transition: width 0.4s ease;
}
.sr.visible .section-label span[style*="width:24px"] {
width: 36px !important;
}
/* Compact feature card hover glow */
.fcard-compact:hover {
background: linear-gradient(145deg, rgba(15,38,52,0.99), rgba(12,30,44,0.99));
box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(111,217,194,0.1);
}
/* Hero grid background shimmer */
.hero-grid {
animation: grid-shift 20s linear infinite;
}
@keyframes grid-shift {
0% { background-position: 0px 0px; }
100% { background-position: 48px 48px; }
}
/* RFID / badge particle effect on check-in feature */
@keyframes scan-line {
0% { transform: translateY(-100%); opacity: 0.6; }
100% { transform: translateY(100%); opacity: 0; }
}
/* Focus ring override for a11y */
:focus-visible {
outline: 2px solid rgba(184,224,76,0.6);
outline-offset: 3px;
border-radius: 4px;
}
/* ══════════════════════════════════════════════════════
PREMIUM VISUAL EFFECTS v2 Final
══════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
/* Subtle dot grid on body */
body::before {
content: '';
position: fixed; inset: 0;
background-image: radial-gradient(circle, rgba(184,224,76,0.022) 1px, transparent 1px);
background-size: 44px 44px;
pointer-events: none;
z-index: 0;
}
/* Page scroll progress bar */
#page-progress {
position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
background: linear-gradient(90deg, #B8E04C, #6FD9C2);
box-shadow: 0 0 14px rgba(184,224,76,0.55);
transition: width 0.12s ease;
}
/* Nav enhanced blur */
#navbar { backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7); transition: background 0.3s, border-color 0.3s; }
#navbar.scrolled { background: rgba(4,8,13,0.95) !important; border-bottom: 1px solid rgba(184,224,76,0.08); }
/* Glowing primary button shine sweep */
.btn-primary, .price-cta--filled, .nav-cta { position: relative; overflow: hidden; }
.btn-primary::before, .price-cta--filled::before, .nav-cta::before {
content: '';
position: absolute; top: -50%; left: -80%;
width: 50%; height: 200%;
background: rgba(255,255,255,0.18);
transform: skewX(-20deg);
transition: left 0.5s ease;
pointer-events: none;
}
.btn-primary:hover::before, .price-cta--filled:hover::before, .nav-cta:hover::before { left: 130%; }
/* Feature & segment tab fade-in */
.ftab-panel.active { animation: tab-fade 0.32s ease; }
.seg-phase-content.active { animation: tab-fade 0.25s ease; }
@keyframes tab-fade {
from { opacity:0; transform:translateY(9px); }
to { opacity:1; transform:translateY(0); }
}
/* Accent gradient text */
.accent {
background: linear-gradient(135deg, #B8E04C, #8ec86b, #6FD9C2);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes pulse-glow { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
/* Floating hero chips */
.hero-photo-chip { animation: float-gentle 3s ease-in-out infinite; }
.hero-photo-chip:nth-child(2) { animation-delay: 1.5s; }
@keyframes float-gentle { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
/* Testimonial card hover lift */
.testi-card { transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.testi-card:hover {
transform: translateY(-6px);
border-color: rgba(111,217,194,0.35);
box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(111,217,194,0.12);
}
/* Segment photo card image zoom on hover */
.seg-photo-card:hover .seg-photo-card__img { transform: scale(1.07); filter: brightness(0.6) saturate(0.85); }
/* Feature compact card glow */
.fcard-compact:hover {
background: linear-gradient(145deg, rgba(15,38,52,0.99), rgba(12,30,44,0.99));
box-shadow: 0 12px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(184,224,76,0.07);
}
/* Hero grid gentle scroll */
.hero-grid { animation: grid-drift 30s linear infinite; }
@keyframes grid-drift { 0%{background-position:0 0;} 100%{background-position:48px 48px;} }
/* Focus ring a11y */
:focus-visible { outline: 2px solid rgba(184,224,76,0.6); outline-offset: 3px; border-radius: 4px; }
/* Scroll-reveal base */
.sr { opacity:0; transform:translateY(22px); transition: opacity 0.65s ease, transform 0.65s ease; }
.sr.visible { opacity:1; transform:translateY(0); }
/* ── BRAND TYPOGRAPHY: Open Sans body, Bricolage headings ── */
body, p, div, span, li, a, input, textarea, select, button {
font-family: 'Open Sans', 'Bricolage Grotesque', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.section-title, .hero-badge, .price-badge, .price-badge-featured,
.section-label, .stat-num, .chip-num, .seg-photo-card__title,
.fcard-compact__name, .why-cat__title, .ftab-btn, .nav-cta,
.btn-primary, .btn-secondary, .footer-col h4 {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}
p, .section-desc, .hero-sub, .fcard-compact__desc, .testi-quote,
.footer-brand p, .price-features div, .nav-links a {
font-family: 'Bricolage Grotesque', 'Open Sans', system-ui, sans-serif;
font-weight: 800 !important;
}
/* ── BRAND TEAL UTILITIES ── */
.accent-teal {
background: linear-gradient(135deg, #6FD9C2, #6bb88a);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.icon-teal { color: var(--mint) !important; }
.border-teal { border-color: rgba(111,217,194,0.4) !important; }
/* Nav link hover — keep lime */
.nav-links a:hover { color: var(--lime); }
/* Section label dash — teal */
.section-label span[style*="background:var(--lime)"] { background: var(--lime) !important; }
/* Feature banner label icons — teal */
.feature-banner-text .section-label { color: var(--mint) !important; }
/* Segment card photo link arrow — teal */
.seg-photo-card__link { color: var(--mint); }
.seg-photo-card__link:hover { color: var(--lime); }
/* Trusted by logos — slightly teal tint */
.trusted-logo { color: rgba(111,217,194,0.45); letter-spacing: 0.1em; }
/* fcard icon — teal background, lime icon */
.fcard-compact__icon { background: rgba(111,217,194,0.14); color: var(--lime); }
/* ══════ PREMIUM ANIMATION ENHANCEMENTS ══════ */
/* Counter pop effect */
.counter { display: inline-block; }
.counter.counted {
animation: counterPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes counterPop {
0% { transform: scale(0.85); opacity: 0.6; }
60% { transform: scale(1.08); }
100% { transform: scale(1); opacity: 1; }
}
/* 3D tilt — preserve perspective on parent */
[id^="pPanel-"], .seg-photo-card__body, .testi-card, .why-cat {
transform-style: preserve-3d;
}
/* (Typewriter animation removed — subtitle now renders fully on load.) */
/* Hero canvas blend */
.hero canvas { mix-blend-mode: screen; }
/* Particle glow dots */
@keyframes particleGlow {
0%,100% { filter: blur(0px) brightness(1); }
50% { filter: blur(1px) brightness(1.4); }
}
/* Magnetic button smoothing */
.btn-primary, .nav-cta, a[href="#schedule-demo"] {
will-change: transform;
}
/* Section line draw */
.section-divider,
div[style*="height:1px"] {
transform-origin: center;
}
/* Scroll-enhanced stagger */
.sr { transition-timing-function: cubic-bezier(0.16,1,0.3,1); }
/* Nav active link pulse */
.nav-links a[style*="var(--lime)"] {
position: relative;
}
.nav-links a[style*="var(--lime)"]::after {
content: '';
position: absolute; bottom: -4px; left: 0; right: 0;
height: 2px; border-radius: 1px;
background: var(--lime);
animation: navLineDraw 0.3s ease forwards;
}
@keyframes navLineDraw {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Badge cycling fade */
.hero-badge { transition: opacity 0.3s ease; }
/* Hero stat number gradient text */
.stat-num.counter {
background: linear-gradient(135deg, #ECF2EE 20%, var(--mint));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ═══════════════════════════════════════════════════════
LANGUAGE SELECTOR
═══════════════════════════════════════════════════════ */
.lang-selector {
position: relative;
margin-left: 8px;
z-index: 1001;
}
.lang-trigger {
display: flex;
align-items: center;
gap: 5px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 6px 10px;
color: rgba(255,255,255,0.85);
font-size: 0.78rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.25s ease;
letter-spacing: 0.04em;
white-space: nowrap;
}
.lang-trigger:hover {
background: rgba(184,224,76,0.08);
border-color: rgba(184,224,76,0.25);
color: #ECF2EE;
}
.lang-trigger .lang-globe {
opacity: 0.6;
flex-shrink: 0;
}
.lang-trigger:hover .lang-globe {
opacity: 1;
stroke: var(--lime);
}
.lang-trigger .lang-chevron {
opacity: 0.5;
transition: transform 0.25s ease, opacity 0.25s ease;
flex-shrink: 0;
}
.lang-selector.open .lang-trigger .lang-chevron {
transform: rotate(180deg);
opacity: 0.8;
}
.lang-selector.open .lang-trigger {
background: rgba(184,224,76,0.1);
border-color: rgba(184,224,76,0.3);
}
/* Dropdown menu */
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
background: rgba(11,25,41,0.97);
backdrop-filter: blur(20px);
border: 1px solid rgba(184,224,76,0.12);
border-radius: 12px;
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.97);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.lang-selector.open .lang-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
/* Language option button */
.lang-option {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
background: transparent;
border: none;
border-radius: 8px;
color: rgba(255,255,255,0.7);
font-size: 0.82rem;
font-family: inherit;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}
.lang-option:hover {
background: rgba(184,224,76,0.08);
color: #ECF2EE;
}
.lang-option.active {
background: rgba(184,224,76,0.1);
color: var(--lime);
}
.lang-option .lang-flag {
font-size: 1.1rem;
line-height: 1;
flex-shrink: 0;
}
.lang-option .lang-code {
margin-left: auto;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
opacity: 0.4;
text-transform: uppercase;
}
.lang-option.active .lang-code {
opacity: 0.8;
color: var(--lime);
}
/* ── Mobile: language selector in mobile menu ── */
@media (max-width: 900px) {
.lang-selector {
margin-left: 0;
margin-top: 12px;
width: 100%;
}
.lang-trigger {
width: 100%;
justify-content: center;
padding: 10px 16px;
font-size: 0.85rem;
border-radius: 10px;
}
.lang-menu {
position: fixed;
top: auto;
bottom: 0;
left: 0;
right: 0;
border-radius: 16px 16px 0 0;
padding: 8px 8px 20px;
transform: translateY(100%);
min-width: unset;
}
.lang-selector.open .lang-menu {
transform: translateY(0);
}
.lang-option {
padding: 14px 16px;
font-size: 0.92rem;
}
}
/* ── RTL support ── */
[dir="rtl"] .lang-selector {
margin-left: 0;
margin-right: 8px;
}
[dir="rtl"] .lang-menu {
right: auto;
left: 0;
}
[dir="rtl"] .lang-option .lang-code {
margin-left: 0;
margin-right: auto;
}
[dir="rtl"] .nav-links {
direction: rtl;
}
/* ═══════════════════════════════════════════════════════
i18n — MULTI-LANGUAGE LAYOUT FIXES
═══════════════════════════════════════════════════════ */
/* Nav links: allow wrapping and flexible sizing for longer text */
.nav-links a,
.nav-dropdown-trigger {
white-space: nowrap;
}
.nav-book-demo,
.nav-cta {
text-align: center;
white-space: nowrap;
}
/* Hero buttons: keep icon aligned, allow text to grow */
.btn-primary,
.btn-secondary {
white-space: nowrap;
text-align: center;
}
/* Platform tabs: flexible padding for varying text lengths */
.pa-tab {
white-space: nowrap;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Feature titles in accordion: allow wrapping */
.pa-feat-title {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Chatbot tabs: equal flex sizing */
#ex-chat-tabs .ex-tab {
white-space: nowrap;
flex: 1;
min-width: 0;
font-size: 0.72rem;
padding-left: 6px;
padding-right: 6px;
}
/* Why EngageX cards: ensure titles/hooks don't overflow */
.wby-title,
.wby-hook {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Section labels: keep centered regardless of text length */
.section-label span {
white-space: nowrap;
}
/* Mission counters: flexible for longer labels */
.ms-counter-l,
.ab-milestone-txt,
.ab-stat-l {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Blog entries: flexible text */
.bl-entry-title,
.bl-entry-label {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* ── RTL (Arabic) specific overrides ── */
[dir="rtl"] {
text-align: right;
}
[dir="rtl"] .hero-content,
[dir="rtl"] .hero-actions {
text-align: right;
}
[dir="rtl"] .hero-actions {
flex-direction: row-reverse;
}
[dir="rtl"] .btn-primary svg {
transform: scaleX(-1);
}
[dir="rtl"] .hero-badge {
direction: rtl;
}
[dir="rtl"] .pa-tabs {
direction: rtl;
}
[dir="rtl"] .pa-split {
direction: rtl;
}
[dir="rtl"] .pa-feat {
direction: rtl;
text-align: right;
}
[dir="rtl"] .pa-feat-text {
text-align: right;
}
[dir="rtl"] .wby-bottom {
text-align: right;
}
[dir="rtl"] .ctx-wrap,
[dir="rtl"] .ab-wrap,
[dir="rtl"] .ms-wrap,
[dir="rtl"] .ph-wrap,
[dir="rtl"] .bl-wrap {
direction: rtl;
text-align: right;
}
[dir="rtl"] .section-label {
direction: rtl;
}
[dir="rtl"] .nav-links {
direction: rtl;
}
[dir="rtl"] .nav-dropdown-menu {
left: 0;
right: auto;
text-align: right;
}
[dir="rtl"] .ab-quote {
border-left: none;
border-right: 3px solid var(--lime);
padding-left: 0;
padding-right: 20px;
}
[dir="rtl"] #ex-chat-inp-area {
direction: rtl;
}
[dir="rtl"] #ex-chat-inp {
text-align: right;
}
[dir="rtl"] .bl-entry {
direction: rtl;
text-align: right;
}
[dir="rtl"] .bl-reader-body {
direction: rtl;
text-align: right;
}
/* Mobile adjustments for longer translated text */
@media (max-width: 900px) {
.pa-tab {
padding-left: 14px !important;
padding-right: 14px !important;
font-size: 0.75rem !important;
}
.nav-book-demo,
.nav-cta {
font-size: 0.85rem !important;
}
.btn-primary,
.btn-secondary {
padding: 14px 24px;
font-size: 0.9rem;
min-height: 44px;
}
/* Touch polish on mobile: no flashing tap highlight, larger targets for nav items */
a, button, .nav-links a, .nav-dropdown-trigger, .lang-option, .lang-trigger {
-webkit-tap-highlight-color: transparent;
}
.nav-links.open > a,
.nav-links.open .nav-dropdown-trigger,
.nav-links.open .nav-dropdown-menu a {
min-height: 44px;
}
/* Stop accidental horizontal scroll on narrow phones */
html, body {
overflow-x: hidden;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE — DEMO, CONTACT & REMAINING SECTIONS
═══════════════════════════════════════════════════════ */
/* Demo section */
@media (max-width: 960px) {
#demo-main-grid {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
#schedule-demo {
padding: 70px 24px !important;
}
}
@media (max-width: 620px) {
/* Demo stat tiles */
#schedule-demo [style*="grid-template-columns:1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* Demo form rows */
.demo-form-row {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Demo 2-col inside app mock */
#schedule-demo [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
}
}
/* Contact section */
@media (max-width: 960px) {
#contact-main-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
#contact {
padding: 70px 24px !important;
}
}
@media (max-width: 620px) {
.contact-form-row {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* Hero section — small phones */
@media (max-width: 480px) {
.hero-content h1 {
font-size: 1.8rem !important;
}
.hero-sub {
font-size: 0.88rem !important;
}
.hero-stats {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.hero-actions {
flex-direction: column;
gap: 10px;
}
.hero-actions .btn-primary,
.hero-actions .btn-secondary {
width: 100%;
justify-content: center;
text-align: center;
}
.hero-badge {
font-size: 0.6rem !important;
padding: 5px 12px !important;
}
.hero-photo-panel {
display: none;
}
}
/* Hero chips — hide on small screens */
@media (max-width: 760px) {
.hero-photo-chip {
display: none !important;
}
}
/* Marquee — smaller text on mobile */
@media (max-width: 620px) {
.marquee-item {
font-size: 0.7rem !important;
padding: 0 16px !important;
}
}
/* FAQ — single column on mobile */
@media (max-width: 760px) {
#faqGrid {
grid-template-columns: 1fr !important;
}
}
/* ── Hero additions — mobile rules for the new trust chips + EA signal + tightened headline ── */
@media (max-width: 620px) {
/* The compliance chip row gets tighter on phones so all 5 pills fit on 2 lines */
.hero-trust { gap: 6px !important; margin-top: 16px !important; }
.hero-trust > span { font-size: 0.62rem !important; padding: 3px 8px !important; letter-spacing: 0.08em !important; }
/* EA signal under the badge — keep it on one line longer by shrinking spacing */
.hero-ea-signal { font-size: 0.62rem !important; letter-spacing: 0.1em !important; margin-bottom: 26px !important; }
/* Receipt-narrative friendly hero — when the H1 has a manual
, on very narrow screens
the second line ("Pipeline follows.") collides; let the line-height breathe */
.hero-content h1 { line-height: 1.05 !important; }
}
@media (max-width: 380px) {
/* Tiny screens (<= iPhone SE) — collapse trust row into wrap-friendly mini chips */
.hero-trust > span:first-of-type { display: block; width: 100%; text-align: center; margin-bottom: 4px; }
}
/* Blog — stack layout */
@media (max-width: 900px) {
.bl-layout {
grid-template-columns: 1fr !important;
}
.bl-reader {
min-height: 300px !important;
}
}
/* Footer — stack on mobile */
@media (max-width: 760px) {
.footer-grid {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
.footer-bottom {
flex-direction: column !important;
gap: 12px !important;
text-align: center;
}
}
/* Global — prevent horizontal overflow */
html, body {
overflow-x: hidden;
}
/* Touch targets — minimum 44px for all interactive elements */
@media (max-width: 900px) {
button, a, input, select, textarea {
min-height: 44px;
}
.faq-question {
padding: 16px 14px !important;
}
.pa-feat {
padding: 12px !important;
}
.pa-phase-header {
padding: 14px 12px !important;
}
.ex-tab {
min-height: 40px !important;
}
}
/* ═══════════════════════════════════════════════════════
MOBILE — FINAL OPTIMISATION PASS
═══════════════════════════════════════════════════════ */
/* iOS: prevent auto-zoom on input focus (requires 16px minimum) */
@media (max-width: 900px) {
input, select, textarea {
font-size: 16px !important;
}
}
/* Demo section: stat tiles stack on small screens */
@media (max-width: 620px) {
#schedule-demo [style*="grid-template-columns:1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#schedule-demo [style*="grid-template-columns:1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* Contact section: stack on small screens */
@media (max-width: 620px) {
#contact [style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* Hero photo panel: hide on small phones to save space */
@media (max-width: 620px) {
.hero-photo-panel {
display: none !important;
}
.hero-inner {
grid-template-columns: 1fr !important;
}
}
/* Prevent any element from causing horizontal scroll */
img, video, iframe, svg, canvas {
max-width: 100%;
}
/* Smooth scrolling for anchor links between pages */
html {
scroll-behavior: smooth;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* PHONE MOCKUP COMPONENT — reusable across all role pages.
Round 3 brief 2026-04-30. Lives in main.css (not sections.css)
because the role pages don't load sections.css. */
.phone-mockup {
position: relative;
width: 300px;
aspect-ratio: 1080 / 2340;
flex-shrink: 0;
margin: 0 auto;
}
.phone-mockup::before {
content: '';
position: absolute;
inset: -40px -50px;
background: radial-gradient(ellipse at center,
rgba(184,224,76,0.22) 0%,
rgba(184,224,76,0.10) 35%,
transparent 70%);
filter: blur(20px);
z-index: -1;
pointer-events: none;
}
.phone-mockup.mint::before {
background: radial-gradient(ellipse at center,
rgba(111,217,194,0.22) 0%,
rgba(111,217,194,0.10) 35%,
transparent 70%);
}
.phone-mockup-frame {
position: relative;
width: 100%;
height: 100%;
background: var(--surface-hi);
border-radius: 36px;
padding: 12px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--hairline) inset;
overflow: hidden;
}
.phone-mockup-frame::before {
content: '';
position: absolute;
top: 0; left: 20%; right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25) 50%, transparent);
z-index: 2;
pointer-events: none;
}
.phone-mockup-screen {
width: 100%;
height: 100%;
border-radius: 24px;
display: block;
object-fit: cover;
object-position: top center;
}
@media (max-width: 768px) {
.phone-mockup { width: 240px; }
}
/* ── #capture density additions (R3.5) — pill rail + avg-stat ── */
.capture-methods-rail {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 28px 0 0;
max-width: 480px;
}
.capture-method-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(184, 224, 76, 0.06);
border: 1px solid rgba(184, 224, 76, 0.25);
border-radius: 999px;
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.82rem;
font-weight: 700;
color: var(--lime);
letter-spacing: 0.04em;
}
.capture-method-pill-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 8px rgba(184, 224, 76, 0.6);
flex-shrink: 0;
}
.capture-avg-stat {
margin-top: 32px;
max-width: 480px;
}
.capture-avg-stat-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
gap: 16px;
}
.capture-avg-stat-label {
font-family: 'Open Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
}
.capture-avg-stat-value {
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 900;
font-size: 1.7rem;
color: var(--lime);
line-height: 1;
}
.capture-avg-stat-bar {
height: 4px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.capture-avg-stat-bar-fill {
height: 100%;
width: 4%;
background: linear-gradient(90deg, var(--lime), rgba(184, 224, 76, 0.6));
border-radius: 2px;
box-shadow: 0 0 10px rgba(184, 224, 76, 0.4);
transform-origin: left center;
transform: scaleX(0);
transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.capture-avg-stat.in-view .capture-avg-stat-bar-fill {
transform: scaleX(1);
}
.capture-avg-stat-caption {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.45);
margin-top: 10px;
font-style: italic;
}
.capture-method-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 36px;
}
.capture-method-cards .exh-card {
padding: 28px 26px;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
}
.capture-method-cards .exh-card > div:first-child {
font-size: 1.15rem !important;
margin-bottom: 12px !important;
letter-spacing: -0.01em;
}
.capture-method-cards .exh-card p {
font-size: 0.92rem !important;
line-height: 1.6 !important;
}
@media (max-width: 900px) {
.capture-method-cards { grid-template-columns: 1fr; }
.capture-method-cards .exh-card { min-height: 0; }
}
/* ════════════════════════════════════════════════════════════════
R4 WOW prototype — #band reference implementation
These patterns will be propagated to other sections in Phase 4.1.
Reduced-motion + (hover:none) fallbacks are first-class.
════════════════════════════════════════════════════════════════ */
/* Piece 1 — Spatial phone (BOLDER) */
.phone-mockup.spatial {
perspective: 1000px;
transform-style: preserve-3d;
}
.phone-mockup.spatial .phone-mockup-frame {
transform: rotateY(-14deg) rotateX(5deg);
animation: spatial-phone-float 5s ease-in-out infinite;
box-shadow:
-16px 40px 80px rgba(0, 0, 0, 0.65),
-8px 20px 40px rgba(0, 0, 0, 0.45),
0 0 60px rgba(111, 217, 194, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 0 0.5px rgba(255, 255, 255, 0.12) inset;
will-change: transform;
}
@keyframes spatial-phone-float {
0%, 100% { transform: rotateY(-14deg) rotateX(5deg) translateY(0); }
50% { transform: rotateY(-14deg) rotateX(5deg) translateY(-22px); }
}
.phone-mockup.spatial .phone-mockup-frame::after {
content: '';
position: absolute;
top: 8px; left: 8px;
width: 55%; height: 35%;
background: radial-gradient(ellipse at top left,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.08) 30%,
transparent 60%);
border-radius: 28px 0 0 0;
pointer-events: none;
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.phone-mockup.spatial .phone-mockup-frame { animation: none; }
}
@media (max-width: 768px) {
.phone-mockup.spatial { perspective: none; }
.phone-mockup.spatial .phone-mockup-frame {
transform: rotateY(-6deg) rotateX(2deg);
animation: none;
}
}
/* Piece 2 — Live BAND breakdown bars (cascade fill driven by JS) */
.band-bar-fill {
transition: width 1100ms cubic-bezier(0.34, 1.30, 0.64, 1);
transition-delay: var(--bar-delay, 0ms);
box-shadow: 0 0 16px rgba(184, 224, 76, 0.55);
}
@media (prefers-reduced-motion: reduce) {
.band-bar-fill { transition: none; box-shadow: none; }
}
/* Piece 3 — Cursor-aware glow + dramatic entrance + shimmer sweep */
.band-viz-card {
position: relative;
overflow: hidden;
isolation: isolate;
--mx: 50%;
--my: 50%;
opacity: 0;
transform: translateY(40px) scale(0.97);
transition:
opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
transform 1100ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s ease,
box-shadow 0.4s ease;
}
.band-viz-card.in-view {
opacity: 1;
transform: translateY(0) scale(1);
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(184, 224, 76, 0.22) inset,
0 0 60px rgba(184, 224, 76, 0.12);
}
.band-viz-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle 500px at var(--mx) var(--my),
rgba(184, 224, 76, 0.18) 0%,
rgba(184, 224, 76, 0.08) 35%,
transparent 65%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
/* Shimmer sweep — single light pass left-to-right when card enters view */
.band-viz-card::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -40%;
width: 30%;
background: linear-gradient(110deg,
transparent 0%,
rgba(184, 224, 76, 0.15) 45%,
rgba(255, 255, 255, 0.18) 50%,
rgba(184, 224, 76, 0.15) 55%,
transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
z-index: 2;
opacity: 0;
}
.band-viz-card.in-view::after {
animation: band-shimmer 1400ms cubic-bezier(0.4, 0, 0.2, 1) 600ms 1 forwards;
}
@keyframes band-shimmer {
0% { left: -40%; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { left: 130%; opacity: 0; }
}
.band-viz-card:hover { border-color: rgba(184, 224, 76, 0.55) !important; }
.band-viz-card:hover::before { opacity: 1; }
.band-viz-card > * { position: relative; z-index: 1; }
@media (hover: none) {
.band-viz-card:hover::before { opacity: 0; }
.band-viz-card:hover { border-color: rgba(184, 224, 76, 0.22) !important; }
}
@media (prefers-reduced-motion: reduce) {
.band-viz-card {
opacity: 1;
transform: none;
transition: border-color 0.3s ease;
}
.band-viz-card::after { display: none; }
}
/* Piece 4 — Lift on individual BAND axis rows */
.band-axis-row {
padding: 8px 10px;
margin: -8px -10px;
border-radius: 8px;
transition: background 0.25s ease, transform 0.25s ease;
position: relative;
}
.band-axis-row:hover {
background: rgba(184, 224, 76, 0.04);
transform: translateY(-1px);
}
.band-axis-row:hover .band-bar-fill {
box-shadow: 0 0 12px rgba(184, 224, 76, 0.5);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
.band-axis-row:hover {
background: transparent;
transform: none;
}
.band-axis-row:hover .band-bar-fill { box-shadow: none; }
}
/* Piece 5 — Animated +2/+3 deltas (BIGGER pop) */
.band-delta {
display: inline-block;
color: var(--mint, #6FD9C2);
font-weight: 800;
font-size: 1.05em;
opacity: 0;
transform: translateY(20px) scale(0.4);
transition:
opacity 500ms ease,
transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
text-shadow:
0 0 18px rgba(111, 217, 194, 0.7),
0 0 4px rgba(111, 217, 194, 0.9);
margin-left: 6px;
padding: 1px 6px;
border-radius: 4px;
background: rgba(111, 217, 194, 0.08);
}
.band-deltas-list.in-view .band-delta {
opacity: 1;
transform: translateY(0) scale(1);
}
.band-deltas-list.in-view li:nth-child(1) .band-delta { transition-delay: 1500ms; }
.band-deltas-list.in-view li:nth-child(2) .band-delta { transition-delay: 1700ms; }
.band-deltas-list.in-view li:nth-child(3) .band-delta { transition-delay: 1900ms; }
.band-deltas-list.in-view li:nth-child(4) .band-delta { transition-delay: 2100ms; }
@media (prefers-reduced-motion: reduce) {
.band-delta { opacity: 1; transform: none; transition: none; }
}
/* Composite 78 glow pulse — fires when card enters view */
.band-viz-card.in-view .glow-lime {
animation: composite-pulse 1.4s cubic-bezier(0.16, 1, 0.3, 1) 1500ms 1;
}
@keyframes composite-pulse {
0% { text-shadow: 0 0 0 rgba(184, 224, 76, 0); }
40% { text-shadow: 0 0 60px rgba(184, 224, 76, 0.9), 0 0 100px rgba(184, 224, 76, 0.5); }
100% { text-shadow: 0 0 24px rgba(184, 224, 76, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
.band-viz-card.in-view .glow-lime { animation: none; }
}
/* Piece 6b — Quote rests in after the deltas finish */
.band-quote {
opacity: 0;
transform: translateY(16px);
transition: opacity 900ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: 2600ms;
}
.band-quote.in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.band-quote { opacity: 1; transform: none; transition: none; }
}
/* ════════════════════════════════════════════════════════════════
.web-mockup — laptop/desktop frame for organiser & console screens
Cinema variant cross-fades up to 4 screens. Mirrors the phone-mockup
pattern for consistency, uses 16:10 aspect for desktop UI captures.
════════════════════════════════════════════════════════════════ */
.web-mockup {
position: relative;
display: block;
max-width: 880px;
width: 100%;
margin: 0 auto;
aspect-ratio: 16/10;
background: linear-gradient(180deg, #1A2A2C 0%, #0E1A1A 100%);
border-radius: 14px 14px 6px 6px;
border: 1px solid rgba(255,255,255,0.10);
padding: 28px 14px 18px;
box-shadow:
0 32px 80px rgba(0,0,0,0.55),
0 12px 32px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.04) inset;
overflow: hidden;
}
/* Browser chrome — three traffic-light dots */
.web-mockup::before {
content: '';
position: absolute;
top: 11px; left: 16px;
width: 42px; height: 8px;
background:
radial-gradient(circle 4px at 4px 4px, #FF6058 0 4px, transparent 4px),
radial-gradient(circle 4px at 20px 4px, #FFBD2E 0 4px, transparent 4px),
radial-gradient(circle 4px at 36px 4px, #28C840 0 4px, transparent 4px);
pointer-events: none;
z-index: 4;
}
/* Top-edge specular gloss */
.web-mockup::after {
content: '';
position: absolute;
top: 0; left: 18%; right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
pointer-events: none;
z-index: 4;
}
.web-mockup-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 4px;
overflow: hidden;
background: #16292A;
isolation: isolate;
}
.web-mockup-screen {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* Cinema variant — 4-screen cross-fade (16s total, 4s per screen) */
.web-mockup.cinema-4 { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.web-mockup.cinema-4 .web-mockup-screen {
opacity: 0;
animation: web-cinema-cycle-4 16s linear infinite;
}
/* :nth-child rules support both bare ![]()
and ![]()
children. */
.web-mockup.cinema-4 .web-mockup-screen:nth-child(1),
.web-mockup.cinema-4 picture:nth-child(1) > .web-mockup-screen { animation-delay: 0s; z-index: 4; }
.web-mockup.cinema-4 .web-mockup-screen:nth-child(2),
.web-mockup.cinema-4 picture:nth-child(2) > .web-mockup-screen { animation-delay: 4s; z-index: 3; }
.web-mockup.cinema-4 .web-mockup-screen:nth-child(3),
.web-mockup.cinema-4 picture:nth-child(3) > .web-mockup-screen { animation-delay: 8s; z-index: 2; }
.web-mockup.cinema-4 .web-mockup-screen:nth-child(4),
.web-mockup.cinema-4 picture:nth-child(4) > .web-mockup-screen { animation-delay: 12s; z-index: 1; }
@keyframes web-cinema-cycle-4 {
0% { opacity: 0; }
2.5% { opacity: 1; } /* fade-in 400ms */
22% { opacity: 1; } /* hold ~3.1s */
25% { opacity: 0; } /* fade-out 480ms */
100% { opacity: 0; }
}
.web-mockup.cinema-4:hover .web-mockup-screen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.web-mockup.cinema-4 .web-mockup-screen { animation: none; opacity: 0; }
.web-mockup.cinema-4 .web-mockup-screen:nth-child(1),
.web-mockup.cinema-4 picture:nth-child(1) > .web-mockup-screen { opacity: 1; }
}
/* Piece 6c — Hover label on the in-app preview phone */
.band-preview-with-label {
position: relative;
display: inline-block;
}
.band-preview-label {
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%) translateY(-4px);
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 0.78rem;
font-weight: 700;
color: var(--mint, #6FD9C2);
letter-spacing: 0.08em;
text-transform: uppercase;
background: rgba(22, 41, 42, 0.9);
padding: 6px 14px;
border: 1px solid rgba(111, 217, 194, 0.3);
border-radius: 999px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.band-preview-with-label:hover .band-preview-label {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.band-preview-label {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* CRM Trust Layer — 3 cards stacked vertically inside the text column */
.crm-trust-cards {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 32px;
}
.crm-trust-cards .exh-card {
padding: 22px 24px;
}
.crm-trust-cards .exh-card > div:first-child {
letter-spacing: -0.01em;
}
.exh-section-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 80px;
align-items: start;
max-width: 1200px;
margin: 0 auto 60px;
}
.exh-section-grid.reverse { grid-template-columns: auto 1fr; }
.exh-section-text { text-align: left; }
.exh-section-text .exh-sub,
.exh-section-text .vis-sub,
.exh-section-text .org-sub { max-width: 520px; margin-left: 0; margin-right: 0; }
.exh-section-visual { display: flex; justify-content: center; }
@media (max-width: 900px) {
.exh-section-grid,
.exh-section-grid.reverse {
grid-template-columns: 1fr;
gap: 48px;
}
.exh-section-text { text-align: center; }
.exh-section-grid.reverse .exh-section-visual { order: 2; }
.exh-section-grid.reverse .exh-section-text { order: 1; }
}
.band-app-preview {
display: grid;
grid-template-columns: 1fr auto;
gap: 80px;
align-items: center;
max-width: 1100px;
margin: 80px auto 0;
padding-top: 60px;
border-top: 1px solid var(--hairline);
}
.band-app-preview-text h3 {
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 1.6rem;
font-weight: 800;
margin: 16px 0;
color: var(--text-hi);
}
@media (max-width: 900px) {
.band-app-preview { grid-template-columns: 1fr; gap: 40px; }
}
/* ─────────────────────────────────────────────────────────────────
HERO CINEMA — 4-scene cross-fading product reveal inside the phone.
"Editorial Cinematic Reveal" aesthetic. Single phone, sequential
takeover by 4 product moments + a vertical chapter-marker rail
alongside that animates in sync. Hover pauses the loop. Reduced
motion shows scene 1 only. 2026-04-30 / DFII 15.
──────────────────────────────────────────────────────────────── */
/* Cinema modifier on the existing .phone-mockup component */
.phone-mockup.cinema { overflow: visible; }
.phone-mockup.cinema .phone-mockup-frame { position: relative; overflow: hidden; }
.phone-mockup.cinema .phone-mockup-screen {
position: absolute;
top: 12px; left: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
opacity: 0;
animation: hero-cinema-cycle 16s linear infinite;
}
.phone-mockup.cinema .phone-mockup-screen:nth-child(1),
.phone-mockup.cinema picture:nth-child(1) > .phone-mockup-screen { animation-delay: 0s; z-index: 4; }
.phone-mockup.cinema .phone-mockup-screen:nth-child(2),
.phone-mockup.cinema picture:nth-child(2) > .phone-mockup-screen { animation-delay: 4s; z-index: 3; }
.phone-mockup.cinema .phone-mockup-screen:nth-child(3),
.phone-mockup.cinema picture:nth-child(3) > .phone-mockup-screen { animation-delay: 8s; z-index: 2; }
.phone-mockup.cinema .phone-mockup-screen:nth-child(4),
.phone-mockup.cinema picture:nth-child(4) > .phone-mockup-screen { animation-delay: 12s; z-index: 1; }
@keyframes hero-cinema-cycle {
0% { opacity: 0; }
3% { opacity: 1; } /* fade-in 480ms */
23% { opacity: 1; } /* hold ~3s */
26% { opacity: 0; } /* fade-out 480ms */
100% { opacity: 0; }
}
/* Pause on hover so the visitor can examine a scene */
.phone-mockup.cinema:hover .phone-mockup-screen,
.phone-mockup.cinema:hover ~ .hero-cinema-caption .scene {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.phone-mockup.cinema .phone-mockup-screen { animation: none; opacity: 0; }
.phone-mockup.cinema .phone-mockup-screen:nth-child(1),
.phone-mockup.cinema picture:nth-child(1) > .phone-mockup-screen { opacity: 1; }
}
/* ── Caption rail — vertical chapter marker alongside the phone ── */
.hero-cinema-rail {
display: flex;
align-items: center;
gap: 28px;
height: 100%;
}
.hero-cinema-caption {
position: relative;
flex: 1 1 auto;
min-width: 240px;
max-width: 320px;
padding-left: 24px;
border-left: 1px solid rgba(184,224,76,0.22);
align-self: stretch;
display: flex;
align-items: center;
}
.hero-cinema-caption .scene {
position: absolute;
top: 50%; left: 24px; right: 0;
transform: translateY(-50%);
opacity: 0;
animation: hero-cinema-cycle 16s linear infinite;
}
.hero-cinema-caption .scene:nth-child(1) { animation-delay: 0s; }
.hero-cinema-caption .scene:nth-child(2) { animation-delay: 4s; }
.hero-cinema-caption .scene:nth-child(3) { animation-delay: 8s; }
.hero-cinema-caption .scene:nth-child(4) { animation-delay: 12s; }
.hero-cinema-caption .hcc-index {
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 900; font-size: 1.4rem; color: var(--lime);
display: block; line-height: 1; letter-spacing: -0.02em;
}
.hero-cinema-caption .hcc-index .hcc-of {
font-size: 0.85rem; color: rgba(255,255,255,0.4);
font-weight: 600;
}
.hero-cinema-caption .hcc-tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 800; font-size: 0.62rem; letter-spacing: 0.22em;
color: rgba(255,255,255,0.62); text-transform: uppercase;
margin-top: 18px; margin-bottom: 6px;
}
.hero-cinema-caption .hcc-tag::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--lime); box-shadow: 0 0 6px rgba(184,224,76,0.65);
animation: hero-cinema-tag-pulse 2s ease-in-out infinite;
}
@keyframes hero-cinema-tag-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.7); opacity: 0.6; }
}
.hero-cinema-caption .hcc-title {
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 900; font-size: 1.45rem; color: #ECF2EE;
letter-spacing: -0.02em; line-height: 1.1;
margin: 0 0 10px 0;
}
.hero-cinema-caption .hcc-sub {
font-size: 0.86rem; color: rgba(255,255,255,0.55);
line-height: 1.55; font-weight: 300; margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.hero-cinema-caption .scene { animation: none; opacity: 0; }
.hero-cinema-caption .scene:nth-child(1) { opacity: 1; }
.hero-cinema-caption .hcc-tag::before { animation: none; }
}
/* Mobile: caption rail moves below the phone */
@media (max-width: 900px) {
.hero-cinema-rail { flex-direction: column; gap: 24px; }
.hero-cinema-caption {
width: 100%; max-width: 320px; min-width: 0;
margin-left: 0; padding-left: 0;
padding-top: 24px;
border-left: none;
border-top: 1px solid rgba(184,224,76,0.22);
align-items: flex-start;
text-align: center; align-self: center;
min-height: 140px;
}
.hero-cinema-caption .scene { left: 0; right: 0; top: 50%; }
}
/* ─────────────────────────────────────────────────────────────────
HERO CINEMA — TWO-SIDED EDITION. Visitor phone left, exhibitor phone
right, both tilted toward each other. Each phone runs its own 4-scene
cycle, synced to a joint caption rail that narrates the two-sided
marketplace story. 2026-04-30 / DFII 15.
──────────────────────────────────────────────────────────────── */
.hero-cinema-twin {
display: flex;
align-items: center;
gap: 28px;
height: 100%;
position: relative;
}
.hcc-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 100%;
perspective: 1400px;
padding: 0 8px;
}
.hero-cinema-twin .phone-mockup.cinema { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
/* Left phone: tilts toward center (faces right) and floats slightly forward */
.hero-cinema-twin .phone-mockup.cinema.phone-left {
transform: rotateY(12deg) rotateX(2deg) translateZ(-20px) translateX(20px);
transform-origin: right center;
margin-right: -34px;
z-index: 2;
}
/* Right phone: tilts toward center (faces left) and sits slightly behind */
.hero-cinema-twin .phone-mockup.cinema.phone-right {
transform: rotateY(-12deg) rotateX(2deg) translateZ(0);
transform-origin: left center;
z-index: 1;
}
/* Subtle hover: phones unfold toward the camera so the visitor can read both screens flat */
.hcc-stage:hover .phone-mockup.cinema.phone-left { transform: rotateY(4deg) rotateX(0) translateZ(0) translateX(8px); }
.hcc-stage:hover .phone-mockup.cinema.phone-right { transform: rotateY(-4deg) rotateX(0) translateZ(0); }
/* Side label — small ROLE chip at the top of each phone, identifies which side */
.phone-side-label {
position: absolute;
top: -28px; left: 50%;
transform: translateX(-50%);
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 800; font-size: 0.6rem; letter-spacing: 0.22em;
text-transform: uppercase;
padding: 4px 10px; border-radius: 999px;
background: rgba(14, 26, 26, 0.8);
border: 1px solid rgba(184, 224, 76, 0.32);
color: var(--lime);
white-space: nowrap;
z-index: 5;
letter-spacing: 0.18em;
}
.phone-mockup.mint .phone-side-label {
border-color: rgba(111, 217, 194, 0.32);
color: var(--mint);
}
/* Pause both phones when hovering the stage */
.hcc-stage:hover .phone-mockup-screen,
.hcc-stage:hover ~ .hero-cinema-caption .scene {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.hero-cinema-twin .phone-mockup.cinema.phone-left,
.hero-cinema-twin .phone-mockup.cinema.phone-right {
transform: none;
margin-right: 0;
}
}
/* Mobile: phones stack, lose the tilt, caption moves below */
@media (max-width: 900px) {
.hero-cinema-twin { flex-direction: column; gap: 24px; }
.hcc-stage { gap: 12px; padding: 24px 0 0; }
.hero-cinema-twin .phone-mockup.cinema.phone-left,
.hero-cinema-twin .phone-mockup.cinema.phone-right {
transform: none; margin: 0; max-height: 360px !important;
}
.phone-side-label { top: -22px; font-size: 0.55rem; }
}
/* ─────────────────────────────────────────────────────────────────
HERO CINEMA — 8-scene variant. Same Editorial Cinematic Reveal,
deeper product story. 24s cycle, 3s per scene (~400ms cross-fade).
.cinema-8 modifier on both .phone-mockup.cinema and the caption rail.
2026-04-30. Replaces the 4-scene + 2-phone earlier iterations.
──────────────────────────────────────────────────────────────── */
.phone-mockup.cinema.cinema-8 .phone-mockup-screen {
animation: hero-cinema-cycle-8 24s linear infinite;
}
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(1),
.phone-mockup.cinema.cinema-8 picture:nth-child(1) > .phone-mockup-screen { animation-delay: 0s; z-index: 8; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(2),
.phone-mockup.cinema.cinema-8 picture:nth-child(2) > .phone-mockup-screen { animation-delay: 3s; z-index: 7; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(3),
.phone-mockup.cinema.cinema-8 picture:nth-child(3) > .phone-mockup-screen { animation-delay: 6s; z-index: 6; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(4),
.phone-mockup.cinema.cinema-8 picture:nth-child(4) > .phone-mockup-screen { animation-delay: 9s; z-index: 5; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(5),
.phone-mockup.cinema.cinema-8 picture:nth-child(5) > .phone-mockup-screen { animation-delay: 12s; z-index: 4; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(6),
.phone-mockup.cinema.cinema-8 picture:nth-child(6) > .phone-mockup-screen { animation-delay: 15s; z-index: 3; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(7),
.phone-mockup.cinema.cinema-8 picture:nth-child(7) > .phone-mockup-screen { animation-delay: 18s; z-index: 2; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(8),
.phone-mockup.cinema.cinema-8 picture:nth-child(8) > .phone-mockup-screen { animation-delay: 21s; z-index: 1; }
.hero-cinema-caption.cinema-8 .scene {
animation: hero-cinema-cycle-8 24s linear infinite;
}
.hero-cinema-caption.cinema-8 .scene:nth-child(1) { animation-delay: 0s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(2) { animation-delay: 3s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(3) { animation-delay: 6s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(4) { animation-delay: 9s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(5) { animation-delay: 12s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(6) { animation-delay: 15s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(7) { animation-delay: 18s; }
.hero-cinema-caption.cinema-8 .scene:nth-child(8) { animation-delay: 21s; }
@keyframes hero-cinema-cycle-8 {
0% { opacity: 0; }
1.7% { opacity: 1; } /* fade-in 400ms (1.7% of 24s) */
10.8% { opacity: 1; } /* hold ~2.6s */
12.5% { opacity: 0; } /* fade-out — full handoff at 3s */
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.phone-mockup.cinema.cinema-8 .phone-mockup-screen,
.hero-cinema-caption.cinema-8 .scene { animation: none; opacity: 0; }
.phone-mockup.cinema.cinema-8 .phone-mockup-screen:nth-child(1),
.phone-mockup.cinema.cinema-8 picture:nth-child(1) > .phone-mockup-screen,
.hero-cinema-caption.cinema-8 .scene:nth-child(1) { opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
Shared utility: organiser math-block — used in #sv-worked-example
on organiser.html and #sponsored-visitors on index.html.
Replaces previously duplicated .sv-math / .org-sv-math classes.
════════════════════════════════════════════════════════════════ */
.math-block {
max-width: 780px;
margin: 0 auto;
padding: 32px 40px;
position: relative;
overflow: hidden;
background: radial-gradient(circle at 100% 100%, rgba(184,224,76,0.08) 0%, transparent 50%),
linear-gradient(180deg, rgba(15,35,50,0.78) 0%, rgba(7,18,30,0.78) 100%);
border: 1px solid rgba(184,224,76,0.25);
border-top: 3px solid var(--mint, #6FD9C2);
border-radius: 16px;
}
.math-block::before {
content: '';
position: absolute;
top: 3px;
left: 14%;
right: 14%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 50%, transparent);
}
.math-block-eyebrow {
text-align: center;
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 800;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mint, #6FD9C2);
margin-bottom: 18px;
}
.math-block-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: baseline;
padding: 6px 0;
font-size: 0.95rem;
color: rgba(255,255,255,0.7);
}
.math-block-l { text-align: right; }
.math-block-c {
font-family: 'Bricolage Grotesque','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 900;
font-size: 1.5rem;
color: var(--lime);
letter-spacing: -0.01em;
min-width: 140px;
text-align: center;
}
.math-block-r { text-align: left; }
.math-block-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(184,224,76,0.20) 50%, transparent);
margin: 8px 0;
}
.math-block-total { padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; }
.math-block-total-num {
color: var(--lime);
font-size: 2rem;
text-shadow: 0 0 20px rgba(184,224,76,0.4);
}
.math-block-total-num.size-up {
font-size: 2.1rem;
text-shadow: 0 0 22px rgba(184,224,76,0.45);
}
.math-block-foot {
margin: 18px 0 0;
font-size: 0.86rem;
color: rgba(255,255,255,0.6);
line-height: 1.6;
text-align: center;
padding-top: 14px;
border-top: 1px dashed rgba(255,255,255,0.08);
}
.math-block-foot strong { color: var(--lime); font-weight: 700; }
@media (max-width: 680px) {
.math-block { padding: 24px 22px; }
.math-block-row { grid-template-columns: 1fr; gap: 4px; text-align: center; }
.math-block-l, .math-block-r { text-align: center; }
}