/* global.css is linked separately in HTML (avoid @import round-trip) */
/* ============================================================
Jurnii.io — Marketing site shared styles
============================================================ */
* { box-sizing: border-box; }
*::selection { background: var(--jurnii-200); color: var(--concrete-950); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font-family: inherit; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
/* ---------- Layout ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--spacing-6); }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--spacing-6); }
.section { padding: var(--section-padding-y) 0; border-bottom: 1px solid var(--border); }
.section-tight { padding: var(--section-padding-y-tight) 0; border-bottom: 1px solid var(--border); }
.section-dark { background: var(--concrete-950); color: var(--foreground); border-bottom: 1px solid var(--concrete-950); }
.section-dark .muted { color: var(--muted-foreground) !important; }
@media (max-width: 768px) {
.container, .container-narrow { padding: 0 var(--spacing-5); }
}
/* ---------- Typography helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: var(--spacing-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin: 0; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--jurnii-500); box-shadow: 0 0 0 3px rgba(var(--brand-glow),0.18); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(var(--brand-glow),0.18);} 50% { box-shadow: 0 0 0 5px rgba(var(--brand-glow),0.08);} }
/* Eyebrow → headline gap (site-wide). Scoped so tab labels (.eyebrow in buttons) stay tight. */
.section-head > .eyebrow,
.hero-copy > .eyebrow,
.page-hero .eyebrow,
.uc-archive-hero .eyebrow,
.uc-challenge .eyebrow,
.uc-cortex .eyebrow {
margin: 0 0 var(--section-title-gap);
}
/* Inline brand-green emphasis inside headings — theme-aware so it always passes contrast */
.ink-green { color: var(--jurnii-600); }
[data-theme="dark"] .ink-green, [data-theme="jurnii-v1"] .ink-green { color: var(--jurnii-200); }
.ink-muted { color: var(--muted-foreground); }
h1.display { font-size: clamp(var(--text-6xl), 5.6vw, var(--text-11xl)); line-height: 0.98; letter-spacing: -0.035em; font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-5); max-width: 16ch; }
h1.page-title { font-size: clamp(var(--text-5xl), 4.6vw, var(--text-11xl)); line-height: 1.02; letter-spacing: -0.03em; font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-4); max-width: 18ch; }
.h2-section { font-size: clamp(var(--text-3xl), 3.6vw, var(--text-8xl)); line-height: 1.06; letter-spacing: -0.025em; font-weight: var(--fw-semibold); margin: 0; max-width: 22ch; }
.lede { font-size: clamp(var(--text-base), 1.5vw, var(--text-xl)); line-height: 1.55; color: var(--muted-foreground); max-width: 56ch; margin: 0 0 var(--spacing-6); }
.section-lede { font-size: var(--text-base); line-height: 1.55; color: var(--muted-foreground); max-width: 60ch; margin: var(--spacing-3) 0 0; }
.body-md { font-size: var(--text-base); line-height: 1.65; color: var(--foreground); }
.muted { color: var(--muted-foreground); }
.serif-em { font-style: normal; } /* hook left in case theme toggles */
/* Headlines & titles — semantic foreground */
h1.display, h1.page-title, .h1-page, .h2-section,
.problem-card h3, .tab-panel h3, .how-card h3, .resource-card h3,
.article h2, .article h3, .article-cta h3, .article-body h2,
.method-list h3, .demo-cta h2, .cta-band h2, .industry-card-head h3,
.icp-detail-head h2, .tele-pane-head h3, .tele-cta h3,
.team-card b, .plan-price {
color: var(--foreground);
}
/* Always-dark bands: re-map text tokens when page theme is light */
[data-theme="light"] .section-dark,
[data-theme="light"] .demo-cta,
[data-theme="light"] .cta-band,
[data-theme="light"] .footer,
[data-theme="light"] .tab-visual,
[data-theme="light"] .hero-ticker,
[data-theme="light"] .tele-cta,
[data-theme="light"] .plan.featured,
[data-theme="light"] .sticky-demo-cta,
[data-theme="light"] .uc-capabilities,
[data-theme="light"] .hero-orbit-center {
--foreground: var(--concrete-50);
--muted-foreground: var(--concrete-300);
}
.section-head { max-width: 720px; margin-bottom: var(--spacing-12); }
.section-head.compact { margin-bottom: var(--spacing-8); }
.section-head.flush { margin-bottom: 0; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }
.section-head.centered .h2-section, .section-head.centered .section-lede { margin-left: auto; margin-right: auto; }
/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--spacing-2); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-medium); padding: var(--spacing-3) var(--spacing-4); border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), background 150ms ease, border-color 150ms ease, color 150ms ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn.sm { font-size: var(--text-xs); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); }
.btn.lg { font-size: var(--text-base); padding: var(--spacing-3) var(--spacing-5); }
.btn.primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); --btn-ping: var(--primary); }
.btn.primary:hover { background: color-mix(in srgb, var(--primary) 85%, var(--primary-foreground)); border-color: color-mix(in srgb, var(--primary) 85%, var(--primary-foreground)); }
.btn.accent { background: var(--accent-green); color: var(--concrete-950); border-color: var(--accent-green); --btn-ping: var(--accent-green); }
.btn.accent:hover { background: var(--accent-green-hover); border-color: var(--accent-green-hover); }
.btn.ghost { background: transparent; color: var(--foreground); border-color: var(--border); }
.btn.ghost:hover { background: var(--accent); }
.btn.ghost-on-dark { background: transparent; color: var(--foreground); border-color: var(--white-a-18); }
.btn.ghost-on-dark:hover { background: var(--white-a-8); }
.btn .arrow { transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
.btn:hover .arrow { transform: translateX(2px); }
.btn:focus-visible { outline: 2px solid var(--jurnii-500); outline-offset: 2px; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--spacing-1); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--foreground); transition: gap 150ms ease; }
.link-arrow:hover { gap: var(--spacing-2); }
.link-arrow .arrow { transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
.link-arrow:hover .arrow { transform: translateX(2px); }
/* ---------- Pill / badge ---------- */
.pill { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); background: var(--card); border: 1px solid var(--border); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--foreground); }
.pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--jurnii-500); box-shadow: 0 0 0 3px rgba(var(--brand-glow),0.2); }
.pill.solid { background: var(--accent); }
/* ---------- Cards ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-6); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), border-color 220ms ease; }
.card.hover-lift:hover { transform: translateY(-2px); border-color: var(--concrete-300); }
[data-theme="dark"] .card.hover-lift:hover, [data-theme="jurnii-v1"] .card.hover-lift:hover { border-color: var(--white-a-20); }
/* ---------- Nav ---------- */
/* hidden, not clip: overflow:clip on html/body makes position:fixed
descendants document-relative, so the mobile menu would open at the
top of the page instead of the current viewport. */
body { overflow-x: hidden; }
html.nav-mobile-open body {
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); }
.nav { background: var(--nav-bg); }
.nav.is-open { z-index: 80; }
.nav-inner {
display: grid; align-items: center; gap: var(--spacing-6); padding-block: var(--spacing-3); position: relative;
grid-template-columns: auto 1fr auto;
grid-template-areas: "brand links cta";
}
.nav-mobile-toggle { grid-area: toggle; display: none; }
.nav-brand { grid-area: brand; display: flex; align-items: center; gap: var(--spacing-2); }
.nav-links { grid-area: links; }
.nav-cta { grid-area: cta; }
.nav-brand img { height: 22px; width: auto; }
/* ---------- Animated brand logo (theme-driven) ---------- */
.nav-logo { width: auto; display: block; overflow: visible; }
.nav-logo--mark { display: none; }
.nav-logo .logo-arrow { fill: var(--jurnii-300); }
.nav-logo .logo-spark { fill: var(--foreground); }
.nav-logo .logo-word path { fill: var(--foreground); }
.nav-logo .logo-arrow, .nav-logo .logo-spark { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
.nav-logo .logo-arrow { animation: logoArrowIn 700ms cubic-bezier(.2,.8,.2,1) backwards; }
.nav-logo .logo-spark-1 { animation: logoSparkIn 520ms cubic-bezier(.2,.8,.2,1) 160ms backwards, logoTwinkle 4.2s ease-in-out 1.3s infinite; }
.nav-logo .logo-spark-2 { animation: logoSparkIn 520ms cubic-bezier(.2,.8,.2,1) 300ms backwards, logoTwinkle 4.8s ease-in-out 1.7s infinite; }
.nav-brand:hover .logo-arrow { animation: logoArrowIn 600ms cubic-bezier(.2,.8,.2,1); }
}
@keyframes logoArrowIn { from { opacity: 0; transform: rotate(-28deg) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes logoSparkIn { from { opacity: 0; transform: scale(0) rotate(-60deg); } to { opacity: 1; transform: none; } }
@keyframes logoTwinkle { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .5; transform: scale(.78); } }
.nav-links { display: flex; gap: var(--spacing-1); justify-content: center; align-items: center; }
.nav-links > a, .nav-links button { font-size: var(--text-sm); color: var(--foreground); font-weight: var(--fw-medium); opacity: 0.78; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--spacing-1); transition: opacity 150ms ease, background 150ms ease; }
.nav-links > a:hover, .nav-links button:hover { opacity: 1; background: var(--accent); }
.nav-links > a.is-active { opacity: 1; background: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: var(--spacing-3); }
.nav-cta .icon-btn { width: 34px; height: 34px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer; transition: background 150ms ease; }
.nav-cta .icon-btn:hover { background: var(--accent); }
.nav-cta .theme-toggle i, .nav-mobile-tools .theme-toggle i { display: block; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
/* Pulse on the control itself — survives Lucide re-painting the inner icon */
.theme-toggle.is-flipping {
animation: themeTogglePulse 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle.is-flipping i {
animation: themeIconFlip 480ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Briefly re-spark the logo mark as the theme lands */
html.theme-switching .nav-logo .logo-spark-1 {
animation: logoSparkIn 520ms cubic-bezier(.2,.8,.2,1) backwards;
}
html.theme-switching .nav-logo .logo-spark-2 {
animation: logoSparkIn 520ms cubic-bezier(.2,.8,.2,1) 80ms backwards;
}
html.theme-switching .nav-logo .logo-arrow {
animation: logoArrowIn 560ms cubic-bezier(.2,.8,.2,1) backwards;
}
}
@keyframes themeTogglePulse {
0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(var(--brand-glow), 0.4); }
45% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(var(--brand-glow), 0); }
100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@keyframes themeIconFlip {
0% { transform: rotate(-100deg) scale(0.55); opacity: 0.35; }
55% { transform: rotate(8deg) scale(1.08); opacity: 1; }
100% { transform: rotate(0) scale(1); opacity: 1; }
}
/* ---------- Theme switch wipe (View Transition API) ---------- */
/* One snapshot only — sticky/backdrop nav must not become its own group
or the wipe looks like it grows from the middle of the header. */
html.theme-switching * { view-transition-name: none !important; }
html.theme-switching .nav {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) {
z-index: 1;
animation: none;
}
/* Duration keeps the overlay alive for the full circle. Keyframe geometry is
injected as literal px by site.jsx (CSS vars on ::view-transition-* are flaky
outside Chrome — Opera GX was snapping / missing the toggle origin). */
::view-transition-new(root) {
z-index: 2;
animation: theme-wipe-in 650ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Placeholder — replaced per click by #jurnii-theme-wipe before the snapshot. */
@keyframes theme-wipe-in {
from { clip-path: circle(0px at calc(100% - 48px) 32px); }
to { clip-path: circle(100vmax at calc(100% - 48px) 32px); }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
/* Fallback veil for browsers without View Transitions */
.theme-veil {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
background: var(--background);
opacity: 0;
transition: opacity 140ms ease;
}
.theme-veil.is-on { opacity: 1; }
.theme-veil.is-out { opacity: 0; transition-duration: 280ms; }
@media (prefers-reduced-motion: reduce) {
.theme-veil { display: none; }
}
/* Dropdowns */
.dropdown { position: relative; }
.dropdown-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; width: max-content; display: flex; flex-direction: column; background: var(--popover); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-2); box-shadow: 0 12px 32px -10px var(--black-a-16), 0 2px 6px var(--black-a-4); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; z-index: 60; }
.dropdown.open .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.dropdown-item { display: grid; grid-template-columns: 36px auto; gap: var(--spacing-3); padding: var(--spacing-2); border-radius: 10px; align-items: center; transition: background 150ms ease; box-sizing: border-box; text-align: left; opacity: 1; }
.dropdown-item:hover { background: var(--accent); }
.dropdown-item .ico { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--jurnii-50); color: var(--jurnii-700); display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .dropdown-item .ico, [data-theme="jurnii-v1"] .dropdown-item .ico { background: rgba(var(--brand-glow),0.12); color: var(--jurnii-200); }
.dropdown-item > div { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dropdown-item b { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--foreground); margin: 0; line-height: 1.25; }
.dropdown-item span { display: block; font-size: var(--text-xs); color: var(--muted-foreground); margin: 0; line-height: 1.3; white-space: nowrap; }
/* Mega dropdowns */
.mega-dropdown { position: static; }
.mega-dropdown > button { font-size: var(--text-sm); color: var(--foreground); font-weight: var(--fw-medium); opacity: 0.78; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--spacing-1); white-space: nowrap; transition: opacity 150ms ease, background 150ms ease; }
.mega-dropdown > button:hover, .mega-dropdown.open > button { opacity: 1; background: var(--accent); }
.mega-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; transform: translateY(-4px); background: var(--popover); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-5) var(--spacing-6); box-shadow: 0 12px 32px -10px var(--black-a-16), 0 2px 6px var(--black-a-4); opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; z-index: 60; }
.mega-dropdown.open .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.mega-cols { display: grid; gap: 0 var(--spacing-10); width: 100%; }
.mega-col { min-width: 0; }
.mega-col-head { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); font-weight: var(--fw-medium); padding-bottom: var(--spacing-2); margin-bottom: var(--spacing-1); border-bottom: 1px solid var(--border); }
.mega-col-items { display: flex; flex-direction: column; gap: var(--spacing-1); }
.mega-col-items--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-1) var(--spacing-6); }
.mega-col-items .mega-item { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--foreground); padding: var(--spacing-2); border-radius: 10px; opacity: 0.75; white-space: nowrap; transition: opacity 150ms ease, color 150ms ease, background 150ms ease; }
.mega-col-items .mega-item:hover { opacity: 1; color: var(--jurnii-700); background: var(--accent); }
[data-theme="dark"] .mega-col-items .mega-item:hover, [data-theme="jurnii-v1"] .mega-col-items .mega-item:hover { color: var(--jurnii-200); }
.mega-item-ico { flex-shrink: 0; width: 14px; height: 14px; color: var(--muted-foreground); transition: color 150ms ease; }
.mega-col-items .mega-item:hover .mega-item-ico { color: inherit; }
.mega-footer-row { margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--border); }
.nav-mobile-toggle {
width: 40px; height: 40px; border-radius: var(--radius-md);
display: none; align-items: center; justify-content: center;
border: 1px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer;
}
.nav-mobile-toggle:hover { background: var(--accent); }
.nav-icon-slot { display: inline-flex; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
.nav-mobile-toggle .nav-icon-slot { animation: navIconIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}
@keyframes navIconIn {
from { opacity: 0; transform: scale(0.72) rotate(-50deg); }
to { opacity: 1; transform: none; }
}
.nav-mobile-overlay { display: none; }
/* Hamburger from lg down — the six-item mega-nav needs ~1100px and overflows 768–1024. */
@media (max-width: 1024px) {
.nav-inner {
grid-template-columns: auto auto 1fr auto;
grid-template-areas: "toggle brand . cta";
gap: var(--spacing-2);
}
.nav-links { display: none; }
.nav-cta .desktop-only { display: none; }
.nav-mobile-toggle {
display: inline-flex;
position: relative;
z-index: 2;
border-color: transparent;
}
.nav-brand {
position: static;
justify-self: start;
z-index: 1;
}
.nav-brand .nav-logo--full { display: none; }
.nav-brand .nav-logo--mark { display: block; height: 32px; width: auto; }
.nav-cta { justify-self: end; position: relative; z-index: 2; gap: var(--spacing-2); }
.nav-cta .nav-demo-cta { order: 1; }
.nav-cta .theme-toggle { order: 2; }
.nav-demo-cta { white-space: nowrap; }
.nav-mobile-overlay {
display: flex;
visibility: hidden;
pointer-events: none;
clip-path: inset(0 0 100% 0);
transform: translate3d(0, -8px, 0);
transition: clip-path 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
visibility 0s linear 320ms;
}
.nav-mobile-overlay.open {
visibility: visible;
pointer-events: auto;
clip-path: inset(0);
transform: none;
transition-delay: 0s;
}
.sticky-demo-cta { display: none !important; }
body { padding-bottom: 0; }
}
/* Sibling of .nav (not inside backdrop-filter) so position:fixed is viewport-relative. */
.nav-mobile-overlay {
position: fixed;
top: var(--nav-h, 56px);
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: calc(100dvh - var(--nav-h, 56px));
background: var(--background);
z-index: 70;
padding: 0 var(--spacing-5) calc(var(--spacing-6) + env(safe-area-inset-bottom));
flex-direction: column;
overflow: hidden;
min-height: 0;
overscroll-behavior: none;
touch-action: none;
}
.nav-mobile-tools {
display: flex; align-items: center; gap: var(--spacing-3);
padding: var(--spacing-5) 0 var(--spacing-4);
flex: none;
}
.nav-mobile-tools .btn { flex: 1; justify-content: center; text-decoration: none; }
.nav-mobile-tools .icon-btn {
width: 40px; height: 40px; border-radius: var(--radius-md); flex: none;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer;
}
.nav-mobile-tools .icon-btn:hover { background: var(--accent); }
.nav-mobile-list {
flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
display: flex; flex-direction: column; gap: var(--spacing-3);
padding: var(--spacing-4) 0 var(--spacing-8);
}
.nav-mobile-acc {
flex: none;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.nav-mobile-acc-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
padding: var(--spacing-5); background: none; border: 0; cursor: pointer;
font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--foreground); letter-spacing: -0.02em;
text-align: left;
}
.nav-mobile-acc-toggle .nav-icon-slot {
flex: none; color: var(--muted-foreground);
transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-mobile-acc.is-open .nav-mobile-acc-toggle .nav-icon-slot { transform: rotate(180deg); }
.nav-mobile-acc-body {
display: grid;
grid-template-rows: 0fr;
pointer-events: none;
transition: grid-template-rows 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-mobile-acc.is-open .nav-mobile-acc-body { grid-template-rows: 1fr; pointer-events: auto; }
.nav-mobile-acc-inner { overflow: hidden; min-height: 0; }
.nav-mobile-acc-content { padding: 0 var(--spacing-4) var(--spacing-5); }
.nav-mobile-acc.is-open .nav-mobile-item,
.nav-mobile-acc.is-open .nav-mobile-subhead,
.nav-mobile-acc.is-open .nav-mobile-acc-content > .link-arrow {
animation: navMobileItemIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(48ms + (var(--stagger, 0) * 28ms));
}
@keyframes navMobileItemIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav-mobile-acc.is-open .nav-mobile-item,
.nav-mobile-acc.is-open .nav-mobile-subhead,
.nav-mobile-acc.is-open .nav-mobile-acc-content > .link-arrow {
animation: none;
}
}
.nav-mobile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4) var(--spacing-2);
}
.nav-mobile-item {
display: flex; align-items: center; gap: var(--spacing-2); min-width: 0;
font-size: var(--text-sm); font-weight: var(--fw-medium);
color: var(--foreground); line-height: 1.3;
}
.nav-mobile-chip {
flex: none; width: 32px; height: 32px; border-radius: var(--radius-lg);
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent); border: 1px solid var(--border); color: var(--foreground);
}
.nav-mobile-chip svg { width: 16px; height: 16px; }
.nav-mobile-item-label {
min-width: 0;
flex: 1;
}
.nav-mobile-subgroup + .nav-mobile-subgroup { margin-top: var(--spacing-5); }
.nav-mobile-subhead {
font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em;
text-transform: uppercase; color: var(--muted-foreground); font-weight: var(--fw-medium);
margin: 0 0 var(--spacing-3);
}
.nav-mobile-acc-content > .link-arrow { margin-top: var(--spacing-5); }
.nav-mobile-link {
flex: none;
display: block; padding: var(--spacing-5);
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--foreground);
}
/* ---------- Hero ---------- */
.hero { padding: var(--spacing-20) 0 var(--spacing-24); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(var(--brand-glow),0.12) 0%, transparent 55%); pointer-events: none; z-index: 0; }
[data-theme="dark"] .hero::before { background: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(var(--brand-glow),0.10) 0%, transparent 55%); }
[data-theme="jurnii-v1"] .hero::before { background: radial-gradient(ellipse 80% 60% at 80% -10%, rgba(var(--brand-glow),0.10) 0%, transparent 55%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.18fr 1fr; gap: var(--spacing-12); align-items: center; }
.hero-copy .pill { margin-bottom: var(--spacing-5); }
.hero-ctas { display: flex; gap: var(--spacing-3); margin: var(--spacing-2) 0 var(--spacing-8); flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: var(--spacing-3); padding-top: var(--spacing-8); border-top: 1px solid var(--border); }
.hero-trust-avatars { display: flex; }
.hero-trust-avatars span { width: 30px; height: 30px; border-radius: var(--radius-full); border: 2px solid var(--background); margin-left: calc(-1 * var(--spacing-2)); background: var(--concrete-950); color: var(--jurnii-300); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.hero-trust-avatars span:first-child { margin-left: 0; }
.hero-trust-text { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }
.hero-trust-text b { color: var(--foreground); font-weight: var(--fw-semibold); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--spacing-8); padding-top: var(--spacing-8); border-top: 1px solid var(--border); }
.hero-stats > div { display: flex; flex-direction: column; gap: var(--spacing-1); padding: 0 var(--spacing-6); }
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child { padding-right: 0; }
.hero-stats > div + div { border-left: 1px solid var(--border); }
.hero-stats .n { font-size: clamp(var(--text-2xl), 2.4vw, var(--text-3xl)); font-weight: var(--fw-semibold); letter-spacing: -0.025em; color: var(--foreground); line-height: 1; display: inline-flex; align-items: center; gap: 6px; }
.hero-stats .n svg, .hero-stats .n i { width: 1em; height: 1em; display: block; }
.hero-stats .l { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }
@media (max-width: 1024px) {
.hero { padding: var(--spacing-12) 0 var(--spacing-16); }
.hero-grid { grid-template-columns: 1fr; gap: var(--spacing-12); }
}
@media (max-width: 640px) {
.hero { padding: var(--spacing-10) 0 var(--spacing-12); }
.hero-stats > div { padding: 0 var(--spacing-4); }
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child { padding-right: 0; }
}
/* ---------- Logo bar ---------- */
.logo-bar { padding: var(--spacing-12) 0; border-bottom: 1px solid var(--border); background: var(--background); overflow: hidden; }
.logo-bar--after-tm { padding-top: var(--spacing-10); padding-bottom: 0; border-bottom: 0; }
.logo-bar-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); text-align: center; margin: 0 0 var(--spacing-10); }
.logo-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-10) var(--spacing-12); opacity: 0.85; }
.logo-bar-row svg { height: 38px; width: auto; max-width: 140px; opacity: 0.75; transition: opacity 220ms ease; color: var(--foreground); }
.logo-bar-row svg:hover { opacity: 1; }
/* Operator marquee — ~4–5 logos visible, infinite horizontal loop */
.logo-bar-marquee {
position: relative;
width: 100%;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logo-bar-track {
display: flex;
align-items: center;
width: max-content;
gap: clamp(0.875rem, 1.75vw, 1.575rem);
padding-inline: clamp(1rem, 3vw, 2rem);
opacity: 0.9;
}
.logo-bar-item {
flex: 0 0 auto;
width: clamp(7rem, 14vw, 10rem);
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.logo-bar-item svg {
height: 35px;
width: auto;
max-width: 100%;
max-height: 35px;
opacity: 0.78;
color: var(--foreground);
transition: opacity 220ms ease;
}
.logo-bar-item:hover svg { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
.logo-bar-track {
animation: logo-bar-marquee 48s linear infinite;
}
.logo-bar-marquee:hover .logo-bar-track {
animation-play-state: paused;
}
}
@keyframes logo-bar-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.logo-bar-marquee { mask-image: none; -webkit-mask-image: none; }
.logo-bar-track {
animation: none;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 1100px;
margin-inline: auto;
gap: var(--spacing-8) var(--spacing-10);
}
.logo-bar-item:nth-child(n + 9) { display: none; }
}
@media (max-width: 640px) {
.logo-bar-item { width: clamp(7rem, 26vw, 9.5rem); height: 34px; }
.logo-bar-item svg { height: 29px; max-height: 29px; }
}
/* ---------- Problem section ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-5); margin-top: var(--spacing-12); }
.problem-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-8); display: flex; flex-direction: column; gap: var(--spacing-4); transition: border-color 220ms ease, transform 220ms cubic-bezier(0.2,0.8,0.2,1); }
.problem-card:hover { transform: translateY(-2px); border-color: var(--concrete-300); }
[data-theme="dark"] .problem-card:hover, [data-theme="jurnii-v1"] .problem-card:hover { border-color: var(--white-a-22); }
.problem-card-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--muted-foreground); }
.problem-card h3 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; margin: 0; line-height: 1.2; }
.problem-card p { font-size: var(--text-base); line-height: 1.6; color: var(--muted-foreground); margin: 0; }
.problem-card .stat { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--jurnii-700); padding-top: var(--spacing-3); border-top: 1px solid var(--border); margin-top: auto; }
[data-theme="dark"] .problem-card .stat, [data-theme="jurnii-v1"] .problem-card .stat { color: var(--jurnii-200); }
@media (max-width: 1024px) { .problem-grid { grid-template-columns: 1fr; gap: var(--spacing-4); } }
/* ---------- Product tabs ---------- */
.tabs { margin-top: var(--spacing-12); }
.tabs-bar {
display: flex; align-items: stretch; gap: var(--spacing-2); flex-wrap: wrap;
box-shadow: inset 0 -1px 0 var(--border);
}
.tabs-bar button {
position: relative;
background: transparent; border: 0; padding: var(--spacing-3) var(--spacing-1); margin-right: var(--spacing-6);
font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-medium);
color: var(--muted-foreground); cursor: pointer;
display: inline-flex; align-items: center; gap: var(--spacing-2);
transition: color 150ms ease;
}
.tabs-bar button.is-active { color: var(--foreground); font-weight: var(--fw-semibold); }
.tabs-bar button.is-active::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--jurnii-500); pointer-events: none;
}
.tabs-bar button:hover { color: var(--foreground); }
.tab-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); padding: var(--spacing-12) 0; align-items: start; }
.tab-panel h3 { font-size: clamp(var(--text-3xl), 2.6vw, var(--text-5xl)); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: var(--spacing-4) 0 var(--spacing-4); line-height: 1.1; }
.tab-panel p.lede { font-size: var(--text-base); max-width: 50ch; margin-bottom: var(--spacing-6); }
.tab-panel .feature-list { list-style: none; padding: 0; margin: 0 0 var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-3); }
.tab-panel .feature-list li { display: grid; grid-template-columns: 18px 1fr; gap: var(--spacing-3); align-items: start; font-size: var(--text-base); line-height: 1.5; color: var(--foreground); }
.tab-panel .feature-list svg { width: 18px; height: 18px; color: var(--jurnii-600); margin-top: var(--spacing-1); }
[data-theme="dark"] .tab-panel .feature-list svg, [data-theme="jurnii-v1"] .tab-panel .feature-list svg { color: var(--jurnii-300); }
.tab-panel .actions { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }
.tab-visual { background: var(--concrete-950); color: var(--foreground); border-radius: var(--radius-xl); padding: var(--spacing-6); position: relative; overflow: hidden; min-height: 420px; }
.tab-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 80% 100%, rgba(var(--brand-glow),0.18) 0%, transparent 60%); pointer-events: none; }
.tab-visual-head { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; margin-bottom: var(--spacing-6); }
.tab-visual-name { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.04em; color: var(--foreground); }
.tab-visual-live { display: inline-flex; align-items: center; gap: var(--spacing-1); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jurnii-200); }
.tab-visual-live i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--jurnii-300); animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.tab-visual-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-3); position: relative; z-index: 1; margin-bottom: var(--spacing-6); }
.tab-visual-stat { padding: var(--spacing-3); background: var(--white-a-4); border: 1px solid var(--white-a-8); border-radius: 10px; }
.tab-visual-stat .n { display: block; font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--foreground); line-height: 1; }
.tab-visual-stat .l { display: block; font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--spacing-1); }
.tab-visual-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-1); position: relative; z-index: 1; }
.tab-visual-chips span { font-size: var(--text-xs); padding: var(--spacing-1) var(--spacing-2); background: var(--white-a-6); border: 1px solid var(--white-a-10); border-radius: var(--radius-md); color: var(--muted-foreground); }
@media (max-width: 1024px) {
.tab-panel { grid-template-columns: 1fr; gap: var(--spacing-8); padding: var(--spacing-8) 0; }
.tabs-bar { gap: 0; overflow-x: auto; flex-wrap: nowrap; }
.tabs-bar button { white-space: nowrap; margin-right: var(--spacing-5); }
}
/* ---------- UX Scorecard (Rating Card) — used inside the Jurnii UX product tab ---------- */
.sc-card {
--sc-track: var(--concrete-200);
--sc-logo-bg: var(--accent);
--sc-logo-mark: var(--concrete-950);
background: var(--card);
color: var(--card-foreground);
border-radius: var(--radius-3xl);
padding: var(--spacing-8) var(--spacing-8) var(--spacing-8);
box-shadow: 0 1px 2px var(--black-a-4), 0 14px 40px -18px var(--black-a-22);
width: 100%;
}
[data-theme="dark"] .sc-card, [data-theme="jurnii-v1"] .sc-card {
--sc-track: var(--black-a-22);
--sc-logo-bg: var(--black-a-20);
--sc-logo-mark: var(--card-foreground);
box-shadow: 0 1px 2px var(--black-a-12), 0 18px 48px -16px var(--black-a-45);
}
/* header */
.sc-head { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-1); }
.sc-logo {
flex: none; width: 64px; height: 64px; border-radius: var(--radius-xl);
background: var(--sc-logo-bg); display: flex; align-items: center; justify-content: center;
}
.sc-brand { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; }
.sc-region { font-size: var(--text-lg); color: var(--muted-foreground); line-height: 1.3; margin-top: var(--spacing-1); }
/* gauge */
.sc-gauge { position: relative; width: 100%; max-width: 330px; margin: var(--spacing-2) auto var(--spacing-1); }
.sc-gauge-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sc-gauge-track { stroke: var(--sc-track); }
.sc-gauge-value { transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.05s; }
.sc-gauge-text {
position: absolute; left: 0; right: 0; top: 47%;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.sc-gauge-label { font-size: var(--text-lg); color: var(--muted-foreground); line-height: 1; margin-bottom: var(--spacing-2); }
.sc-gauge-score { display: flex; align-items: baseline; gap: var(--spacing-1); white-space: nowrap; }
.sc-gauge-num { font-size: var(--text-9xl); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1; }
.sc-gauge-denom { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--muted-foreground); }
.sc-gauge-rating { font-size: var(--text-2xl); font-weight: var(--fw-semibold); color: var(--poor); margin-top: var(--spacing-2); letter-spacing: -0.01em; }
/* categories */
.sc-cats { display: flex; flex-direction: column; gap: var(--spacing-5); margin-top: var(--spacing-4); }
.sc-cat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-3); }
.sc-cat-label { display: flex; align-items: center; gap: var(--spacing-3); font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.sc-cat-icon { display: inline-flex; color: var(--card-foreground); }
.sc-cat-value { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sc-bar-track { height: 12px; border-radius: var(--radius-full); background: var(--sc-track); overflow: hidden; }
.sc-bar-fill { height: 100%; border-radius: var(--radius-full); width: 0; transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
.sc-gauge-value, .sc-bar-fill { transition: none; }
}
/* Scaled down 20% in the homepage product tab (component library keeps full size) */
.tab-panel .sc-card,
.tab-panel .pb-card { scale: 0.8; transform-origin: top center; }
/* ---------- Price Boost Card (Jurnii 360 — detected competitor promotion) ---------- */
.pb-card {
--sc-logo-mark: var(--concrete-950); /* JurniiMark sparkle fill (shared var name) */
--pb-logo-bg: var(--accent);
--pb-panel: var(--accent);
--pb-pill-bg: var(--primary);
--pb-pill-fg: var(--primary-foreground);
background: var(--card);
color: var(--card-foreground);
border-radius: var(--radius-3xl);
padding: var(--spacing-6) var(--spacing-8) var(--spacing-8);
box-shadow: 0 1px 2px var(--black-a-4), 0 14px 40px -18px var(--black-a-22);
width: 100%;
}
[data-theme="dark"] .pb-card, [data-theme="jurnii-v1"] .pb-card {
--sc-logo-mark: var(--card-foreground);
--pb-logo-bg: var(--black-a-20);
--pb-panel: rgba(0,0,0,0.18);
box-shadow: 0 1px 2px var(--black-a-12), 0 18px 48px -16px var(--black-a-45);
}
/* header */
.pb-head { display: flex; align-items: flex-start; gap: var(--spacing-4); }
.pb-logo {
flex: none; width: 64px; height: 64px; border-radius: var(--radius-xl);
background: var(--pb-logo-bg); display: flex; align-items: center; justify-content: center;
}
.pb-head-text { flex: 1; min-width: 0; padding-top: var(--spacing-1); }
.pb-brand { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; }
.pb-product { font-size: var(--text-lg); color: var(--muted-foreground); line-height: 1.3; margin-top: var(--spacing-1); }
.pb-status {
flex: none; align-self: flex-start; display: inline-flex; align-items: center;
font-size: var(--text-base); font-weight: var(--fw-semibold); letter-spacing: -0.01em;
color: var(--pb-pill-fg); background: var(--pb-pill-bg);
padding: var(--spacing-2) var(--spacing-5); border-radius: var(--radius-full);
}
/* match + market */
.pb-body { margin-top: var(--spacing-6); }
.pb-match { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; line-height: 1.2; }
.pb-date { font-size: var(--text-base); color: var(--muted-foreground); margin-top: var(--spacing-1); }
.pb-market { margin-top: var(--spacing-6); }
.pb-market-label { font-size: var(--text-base); color: var(--muted-foreground); }
.pb-market-value { font-size: var(--text-2xl); font-weight: var(--fw-medium); letter-spacing: -0.012em; line-height: 1.28; margin-top: var(--spacing-1); text-wrap: pretty; }
/* odds panel */
.pb-odds {
margin-top: var(--spacing-6); background: var(--pb-panel); border-radius: var(--radius-2xl);
padding: var(--spacing-5) var(--spacing-5); display: flex; align-items: flex-end; gap: var(--spacing-5);
}
.pb-odds-col { display: flex; flex-direction: column; gap: var(--spacing-2); }
.pb-odds-cap { font-size: var(--text-base); color: var(--muted-foreground); line-height: 1; }
.pb-odds-num { font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.pb-odds-num.was { text-decoration: line-through; text-decoration-thickness: 2px; }
.pb-odds-arrow { display: inline-flex; color: var(--foreground); margin-bottom: var(--spacing-1); }
.pb-boost {
margin-left: auto; align-self: center; flex: none;
font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em;
color: var(--pb-pill-fg); background: var(--pb-pill-bg);
padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-full);
}
/*
Homepage 360 tab on phones: the card is full-bleed and the desktop type scale
wraps the match title, market line, and header into two lines. Drop zoom and
use a tighter scale so the layout holds without looking miniature.
*/
@media (max-width: 640px) {
.tab-panel .pb-card {
scale: none;
padding: var(--spacing-5);
}
.tab-panel .pb-head { gap: var(--spacing-3); }
.tab-panel .pb-logo { width: 44px; height: 44px; border-radius: var(--radius-lg); }
.tab-panel .pb-logo svg { width: 28px; height: 28px; }
.tab-panel .pb-brand { font-size: var(--text-xl); }
.tab-panel .pb-product { font-size: var(--text-sm); }
.tab-panel .pb-status {
font-size: var(--text-sm);
padding: var(--spacing-1) var(--spacing-3);
}
.tab-panel .pb-body,
.tab-panel .pb-market,
.tab-panel .pb-odds { margin-top: var(--spacing-4); }
.tab-panel .pb-match { font-size: var(--text-lg); }
.tab-panel .pb-date,
.tab-panel .pb-market-label,
.tab-panel .pb-odds-cap { font-size: var(--text-sm); }
.tab-panel .pb-market-value { font-size: var(--text-base); }
.tab-panel .pb-odds {
gap: var(--spacing-3);
padding: var(--spacing-4);
}
.tab-panel .pb-odds-num { font-size: var(--text-xl); }
.tab-panel .pb-odds-arrow svg { width: 32px; height: 14px; }
.tab-panel .pb-boost {
font-size: var(--text-sm);
padding: var(--spacing-1) var(--spacing-3);
}
}
/* ---------- Cortex Overview Card (homepage product tab — one-pager mock) ---------- */
.cx-card {
--cx-panel: var(--accent);
--cx-track: var(--concrete-200);
--cx-fill: var(--foreground);
--cx-lift: var(--jurnii-700);
background: var(--card);
color: var(--card-foreground);
border-radius: var(--radius-3xl);
box-shadow: 0 1px 2px var(--black-a-4), 0 14px 40px -18px var(--black-a-22);
width: 100%;
overflow: hidden;
}
[data-theme="dark"] .cx-card, [data-theme="jurnii-v1"] .cx-card {
--cx-panel: var(--black-a-20);
--cx-track: var(--black-a-22);
--cx-lift: var(--jurnii-300);
box-shadow: 0 1px 2px var(--black-a-12), 0 18px 48px -16px var(--black-a-45);
}
.cx-chrome {
display: flex; align-items: center; gap: var(--spacing-3);
padding: var(--spacing-4) var(--spacing-6);
background: var(--cx-panel);
}
.cx-dots { display: flex; gap: var(--spacing-1); flex: none; }
.cx-dots i { width: 10px; height: 10px; border-radius: var(--radius-full); display: block; }
.cx-dots i:nth-child(1) { background: var(--destructive); }
.cx-dots i:nth-child(2) { background: var(--average); }
.cx-dots i:nth-child(3) { background: var(--jurnii-500); }
.cx-title { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--muted-foreground); letter-spacing: -0.01em; }
.cx-body { padding: var(--spacing-5) var(--spacing-6) var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-5); }
.cx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-3); }
.cx-stat {
background: var(--cx-panel); border-radius: var(--radius-xl);
padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
display: flex; flex-direction: column; min-width: 0;
}
.cx-stat-lbl {
font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground);
}
.cx-stat-n {
display: block; font-size: var(--text-3xl); font-weight: var(--fw-semibold);
letter-spacing: -0.03em; line-height: 1.1; color: var(--foreground);
font-variant-numeric: tabular-nums; margin-top: var(--spacing-2);
}
.cx-stat.is-accent .cx-stat-n { color: var(--cx-lift); }
.cx-stat-note { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--spacing-1); }
.cx-gantt {
background: var(--cx-panel); border-radius: var(--radius-xl);
padding: var(--spacing-4) var(--spacing-5);
display: flex; flex-direction: column; gap: var(--spacing-3);
}
.cx-gantt-row {
display: grid; grid-template-columns: 7.25rem minmax(0, 1fr);
gap: var(--spacing-3); align-items: center;
}
.cx-gantt-name { font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; }
.cx-gantt-track {
display: block; position: relative; height: 10px;
border-radius: var(--radius-full); background: var(--cx-track); overflow: hidden;
}
.cx-gantt-fill {
position: absolute; top: 0; bottom: 0;
left: var(--cx-start, 0%); width: 0;
border-radius: var(--radius-full); background: var(--cx-fill);
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.cx-card.is-in .cx-gantt-fill { width: var(--cx-span, 0%); }
.cx-pills { display: flex; flex-wrap: wrap; gap: var(--spacing-1); }
.cx-pill {
font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: -0.01em;
padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full);
border: 1px solid var(--border); background: var(--cx-panel);
color: var(--muted-foreground); line-height: 1.3; white-space: nowrap;
}
.cx-pill.is-on {
background: var(--foreground); color: var(--card);
border-color: var(--foreground);
}
@media (prefers-reduced-motion: reduce) {
.cx-gantt-fill { transition: none; }
}
@media (max-width: 640px) {
.cx-stats { grid-template-columns: 1fr; }
.cx-gantt-row { grid-template-columns: 5.75rem minmax(0, 1fr); }
.cx-chrome, .cx-body { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
}
/* ---------- How it works ---------- */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); margin-top: var(--spacing-12); }
.how-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-3); }
.how-step { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: 0.1em; color: var(--muted-foreground); }
.how-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--jurnii-50); color: var(--jurnii-700); display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .how-icon, [data-theme="jurnii-v1"] .how-icon { background: rgba(var(--brand-glow),0.14); color: var(--jurnii-200); }
.how-card h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); letter-spacing: -0.01em; margin: 0; line-height: 1.25; }
.how-card p { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.55; margin: 0; }
@media (max-width: 1024px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .how-grid { grid-template-columns: 1fr; } }
/* ---------- Proof / outcomes ---------- */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8); margin-top: var(--spacing-12); align-items: stretch; }
.proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); grid-column: 1 / -1; margin-bottom: var(--spacing-4); }
.proof-stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-6); }
.proof-stat .n { font-size: clamp(var(--text-5xl), 4vw, var(--text-9xl)); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1; color: var(--foreground); }
.proof-stat .n .small-suffix { font-size: 0.5em; font-weight: var(--fw-semibold); color: var(--muted-foreground); margin-left: var(--spacing-1); letter-spacing: 0; }
.proof-stat .l { font-size: var(--text-sm); color: var(--muted-foreground); margin-top: var(--spacing-3); line-height: 1.5; }
.proof-quote { background: var(--card); border: 1px solid var(--border); color: var(--foreground); border-radius: var(--radius-xl); padding: var(--spacing-8); display: flex; flex-direction: column; gap: var(--spacing-6); position: relative; margin: 0; }
.proof-quote blockquote { margin: 0; padding-top: var(--spacing-4); font-size: var(--text-2xl); line-height: 1.4; font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--foreground); }
.proof-quote figcaption { display: flex; align-items: center; gap: var(--spacing-3); padding-top: var(--spacing-6); border-top: 1px solid var(--border); margin-top: auto; }
.proof-quote-av { width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--jurnii-200); color: var(--concrete-950); font-weight: var(--fw-semibold); font-size: var(--text-xs); display: flex; align-items: center; justify-content: center; }
.proof-quote figcaption b { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--foreground); }
.proof-quote figcaption span { font-size: var(--text-xs); color: var(--muted-foreground); }
.proof-quote .tm-id b { color: var(--foreground); }
.proof-quote .tm-id span { color: var(--muted-foreground); }
.proof-quote blockquote.tm-quote { color: var(--muted-foreground); }
.proof-quote:hover blockquote.tm-quote { color: var(--foreground); }
.proof-press {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--spacing-5);
margin-top: var(--spacing-2);
padding-top: var(--spacing-8);
border-top: 1px solid var(--border);
}
.proof-press-label {
margin: 0;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.proof-press-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-5);
}
.proof-press-item {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
padding: var(--spacing-6);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
transition: border-color 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.proof-press-item:hover {
transform: translateY(-2px);
border-color: var(--concrete-300);
}
[data-theme="dark"] .proof-press-item:hover,
[data-theme="jurnii-v1"] .proof-press-item:hover {
border-color: var(--white-a-22);
}
.proof-press-item .src {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-foreground);
}
.proof-press-item b {
font-size: var(--text-lg);
font-weight: var(--fw-medium);
letter-spacing: -0.015em;
line-height: 1.35;
color: var(--foreground);
text-wrap: pretty;
}
.proof-press-item .meta {
margin-top: auto;
padding-top: var(--spacing-2);
font-size: var(--text-xs);
color: var(--muted-foreground);
}
@media (max-width: 1024px) {
.proof-grid { grid-template-columns: 1fr; }
.proof-stats { grid-template-columns: 1fr; }
.proof-press-list { grid-template-columns: 1fr; }
}
/* ---------- Compare table ---------- */
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; margin-top: var(--spacing-12); background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.compare-table th, .compare-table td { padding: var(--spacing-4) var(--spacing-5); text-align: left; border-bottom: 1px solid var(--border); font-size: var(--text-sm); vertical-align: top; }
.compare-table th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); font-weight: var(--fw-medium); background: var(--accent); }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table .compare-cap { font-weight: var(--fw-semibold); color: var(--foreground); width: 30%; }
.compare-table .compare-them { color: var(--muted-foreground); width: 35%; }
.compare-table .compare-us { font-weight: var(--fw-semibold); color: var(--foreground); width: 35%; position: relative; padding-left: var(--spacing-8); }
.compare-table .compare-us::before { content: ""; position: absolute; left: 22px; top: 24px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--jurnii-500); box-shadow: 0 0 0 3px rgba(var(--brand-glow),0.18); }
.compare-table th.us-col { color: var(--jurnii-700); }
[data-theme="dark"] .compare-table th.us-col, [data-theme="jurnii-v1"] .compare-table th.us-col { color: var(--jurnii-200); }
@media (max-width: 768px) {
.compare-table th, .compare-table td { padding: var(--spacing-3); font-size: var(--text-xs); }
.compare-table .compare-us { padding-left: var(--spacing-6); }
.compare-table .compare-us::before { left: 14px; top: 20px; }
}
/* ---------- Competitor benchmark table (home) ---------- */
.bench-card { margin-top: var(--spacing-12); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--spacing-2) var(--spacing-4); box-shadow: 0 1px 2px var(--black-a-4), 0 28px 64px -36px var(--black-a-22); }
.bench-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; scrollbar-width: thin; }
.bench-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.bench-table th, .bench-table td { padding: var(--spacing-5) var(--spacing-6); text-align: left; vertical-align: middle; }
.bench-table thead th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); font-weight: var(--fw-medium); border-bottom: 1px solid var(--border); }
.bench-table tbody td { border-bottom: 1px solid var(--border); font-size: var(--text-base); color: var(--foreground); }
.bench-table tbody tr:last-child td { border-bottom: 0; }
.bench-dim { font-weight: var(--fw-semibold); color: var(--foreground); width: 24%; }
.bench-them { color: var(--muted-foreground); width: 26%; }
/* Jurnii highlight column */
.bench-jurnii { width: 24%; }
.bench-table thead th.bench-jurnii { color: var(--jurnii-700); background: rgba(var(--brand-glow),0.07); border-top-left-radius: 12px; border-top-right-radius: 12px; }
.bench-table tbody td.bench-jurnii { background: rgba(var(--brand-glow),0.05); }
.bench-table tbody tr:last-child td.bench-jurnii { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.bench-pill { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-full); background: rgba(var(--brand-glow),0.16); color: var(--jurnii-700); font-weight: var(--fw-semibold); font-size: var(--text-base); }
.bench-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
[data-theme="dark"] .bench-table thead th.bench-jurnii, [data-theme="jurnii-v1"] .bench-table thead th.bench-jurnii,
[data-theme="dark"] .bench-pill, [data-theme="jurnii-v1"] .bench-pill { color: var(--jurnii-200); }
@media (max-width: 768px) {
.bench-card { padding: var(--spacing-1) var(--spacing-2); }
.bench-table th, .bench-table td { padding: var(--spacing-4); font-size: var(--text-sm); }
}
/* ---------- Resources hub ---------- */
.resources-filters { display: flex; gap: var(--spacing-2); flex-wrap: wrap; margin: var(--spacing-8) 0 var(--spacing-8); }
.filter-pill { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); padding: var(--spacing-2) var(--spacing-4); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--foreground); cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; font-family: inherit; }
.filter-pill:hover { background: var(--accent); }
.filter-pill.is-active { background: var(--concrete-950); color: var(--concrete-50); border-color: var(--concrete-950); }
[data-theme="dark"] .filter-pill.is-active { background: var(--jurnii-200); color: var(--concrete-950); border-color: var(--jurnii-200); }
[data-theme="jurnii-v1"] .filter-pill.is-active { background: var(--jurnii-200); color: var(--concrete-950); border-color: var(--jurnii-200); }
.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); }
.resource-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-3); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), border-color 220ms ease, box-shadow 220ms ease; min-height: 240px; }
.resource-card:hover { transform: translateY(-3px); border-color: var(--concrete-300); box-shadow: 0 16px 32px -16px var(--black-a-12); }
[data-theme="dark"] .resource-card:hover, [data-theme="jurnii-v1"] .resource-card:hover { border-color: var(--white-a-20); box-shadow: none; }
.resource-card .badge { display: inline-flex; align-self: flex-start; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--fw-medium); }
.badge.cat-comparison { background: var(--tag-pink-bg); color: var(--tag-pink-ink); }
.badge.cat-guide { background: var(--tag-blue-bg); color: var(--tag-blue-ink); }
.badge.cat-report { background: var(--tag-green-bg); color: var(--tag-green-ink); }
.badge.cat-thought { background: var(--tag-purple-bg); color: var(--tag-purple-ink); }
.badge.cat-casestudy { background: var(--tag-orange-bg); color: var(--tag-orange-ink); }
[data-theme="dark"] .badge, [data-theme="jurnii-v1"] .badge { background: var(--white-a-8); color: var(--concrete-50); }
.resource-card h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.resource-card p { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; line-height: 1.55; }
.resource-card .meta { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-4); margin-top: auto; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); }
.resource-card .meta .read-arrow { display: inline-flex; align-items: center; gap: var(--spacing-1); color: var(--foreground); font-weight: var(--fw-medium); transition: gap 150ms ease; }
.resource-card:hover .meta .read-arrow { gap: var(--spacing-2); }
@media (max-width: 1024px) { .resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .resources-grid { grid-template-columns: 1fr; } }
/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); margin-top: var(--spacing-12); align-items: stretch; }
.plan { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-8) var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-5); position: relative; transition: border-color 220ms ease; }
.plan.featured { background: var(--concrete-950); color: var(--foreground); border-color: var(--concrete-950); transform: scale(1.02); }
.plan.featured .plan-feat li { color: var(--muted-foreground); }
.plan.featured .plan-note { color: var(--muted-foreground); }
.plan-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--accent-green); color: var(--concrete-950); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--fw-semibold); padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); }
.plan h3 { font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: inherit; font-family: var(--font-mono); }
.plan-price { font-size: clamp(var(--text-4xl), 3.4vw, var(--text-7xl)); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1; }
.plan-period { font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--spacing-1); }
.plan-note { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.5; min-height: 42px; }
.plan-feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-2); flex: 1; }
.plan-feat li { font-size: var(--text-sm); padding-left: var(--spacing-6); position: relative; line-height: 1.5; color: var(--foreground); }
.plan-feat li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 5px; border: solid var(--jurnii-600); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.plan.featured .plan-feat li::before { border-color: var(--jurnii-200); }
[data-theme="dark"] .plan-feat li::before, [data-theme="jurnii-v1"] .plan-feat li::before { border-color: var(--jurnii-300); }
.plan.featured .btn.accent { background: var(--jurnii-200); color: var(--concrete-950); }
.plan.featured .btn.ghost { color: var(--foreground); border-color: var(--white-a-18); }
.plan.featured .btn.ghost:hover { background: var(--white-a-8); }
.plan-foot-note { font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; margin: var(--spacing-8) auto 0; max-width: 56ch; }
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: 1fr; } .plan.featured { transform: none; } }
/* ---------- FAQ ---------- */
.faq-list { max-width: 880px; margin-left: auto; margin-right: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-trigger { width: 100%; background: transparent; border: 0; padding: var(--spacing-5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); cursor: pointer; text-align: left; font-family: inherit; font-size: var(--text-base); font-weight: var(--fw-medium); line-height: 1.45; color: var(--foreground); letter-spacing: -0.005em; }
.faq-trigger > span:first-child { flex: 1; min-width: 0; }
.faq-trigger .icon { width: 24px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--border); flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), background 180ms ease, color 180ms ease, border-color 180ms ease; }
.faq-item.is-open .faq-trigger .icon { transform: rotate(45deg); background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.faq-item.is-open .faq-trigger .icon svg { stroke: currentColor; }
.faq-body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 320ms cubic-bezier(0.2,0.8,0.2,1); }
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-body-inner { min-height: 0; overflow: hidden; font-size: var(--text-base); line-height: 1.6; color: var(--muted-foreground); opacity: 0; transform: translateY(-4px); transition: opacity 260ms cubic-bezier(0.2,0.8,0.2,1), transform 260ms cubic-bezier(0.2,0.8,0.2,1); }
.faq-item.is-open .faq-body-inner { padding: var(--spacing-1) var(--spacing-10) var(--spacing-6) 0; opacity: 1; transform: translateY(0); transition-delay: 70ms; }
/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--spacing-12); margin-top: var(--spacing-12); align-items: start; }
.about-narrative p { font-size: var(--text-base); line-height: 1.65; color: var(--muted-foreground); margin: 0 0 var(--spacing-4); max-width: 50ch; }
.about-narrative p strong { color: var(--foreground); font-weight: var(--fw-semibold); }
.about-values { display: grid; grid-template-columns: 1fr; gap: var(--spacing-3); margin-top: var(--spacing-8); }
.about-value { display: grid; grid-template-columns: 48px 1fr; gap: var(--spacing-4); padding: var(--spacing-4) 0; border-top: 1px solid var(--border); }
.about-value .num { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--muted-foreground); padding-top: var(--spacing-1); }
.about-value b { font-size: var(--text-base); font-weight: var(--fw-semibold); display: block; margin: 0 0 var(--spacing-1); }
.about-value span { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.55; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4); }
.team-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-3); min-height: 200px; }
.team-card--wide { grid-column: 1 / -1; }
.team-avatar { width: 56px; height: 56px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--concrete-200), var(--concrete-300)); color: var(--concrete-950); font-weight: var(--fw-semibold); font-size: var(--text-lg); display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; }
.team-card.acc-1 .team-avatar { background: linear-gradient(135deg, var(--jurnii-200), var(--jurnii-300)); color: var(--concrete-950); }
.team-card.acc-2 .team-avatar { background: linear-gradient(135deg, var(--avatar-blue-from), var(--avatar-blue-to)); color: var(--avatar-blue-ink); }
.team-card.acc-3 .team-avatar { background: linear-gradient(135deg, var(--avatar-orange-from), var(--avatar-orange-to)); color: var(--avatar-orange-ink); }
.team-card.acc-4 .team-avatar { background: linear-gradient(135deg, var(--avatar-purple-from), var(--avatar-purple-to)); color: var(--avatar-purple-ink); }
.team-card b { font-size: var(--text-base); font-weight: var(--fw-semibold); display: block; margin: 0; }
.team-card .role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.team-card p { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.55; margin: 0; }
.advisors-strip { margin-top: var(--spacing-8); padding: var(--spacing-6); background: var(--accent); border-radius: var(--radius-lg); }
.advisors-strip h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 var(--spacing-4); font-weight: var(--fw-medium); }
.advisors-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.advisors-strip li b { font-size: var(--text-sm); font-weight: var(--fw-semibold); display: block; }
.advisors-strip li span { font-size: var(--text-xs); color: var(--muted-foreground); }
@media (max-width: 1024px) {
.about-grid { grid-template-columns: 1fr; gap: var(--spacing-10); }
.team-grid { grid-template-columns: 1fr; }
}
/* ---------- Demo CTA ---------- */
.demo-cta { padding: var(--section-padding-y) 0; background: var(--concrete-950); color: var(--foreground); position: relative; overflow: hidden; }
.demo-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(var(--brand-glow),0.22) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.demo-cta::after {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: 46%; width: 100%; height: 100%;
transform: translate(-50%, -50%);
background-image: radial-gradient(rgba(var(--brand-glow), 0.28) 1px, transparent 1.2px);
background-size: 16px 16px;
-webkit-mask-image:
radial-gradient(ellipse 140% 88% at 50% 40%, transparent 0%, transparent 58%, var(--black) 70%, transparent 82%),
linear-gradient(to right, transparent 0%, var(--black) 12%, var(--black) 88%, transparent 100%);
mask-image:
radial-gradient(ellipse 140% 88% at 50% 40%, transparent 0%, transparent 58%, var(--black) 70%, transparent 82%),
linear-gradient(to right, transparent 0%, var(--black) 12%, var(--black) 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.demo-cta-inner { position: relative; text-align: center; z-index: 1; }
.demo-cta h2 { font-size: clamp(var(--text-5xl), 4.4vw, var(--text-11xl)); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 var(--spacing-4); max-width: 22ch; margin-left: auto; margin-right: auto; }
.demo-cta p { font-size: var(--text-base); color: var(--muted-foreground); max-width: 56ch; margin: 0 auto var(--spacing-8); line-height: 1.55; }
.demo-cta .actions { display: flex; gap: var(--spacing-3); justify-content: center; flex-wrap: wrap; }
.demo-cta .actions .btn.accent { background: var(--jurnii-200); color: var(--concrete-950); border-color: var(--jurnii-200); }
.demo-cta .actions .btn.accent:hover { background: var(--jurnii-300); border-color: var(--jurnii-300); }
.demo-cta-sub { display: flex; gap: var(--spacing-6); justify-content: center; margin-top: var(--spacing-6); padding-top: var(--spacing-6); border-top: 1px solid var(--white-a-10); flex-wrap: wrap; }
.demo-cta-sub div { font-size: var(--text-xs); color: var(--muted-foreground); display: inline-flex; align-items: center; gap: var(--spacing-2); }
.demo-cta-sub b { color: var(--foreground); font-weight: var(--fw-semibold); margin-right: var(--spacing-1); }
/* ---------- Footer ---------- */
.footer { padding: var(--spacing-20) 0 var(--spacing-8); background: var(--concrete-950); color: var(--muted-foreground); border-top: 1px solid var(--white-a-8); }
.footer a { color: var(--muted-foreground); font-size: var(--text-xs); padding: var(--spacing-1) 0; display: block; transition: color 150ms ease; }
.footer a:hover { color: var(--foreground); }
.footer-grid { display: grid; grid-template-columns: 1fr 3fr; gap: var(--spacing-12); padding-bottom: var(--spacing-12); border-bottom: 1px solid var(--white-a-10); }
.footer-brand img, .footer-brand .nav-logo { height: 22px; margin-bottom: var(--spacing-4); display: block; }
.footer-brand p { max-width: 32ch; margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--muted-foreground); }
.footer-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--spacing-6); }
.footer-head { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--fw-medium); color: var(--foreground); margin-bottom: var(--spacing-3); }
.footer-foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spacing-6); font-size: var(--text-xs); color: var(--muted-foreground); flex-wrap: wrap; gap: var(--spacing-3); }
.footer-social { display: flex; gap: var(--spacing-3); }
.footer-social a { width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--white-a-12); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.footer-social a:hover { background: var(--white-a-6); border-color: var(--white-a-20); }
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr; gap: var(--spacing-10); }
.footer-cols { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Sticky mobile demo CTA ---------- */
.sticky-demo-cta { display: none; }
/* ---------- Reveal animation ---------- */
/* Visible until JS opts in. Hiding .reveal by default made library/content
routes paint skeleton → blank (opacity 0) → fade. */
.reveal.in-view { opacity: 1; transform: translateY(0); }
html.reveal-ready .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms cubic-bezier(0.2,0.8,0.2,1), transform 600ms cubic-bezier(0.2,0.8,0.2,1);
}
html.reveal-ready .reveal.in-view { opacity: 1; transform: translateY(0); }
/* When the GSAP scroll engine is active it owns the reveal timing — drop the
CSS transition so the two don't fight. GSAP sets inline styles directly. */
html.js-gsap.reveal-ready .reveal { transition: none; }
/* ---------- Tweaks panel ---------- */
.tweaks-fab { position: fixed; bottom: 90px; right: 16px; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--concrete-950); color: var(--concrete-50); display: none; align-items: center; justify-content: center; border: 0; cursor: pointer; box-shadow: 0 8px 24px -8px var(--black-a-30); z-index: 35; }
.tweaks-fab.visible { display: inline-flex; }
/* ---------- Pages ---------- */
.page-hero { padding: var(--page-hero-padding-top) 0 var(--page-hero-padding-bottom); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 70% -10%, rgba(var(--brand-glow),0.10) 0%, transparent 55%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero p.lede { max-width: 60ch; margin-top: var(--spacing-4); }
/* UX product hero — centred copy, three-card row below */
.page-hero--center { padding-bottom: var(--spacing-16); }
.page-hero.page-hero--center.accent-ux::before { background: radial-gradient(ellipse 60% 45% at 50% 62%, rgba(var(--brand-glow),0.14) 0%, transparent 60%); }
.page-hero-center-copy { position: relative; text-align: center; max-width: 1080px; margin: 0 auto; }
.page-hero-center-copy .h1-page { max-width: 18ch; margin-left: auto; margin-right: auto; }
.page-hero-center-copy .page-hero-lede { max-width: 56ch; margin-left: auto; margin-right: auto; }
.page-hero-center-copy .hero-cta-row { justify-content: center; }
/* Full-bleed frame lines */
.ph-ux-frame { position: absolute; inset: 0; z-index: 0; pointer-events: none; --frame: rgba(var(--brand-glow), 0.28); }
.ph-ux-frame > span { position: absolute; display: block; }
.ph-ux-frame-v { top: 0; width: 0; height: 26%; border-left: 1px dashed var(--frame); }
.ph-ux-frame-v::after { content: ""; position: absolute; left: -4px; bottom: -4px; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--jurnii-500); opacity: 0.7; }
.ph-ux-frame-v--l { left: 14%; }
.ph-ux-frame-v--r { right: 22%; top: auto; bottom: 0; height: 20%; }
.ph-ux-frame-v--r::after { bottom: auto; top: -4px; }
.ph-ux-frame-l { left: 0; top: 50%; width: 26%; height: 60%; border-top: 1px solid var(--frame); border-right: 1px solid var(--frame); border-top-right-radius: 32px; }
.ph-ux-frame-r { right: 0; top: 0; width: 15%; height: 40%; border-left: 1px solid var(--frame); border-bottom: 1px solid var(--frame); border-bottom-left-radius: 32px; }
.ph-ux-frame-r2 { right: 0; top: 52%; width: 26%; height: 50%; border-top: 1px dashed var(--frame); border-left: 1px dashed var(--frame); border-top-left-radius: 32px; }
/* Flanking stat cards */
.ph-ux-side {
position: absolute; z-index: 2; top: 50%;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
box-shadow: 0 16px 40px -22px var(--black-a-28);
text-align: left;
}
.ph-ux-side--l { left: -40px; width: 208px; transform: translateY(-40%); padding: var(--spacing-2) 0; }
.ph-ux-side--r { right: -40px; width: 184px; transform: translateY(-70%); padding: var(--spacing-3); }
.ph-ux-side-row { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); }
.ph-ux-side-row + .ph-ux-side-row { border-top: 1px solid var(--border); }
.ph-ux-side-num { font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--muted-foreground); min-width: 30px; }
.ph-ux-side-row.is-you .ph-ux-side-num { color: var(--journey); }
.ph-ux-side-lbl { flex: 1; display: flex; flex-direction: column; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--foreground); }
.ph-ux-side-lbl small { font-size: var(--text-2xs); color: var(--muted-foreground); }
.ph-ux-side-delta { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--journey); background: rgba(74, 222, 128, 0.14); padding: 2px 6px; border-radius: var(--radius-full); }
.ph-ux-side-head { display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--muted-foreground); }
.ph-ux-side-head svg { width: 12px; height: 12px; color: var(--journey); }
.ph-ux-side-big { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: var(--spacing-2) 0 var(--spacing-2); display: flex; align-items: baseline; gap: 6px; }
.ph-ux-side-big small { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--muted-foreground); letter-spacing: 0; }
.ph-ux-side-dots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.ph-ux-side-dots span { aspect-ratio: 1; border-radius: 3px; background: rgba(74, 222, 128, 0.55); }
.ph-ux-side-dots span.is-warn { background: var(--poor); }
/* Three-card row */
.ph-ux {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center;
margin-top: var(--spacing-12);
color: var(--foreground);
}
.ph-ux::before {
content: ""; position: absolute; z-index: -1;
left: 50%; top: 50%; width: 62%; height: 78%;
transform: translate(-50%, -50%);
background-image: radial-gradient(rgba(var(--brand-glow), 0.32) 1px, transparent 1.2px);
background-size: 16px 16px;
border-top: 1px dashed rgba(var(--brand-glow), 0.28);
border-bottom: 1px dashed rgba(var(--brand-glow), 0.28);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, var(--black) 40%, transparent 100%);
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, var(--black) 40%, transparent 100%);
}
.ph-ux-slot { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3); }
.ph-ux-tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--text-xs); font-weight: var(--fw-semibold);
padding: 6px 10px; border-radius: var(--radius-md);
background: var(--card); border: 1px solid var(--border);
box-shadow: 0 8px 20px -14px var(--black-a-28);
}
.ph-ux-tag svg { width: 13px; height: 13px; color: var(--jurnii-500); }
.ph-ux-link { position: relative; flex: 0 1 88px; min-width: 40px; height: 0; border-top: 1.5px dashed rgba(var(--brand-glow), 0.75); }
.ph-ux-link::before, .ph-ux-link::after {
content: ""; position: absolute; top: -4.5px; width: 7px; height: 7px; border-radius: var(--radius-full);
background: var(--jurnii-500);
}
.ph-ux-link::before { left: -4px; }
.ph-ux-link::after { right: -4px; }
.ph-ux-link i {
position: absolute; left: 50%; top: -3px; width: 5px; height: 5px; border-radius: var(--radius-full);
background: var(--journey); box-shadow: 0 0 10px 2px rgba(74, 222, 128, 0.55);
animation: ph-ux-flow 2.4s linear infinite;
}
.ph-ux-link--r i { animation-delay: 1.2s; }
@keyframes ph-ux-flow { from { left: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 100%; opacity: 0; } }
.ph-ux-score { position: relative; flex: none; z-index: 3; --sc-scale: 0.467; width: calc(600px * var(--sc-scale)); height: calc(674px * var(--sc-scale)); }
.ph-ux-tilt { width: 600px; scale: var(--sc-scale); transform-origin: top left; }
.ph-ux-score .sc-card { border: 1px solid var(--border); box-shadow: 0 0 0 6px rgba(var(--brand-glow), 0.10), 0 30px 70px -30px var(--black-a-45); }
.ph-ux-comment { position: absolute; z-index: 6; top: 138px; right: -30px; }
.ph-ux-pin { appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; display: block; line-height: 0; }
.ph-ux-pin.is-open .hero-stack-pin-b { border-color: var(--jurnii-500); background: var(--card); }
.ph-ux-thread { position: absolute; top: 46px; right: 0; width: 290px; transform-origin: top right; text-align: left; }
/* Change-detection card */
.ph-ux-change {
position: relative; width: 244px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-5);
box-shadow: 0 16px 40px -20px var(--black-a-28);
}
.ph-ux-change::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: var(--radius-full); background: var(--poor); }
.ph-ux-change-top { display: flex; align-items: flex-start; gap: var(--spacing-3); }
.ph-ux-change-logo { flex: none; width: 40px; height: 40px; display: block; }
.ph-ux-change-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ph-ux-change-id b { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.3; letter-spacing: -0.01em; }
.ph-ux-change-id em { font-size: var(--text-xs); font-style: normal; color: var(--muted-foreground); }
.ph-ux-change-region {
align-self: flex-start;
font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.08em;
padding: 2px 6px; border-radius: var(--radius-xs);
background: var(--accent); color: var(--foreground); border: 1px solid var(--border);
}
.ph-ux-change-meta { display: flex; align-items: center; gap: var(--spacing-3); margin: var(--spacing-3) 0; font-size: var(--text-xs); color: var(--muted-foreground); }
.ph-ux-change-dim, .ph-ux-change-delta { display: inline-flex; align-items: center; gap: 6px; }
.ph-ux-change-dim svg, .ph-ux-change-delta svg, .ph-ux-trend-foot svg { width: 13px; height: 13px; }
.ph-ux-change-delta { color: var(--journey); font-weight: var(--fw-semibold); }
.ph-ux-change-impact {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 8px; border-radius: var(--radius-full);
background: var(--tag-amber-bg); color: var(--tag-amber-ink);
}
[data-theme="dark"] .ph-ux-change-impact,
[data-theme="jurnii-v1"] .ph-ux-change-impact { background: rgba(251, 146, 60, 0.18); color: var(--poor); }
/* Journey trend card */
.ph-ux-trend {
width: 256px;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
padding: var(--spacing-4);
box-shadow: 0 16px 40px -20px var(--black-a-28);
}
.ph-ux-trend-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--spacing-2); }
.ph-ux-trend-head b { font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.ph-ux-trend-head span { font-size: var(--text-xs); color: var(--muted-foreground); }
.ph-ux-trend-svg { width: 100%; height: 88px; display: block; }
.ph-ux-trend-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-foreground); margin-top: 2px; }
.ph-ux-trend-foot { display: flex; align-items: center; gap: 6px; margin: var(--spacing-3) 0 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--journey); }
@media (prefers-reduced-motion: no-preference) {
.ph-ux:not(.is-in) .ph-ux-tilt,
.ph-ux:not(.is-in) .ph-ux-slot,
.ph-ux:not(.is-in) .ph-ux-link,
.ph-ux:not(.is-in) .ph-ux-pin .hero-stack-pin-b { opacity: 0; }
.ph-ux.is-in .ph-ux-tilt { animation: stack-in 800ms cubic-bezier(0.2,0.8,0.2,1) both; }
.ph-ux.is-in .ph-ux-link { animation: hs-fade 500ms ease 0.45s both; }
.ph-ux.is-in .ph-ux-slot--l { animation: stack-in 720ms cubic-bezier(0.2,0.8,0.2,1) 0.2s both; }
.ph-ux.is-in .ph-ux-slot--r { animation: stack-in 720ms cubic-bezier(0.2,0.8,0.2,1) 0.32s both; }
.ph-ux.is-in .ph-ux-pin .hero-stack-pin-b { animation: pin-in 500ms cubic-bezier(0.34,1.56,0.64,1) 0.85s both; }
.ph-ux.is-in .ph-ux-trend-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hs-draw 1.4s cubic-bezier(0.4,0,0.2,1) 0.55s forwards; }
.ph-ux-side { animation: stack-in 720ms cubic-bezier(0.2,0.8,0.2,1) 0.4s both; }
.ph-ux-thread { animation: pin-in 280ms cubic-bezier(0.34,1.56,0.64,1) both; }
}
@media (prefers-reduced-motion: reduce) { .ph-ux-link i { display: none; } }
@media (max-width: 1180px) {
.ph-ux-side { display: none; }
}
@media (max-width: 1024px) {
.ph-ux { flex-wrap: wrap; justify-content: center; gap: var(--spacing-6); }
.ph-ux-link { display: none; }
.ph-ux-score { order: -1; }
.ph-ux-comment { right: -16px; }
.ph-ux-frame-l, .ph-ux-frame-r2 { display: none; }
}
@media (max-width: 640px) {
.ph-ux-score { --sc-scale: 0.417; }
.ph-ux-comment { top: 122px; right: -14px; }
.ph-ux-slot { width: 100%; }
.ph-ux-change, .ph-ux-trend { width: min(320px, 100%); }
.ph-ux-thread { width: min(240px, 72vw); }
.ph-ux-frame { display: none; }
}
/* Article (resource detail) */
.article { padding: var(--spacing-12) 0 var(--spacing-20); }
.article h2 { font-size: clamp(var(--text-2xl), 2.4vw, var(--text-4xl)); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin: var(--spacing-12) 0 var(--spacing-4); line-height: 1.15; }
.article h3 { font-size: var(--text-xl); font-weight: var(--fw-semibold); margin: var(--spacing-8) 0 var(--spacing-3); line-height: 1.25; }
.article p { font-size: var(--text-base); line-height: 1.65; color: var(--foreground); margin: 0 0 var(--spacing-4); }
.article ul { padding-left: var(--spacing-5); margin: 0 0 var(--spacing-4); }
.article li { font-size: var(--text-base); line-height: 1.65; margin-bottom: var(--spacing-2); color: var(--foreground); }
.article-meta { display: flex; gap: var(--spacing-4); align-items: center; padding-top: var(--spacing-4); margin-top: var(--spacing-6); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); flex-wrap: wrap; }
.article-meta .badge { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-full); }
.article-cta { background: var(--accent); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-8); margin: var(--spacing-12) 0 0; }
.article-cta h3 { margin: 0 0 var(--spacing-3); font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.article-cta p { font-size: var(--text-base); color: var(--muted-foreground); margin: 0 0 var(--spacing-5); }
/* ---------- Contact / form ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-12); align-items: stretch; }
.contact-list { list-style: none; padding: 0; margin: var(--spacing-6) 0 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.contact-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--spacing-3); align-items: center; font-size: var(--text-base); color: var(--foreground); }
.contact-list svg { width: 18px; height: 18px; color: var(--jurnii-600); }
[data-theme="dark"] .contact-list svg, [data-theme="jurnii-v1"] .contact-list svg { color: var(--jurnii-300); }
.contact-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-8); display: flex; flex-direction: column; gap: var(--spacing-4); }
.contact-form .field { display: flex; flex-direction: column; gap: var(--spacing-1); }
.contact-form label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); font-weight: var(--fw-medium); }
.contact-form input, .contact-form select, .contact-form textarea { padding: var(--spacing-3) var(--spacing-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background); color: var(--foreground); font-family: inherit; font-size: var(--text-base); transition: border-color 150ms ease, box-shadow 150ms ease; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
.contact-form select.is-placeholder { color: var(--muted-foreground); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--jurnii-500); box-shadow: 0 0 0 3px rgba(var(--brand-glow),0.18); }
.contact-form textarea { resize: vertical; min-height: 90px; }
.contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3); align-items: start; min-width: 0; }
.contact-form .form-row { min-width: 0; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; max-width: 100%; min-width: 0; }
.contact-meta { margin-top: var(--spacing-8); padding-top: var(--spacing-6); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); display: flex; gap: var(--spacing-6); flex-wrap: wrap; }
.contact-meta b { color: var(--foreground); font-weight: var(--fw-semibold); }
@media (max-width: 1024px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--spacing-10); }
.contact-form .row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.contact-form { padding: var(--spacing-5); }
.contact-form .row-2 { grid-template-columns: 1fr; }
.contact-form .btn,
.contact-instant-booking-card .btn { white-space: normal; }
.contact-instant-booking-card { padding: var(--spacing-5); }
}
/* ---------- Hero variations (cycled via data-attr) ---------- */
.hero[data-variant="orbit"] .hero-visual--dashboard,
.hero[data-variant="orbit"] .hero-visual--ticker,
.hero[data-variant="orbit"] .hero-visual--stack { display: none; }
.hero[data-variant="dashboard"] .hero-visual--orbit,
.hero[data-variant="dashboard"] .hero-visual--ticker,
.hero[data-variant="dashboard"] .hero-visual--stack { display: none; }
.hero[data-variant="ticker"] .hero-visual--orbit,
.hero[data-variant="ticker"] .hero-visual--stack,
.hero[data-variant="ticker"] .hero-visual--dashboard { display: none; }
.hero[data-variant="stack"] .hero-visual--orbit,
.hero[data-variant="stack"] .hero-visual--ticker,
.hero[data-variant="stack"] .hero-visual--dashboard { display: none; }
/* Dashboard mock (default) */
.hero-dashboard { background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 32px 80px -32px rgba(0,0,0,0.18), 0 4px 12px var(--black-a-4); overflow: hidden; position: relative; }
[data-theme="dark"] .hero-dashboard, [data-theme="jurnii-v1"] .hero-dashboard { box-shadow: 0 32px 80px -32px var(--black-a-50), 0 4px 12px var(--black-a-20); }
.hero-dash-head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--border); background: var(--accent); gap: var(--spacing-3); }
.hero-dash-head .left { display: flex; align-items: center; gap: var(--spacing-2); }
.hero-dash-head .dots { display: flex; gap: var(--spacing-1); }
.hero-dash-head .dots span { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--concrete-300); }
[data-theme="dark"] .hero-dash-head .dots span, [data-theme="jurnii-v1"] .hero-dash-head .dots span { background: var(--white-a-18); }
.hero-dash-head .url { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); }
.hero-dash-head .live { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jurnii-700); display: inline-flex; align-items: center; gap: var(--spacing-1); }
[data-theme="dark"] .hero-dash-head .live, [data-theme="jurnii-v1"] .hero-dash-head .live { color: var(--jurnii-300); }
.hero-dash-head .live i { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; animation: pulse-dot 1.6s ease-in-out infinite; }
.hero-dash-body { padding: var(--spacing-5); display: flex; flex-direction: column; gap: var(--spacing-4); }
.hero-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2); }
.hero-dash-stat { background: var(--accent); border: 1px solid var(--border); border-radius: 10px; padding: var(--spacing-3) var(--spacing-3); position: relative; }
.hero-dash-stat .lbl { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--spacing-1); }
.hero-dash-stat .val { display: block; font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1; color: var(--foreground); }
.hero-dash-stat .val small { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--muted-foreground); margin-left: var(--spacing-1); letter-spacing: 0; }
.hero-dash-stat .delta { position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--jurnii-700); letter-spacing: 0; }
[data-theme="dark"] .hero-dash-stat .delta, [data-theme="jurnii-v1"] .hero-dash-stat .delta { color: var(--jurnii-300); }
.hero-dash-chart { background: var(--accent); border: 1px solid var(--border); border-radius: 10px; padding: var(--spacing-3); }
.hero-dash-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-2); }
.hero-dash-chart-head b { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--foreground); }
.hero-dash-chart-head span { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-foreground); letter-spacing: 0.06em; text-transform: uppercase; }
.hero-dash-chart svg { width: 100%; height: 86px; }
.hero-dash-legend { display: flex; gap: var(--spacing-4); font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--spacing-2); }
.hero-dash-legend i { width: 10px; height: 2px; display: inline-block; vertical-align: middle; margin-right: var(--spacing-1); border-radius: var(--radius-xxs); }
.hero-dash-list { display: flex; flex-direction: column; gap: var(--spacing-1); }
.hero-dash-li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--spacing-2); font-size: var(--text-xs); padding: var(--spacing-2) var(--spacing-3); background: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-md); }
.hero-dash-li b { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--jurnii-700); font-size: var(--text-xs); }
[data-theme="dark"] .hero-dash-li b, [data-theme="jurnii-v1"] .hero-dash-li b { color: var(--jurnii-300); }
.hero-dash-chip { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.05em; text-transform: uppercase; padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-xs); font-family: var(--font-mono); }
.hero-dash-chip.warn { background: var(--tag-amber-bg); color: var(--tag-amber-ink); }
.hero-dash-chip.good { background: var(--tag-green-bg); color: var(--tag-green-ink); }
.hero-dash-chip.perf { background: var(--tag-purple-bg); color: var(--tag-purple-ink); }
[data-theme="dark"] .hero-dash-chip, [data-theme="jurnii-v1"] .hero-dash-chip { background: var(--white-a-10); color: var(--concrete-100); }
.hero-float { position: absolute; display: flex; align-items: center; gap: var(--spacing-2); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-2) var(--spacing-3); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.18); font-size: var(--text-xs); z-index: 2; }
.hero-float b { display: block; font-weight: var(--fw-semibold); color: var(--foreground); font-size: var(--text-xs); }
.hero-float span { display: block; font-size: var(--text-xs); color: var(--muted-foreground); margin-top: var(--spacing-1); }
.hero-float-1 { top: -10px; left: -22px; }
.hero-float-2 { bottom: 28px; right: -18px; }
.hero-ring { width: 38px; height: 38px; border-radius: var(--radius-full); background: conic-gradient(var(--jurnii-300) 0 82%, var(--concrete-200) 82% 100%); display: flex; align-items: center; justify-content: center; }
.hero-ring i { font-style: normal; font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--foreground); background: var(--card); width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
[data-theme="dark"] .hero-ring i, [data-theme="jurnii-v1"] .hero-ring i { background: var(--card); color: var(--foreground); }
@media (max-width: 1024px) {
.hero-float-1 { top: -8px; left: 0; }
.hero-float-2 { bottom: 8px; right: 8px; }
}
@media (max-width: 540px) {
.hero-float { display: none; }
}
/* Stack variant — layered platform components, parallax, trend-line backdrop */
.hero-stack { position: relative; min-height: 640px; max-width: 560px; width: 100%; margin-left: auto; }
.hero-stack-graph { position: absolute; inset: 0 0 0 42%; z-index: 0; pointer-events: none; color: var(--foreground); will-change: transform; -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, var(--black) 52%); mask-image: linear-gradient(to right, transparent 0%, transparent 18%, var(--black) 52%); }
.hero-stack-graph svg { width: 100%; height: 100%; display: block; }
.hero-stack-graph .hs-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-stack-layer { position: absolute; will-change: transform; }
.hero-stack-tilt { transform: rotate(var(--tilt, 0deg)); }
.hero-stack-layer.sc { top: 0; right: -6px; width: 300px; z-index: 1; }
.hero-stack-layer.sc .hero-stack-tilt { --tilt: 1.8deg; width: 600px; scale: 0.5; transform-origin: top left; }
.hero-stack-layer.pb { top: 244px; left: -26px; width: 312px; z-index: 2; }
.hero-stack-layer.pb .hero-stack-tilt { --tilt: -2.4deg; width: 624px; scale: 0.5; transform-origin: top left; }
.hero-stack-layer.pb .pb-card,
.hero-stack-layer.sc .sc-card { border: 1px solid var(--border); }
.hero-stack-layer.cm { bottom: -4px; right: 4px; width: 288px; z-index: 3; }
.hero-stack-layer.cm .hero-stack-tilt { --tilt: 0.8deg; }
.hero-thread { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-4); box-shadow: 0 20px 48px -20px var(--black-a-28); }
.hero-thread-head { display: flex; align-items: center; gap: var(--spacing-2); }
.hero-thread-av { flex: none; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--accent); border: 1px solid var(--border); color: var(--foreground); font-size: var(--text-2xs); font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; }
.hero-thread-head b { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--foreground); }
.hero-thread-head .time { font-size: var(--text-xs); color: var(--muted-foreground); }
.hero-thread-acts { margin-left: auto; display: flex; gap: var(--spacing-2); color: var(--muted-foreground); }
.hero-thread-acts svg { width: 13px; height: 13px; }
.hero-thread-msg { font-size: var(--text-xs); line-height: 1.5; color: var(--foreground); margin: var(--spacing-2) 0 var(--spacing-3); }
.hero-thread-msg .mention { color: var(--jurnii-700); font-weight: var(--fw-semibold); }
[data-theme="dark"] .hero-thread-msg .mention, [data-theme="jurnii-v1"] .hero-thread-msg .mention { color: var(--jurnii-200); }
.hero-thread-reply { display: flex; align-items: center; gap: var(--spacing-2); border-top: 1px solid var(--border); padding-top: var(--spacing-3); font-size: var(--text-xs); color: var(--muted-foreground); }
.hero-thread-reply .ph { flex: 1; }
.hero-thread-reply .tools { display: flex; gap: var(--spacing-2); }
.hero-thread-reply svg { width: 13px; height: 13px; }
.hero-thread-send { flex: none; width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--concrete-950); color: var(--concrete-50); display: flex; align-items: center; justify-content: center; }
.hero-thread-send svg { width: 12px; height: 12px; }
[data-theme="dark"] .hero-thread-send, [data-theme="jurnii-v1"] .hero-thread-send { background: var(--jurnii-500); color: var(--concrete-950); }
/* Comment card — staged content reveal when scrolled into view (matches the count-up cards) */
@media (prefers-reduced-motion: no-preference) {
.hero-thread .hero-thread-head,
.hero-thread .hero-thread-msg,
.hero-thread .hero-thread-reply {
opacity: 0; transform: translateY(7px);
transition: opacity 520ms cubic-bezier(0.2,0.8,0.2,1), transform 520ms cubic-bezier(0.2,0.8,0.2,1);
}
.hero-thread.is-in .hero-thread-head { opacity: 1; transform: none; transition-delay: 0.55s; }
.hero-thread.is-in .hero-thread-msg { opacity: 1; transform: none; transition-delay: 0.72s; }
.hero-thread.is-in .hero-thread-reply { opacity: 1; transform: none; transition-delay: 0.88s; }
.hero-thread .hero-thread-send { transform: scale(0.6); opacity: 0; transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34,1.56,0.64,1); }
.hero-thread.is-in .hero-thread-send { transform: scale(1); opacity: 1; transition-delay: 1.02s; }
}
.hero-stack-pin { position: absolute; z-index: 4; will-change: transform; }
.hero-stack-pin-b { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--card); border: 1.5px solid rgba(var(--brand-glow),0.8); border-radius: var(--radius-full) var(--radius-full) var(--radius-full) var(--radius-sm); box-shadow: 0 10px 24px -10px var(--black-a-30); color: var(--foreground); }
.hero-stack-pin-b svg { width: 17px; height: 17px; }
.hero-stack-pin.p1 { top: 132px; right: -18px; }
.hero-stack-pin.p2 { top: 410px; left: 268px; }
@media (prefers-reduced-motion: no-preference) {
.hero-stack .hero-stack-tilt { animation: stack-in 800ms cubic-bezier(0.2,0.8,0.2,1) both; }
.hero-stack-layer.sc .hero-stack-tilt { animation-delay: 0.05s; }
.hero-stack-layer.pb .hero-stack-tilt { animation-delay: 0.2s; }
.hero-stack-layer.cm .hero-stack-tilt { animation-delay: 0.4s; }
.hero-stack-pin-b { animation: pin-in 500ms cubic-bezier(0.34,1.56,0.64,1) both; }
.hero-stack-pin.p1 .hero-stack-pin-b { animation-delay: 0.75s; }
.hero-stack-pin.p2 .hero-stack-pin-b { animation-delay: 0.9s; }
.hero-stack-graph .hs-draw { stroke-dashoffset: 1; animation: hs-draw 1.8s cubic-bezier(0.4,0,0.2,1) 0.25s forwards; }
.hero-stack-graph .hs-draw.hs-2 { animation-delay: 0.5s; animation-duration: 2s; }
.hero-stack-graph .hs-fill-a { opacity: 0; animation: hs-fade 1.2s ease 1.1s forwards; }
}
@keyframes stack-in { from { opacity: 0; transform: translateY(28px) rotate(var(--tilt, 0deg)); } to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); } }
@keyframes pin-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes hs-draw { to { stroke-dashoffset: 0; } }
@keyframes hs-fade { to { opacity: 1; } }
@media (max-width: 1024px) {
.hero-stack { margin: 0 auto; min-height: 620px; }
.hero-stack-graph { left: 0; }
}
@media (max-width: 640px) {
.hero-stack { min-height: 500px; }
.hero-stack-layer.sc { width: 250px; right: 0; }
.hero-stack-layer.sc .hero-stack-tilt { scale: 0.417; }
.hero-stack-layer.pb { width: 262px; top: 206px; left: -12px; }
.hero-stack-layer.pb .hero-stack-tilt { scale: 0.42; }
.hero-stack-layer.cm { width: 250px; }
.hero-stack-pin.p1 { top: 186px; left: -22px; right: auto; }
.hero-stack-pin.p2 { left: auto; right: 40px; top: 400px; }
}
/* Orbit variant */
.hero-orbit { position: relative; aspect-ratio: 1 / 1; max-width: 500px; margin-left: auto; }
.hero-orbit svg { width: 100%; height: 100%; }
.hero-orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--concrete-950); color: var(--foreground); width: 144px; height: 144px; border-radius: var(--radius-full); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-4); text-align: center; box-shadow: 0 16px 48px -8px var(--black-a-30); }
.hero-orbit-center b { font-size: var(--text-sm); font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.15; }
.hero-orbit-center small { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--jurnii-200); margin-top: var(--spacing-1); }
.orbit-chip { position: absolute; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full); padding: var(--spacing-1) var(--spacing-3); font-size: var(--text-xs); font-weight: var(--fw-semibold); box-shadow: 0 4px 14px -4px rgba(0,0,0,0.1); animation: orbit-float 4s ease-in-out infinite; }
@keyframes orbit-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.orbit-chip:nth-child(2) { animation-delay: 0.3s; }
.orbit-chip:nth-child(3) { animation-delay: 0.6s; }
.orbit-chip:nth-child(4) { animation-delay: 0.9s; }
.orbit-chip:nth-child(5) { animation-delay: 1.2s; }
.orbit-chip:nth-child(6) { animation-delay: 1.5s; }
/* Ticker variant */
.hero-ticker { background: var(--concrete-950); color: var(--foreground); border-radius: var(--radius-xl); padding: var(--spacing-6); overflow: hidden; position: relative; }
.hero-ticker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-4); padding-bottom: var(--spacing-4); border-bottom: 1px solid var(--white-a-10); }
.hero-ticker-head b { font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.hero-ticker-head .live { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--jurnii-200); display: inline-flex; align-items: center; gap: var(--spacing-1); }
.hero-ticker-head .live i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--jurnii-300); animation: pulse-dot 1.6s ease-in-out infinite; }
.hero-ticker-rows { display: flex; flex-direction: column; gap: var(--spacing-2); }
.hero-ticker-row { display: grid; grid-template-columns: 60px 1fr auto; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); align-items: center; background: var(--white-a-4); border: 1px solid var(--white-a-8); border-radius: 10px; }
.hero-ticker-row .op { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--jurnii-200); }
.hero-ticker-row .promo { font-size: var(--text-xs); color: var(--foreground); }
.hero-ticker-row .promo span { color: var(--muted-foreground); font-size: var(--text-xs); display: block; margin-top: var(--spacing-1); }
.hero-ticker-row .when { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted-foreground); white-space: nowrap; }
.hero-ticker-row.new { animation: ticker-in 600ms cubic-bezier(0.2,0.8,0.2,1); }
@keyframes ticker-in { from { opacity: 0; transform: translateY(-8px); background: rgba(var(--brand-glow),0.1); } to { opacity: 1; transform: translateY(0); background: var(--white-a-4); } }
/* ---------- PageHero (component) ---------- */
.page-hero-kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 var(--spacing-4); }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }
.h1-page { font-size: clamp(var(--text-5xl), 4.8vw, var(--text-11xl)); line-height: 1.02; letter-spacing: -0.03em; font-weight: var(--fw-semibold); margin: 0 0 var(--spacing-4); max-width: 20ch; }
.page-hero-lede { font-size: clamp(var(--text-base), 1.6vw, var(--text-xl)); line-height: 1.55; color: var(--muted-foreground); max-width: 62ch; margin: 0 0 var(--spacing-6); }
.page-hero.accent-360::before { background: radial-gradient(ellipse 60% 50% at 70% -10%, rgba(var(--brand-glow),0.12) 0%, transparent 55%); }
.page-hero.accent-ux::before { background: radial-gradient(ellipse 60% 50% at 30% -10%, rgba(var(--accent-ux-rgb),0.10) 0%, transparent 55%); }
.page-hero.accent-mmm::before { background: radial-gradient(ellipse 60% 50% at 50% -10%, rgba(var(--accent-mmm-rgb),0.08) 0%, transparent 55%); }
/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.feature-cell { background: var(--card); padding: var(--spacing-6) var(--spacing-6) var(--spacing-8); display: flex; flex-direction: column; gap: var(--spacing-2); min-height: 220px; }
.feature-cell h3 { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--foreground); margin: 0; letter-spacing: -0.005em; }
.feature-cell p { font-size: var(--text-sm); line-height: 1.6; color: var(--muted-foreground); margin: 0; }
.feature-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--concrete-100); color: var(--concrete-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-1); }
[data-theme="dark"] .feature-icon, [data-theme="jurnii-v1"] .feature-icon { background: var(--white-a-6); color: var(--muted-foreground); }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
/* ---------- Outcome strip ---------- */
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-6); margin-top: var(--spacing-8); }
.outcome-cell { padding: var(--spacing-6) 0; border-top: 1px solid var(--border); }
.outcome-num { font-size: clamp(var(--text-5xl), 3.6vw, var(--text-8xl)); font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--foreground); line-height: 1; margin-bottom: var(--spacing-2); }
.outcome-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--spacing-2); }
.outcome-desc { font-size: var(--text-sm); line-height: 1.55; color: var(--muted-foreground); margin: 0; }
@media (max-width: 900px) { .outcome-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .outcome-grid { grid-template-columns: 1fr; } }
/* ---------- Methodology / steps (timeline) ---------- */
.method-list {
--method-gap: var(--spacing-4);
--method-pad: var(--spacing-6);
--method-dot: 9px;
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: var(--method-gap);
}
.method-list li {
display: grid;
grid-template-columns: 12px minmax(0, 1fr);
column-gap: var(--spacing-5);
align-items: stretch;
position: relative;
}
.method-rail { position: relative; width: 12px; justify-self: center; }
.method-rail::before {
content: ""; position: absolute; left: 50%;
top: calc(var(--method-pad) + 0.45em);
bottom: calc(-1 * var(--method-gap));
border-left: 1px dashed rgba(var(--brand-glow), 0.5);
transform: translateX(-50%);
}
.method-list li:last-child .method-rail::before { display: none; }
.method-rail::after {
content: ""; position: absolute; z-index: 1;
left: 50%; top: calc(var(--method-pad) + 0.2em);
width: var(--method-dot); height: var(--method-dot);
border-radius: var(--radius-full);
background: var(--jurnii-500);
box-shadow: 0 0 0 4px rgba(var(--brand-glow), 0.16);
transform: translateX(-50%);
}
.method-card {
min-width: 0;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
padding: var(--method-pad);
display: flex; flex-direction: column; align-items: flex-start; text-align: left;
box-shadow: 0 12px 32px -24px var(--black-a-28);
}
.method-num {
font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold);
letter-spacing: 0.1em; color: var(--jurnii-500); padding-top: 0; margin: 0 0 var(--spacing-2);
}
.method-list h3 { margin: 0 0 var(--spacing-2); font-size: var(--text-xl); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.method-list p { margin: 0; font-size: var(--text-base); line-height: 1.65; color: var(--muted-foreground); max-width: 64ch; }
@media (max-width: 640px) {
.method-list {
--method-gap: var(--spacing-3);
--method-pad: var(--spacing-4);
--method-dot: 8px;
}
.method-list li { grid-template-columns: 10px minmax(0, 1fr); column-gap: var(--spacing-3); }
.method-rail { width: 10px; }
.method-rail::after { box-shadow: 0 0 0 3px rgba(var(--brand-glow), 0.16); }
.method-card { border-radius: var(--radius-lg); }
.method-num { font-size: var(--text-2xs); margin-bottom: var(--spacing-1); }
.method-list h3 { font-size: var(--text-lg); margin-bottom: var(--spacing-1); }
.method-list p { font-size: var(--text-sm); line-height: 1.55; }
}
/* ---------- Pull quote ---------- */
.pull-quote { margin: 0; max-width: 880px; }
.pull-quote blockquote { font-size: clamp(var(--text-2xl), 2.4vw, var(--text-3xl)); line-height: 1.35; letter-spacing: -0.012em; font-weight: var(--fw-medium); color: var(--foreground); margin: 0 0 var(--spacing-5); }
.pull-quote blockquote::before { content: "\201C"; }
.pull-quote blockquote::after { content: "\201D"; }
.pull-quote figcaption { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--muted-foreground); }
.pull-quote figcaption b { color: var(--foreground); font-weight: var(--fw-semibold); }
/* ---------- Testimonial carousel ---------- */
.tm-section { --tm-accent: var(--jurnii-500); --tm-accent-rgb: var(--brand-glow); }
.tm-section.accent-ux { --tm-accent: var(--accent-ux); --tm-accent-rgb: var(--accent-ux-rgb); }
.tm-section.accent-mmm { --tm-accent: var(--accent-mmm); --tm-accent-rgb: var(--accent-mmm-rgb); }
.tm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-6); margin-bottom: var(--spacing-10); }
.tm-head .section-head { margin-bottom: 0; }
.tm-head .h2-section { margin-bottom: 0; }
.tm-nav { display: flex; gap: var(--spacing-2); flex: none; }
.tm-arrow {
width: 44px; height: 44px; border-radius: var(--radius-full); flex: none;
display: inline-flex; align-items: center; justify-content: center;
background: var(--card); border: 1px solid var(--border); color: var(--foreground);
cursor: pointer; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
.tm-arrow i, .tm-arrow svg { width: 18px; height: 18px; }
.tm-arrow:hover:not(:disabled) { background: var(--accent); }
.tm-arrow:disabled { opacity: 0.35; cursor: default; }
.tm-track-wrap { position: relative; margin: 0 calc(-1 * var(--spacing-1)); overflow: hidden; padding-bottom: var(--spacing-3); }
.tm-track {
display: flex; gap: var(--spacing-5); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
padding: var(--spacing-4) var(--spacing-1) 36px; margin-bottom: -28px;
scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.tm-track::-webkit-scrollbar { display: none; height: 0; }
.tm-track.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.tm-card {
flex: 0 0 clamp(300px, 33%, 400px); scroll-snap-align: start;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
padding: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-5); min-height: 280px;
transition: transform 240ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.tm-section .tm-card { justify-content: flex-start; }
.tm-card:hover {
transform: translateY(-6px); border-color: var(--concrete-300);
box-shadow: 0 24px 48px -24px var(--black-a-22), 0 4px 12px rgba(0,0,0,0.05);
}
[data-theme="dark"] .tm-card:hover, [data-theme="jurnii-v1"] .tm-card:hover {
border-color: var(--white-a-20); box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6);
}
.tm-mark { display: flex; color: var(--jurnii-500); line-height: 0; }
.tm-mark svg, .tm-mark i { width: 28px; height: 28px; display: block; }
.tm-section .tm-quote { flex: 1; }
.tm-section .tm-card-head { margin-top: auto; }
.tm-card--stats {
background: var(--concrete-950); border-color: transparent; color: var(--concrete-50);
justify-content: center; gap: 0;
}
.tm-card--stats:hover {
border-color: var(--white-a-20);
box-shadow: 0 24px 48px -20px rgba(0,0,0,0.55);
}
.tm-stats { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; }
.tm-stats li {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: var(--spacing-4) 0; border-bottom: 1px solid var(--white-a-10);
}
.tm-stats li:first-child { padding-top: 0; }
.tm-stats li:last-child { padding-bottom: 0; border-bottom: 0; }
.tm-stats b {
font-size: var(--text-4xl); font-weight: var(--fw-semibold); letter-spacing: -0.03em; line-height: 1;
color: var(--jurnii-300);
}
.tm-stats span { font-size: var(--text-sm); line-height: 1.35; color: var(--concrete-200); }
.tm-card-head { display: flex; align-items: center; gap: var(--spacing-3); }
.tm-avatar {
width: 48px; height: 48px; border-radius: var(--radius-full); flex: none; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--text-sm); letter-spacing: 0.02em;
}
.tm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-av-green { background: linear-gradient(135deg, var(--jurnii-200), var(--jurnii-300)); color: var(--concrete-950); }
.tm-av-blue { background: linear-gradient(135deg, var(--avatar-blue-from), var(--avatar-blue-to)); color: var(--avatar-blue-ink); }
.tm-av-orange { background: linear-gradient(135deg, var(--avatar-orange-from), var(--avatar-orange-to)); color: var(--avatar-orange-ink); }
.tm-av-purple { background: linear-gradient(135deg, var(--avatar-purple-from), var(--avatar-purple-to)); color: var(--avatar-purple-ink); }
.tm-id { min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); }
.tm-id b { font-size: var(--text-base); font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--foreground); }
.tm-id span { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.35; }
.tm-quote {
margin: 0; font-size: var(--text-base); line-height: 1.55; font-weight: var(--fw-medium); letter-spacing: -0.006em;
color: var(--muted-foreground); text-wrap: pretty; position: relative;
transition: color 240ms ease;
}
.tm-card:hover .tm-quote { color: var(--foreground); }
.tm-fade {
position: absolute; top: 0; right: -2px; bottom: var(--spacing-3); width: 64px; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--background)); transition: opacity 200ms ease;
}
.tm-fade.is-hidden { opacity: 0; }
@media (max-width: 680px) {
.tm-head { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.tm-card { flex-basis: 84%; min-height: 240px; padding: var(--spacing-5); gap: var(--spacing-4); }
.tm-quote { font-size: var(--text-sm); line-height: 1.5; }
.tm-mark svg, .tm-mark i { width: 22px; height: 22px; }
.tm-stats b { font-size: var(--text-3xl); }
.tm-stats span { font-size: var(--text-xs); }
}
/* ---------- Persona grid ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4); }
.persona-cell, .persona-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: var(--spacing-6); display: flex; flex-direction: column; }
.persona-cell h3, .pc-role { margin: 0 0 var(--spacing-3); font-size: var(--text-xs); font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); font-weight: var(--fw-medium); }
.persona-q, .pc-q { font-size: var(--text-lg); font-weight: var(--fw-medium); letter-spacing: -0.01em; color: var(--foreground); margin: 0 0 var(--spacing-3); line-height: 1.4; }
.persona-cell p:last-child, .pc-a { font-size: var(--text-sm); line-height: 1.65; color: var(--muted-foreground); margin: 0; }
@media (max-width: 760px) { .persona-grid { grid-template-columns: 1fr; } }
/* ---------- CTA band ---------- */
.cta-band-wrap { padding: var(--section-padding-y) 0; }
.cta-band { background: var(--concrete-950); color: var(--foreground); border-radius: 18px; padding: var(--spacing-12) var(--spacing-12); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--spacing-8); align-items: center; position: relative; overflow: hidden; }
.cta-band::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: 50%; width: 62%; height: 128%;
transform: translate(-50%, -50%);
background-image: radial-gradient(rgba(var(--brand-glow), 0.30) 1px, transparent 1.2px);
background-size: 16px 16px;
-webkit-mask-image:
radial-gradient(ellipse 72% 64% at 50% 50%, var(--black) 0%, transparent 72%),
linear-gradient(to right, transparent 0%, var(--black) 12%, var(--black) 88%, transparent 100%);
mask-image:
radial-gradient(ellipse 72% 64% at 50% 50%, var(--black) 0%, transparent 72%),
linear-gradient(to right, transparent 0%, var(--black) 12%, var(--black) 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(var(--text-3xl), 2.8vw, var(--text-5xl)); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--spacing-3); max-width: 24ch; font-weight: var(--fw-semibold); }
.cta-band p { color: var(--muted-foreground); font-size: var(--text-base); line-height: 1.55; margin: 0; max-width: 56ch; }
.cta-band-actions, .cta-band .hero-cta-row { display: flex; gap: var(--spacing-3); flex-wrap: wrap; justify-content: flex-end; align-items: center; position: relative; z-index: 1; }
.cta-band .btn.ghost { background: transparent; color: var(--foreground); border-color: var(--white-a-18); }
.cta-band .btn.ghost:hover { background: var(--white-a-8); border-color: rgba(255,255,255,0.28); }
.cta-band .btn.accent, .cta-band .btn.primary { background: var(--jurnii-200); color: var(--concrete-950); border-color: var(--jurnii-200); --btn-ping: var(--jurnii-200); }
.cta-band .btn.accent:hover, .cta-band .btn.primary:hover { background: var(--jurnii-300); border-color: var(--jurnii-300); }
@media (prefers-reduced-motion: no-preference) {
.cta-band::before, .demo-cta::after { animation: cta-dotfield 36s linear infinite; }
.cta-band .btn.accent, .cta-band .btn.primary, .hero-ctas .btn.primary, .page-hero--center .btn.primary {
animation: btn-sonar 1.25s cubic-bezier(0.66, 0, 0, 1) infinite;
}
}
@keyframes btn-sonar {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn-ping) 70%, transparent); }
to { box-shadow: 0 0 0 20px color-mix(in srgb, var(--btn-ping) 0%, transparent); }
}
@keyframes cta-dotfield {
from { transform: translate(-50%, -50%); }
to { transform: translate(calc(-50% + 16px), calc(-50% + 16px)); }
}
/* Desktop: size the actions column to the buttons so two labels sit in a row
instead of wrapping inside a 1fr track. */
@media (min-width: 1024px) {
.cta-band { grid-template-columns: minmax(0, 1fr) auto; }
.cta-band-actions, .cta-band .hero-cta-row { flex-wrap: nowrap; }
}
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; padding: var(--spacing-8) var(--spacing-6); } .cta-band-actions, .cta-band .hero-cta-row { justify-content: flex-start; } }
/* Press bar — distinct from operator bar */
.press-bar { padding: var(--spacing-10) 0 var(--spacing-16); border-top: 0; }
.press-bar .logo-bar-row { gap: var(--spacing-8) var(--spacing-12); opacity: 0.85; }
.press-bar .logo-bar-row svg { height: 24px; }
.press-bar .press-logo {
display: block;
height: 32px;
width: auto;
max-width: 160px;
object-fit: contain;
opacity: 0.8;
transition: opacity 220ms ease;
}
.press-bar .press-logo:hover { opacity: 1; }
/* Monochrome SVGs (iGB) — invert on dark surfaces so the mark stays visible */
.press-bar .press-logo--mono {
height: 28px;
max-width: 96px;
}
[data-theme="dark"] .press-bar .press-logo--mono,
[data-theme="jurnii-v1"] .press-bar .press-logo--mono {
filter: invert(1);
}
.press-bar .press-logo-frame {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
flex-shrink: 0;
}
/* Wide lockups — full asset visible at the shared row height */
.press-bar .press-logo--next-io {
max-width: 148px;
}
/* Dark lockups on the dark homepage — light chip for contrast */
.press-bar .press-logo-frame--light {
padding: 0 var(--spacing-3);
border-radius: var(--radius-md);
background: var(--card);
border: 1px solid var(--border);
}
.press-bar .press-logo-frame--light .press-logo {
height: 20px;
}
[data-theme="light"] .press-bar .press-logo-frame--light {
background: transparent;
border-color: transparent;
padding: 0;
}
[data-theme="light"] .press-bar .press-logo-frame--light .press-logo {
height: 24px;
}
/* Mobile: infinite marquee like the operators strip; desktop keeps the static row */
.press-bar-marquee { display: none; }
@media (max-width: 640px) {
.press-bar .press-bar-static { display: none; }
.press-bar-marquee { display: block; }
.press-bar .press-bar-item {
width: clamp(6.5rem, 28vw, 9rem);
height: 36px;
}
/* Equal optical height across every press lockup (frames + bare imgs) */
.press-bar .press-bar-item .press-logo-frame,
.press-bar .press-bar-item .press-logo {
height: 28px;
max-height: 28px;
}
.press-bar .press-bar-item .press-logo {
width: auto;
max-width: 100%;
object-fit: contain;
opacity: 0.85;
}
.press-bar .press-bar-item .press-logo-frame {
width: auto;
max-width: 100%;
overflow: hidden;
}
.press-bar .press-bar-item .press-logo--mono {
height: 24px;
max-height: 24px;
max-width: 88px;
}
.press-bar .press-bar-item .press-logo--next-io {
max-width: 120px;
}
.press-bar .press-bar-item .press-logo-frame--light {
padding: 0 var(--spacing-2);
}
.press-bar .press-bar-item .press-logo-frame--light .press-logo {
height: 22px;
max-height: 22px;
}
[data-theme="light"] .press-bar .press-bar-item .press-logo-frame--light .press-logo {
height: 26px;
max-height: 26px;
}
}
/* Press marquee is shorter than the operators strip — keep the loop paced */
@media (prefers-reduced-motion: no-preference) {
.press-bar .logo-bar-track {
animation-duration: 32s;
}
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
/* Show one set only when the track flattens into a wrap */
.press-bar .press-bar-item:nth-child(n + 5) { display: none; }
}
/* content-pages.css, ux-telemetry.css, booking-chrome.css, library.css extracted for deferred load */
/* ---------- Jurnii 360 — price-boost snapshot (cut-off teaser) ---------- */
.pbt-frame { position: relative; max-height: 660px; overflow: hidden; }
.pbt-card {
background: var(--card); color: var(--card-foreground);
border: 1px solid var(--border); border-radius: var(--radius-3xl);
padding: var(--spacing-10) var(--spacing-10) var(--spacing-2);
box-shadow: 0 1px 2px var(--black-a-4), 0 28px 60px -28px var(--black-a-28);
}
.pbt-card-head { display: flex; align-items: flex-start; gap: var(--spacing-4); margin-bottom: var(--spacing-6); }
.pbt-title-ico {
flex: none; width: 44px; height: 44px; border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
background: rgba(var(--brand-glow),0.12); color: var(--jurnii-700);
}
[data-theme="dark"] .pbt-title-ico, [data-theme="jurnii-v1"] .pbt-title-ico { color: var(--jurnii-200); }
.pbt-title-text h3 { margin: 0; font-size: var(--text-3xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.15; color: var(--foreground); }
.pbt-title-text p { margin: var(--spacing-1) 0 0; font-size: var(--text-base); line-height: 1.45; color: var(--muted-foreground); }
.pbt-search {
display: flex; align-items: center; gap: var(--spacing-2);
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: var(--spacing-3) var(--spacing-4); margin-bottom: var(--spacing-6);
color: var(--muted-foreground); font-size: var(--text-base); background: var(--background);
}
.pbt-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; }
.pbt-table { width: 100%; border-collapse: collapse; }
.pbt-table thead th {
font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-base);
color: var(--muted-foreground); text-align: left;
padding: var(--spacing-3) var(--spacing-5) var(--spacing-4); border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.pbt-th-op, .pbt-th-sort { display: table-cell; }
.pbt-table thead th span { vertical-align: middle; }
.pbt-sort { width: 15px; height: 15px; margin-left: auto; float: right; color: var(--muted-foreground); opacity: 0.7; }
.pbt-table tbody td {
padding: var(--spacing-4) var(--spacing-5); font-size: var(--text-base); color: var(--foreground);
border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap;
}
.pbt-table td + td, .pbt-table th + th { border-left: 1px solid var(--border); }
.pbt-op { display: flex; align-items: center; gap: var(--spacing-3); }
.pbt-mono {
flex: none; width: 36px; height: 36px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: var(--text-xs); letter-spacing: 0.02em;
}
.pbt-op-name { font-weight: var(--fw-semibold); font-size: var(--text-base); }
.pbt-date { font-variant-numeric: tabular-nums; }
/* Row cascade-in */
.pbt-row { opacity: 1; }
html.js-gsap .pbt-row, .pbt-row { opacity: 0; transform: translateY(14px); transition: opacity 560ms cubic-bezier(0.2,0.8,0.2,1), transform 560ms cubic-bezier(0.2,0.8,0.2,1); }
html.js-gsap .pbt-row.is-in, .pbt-row.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .pbt-row { opacity: 1 !important; transform: none !important; } }
/* Cut-off fade + CTA. --pbt-fade-end is the surface the table dissolves into;
color-mix yields a true transparent-of-that-colour (no grey banding). */
.pbt-frame { --pbt-fade-end: var(--background); }
.pbt-fade {
position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
display: flex; align-items: flex-end; justify-content: center;
padding-bottom: var(--spacing-1); pointer-events: none;
background: linear-gradient(to bottom,
color-mix(in srgb, var(--pbt-fade-end) 0%, transparent) 0%,
var(--pbt-fade-end) 78%);
}
/* On the component-library stage the card sits on --accent, so fade into that. */
.cl-stage .pbt-frame { --pbt-fade-end: var(--accent); }
.pbt-more {
pointer-events: auto; display: inline-flex; align-items: center; gap: var(--spacing-2);
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-full);
padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-5); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--muted-foreground);
box-shadow: 0 1px 2px var(--black-a-4), 0 16px 36px -16px rgba(0,0,0,0.26);
transition: transform 180ms ease, border-color 180ms ease;
}
.pbt-more:hover { transform: translateY(-1px); border-color: var(--ring); }
.pbt-more-count { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--jurnii-700); }
[data-theme="dark"] .pbt-more-count, [data-theme="jurnii-v1"] .pbt-more-count { color: var(--jurnii-200); }
.pbt-more-cta {
display: inline-flex; align-items: center; gap: var(--spacing-1); margin-left: var(--spacing-1);
background: var(--concrete-950); color: var(--concrete-50);
padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-full); font-weight: var(--fw-medium);
}
.pbt-more:hover .arrow { transform: translateX(2px); }
.pbt-more .arrow { transition: transform 200ms cubic-bezier(0.2,0.8,0.2,1); }
@media (max-width: 768px) {
.pbt-frame { max-height: 560px; }
.pbt-card { padding: var(--spacing-6) var(--spacing-5) var(--spacing-1); border-radius: var(--radius-2xl); }
.pbt-title-text h3 { font-size: var(--text-2xl); }
.pbt-table { min-width: 640px; }
.pbt-more { flex-wrap: wrap; justify-content: center; text-align: center; }
}
/* ---------- Lazy section placeholders (CLS-safe) ---------- */
.lazy-section { width: 100%; }
.lazy-section-ph {
width: 100%;
height: 100%;
min-height: inherit;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted) 40%, transparent), transparent);
background-size: 200% 100%;
opacity: 0.35;
}
.lazy-section.is-ready .lazy-section-ph { display: none; }
.lazy-section:not(.is-ready).lazy-ph-feature { min-height: 420px; }
.lazy-section:not(.is-ready).lazy-ph-outcome { min-height: 280px; }
.lazy-section:not(.is-ready).lazy-ph-promos { min-height: 480px; }
.lazy-section:not(.is-ready).lazy-ph-section { min-height: 360px; }
.lazy-section:not(.is-ready).lazy-ph-canvas { min-height: 560px; }
.lazy-section:not(.is-ready).lazy-ph-chart { min-height: 320px; }
.lazy-section:not(.is-ready).lazy-ph-tabs { min-height: 520px; }
.lazy-section:not(.is-ready).lazy-ph-takeaways { min-height: 640px; }