/*
* FLex LAB — Premium Interaction Layer
* Inspired by: thestacksmiths.com, flow.party, blvckcard.com
* =====================================================
*/
/* ═══════════════════════════════════════════
CLASH DISPLAY — Core Brand Font
═══════════════════════════════════════════ */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700,800&display=swap');
/* ═══════════════════════════════════════════
╔══════════════════════════════════════════╗
║ FLEX / LAB LOGO + REVEAL ANIMATION ║
╚══════════════════════════════════════════╝
═══════════════════════════════════════════ */
/* === Large preloader version === */
.cd-logo {
font-family: 'Clash Display', 'Space Grotesk', sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.05em;
line-height: 0.85;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
}
.cd-row {
display: flex;
overflow: hidden;
font-size: clamp(4rem, 11vw, 8.5rem);
line-height: 1;
}
.cd-outline { margin-top: -0.05em; }
.cd-letter {
display: inline-block;
will-change: transform, clip-path;
}
/* FLEX (filled) — letters drop down into place with stagger */
.cd-fill .cd-letter {
color: #ffffff;
transform: translateY(110%);
animation: cd-drop 0.85s cubic-bezier(.22, 1, .36, 1) forwards;
}
.cd-fill .cd-letter:nth-child(1) { animation-delay: 0.05s; }
.cd-fill .cd-letter:nth-child(2) { animation-delay: 0.15s; }
.cd-fill .cd-letter:nth-child(3) { animation-delay: 0.25s; }
.cd-fill .cd-letter:nth-child(4) { animation-delay: 0.35s; }
@keyframes cd-drop {
0% { transform: translateY(110%); }
100% { transform: translateY(0); }
}
/* LAB (outlined) — each letter reveals left-to-right like ink drawing it */
.cd-outline .cd-letter {
color: transparent;
-webkit-text-stroke: 2.5px #ffffff;
text-stroke: 2.5px #ffffff;
clip-path: inset(0 100% 0 0);
opacity: 0;
animation: cd-draw 0.95s cubic-bezier(.22, 1, .36, 1) forwards;
}
.cd-outline .cd-letter:nth-child(1) { animation-delay: 0.7s; }
.cd-outline .cd-letter:nth-child(2) { animation-delay: 0.88s; }
.cd-outline .cd-letter:nth-child(3) { animation-delay: 1.06s; }
@keyframes cd-draw {
0% { clip-path: inset(0 100% 0 0); opacity: 0; }
10% { opacity: 1; }
100% { clip-path: inset(0 -2% 0 0); opacity: 1; }
}
/* Subtle radial glow behind the logo while it's resolving */
.cd-logo::before {
content: '';
position: absolute;
inset: -40%;
background: radial-gradient(circle at center,
rgba(184, 164, 126, 0.15) 0%,
transparent 55%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
opacity: 0;
animation: cd-glow-in 1.2s ease forwards;
animation-delay: 0.5s;
}
@keyframes cd-glow-in {
to { opacity: 1; }
}
/* === IMAGE-BASED LOGO (replaces text-based cd-mini) === */
.logo-img {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 0;
transition: filter .4s, transform .4s cubic-bezier(.23, 1, .32, 1);
}
.logo-img img {
height: 42px;
width: auto;
display: block;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
transition: filter .4s;
}
.logo-img:hover img {
filter: drop-shadow(0 4px 16px color-mix(in srgb, var(--violet, #7c3aed) 60%, transparent))
drop-shadow(0 0 24px color-mix(in srgb, var(--cyan, #d4a857) 30%, transparent))
brightness(1.1);
}
.logo-img:hover { transform: translateY(-1px); }
/* Footer logo — slightly larger */
.footer .logo-img img,
.f-brand .logo-img img { height: 56px; }
/* ═══════════════════════════════════════════
PRELOADER — Lens Logo Sting (inline SVG animation)
═══════════════════════════════════════════ */
.lens-sting {
width: clamp(320px, 56vw, 560px);
height: auto;
display: block;
filter:
drop-shadow(0 12px 40px rgba(124, 58, 237, 0.35))
drop-shadow(0 0 80px rgba(245, 184, 61, 0.18));
}
/* Icon: pops in from the right, then travels to the left */
.lens-sting .ls-icon {
transform-box: fill-box;
transform-origin: center;
animation:
ls-iconPop 0.7s cubic-bezier(.2, 1.4, .4, 1) both,
ls-iconMove 1.0s cubic-bezier(.65, 0, .35, 1) forwards 1.5s;
}
@keyframes ls-iconPop {
0% { opacity: 0; transform: translateX(150px) scale(.2) rotate(-20deg); }
100% { opacity: 1; transform: translateX(150px) scale(1.55) rotate(0); }
}
@keyframes ls-iconMove {
0% { transform: translateX(150px) scale(1.55); }
100% { transform: translateX(0) scale(1); }
}
/* Chevron stroke: draws on itself */
.lens-sting .ls-chev {
stroke-dasharray: 120;
stroke-dashoffset: 120;
animation: ls-draw 0.5s ease forwards 0.55s;
}
@keyframes ls-draw { to { stroke-dashoffset: 0; } }
/* Gold dot: pops + glows */
.lens-sting .ls-dot {
transform-box: fill-box;
transform-origin: center;
opacity: 0;
animation:
ls-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) forwards 1.0s,
ls-glow 2.2s ease-in-out infinite 2.6s;
}
@keyframes ls-pop {
0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes ls-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 184, 61, 0)); }
50% { filter: drop-shadow(0 0 8px rgba(245, 184, 61, .95)); }
}
/* Wordmark lines: slide in from the left as the icon arrives */
.lens-sting .ls-flex-l,
.lens-sting .ls-lab-l {
opacity: 0;
transform-box: fill-box;
transform-origin: left center;
animation: ls-lineIn 0.6s cubic-bezier(.2, .8, .2, 1) forwards;
}
.lens-sting .ls-flex-l { animation-delay: 2.15s; }
.lens-sting .ls-lab-l { animation-delay: 2.35s; }
@keyframes ls-lineIn {
0% { opacity: 0; transform: translateX(-16px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Final breathing settle */
.lens-sting .ls-all {
transform-box: fill-box;
transform-origin: center;
animation: ls-settle 5s ease-in-out infinite 3.2s;
}
@keyframes ls-settle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
.lens-sting *,
.lens-sting .ls-icon,
.lens-sting .ls-flex-l,
.lens-sting .ls-lab-l { animation: none !important; }
.lens-sting .ls-icon { transform: translateX(0) scale(1); }
.lens-sting .ls-flex-l,
.lens-sting .ls-lab-l { opacity: 1; transform: translateX(0); }
.lens-sting .ls-dot { opacity: 1; transform: scale(1); }
.lens-sting .ls-chev { stroke-dashoffset: 0; }
}
/* Responsive */
@media (max-width: 700px) {
.logo-img img { height: 36px; }
.footer .logo-img img, .f-brand .logo-img img { height: 46px; }
}
/* === LEGACY text-based logo (kept for fallback) === */
.cd-mini {
font-family: 'Clash Display', 'Space Grotesk', sans-serif;
font-weight: 800;
text-transform: uppercase;
letter-spacing: -.045em;
line-height: 0.82;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
color: inherit;
}
.cd-mini-fill {
color: #ffffff;
font-size: 1.05rem;
}
.cd-mini-outline {
color: transparent;
-webkit-text-stroke: 1px #ffffff;
text-stroke: 1px #ffffff;
font-size: 1.05rem;
margin-top: -0.04em;
}
nav#nav .cd-mini { padding: .2rem 0; }
nav#nav .cd-mini:hover .cd-mini-fill { color: var(--cyan, #8b7355); }
nav#nav .cd-mini:hover .cd-mini-outline { -webkit-text-stroke-color: var(--cyan, #8b7355); }
nav#nav .cd-mini-fill,
nav#nav .cd-mini-outline { transition: color .35s, -webkit-text-stroke-color .35s; }
/* === Footer-size version === */
.footer .cd-mini-fill,
.footer .cd-mini-outline,
.f-brand .cd-mini-fill,
.f-brand .cd-mini-outline { font-size: 1.4rem; }
/* ═══════════════════════════════════════════
NAV DROPDOWN HOVER FIX
— removes the 8px gap that broke the hover chain
═══════════════════════════════════════════ */
.nav-links .drop {
top: 100% !important; /* flush against , no gap to cross */
padding-top: .85rem !important; /* internal breathing room (visual gap preserved) */
}
/* Invisible safety bridge: extends 's hoverable area downward
so even sub-pixel transitions stay covered */
.nav-links > li {
position: relative;
}
.nav-links > li::after {
content: '';
position: absolute;
top: 100%;
left: -.25rem;
right: -.25rem;
height: 1rem;
pointer-events: auto;
/* invisible but hoverable — keeps :hover active while cursor moves
from the nav link into the dropdown */
}
/* ═══════════════════════════════════════════
FLEX LAB BRAND BASE THEME
(deep navy with purple undertone — matches flexlab.co.in)
═══════════════════════════════════════════ */
:root {
/* ── Deep Purple / Black / Gold / Silver palette ── */
--bg: #06040d; /* midnight black — brand base */
--bg2: #0b0818; /* deep purple-black layer 2 */
--bg3: #110e1e; /* rich purple layer 3 */
--border: rgba(255, 255, 255, 0.07);
--muted: #6b7280;
/* Accent palette — loaded here so CSS works before JS theme panel runs */
--violet: #6d28d9; /* deep royal violet */
--violet2: #7c3aed; /* mid violet */
--cyan: #d4af37; /* gold (legacy name kept for compat) */
--gold: #d4af37; /* explicit gold alias */
--gold-light: #f5d77b; /* champagne highlight */
--rose: #a78bfa; /* soft lavender accent */
--silver: #94a3b8; /* silver */
--silver-light: #cbd5e1;
/* Liquid blob theme colors */
--th-blob-1: #6d28d9; /* deep violet */
--th-blob-2: #d4af37; /* gold */
--th-blob-3: #a78bfa; /* lavender */
--th-blob-4: #9333ea; /* mid purple */
/* Section backgrounds */
--bg-cream: #f4ede0;
--bg-cream-2: #ece5d5;
--text-dark: #0e0f1a;
}
body {
background: var(--bg);
}
.stat-bar, .marquee-wrap, #testimonials { background: var(--bg2); }
body::before { opacity: 0.04 !important; }
/* ═══════════════════════════════════════════
BRAND TAGLINE — italic warm gold (FlexLab signature)
═══════════════════════════════════════════ */
.tagline-gold,
.flex-tagline,
em.gold {
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg, var(--cyan, #d4a857) 0%, color-mix(in srgb, var(--cyan, #d4a857) 80%, #fff) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: -.005em;
}
/* ═══════════════════════════════════════════
ATMOSPHERIC MOOD SECTIONS
(large colored ambient washes per section
— bleed into each other for smooth flow)
═══════════════════════════════════════════ */
.mood-section {
position: relative;
overflow: visible;
z-index: 1;
}
.mood-section::before {
content: '';
position: absolute;
inset: -10% -5%;
pointer-events: none;
z-index: -1;
opacity: 0.65;
filter: blur(90px);
transition: opacity 1.2s ease;
}
.mood-section > * { position: relative; z-index: 1; }
/* Violet mood — deep purple atmosphere */
.mood-violet::before {
background:
radial-gradient(ellipse 70% 50% at 12% 22%,
color-mix(in srgb, var(--violet, #7c3aed) 50%, transparent) 0%,
transparent 55%),
radial-gradient(ellipse 60% 60% at 88% 80%,
color-mix(in srgb, var(--violet, #7c3aed) 30%, transparent) 0%,
transparent 55%);
}
/* Gold mood — warm champagne/amber atmosphere */
.mood-gold::before {
background:
radial-gradient(ellipse 75% 55% at 80% 20%,
color-mix(in srgb, var(--cyan, #d4a857) 45%, transparent) 0%,
transparent 55%),
radial-gradient(ellipse 50% 50% at 15% 70%,
color-mix(in srgb, var(--rose, #a78bfa) 25%, transparent) 0%,
transparent 55%);
}
/* Rose mood — soft lavender/pink atmosphere */
.mood-rose::before {
background:
radial-gradient(ellipse 65% 55% at 25% 30%,
color-mix(in srgb, var(--rose, #a78bfa) 38%, transparent) 0%,
transparent 55%),
radial-gradient(ellipse 60% 50% at 80% 75%,
color-mix(in srgb, var(--violet, #7c3aed) 25%, transparent) 0%,
transparent 55%);
}
/* Multi mood — all three colors layered (for the showcase Labs section) */
.mood-multi::before {
background:
radial-gradient(ellipse 50% 45% at 8% 22%,
color-mix(in srgb, var(--violet, #7c3aed) 40%, transparent) 0%,
transparent 55%),
radial-gradient(ellipse 55% 50% at 92% 28%,
color-mix(in srgb, var(--cyan, #d4a857) 35%, transparent) 0%,
transparent 55%),
radial-gradient(ellipse 60% 50% at 50% 85%,
color-mix(in srgb, var(--rose, #a78bfa) 30%, transparent) 0%,
transparent 55%);
}
/* Cool mood — subtle violet-cyan blend for process/secondary sections */
.mood-cool::before {
background:
radial-gradient(ellipse 55% 50% at 70% 30%,
color-mix(in srgb, var(--violet, #7c3aed) 28%, transparent) 0%,
transparent 55%),
radial-gradient(ellipse 50% 45% at 25% 75%,
color-mix(in srgb, var(--cyan, #d4a857) 22%, transparent) 0%,
transparent 55%);
}
/* Floating ambient orbs — adds depth & subtle movement per mood section */
.mood-section::after {
content: '';
position: absolute;
width: 280px;
height: 280px;
right: 8%;
top: 15%;
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--violet) 40%, transparent),
transparent 65%);
filter: blur(60px);
opacity: 0.5;
pointer-events: none;
z-index: -1;
animation: orb-float 18s ease-in-out infinite;
}
.mood-gold::after {
background: radial-gradient(circle,
color-mix(in srgb, var(--cyan) 50%, transparent),
transparent 65%);
right: auto;
left: 6%;
top: 60%;
}
.mood-rose::after {
background: radial-gradient(circle,
color-mix(in srgb, var(--rose) 45%, transparent),
transparent 65%);
}
.mood-cool::after {
background: radial-gradient(circle,
color-mix(in srgb, var(--rose) 35%, transparent),
transparent 65%);
right: 12%;
top: 50%;
width: 220px;
height: 220px;
}
.mood-multi::after {
background: radial-gradient(circle,
color-mix(in srgb, var(--cyan) 40%, transparent),
transparent 65%);
left: 10%;
right: auto;
top: 70%;
}
@keyframes orb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -30px) scale(1.06); }
66% { transform: translate(-25px, 35px) scale(0.96); }
}
/* ═══════════════════════════════════════════
SMOOTH SECTION BLEND
(mood glow fades at top/bottom — content stays sharp)
═══════════════════════════════════════════ */
.mood-section::before {
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%,
#000 12%,
#000 88%,
transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0%,
#000 12%,
#000 88%,
transparent 100%);
}
/* ═══════════════════════════════════════════
CREAM ALTERNATING SECTION
(use on a wrapper section for the "warm" reverse-contrast band)
═══════════════════════════════════════════ */
.section-cream {
background: var(--bg-cream) !important;
color: var(--text-dark);
position: relative;
z-index: 2; /* render above body::before theme tint */
overflow: visible;
}
.section-cream h1,
.section-cream h2,
.section-cream h3,
.section-cream h4 { color: var(--text-dark); }
.section-cream p,
.section-cream li { color: #4a4d57; }
.section-cream .s-label,
.section-cream .section-index { color: var(--violet, #7c3aed); }
.section-cream .s-sub { color: #5a5d6a; }
.section-cream .section-index .si-num {
background: linear-gradient(135deg, var(--violet, #7c3aed), color-mix(in srgb, var(--violet) 60%, #000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-cream .grad,
.section-cream em.gold,
.section-cream .gold-text {
background: linear-gradient(135deg, var(--cyan, #d4a857) 0%, color-mix(in srgb, var(--cyan) 70%, #000) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
font-weight: 500;
}
/* Smooth gradient transition strips at top + bottom of cream sections */
.section-transition {
position: relative;
}
.section-transition::before,
.section-transition::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 100px;
pointer-events: none;
z-index: 3;
}
.section-transition::before {
top: 0;
background: linear-gradient(to bottom,
var(--bg, #0a0b14) 0%,
color-mix(in srgb, var(--bg, #0a0b14) 50%, var(--bg-cream)) 35%,
transparent 100%);
}
.section-transition::after {
bottom: 0;
background: linear-gradient(to top,
var(--bg, #0a0b14) 0%,
color-mix(in srgb, var(--bg, #0a0b14) 50%, var(--bg-cream)) 35%,
transparent 100%);
}
/* ─── Benefit cards on cream ─── */
.section-cream .benefit-card {
background: rgba(255, 255, 255, 0.72);
border-color: rgba(124, 58, 237, 0.14);
box-shadow: 0 10px 30px rgba(14, 15, 26, 0.04);
}
.section-cream .benefit-card.active {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(124, 58, 237, 0.35);
box-shadow: 0 18px 40px rgba(14, 15, 26, 0.08),
0 0 30px color-mix(in srgb, var(--violet) 12%, transparent);
}
.section-cream .benefit-card::before {
background: radial-gradient(circle 360px at var(--mx) var(--my),
color-mix(in srgb, var(--violet, #7c3aed) 18%, transparent) 0%,
color-mix(in srgb, var(--cyan, #d4a857) 12%, transparent) 22%,
transparent 62%);
mix-blend-mode: multiply;
}
.section-cream .benefit-card:hover::before { opacity: 0.55; }
.section-cream .benefit-card h3 { color: var(--text-dark); }
.section-cream .benefit-card p { color: #4a4d57; }
.section-cream .benefit-card .bc-eyebrow { color: var(--violet, #7c3aed); }
.section-cream .benefit-card .bc-eyebrow::before { background: var(--violet, #7c3aed); }
.section-cream .benefit-card .bc-num {
background: linear-gradient(135deg,
color-mix(in srgb, var(--violet, #7c3aed) 35%, #fff),
color-mix(in srgb, var(--cyan, #d4a857) 35%, #fff));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-cream .benefit-card.active .bc-num {
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #d4a857));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.section-cream .benefit-card .bc-meta span {
background: rgba(124, 58, 237, 0.06);
border-color: rgba(124, 58, 237, 0.18);
color: #5a5d6a;
}
.section-cream .benefit-card.active .bc-meta span {
background: rgba(124, 58, 237, 0.12);
border-color: rgba(124, 58, 237, 0.32);
color: var(--text-dark);
}
.section-cream .benefit-card .bc-marker {
background: var(--bg-cream);
border-color: rgba(124, 58, 237, 0.25);
}
.section-cream .benefit-card.active .bc-marker {
background: var(--violet, #7c3aed);
border-color: var(--violet, #7c3aed);
box-shadow: 0 0 0 6px color-mix(in srgb, var(--violet) 15%, transparent),
0 0 18px var(--violet, #7c3aed);
}
.section-cream .bs-scroll-col::before {
background: linear-gradient(to bottom,
transparent,
rgba(124, 58, 237, 0.18) 10%,
rgba(124, 58, 237, 0.18) 90%,
transparent);
}
.section-cream .bs-progress-track { background: rgba(14, 15, 26, 0.08); }
.section-cream .bsp-cur { color: var(--violet, #7c3aed); }
/* ─── Testimonial cards on cream ─── */
.section-cream .tcard {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(124, 58, 237, 0.14);
box-shadow: 0 10px 28px rgba(14, 15, 26, 0.05);
}
.section-cream .tcard:hover {
background: rgba(255, 255, 255, 0.96);
border-color: rgba(124, 58, 237, 0.32);
box-shadow: 0 18px 40px rgba(14, 15, 26, 0.08);
}
.section-cream .tcard::before {
background: linear-gradient(135deg,
color-mix(in srgb, var(--violet) 10%, transparent),
color-mix(in srgb, var(--cyan) 8%, transparent));
}
.section-cream .tquote { color: #3a3d47; }
.section-cream .stars { color: #c98a1a; }
.section-cream .ainfo h4 { color: var(--text-dark); }
.section-cream .ainfo p { color: #6a6d77; }
/* Body theme-tint shouldn't tint cream sections */
.section-cream { isolation: isolate; }
/* ═══════════════════════════════════════════
GOLD PILL CTA (matches "LET'S TALK" button)
═══════════════════════════════════════════ */
.btn-gold {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-dark, #0e0f1a);
background: linear-gradient(135deg, var(--cyan, #d4a857), color-mix(in srgb, var(--cyan, #d4a857) 75%, #fff));
padding: 1rem 2rem;
border-radius: 100px;
border: none;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s, filter .35s;
box-shadow: 0 10px 30px color-mix(in srgb, var(--cyan, #d4a857) 25%, transparent);
cursor: pointer;
}
.btn-gold:hover {
transform: translateY(-3px);
filter: brightness(1.08);
box-shadow: 0 16px 40px color-mix(in srgb, var(--cyan, #d4a857) 35%, transparent);
}
/* ═══════════════════════════════════════════
01. CURSOR SPOTLIGHT (illuminates content)
═══════════════════════════════════════════ */
#cursor-spotlight {
position: fixed;
width: 252px;
height: 252px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(109,40,217,0.09) 0%,
rgba(212,175,55,0.04) 22%,
transparent 42%);
pointer-events: none;
z-index: 1;
mix-blend-mode: screen;
transition: opacity 0.4s;
filter: blur(10px);
will-change: transform;
}
body.spotlight-hidden #cursor-spotlight { opacity: 0; }
/* ═══════════════════════════════════════════
02. SECTION COUNTER (right side pill)
═══════════════════════════════════════════ */
#section-counter {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 9985;
display: flex;
align-items: center;
gap: .35rem;
background: rgba(8, 8, 16, 0.55);
border: 1px solid rgba(255, 255, 255, 0.07);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 100px;
padding: .55rem 1rem;
font-family: 'Space Grotesk', sans-serif;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
color: rgba(241, 245, 249, 0.4);
opacity: 0;
transition: opacity .5s, transform .5s;
pointer-events: none;
}
#section-counter.visible {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.sc-cur {
color: var(--cyan, #06b6d4);
font-size: .85rem;
font-weight: 900;
font-feature-settings: 'tnum';
min-width: 1.6em;
display: inline-block;
text-align: right;
}
.sc-sep { opacity: 0.35; margin: 0 .15rem; }
.sc-bar {
width: 60px;
height: 2px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
margin-left: .65rem;
}
.sc-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--violet, #6d28d9), var(--gold, #d4af37));
width: 0%;
transition: width .35s cubic-bezier(.23,1,.32,1);
}
@media (max-width: 700px) {
#section-counter { right: 1rem; padding: .4rem .75rem; }
.sc-bar { display: none; }
}
/* ═══════════════════════════════════════════
03. FLOATING DOCK NAVIGATION
═══════════════════════════════════════════ */
#floating-dock {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(120%);
z-index: 9988;
display: flex;
align-items: center;
gap: .45rem;
background: rgba(8, 8, 16, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border-radius: 100px;
padding: .55rem;
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.45),
0 0 80px rgba(124, 58, 237, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: transform .65s cubic-bezier(.23,1,.32,1);
}
#floating-dock.visible {
transform: translateX(-50%) translateY(0);
}
#floating-dock a,
#floating-dock button {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: rgba(241, 245, 249, 0.65);
font-size: 1.05rem;
cursor: pointer;
text-decoration: none;
position: relative;
transition: all .3s cubic-bezier(.23,1,.32,1);
}
#floating-dock a:hover,
#floating-dock button:hover {
color: var(--cyan, #06b6d4);
background: rgba(124, 58, 237, 0.15);
transform: translateY(-4px) scale(1.08);
}
#floating-dock a.active {
background: linear-gradient(135deg,
color-mix(in srgb, var(--violet, #7c3aed) 55%, transparent),
color-mix(in srgb, var(--violet, #7c3aed) 25%, transparent));
color: #fff;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--cyan, #d4af37) 55%, transparent),
0 6px 20px color-mix(in srgb, var(--violet, #7c3aed) 45%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .15);
}
#floating-dock a.active svg .di-stroke { stroke: #fff; }
#floating-dock a.active svg .di-dot { fill: #f5d97a; }
/* Pulsing gold ring around active icon */
#floating-dock a.active::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1.5px solid color-mix(in srgb, var(--cyan, #d4af37) 70%, transparent);
animation: dockActivePulse 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes dockActivePulse {
0%, 100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.12); opacity: 0; }
}
/* Active page indicator dot below icon */
#floating-dock a.active::after {
content: '' !important;
position: absolute !important;
bottom: -.65rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
background: var(--cyan, #d4af37) !important;
box-shadow: 0 0 8px color-mix(in srgb, var(--cyan, #d4af37) 70%, transparent);
opacity: 1 !important;
border: 0 !important;
font-size: 0 !important;
padding: 0 !important;
}
#floating-dock a::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + .65rem);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: rgba(8, 8, 16, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
font-size: .65rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: .35rem .75rem;
border-radius: 100px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .25s, transform .25s;
}
#floating-dock a:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.dock-sep {
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.08);
margin: 0 .15rem;
}
/* SVG icons inside the dock */
#floating-dock svg {
width: 20px;
height: 20px;
display: block;
}
#floating-dock svg .di-stroke {
stroke: rgba(241, 245, 249, 0.72);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
transition: stroke .3s;
}
#floating-dock svg .di-dot {
fill: var(--cyan, #d4af37);
transition: fill .3s;
}
#floating-dock a:hover svg .di-stroke,
#floating-dock button:hover svg .di-stroke { stroke: #fff; }
#floating-dock a.active svg .di-stroke { stroke: #fff; }
/* Contact CTA gets gold-violet treatment */
#floating-dock .dock-contact {
background: linear-gradient(135deg, rgba(109, 40, 217, 0.35), rgba(212, 175, 55, 0.22)) !important;
box-shadow: 0 4px 14px rgba(212, 175, 55, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
}
#floating-dock .dock-contact svg .di-stroke { stroke: var(--cyan, #d4af37); }
#floating-dock .dock-contact:hover svg .di-stroke { stroke: #f5d97a; }
@media (max-width: 700px) {
#floating-dock { bottom: 1rem; gap: .25rem; padding: .4rem; }
#floating-dock a, #floating-dock button { width: 38px; height: 38px; font-size: .95rem; }
#floating-dock a::after { display: none; }
}
/* ═══════════════════════════════════════════
04. CONFETTI PARTICLES
═══════════════════════════════════════════ */
.confetti-particle {
position: fixed;
width: 8px;
height: 8px;
pointer-events: none;
z-index: 99999;
border-radius: 2px;
will-change: transform, opacity;
}
.confetti-particle.shape-circle { border-radius: 50%; }
.confetti-particle.shape-triangle {
width: 0; height: 0;
background: transparent !important;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
/* Burst ripple */
.click-ripple {
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 99998;
border: 2px solid rgba(124, 58, 237, 0.4);
will-change: transform, opacity;
}
/* ═══════════════════════════════════════════
05. LAB CARD HOVER (no dimming — was hiding cards)
═══════════════════════════════════════════ */
.labs-grid .lab-card {
transition:
transform .45s cubic-bezier(.23,1,.32,1),
background .35s,
box-shadow .35s,
border-color .35s;
}
.labs-grid .lab-card:hover {
transform: translateY(-4px);
z-index: 5;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 50px rgba(124, 58, 237, 0.2);
}
/* Force any stale stuck dimming back to full opacity (safety net) */
.labs-grid.has-hover .lab-card:not(:hover) {
opacity: 1;
transform: none;
filter: none;
}
/* ═══════════════════════════════════════════
06. SECTION ENTRY CURTAINS (disabled — was blanking sections)
═══════════════════════════════════════════ */
section[data-curtain] { position: relative; }
section[data-curtain]::before { display: none !important; }
/* ═══════════════════════════════════════════
07. MARQUEE HEADLINE (huge text on hover)
═══════════════════════════════════════════ */
.headline-marquee {
position: relative;
cursor: default;
}
.hm-track {
display: inline-flex;
white-space: nowrap;
animation: hm-roll 18s linear infinite;
gap: 1.5rem;
}
.hm-track span { padding-right: 1rem; }
@keyframes hm-roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════
08. BLVCKCARD GOLD ACCENT THEME
═══════════════════════════════════════════ */
.gold-theme {
--accent-gold: #d4af37;
--accent-gold-soft: #f5d77b;
--accent-gold-dark: #8b7113;
}
.gold-text {
background: linear-gradient(135deg, #d4af37 0%, #f5d77b 50%, #d4af37 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gold-shift 5s ease infinite;
}
@keyframes gold-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.gold-line {
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(212, 175, 55, 0.6),
transparent);
}
.gold-badge {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(212, 175, 55, 0.08);
border: 1px solid rgba(212, 175, 55, 0.3);
color: #f5d77b;
font-size: .7rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: .4rem 1rem;
border-radius: 100px;
}
.gold-badge::before {
content: '◆';
font-size: .55rem;
color: #d4af37;
}
/* Inspired-by attribution link */
.inspired-by {
display: inline-flex;
align-items: center;
gap: .5rem;
color: rgba(241, 245, 249, 0.35);
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: color .3s;
padding: .35rem 0;
}
.inspired-by:hover { color: #d4af37; }
.inspired-by::after {
content: '↗';
font-size: .85rem;
transition: transform .3s;
}
.inspired-by:hover::after {
transform: translate(2px, -2px);
}
/* ═══════════════════════════════════════════
09. PREMIUM HOVER CARD REVEAL (peek info)
═══════════════════════════════════════════ */
.peek-card {
position: relative;
overflow: hidden;
}
.peek-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(8, 8, 16, 0.98) 60%, transparent);
padding: 1.75rem 1.75rem 1.25rem;
transform: translateY(100%);
transition: transform .55s cubic-bezier(.23,1,.32,1);
pointer-events: none;
}
.peek-card:hover .peek-content {
transform: translateY(0);
pointer-events: auto;
}
.peek-content h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: .85rem;
font-weight: 700;
margin-bottom: .25rem;
color: var(--cyan, #06b6d4);
}
.peek-content p {
font-size: .75rem;
color: rgba(241, 245, 249, 0.7);
line-height: 1.6;
}
/* ═══════════════════════════════════════════
10. BIG TYPE STATEMENT (hover reveals giant text)
═══════════════════════════════════════════ */
.big-statement {
position: fixed;
pointer-events: none;
z-index: 9990;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(4rem, 14vw, 11rem);
font-weight: 900;
letter-spacing: -.06em;
line-height: 0.9;
mix-blend-mode: difference;
color: #fff;
opacity: 0;
transform: translate(-50%, -50%) scale(0.85);
transition: opacity .4s, transform .55s cubic-bezier(.23,1,.32,1);
white-space: nowrap;
}
.big-statement.visible {
opacity: 0.16;
transform: translate(-50%, -50%) scale(1);
}
/* ═══════════════════════════════════════════
11. SECTION TINT (subtle theme shift)
═══════════════════════════════════════════ */
body::before {
content: '';
position: fixed;
inset: 0;
background: var(--theme-tint, transparent);
opacity: 0.04;
pointer-events: none;
z-index: 0;
transition: background-color 1.2s cubic-bezier(.23,1,.32,1);
mix-blend-mode: screen;
}
/* ═══════════════════════════════════════════
12. PREMIUM SCROLL DOWN BUTTON (animated)
═══════════════════════════════════════════ */
.scroll-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: .65rem;
cursor: pointer;
color: rgba(241, 245, 249, 0.6);
font-size: .75rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
background: transparent;
border: none;
padding: .5rem 0;
}
.scroll-cta-btn::after {
content: '↓';
display: inline-block;
animation: arrow-bob 1.8s ease-in-out infinite;
}
@keyframes arrow-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* ═══════════════════════════════════════════
13. CTA BUTTON SHIMMER
═══════════════════════════════════════════ */
.btn-p, .btn-g, .nav-btn {
position: relative;
overflow: hidden;
}
.btn-p::after, .btn-g::after, .nav-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.12),
transparent);
transition: left 0.65s cubic-bezier(.23,1,.32,1);
pointer-events: none;
}
.btn-p:hover::after, .btn-g:hover::after, .nav-btn:hover::after {
left: 100%;
}
/* ═══════════════════════════════════════════
14. ANIMATED BORDER GRADIENT (for premium cards)
═══════════════════════════════════════════ */
.border-glow {
position: relative;
overflow: hidden;
}
.border-glow::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(124, 58, 237, 0.6),
rgba(6, 182, 212, 0.4),
rgba(244, 63, 94, 0.3),
rgba(124, 58, 237, 0.6));
background-size: 300% 300%;
animation: border-flow 6s ease infinite;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
@keyframes border-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ═══════════════════════════════════════════
15. PREMIUM TICKER (vertical news-like rotation)
═══════════════════════════════════════════ */
.ticker-wrap {
display: inline-flex;
align-items: baseline;
height: 1.2em;
overflow: hidden;
vertical-align: bottom;
}
.ticker-list {
display: flex;
flex-direction: column;
animation: ticker-roll 12s steps(4) infinite;
}
.ticker-list > span {
height: 1.2em;
line-height: 1.2em;
white-space: nowrap;
}
@keyframes ticker-roll {
0%, 22% { transform: translateY(0); }
25%, 47% { transform: translateY(-1.2em); }
50%, 72% { transform: translateY(-2.4em); }
75%, 97% { transform: translateY(-3.6em); }
100% { transform: translateY(-4.8em); }
}
/* ═══════════════════════════════════════════
16. SCROLL VELOCITY-DRIVEN SKEW
═══════════════════════════════════════════ */
[data-skew] {
transition: transform 0.6s cubic-bezier(.23,1,.32,1);
will-change: transform;
}
/* ═══════════════════════════════════════════
17. NAV SCROLL HIDE
═══════════════════════════════════════════ */
nav#nav {
transition: transform .45s cubic-bezier(.23,1,.32,1), background .3s, backdrop-filter .3s;
}
nav#nav.nav-hidden {
transform: translateY(-100%);
}
nav#nav.nav-condensed {
background: rgba(4, 4, 10, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* ═══════════════════════════════════════════
18. MOUSE-FOLLOW IMAGE PEEK (for cards w/ data-peek-img)
═══════════════════════════════════════════ */
.peek-img {
position: fixed;
width: 220px;
height: 280px;
border-radius: 16px;
background: var(--bg2, #090912);
border: 1px solid var(--border, rgba(255,255,255,0.07));
overflow: hidden;
pointer-events: none;
z-index: 9994;
opacity: 0;
transform: scale(0.85) rotate(-2deg);
transition: opacity .35s, transform .55s cubic-bezier(.23,1,.32,1);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Space Grotesk', sans-serif;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: -.04em;
text-align: center;
padding: 1rem;
}
.peek-img.visible {
opacity: 1;
transform: scale(1) rotate(-3deg);
}
/* ═══════════════════════════════════════════
19. SCROLL-DRIVEN COLOR-CHANGING HERO
═══════════════════════════════════════════ */
#hero {
position: relative;
}
#hero .h-title .grad {
background: linear-gradient(135deg, #7c3aed, #06b6d4, #f43f5e, #7c3aed);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: hero-grad 5s linear infinite;
}
@keyframes hero-grad {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
/* ═══════════════════════════════════════════
20. SECTION DIVIDER (animated SVG)
═══════════════════════════════════════════ */
.section-divider {
position: relative;
height: 80px;
margin: 4rem 0;
display: flex;
align-items: center;
justify-content: center;
}
.section-divider::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border, rgba(255,255,255,0.1)), transparent);
}
.section-divider .sd-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cyan, #06b6d4);
position: relative;
z-index: 1;
box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
animation: sd-pulse 2.5s ease-in-out infinite;
}
@keyframes sd-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); }
}
/* ═══════════════════════════════════════════
PERFORMANCE — disable on reduced motion
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
#cursor-spotlight,
.confetti-particle,
.click-ripple,
#floating-dock,
#section-counter { display: none !important; }
* { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}
/* Touch devices — hide cursor-dependent UI */
@media (hover: none), (max-width: 700px) {
#cursor-spotlight { display: none; }
.big-statement { display: none; }
.peek-img { display: none; }
}
/* Big-statement disabled globally — overlay was not premium */
.big-statement { display: none !important; }
/* ═══════════════════════════════════════════
FEATURE IMAGE UTILITY
(premium framed photo block for content sections)
═══════════════════════════════════════════ */
.feat-img-wrap {
position: relative;
display: block;
border-radius: 22px;
overflow: hidden;
background: var(--bg2);
border: 1px solid var(--border);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.45),
0 8px 20px rgba(0, 0, 0, 0.25),
0 0 40px color-mix(in srgb, var(--violet, #7c3aed) 8%, transparent);
transition: transform .6s cubic-bezier(.23, 1, .32, 1),
box-shadow .6s, border-color .4s;
isolation: isolate;
}
.feat-img-wrap:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--violet, #7c3aed) 35%, transparent);
box-shadow:
0 40px 80px rgba(0, 0, 0, 0.55),
0 12px 28px rgba(0, 0, 0, 0.3),
0 0 60px color-mix(in srgb, var(--violet, #7c3aed) 18%, transparent);
}
.feat-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 1s cubic-bezier(.23, 1, .32, 1), filter .6s;
will-change: transform;
}
.feat-img-wrap:hover .feat-img {
transform: scale(1.04);
filter: brightness(1.05);
}
/* Subtle gradient overlay so image blends with dark theme */
.feat-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 55%,
rgba(10, 11, 20, 0.4) 100%);
pointer-events: none;
z-index: 1;
}
/* Optional gold/violet edge accent */
.feat-img-wrap::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--violet, #7c3aed) 35%, transparent) 0%,
color-mix(in srgb, var(--cyan, #d4a857) 25%, transparent) 50%,
transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
opacity: 0.7;
}
/* Caption */
.feat-caption {
position: absolute;
bottom: 1.5rem;
left: 1.75rem;
right: 1.75rem;
z-index: 3;
color: rgba(244, 232, 215, 0.92);
pointer-events: none;
}
.feat-caption .feat-eyebrow {
font-family: 'Space Grotesk', monospace;
font-size: .65rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cyan, #d4a857);
margin-bottom: .35rem;
}
.feat-caption .feat-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.4vw, 1.25rem);
font-weight: 700;
letter-spacing: -.01em;
line-height: 1.25;
}
/* Showcase grid — two-up layout helper */
.feat-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin: 3rem 0 4rem;
padding: 0 5rem;
}
@media (max-width: 1100px) {
.feat-grid-2 { grid-template-columns: 1fr; padding: 0 2rem; }
}
.feat-grid-full {
max-width: 920px;
margin: 3rem auto 4rem;
width: calc(100% - 4rem);
position: relative;
}
@media (max-width: 960px) {
.feat-grid-full {
width: calc(100% - 2rem);
margin: 3rem auto 4rem;
}
}
/* ═══════════════════════════════════════════
PREMIUM SLIDER COMPONENT
(Sleek interactive sliding slideshow)
═══════════════════════════════════════════ */
.premium-slider-container {
position: relative;
width: 100%;
height: 440px;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.45),
0 8px 20px rgba(0, 0, 0, 0.25),
0 0 40px color-mix(in srgb, var(--violet, #7c3aed) 8%, transparent);
border: 1px solid var(--border);
isolation: isolate;
background: var(--bg2);
}
@media (max-width: 768px) {
.premium-slider-container {
height: 320px;
}
}
.premium-slides {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.premium-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: visibility 0s 0.6s, opacity 0.6s ease-in-out;
z-index: 1;
}
.premium-slide.active {
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease-in-out;
z-index: 2;
}
.premium-slide .feat-img-wrap {
width: 100%;
height: 100%;
border: none;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 0;
transform: none !important;
}
.premium-slide .feat-img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: auto;
transform: scale(1.05);
transition: transform 6s ease-out;
}
.premium-slide.active .feat-img {
transform: scale(1);
}
.slider-controls {
position: absolute;
bottom: 1.5rem;
right: 1.75rem;
z-index: 10;
display: flex;
align-items: center;
gap: 1rem;
background: rgba(4, 4, 10, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 0.5rem 0.75rem;
border-radius: 100px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
@media (max-width: 640px) {
.slider-controls {
right: 50%;
transform: translateX(50%);
width: calc(100% - 3.5rem);
justify-content: space-between;
}
}
.slide-nav-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
padding: 0;
}
.slide-nav-btn svg {
width: 14px;
height: 14px;
stroke-width: 2.5;
transition: transform 0.3s;
}
.slide-nav-btn:hover {
background: var(--violet, #7c3aed);
border-color: var(--violet, #7c3aed);
color: #fff;
box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}
.prev-btn:hover svg {
transform: translateX(-2px);
}
.next-btn:hover svg {
transform: translateX(2px);
}
.slider-progress-wrap {
display: flex;
align-items: center;
gap: 0.75rem;
}
.slider-counter {
font-family: 'Space Grotesk', monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.8);
min-width: 48px;
text-align: center;
}
.slider-counter .curr-idx {
color: var(--cyan, #06b6d4);
}
.slider-counter .sep {
opacity: 0.4;
margin: 0 0.1rem;
}
.slider-progress-bar {
width: 60px;
height: 2px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
position: relative;
}
@media (max-width: 480px) {
.slider-progress-bar {
display: none;
}
}
.slider-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
border-radius: 2px;
}
/* Showcase mosaic — 4-up asymmetric grid for index "Behind the Curtain" */
.showcase-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 1.25rem;
max-width: 1380px;
margin: 0 auto;
padding: 0 1rem;
}
.showcase-grid .sc-tall { grid-row: span 2; }
.showcase-grid .sc-tall .feat-img { aspect-ratio: 4 / 5; }
.showcase-grid .sc-wide { grid-column: span 2; }
.showcase-grid .sc-wide .feat-img { aspect-ratio: 21 / 9; }
@media (max-width: 1100px) {
.showcase-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
padding: 0;
}
.showcase-grid .sc-tall,
.showcase-grid .sc-wide { grid-row: auto; grid-column: span 2; }
.showcase-grid .sc-tall .feat-img,
.showcase-grid .sc-wide .feat-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
.showcase-grid { grid-template-columns: 1fr; }
.showcase-grid .sc-tall,
.showcase-grid .sc-wide { grid-column: auto; }
}
/* Hero italic gold tagline (matches FlexLab signature) */
#hero .h-tagline {
font-size: clamp(1rem, 2vw, 1.35rem);
margin-top: -1rem;
margin-bottom: 2.5rem;
line-height: 1.5;
letter-spacing: -.005em;
}
#hero .h-tagline em.gold {
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg, var(--cyan, #d4a857) 0%, color-mix(in srgb, var(--cyan, #d4a857) 70%, #fff8e0) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ═══════════════════════════════════════════
╔══════════════════════════════════════════╗
║ HERO TEXT — CLEAN OUTLINED ║
║ No hover glow on text. Cursor effects ║
║ handled by the hero liquid blob layer. ║
╚══════════════════════════════════════════╝
═══════════════════════════════════════════ */
.liquid-glass-text {
color: transparent;
-webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.92);
text-stroke: 1.4px rgba(255, 255, 255, 0.92);
position: relative;
isolation: isolate;
filter: none;
}
/* No hover effect on the text itself */
.liquid-glass-text:hover { filter: none; }
.liquid-glass-text::before,
.liquid-glass-text::after { display: none; }
/* Keep transparent fill on letter-split spans */
.liquid-glass-text .hl,
.liquid-glass-text .hla,
.liquid-glass-text span {
color: transparent;
-webkit-text-fill-color: transparent;
}
/* ═══════════════════════════════════════════
╔══════════════════════════════════════════╗
║ HENCUBED-STYLE BENEFIT SECTION ║
║ (sticky title + scrolling cards) ║
╚══════════════════════════════════════════╝
═══════════════════════════════════════════ */
#benefits {
padding: 8rem 0 2rem; /* tiny bottom padding — section ends when last card ends */
position: relative;
overflow: visible;
}
.bs-container {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: start; /* grid height = taller col (scroll col), not stretched */
gap: 5rem;
max-width: 1380px;
margin: 0 auto;
padding: 0 5rem;
position: relative;
}
/* Sticky left column — centred in viewport so it floats alongside all 5 cards */
.bs-sticky-col {
position: sticky;
/* calc(50vh - ~220px) ≈ half-height of the sticky content block (~440px)
clamp keeps it from going above the nav bar or below mid-screen */
top: clamp(5rem, calc(50vh - 220px), 35vh);
align-self: start;
height: fit-content;
}
.bs-title {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(2.6rem, 5.3vw, 4.6rem);
font-weight: 900;
letter-spacing: -.04em;
line-height: 0.95;
margin: 1.25rem 0 1.5rem;
}
.bs-title em {
font-style: italic;
font-weight: 300;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bs-sub {
color: var(--muted, #64748b);
font-size: .98rem;
line-height: 1.75;
max-width: 380px;
margin-bottom: 2.5rem;
}
.bs-progress-wrap {
margin: 2.5rem 0 2rem;
display: flex;
align-items: center;
gap: 1.25rem;
max-width: 320px;
}
.bs-progress-track {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.06);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.bs-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
border-radius: 2px;
box-shadow: 0 0 12px rgba(124, 58, 237, 0.45);
transition: width .35s cubic-bezier(.23, 1, .32, 1);
}
.bs-progress-label {
font-family: 'Space Grotesk', monospace;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
color: var(--muted, #64748b);
white-space: nowrap;
}
.bsp-cur {
color: var(--cyan, #06b6d4);
font-size: .85rem;
font-weight: 900;
}
.bsp-sep { opacity: 0.3; margin: 0 .15rem; }
.bs-cta {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: .88rem;
font-weight: 700;
letter-spacing: -.01em;
color: #fff;
padding: 1rem 1.75rem;
border-radius: 100px;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
text-decoration: none;
position: relative;
overflow: hidden;
box-shadow: 0 12px 35px rgba(124, 58, 237, 0.3);
transition: transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s;
}
.bs-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 45px rgba(124, 58, 237, 0.45);
}
/* Right scrolling column */
.bs-scroll-col {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
/* Vertical connecting line through cards */
.bs-scroll-col::before {
content: '';
position: absolute;
left: 38px;
top: 60px;
bottom: 60px;
width: 1px;
background: linear-gradient(to bottom,
transparent,
rgba(124, 58, 237, 0.15) 10%,
rgba(124, 58, 237, 0.15) 90%,
transparent);
z-index: 0;
}
.benefit-card {
padding: 2.5rem 2.75rem;
border: 1px solid var(--border, rgba(255, 255, 255, 0.07));
border-radius: 24px;
background: linear-gradient(135deg,
var(--bg2, #090912) 0%,
rgba(20, 20, 40, 0.4) 100%);
position: relative;
overflow: hidden;
transition: transform .55s cubic-bezier(.23, 1, .32, 1),
border-color .4s,
box-shadow .4s,
opacity .5s;
opacity: 1;
transform: translateY(0);
z-index: 1;
--mx: 50%;
--my: 50%;
}
/* Cursor-following soft glow inside each card (lerped via JS) */
.benefit-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle 360px at var(--mx) var(--my),
var(--violet, #b8a47e) 0%,
var(--cyan, #8b7355) 22%,
transparent 62%);
opacity: 0;
transition: opacity .55s cubic-bezier(.23, 1, .32, 1);
pointer-events: none;
z-index: 0;
mix-blend-mode: screen;
}
.benefit-card:hover::before {
opacity: 0.16;
}
.benefit-card.active::before {
opacity: 0.10;
}
.benefit-card > * {
position: relative;
z-index: 1;
}
/* Pre-reveal state (only applied via JS) */
.benefit-card.pre-reveal {
opacity: 0.4;
transform: translateY(20px);
}
.benefit-card.in-view {
opacity: 1;
transform: translateY(0);
}
.benefit-card.active {
border-color: rgba(124, 58, 237, 0.32);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35), 0 0 40px rgba(124, 58, 237, 0.08);
background: linear-gradient(135deg,
rgba(124, 58, 237, 0.04) 0%,
rgba(6, 182, 212, 0.02) 100%);
}
/* Top gradient line that fills on active */
.benefit-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
transition: width .65s cubic-bezier(.23, 1, .32, 1);
pointer-events: none;
}
.benefit-card.active::after { width: 100%; }
/* Left marker dot (connects via line through ::before of column) */
.bc-marker {
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--bg, #04040a);
border: 2px solid rgba(255, 255, 255, 0.1);
z-index: 2;
transition: all .4s cubic-bezier(.23, 1, .32, 1);
}
.benefit-card.active .bc-marker {
background: var(--cyan, #06b6d4);
border-color: var(--cyan, #06b6d4);
box-shadow: 0 0 0 6px rgba(6, 182, 212, 0.15), 0 0 18px var(--cyan, #06b6d4);
}
/* Number */
.bc-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 4.2rem;
font-weight: 900;
letter-spacing: -.06em;
line-height: 0.85;
background: linear-gradient(135deg,
rgba(124, 58, 237, 0.25),
rgba(6, 182, 212, 0.25));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.25rem;
display: inline-block;
transition: background .5s;
}
.benefit-card.active .bc-num {
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bc-eyebrow {
font-family: 'Space Grotesk', monospace;
font-size: .7rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cyan, #06b6d4);
margin-bottom: .85rem;
display: inline-flex;
align-items: center;
gap: .55rem;
}
.bc-eyebrow::before {
content: '';
width: 18px;
height: 1px;
background: var(--cyan, #06b6d4);
}
.benefit-card h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.4rem, 2.3vw, 1.85rem);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.15;
margin-bottom: 1rem;
color: #fff;
}
.benefit-card p {
color: var(--muted, #64748b);
font-size: .94rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.bc-meta {
display: flex;
gap: .45rem;
flex-wrap: wrap;
}
.bc-meta span {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(241, 245, 249, 0.55);
font-family: 'Space Grotesk', monospace;
font-size: .67rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
padding: .35rem .85rem;
border-radius: 100px;
transition: all .35s;
}
.benefit-card.active .bc-meta span {
background: rgba(124, 58, 237, 0.08);
border-color: rgba(124, 58, 237, 0.18);
color: rgba(241, 245, 249, 0.8);
}
@media (max-width: 1100px) {
#benefits { padding: 5rem 0 6rem; }
.bs-container { grid-template-columns: 1fr; gap: 3rem; padding: 0 2rem; }
.bs-sticky-col { position: static; }
.bs-title { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.bs-scroll-col::before { display: none; }
.bc-marker { display: none; }
.benefit-card { padding: 2rem; }
.bc-num { font-size: 3rem; }
}
@media (max-width: 700px) {
.bs-progress-wrap { max-width: 100%; }
.bs-cta { font-size: .82rem; padding: .85rem 1.5rem; }
.benefit-card { padding: 1.75rem 1.5rem; }
}
/* ═══════════════════════════════════════════
╔══════════════════════════════════════════╗
║ LIQUID CURSOR + THEME PANEL ║
║ (hero-scoped liquid · side palette) ║
╚══════════════════════════════════════════╝
═══════════════════════════════════════════ */
/* ─── Hero background orbs: dramatic FlexLab purple atmosphere ─── */
#hero .o1 {
background: radial-gradient(circle,
color-mix(in srgb, var(--violet, #7c3aed) 28%, transparent),
transparent 60%) !important;
width: 800px !important;
height: 800px !important;
right: -180px !important;
left: auto !important;
top: -150px !important;
}
#hero .o2 {
background: radial-gradient(circle,
color-mix(in srgb, var(--cyan, #d4a857) 16%, transparent),
transparent 65%) !important;
}
#hero .o3 {
background: radial-gradient(circle,
color-mix(in srgb, var(--rose, #a78bfa) 14%, transparent),
transparent 65%) !important;
}
/* Subtle purple wash on the body for FlexLab depth */
body {
background:
radial-gradient(ellipse 100% 60% at 80% 20%,
color-mix(in srgb, var(--violet, #7c3aed) 8%, transparent),
transparent 60%),
var(--bg);
background-attachment: fixed;
}
/* ─── Hero badge: theme-aware vibrant accent ─── */
#hero .h-badge {
background: color-mix(in srgb, var(--violet, #b8a47e) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--violet, #b8a47e) 32%, transparent) !important;
color: color-mix(in srgb, var(--violet, #b8a47e) 85%, #ffffff) !important;
}
#hero .h-badge::before {
background: var(--violet, #b8a47e) !important;
box-shadow: 0 0 12px var(--violet, #b8a47e);
}
/* ─── Liquid hero (SVG goo blobs trailing cursor) ─── */
.hero-liquid {
position: absolute;
inset: 0;
filter: url(#liquid-goo);
pointer-events: none;
z-index: 0;
opacity: 0.55;
overflow: hidden;
mix-blend-mode: screen;
}
.liquid-blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
will-change: transform;
top: 0;
left: 0;
}
.lb-1 {
width: 252px; height: 252px;
background: radial-gradient(circle, var(--th-blob-1, #7c3aed) 0%, transparent 65%);
}
.lb-2 {
width: 210px; height: 210px;
background: radial-gradient(circle, var(--th-blob-2, #06b6d4) 0%, transparent 65%);
}
.lb-3 {
width: 154px; height: 154px;
background: radial-gradient(circle, var(--th-blob-3, #f43f5e) 0%, transparent 65%);
}
.lb-4 {
width: 182px; height: 182px;
background: radial-gradient(circle, var(--th-blob-4, #f59e0b) 0%, transparent 65%);
}
@media (hover: none), (max-width: 700px) {
.hero-liquid { display: none; }
}
/* ─── Theme panel trigger (left edge) ─── */
#theme-trigger {
position: fixed;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(8, 8, 16, 0.82);
border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9988;
color: var(--cyan, #06b6d4);
font-size: 1.3rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(124, 58, 237, 0.2);
transition: transform .55s cubic-bezier(.23,1,.32,1), background .3s, border-color .3s;
}
#theme-trigger:hover {
background: rgba(124, 58, 237, 0.18);
border-color: var(--cyan, #06b6d4);
transform: translateY(-50%) scale(1.08);
}
#theme-trigger.active {
transform: translateY(-50%) translateX(320px);
background: rgba(124, 58, 237, 0.25);
}
#theme-trigger svg {
width: 22px;
height: 22px;
transition: transform .5s cubic-bezier(.23,1,.32,1);
}
#theme-trigger.active svg { transform: rotate(180deg); }
.tt-pulse {
position: absolute;
inset: -2px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--cyan, #06b6d4);
opacity: 0.4;
animation: tt-pulse 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes tt-pulse {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1.7); opacity: 0; }
}
/* ─── Theme panel ─── */
#theme-panel {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 320px;
background: rgba(6, 6, 14, 0.92);
-webkit-backdrop-filter: blur(28px) saturate(140%);
backdrop-filter: blur(28px) saturate(140%);
border-right: 1px solid rgba(255, 255, 255, 0.08);
z-index: 9987;
transform: translateX(-100%);
transition: transform .7s cubic-bezier(.23, 1, .32, 1);
display: flex;
flex-direction: column;
padding: 2.5rem 1.75rem;
overflow-y: auto;
box-shadow: 30px 0 80px rgba(0, 0, 0, 0.45);
}
#theme-panel.open { transform: translateX(0); }
.tp-eyebrow {
display: inline-flex;
align-items: center;
gap: .55rem;
font-family: 'Space Grotesk', monospace;
font-size: .65rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cyan, #06b6d4);
margin-bottom: .85rem;
}
.tp-eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: linear-gradient(90deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
}
.tp-header h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.85rem;
font-weight: 900;
letter-spacing: -.03em;
line-height: 1.05;
margin-bottom: .6rem;
}
.tp-header h3 em {
font-style: italic;
font-weight: 400;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tp-header p {
color: rgba(241, 245, 249, 0.5);
font-size: .82rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.tp-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
margin: 0 0 1.25rem;
}
.tp-themes {
display: flex;
flex-direction: column;
gap: .55rem;
}
.tp-theme {
display: flex;
align-items: center;
gap: 1rem;
padding: .9rem 1.1rem;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 14px;
cursor: pointer;
text-align: left;
color: #fff;
font-family: inherit;
transition: all .35s cubic-bezier(.23, 1, .32, 1);
position: relative;
overflow: hidden;
}
.tp-theme::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent, rgba(124, 58, 237, 0.05));
opacity: 0;
transition: opacity .3s;
}
.tp-theme:hover {
border-color: rgba(124, 58, 237, 0.28);
transform: translateX(4px);
}
.tp-theme:hover::before { opacity: 1; }
.tp-theme.active {
background: rgba(124, 58, 237, 0.1);
border-color: rgba(124, 58, 237, 0.45);
}
.tp-swatch {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
}
.tp-info {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}
.tp-name {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: .92rem;
letter-spacing: -.01em;
line-height: 1.2;
}
.tp-desc {
font-size: .65rem;
color: rgba(241, 245, 249, 0.4);
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 600;
margin-top: .25rem;
}
.tp-check {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
display: flex;
align-items: center;
justify-content: center;
font-size: .65rem;
color: #fff;
font-weight: 900;
opacity: 0;
transform: scale(0.6);
transition: all .35s cubic-bezier(.23, 1, .32, 1);
position: relative;
}
.tp-theme.active .tp-check {
opacity: 1;
transform: scale(1);
}
.tp-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(241, 245, 249, 0.6);
font-size: 1.1rem;
cursor: pointer;
transition: all .3s;
display: flex;
align-items: center;
justify-content: center;
}
.tp-close:hover {
background: rgba(244, 63, 94, 0.15);
color: var(--rose, #f43f5e);
border-color: rgba(244, 63, 94, 0.3);
transform: rotate(90deg);
}
.tp-footer {
margin-top: auto;
padding-top: 2rem;
font-size: .7rem;
color: rgba(241, 245, 249, 0.35);
letter-spacing: .04em;
line-height: 1.6;
}
.tp-footer strong {
color: var(--cyan, #06b6d4);
font-weight: 700;
}
@media (max-width: 700px) {
#theme-trigger {
left: 1rem;
width: 44px;
height: 44px;
font-size: 1.05rem;
}
#theme-trigger.active {
transform: translateY(-50%) translateX(calc(82vw - 1rem));
}
#theme-panel {
width: 82vw;
}
}
/* ═══════════════════════════════════════════
╔══════════════════════════════════════════╗
║ HENCUBED-INSPIRED ADDITIONS ║
║ (Giant Type · Mono Labels · Showcase) ║
╚══════════════════════════════════════════╝
═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
21. GIANT WATERMARK TYPE (behind section content)
═══════════════════════════════════════════ */
.giant-mark {
position: absolute;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(8rem, 22vw, 22rem);
font-weight: 900;
letter-spacing: -.08em;
line-height: 0.82;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
pointer-events: none;
user-select: none;
z-index: 0;
white-space: nowrap;
}
.giant-mark-tr { top: -1rem; right: 3rem; }
.giant-mark-tl { top: -1rem; left: 3rem; }
.giant-mark-br { bottom: -1rem; right: 3rem; }
.giant-mark-bl { bottom: -1rem; left: 3rem; }
.giant-mark-mid { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.giant-mark.fill {
-webkit-text-stroke: 0;
color: rgba(255, 255, 255, 0.025);
}
.giant-mark.scroll-shift {
transition: transform 0.1s linear;
}
@media(max-width:700px) {
.giant-mark { font-size: 8rem; right: 1rem !important; left: auto !important; }
}
/* ═══════════════════════════════════════════
22. SECTION INDEX BADGE (mono-style)
═══════════════════════════════════════════ */
.section-index {
display: inline-flex;
align-items: center;
gap: .85rem;
font-family: 'Space Grotesk', monospace;
font-size: .7rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted, #64748b);
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.section-index::before {
content: '';
width: 32px;
height: 1px;
background: linear-gradient(90deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
flex-shrink: 0;
}
.section-index .si-num {
font-size: 1.35rem;
font-weight: 900;
letter-spacing: -.02em;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-index .si-sep { opacity: 0.3; }
.section-index .si-total { opacity: 0.5; }
/* ═══════════════════════════════════════════
23. COUNTER-ROTATING MARQUEE BAND
═══════════════════════════════════════════ */
.marquee-band {
position: relative;
overflow: hidden;
background: var(--bg2, #090912);
border-top: 1px solid var(--border, rgba(255,255,255,0.07));
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
padding: 1.5rem 0;
display: flex;
flex-direction: column;
gap: .85rem;
}
.marquee-band .mb-row {
display: flex;
white-space: nowrap;
width: max-content;
animation: mb-roll 28s linear infinite;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.5rem, 3vw, 2.5rem);
font-weight: 800;
letter-spacing: -.02em;
gap: 2rem;
}
.marquee-band .mb-row.reverse { animation-direction: reverse; animation-duration: 36s; }
.marquee-band .mb-row.thin { font-weight: 300; font-style: italic; opacity: 0.55; }
.marquee-band .mb-row.outline {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.4);
}
.marquee-band .mb-item {
display: flex;
align-items: center;
gap: 2rem;
padding-right: 2rem;
}
.marquee-band .mb-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
flex-shrink: 0;
}
@keyframes mb-roll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ═══════════════════════════════════════════
24. PROJECT SHOWCASE STRIP (hencubed style)
═══════════════════════════════════════════ */
.showcase-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding: 0 5rem;
margin: 3rem 0 0;
}
.shc-item {
position: relative;
aspect-ratio: 4/5;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
background: var(--bg2, #090912);
border: 1px solid var(--border, rgba(255,255,255,0.07));
transition: transform .55s cubic-bezier(.23,1,.32,1), border-color .35s;
}
.shc-item:hover {
transform: translateY(-6px);
border-color: rgba(124,58,237,0.35);
}
.shc-thumb {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .75rem;
transition: transform .8s cubic-bezier(.23,1,.32,1), filter .5s;
}
.shc-item:hover .shc-thumb {
transform: scale(1.08);
filter: blur(2px) brightness(0.55);
}
.shc-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.75rem;
opacity: 0;
transform: translateY(15%);
transition: opacity .45s, transform .65s cubic-bezier(.23,1,.32,1);
background: linear-gradient(to top, rgba(8,8,16,0.96) 30%, transparent);
z-index: 2;
}
.shc-item:hover .shc-overlay {
opacity: 1;
transform: translateY(0);
}
.shc-cat {
font-family: 'Space Grotesk', monospace;
font-size: .65rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cyan, #06b6d4);
margin-bottom: .35rem;
}
.shc-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -.02em;
color: #fff;
margin-bottom: .25rem;
}
.shc-meta {
font-size: .72rem;
color: rgba(241, 245, 249, 0.5);
display: flex;
gap: .5rem;
}
.shc-meta span:not(:first-child)::before {
content: '·';
margin-right: .5rem;
opacity: 0.6;
}
.shc-arrow {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
color: #fff;
opacity: 0;
transform: rotate(-45deg) scale(0.7);
transition: all .45s cubic-bezier(.23,1,.32,1);
z-index: 3;
}
.shc-item:hover .shc-arrow {
opacity: 1;
transform: rotate(0deg) scale(1);
}
@media(max-width:1100px) {
.showcase-strip { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; }
}
@media(max-width:700px) {
.showcase-strip { grid-template-columns: 1fr; padding: 0 1.5rem; }
}
/* ═══════════════════════════════════════════
25. MASSIVE DISPLAY HEADING (hencubed-scale)
═══════════════════════════════════════════ */
.display-massive {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(4rem, 13vw, 14rem);
font-weight: 900;
letter-spacing: -.06em;
line-height: 0.9;
position: relative;
z-index: 1;
}
.display-massive em {
font-style: italic;
font-weight: 300;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.display-massive .stroke {
color: transparent;
-webkit-text-stroke: 2px rgba(255,255,255,0.4);
}
/* ═══════════════════════════════════════════
26. PREMIUM PULL QUOTE (testimonial alt)
═══════════════════════════════════════════ */
.pull-quote {
position: relative;
padding: 3rem 2rem 2rem;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 400;
font-style: italic;
line-height: 1.4;
letter-spacing: -.02em;
color: rgba(241, 245, 249, 0.9);
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.pull-quote::before {
content: '"';
position: absolute;
top: -2rem;
left: 50%;
transform: translateX(-50%);
font-family: 'Space Grotesk', sans-serif;
font-size: 8rem;
font-weight: 900;
background: linear-gradient(135deg, var(--violet, #7c3aed), var(--cyan, #06b6d4));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
opacity: 0.7;
}
.pull-quote-author {
margin-top: 2rem;
font-family: 'Inter', sans-serif;
font-size: .82rem;
font-style: normal;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cyan, #06b6d4);
}
.pull-quote-author::before {
content: '— ';
opacity: 0.6;
}
/* ═══════════════════════════════════════════
27. TAG STRIP (mono technical labels)
═══════════════════════════════════════════ */
.tag-strip {
display: flex;
align-items: center;
gap: 1.5rem;
font-family: 'Space Grotesk', monospace;
font-size: .7rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted, #64748b);
flex-wrap: wrap;
}
.tag-strip span { position: relative; padding-left: 1.1rem; }
.tag-strip span::before {
content: '+';
position: absolute;
left: 0;
color: var(--cyan, #06b6d4);
font-weight: 900;
}
/* ═══════════════════════════════════════════
28. PROJECT CASE BLOCK (image + text)
═══════════════════════════════════════════ */
.case-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
padding: 6rem 0;
border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}
.case-block:first-child { border-top: none; }
.case-block.flip > :first-child { order: 2; }
.case-block-visual {
aspect-ratio: 4/3;
border-radius: 22px;
overflow: hidden;
background: var(--bg2);
position: relative;
border: 1px solid var(--border);
}
.case-block-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 6rem;
font-weight: 900;
letter-spacing: -.04em;
line-height: 1;
background: linear-gradient(135deg, var(--violet), var(--cyan));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.case-block h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.1;
margin-bottom: 1.25rem;
}
.case-block p {
color: var(--muted);
font-size: 1rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
@media(max-width:1100px) {
.case-block { grid-template-columns: 1fr; gap: 2.5rem; }
.case-block.flip > :first-child { order: 0; }
}
/* Final media query (reduced motion still applies) */
/* ═══════════════════════════════════════════════════════
PREMIUM ANIMATION LAYER v2 — Webflow-grade effects
Particle Network · Cursor Trail · Shimmer · Aurora
Typewriter · Glitch Labels · Holo Title · Beam
═══════════════════════════════════════════════════════ */
/* ── P3. CURSOR TRAIL ── */
.c-trail {
position: fixed;
width: 6px; height: 6px;
border-radius: 50%;
pointer-events: none;
z-index: 9993;
background: var(--violet, #7c3aed);
opacity: calc(0.65 - var(--ti) * 0.058);
transform: translate(-50%, -50%);
mix-blend-mode: screen;
will-change: transform;
transition: opacity .1s;
}
/* ── P2. TYPEWRITER CURSOR ── */
.tw-cur {
display: inline-block;
width: 2px; height: 1em;
background: var(--cyan, #06b6d4);
vertical-align: middle;
margin-left: 2px;
animation: tw-blink 1s step-end infinite;
border-radius: 1px;
}
@keyframes tw-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── P4. CARD SHIMMER ── */
.c-shimmer {
position: absolute;
top: 0; left: -120%;
width: 55%; height: 100%;
background: linear-gradient(
105deg,
transparent 35%,
rgba(255,255,255,.05) 50%,
transparent 65%
);
transform: skewX(-18deg);
transition: left .9s cubic-bezier(.23, 1, .32, 1);
pointer-events: none;
z-index: 10;
border-radius: inherit;
}
.lab-card:hover .c-shimmer,
.feat-card:hover .c-shimmer,
.h-card:hover .c-shimmer,
.tcard:hover .c-shimmer,
.bc-finish:hover .c-shimmer,
.bc-price-card:hover .c-shimmer {
left: 130%;
}
/* ── P8. AURORA ORBS ── */
.aurora-wrap {
position: absolute; inset: 0;
pointer-events: none; overflow: hidden;
z-index: 0;
}
.aurora-orb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
transform: translate(-50%, -50%);
will-change: transform;
}
@keyframes aurora-drift {
0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
33% { transform: translate(-50%, -50%) scale(1.15) rotate(8deg); }
66% { transform: translate(-50%, -50%) scale(.92) rotate(-5deg); }
}
/* ── P10. HERO BEAM ── */
#hero-beam {
position: absolute; inset: 0;
pointer-events: none; z-index: 1;
opacity: 0;
transition: opacity .6s cubic-bezier(.23, 1, .32, 1);
border-radius: inherit;
}
/* ── P7. REVEAL OBSERVER (.rv) ── */
.rv {
opacity: 0;
transform: translateY(28px);
transition:
opacity .7s cubic-bezier(.22, 1, .36, 1),
transform .7s cubic-bezier(.22, 1, .36, 1);
}
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; }
.rv.d4 { transition-delay: .32s; }
.rv.d5 { transition-delay: .40s; }
.rv-in { opacity: 1 !important; transform: translateY(0) !important; }
/* ── P6. HOLOGRAPHIC HERO TITLE ── */
.h-title {
transition: filter .8s ease;
}
/* ── P5. GLITCH LABELS — smooth cursor on interactive text ── */
.lab-num, .s-label, .section-index, .bc-lbl {
cursor: default;
font-variant-numeric: tabular-nums;
transition: color .2s;
}
/* ── STAT COUNTER enhanced ── */
.count-target {
display: inline-block;
transition: color .3s;
}
[data-count] {
font-variant-numeric: tabular-nums;
}
/* ── HERO badge typing area ── */
.typing-cursor {
display: inline;
font-weight: 700;
color: var(--cyan, #06b6d4);
}
/* ── ENHANCED CARD HOVER depth ── */
.lab-card, .feat-card, .tcard, .h-card, .bc-finish, .bc-price-card {
transform-style: preserve-3d;
}
/* ── HERO PARTICLE CANVAS ── */
#hero-particles {
will-change: auto;
}
/* ── SECTION ENTRANCE (blvckcard.html uses .rv too) ── */
@media (prefers-reduced-motion: reduce) {
.rv, .rv-in,
.c-trail, .aurora-orb, .aurora-wrap,
#hero-particles, #hero-beam {
display: none !important;
}
.c-shimmer { display: none !important; }
}
/* ── MOBILE CLEAN-UP ── */
@media (max-width: 700px) {
.c-trail { display: none !important; }
#hero-beam { display: none !important; }
.aurora-orb { display: none !important; }
#hero-particles { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
PREMIUM REDESIGN — Dark Purple / Black / Gold / Silver Theme
Deep editorial look inspired by luxury Webflow showcase sites
═══════════════════════════════════════════════════════════════ */
/* ── Scrollbar — gold accent ── */
::-webkit-scrollbar-thumb { background: var(--violet, #6d28d9) !important; }
/* ── Section label (s-label) — gold uppercase ── */
.s-label {
color: var(--gold, #d4af37) !important;
letter-spacing: .16em;
}
.s-label::before {
background: var(--gold, #d4af37) !important;
}
/* ── Section title grad spans — violet→gold ── */
.grad {
background: linear-gradient(135deg, var(--violet, #6d28d9), var(--gold, #d4af37)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* ── Lab card accent top line & glow — harmonised palette ── */
/* Purple cards stay as is; others get gold/silver treatment */
.lab-card:hover {
background: rgba(10, 8, 20, 0.99) !important;
}
/* ── Lab link color — gold ── */
.lab-link {
color: var(--gold, #d4af37) !important;
}
/* ── Stat bar ── */
.stat-item h3 {
background: linear-gradient(135deg, #fff 0%, var(--gold-light, #f5d77b) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Process steps — richer look ── */
.p-step {
position: relative;
padding: 2.5rem 2rem 2rem;
border: 1px solid rgba(212, 175, 55, 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.02);
transition: border-color .35s, background .35s;
}
.p-step:hover {
border-color: rgba(212, 175, 55, 0.32);
background: rgba(212, 175, 55, 0.03);
}
.p-num {
background: linear-gradient(135deg, var(--violet, #6d28d9), var(--gold, #d4af37)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* ── Testimonial cards — premium glass ── */
.tcard {
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.tcard:hover {
border-color: rgba(212, 175, 55, 0.3) !important;
background: rgba(212, 175, 55, 0.04) !important;
transform: translateY(-6px) !important;
}
.tcard:hover::before {
background: linear-gradient(135deg,
rgba(109, 40, 217, 0.06),
rgba(212, 175, 55, 0.04)) !important;
opacity: 1 !important;
}
.stars {
color: var(--gold, #d4af37) !important;
font-size: 1rem !important;
letter-spacing: .1em !important;
}
/* Avatar — gold gradient ── */
.avt {
background: linear-gradient(135deg,
var(--violet, #6d28d9) 0%,
var(--gold, #d4af37) 100%) !important;
color: #fff !important;
}
/* ── CTA Band — full premium treatment ── */
.cta-band {
position: relative;
overflow: hidden;
text-align: center;
padding: 9rem 5rem 10rem;
background: var(--bg2) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Dramatic radial gold glow behind the CTA */
.cta-band::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 100%,
rgba(109, 40, 217, 0.28) 0%, transparent 60%),
radial-gradient(ellipse 60% 40% at 50% 0%,
rgba(212, 175, 55, 0.12) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
}
/* Thin gold top & bottom hairlines */
.cta-band::after {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
pointer-events: none;
z-index: 1;
}
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 {
font-family: var(--ff-d);
font-size: clamp(2.5rem, 6vw, 5.5rem);
font-weight: 900;
letter-spacing: -.04em;
line-height: 1;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #fff 30%, var(--gold-light, #f5d77b) 70%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.cta-band p {
font-size: 1.05rem;
color: var(--muted);
max-width: 520px;
margin: 0 auto 3rem;
line-height: 1.75;
}
.cta-btns {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
/* ── Section divider hairline ── */
.section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 175, 55, 0.22) 20%,
rgba(109, 40, 217, 0.28) 50%,
rgba(212, 175, 55, 0.22) 80%,
transparent 100%);
margin: 0;
border: none;
}
/* ── Footer ── */
footer.footer {
background: var(--bg) !important;
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 6rem 5rem 4rem;
}
footer.footer h5 {
color: rgba(255, 255, 255, 0.85) !important;
font-size: .75rem !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
margin-bottom: 1.25rem !important;
font-family: var(--ff-d) !important;
}
footer.footer a {
color: var(--muted) !important;
transition: color .25s !important;
}
footer.footer a:hover {
color: var(--gold, #d4af37) !important;
}
.f-brand p {
color: var(--muted);
font-size: .85rem;
line-height: 1.75;
max-width: 280px;
margin-bottom: 1.5rem;
}
/* Social icons */
.soc {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
color: var(--muted) !important;
transition: border-color .25s, color .25s, background .25s !important;
}
.soc:hover {
border-color: rgba(212, 175, 55, 0.4) !important;
color: var(--gold, #d4af37) !important;
background: rgba(212, 175, 55, 0.06) !important;
}
.f-bottom {
background: var(--bg) !important;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.5rem 5rem;
font-size: .75rem;
color: var(--muted);
}
/* ── Marquee dot — gold ── */
.m-dot {
background: var(--gold, #d4af37) !important;
opacity: .7;
}
/* ── Nav link hover — gold ── */
.nav-links a:hover,
.nav-links a:focus {
color: var(--gold, #d4af37) !important;
}
/* ── Scroll progress bar — gold→violet ── */
#sp-fill {
background: linear-gradient(90deg, var(--gold, #d4af37), var(--violet, #6d28d9)) !important;
}
/* ── Hero badge border — gold ── */
.h-badge {
border-color: rgba(212, 175, 55, 0.35) !important;
background: rgba(212, 175, 55, 0.06) !important;
color: var(--gold-light, #f5d77b) !important;
}
.h-badge::before {
background: var(--gold, #d4af37) !important;
animation: blink 2s infinite;
}
/* ── Hero title gradient — white→gold shimmer ── */
.h-title {
background: linear-gradient(
135deg,
#ffffff 0%,
rgba(255,255,255,0.95) 40%,
var(--gold-light, #f5d77b) 70%,
#ffffff 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: filter .8s ease;
}
/* ── Section index num — gold ── */
.si-num {
background: linear-gradient(135deg, var(--violet, #6d28d9), var(--gold, #d4af37)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* ── Floating dock — glass dark ── */
#floating-dock {
background: rgba(6, 4, 13, 0.75) !important;
border-color: rgba(212, 175, 55, 0.12) !important;
}
#floating-dock a:hover,
#floating-dock button:hover {
background: rgba(212, 175, 55, 0.1) !important;
color: var(--gold, #d4af37) !important;
}
#floating-dock .active {
background: rgba(109, 40, 217, 0.25) !important;
color: var(--gold-light, #f5d77b) !important;
}
/* ── Theme trigger button — minimal silver ── */
#theme-trigger {
opacity: .45 !important;
background: rgba(6, 4, 13, 0.6) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
transform: scale(0.85) !important;
}
#theme-trigger:hover {
opacity: .85 !important;
transform: scale(0.9) !important;
}
/* ── Preloader counter — gold ── */
.pre-counter {
color: var(--gold, #d4af37) !important;
}
/* ── Scroll hint line — gold gradient ── */
.scroll-hint i {
background: linear-gradient(to bottom, var(--gold, #d4af37), transparent) !important;
}
/* ── Benefits section sticky title ── */
.bs-title em {
background: linear-gradient(135deg, var(--violet, #6d28d9), var(--gold, #d4af37)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* ── Benefits card — gold accent ── */
.benefit-card .bc-eyebrow {
color: var(--gold, #d4af37) !important;
}
.benefit-card .bc-eyebrow::before {
background: var(--gold, #d4af37) !important;
}
.benefit-card.active {
border-color: rgba(212, 175, 55, 0.3) !important;
}
.benefit-card.active .bc-num {
background: linear-gradient(135deg, var(--violet, #6d28d9), var(--gold, #d4af37)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.benefit-card.active .bc-marker {
background: var(--gold, #d4af37) !important;
border-color: var(--gold, #d4af37) !important;
box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.12),
0 0 18px rgba(212, 175, 55, 0.45) !important;
}
.bs-cta {
/* Always gold pill — theme-independent, max contrast */
background: linear-gradient(135deg, #d4af37 0%, #f5d77b 50%, #c49020 100%) !important;
color: #06040d !important; /* dark text on gold = always visible */
border: none !important;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.28) !important;
}
.bs-cta:hover {
background: linear-gradient(135deg, #c49020 0%, #d4af37 50%, #f5d77b 100%) !important;
color: #06040d !important;
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(212, 175, 55, 0.42) !important;
}
.bs-progress-fill {
background: linear-gradient(90deg, var(--violet, #6d28d9), var(--gold, #d4af37)) !important;
}
/* ── BLVCK section — keep its own gold theme, ensure it works ── */
#blvck-section {
background: #000 !important;
}
/* ── Typing cursor — gold tint ── */
.typing-cursor {
color: var(--gold, #d4af37) !important;
}
/* ── SECTION ENTRANCE mobile ── */
@media (max-width: 900px) {
.cta-band { padding: 6rem 2rem 7rem; }
footer.footer { padding: 4rem 2rem 3rem; }
.f-bottom { padding: 1.25rem 2rem; }
}
@media (max-width: 700px) {
.p-step { padding: 1.75rem 1.5rem 1.5rem; margin-bottom: .75rem; }
}
/* ═══════════════════════════════════════════
╔══════════════════════════════════════════╗
║ MOBILE COMPACTION LAYER ║
║ (compress vertical rhythm on phones ║
║ so clients don't scroll forever) ║
╚══════════════════════════════════════════╝
═══════════════════════════════════════════ */
/* ── Tablet/Phone (≤900px): cut inline section padding in half ── */
@media (max-width: 900px) {
/* Inline-styled sections — override 9rem/8rem/7rem/6rem/5rem verticals */
section[style*="padding:9rem 5rem"],
section[style*="padding: 9rem 5rem"] { padding: 3.5rem 1.25rem !important; }
section[style*="padding:8rem 5rem"],
section[style*="padding: 8rem 5rem"] { padding: 3rem 1.25rem !important; }
section[style*="padding:7rem 5rem"],
section[style*="padding: 7rem 5rem"] { padding: 2.75rem 1.25rem !important; }
section[style*="padding:6rem 5rem"],
section[style*="padding: 6rem 5rem"] { padding: 2.5rem 1.25rem !important; }
section[style*="padding:5rem 5rem"],
section[style*="padding: 5rem 5rem"] { padding: 2.5rem 1.25rem !important; }
section[style*="padding:8rem 5rem 6rem"] { padding: 3rem 1.25rem 2rem !important; }
section[style*="padding:5rem 5rem 9rem"] { padding: 2.5rem 1.25rem 3.5rem !important; }
/* Tighter section titles on mobile */
.s-title { font-size: clamp(1.55rem, 6vw, 2.1rem) !important; line-height: 1.15 !important; margin-bottom: .65rem !important; }
.s-sub { font-size: .92rem !important; line-height: 1.5 !important; margin-bottom: 1.75rem !important; }
.s-label { font-size: .65rem !important; margin-bottom: .85rem !important; }
/* Page hero — compact */
.page-hero { padding: 5.5rem 1.25rem 2.25rem !important; }
.page-hero h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; line-height: 1.1 !important; margin-bottom: .8rem !important; }
.page-hero p { font-size: .95rem !important; line-height: 1.5 !important; }
.page-hero-inner { max-width: 100% !important; }
/* Home hero */
#hero { min-height: auto !important; padding: 5rem 1.25rem 3rem !important; }
#hero .h-title, #hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem) !important; line-height: 1.05 !important; }
#hero .h-tagline { font-size: 1rem !important; }
#hero .h-sub { font-size: .92rem !important; margin-bottom: 1.25rem !important; }
/* Stat bar — denser */
.stat-bar { padding: 1.75rem 1rem !important; gap: .75rem !important; }
.stat-item { padding: .5rem .25rem !important; }
.stat-item h3 { font-size: 1.6rem !important; margin-bottom: .15rem !important; }
.stat-item p { font-size: .68rem !important; letter-spacing: .04em !important; }
/* Lab cards — compact */
.labs-grid { gap: .85rem !important; padding: 0 .25rem !important; }
.labs-grid .lab-card { padding: 1.5rem 1.25rem !important; min-height: auto !important; }
.lab-icon { width: 44px !important; height: 44px !important; margin-bottom: .85rem !important; }
.lab-icon svg { width: 24px !important; height: 24px !important; }
/* Service cards (svc-big) */
.svc-big { gap: .85rem !important; }
.svc-card { padding: 1.5rem 1.25rem !important; }
.svc-card h3 { font-size: 1.1rem !important; margin: .5rem 0 .4rem !important; }
.svc-card p { font-size: .88rem !important; line-height: 1.5 !important; }
.svc-num { font-size: 2.2rem !important; }
.svc-icon { width: 36px !important; height: 36px !important; font-size: 1.05rem !important; }
.svc-tags { gap: .35rem !important; margin-top: .65rem !important; }
.svc-tags .tag { font-size: .65rem !important; padding: .25rem .55rem !important; }
/* Process steps */
.p-step { padding: 1.25rem 1.1rem !important; margin-bottom: .5rem !important; }
.p-step h3 { font-size: 1.05rem !important; margin-bottom: .3rem !important; }
.p-step p { font-size: .85rem !important; line-height: 1.45 !important; }
.p-num { font-size: 2.4rem !important; }
/* Process row container padding */
#process, .process-section { padding: 3rem 1.25rem !important; }
/* Event types, gift products, product cards */
.event-types, .gift-products, .product-cards { gap: .85rem !important; }
.etype, .gift-card, .pcard, .pr-card { padding: 1.4rem 1.2rem !important; }
.etype h3, .gift-card h3, .pcard h3, .pr-card h3 { font-size: 1.05rem !important; margin: .5rem 0 .35rem !important; }
.etype p, .gift-card p, .pcard p, .pr-card p { font-size: .85rem !important; line-height: 1.45 !important; }
.etype-img, .pr-thumb img { max-height: 140px !important; object-fit: cover !important; }
.etype-tags, .pr-tags { gap: .3rem !important; margin-top: .55rem !important; }
/* Feature image margins compressed */
.feat-grid-full { margin: 1.5rem 1rem !important; }
.feat-img-wrap { border-radius: 14px !important; }
.feat-caption { bottom: .85rem !important; left: 1rem !important; right: 1rem !important; }
.feat-caption .feat-eyebrow { font-size: .58rem !important; margin-bottom: .2rem !important; }
.feat-caption .feat-title { font-size: .85rem !important; line-height: 1.25 !important; }
/* Showcase mosaic compact */
#showcase { padding: 3.5rem 1.25rem 2.5rem !important; }
.showcase-grid { gap: .75rem !important; padding: 0 !important; }
/* Why-FLex / sticky benefits */
#benefits { padding: 3rem 0 3.5rem !important; }
.bs-container { gap: 1.5rem !important; padding: 0 1.25rem !important; }
.bs-title { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; line-height: 1.1 !important; }
.bs-sub { font-size: .9rem !important; margin-top: .65rem !important; }
.benefit-card { padding: 1.4rem 1.2rem !important; }
.bc-num { font-size: 2.4rem !important; }
.benefit-card h3 { font-size: 1.05rem !important; margin: .35rem 0 !important; }
.benefit-card p { font-size: .85rem !important; line-height: 1.45 !important; }
/* Marquee — smaller text */
.marquee-wrap { padding: 1.25rem 0 !important; }
.marquee-track .m-item, .marquee .m-item { font-size: 1.5rem !important; }
/* BLVCKCARD spotlight */
#blvck-section { padding: 4rem 1.25rem !important; }
.blvck-headline, #blvck-section h2 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; line-height: 1.1 !important; }
/* CTA band */
.cta-band { padding: 3rem 1.25rem !important; }
.cta-band h2 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; margin-bottom: .8rem !important; }
.cta-band p { font-size: .9rem !important; margin-bottom: 1.5rem !important; }
/* Testimonials */
#testimonials { padding: 3rem 1.25rem !important; }
.tcard { padding: 1.4rem 1.2rem !important; }
.tcard p { font-size: .9rem !important; line-height: 1.5 !important; }
/* Footer */
footer.footer { padding: 2.75rem 1.25rem 1.5rem !important; gap: 1.75rem !important; }
.f-bottom { padding: 1rem 1.25rem !important; font-size: .72rem !important; }
footer.footer h4 { font-size: .85rem !important; margin-bottom: .65rem !important; }
footer.footer a, footer.footer p { font-size: .82rem !important; line-height: 1.55 !important; }
/* Section dividers — smaller */
.section-divider { padding: 1.25rem 1.25rem !important; }
.section-index { font-size: .65rem !important; gap: .35rem !important; }
/* Section padding for any plain section */
section { scroll-margin-top: 60px; }
/* Compact buttons */
.btn-p, .btn-g { padding: .8rem 1.4rem !important; font-size: .85rem !important; }
/* Reduce body line gap on mobile */
body { line-height: 1.5; }
}
/* ── Phone (≤640px): final squeeze ── */
@media (max-width: 640px) {
section[style*="padding:9rem 5rem"],
section[style*="padding: 9rem 5rem"] { padding: 2.75rem 1rem !important; }
section[style*="padding:8rem 5rem"],
section[style*="padding: 8rem 5rem"] { padding: 2.5rem 1rem !important; }
section[style*="padding:7rem 5rem"],
section[style*="padding: 7rem 5rem"] { padding: 2.25rem 1rem !important; }
/* Single-col labs already collapses elsewhere — keep gap tight */
.labs-grid .lab-card { padding: 1.25rem 1.1rem !important; }
.lab-card h3, .l-title { font-size: 1.1rem !important; margin: .5rem 0 .35rem !important; }
.lab-card p, .l-desc { font-size: .85rem !important; line-height: 1.45 !important; }
/* Service tags more compact */
.interactive-details .details-toggle { font-size: .78rem !important; padding: .55rem .9rem !important; }
.details-panel { padding: .85rem !important; }
.option-dropdown { font-size: .85rem !important; padding: .6rem .8rem !important; }
.btn-inquiry, .btn-appointment { font-size: .8rem !important; padding: .6rem .85rem !important; }
/* Hero buttons stack with smaller gap */
.page-hero-inner > div[style*="flex"] { gap: .55rem !important; }
/* Stats — keep 2x2 but shrink */
.stat-bar { grid-template-columns: 1fr 1fr !important; padding: 1.25rem .75rem !important; gap: .5rem !important; }
.stat-item h3 { font-size: 1.35rem !important; }
.stat-item p { font-size: .62rem !important; }
/* Page hero further squeeze */
.page-hero { padding: 4.75rem 1rem 1.75rem !important; }
.page-hero h1 { font-size: clamp(1.7rem, 9vw, 2.2rem) !important; }
/* Contact page form */
.contact-grid, #contact-form { gap: 1rem !important; }
.contact-grid input, .contact-grid textarea, .contact-grid select { padding: .75rem .85rem !important; font-size: .9rem !important; }
/* BLVCKCARD card padding */
.blvck-card { transform: scale(.95) !important; }
}
/* ── Tiny phones (≤380px): extra-tight ── */
@media (max-width: 380px) {
.stat-item h3 { font-size: 1.15rem !important; }
.page-hero h1 { font-size: 1.6rem !important; }
.s-title { font-size: 1.4rem !important; }
#hero .h-title, #hero h1 { font-size: 2rem !important; }
}
/* ═══════════════════════════════════════════════════════════
╔══════════════════════════════════════════════════════════╗
║ MOBILE RESTRUCTURE LAYER (≤900px) — anti-scroll-fatigue ║
║ · 2-col lab cards (was 6 stacked) ║
║ · 2-col service grids (was 6-9 stacked) ║
║ · Horizontal-scroll snap showcases & stats ║
║ · Hide hero feature images on lab pages ║
║ · Compress process to dense 2-col ║
║ · Strip non-essential filler text on cards ║
╚══════════════════════════════════════════════════════════╝
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ── 1. LABS GRID: 6 cards stacked → compact 2-col mini-cards ── */
.labs-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .6rem !important;
padding: 0 .25rem !important;
}
.labs-grid .lab-card {
padding: 1.1rem .85rem 1rem !important;
min-height: auto !important;
border-radius: 16px !important;
}
.labs-grid .lab-card h3 { font-size: .95rem !important; margin: .55rem 0 .15rem !important; line-height: 1.15 !important; }
/* Hide the long description on mobile — keep icon + name + arrow */
.labs-grid .lab-card p { display: none !important; }
.labs-grid .lab-card .lab-num { font-size: .55rem !important; top: .65rem !important; right: .8rem !important; }
.labs-grid .lab-card .lab-icon { width: 38px !important; height: 38px !important; margin-bottom: .55rem !important; border-radius: 11px !important; }
.labs-grid .lab-card .lab-icon svg { width: 22px !important; height: 22px !important; }
.labs-grid .lab-card .lab-link { font-size: .72rem !important; margin-top: .3rem !important; }
/* ── 2. SHOWCASE GRID: 4 stacked images → horizontal scroll-snap reel ── */
#showcase .showcase-grid {
display: flex !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scroll-padding: 1rem !important;
gap: .75rem !important;
padding: 0 1rem .5rem !important;
margin: 0 -1.25rem !important;
scrollbar-width: none !important;
}
#showcase .showcase-grid::-webkit-scrollbar { display: none !important; }
#showcase .showcase-grid .feat-img-wrap {
flex: 0 0 78% !important;
scroll-snap-align: start !important;
grid-row: auto !important;
grid-column: auto !important;
}
#showcase .showcase-grid .feat-img-wrap .feat-img { aspect-ratio: 4/3 !important; }
/* Hint that it scrolls */
#showcase::after {
content: '← swipe →';
display: block;
text-align: center;
font-family: 'Space Grotesk', monospace;
font-size: .58rem;
letter-spacing: .25em;
color: rgba(212, 175, 55, .55);
margin-top: 1rem;
text-transform: uppercase;
}
/* ── 3. SERVICE GRIDS (svc-big, dig-grid): 2-col compact ── */
.svc-big,
.dig-grid,
.gift-grid,
.event-types,
.product-cards,
.pr-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .65rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
}
.svc-card,
.dig-card,
.gift-card,
.etype,
.pcard,
.pr-card {
padding: 1.1rem .9rem !important;
border-radius: 14px !important;
min-height: auto !important;
border: 1px solid var(--border) !important;
background: var(--bg2) !important;
}
.svc-card h3,
.dig-card h3,
.gift-card h3,
.etype h3,
.pcard h3,
.pr-card h3 { font-size: .92rem !important; margin: .35rem 0 .25rem !important; line-height: 1.2 !important; }
/* Strip filler text on grids — keep title + tags only */
.svc-card p,
.dig-card p,
.gift-card p,
.etype p,
.pcard p,
.pr-card p { font-size: .75rem !important; line-height: 1.4 !important; }
.svc-card p:not(.always-show),
.dig-card p:not(.always-show),
.gift-card p:not(.always-show),
.etype p:not(.always-show) { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.svc-icon, .dig-icon, .etype-icon, .gift-thumb {
width: 32px !important; height: 32px !important;
font-size: .95rem !important;
margin-bottom: .55rem !important;
border-radius: 9px !important;
}
.gift-thumb { height: 75px !important; font-size: 2rem !important; }
.svc-num, .dig-num { font-size: .55rem !important; top: .7rem !important; right: .75rem !important; }
/* Hide tag chips on mobile to save vertical space */
.svc-tags, .dig-tags, .etype-tags, .gift-tags, .pr-tags { display: none !important; }
/* Collapse interactive-details on mobile — just show the toggle button compact */
.interactive-details .details-toggle { font-size: .7rem !important; padding: .45rem .7rem !important; margin-top: .55rem !important; }
.interactive-details .details-panel { padding: .65rem !important; gap: .5rem !important; }
/* ── 4. HERO FEATURE IMAGE on lab pages: hide (saves a screen each) ── */
.feat-grid-full { display: none !important; }
/* ── 5. PROCESS STEPS: 2-col dense ── */
.process-row,
.p-grid,
#process .row,
.process-section .row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .55rem !important;
}
.p-step {
padding: 1rem .85rem !important;
margin-bottom: 0 !important;
min-height: auto !important;
}
.p-step h3 { font-size: .9rem !important; margin: .2rem 0 .25rem !important; line-height: 1.2 !important; }
.p-step p { font-size: .73rem !important; line-height: 1.4 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.p-num { font-size: 1.8rem !important; }
/* ── 6. STATS: compact 4-col strip (instead of fat 2x2) ── */
.stat-bar {
grid-template-columns: repeat(4, 1fr) !important;
padding: 1.1rem .5rem !important;
gap: .25rem !important;
}
.stat-item { padding: .35rem .15rem !important; border-right: none !important; }
.stat-item h3 { font-size: 1.1rem !important; font-weight: 800 !important; }
.stat-item p { font-size: .55rem !important; letter-spacing: .03em !important; line-height: 1.2 !important; }
/* ── 7. MARQUEE: cut height in half on phone ── */
.marquee-wrap { padding: .65rem 0 !important; }
.marquee-track .m-item, .marquee .m-item { font-size: 1.1rem !important; }
/* ── 8. OCCASIONS GRID (gifting page) — 4 cards to 2-col compact ── */
.occ-grid {
grid-template-columns: 1fr 1fr !important;
gap: 1px !important;
}
.occ { padding: 1rem .8rem !important; }
.occ-emoji { font-size: 1.3rem !important; margin-bottom: .4rem !important; }
.occ h4 { font-size: .8rem !important; margin-bottom: .2rem !important; }
.occ p { font-size: .65rem !important; line-height: 1.4 !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
/* ── 9. TECH STACK (digital page) — 6-col → 3-col compact ── */
.stack-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: .5rem !important;
margin-top: 1.25rem !important;
}
.stack-item { padding: .75rem .4rem !important; border-radius: 10px !important; }
.stack-item span { font-size: 1.15rem !important; margin-bottom: .25rem !important; }
.stack-item p { font-size: .58rem !important; }
/* ── 10. WHY-SPLIT 2-col → stacked but no 3rem gap ── */
.why-split, .split-2 { gap: 1.5rem !important; }
.feat-grid, .why-list { grid-template-columns: 1fr 1fr !important; gap: .55rem !important; }
.feat-item, .why-item { padding: .9rem .8rem !important; }
.feat-item h4, .why-item h4 { font-size: .82rem !important; margin-bottom: .25rem !important; }
.feat-item p, .why-item p { font-size: .72rem !important; line-height: 1.4 !important; -webkit-line-clamp: 3 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.why-icon { width: 32px !important; height: 32px !important; font-size: .9rem !important; }
/* ── 11. TAG STRIP (home page below labs heading) — single line scroll ── */
.tag-strip {
display: flex !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
gap: .4rem !important;
padding-bottom: .5rem !important;
scrollbar-width: none !important;
}
.tag-strip::-webkit-scrollbar { display: none !important; }
.tag-strip span { flex-shrink: 0 !important; font-size: .68rem !important; padding: .35rem .7rem !important; }
/* ── 12. SECTION-INDEX label: ultra-compact ── */
.section-index { font-size: .58rem !important; padding: .35rem .65rem !important; }
.giant-mark { display: none !important; }
/* ── 13. BENEFITS sticky cards → 2-col dense ── */
.bs-scroll-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .55rem !important; }
.benefit-card { padding: 1rem .85rem !important; }
.benefit-card h3 { font-size: .88rem !important; }
.benefit-card p { font-size: .72rem !important; line-height: 1.4 !important; -webkit-line-clamp: 3 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
.bc-num { font-size: 1.6rem !important; }
/* ── 14. TESTIMONIALS — collapse from 3-col to 1 visible at a time (scroll-snap) ── */
#testimonials .t-row,
.testimonial-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
gap: .75rem !important;
padding: 0 1rem 1rem !important;
margin: 0 -1.25rem !important;
scrollbar-width: none !important;
}
#testimonials .t-row::-webkit-scrollbar { display: none !important; }
.tcard {
flex: 0 0 85% !important;
scroll-snap-align: start !important;
padding: 1.2rem 1.1rem !important;
}
.tcard p { font-size: .82rem !important; line-height: 1.5 !important; }
/* ── 15. CTA band — smaller ── */
.cta-band { padding: 2.5rem 1.25rem !important; }
.cta-band h2 { font-size: 1.6rem !important; line-height: 1.15 !important; }
.cta-band p { font-size: .85rem !important; max-width: 90% !important; margin-bottom: 1rem !important; }
.cta-btns { gap: .55rem !important; }
/* ── 16. PROCESS section title gap ── */
#process, .process-section { padding: 2.25rem 1.25rem !important; }
/* ── 17. FOOTER 4-col → 2-col compact ── */
footer.footer {
grid-template-columns: 1fr 1fr !important;
gap: 1.25rem !important;
padding: 2rem 1.25rem 1rem !important;
}
footer.footer h4 { font-size: .75rem !important; margin-bottom: .45rem !important; }
footer.footer a, footer.footer li { font-size: .74rem !important; line-height: 1.5 !important; }
footer.footer .f-col:first-child { grid-column: 1 / -1 !important; }
/* ── 18. Print page product cards: 2-col tight ── */
.pr-card { padding: .85rem !important; }
.pr-thumb { height: 110px !important; border-radius: 10px !important; margin-bottom: .55rem !important; }
.pr-thumb img { object-fit: cover !important; width: 100% !important; height: 100% !important; }
/* ── 19. Spacer/decorative orbs reduced ── */
.orb-hero-1, .orb-hero-2 { opacity: .5 !important; filter: blur(40px) !important; }
/* ── 20. Page hero photos on print page — keep but reduce gap ── */
.print-hero-photos { gap: .5rem !important; margin: 1rem 0 !important; }
}
/* Ultra-narrow phones (≤420px): single-col fallbacks for tightest grids */
@media (max-width: 420px) {
/* Stat-bar back to 2x2 below 420 — 4 numbers can't read well */
.stat-bar { grid-template-columns: 1fr 1fr !important; }
.stat-item h3 { font-size: 1.4rem !important; }
.stat-item p { font-size: .62rem !important; }
}
/* ═══════════════════════════════════════════════════════════
╔══════════════════════════════════════════════════════════╗
║ MOBILE UX POLISH LAYER ║
║ smooth, premium, catchy — for the agency feel ║
╚══════════════════════════════════════════════════════════╝
═══════════════════════════════════════════════════════════ */
/* ── Site-wide smooth scroll + momentum ── */
html { scroll-behavior: smooth; }
@media (max-width: 900px) {
html, body { -webkit-overflow-scrolling: touch; }
/* Hide default cursor elements on mobile (they're desktop-only flourishes) */
#cur, #cur-ring, #cur-label, #scroll-progress { display: none !important; }
}
/* ── Honor reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .15s !important;
}
html { scroll-behavior: auto; }
}
/* ── Mobile-only polish: tap feedback, premium hero, sticky CTA ── */
@media (max-width: 900px) {
/* ── 1. TAP RIPPLE & PRESS FEEDBACK on all interactive cards ── */
.lab-card, .svc-card, .dig-card, .gift-card, .etype, .pcard, .pr-card,
.tcard, .benefit-card, .btn-p, .btn-g, .nav-btn,
.interactive-details .details-toggle {
-webkit-tap-highlight-color: transparent;
transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .25s ease,
border-color .25s ease !important;
will-change: transform;
}
.lab-card:active, .svc-card:active, .dig-card:active, .gift-card:active,
.etype:active, .pcard:active, .pr-card:active, .tcard:active,
.benefit-card:active {
transform: scale(.97) !important;
transition: transform .12s ease !important;
}
.btn-p:active, .btn-g:active, .nav-btn:active,
.interactive-details .details-toggle:active {
transform: scale(.95) !important;
}
/* ── 2. HERO POLISH — bigger, glowy, catchy ── */
#hero {
padding: 4.5rem 1.25rem 3rem !important;
min-height: calc(100vh - 60px) !important;
overflow: hidden;
position: relative;
}
/* Animated gradient halo behind hero text */
#hero::before {
content: '';
position: absolute;
top: 15%;
left: 50%;
width: 140%;
height: 60%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center,
color-mix(in srgb, var(--violet, #7c3aed) 24%, transparent) 0%,
color-mix(in srgb, var(--cyan, #d4af37) 8%, transparent) 35%,
transparent 70%);
filter: blur(60px);
z-index: 1;
animation: heroHaloPulse 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes heroHaloPulse {
0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}
#hero .h-badge {
background: rgba(255,255,255,.04) !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 35%, transparent) !important;
padding: .55rem 1.1rem !important;
border-radius: 999px !important;
backdrop-filter: blur(12px);
margin-bottom: 1.5rem !important;
font-size: .72rem !important;
letter-spacing: .08em !important;
}
#hero .h-title, #hero h1 {
font-size: clamp(2.4rem, 11vw, 3.6rem) !important;
line-height: 1.02 !important;
letter-spacing: -.035em !important;
margin-bottom: 1.1rem !important;
text-shadow: 0 4px 30px color-mix(in srgb, var(--violet, #7c3aed) 35%, transparent);
}
/* Last line of hero title gets gold accent */
#hero .h-title .hl:last-child {
background: linear-gradient(135deg, var(--cyan, #d4af37) 0%, #f5d97a 50%, var(--cyan, #d4af37) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: goldShimmer 4s linear infinite;
}
@keyframes goldShimmer {
to { background-position: 200% center; }
}
#hero .h-tagline {
font-size: .95rem !important;
margin: .5rem 0 1.5rem !important;
color: rgba(244, 232, 215, .75) !important;
}
#hero .h-tagline .gold {
color: var(--cyan, #d4af37) !important;
font-style: italic;
}
/* Hero CTAs — make them prominent */
#hero .h-ctas {
display: flex !important;
flex-direction: column !important;
gap: .65rem !important;
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
}
#hero .btn-p {
background: linear-gradient(135deg, var(--violet, #7c3aed), color-mix(in srgb, var(--violet, #7c3aed) 60%, var(--cyan, #d4af37))) !important;
box-shadow: 0 12px 35px color-mix(in srgb, var(--violet, #7c3aed) 45%, transparent),
inset 0 1px 0 rgba(255,255,255,.18) !important;
border: none !important;
padding: 1rem 1.6rem !important;
font-size: .92rem !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
border-radius: 14px !important;
}
#hero .btn-g {
background: rgba(255,255,255,.04) !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 45%, transparent) !important;
backdrop-filter: blur(10px);
color: rgba(244,232,215,.95) !important;
padding: 1rem 1.6rem !important;
font-size: .92rem !important;
border-radius: 14px !important;
}
/* Hide scroll-hint chevron on mobile — sticky CTA serves that purpose */
.scroll-hint { display: none !important; }
/* ── 3. SECTION ENTRANCE — staggered fade-in (improves perceived smoothness) ── */
.rv:not(.in) {
opacity: 0;
transform: translateY(20px);
transition: opacity .65s cubic-bezier(.23,1,.32,1), transform .65s cubic-bezier(.23,1,.32,1);
}
.rv.in { opacity: 1; transform: none; }
/* ── 4. LAB CARDS — premium gradient borders + pulse on tap ── */
.labs-grid .lab-card {
background: linear-gradient(165deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 95%, var(--violet, #7c3aed)) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 18%, var(--border)) !important;
box-shadow: 0 4px 16px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.04) !important;
position: relative;
overflow: hidden;
}
.labs-grid .lab-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent,
var(--cyan, #d4af37) 50%,
transparent);
opacity: .6;
}
.labs-grid .lab-card .lab-link {
color: var(--cyan, #d4af37) !important;
font-weight: 600 !important;
}
/* ── 5. STAT-BAR — premium feel with gold dividers ── */
.stat-bar {
background: linear-gradient(180deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 85%, var(--violet, #7c3aed) 15%) 100%) !important;
border-top: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 22%, transparent) !important;
border-bottom: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 22%, transparent) !important;
}
.stat-item h3 {
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800 !important;
}
.stat-item p {
color: rgba(244, 232, 215, .55) !important;
text-transform: uppercase;
}
/* ── 6. SECTION TITLE — soft glow + gradient ── */
.s-title {
text-shadow: 0 2px 24px color-mix(in srgb, var(--violet, #7c3aed) 22%, transparent);
}
.s-title .grad {
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a, var(--cyan, #d4af37));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: goldShimmer 5s linear infinite;
}
/* ── 7. MARQUEE — premium gradient mask on edges ── */
.marquee-wrap {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee-track .m-item, .marquee .m-item {
color: rgba(244, 232, 215, .65) !important;
}
.m-dot { background: var(--cyan, #d4af37) !important; }
/* ── 8. SHOWCASE — make swipeable reel pop ── */
#showcase .feat-img-wrap {
box-shadow: 0 20px 50px rgba(0,0,0,.5),
0 0 30px color-mix(in srgb, var(--violet, #7c3aed) 12%, transparent) !important;
}
#showcase .feat-caption .feat-title { font-size: .88rem !important; font-weight: 700 !important; }
/* ── 9. STICKY MOBILE CTA BAR — always-visible "Start Project" ── */
.mobile-cta-bar {
position: fixed;
bottom: 1rem;
left: 1rem;
right: 1rem;
z-index: 999;
background: linear-gradient(135deg,
rgba(10, 8, 22, .92),
rgba(20, 12, 35, .92));
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 28%, transparent);
border-radius: 16px;
padding: .65rem .75rem .65rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
box-shadow: 0 18px 45px rgba(0,0,0,.55),
0 0 30px color-mix(in srgb, var(--violet, #7c3aed) 18%, transparent);
transform: translateY(120%);
opacity: 0;
transition: transform .55s cubic-bezier(.23,1,.32,1), opacity .4s;
pointer-events: none;
}
.mobile-cta-bar.show {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.mobile-cta-bar .mcb-text {
display: flex;
flex-direction: column;
line-height: 1.1;
min-width: 0;
}
.mobile-cta-bar .mcb-eyebrow {
font-family: 'Space Grotesk', monospace;
font-size: .58rem;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--cyan, #d4af37);
font-weight: 700;
}
.mobile-cta-bar .mcb-title {
font-size: .88rem;
font-weight: 700;
color: #f4e8d7;
margin-top: .15rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-cta-bar .mcb-btn {
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a);
color: #1a0f00;
padding: .7rem 1.1rem;
border-radius: 11px;
font-weight: 800;
font-size: .82rem;
text-decoration: none;
flex-shrink: 0;
box-shadow: 0 6px 18px color-mix(in srgb, var(--cyan, #d4af37) 35%, transparent);
display: inline-flex;
align-items: center;
gap: .4rem;
letter-spacing: .01em;
transition: transform .2s, box-shadow .2s;
}
.mobile-cta-bar .mcb-btn:active { transform: scale(.94); }
/* Lift content above the sticky CTA bar */
body { padding-bottom: 5.5rem; }
/* ── 10. NAV BLUR + cleaner mobile look ── */
#nav {
background: rgba(8, 6, 18, .72) !important;
backdrop-filter: blur(18px) saturate(160%) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
border-bottom: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 12%, transparent) !important;
}
#nav.stuck {
background: rgba(6, 4, 14, .9) !important;
box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
/* ── 11. MOBILE MENU overlay — full bleed premium look ── */
#mob-menu {
background: radial-gradient(ellipse at top,
color-mix(in srgb, var(--violet, #7c3aed) 22%, #06040d) 0%,
#06040d 60%) !important;
}
#mob-menu a {
transition: color .25s, transform .25s !important;
}
#mob-menu a:active { transform: scale(.96); color: var(--cyan, #d4af37) !important; }
/* ── 12. PRELOADER smoother on mobile ── */
#preloader { transition: opacity .5s ease, visibility .5s; }
/* ── 13. CTA BAND — premium gradient ── */
.cta-band {
background: linear-gradient(165deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 85%, var(--violet, #7c3aed) 15%) 50%,
var(--bg2) 100%) !important;
border-top: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 18%, transparent) !important;
border-bottom: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 18%, transparent) !important;
}
/* ── 14. THEME TRIGGER — smaller on mobile, doesn't overlap CTA bar ── */
#theme-trigger {
width: 44px !important;
height: 44px !important;
bottom: 5.5rem !important;
right: .85rem !important;
}
/* ── 15. ALL CARDS — subtle glass effect ── */
.lab-card, .svc-card, .dig-card, .gift-card, .etype, .pcard, .pr-card, .tcard, .benefit-card {
background: linear-gradient(165deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 92%, transparent) 100%) !important;
backdrop-filter: blur(8px);
}
/* ── 16. SMOOTHER buttons ── */
.btn-p, .btn-g {
border-radius: 13px !important;
font-weight: 700 !important;
letter-spacing: .01em !important;
}
/* ── 17. SECTION DIVIDERS — soft gold hairline ── */
section + section {
position: relative;
}
/* ── 18. IMAGE LOADING — soft fade-in ── */
img { transition: opacity .4s ease; }
img[loading="lazy"]:not([src]) { opacity: 0; }
}
/* ── Tablet polish (601-1100px) ── */
@media (min-width: 601px) and (max-width: 1100px) {
#hero .h-ctas { flex-direction: row !important; max-width: 100% !important; }
}
/* ════════════════════════════════════════════════════════════════
╔════════════════════════════════════════════════════════════════╗
║ MOBILE — MINIMAL · BREATHING · 3D MOTION (final override) ║
║ Replaces the cramped 2-col approach with luxurious 1-col ║
║ cinematic layouts + 3D tilt + scroll-triggered depth reveal. ║
╚════════════════════════════════════════════════════════════════╝
════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ─── Restore generous section padding (was too tight) ─── */
section[style*="padding:9rem 5rem"],
section[style*="padding: 9rem 5rem"] { padding: 5rem 1.5rem !important; }
section[style*="padding:8rem 5rem"],
section[style*="padding: 8rem 5rem"] { padding: 4.5rem 1.5rem !important; }
section[style*="padding:7rem 5rem"],
section[style*="padding: 7rem 5rem"] { padding: 4rem 1.5rem !important; }
section[style*="padding:6rem 5rem"],
section[style*="padding: 6rem 5rem"] { padding: 3.75rem 1.5rem !important; }
section[style*="padding:5rem 5rem"],
section[style*="padding: 5rem 5rem"] { padding: 3.5rem 1.5rem !important; }
section[style*="padding:8rem 5rem 6rem"] { padding: 4.5rem 1.5rem 3.5rem !important; }
section[style*="padding:5rem 5rem 9rem"] { padding: 3.5rem 1.5rem 5rem !important; }
/* ─── Section titles: bigger, calmer, more space ─── */
.s-title {
font-size: clamp(1.85rem, 7.5vw, 2.5rem) !important;
line-height: 1.1 !important;
margin-bottom: 1rem !important;
letter-spacing: -.025em !important;
}
.s-sub {
font-size: 1rem !important;
line-height: 1.6 !important;
margin-bottom: 2.5rem !important;
max-width: 32ch !important;
color: rgba(244, 232, 215, .7) !important;
}
.s-label {
font-size: .68rem !important;
margin-bottom: 1.1rem !important;
letter-spacing: .22em !important;
}
/* ═══════════ LABS GRID → cinematic 1-col tiles ═══════════ */
.labs-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
padding: 0 !important;
perspective: 1200px;
}
.labs-grid .lab-card {
padding: 2.25rem 1.75rem 2rem !important;
min-height: auto !important;
border-radius: 22px !important;
background: linear-gradient(155deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 88%, var(--violet, #7c3aed) 12%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 22%, var(--border)) !important;
box-shadow:
0 12px 36px rgba(0,0,0,.45),
0 2px 6px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.05) !important;
transform-style: preserve-3d;
transition: transform .35s cubic-bezier(.23,1,.32,1), box-shadow .3s !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
overflow: hidden;
position: relative;
}
/* Show description back — there's room for it now */
.labs-grid .lab-card p {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: .9rem !important;
line-height: 1.55 !important;
color: rgba(244, 232, 215, .68) !important;
margin: .35rem 0 1rem !important;
}
.labs-grid .lab-card h3 {
font-size: 1.4rem !important;
margin: .65rem 0 .25rem !important;
line-height: 1.1 !important;
letter-spacing: -.02em !important;
}
.labs-grid .lab-card .lab-num {
font-size: .65rem !important;
top: 1.25rem !important;
right: 1.5rem !important;
color: rgba(212, 175, 55, .65) !important;
letter-spacing: .12em !important;
}
.labs-grid .lab-card .lab-icon {
width: 56px !important;
height: 56px !important;
margin-bottom: 1rem !important;
border-radius: 14px !important;
}
.labs-grid .lab-card .lab-icon svg { width: 28px !important; height: 28px !important; }
.labs-grid .lab-card .lab-link {
font-size: .82rem !important;
margin-top: auto !important;
color: var(--cyan, #d4af37) !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
display: inline-flex !important;
align-items: center !important;
gap: .4rem !important;
transition: gap .3s ease;
}
.labs-grid .lab-card:active .lab-link { gap: .85rem !important; }
/* Aurora swipe on lab-card (animated) */
.labs-grid .lab-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 35%,
color-mix(in srgb, var(--cyan, #d4af37) 12%, transparent) 50%,
transparent 65%);
transform: translateX(-100%);
transition: transform 1.1s cubic-bezier(.23,1,.32,1);
pointer-events: none;
z-index: 1;
}
.labs-grid .lab-card.in::after { transform: translateX(100%); }
.labs-grid .lab-card > * { position: relative; z-index: 2; }
/* ═══════════ HERO — luxury poster ═══════════ */
#hero {
padding: 5.5rem 1.5rem 4rem !important;
min-height: calc(100vh - 60px) !important;
display: flex !important;
align-items: center !important;
}
#hero .h-badge {
margin-bottom: 2rem !important;
padding: .65rem 1.25rem !important;
font-size: .68rem !important;
letter-spacing: .15em !important;
}
#hero .h-title, #hero h1 {
font-size: clamp(2.6rem, 13vw, 4.2rem) !important;
line-height: 1 !important;
margin-bottom: 1.5rem !important;
letter-spacing: -.045em !important;
}
#hero .h-sub {
font-size: 1rem !important;
line-height: 1.55 !important;
margin-bottom: 1rem !important;
max-width: 30ch !important;
}
#hero .h-tagline {
margin: .5rem 0 2rem !important;
font-size: .92rem !important;
}
#hero .h-ctas {
gap: .85rem !important;
width: 100% !important;
max-width: 280px !important;
}
#hero .btn-p, #hero .btn-g {
padding: 1.15rem 1.8rem !important;
font-size: .95rem !important;
border-radius: 16px !important;
}
/* ═══════════ STATS — float + breathing ═══════════ */
.stat-bar {
padding: 3rem 1.5rem !important;
gap: 1.25rem !important;
grid-template-columns: 1fr 1fr !important;
}
.stat-item {
padding: .85rem .5rem !important;
border-right: none !important;
animation: statFloat 6s ease-in-out infinite;
}
.stat-item:nth-child(2) { animation-delay: 1.5s; }
.stat-item:nth-child(3) { animation-delay: 3s; }
.stat-item:nth-child(4) { animation-delay: 4.5s; }
@keyframes statFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.stat-item h3 {
font-size: 2.4rem !important;
font-weight: 800 !important;
margin-bottom: .35rem !important;
letter-spacing: -.02em !important;
}
.stat-item p {
font-size: .68rem !important;
letter-spacing: .12em !important;
text-transform: uppercase;
line-height: 1.3 !important;
}
/* ═══════════ SERVICE / EVENT / GIFT / DIG / PRINT GRIDS → 1-col cinematic ═══════════ */
.svc-big, .dig-grid, .gift-grid, .event-types, .product-cards, .pr-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
background: transparent !important;
border: 0 !important;
perspective: 1200px;
}
.svc-card, .dig-card, .gift-card, .etype, .pcard, .pr-card {
padding: 2rem 1.6rem !important;
border-radius: 20px !important;
background: linear-gradient(155deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 90%, var(--violet, #7c3aed) 10%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 18%, var(--border)) !important;
box-shadow:
0 10px 30px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.04) !important;
transform-style: preserve-3d;
}
.svc-card h3, .dig-card h3, .gift-card h3, .etype h3, .pcard h3, .pr-card h3 {
font-size: 1.2rem !important;
margin: .65rem 0 .55rem !important;
line-height: 1.2 !important;
letter-spacing: -.015em !important;
}
.svc-card p, .dig-card p, .gift-card p, .etype p, .pcard p, .pr-card p {
font-size: .9rem !important;
line-height: 1.6 !important;
color: rgba(244, 232, 215, .7) !important;
-webkit-line-clamp: unset !important;
display: block !important;
}
.svc-card .svc-icon, .dig-card .dig-icon, .etype .etype-icon {
width: 48px !important;
height: 48px !important;
font-size: 1.4rem !important;
margin-bottom: .85rem !important;
border-radius: 13px !important;
}
.svc-num, .dig-num {
font-size: .65rem !important;
top: 1.15rem !important;
right: 1.35rem !important;
color: rgba(212, 175, 55, .65) !important;
letter-spacing: .12em !important;
}
/* Show tags back — they add personality */
.svc-tags, .dig-tags, .etype-tags, .gift-tags, .pr-tags {
display: flex !important;
flex-wrap: wrap;
gap: .4rem !important;
margin-top: .9rem !important;
}
.tag, .dtag, .etag, .gtag, .pr-tag {
font-size: .65rem !important;
padding: .3rem .75rem !important;
background: rgba(255, 255, 255, .04) !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 22%, var(--border)) !important;
color: rgba(244, 232, 215, .65) !important;
}
/* Gift thumb keeps height */
.gift-thumb { height: 160px !important; font-size: 3rem !important; }
/* Re-enable hero feature images on lab pages — they add visual richness */
.feat-grid-full { display: block !important; margin: 2rem 1.5rem !important; }
.feat-img-wrap { border-radius: 20px !important; }
.feat-caption { bottom: 1.25rem !important; left: 1.5rem !important; right: 1.5rem !important; }
.feat-caption .feat-title { font-size: 1rem !important; }
/* ═══════════ PROCESS — 1-col with arrow connectors ═══════════ */
.process-row, .p-grid, #process .row, .process-section .row {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.p-step {
padding: 1.85rem 1.6rem !important;
border-radius: 20px !important;
background: linear-gradient(155deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 92%, var(--violet, #7c3aed) 8%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 16%, var(--border)) !important;
position: relative;
}
.p-step h3 {
font-size: 1.15rem !important;
margin: .35rem 0 .45rem !important;
line-height: 1.2 !important;
}
.p-step p {
font-size: .9rem !important;
line-height: 1.6 !important;
color: rgba(244, 232, 215, .7) !important;
display: block !important;
-webkit-line-clamp: unset !important;
}
.p-num {
font-size: 2.6rem !important;
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800 !important;
}
/* Connector line between steps */
.p-step:not(:last-child)::after {
content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 1rem;
background: linear-gradient(180deg,
color-mix(in srgb, var(--cyan, #d4af37) 50%, transparent),
transparent);
}
/* ═══════════ SHOWCASE — premium swipe reel (kept from prior pass) ═══════════ */
#showcase .showcase-grid {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scroll-padding: 1.5rem !important;
gap: 1rem !important;
padding: 0 1.5rem 1rem !important;
margin: 0 -1.5rem !important;
scrollbar-width: none !important;
}
#showcase .showcase-grid::-webkit-scrollbar { display: none !important; }
#showcase .showcase-grid .feat-img-wrap {
flex: 0 0 82% !important;
scroll-snap-align: start !important;
grid-row: auto !important;
grid-column: auto !important;
}
#showcase .showcase-grid .feat-img-wrap .feat-img { aspect-ratio: 4/5 !important; }
#showcase::after {
content: '← swipe to explore →';
display: block;
text-align: center;
font-family: 'Space Grotesk', monospace;
font-size: .6rem;
letter-spacing: .25em;
color: rgba(212, 175, 55, .55);
margin-top: 1.25rem;
text-transform: uppercase;
}
/* ═══════════ BENEFITS — clean stack with 3D depth ═══════════ */
.bs-scroll-col { display: block !important; }
.benefit-card {
padding: 1.85rem 1.5rem !important;
margin-bottom: 1rem !important;
border-radius: 20px !important;
background: linear-gradient(155deg, var(--bg2), color-mix(in srgb, var(--bg2) 90%, var(--violet, #7c3aed) 10%)) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 18%, var(--border)) !important;
}
.benefit-card h3 { font-size: 1.15rem !important; margin: .4rem 0 .5rem !important; }
.benefit-card p {
font-size: .9rem !important;
line-height: 1.6 !important;
-webkit-line-clamp: unset !important;
display: block !important;
}
.bc-num {
font-size: 2.2rem !important;
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ═══════════ OCCASIONS / TECH STACK — 2-col, breathing ═══════════ */
.occ-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
.occ { padding: 1.5rem 1.1rem !important; }
.occ-emoji { font-size: 1.8rem !important; margin-bottom: .65rem !important; }
.occ h4 { font-size: .95rem !important; margin-bottom: .3rem !important; }
.occ p {
font-size: .78rem !important;
line-height: 1.5 !important;
display: block !important;
-webkit-line-clamp: unset !important;
}
.stack-grid { grid-template-columns: repeat(3, 1fr) !important; gap: .75rem !important; }
.stack-item { padding: 1.1rem .65rem !important; border-radius: 14px !important; }
.stack-item span { font-size: 1.5rem !important; margin-bottom: .4rem !important; }
.stack-item p { font-size: .65rem !important; }
/* ═══════════ TESTIMONIALS — swipe reel ═══════════ */
.tcard { padding: 1.85rem 1.5rem !important; }
.tcard p { font-size: .95rem !important; line-height: 1.6 !important; }
/* ═══════════ FOOTER — 1-col, breathing ═══════════ */
footer.footer {
grid-template-columns: 1fr !important;
gap: 2rem !important;
padding: 3rem 1.5rem 1.5rem !important;
text-align: left !important;
}
footer.footer h4 { font-size: .85rem !important; margin-bottom: .75rem !important; }
footer.footer a, footer.footer li { font-size: .9rem !important; line-height: 1.7 !important; }
footer.footer .f-col:first-child { grid-column: auto !important; }
/* ═══════════ CTA BAND — luxurious ═══════════ */
.cta-band { padding: 4rem 1.5rem !important; }
.cta-band h2 {
font-size: clamp(1.85rem, 8vw, 2.6rem) !important;
line-height: 1.1 !important;
margin-bottom: 1.25rem !important;
}
.cta-band p {
font-size: .98rem !important;
line-height: 1.6 !important;
max-width: 32ch !important;
margin-bottom: 2rem !important;
}
.cta-btns { gap: .85rem !important; flex-direction: column !important; }
/* ═══════════ TAG STRIP — bigger chips, scrollable ═══════════ */
.tag-strip span {
font-size: .75rem !important;
padding: .5rem 1rem !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 22%, var(--border)) !important;
}
/* ═══════════ MARQUEE — premium minimal ═══════════ */
.marquee-wrap { padding: 1.25rem 0 !important; }
.marquee-track .m-item, .marquee .m-item { font-size: 1.3rem !important; }
}
/* ════════════════════════════════════════════════════════════════
3D MOTION LAYER — tilt on touch, scroll-triggered depth reveal
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Section reveal — soft 3D rise on enter */
.rv {
transform: translateY(40px) rotateX(8deg);
transform-origin: center bottom;
perspective: 1000px;
opacity: 0;
transition: transform 1s cubic-bezier(.23, 1, .32, 1),
opacity 1s cubic-bezier(.23, 1, .32, 1);
}
.rv.in {
transform: translateY(0) rotateX(0);
opacity: 1;
}
/* 3D tilt-on-touch (driven by JS) */
.tilt-3d {
transform: perspective(900px)
rotateY(var(--tilt-y, 0deg))
rotateX(var(--tilt-x, 0deg))
translateZ(0);
transition: transform .3s cubic-bezier(.23, 1, .32, 1);
will-change: transform;
}
.tilt-3d.tilting { transition: none; }
/* Floating gentle motion on hero badge + section eyebrows */
.h-badge, .section-index {
animation: gentleFloat 5s ease-in-out infinite;
}
@keyframes gentleFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* Lab-icon subtle 3D rotation on scroll-in */
.labs-grid .lab-card.in .lab-icon {
animation: iconSpinIn .9s cubic-bezier(.23, 1, .32, 1);
}
@keyframes iconSpinIn {
from { transform: rotateY(180deg) scale(.6); opacity: 0; }
to { transform: rotateY(0) scale(1); opacity: 1; }
}
/* Stat numbers — depth + soft glow when in view */
.stat-item.in h3 {
animation: numberRise 1.1s cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes numberRise {
from { transform: perspective(600px) rotateX(45deg) translateY(20px); opacity: 0; }
to { transform: perspective(600px) rotateX(0) translateY(0); opacity: 1; }
}
/* Press-3D for buttons (depth on tap) */
.btn-p:active, .btn-g:active {
transform: perspective(400px) translateZ(-10px) scale(.97) !important;
}
}
/* ════════════════════════════════════════════════════════════════
╔════════════════════════════════════════════════════════════════╗
║ MOBILE FINAL BALANCE — compact + airy (overrides prior) ║
║ Goal: cut scroll length ~40% from previous pass while ║
║ keeping the premium feel and 3D motion. Sweet spot. ║
╚════════════════════════════════════════════════════════════════╝
════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ── Hide floating dock on mobile (was overlapping cards) ── */
#floating-dock { display: none !important; }
/* ─── Section padding: 3rem (was 5rem) — tight but breathing ─── */
section[style*="padding:9rem 5rem"],
section[style*="padding: 9rem 5rem"] { padding: 3rem 1.25rem !important; }
section[style*="padding:8rem 5rem"],
section[style*="padding: 8rem 5rem"] { padding: 2.75rem 1.25rem !important; }
section[style*="padding:7rem 5rem"],
section[style*="padding: 7rem 5rem"] { padding: 2.5rem 1.25rem !important; }
section[style*="padding:6rem 5rem"],
section[style*="padding: 6rem 5rem"] { padding: 2.25rem 1.25rem !important; }
section[style*="padding:5rem 5rem"],
section[style*="padding: 5rem 5rem"] { padding: 2.25rem 1.25rem !important; }
section[style*="padding:8rem 5rem 6rem"] { padding: 2.5rem 1.25rem 2rem !important; }
section[style*="padding:5rem 5rem 9rem"] { padding: 2rem 1.25rem 3rem !important; }
/* ─── Section titles: smaller, tighter ─── */
.s-title {
font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
line-height: 1.1 !important;
margin-bottom: .65rem !important;
letter-spacing: -.02em !important;
}
.s-sub {
font-size: .9rem !important;
line-height: 1.5 !important;
margin-bottom: 1.4rem !important;
max-width: 34ch !important;
}
.s-label {
font-size: .62rem !important;
margin-bottom: .75rem !important;
letter-spacing: .18em !important;
}
/* ═══════════ LABS → 2-col uniform tiles with animations ═══════════ */
.labs-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .75rem !important;
padding: 0 !important;
}
.labs-grid .lab-card {
padding: 1.6rem 1.1rem 1.4rem !important;
aspect-ratio: 1 / 1.2 !important; /* taller tiles → more breathing */
min-height: auto !important;
height: auto !important;
border-radius: 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* center vertically */
align-items: center !important; /* center horizontally */
text-align: center !important;
gap: 1rem !important; /* even spacing between rows */
background:
radial-gradient(140% 100% at 0% 0%,
color-mix(in srgb, var(--a1, var(--violet, #7c3aed)) 22%, transparent) 0%,
transparent 55%),
linear-gradient(160deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 88%, var(--violet, #7c3aed) 12%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 22%, var(--border)) !important;
box-shadow:
0 12px 28px rgba(0, 0, 0, .45),
inset 0 1px 0 rgba(255, 255, 255, .06) !important;
position: relative;
overflow: hidden;
}
/* HIDE description on mobile lab cards — was clipping ugly mid-word */
.labs-grid .lab-card p { display: none !important; }
/* HIDE numbering on mobile — feels cluttered in a tight grid */
.labs-grid .lab-card .lab-num { display: none !important; }
.labs-grid .lab-card h3 {
font-size: 1.1rem !important;
margin: 0 !important;
line-height: 1.15 !important;
letter-spacing: -.015em !important;
font-weight: 700 !important;
}
.labs-grid .lab-card .lab-icon {
width: 48px !important;
height: 48px !important;
margin-bottom: 0 !important;
border-radius: 13px !important;
flex-shrink: 0;
position: relative;
}
.labs-grid .lab-card .lab-icon svg {
width: 26px !important;
height: 26px !important;
position: relative;
z-index: 2;
}
/* Icon glow ring (animated) */
.labs-grid .lab-card .lab-icon::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 13px;
background: conic-gradient(from 0deg,
transparent 0deg,
color-mix(in srgb, var(--a1, var(--violet, #7c3aed)) 60%, transparent) 90deg,
transparent 180deg);
opacity: 0;
animation: iconRing 4s linear infinite;
z-index: 1;
}
.labs-grid .lab-card.in .lab-icon::before { opacity: .9; }
@keyframes iconRing {
to { transform: rotate(360deg); }
}
.labs-grid .lab-card .lab-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: var(--bg2);
z-index: 1;
}
.labs-grid .lab-card .lab-link {
font-size: .72rem !important;
margin-top: 0 !important;
color: var(--cyan, #d4af37) !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
display: inline-flex !important;
align-items: center !important;
gap: .35rem !important;
transition: gap .35s cubic-bezier(.23, 1, .32, 1);
}
.labs-grid .lab-card:active .lab-link { gap: .7rem !important; }
.labs-grid .lab-card .lab-link::after {
content: '→';
transition: transform .35s cubic-bezier(.23, 1, .32, 1);
}
.labs-grid .lab-card:active .lab-link::after { transform: translateX(4px); }
/* Animated aurora sweep across each card on scroll-in */
.labs-grid .lab-card::before {
content: '';
position: absolute;
top: 0; left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(115deg,
transparent 0%,
color-mix(in srgb, var(--cyan, #d4af37) 18%, transparent) 50%,
transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
z-index: 1;
}
/* Ensure card content stays above sweep + hairline */
.labs-grid .lab-card > * { position: relative; z-index: 2; }
.labs-grid .lab-card.in::before {
animation: cardSweep 1.6s cubic-bezier(.23, 1, .32, 1) .2s 1;
}
@keyframes cardSweep {
from { left: -120%; }
to { left: 220%; }
}
/* Gold hairline at top (premium accent) */
.labs-grid .lab-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 10%,
color-mix(in srgb, var(--cyan, #d4af37) 60%, transparent) 50%,
transparent 90%);
pointer-events: none;
}
/* ═══════════ HERO → tighter ═══════════ */
#hero {
padding: 4rem 1.25rem 2.5rem !important;
min-height: auto !important;
}
#hero .h-badge {
margin-bottom: 1rem !important;
padding: .45rem .95rem !important;
font-size: .62rem !important;
}
#hero .h-title, #hero h1 {
font-size: clamp(2rem, 9vw, 2.8rem) !important;
line-height: 1.05 !important;
margin-bottom: .8rem !important;
letter-spacing: -.035em !important;
}
#hero .h-sub {
font-size: .88rem !important;
line-height: 1.5 !important;
margin-bottom: .35rem !important;
max-width: 32ch !important;
}
#hero .h-tagline {
margin: .25rem 0 1.25rem !important;
font-size: .82rem !important;
}
#hero .h-ctas {
gap: .55rem !important;
max-width: 280px !important;
}
#hero .btn-p, #hero .btn-g {
padding: .85rem 1.4rem !important;
font-size: .85rem !important;
border-radius: 12px !important;
}
/* ═══════════ STATS → 4-col single strip, compact ═══════════ */
.stat-bar {
padding: 1.4rem .75rem !important;
gap: .35rem !important;
grid-template-columns: repeat(4, 1fr) !important;
}
.stat-item { padding: .35rem .15rem !important; }
.stat-item h3 {
font-size: 1.35rem !important;
margin-bottom: .15rem !important;
letter-spacing: -.015em !important;
}
.stat-item p {
font-size: .55rem !important;
letter-spacing: .08em !important;
line-height: 1.2 !important;
}
/* ═══════════ SERVICE / DIG / GIFT / EVENT / PRINT → 1-col compact ═══════════ */
.svc-big, .dig-grid, .gift-grid, .event-types, .product-cards, .pr-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: .65rem !important;
}
.svc-card, .dig-card, .gift-card, .etype, .pcard, .pr-card {
padding: 1.2rem 1.15rem !important;
border-radius: 14px !important;
}
.svc-card h3, .dig-card h3, .gift-card h3, .etype h3, .pcard h3, .pr-card h3 {
font-size: 1rem !important;
margin: .4rem 0 .35rem !important;
line-height: 1.2 !important;
}
.svc-card p, .dig-card p, .gift-card p, .etype p, .pcard p, .pr-card p {
font-size: .8rem !important;
line-height: 1.5 !important;
color: rgba(244, 232, 215, .65) !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.svc-card .svc-icon, .dig-card .dig-icon, .etype .etype-icon {
width: 34px !important;
height: 34px !important;
font-size: 1rem !important;
margin-bottom: .45rem !important;
border-radius: 9px !important;
}
.svc-num, .dig-num {
font-size: .55rem !important;
top: .85rem !important;
right: 1rem !important;
}
/* Tags: keep but tiny */
.svc-tags, .dig-tags, .etype-tags, .gift-tags, .pr-tags {
display: none !important; /* hide on mobile to save vertical */
}
.gift-thumb { height: 90px !important; font-size: 2.2rem !important; }
/* Hero feature image hidden again (saves a whole screen each lab page) */
.feat-grid-full { display: none !important; }
/* ═══════════ PROCESS → 2-col 2x2 ═══════════ */
.process-row, .p-grid, #process .row, .process-section .row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .55rem !important;
}
.p-step {
padding: 1rem .85rem !important;
margin-bottom: 0 !important;
border-radius: 13px !important;
}
.p-step::after { display: none !important; } /* hide connector lines in 2x2 */
.p-step h3 {
font-size: .88rem !important;
margin: .25rem 0 .25rem !important;
line-height: 1.2 !important;
}
.p-step p {
font-size: .72rem !important;
line-height: 1.4 !important;
-webkit-line-clamp: 3 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.p-num { font-size: 1.8rem !important; }
/* ═══════════ SHOWCASE swipe reel — keep, slightly smaller ═══════════ */
#showcase .showcase-grid {
padding: 0 1.25rem .5rem !important;
margin: 0 -1.25rem !important;
scroll-padding: 1.25rem !important;
}
#showcase .showcase-grid .feat-img-wrap { flex: 0 0 78% !important; }
#showcase .showcase-grid .feat-img-wrap .feat-img { aspect-ratio: 4/3 !important; }
#showcase::after { margin-top: .85rem !important; font-size: .55rem !important; }
/* ═══════════ BENEFITS → 2-col compact ═══════════ */
.bs-scroll-col {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .55rem !important;
}
.benefit-card {
padding: 1rem .9rem !important;
margin-bottom: 0 !important;
border-radius: 13px !important;
}
.benefit-card h3 { font-size: .88rem !important; margin: .25rem 0 .25rem !important; line-height: 1.2 !important; }
.benefit-card p {
font-size: .72rem !important;
line-height: 1.4 !important;
-webkit-line-clamp: 3 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.bc-num { font-size: 1.6rem !important; }
/* ═══════════ OCCASIONS / TECH STACK → tighter ═══════════ */
.occ { padding: 1rem .8rem !important; }
.occ-emoji { font-size: 1.4rem !important; margin-bottom: .4rem !important; }
.occ h4 { font-size: .8rem !important; margin-bottom: .2rem !important; }
.occ p {
font-size: .65rem !important;
line-height: 1.4 !important;
-webkit-line-clamp: 2 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.stack-grid { grid-template-columns: repeat(3, 1fr) !important; gap: .5rem !important; }
.stack-item { padding: .8rem .4rem !important; border-radius: 10px !important; }
.stack-item span { font-size: 1.2rem !important; margin-bottom: .25rem !important; }
.stack-item p { font-size: .6rem !important; }
/* ═══════════ TESTIMONIALS swipe reel — smaller ═══════════ */
.tcard { padding: 1.3rem 1.15rem !important; }
.tcard p { font-size: .85rem !important; line-height: 1.5 !important; }
/* ═══════════ FOOTER → 2-col, compact ═══════════ */
footer.footer {
grid-template-columns: 1fr 1fr !important;
gap: 1.25rem !important;
padding: 2rem 1.25rem 1.25rem !important;
}
footer.footer h4 { font-size: .72rem !important; margin-bottom: .45rem !important; }
footer.footer a, footer.footer li {
font-size: .75rem !important;
line-height: 1.55 !important;
}
footer.footer .f-col:first-child { grid-column: 1 / -1 !important; }
/* ═══════════ CTA BAND → compact ═══════════ */
.cta-band { padding: 2.5rem 1.25rem !important; }
.cta-band h2 {
font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
line-height: 1.1 !important;
margin-bottom: .85rem !important;
}
.cta-band p {
font-size: .88rem !important;
line-height: 1.5 !important;
max-width: 34ch !important;
margin-bottom: 1.4rem !important;
}
.cta-btns { gap: .55rem !important; }
/* ═══════════ TAG STRIP ═══════════ */
.tag-strip span {
font-size: .65rem !important;
padding: .35rem .75rem !important;
}
/* ═══════════ MARQUEE → minimal ═══════════ */
.marquee-wrap { padding: .65rem 0 !important; }
.marquee-track .m-item, .marquee .m-item { font-size: 1rem !important; }
/* ═══════════ Float anim toned down ═══════════ */
.stat-item { animation: none !important; }
/* ═══════════ Lift content above sticky CTA bar ═══════════ */
body { padding-bottom: 5rem !important; }
}
/* Ultra-narrow phones (≤420px) */
@media (max-width: 420px) {
.stat-bar { grid-template-columns: 1fr 1fr !important; }
.stat-item h3 { font-size: 1.5rem !important; }
.stat-item p { font-size: .6rem !important; }
.labs-grid .lab-card h3 { font-size: .92rem !important; }
.labs-grid .lab-card p { font-size: .68rem !important; }
}
/* ════════════════════════════════════════════════════════════════
╔════════════════════════════════════════════════════════════════╗
║ UNIVERSAL TILE STYLE — apply lab-card look to every page card ║
║ Branding · Events · Gifting · Social · Digital · Print · ║
║ Contact · BLVCKCARD all get the same compact 2-col tile feel. ║
╚════════════════════════════════════════════════════════════════╝
════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ── Universal card grid: turn every service container into 2-col tile grid ── */
.svc-big,
.dig-grid,
.gift-grid,
.event-types,
.product-cards,
.pr-list,
.svc-2col,
.svc-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .75rem !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin-top: 1rem !important;
}
/* ── Every service card becomes a uniform tile ── */
.svc-card,
.dig-card,
.gift-card,
.etype,
.pcard,
.pr-card,
.svc2,
.svc-row {
padding: 1.4rem 1rem 1.3rem !important;
aspect-ratio: 1 / 1.15 !important;
min-height: auto !important;
height: auto !important;
border-radius: 18px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: .85rem !important;
background:
radial-gradient(140% 100% at 0% 0%,
color-mix(in srgb, var(--violet, #7c3aed) 18%, transparent) 0%,
transparent 55%),
linear-gradient(160deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 88%, var(--violet, #7c3aed) 12%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 22%, var(--border)) !important;
box-shadow:
0 10px 24px rgba(0, 0, 0, .4),
inset 0 1px 0 rgba(255, 255, 255, .05) !important;
position: relative;
overflow: hidden;
cursor: pointer;
}
/* Hide ALL descriptive content on mobile tiles — keep only icon + title */
.svc-card p, .dig-card p, .gift-card p, .etype p, .pcard p, .pr-card p,
.svc2 p, .svc-row p,
.svc-card .svc-tags, .dig-card .dig-tags, .gift-card .gift-tags,
.etype .etype-tags, .pcard .pr-tags, .pr-card .pr-tags,
.svc-card .svc-num, .dig-card .dig-num,
.svc-card .interactive-details, .dig-card .interactive-details,
.gift-card .interactive-details, .etype .interactive-details,
.pcard .interactive-details, .pr-card .interactive-details,
.svc2 .interactive-details, .svc-row .interactive-details {
display: none !important;
}
/* Icon — bigger, centered, glowing ring */
.svc-card .svc-icon,
.dig-card .dig-icon,
.gift-card .gift-thumb,
.etype .etype-icon,
.svc2 .svc2-icon,
.svc-row .svc-row-icon {
width: 50px !important;
height: 50px !important;
font-size: 1.5rem !important;
margin: 0 !important;
border-radius: 14px !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative;
background: rgba(255, 255, 255, .04) !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 25%, transparent) !important;
}
/* Icon spinning conic ring (same as lab cards) */
.svc-card .svc-icon::before,
.dig-card .dig-icon::before,
.etype .etype-icon::before,
.svc2 .svc2-icon::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 15px;
background: conic-gradient(from 0deg,
transparent 0deg,
color-mix(in srgb, var(--cyan, #d4af37) 60%, transparent) 90deg,
transparent 180deg);
opacity: 0;
animation: iconRing 4s linear infinite;
z-index: -1;
}
.svc-card.in .svc-icon::before,
.dig-card.in .dig-icon::before,
.etype.in .etype-icon::before,
.svc2.in .svc2-icon::before { opacity: .85; }
/* Title — centered, breathing room */
.svc-card h3, .dig-card h3, .gift-card h3,
.etype h3, .pcard h3, .pr-card h3,
.svc2 h3, .svc-row h4 {
font-size: 1rem !important;
margin: 0 !important;
line-height: 1.2 !important;
letter-spacing: -.015em !important;
font-weight: 700 !important;
color: rgba(244, 232, 215, .95) !important;
}
/* Aurora sweep + gold hairline (same as lab cards) */
.svc-card::before,
.dig-card::before,
.gift-card::before,
.etype::before,
.pcard::before,
.pr-card::before,
.svc2::before,
.svc-row::before {
content: '';
position: absolute;
top: 0; left: -120%;
width: 80%;
height: 100%;
background: linear-gradient(115deg,
transparent 0%,
color-mix(in srgb, var(--cyan, #d4af37) 18%, transparent) 50%,
transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
z-index: 1;
}
.svc-card.in::before,
.dig-card.in::before,
.gift-card.in::before,
.etype.in::before,
.pcard.in::before,
.pr-card.in::before,
.svc2.in::before,
.svc-row.in::before {
animation: cardSweep 1.6s cubic-bezier(.23, 1, .32, 1) .2s 1;
}
/* Gold hairline at top */
.svc-card::after,
.dig-card::after,
.gift-card::after,
.etype::after,
.pcard::after,
.pr-card::after,
.svc2::after,
.svc-row::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 10%,
color-mix(in srgb, var(--cyan, #d4af37) 60%, transparent) 50%,
transparent 90%);
pointer-events: none;
}
/* Content above sweep */
.svc-card > *, .dig-card > *, .gift-card > *,
.etype > *, .pcard > *, .pr-card > *,
.svc2 > *, .svc-row > * {
position: relative;
z-index: 2;
}
/* etype-bg / etype-img (events tiles background images) — keep subtle */
.etype-bg, .etype-img {
opacity: .08 !important;
border-radius: 18px !important;
}
.etype-icon {
background: rgba(255, 255, 255, .04) !important;
}
/* ═══════════ GIFT THUMB — emoji block as icon ═══════════ */
.gift-card .gift-thumb {
width: 50px !important;
height: 50px !important;
font-size: 1.7rem !important;
border-radius: 14px !important;
}
.gift-body {
padding: 0 !important;
text-align: center !important;
background: transparent !important;
}
/* ═══════════ PRINT — pr-thumb centered, scaled down ═══════════ */
.pr-card .pr-thumb {
width: 60px !important;
height: 60px !important;
margin: 0 !important;
border-radius: 12px !important;
}
.pr-card .pr-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 12px !important;
}
/* ═══════════ SVC-ROW (events) — flex row that we want as tile ═══════════ */
.svc-row { gap: .85rem !important; }
.svc-row > div { text-align: center !important; }
.svc-row > div h4 { font-size: .95rem !important; margin: 0 !important; }
/* ═══════════ OCCASIONS GRID (gifting) — 2-col tile look ═══════════ */
.occ-grid {
grid-template-columns: 1fr 1fr !important;
background: transparent !important;
border: 0 !important;
gap: .65rem !important;
}
.occ {
padding: 1.25rem 1rem !important;
aspect-ratio: 1 / 1 !important;
border-radius: 16px !important;
background: linear-gradient(160deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 90%, var(--violet, #7c3aed) 10%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 18%, var(--border)) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: .5rem !important;
}
.occ p { display: none !important; }
.occ-emoji { font-size: 1.6rem !important; margin: 0 !important; }
.occ h4 { font-size: .85rem !important; margin: 0 !important; }
/* ═══════════ STACK GRID (digital tech stack) — 3-col compact ═══════════ */
.stack-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: .55rem !important;
}
.stack-item {
padding: .85rem .5rem !important;
aspect-ratio: 1 / 1 !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: .3rem !important;
background: linear-gradient(160deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 92%, var(--violet, #7c3aed) 8%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 15%, var(--border)) !important;
}
.stack-item span { font-size: 1.4rem !important; margin: 0 !important; }
.stack-item p { font-size: .58rem !important; margin: 0 !important; }
/* ═══════════ GIFT PROCESS — 1-col stack with arrows ═══════════ */
.gift-process {
flex-direction: column !important;
gap: .65rem !important;
}
.gp-step {
padding: 1.2rem 1rem !important;
border-radius: 14px !important;
text-align: center !important;
}
.gp-step:first-child,
.gp-step:last-child { border-radius: 14px !important; }
.gp-step:not(:last-child)::after {
content: '↓' !important;
right: 50% !important;
top: auto !important;
bottom: -1.1rem !important;
transform: translateX(50%) !important;
font-size: 1rem !important;
color: var(--cyan, #d4af37) !important;
}
/* ═══════════ CONTACT FORM — single column, larger inputs ═══════════ */
.form-row {
grid-template-columns: 1fr !important;
gap: .85rem !important;
}
#contact-form input,
#contact-form textarea,
#contact-form select {
padding: .95rem 1.1rem !important;
font-size: .95rem !important;
border-radius: 13px !important;
background: rgba(255, 255, 255, .03) !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 18%, var(--border)) !important;
}
#contact-form input:focus,
#contact-form textarea:focus,
#contact-form select:focus {
border-color: color-mix(in srgb, var(--violet, #7c3aed) 50%, transparent) !important;
background: rgba(255, 255, 255, .05) !important;
}
#contact-form label { font-size: .78rem !important; letter-spacing: .08em !important; }
#contact-form button[type="submit"] {
width: 100% !important;
padding: 1.1rem !important;
font-size: .95rem !important;
margin-top: .85rem !important;
border-radius: 14px !important;
}
/* Contact info cards (email, phone, whatsapp) — center tile look */
.contact-info-grid, .contact-cards {
grid-template-columns: 1fr 1fr !important;
gap: .75rem !important;
}
.info-card, .contact-card {
padding: 1.25rem 1rem !important;
border-radius: 16px !important;
aspect-ratio: 1 / 1.05 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: .55rem !important;
}
/* ═══════════ BLVCKCARD page — keep card center, compact spec rows ═══════════ */
#blvck-section .blvck-card { transform: scale(.92) !important; margin: 0 auto !important; }
.bc-finish, .bc-price-card {
padding: 1.4rem 1.1rem !important;
border-radius: 18px !important;
}
/* BLVCKCARD spec/comparison rows */
.bc-features, .blvck-features {
grid-template-columns: 1fr 1fr !important;
gap: .65rem !important;
}
.bc-feature, .blvck-feature {
padding: 1.1rem .9rem !important;
aspect-ratio: 1 / 1.05 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: .5rem !important;
border-radius: 16px !important;
}
}
/* Ultra-narrow phones (≤420px): tile content further compressed */
@media (max-width: 420px) {
.svc-card, .dig-card, .gift-card, .etype, .pcard, .pr-card, .svc2, .svc-row {
padding: 1.2rem .85rem 1.15rem !important;
aspect-ratio: 1 / 1.18 !important;
}
.svc-card h3, .dig-card h3, .gift-card h3,
.etype h3, .pcard h3, .pr-card h3, .svc2 h3, .svc-row h4 {
font-size: .9rem !important;
}
.svc-card .svc-icon, .dig-card .dig-icon,
.gift-card .gift-thumb, .etype .etype-icon, .svc2 .svc2-icon, .svc-row .svc-row-icon {
width: 44px !important;
height: 44px !important;
font-size: 1.3rem !important;
}
}
/* ════════════════════════════════════════════════════════════════
PRINT PAGE — 2-col product showcase with prominent photos
The .pr-grid container had an inline 1-col rule at 700px we override.
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Override the inline @media in print.html */
.pr-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: .75rem !important;
margin-top: 1.5rem !important;
}
/* Print product card — image-first showcase layout */
.pr-card {
padding: 0 !important;
aspect-ratio: 1 / 1.35 !important; /* taller — product photo + title */
border-radius: 18px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
background: var(--bg2) !important;
border: 1px solid color-mix(in srgb, var(--cyan, #d4af37) 18%, var(--border)) !important;
box-shadow:
0 10px 24px rgba(0, 0, 0, .4),
inset 0 1px 0 rgba(255, 255, 255, .05) !important;
position: relative;
}
/* PHOTO takes top ~72% of the card */
.pr-card .pr-thumb {
width: 100% !important;
height: 72% !important;
aspect-ratio: auto !important;
border-radius: 18px 18px 0 0 !important;
overflow: hidden !important;
background: var(--bg3) !important;
position: relative;
flex-shrink: 0;
display: block !important;
margin: 0 !important;
}
.pr-card .pr-thumb img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: .92 !important;
border-radius: 0 !important;
}
/* BODY (bottom 28%) — title only, centered */
.pr-card .pr-body {
padding: .75rem .75rem 1rem !important;
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
background:
linear-gradient(180deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 88%, var(--violet, #7c3aed) 12%) 100%);
}
.pr-card .pr-body h3 {
font-size: .9rem !important;
margin: 0 !important;
line-height: 1.2 !important;
letter-spacing: -.015em !important;
font-weight: 700 !important;
color: rgba(244, 232, 215, .96) !important;
}
.pr-card .pr-body p,
.pr-card .pr-tags { display: none !important; }
/* Hide the "01..09" num badge on print cards on mobile (matches lab-card decision) */
.pr-card .pr-num { display: none !important; }
/* Gold gradient hairline between photo and body */
.pr-card .pr-thumb::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
height: 1.5px !important;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--cyan, #d4af37) 70%, transparent) 50%,
transparent) !important;
transform: scaleX(1) !important;
transform-origin: center !important;
}
}
@media (max-width: 420px) {
.pr-card { aspect-ratio: 1 / 1.4 !important; }
.pr-card .pr-body h3 { font-size: .82rem !important; }
}
/* ════════════════════════════════════════════════════════════════
SOCIAL LAB — Pricing: all 3 tiers in one row on mobile
social.html has inline @media(max-width:1100px) { .pkg-grid: 1fr }
— we override with 3-col strict grid + ultra-compact cards.
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.pkg-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: .5rem !important;
margin-top: 1.5rem !important;
}
.pkg {
padding: 1.1rem .65rem 1rem !important;
border-radius: 16px !important;
background: linear-gradient(165deg,
var(--bg2) 0%,
color-mix(in srgb, var(--bg2) 88%, var(--violet, #7c3aed) 12%) 100%) !important;
border: 1px solid color-mix(in srgb, var(--violet, #7c3aed) 20%, var(--border)) !important;
box-shadow:
0 8px 18px rgba(0, 0, 0, .4),
inset 0 1px 0 rgba(255, 255, 255, .04) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: .5rem !important;
position: relative;
overflow: visible;
}
/* HIDE long content on the mobile compact tiers — accessible via the
comparison table below or contact page */
.pkg .pkg-desc,
.pkg .pkg-list { display: none !important; }
/* Featured (middle) tier: gold ring + soft glow */
.pkg.featured {
border-color: color-mix(in srgb, var(--cyan, #d4af37) 60%, transparent) !important;
background: linear-gradient(165deg,
color-mix(in srgb, var(--bg2) 90%, var(--cyan, #d4af37) 10%) 0%,
color-mix(in srgb, var(--bg2) 80%, var(--violet, #7c3aed) 20%) 100%) !important;
box-shadow:
0 10px 24px color-mix(in srgb, var(--cyan, #d4af37) 18%, transparent),
0 0 22px color-mix(in srgb, var(--violet, #7c3aed) 22%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .08) !important;
transform: scale(1.02);
}
.pkg .pkg-badge {
position: absolute !important;
top: -.65rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a) !important;
color: #1a0f00 !important;
font-size: .48rem !important;
font-weight: 800 !important;
letter-spacing: .12em !important;
padding: .2rem .55rem !important;
border-radius: 100px !important;
text-transform: uppercase !important;
white-space: nowrap !important;
box-shadow: 0 4px 10px color-mix(in srgb, var(--cyan, #d4af37) 35%, transparent);
}
/* Tier name */
.pkg .pkg-name {
font-size: .58rem !important;
letter-spacing: .14em !important;
margin: 0 !important;
color: var(--cyan, #d4af37) !important;
font-weight: 800 !important;
}
/* Price */
.pkg .pkg-price {
font-size: 1.05rem !important;
margin: 0 !important;
letter-spacing: -.03em !important;
line-height: 1 !important;
font-weight: 900 !important;
color: #fff !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: .15rem !important;
}
.pkg .pkg-price span {
font-size: .48rem !important;
color: rgba(244, 232, 215, .55) !important;
letter-spacing: .05em !important;
font-weight: 500 !important;
}
/* Button — full width, compact */
.pkg .btn-p, .pkg .btn-g {
width: 100% !important;
padding: .55rem .35rem !important;
font-size: .62rem !important;
border-radius: 10px !important;
margin-top: auto !important;
letter-spacing: .03em !important;
font-weight: 700 !important;
}
.pkg.featured .btn-p {
background: linear-gradient(135deg, var(--cyan, #d4af37), #f5d97a) !important;
color: #1a0f00 !important;
border: none !important;
box-shadow: 0 6px 16px color-mix(in srgb, var(--cyan, #d4af37) 35%, transparent);
}
/* COMPARISON TABLE — make horizontally scrollable on mobile */
.table-wrapper {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
margin: 1.5rem -1.25rem 0 !important;
padding: 0 1.25rem !important;
scrollbar-width: none !important;
}
.table-wrapper::-webkit-scrollbar { display: none !important; }
.compare-table {
min-width: 560px !important;
font-size: .72rem !important;
}
.compare-table th, .compare-table td {
padding: .65rem .55rem !important;
}
.compare-table .th-pkg { font-size: .85rem !important; }
.compare-table .th-price { font-size: .68rem !important; }
.compare-table .th-price span { font-size: .55rem !important; }
.compare-table .featured-th .pkg-badge {
position: static !important;
transform: none !important;
display: inline-block !important;
margin-bottom: .3rem !important;
}
.compare-section-title h3 { font-size: 1.4rem !important; }
}
/* Ultra-narrow phones (≤380px) — tighter price tiles */
@media (max-width: 380px) {
.pkg { padding: 1rem .5rem .9rem !important; gap: .4rem !important; }
.pkg .pkg-price { font-size: .92rem !important; }
.pkg .pkg-price span { font-size: .42rem !important; }
.pkg .pkg-name { font-size: .52rem !important; }
.pkg .btn-p, .pkg .btn-g { font-size: .55rem !important; padding: .5rem .25rem !important; }
}
/* ════════════════════════════════════════════════════════════════
COMPREHENSIVE MOBILE RESPONSIVENESS
Fixes hero, page-hero, nav, typography, overflow on all pages
════════════════════════════════════════════════════════════════ */
/* ── Prevent ALL horizontal overflow ── */
@media (max-width: 900px) {
html, body { overflow-x: hidden; max-width: 100vw; }
/* ── Hero section (index.html) ── */
#hero {
padding: 7rem 1.25rem 4rem !important;
min-height: 100svh !important;
}
/* Scale down floating orbs so they don't bleed off-screen */
#hero .o1 { width: 260px !important; height: 260px !important; top: -60px !important; left: -80px !important; }
#hero .o2 { width: 200px !important; height: 200px !important; bottom: -60px !important; right: -60px !important; }
#hero .o3 { display: none !important; }
/* Hero text */
.h-title {
font-size: clamp(2.4rem, 10vw, 3.8rem) !important;
letter-spacing: -.03em !important;
line-height: 1.05 !important;
margin-bottom: 1.1rem !important;
}
.h-sub {
font-size: .95rem !important;
line-height: 1.65 !important;
margin-bottom: 1.8rem !important;
max-width: 90% !important;
}
#hero .h-tagline {
font-size: .95rem !important;
margin-top: -.5rem !important;
margin-bottom: 1.4rem !important;
}
/* CTA buttons: stack vertically on small screens */
.h-ctas {
flex-direction: column !important;
align-items: stretch !important;
gap: .65rem !important;
width: 100% !important;
max-width: 280px !important;
margin: 0 auto !important;
}
.h-ctas .btn-g,
.h-ctas .btn-p,
.h-ctas a {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
}
/* ── Page hero (inner lab pages) ── */
.page-hero {
min-height: 44vh !important;
padding: 7rem 1.25rem 3rem !important;
}
.page-hero h1 {
font-size: clamp(1.9rem, 8vw, 3rem) !important;
margin-bottom: 1rem !important;
line-height: 1.08 !important;
}
.page-hero p {
font-size: .92rem !important;
line-height: 1.65 !important;
margin-bottom: 1.5rem !important;
}
.page-hero .btn-g,
.page-hero .btn-p {
width: 100% !important;
text-align: center !important;
}
/* ── Section containers: honour side padding ── */
.container,
.bs-container,
section > .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
/* ── Benefits sticky section: single column ── */
#benefits { padding: 3.5rem 0 2rem !important; }
.bs-container {
grid-template-columns: 1fr !important;
gap: 1.5rem !important;
padding: 0 1.25rem !important;
}
.bs-sticky-col { position: static !important; }
.bs-title { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
.bs-scroll-col::before { display: none !important; }
.bc-marker { display: none !important; }
.benefit-card { padding: 1.6rem 1.25rem !important; }
.bc-num { font-size: 2.8rem !important; }
/* ── Testimonials ── */
.testimonials-grid,
.t-grid {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
/* ── Process steps ── */
.p-steps {
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
/* ── Footer: single column, centred ── */
footer.footer,
.footer {
grid-template-columns: 1fr !important;
text-align: center !important;
padding: 3rem 1.5rem 0 !important;
gap: 2rem !important;
}
.footer ul { padding: 0 !important; }
.f-bottom {
flex-direction: column !important;
gap: .5rem !important;
text-align: center !important;
padding: 1.25rem !important;
}
/* ── Marquee ── */
.marquee-track { gap: 1.5rem !important; }
/* ── CTA band: stack buttons ── */
.cta-btns {
flex-direction: column !important;
align-items: stretch !important;
gap: .65rem !important;
max-width: 280px !important;
margin: 0 auto !important;
}
.cta-btns .btn-g,
.cta-btns .btn-p { width: 100% !important; text-align: center !important; }
/* ── Modal: full screen on mobile ── */
.details-modal-card {
width: 95% !important;
padding: 2rem 1.25rem !important;
border-radius: 18px !important;
max-height: 88vh !important;
}
/* ── Nav: ensure hamburger area doesn't get clipped ── */
#nav { padding: 1rem 1.25rem !important; }
.logo-img img { width: 150px !important; height: auto !important; }
}
/* ── Extra small (≤480px) — tighten further ── */
@media (max-width: 480px) {
.h-title { font-size: clamp(2rem, 11vw, 2.8rem) !important; }
.h-badge { font-size: .6rem !important; padding: .3rem .85rem !important; margin-bottom: 1.2rem !important; }
.page-hero h1 { font-size: clamp(1.65rem, 9vw, 2.4rem) !important; }
.benefit-card { padding: 1.25rem 1rem !important; }
.bc-num { font-size: 2.2rem !important; }
.s-title { font-size: clamp(1.4rem, 7vw, 1.8rem) !important; }
#hero .o1 { width: 200px !important; height: 200px !important; }
#hero .o2 { width: 160px !important; height: 160px !important; }
}