/* ============================================================
Trasix Landing — Layout & Module Styles
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Form controls inherit the design-system font (Poppins). Browsers default
buttons/inputs/selects to a UA font — the one place a stray non-brand font
slips in. Explicit per-component rules (.btn, .showcase-tab, …) still win. */
button, input, select, textarea, optgroup { font-family: var(--font-sans); }
/* (Cross-document View Transition removed — caused a benign but noisy
"Transition was skipped" rejection under rapid re-navigation, and only
worked in Chromium. In-page animations are unaffected.) */
html { background: #ffffff; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background: #ffffff;
color: var(--fg-primary);
overflow-x: hidden;
}
/* (background pattern removed per feedback — clean canvas only) */
.bg-pattern { display: none; }
.page { position: relative; z-index: 1; }
/* Background crystal parallax layer — sits behind all page content */
.bg-crystals {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.bg-crystal {
position: absolute;
opacity: 0;
will-change: transform, opacity, filter;
}
.bg-crystal img { display: block; width: 100%; height: auto; }
/* Include wrappers must not create a box, or they'd trap sticky children */
[data-include] { display: contents; }
/* Empty home placeholder */
.home-empty {
min-height: 70vh;
display: grid;
place-items: center;
}
.home-empty-note {
color: var(--fg-tertiary);
font-size: var(--text-md);
letter-spacing: var(--tracking-wide);
}
/* Generic container */
.container {
width: 1280px;
max-width: calc(100% - 64px);
margin: 0 auto;
}
/* ─── Section header helper ─────────────────────────────── */
.section-label {
display: inline-block;
font-size: 25px;
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: 0;
color: var(--red-500);
padding: 0;
background: none;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
}
/* ─── Buttons ───────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: var(--weight-medium);
font-size: var(--text-base);
padding: 12px 22px;
border-radius: var(--radius-full);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all 150ms ease-out;
white-space: nowrap;
}
.btn-primary {
background: var(--action-primary);
color: var(--white);
}
.btn-primary:hover { background: var(--action-primary-hover); }
.btn-glass {
background: var(--glass-bg);
color: var(--fg-primary);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.btn-glass:hover { background: var(--glass-bg-strong); }
.btn-ghost-light {
background: var(--glass-bg);
color: var(--fg-primary);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.btn-ghost-light:hover { background: var(--glass-bg-strong); }
.btn-link {
background: transparent;
padding: 0;
color: var(--fg-primary);
font-weight: var(--weight-semibold);
text-transform: uppercase;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
}
/* ─── Nav ───────────────────────────────────────────────── */
.nav {
position: sticky;
top: 16px;
z-index: 1000;
margin: 16px auto 0;
width: calc(100% - 48px);
max-width: 1360px;
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 12px 24px;
/* Header carries its own frosted fill (not the 0.55 token): backdrop-filter
can't blur sections the browser composites onto their own layer (anything
transform/scroll-revealed — logos, intro, wheel, testimonials). The higher
opacity makes the bar read as frosted glass everywhere; the blur is an
enhancement where the browser can sample it. */
background: linear-gradient(180deg, rgba(255,255,255,0.80), rgba(255,255,255,0.72));
backdrop-filter: var(--glass-blur-lg) saturate(160%);
-webkit-backdrop-filter: var(--glass-blur-lg) saturate(160%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
box-shadow: var(--glass-shadow);
}
.nav-logo img { height: 32px; display: block; width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-links a {
color: var(--fg-primary);
text-decoration: none;
font-size: var(--text-base);
font-weight: var(--weight-medium);
transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--fg-accent); }
.nav-cta {
display: flex; align-items: center; gap: 12px;
}
/* ─── Nav mega menu (Solutions) ─────────────────────────── */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a {
display: inline-flex;
align-items: center;
gap: 5px;
}
.nav-caret { transition: transform 180ms ease-out; opacity: 0.6; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }
.nav-mega {
position: absolute;
top: calc(100% + 18px);
left: 50%;
transform: translateX(-50%) translateY(8px);
display: grid;
grid-template-columns: repeat(2, minmax(210px, 1fr));
gap: 2px 8px;
padding: 14px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid rgba(255,255,255,0.8);
border-radius: var(--radius-lg);
box-shadow: 0 18px 50px rgba(45,49,66,0.16), 0 4px 14px rgba(45,49,66,0.08);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms;
z-index: 1001;
}
/* hover bridge so the menu doesn't close in the 18px gap */
.nav-mega::before {
content: "";
position: absolute;
left: 0; right: 0; top: -18px;
height: 18px;
}
.nav-item:hover .nav-mega,
.nav-item:focus-within .nav-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-mega-col { display: flex; flex-direction: column; }
.nav-mega-3 {
left: -40px;
right: auto;
transform: translateY(8px);
grid-template-columns: repeat(3, auto);
gap: 2px 0;
padding: 18px 6px;
}
.nav-item:hover .nav-mega-3,
.nav-item:focus-within .nav-mega-3 { transform: translateY(0); }
.nav-mega-3 .nav-mega-col:last-child { border-right: none; }
.nav-mega-3 .nav-mega-col { border-right: 1px solid var(--border-default); padding: 0 20px; }
.nav-mega-head {
display: block;
padding: 4px 14px 8px;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--fg-tertiary);
}
.nav-mega-col:first-child { border-right: 1px solid var(--border-default); padding-right: 8px; }
.nav-mega-col:last-child { padding-left: 8px; }
.nav-mega-col a {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--fg-primary);
white-space: nowrap;
transition: background 120ms ease-out, color 120ms ease-out, padding 120ms ease-out;
}
.nav-mega-col a::before {
content: "";
width: 5px; height: 5px; border-radius: 50%;
background: var(--neutral-300);
flex-shrink: 0;
transition: background 120ms ease-out, transform 120ms ease-out;
}
.nav-mega-col a:hover {
background: var(--red-50);
color: var(--red-500);
}
.nav-mega-col a:hover::before { background: var(--red-500); transform: scale(1.3); }
/* ─── Hero ──────────────────────────────────────────────── */
.hero {
position: relative;
margin: 24px auto 0;
width: calc(100% - 48px);
max-width: 1360px;
background:
linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.6)),
url('../img/Carousel_01.jpg') center/cover no-repeat,
#ddddea;
border: 1px solid var(--glass-border-soft);
border-radius: var(--radius-xl);
overflow: hidden;
color: var(--fg-primary);
min-height: 620px;
padding: 72px 80px 80px;
box-shadow: var(--glass-shadow-lg);
}
.hero::before {
/* soft neutral highlight */
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 88% 18%, rgba(255,255,255,0.6), transparent 38%),
radial-gradient(circle at 100% 100%, rgba(0,0,0,0.04), transparent 40%);
pointer-events: none;
}
.hero::after { display: none; }
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: center;
min-height: 460px;
}
/* Hero top bar — next-solution link (left) + module pill (right) */
.hero-topbar {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 36px;
}
.hero-next {
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
padding: 9px 16px;
border-radius: var(--radius-full);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--fg-primary);
text-decoration: none;
transition: background 0.2s ease;
}
.hero-next:hover { background: var(--glass-bg-strong); }
.hero-next .arrow { color: var(--red-500); transition: transform 0.2s ease; }
.hero-next:hover .arrow { transform: translateX(3px); }
/* Prominent "Up next" — larger label + larger animated arrow */
.hero-next-lg {
gap: 12px;
padding: 12px 16px 12px 20px;
border-radius: var(--radius-lg);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 22px rgba(60,66,110,0.12);
}
.hero-next-lg .hero-next-eyebrow {
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--red-500);
margin-right: 2px;
}
.hero-next-lg .hero-next-name {
font-size: 17px;
font-weight: var(--weight-semibold);
color: var(--fg-primary);
}
.hero-next-lg .arrow {
color: var(--red-500);
animation: heroNextNudge 1.4s ease-in-out infinite;
}
.hero-next-lg:hover .arrow { animation: none; transform: translateX(5px); }
@keyframes heroNextNudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-next-lg .arrow { animation: none; }
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: #fff;
padding: 9px 18px;
background: linear-gradient(135deg, #c9cce5 0%, #babcda 100%);
border: none;
border-radius: var(--radius-full);
}
.hero h1 {
color: var(--fg-primary);
font-size: var(--text-5xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: 1.05;
margin: 24px 0 28px;
}
.hero h1 .accent { color: var(--red-500); }
.hero-h1-medium { font-weight: var(--weight-medium); }
.hero-h1-semibold { font-weight: var(--weight-semibold); }
.hero ul.hero-points {
list-style: none; padding: 0; margin: 0 0 36px;
display: flex; flex-direction: column; gap: 14px;
}
.hero ul.hero-points li {
display: flex; gap: 12px; align-items: flex-start;
color: var(--fg-primary);
font-size: var(--text-md);
line-height: var(--leading-snug);
max-width: 540px;
}
.hero ul.hero-points li .check {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--red-500);
display: grid; place-items: center;
margin-top: 1px;
}
.hero ul.hero-points li .check svg { width: 12px; height: 12px; color: white; }
/* ─── Hero benefit rotator (one-by-one reveal) ──────────── */
.hero-rotator { margin: 0 0 36px; max-width: 540px; }
.hero-rotator-stage { position: relative; min-height: 78px; }
.hero-benefit {
position: absolute; left: 0; right: 0; top: 0;
display: flex; gap: 14px; align-items: flex-start;
opacity: 0; transform: translateY(14px);
transition: opacity 0.55s ease, transform 0.55s ease;
pointer-events: none;
}
.hero-benefit.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hb-mark {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--red-500);
display: grid; place-items: center;
margin-top: 2px;
box-shadow: 0 4px 14px rgba(237,22,66,0.35);
}
.hb-mark svg { width: 14px; height: 14px; color: #fff; }
.hero-benefit.is-active .hb-mark { animation: hbpop 0.5s cubic-bezier(.4,1.4,.5,1); }
.hero-benefit p {
margin: 0;
font-size: var(--text-lg);
line-height: var(--leading-snug);
font-weight: var(--weight-medium);
color: var(--fg-primary);
}
@keyframes hbpop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.hero-rotator-rail { display: flex; gap: 8px; margin-top: 22px; }
.hb-dot {
position: relative;
height: 6px; width: 18px;
padding: 0; border: none; cursor: pointer;
border-radius: 999px; overflow: hidden;
background: var(--neutral-300);
transition: width 0.35s ease, background 0.35s ease;
}
.hb-dot.active { width: 44px; background: rgba(237,22,66,0.22); }
.hb-fill {
position: absolute; left: 0; top: 0; bottom: 0; width: 0;
background: var(--red-500); border-radius: 999px;
}
.hb-dot.active .hb-fill { animation: hbfill 4s linear forwards; }
@keyframes hbfill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
.hero-rotator-stage { min-height: 0; }
.hero-benefit { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 14px; }
.hero-benefit.is-active .hb-mark { animation: none; }
.hero-rotator-rail { display: none; }
}
.hero-cta-row { display: flex; gap: 16px; align-items: center; }
.hero-cta-center { justify-content: center; }
/* Light hero variant — soft gradient, dark text */
.hero-light {
position: relative;
background:
linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0) 52%),
linear-gradient(125deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.5) 67%, rgba(255,255,255,0) 73%),
radial-gradient(760px 460px at 16% 16%, rgba(108,93,211,0.07), transparent 62%),
radial-gradient(680px 460px at 90% 88%, rgba(237,22,66,0.045), transparent 62%),
linear-gradient(160deg, #fbfbfe 0%, #f1f1f8 55%, #eef0f7 100%);
}
.hero-light::before,
.hero-light::after { display: none; }
.hero-light h1 { color: var(--fg-primary); }
.hero-light .hero-eyebrow { color: #fff; }
.hero-light .hero-lede { color: var(--fg-secondary); }
/* Floating "powered by Tracy AI" glass pill on the wheel */
.tracy-pill {
position: absolute;
top: auto;
right: auto;
left: 50%;
bottom: -18%;
transform: translateX(-50%);
z-index: 5;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 5px 22px 5px 7px;
border-radius: var(--radius-full);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-lg);
white-space: nowrap;
opacity: 1;
transition: opacity 0.25s ease;
}
.tracy-pill img { width: 26px !important; height: 26px !important; max-width: 26px !important; display: block; border-radius: 50%; }
.tracy-pill.is-left { right: auto; left: 50%; transform: translateX(-50%); }
/* Inline variant — sits in normal flow below the statement copy (not pinned to wheel) */
.tracy-pill-inline { position: static; transform: none; margin: 22px auto 0; }
/* Module constellation — chips scattered around the full wheel (scene 2),
each twinkling in/out on a staggered loop as the comet orbits. */
.ws-modcloud { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ws-mc {
position: absolute;
left: 50%;
top: 50%;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 15px 6px 6px;
border-radius: var(--radius-full);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-lg);
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
}
.ws-mc img { width: 38px; height: 38px; object-fit: contain; display: block; }
.ws-mc span { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); }
/* backwards fill: during the staggered start delay (and when the loop is handed
back after a hover) the chip shows the 0% keyframe (0.3), never the base 0 —
so it can't flash to invisible. Hover light-up is handled in includes.js. */
.ws-modcloud.is-on .ws-mc { animation: mcTwinkle 11s ease-in-out infinite backwards; pointer-events: auto; }
.ws-modcloud.is-on .ws-mc:nth-child(1) { animation-delay: 0s; }
.ws-modcloud.is-on .ws-mc:nth-child(2) { animation-delay: 0.7s; }
.ws-modcloud.is-on .ws-mc:nth-child(3) { animation-delay: 1.4s; }
.ws-modcloud.is-on .ws-mc:nth-child(4) { animation-delay: 2.1s; }
.ws-modcloud.is-on .ws-mc:nth-child(5) { animation-delay: 2.8s; }
.ws-modcloud.is-on .ws-mc:nth-child(6) { animation-delay: 3.5s; }
.ws-modcloud.is-on .ws-mc:nth-child(7) { animation-delay: 4.2s; }
.ws-modcloud.is-on .ws-mc:nth-child(8) { animation-delay: 4.9s; }
.ws-modcloud.is-on .ws-mc:nth-child(9) { animation-delay: 5.6s; }
@keyframes mcTwinkle {
0% { opacity: 0.3; } /* resting (dim) */
6% { opacity: 1; } /* rise to full (~0.7s) */
42% { opacity: 1; } /* hold at full ~4s */
49% { opacity: 0.3; } /* fall back to the dim minimum */
100% { opacity: 0.3; } /* rest at 30% until the wave comes around again (seamless loop) */
}
@media (prefers-reduced-motion: reduce) {
.ws-modcloud.is-on .ws-mc { animation: none; opacity: 1; }
}.tracy-pill span { font-size: var(--text-sm); color: var(--fg-secondary); letter-spacing: var(--tracking-wide); }
.tracy-pill strong { color: #000; font-weight: var(--weight-bold); }
/* Slick plain eyebrow (no pill) */
.hero-eyebrow-plain {
background: none !important;
border: none !important;
padding: 0 !important;
color: #ed1642 !important;
letter-spacing: 0px;
font-weight: var(--weight-bold);
text-transform: none;
font-size: 20px;
opacity: 0.8;
}
/* ════════════════════════════════════════════════════════════════
WHEEL NAV RAIL — scene dots + top/bottom arrows (right side)
════════════════════════════════════════════════════════════════ */
.ws-nav {
position: fixed;
right: clamp(16px, 2.4vw, 34px);
top: 50%;
transform: translateY(-50%) translateX(14px);
z-index: 60;
font-family: var(--font-sans);
display: flex; flex-direction: column; align-items: center; gap: 12px;
opacity: 0; pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
.ws-nav.is-on { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.ws-nav-arrow {
width: 38px; height: 38px; padding: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
color: var(--fg-primary); cursor: pointer;
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
transition: background .2s ease, transform .2s ease, color .2s ease;
}
.ws-nav-arrow svg { width: 18px; height: 18px; }
.ws-nav-arrow:hover { background: var(--red-500); color: #fff; transform: translateY(-1px); }
.ws-nav-dots { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 4px 0; }
.ws-nav-dot {
position: relative;
width: 13px; height: 13px; padding: 0;
border-radius: 50%;
background: rgba(120,124,150,0.28);
border: 1px solid rgba(120,124,150,0.30);
cursor: pointer;
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ws-nav-dot:hover { background: rgba(237,22,66,0.5); transform: scale(1.15); }
.ws-nav-dot.is-active {
background: var(--red-500);
border-color: var(--red-500);
box-shadow: 0 0 0 4px rgba(237,22,66,0.16);
}
.ws-nav-tip {
position: absolute; right: 24px; top: 50%; transform: translateY(-50%) translateX(6px);
white-space: nowrap;
font-family: var(--font-sans);
display: inline-flex; align-items: center; gap: 7px;
background: var(--fg-primary); color: #fff;
font-size: var(--text-xs); font-weight: var(--weight-semibold);
padding: 5px 12px; border-radius: var(--radius-md);
opacity: 0; pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.ws-nav-num { font-weight: var(--weight-bold); }
/* Per-scene colours — mirror the brand phase-pill palette */
.ws-nav-tip.t-intro { background: linear-gradient(135deg, #5b6173 0%, #3a3f4d 100%); color: #fff; }
.ws-nav-tip.t-plan { background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%); color: #fff; }
.ws-nav-tip.t-plan .ws-nav-num { color: #5b5f80; }
.ws-nav-tip.t-exec { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); color: #fff; }
.ws-nav-tip.t-exec .ws-nav-num { color: rgba(255,255,255,0.62); }
.ws-nav-tip.t-opt { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); color: #fff; }
.ws-nav-tip.t-opt .ws-nav-num { color: rgba(255,255,255,0.62); }
.ws-nav-dot:hover .ws-nav-tip,
.ws-nav-dot.is-active .ws-nav-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 880px) { .ws-nav { display: none; } }
/* Phase pills (top-right of hero) */
.phase-pills {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-bottom: 28px;
}
.phase-pill {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
white-space: nowrap;
border: 1px solid var(--border-default);
color: var(--fg-tertiary);
text-decoration: none;
cursor: pointer;
user-select: none;
transition: color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, transform 0.2s ease;
}
.phase-pill > b,
.phase-pill > .pp-label { position: relative; z-index: 1; }
.phase-pill b { font-weight: var(--weight-bold); opacity: 0.55; transition: color 0.45s ease, opacity 0.45s ease; }
/* The fill lives in a pseudo so it can fade in/out smoothly (gradients can't transition directly) */
.phase-pill::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
transition: opacity 0.45s ease;
}
.phase-pill.pp-plan::before { background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%); }
.phase-pill.pp-exec::before { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); }
.phase-pill.pp-opt::before { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); }
.phase-pill.pp-ov::before { background: linear-gradient(135deg, #5b6173 0%, #3a3f4d 100%); }
.phase-pill.pp-ov .pp-label { letter-spacing: var(--tracking-wide); }
.phase-pill:hover::before,
.phase-pill.active::before { opacity: 1; }
.phase-pill:hover,
.phase-pill.active {
color: #fff;
border-color: transparent;
box-shadow: var(--glass-shadow);
text-shadow: 1px 1px 1px rgba(110,90,150,0.35);
}
.phase-pill:hover b,
.phase-pill.active b { opacity: 1; color: rgba(255,255,255,0.85); text-shadow: none; }
/* Plan variant is light — dark number, lavender text shadow */
.phase-pill.pp-plan:hover,
.phase-pill.pp-plan.active { text-shadow: 1px 1px 1px #a9acc7; }
.phase-pill.pp-plan:hover b,
.phase-pill.pp-plan.active b { color: #b4b6cb; }
/* Separator — gradient light→dark so direction reads intentionally */
.phase-pill-sep { width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #dcdfeb 0%, #a3a9c6 100%); flex-shrink: 0; }
.phase-pills-center { justify-content: center; }
/* Workflow overview stage cards (intro view) */
.wf-stagecards {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 26px;
}
.wf-stagecard {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
text-align: left;
padding: 16px 20px;
background: rgba(255,255,255,0.6);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
cursor: pointer;
font-family: var(--font-sans);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wf-stagecard:hover {
transform: translateX(4px);
background: rgba(255,255,255,0.85);
box-shadow: var(--glass-shadow-lg);
}
.wf-sc-num {
flex-shrink: 0;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: var(--radius-md);
font-size: var(--text-md);
font-weight: var(--weight-bold);
color: #fff;
text-shadow: 1px 1px 1px rgba(110,90,150,0.35);
}
.wf-stagecard.pp-plan .wf-sc-num { background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%); color: #fff; text-shadow: 1px 1px 1px #a9acc7; box-shadow: 0 4px 12px rgba(186,188,218,0.55); }
.wf-stagecard.pp-exec .wf-sc-num { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); box-shadow: 0 4px 12px rgba(143,111,188,0.45); }
.wf-stagecard.pp-opt .wf-sc-num { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); box-shadow: 0 4px 12px rgba(228,27,67,0.40); }
.wf-sc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wf-sc-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.wf-sc-desc { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-snug); }
.wf-sc-arrow { flex-shrink: 0; color: var(--fg-tertiary); display: grid; place-items: center; transition: transform 0.2s ease, color 0.2s ease; }
.wf-stagecard:hover .wf-sc-arrow { transform: translateX(3px); color: var(--red-500); }
/* Phase content swap transition */
[data-wf-swap] { transition: opacity 0.3s ease, transform 0.3s ease; }
[data-wf-swap].wf-out { opacity: 0; transform: translateY(10px); }
[data-wf-swap].wf-in { opacity: 0; transform: translateY(-10px); animation: wfIn 0.36s ease forwards; }
@keyframes wfIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
[data-wf-swap], [data-wf-swap].wf-out, [data-wf-swap].wf-in { transition: none; animation: none; opacity: 1; transform: none; }
}
/* "— 01 Plan" eyebrow */
.plan-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--fg-secondary);
margin-bottom: 18px;
}
.plan-eyebrow .dash { width: 28px; height: 2px; background: var(--fg-tertiary); border-radius: 2px; }
/* ── Single segmented stage pill (VLP hero) ──────────────
Idle: one "Line Plan" pill. Hover: grows into one pill
split into three colour bands (Line Plan / Execute / Optimize). */
.stage-pill {
display: inline-flex;
align-items: stretch;
border-radius: var(--radius-full);
overflow: hidden;
cursor: default;
outline: none;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
}
.stage-pill:hover,
.stage-pill:focus-visible {
transform: scale(1.03);
box-shadow: 0 8px 24px rgba(45,49,66,0.25);
}
.sp-seg {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
white-space: nowrap;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: #fff;
padding: 9px 18px;
max-width: 220px;
overflow: hidden;
transition:
max-width 0.5s cubic-bezier(.2,.7,.2,1),
padding 0.45s cubic-bezier(.2,.7,.2,1),
opacity 0.35s ease;
}
.sp-plan { background: linear-gradient(135deg, #c9cce5 0%, #babcda 100%); }
.sp-exec { background: var(--purple-500); }
.sp-opt { background: var(--red-500); }
/* idle: Execute + Optimize collapsed, so only Line Plan shows */
.sp-exec, .sp-opt {
max-width: 0;
padding-left: 0;
padding-right: 0;
opacity: 0;
}
.stage-pill:hover .sp-exec,
.stage-pill:hover .sp-opt,
.stage-pill:focus-visible .sp-exec,
.stage-pill:focus-visible .sp-opt {
max-width: 220px;
padding-left: 18px;
padding-right: 18px;
opacity: 1;
}
/* Interactive stage eyebrow — idle = label, hover = 3-colour pill */
.stage-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
cursor: default;
outline: none;
}
.stage-eyebrow .dash {
width: 28px; height: 2px;
background: var(--fg-tertiary);
border-radius: 2px;
transition: width 0.4s cubic-bezier(.2,.7,.2,1), background-color 0.3s ease;
}
.stage-track {
display: inline-flex;
align-items: center;
border-radius: var(--radius-full);
transition: gap 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.3s ease;
gap: 0;
}
.stage-seg {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
white-space: nowrap;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--fg-secondary);
border-radius: var(--radius-full);
padding: 0;
max-width: 240px;
overflow: hidden;
transition:
max-width 0.45s cubic-bezier(.2,.7,.2,1),
padding 0.4s cubic-bezier(.2,.7,.2,1),
opacity 0.35s ease,
color 0.3s ease,
background-color 0.3s ease,
transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.stage-seg b { font-weight: var(--weight-bold); opacity: 0.55; margin-right: 5px; }
/* idle: only Line Plan shows, as plain label */
.stage-seg.s-exec,
.stage-seg.s-opt {
max-width: 0;
opacity: 0;
transform: translateX(-6px);
}
/* hover / focus: expand into the 3-colour segmented pill */
.stage-eyebrow:hover .dash,
.stage-eyebrow:focus-visible .dash { width: 10px; }
.stage-eyebrow:hover .stage-track,
.stage-eyebrow:focus-visible .stage-track {
gap: 6px;
box-shadow: var(--glass-shadow);
}
.stage-eyebrow:hover .stage-seg,
.stage-eyebrow:focus-visible .stage-seg {
color: #fff;
padding: 8px 16px;
max-width: 240px;
opacity: 1;
transform: none;
}
.stage-eyebrow:hover .stage-seg b,
.stage-eyebrow:focus-visible .stage-seg b { opacity: 0.7; }
.stage-eyebrow:hover .s-plan,
.stage-eyebrow:focus-visible .s-plan { background: var(--purple-300); }
.stage-eyebrow:hover .s-exec,
.stage-eyebrow:focus-visible .s-exec { background: var(--purple-500); }
.stage-eyebrow:hover .s-opt,
.stage-eyebrow:focus-visible .s-opt { background: var(--red-500); }
.hero-grid-plan {
grid-template-columns: 0.95fr 1.05fr;
align-items: center;
gap: 56px;
min-height: 480px;
}
.hero-grid-plan .hero-copy { align-self: center; }
.hero-grid-plan h1 { font-size: 42px; line-height: 1.1; }
.h1-medium { font-weight: var(--weight-medium); }
/* Powered-by-Tracy badge — pinned bottom-left of the hero, fixed across phases */
.hero-tracy-badge {
width: 120px;
max-width: 120px;
height: auto;
display: block;
margin: -5px 0 0 -10px;
}
.hero-tracy-powered {
position: absolute;
left: 48px;
bottom: 36px;
z-index: 3;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
pointer-events: none;
}
.hero-tracy-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--fg-tertiary);
}
.hero-grid-plan .hero-lede {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 22px 0 30px;
}
.hero-cycle {
display: grid;
place-items: center;
position: relative;
width: 100%;
max-width: 460px;
aspect-ratio: 1 / 1;
margin: 0 auto;
}
.cycle-3d {
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
width: 46%;
aspect-ratio: 1 / 1;
pointer-events: none;
z-index: 2;
}
.cycle-3d canvas { width: 100% !important; height: 100% !important; display: block; }
/* Static centre mark (PNG render) — sits in the wheel hub, no overlap.
Uses .cycle-3d.cycle-mark (0,2,0) to outweigh `.hero-cycle img` (0,1,1). */
.cycle-3d.cycle-mark {
width: 35%;
height: 35%;
max-width: 35%;
object-fit: contain;
animation: cycleMarkFloat 5s ease-in-out infinite;
}
@keyframes cycleMarkFloat {
0%, 100% { transform: translate(-50%, calc(-50% - 5px)); }
50% { transform: translate(-50%, calc(-50% + 5px)); }
}
@media (prefers-reduced-motion: reduce) {
.cycle-mark { animation: none; }
}
/* Tracy AI energy ring — thin gradient halo around the WHOLE wheel */
.cycle-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 99%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: conic-gradient(from 0deg,
rgba(237, 22, 66, 0) 0deg,
rgba(108, 93, 211, 0) 90deg,
rgba(108, 93, 211, 0.15) 150deg,
rgba(108, 93, 211, 0.5) 215deg,
rgba(237, 22, 66, 0.6) 260deg,
rgba(139, 90, 214, 0.9) 310deg,
#6C5DD3 342deg,
#ED1642 359deg,
rgba(237, 22, 66, 0) 360deg);
-webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
filter: drop-shadow(0 0 8px rgba(108, 93, 211, 0.55)) drop-shadow(0 0 16px rgba(237, 22, 66, 0.22));
animation: tracy-spin 11s linear infinite;
z-index: 0;
pointer-events: none;
}
/* Tracy AI orb — small, glowing; anchored on the ring's top-left (≈45°),
in percentages relative to the centred ring so it stays put at any size. */
/* Orb sits on a true point of the ring circle (≈137° top-left).
With the container locked square (aspect-ratio:1/1) and the ring
radius = 49.5% of width, these trig-derived percentages pin the orb
to the arc at ANY size: left = 50% − r·cos θ , top = 50% − r·sin θ */
.tracy-orb {
position: absolute;
top: 14%;
left: 14%;
transform: translate(-50%, -50%);
width: 46px !important;
max-width: 46px !important;
height: 46px;
border-radius: 50%;
display: block;
z-index: 4;
}
/* Glowing comet head — rotates in sync with the ring, sits at the bright tip */
.cycle-comet {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 99%;
aspect-ratio: 1 / 1;
border-radius: 50%;
animation: tracy-spin 11s linear infinite;
z-index: 1;
pointer-events: none;
}
.cycle-comet::before {
content: "";
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
box-shadow:
0 0 6px 2px rgba(255, 255, 255, 0.5),
0 0 14px 5px rgba(255, 255, 255, 0.5),
0 0 24px 9px rgba(255, 255, 255, 0.5);
}
@keyframes tracy-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cycle-ring, .cycle-comet { animation: none; } }
.hero-cycle img {
width: 100%;
max-width: 460px;
height: auto;
display: block;
transition: opacity 0.15s ease;
}
/* Centered phase hero */
.hero-centered { text-align: center; }
.hero-centered .hero-inner {
position: relative;
z-index: 2;
max-width: 860px;
margin: 0 auto;
padding: 48px 0 24px;
}
.hero-centered .hero-lede {
color: rgba(255,255,255,0.80);
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
margin: 28px auto 36px;
max-width: 760px;
}
/* ─── Plan: What it covers (tool cards) ─────────────────── */
.plan-section { padding: 56px 0 96px; }
.plan-head { text-align: center; max-width: 740px; margin: 0 auto 56px; }
.plan-head h2 { margin: 12px 0 18px; }
.plan-head p { color: var(--fg-secondary); margin: 0; }
.plan-tools {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.plan-tool {
position: relative;
display: flex;
flex-direction: column;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 36px 32px;
box-shadow: var(--glass-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan-tool:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
.plan-tool.is-new { border-color: var(--glass-border); }
.plan-tool-new {
position: absolute;
top: 18px;
right: 18px;
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%);
color: #fff;
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: 0.02em;
text-transform: none;
}
.plan-tool-num {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
color: var(--red-500);
margin-bottom: 18px;
}
.plan-tool-icon {
width: 90px;
height: 90px;
margin-bottom: 18px;
display: flex;
align-items: center;
}
.plan-tool-icon img {
width: 90px;
height: 90px;
object-fit: contain;
display: block;
}
.plan-tool h3 { font-size: var(--text-xl); font-weight: var(--weight-bold); margin: 0 0 14px; }
.plan-tool h3 .tool-med { font-weight: var(--weight-medium); }
.plan-tool p { color: var(--fg-secondary); margin: 0 0 24px; flex: 1; line-height: var(--leading-relaxed); }
.plan-tool-link {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 0;
align-self: flex-start;
padding: 11px 20px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, #dadff2 0%, #cbcee8 100%);
border: none;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: #fff;
text-shadow: 1px 1px 1px #9fa3c4;
text-decoration: none;
}
.plan-tool-link::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, #b7bcdb 0%, #a7abcd 100%);
opacity: 0;
transition: opacity 0.2s ease;
}
.plan-tool-link:hover::before { opacity: 1; }
.plan-tool-link svg {
width: 0;
opacity: 0;
overflow: hidden;
margin-left: 0;
transition: width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease, transform 0.2s ease;
}
.plan-tool-link:hover svg { width: 14px; opacity: 1; margin-left: 7px; transform: translateX(2px); }
/* ─── What's included — full-cycle capability overview ──── */
.wf-overview { padding: 64px 0 96px; }
.wf-ov-head { text-align: center; max-width: 740px; margin: 0 auto 48px; }
.wf-ov-head h2 { margin: 12px 0 0; }
.wf-ov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wf-ov-col {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 30px 30px 34px;
box-shadow: var(--glass-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wf-ov-col:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
.wf-ov-colhead { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--border-default); }
.wf-ov-num {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 32px; padding: 0 12px;
border-radius: var(--radius-full);
font-size: var(--text-sm); font-weight: var(--weight-bold); color: #fff;
letter-spacing: var(--tracking-wide);
}
.wf-ov-col.pp-plan .wf-ov-num { background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%); color: #fff; text-shadow: 1px 1px 1px #a9acc7; }
.wf-ov-col.pp-exec .wf-ov-num { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); }
.wf-ov-col.pp-opt .wf-ov-num { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); }
.wf-ov-phase { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--fg-primary); }
.wf-ov-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.wf-ov-caps li { display: flex; align-items: center; gap: 13px; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-primary); }
.wf-ov-caps li img { width: 46px; height: 46px; object-fit: contain; display: block; flex-shrink: 0; }
.wf-ov-new { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: #fff; background: var(--red-500); border-radius: var(--radius-full); padding: 2px 8px; }
@media (max-width: 900px) { .wf-ov-grid { grid-template-columns: 1fr; } }
/* ─── Plan → Execute transition ─────────────────────────── */
.connect { padding: 0 0 104px; }
.connect-card {
position: relative;
overflow: hidden;
display: grid; /* groups stack in one cell; box sizes to the tallest */
text-align: center;
max-width: none;
margin: 0 auto;
padding: 72px 64px;
border-radius: var(--radius-xl);
background:
radial-gradient(700px 360px at 18% 12%, rgba(108,93,211,0.14), transparent 60%),
radial-gradient(680px 380px at 88% 96%, rgba(237,22,66,0.08), transparent 60%),
linear-gradient(165deg, #f7f7fb 0%, #dcdce8 60%, #ddddea 100%);
border: 1px solid rgba(255,255,255,0.7);
box-shadow: var(--glass-shadow-lg);
}
.connect-card h2 { margin: 14px 0 18px; max-width: 720px; margin-left: auto; margin-right: auto; }
.connect-card p {
color: var(--fg-secondary);
max-width: 680px;
margin: 0 auto;
line-height: var(--leading-relaxed);
}
.connect-card .hero-next { margin: 0 auto; }
/* Three phase groups stacked in the same grid cell; only one is visible and the
whole group (pill + title + body) crossfades to the next. Box never animates. */
.connect-group { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.connect-group.is-active { opacity: 1; pointer-events: auto; }
/* Connect transition pills (Plan → Execute) */
.connect-pills {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-bottom: 4px;
}
.connect-pill {
display: inline-flex;
align-items: center;
padding: 7px 18px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: #fff;
text-shadow: 1px 1px 1px rgba(110,90,150,0.45);
}
.cp-plan {
background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%);
text-shadow: 1px 1px 1px #a9acc7;
}
.cp-execute { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); }
.cp-optimize { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); }
.connect-pill-arrow { color: var(--fg-tertiary); }
/* ─── Go-To-Market Architecture module ─────────────────── */
.gtm { padding: 24px 0 96px; }
.gtm-head {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 36px;
}
.gtm-head h2 {
font-size: var(--text-3xl);
font-weight: var(--weight-medium);
margin: 0;
}
.gtm-head h2 b { font-weight: var(--weight-bold); }
.gtm-tracy { width: 132px; height: auto; display: block; }
/* Top stage chevrons */
.gtm-stages {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
margin-bottom: 28px;
position: relative;
}
.gtm-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 76px;
padding: 16px 20px;
background: #e8ebf5;
border: 1px solid #c6cce0;
border-radius: var(--radius-md);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--fg-primary);
line-height: var(--leading-snug);
}
.gtm-stage:first-child { border-radius: var(--radius-md); }
/* ============================================================
Flow arrows — independent floating glass connectors.
Horizontal (white frost + outline) and vertical (#c9cce5).
backdrop-filter + clip-path + animation all on ONE element
so an opacity-animating ancestor can't kill the blur.
============================================================ */
.flow-arrow-h, .flow-arrow-v {
position: absolute;
z-index: 5;
pointer-events: none;
top: 50%;
}
.flow-arrow-h {
width: 63px; height: 50px;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(7px) saturate(150%);
-webkit-backdrop-filter: blur(7px) saturate(150%);
filter:
drop-shadow(1px 0 0 rgba(255,255,255,0.9))
drop-shadow(-1px 0 0 rgba(255,255,255,0.9))
drop-shadow(0 1px 0 rgba(255,255,255,0.9))
drop-shadow(0 -1px 0 rgba(255,255,255,0.9));
clip-path: polygon(5% 31.25%, 50% 31.25%, 50% 10.4%, 95% 50%, 50% 89.6%, 50% 68.75%, 5% 68.75%);
animation: flow-x 1.8s ease-in-out infinite;
}
.flow-arrow-v {
width: 50px; height: 40px;
transform: translate(-50%, -50%) rotate(90deg);
background: rgba(70, 78, 118, 0.55);
backdrop-filter: blur(7px) saturate(150%);
-webkit-backdrop-filter: blur(7px) saturate(150%);
clip-path: polygon(5% 24%, 50% 24%, 50% 10.4%, 95% 50%, 50% 89.6%, 50% 76%, 5% 76%);
animation: flow-y 1.8s ease-in-out infinite;
}
@keyframes flow-x {
0% { transform: translate(-50%, -50%) translateX(-6px); opacity: 0; }
25% { opacity: 1; }
70% { transform: translate(-50%, -50%) translateX(10px); opacity: 1; }
100% { transform: translate(-50%, -50%) translateX(16px); opacity: 0; }
}
@keyframes flow-y {
0% { transform: translate(-50%, -50%) rotate(90deg) translateX(-6px); opacity: 0; }
25% { opacity: 1; }
70% { transform: translate(-50%, -50%) rotate(90deg) translateX(10px); opacity: 1; }
100% { transform: translate(-50%, -50%) rotate(90deg) translateX(16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.flow-arrow-h, .flow-arrow-v { animation: none; opacity: 1; }
}
/* Main panel */
.gtm-panel {
position: relative;
background: #ffffff;
border: none;
border-radius: var(--radius-xl);
padding: 48px 24px 24px;
box-shadow: 2px 2px 5px rgba(45, 49, 66, 0.12), 0 4px 14px rgba(45, 49, 66, 0.06);
}
.gtm-panel-logo {
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 26px;
background: #fff;
border-radius: var(--radius-full);
}
.gtm-panel-logo img { height: 30px; width: auto; display: block; }
.gtm-matrix {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 10px;
}
/* Vertical flow arrows — drop down from the BOTTOM edge of the stage boxes */
.gtm-arr-v { top: auto; bottom: -50px; z-index: 7; }
/* Enterprise glass twin — sits over the red block, 2% to the right (below the label) */
.gtm-enterprise-glass {
pointer-events: none;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(3px) saturate(150%);
-webkit-backdrop-filter: blur(3px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
transform: translateX(2%);
z-index: 3;
}
/* Enterprise label overlay — text on top of fill + glass */
.gtm-enterprise-label {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
pointer-events: none;
z-index: 5;
color: #fff;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
}
/* Horizontal arrow on the Enterprise → box seam, sitting left of the box (clear of text) */
.gtm-layer { position: relative; }
.gtm-arr-seam { left: -34px; top: 50%; z-index: 30; }
/* Vertical arrows (out of stage boxes) — light-purple fill, visible on the panel */
.gtm-arr-v {
background: rgba(201, 204, 229, 0.9);
filter: drop-shadow(0 2px 4px rgba(108, 93, 211, 0.30));
}
/* Horizontal seam arrows — glass: frosted, see-through, blurred backdrop */
.gtm-arr-seam {
background: rgba(201, 204, 229, 0.22);
backdrop-filter: blur(6px) saturate(150%);
-webkit-backdrop-filter: blur(6px) saturate(150%);
filter:
drop-shadow(1px 0 0 rgba(255,255,255,0.85))
drop-shadow(-1px 0 0 rgba(255,255,255,0.85))
drop-shadow(0 2px 4px rgba(108,93,211,0.20));
}
.gtm-pos-ent { grid-column: 1; grid-row: 1 / 3; }
.gtm-pos-browse { grid-column: 2 / 5; grid-row: 1; z-index: 25; }
.gtm-pos-white { grid-column: 2 / 5; grid-row: 2; z-index: 25; }
.gtm-pos-camp { grid-column: 3 / 5; grid-row: 3; }
.gtm-pos-merch { grid-column: 3 / 5; grid-row: 4; }
.gtm-pos-orders { grid-column: 3; grid-row: 5; }
.gtm-pos-forecast { grid-column: 4; grid-row: 5; }
.gtm-enterprise {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 32px 20px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #ED1642 0%, #C4102F 100%);
color: #fff;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
}
.gtm-layer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 14px 18px;
background: #e8ebf5;
border: 1px solid #c6cce0;
border-radius: var(--radius-md);
}
.gtm-layer p { margin: 0; font-size: var(--text-base); color: var(--fg-primary); }
.gtm-layer p strong { font-weight: var(--weight-semibold); }
.gtm-layer p span { color: var(--fg-secondary); font-style: italic; }
/* Chips */
.gtm-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
display: inline-flex;
align-items: center;
padding: 4px 11px;
border-radius: var(--radius-full);
font-size: 10px;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
}
.gtm-logo {
height: 24px;
width: auto;
max-width: 84px;
object-fit: contain;
display: block;
}
/* Full-width bars — red shape + offset glass twin, hexagon (pointed) ends */
.gtm-bar-wrap {
position: relative;
height: 54px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.gtm-bar-shape,
.gtm-bar-glass {
position: absolute;
inset: 0;
clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
}
.gtm-bar-shape { transform: translateX(0); }
.gtm-bar-glass {
inset: 0 -1% 0 1%;
transform: none;
background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
border: 1px solid rgba(255,255,255,0.5);
}
.gtm-bar-text {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 14px;
color: #fff;
text-align: center;
font-size: var(--text-base);
font-weight: var(--weight-medium);
}
.gtm-bar-text strong { font-weight: var(--weight-bold); }
.gtm-bar-dunes { background: linear-gradient(90deg, #ED1642 0%, #d6336c 100%); }
.gtm-bar-tracy { background: linear-gradient(90deg, #C4102F 0%, #6C5DD3 100%); }
.gtm-bar-analytics { background: linear-gradient(90deg, #d6336c 0%, #ED1642 100%); }
.gtm-bar-baricon { height: 30px; width: 30px; object-fit: contain; filter: brightness(0) invert(1); }
.gtm-bar-tracylogo { height: 30px; width: auto; background: #fff; border-radius: var(--radius-full); padding: 4px 10px; }
.gtm-bar-tracygif { height: 34px; width: 34px; border-radius: 50%; object-fit: cover; }
@media (max-width: 860px) {
.gtm-stages { grid-template-columns: 1fr 1fr; }
.gtm-matrix { grid-template-columns: 1fr; }
.gtm-pos-ent,
.gtm-pos-browse,
.gtm-pos-white,
.gtm-pos-camp,
.gtm-pos-merch,
.gtm-pos-orders,
.gtm-pos-forecast { grid-column: 1; grid-row: auto; }
.gtm-enterprise { padding: 22px 20px; }
}
/* Hero visual placeholder (right side) */
.hero-visual {
position: relative;
height: 460px;
border-radius: var(--radius-lg);
background: #ffffff;
border: 1px solid var(--glass-border);
overflow: hidden;
box-shadow: var(--glass-shadow-lg);
}
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 16px;
opacity: 0;
animation: heroFade 12s ease-in-out infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 4s; }
.hero-slide:nth-child(3) { animation-delay: 8s; }
.hero-lottie {
position: absolute;
inset: 24px;
display: grid;
place-items: center;
}
.hero-lottie svg { width: 100% !important; height: 100% !important; }
.hero-appnav {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* Per-role media placeholder (showcase) */
.role-placeholder {
width: 100%;
height: 100%;
min-height: 300px;
border-radius: var(--radius-lg);
border: 1px dashed rgba(255,255,255,0.28);
background: rgba(255,255,255,0.06);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: rgba(255,255,255,0.7);
text-align: center;
padding: 24px;
}
.role-ph-icon {
width: 54px; height: 54px;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.12);
font-size: 18px;
}
.role-ph-label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: 20px;
}
/* Hero next-module breadcrumb (top) */
.hero-context {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
color: var(--fg-secondary);
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
.hero-context .crumbs span + span::before {
content: "·";
margin: 0 10px;
color: var(--fg-tertiary);
}
.hero-context .next-link {
color: var(--fg-primary);
font-weight: var(--weight-semibold);
display: inline-flex; gap: 8px; align-items: center;
text-decoration: none;
}
.hero-context .next-link:hover { color: var(--fg-accent); }
/* ─── Trust Bar ─────────────────────────────────────────── */
.trust {
padding: 64px 0 48px;
}
.trust-inner {
display: grid;
grid-template-columns: 220px 1fr;
gap: 48px;
align-items: center;
}
.trust-label {
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--fg-secondary);
line-height: var(--leading-snug);
}
.trust-logos {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
min-height: 56px;
}
.trust-logo {
flex: 1;
min-height: 56px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.trust-logo img {
height: 30px; /* default; overridden per-logo via Tweaks */
max-width: 150px;
width: auto;
object-fit: contain;
display: block;
opacity: 0.72;
transition: opacity 150ms ease-out;
}
.trust-logo:hover img { opacity: 1; }
/* Brand logo hover — fade to brand red (#e0193f) */
.trust-logo .logo-wrap { position: relative; display: inline-flex; line-height: 0; }
.trust-logo .logo-wrap img { transition: opacity 0.35s ease; }
.trust-logo .logo-tint {
position: absolute;
inset: 0;
background: #e0193f;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.trust-logo.has-tint:hover img { opacity: 0; }
.trust-logo.has-tint:hover .logo-tint { opacity: 1; }
/* Per-logo sizes live in css/tweaks-saved.css (managed by the Tweaks → Save button) */
/* ─── Feature Grid ──────────────────────────────────────── */
.features {
padding: 56px 0 96px;
}
.features-head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 48px; gap: 48px;
}
.features-head h2 {
margin: 12px 0 0;
max-width: 640px;
}
.features-head p {
max-width: 420px;
color: var(--fg-secondary);
margin: 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 32px 28px;
box-shadow: var(--glass-shadow);
transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow: var(--glass-shadow-lg);
}
.feature-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
color: #8267af;
display: grid; place-items: center;
margin-bottom: 24px;
--sx: 0px; --sy: 11px;
box-shadow:
var(--sx) var(--sy) 25px 0px rgb(136 119 220 / 15%),
inset 0 1px 2px rgba(255, 255, 255, 0.15),
inset 0 7px 6px rgba(178, 182, 214, 0.28);
transition: box-shadow 0.14s ease-out, transform 0.2s ease-out;
will-change: box-shadow;
}
.feature-card:hover .feature-icon { transform: translateY(-1px); }
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
letter-spacing: 0;
text-transform: none;
color: var(--neutral-900);
margin: 0 0 12px;
}
.feature-card p {
font-size: var(--text-base);
color: var(--fg-secondary);
margin: 0;
line-height: var(--leading-relaxed);
}
/* ─── Stats Bar ─────────────────────────────────────────── */
.stats {
margin: 0 auto;
width: calc(100% - 48px);
max-width: 1360px;
padding: 0;
background: none;
border: none;
border-radius: 0;
position: relative;
overflow: visible;
box-shadow: none;
}
.stats::before { display: none; }
.stats-head {
position: relative; z-index: 1;
text-align: center;
margin-bottom: 40px;
}
.stats-head h2 {
color: var(--black);
margin: 16px 0 0;
font-size: var(--text-3xl);
}
.stats-head .section-label {
background: none;
border: none;
color: var(--red-500);
}
.stats-card {
position: relative;
z-index: 1;
background: transparent;
border: none;
border-top: 1px solid var(--border-default);
border-radius: 0;
padding: 32px 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
box-shadow: none;
}
.stat-item {
display: flex;
gap: 20px;
align-items: center;
padding: 0 16px;
border-right: 1px solid var(--border-default);
}
.stat-item:last-child { border-right: none; }
.stat-num {
font-size: 56px;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
color: var(--red-500);
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 2px;
white-space: nowrap;
}
.stat-unit {
font-size: 22px;
font-weight: var(--weight-semibold);
letter-spacing: 0;
color: var(--red-500);
}
.stats-footnote {
position: relative;
z-index: 1;
margin-top: 24px;
text-align: center;
font-size: var(--text-xs);
color: var(--fg-tertiary);
letter-spacing: var(--tracking-wide);
}
.tm-rights-note {
margin-top: 16px;
font-size: var(--text-xs);
color: var(--fg-tertiary);
font-style: italic;
letter-spacing: var(--tracking-wide);
}
.form-fineprint {
color: rgba(255,255,255,0.55);
font-size: var(--text-sm);
max-width: 300px;
line-height: var(--leading-snug);
}
.crumbs-label {
color: var(--fg-tertiary);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
}
.crumbs-label + span::before { display: none !important; }
.stat-body {
display: flex; flex-direction: column; gap: 4px;
}
.stat-label {
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--fg-primary);
line-height: var(--leading-snug);
}
.stat-sub {
font-size: var(--text-sm);
color: var(--fg-secondary);
line-height: var(--leading-snug);
}
/* Stats — three compact cards */
.stats-grid {
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.stats-section { padding: 96px 0; }
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
position: relative;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: 32px 32px 28px;
text-align: center;
}
.stat-card .stat-num {
font-size: 48px;
font-weight: var(--weight-semibold);
color: var(--red-500);
margin-bottom: 8px;
transition: text-shadow 0.4s ease, filter 0.4s ease;
}
.stat-card:hover .stat-num {
text-shadow: 0 0 18px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.85);
filter: brightness(1.12);
}
.stat-card .stat-unit {
font-size: 24px;
color: var(--red-500);
}
.stat-card .stat-label {
font-size: var(--text-md);
font-weight: var(--weight-regular);
color: var(--fg-secondary);
}
/* Stats rotator — one stat at a time */
.stats-rotator { position: relative; z-index: 1; }
.stats-stage { position: relative; min-height: 190px; }
.stat-slide {
position: absolute; inset: 0;
display: flex; flex-direction: row; align-items: center; justify-content: center;
text-align: left; gap: 36px;
opacity: 0; transform: translateY(16px);
transition: opacity 0.55s ease, transform 0.55s ease;
pointer-events: none;
}
.stat-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.stat-slide .stat-num { font-size: 92px; justify-content: center; flex-shrink: 0; }
.stat-slide .stat-unit { font-size: 36px; }
.stat-slide .stat-body { align-items: flex-start; gap: 6px; max-width: 380px; }
.stat-slide .stat-label { font-size: var(--text-xl); }
.stat-slide .stat-sub { font-size: var(--text-md); }
.stats-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.st-dot {
position: relative; height: 6px; width: 18px;
padding: 0; border: none; cursor: pointer;
border-radius: 999px; overflow: hidden;
background: var(--neutral-300);
transition: width 0.35s ease, background 0.35s ease;
}
.st-dot.active { width: 44px; background: rgba(237,22,66,0.22); }
.st-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red-500); border-radius: 999px; }
.st-dot.active .st-fill { animation: stfill 4s linear forwards; }
@keyframes stfill { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
.stats-stage { min-height: 0; }
.stat-slide { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 36px; }
.stats-dots { display: none; }
}
/* ─── How It Works ─────────────────────────────────────── */
.how {
padding: 120px 0 96px;
}
.how-head { text-align: center; margin-bottom: 56px; }
.how-head h2 { margin: 12px 0 16px; }
.how-head p {
color: var(--fg-secondary);
max-width: 580px;
margin: 0 auto;
}
.how-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}
.how-steps::before {
content: "";
position: absolute;
top: 24px;
left: calc(100% / 8);
right: calc(100% / 8);
height: 1px;
background: repeating-linear-gradient(90deg, var(--neutral-300) 0 6px, transparent 6px 12px);
z-index: 0;
}
.how-step { position: relative; z-index: 1; padding: 0 24px; text-align: center; }
.how-step-num {
width: 48px; height: 48px; border-radius: 50%;
background: var(--white);
border: 1px solid var(--border-default);
display: grid; place-items: center;
margin: 0 auto 20px;
font-weight: var(--weight-semibold);
color: var(--red-500);
font-size: var(--text-md);
box-shadow: var(--glass-shadow);
}
.how-step h4 {
font-size: var(--text-lg);
margin: 0 0 8px;
}
.how-step p {
font-size: var(--text-sm);
color: var(--fg-secondary);
margin: 0;
line-height: var(--leading-relaxed);
}
/* ─── Use Cases by Role ────────────────────────────────── */
.roles {
padding: 24px 0 96px;
}
.roles-head {
text-align: center;
margin-bottom: 40px;
}
.roles-head h2 { margin: 12px 0 0; }
.roles-tabs {
display: flex; justify-content: center; gap: 8px;
margin-bottom: 32px;
}
.role-tab {
padding: 10px 20px;
border-radius: var(--radius-full);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--fg-secondary);
cursor: pointer;
}
.role-tab.active {
background: var(--neutral-900);
color: var(--fg-inverse);
border-color: var(--neutral-900);
}
.roles-card {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 56px;
box-shadow: var(--glass-shadow-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.roles-content h3 { margin: 16px 0 16px; }
.roles-content p {
color: var(--fg-secondary);
margin: 0 0 24px;
}
.roles-bullets {
list-style: none; padding: 0; margin: 0 0 32px;
display: flex; flex-direction: column; gap: 12px;
}
.roles-bullets li {
display: flex; gap: 12px; align-items: flex-start;
font-size: var(--text-base);
color: var(--fg-primary);
}
.roles-bullets li::before {
content: "";
width: 18px; height: 18px; border-radius: 50%;
background: var(--red-50); color: var(--red-500);
flex-shrink: 0; margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.roles-visual {
height: 380px;
border-radius: var(--radius-lg);
background: var(--neutral-50);
border: 1px dashed var(--border-strong);
display: grid; place-items: center;
color: var(--fg-tertiary);
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
/* ─── Built For (tabbed showcase) ───────────────────────── */
.showcase {
padding: 88px 0 96px;
}
.showcase-head { text-align: center; margin-bottom: 40px; }
.showcase-head h2 { margin: 12px 0 0; }
.showcase-tabs {
display: flex; justify-content: center; gap: 0;
margin-bottom: 32px;
border-bottom: 1px solid var(--border-default);
}
.showcase-tab {
padding: 16px 28px;
background: transparent;
border: none;
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--fg-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.25s ease, border-color 0.25s ease;
}
.showcase-tab:hover { color: var(--fg-primary); }
.showcase-tab.active {
color: var(--fg-primary);
border-bottom-color: var(--red-500);
}
.showcase-card[hidden] { display: none; }
.showcase-card {
animation: roleSwitch 0.5s cubic-bezier(.2,.7,.2,1) both;
}
.showcase-card .showcase-content > * { animation: roleRise 0.5s cubic-bezier(.2,.7,.2,1) both; }
.showcase-card .showcase-content > *:nth-child(1) { animation-delay: 0.04s; }
.showcase-card .showcase-content > *:nth-child(2) { animation-delay: 0.10s; }
.showcase-card .showcase-content > *:nth-child(3) { animation-delay: 0.16s; }
.showcase-card .showcase-content > *:nth-child(4) { animation-delay: 0.22s; }
.showcase-card .showcase-callout { animation: roleCallout 0.55s cubic-bezier(.2,.7,.2,1) both; animation-delay: 0.12s; }
@keyframes roleSwitch {
from { opacity: 0; transform: translateY(14px) scale(0.992); }
to { opacity: 1; transform: none; }
}
@keyframes roleRise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
@keyframes roleCallout {
from { opacity: 0; transform: translateX(16px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.showcase-card,
.showcase-card .showcase-content > *,
.showcase-card .showcase-callout { animation: none !important; }
}
.showcase-card {
position: relative;
background: var(--white);
border: 1px solid var(--glass-border-soft);
border-radius: var(--radius-xl);
padding: 56px;
color: var(--fg-primary);
min-height: 380px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
overflow: hidden;
box-shadow: var(--glass-shadow-lg);
}
.showcase-card::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 85% 15%, rgba(108,93,211,0.10), transparent 45%),
radial-gradient(circle at 15% 90%, rgba(237,22,66,0.06), transparent 40%);
pointer-events: none;
}
.showcase-content { position: relative; z-index: 1; }
/* Per-role statement (right column) */
.showcase-statement { position: relative; z-index: 1; }
.showcase-statement p {
color: var(--fg-secondary);
margin: 0;
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
}
/* "Learn more" buttons — red, chevron reveals on hover */
.btn-learn { gap: 0; }
.btn-light {
position: relative;
overflow: hidden;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
color: var(--fg-primary);
box-shadow: var(--glass-shadow);
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-light:hover {
background: var(--glass-bg-strong);
box-shadow: var(--glass-shadow-lg);
}
.btn-learn .learn-chev {
width: 0;
opacity: 0;
overflow: hidden;
margin-left: 0;
transition: width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
}
.btn-learn:hover .learn-chev,
.btn-learn:focus-visible .learn-chev {
width: 15px;
opacity: 1;
margin-left: 7px;
}
/* Arrow-on-hover for all primary CTA buttons site-wide (chevron reveals on hover).
margin-left:-8px cancels the flex `gap` while the chevron is collapsed. */
.btn-primary::after {
content: "";
width: 0; height: 13px; opacity: 0;
margin-left: -8px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
flex-shrink: 0;
transition: width 0.25s ease, opacity 0.25s ease, margin-left 0.25s ease;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after {
width: 13px; opacity: 1; margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
.btn-primary::after { transition: opacity 0.2s ease; }
}
/* Role media (GIF) — replaces the red callout */
.showcase-media {
position: relative; z-index: 1;
align-self: stretch;
min-height: 360px;
border-radius: var(--radius-lg);
overflow: hidden;
background: #fff;
border: 1px solid var(--glass-border-soft);
box-shadow: 0 14px 44px rgba(45,49,66,0.16);
animation: roleCallout 0.55s cubic-bezier(.2,.7,.2,1) both;
animation-delay: 0.12s;
}
.showcase-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
display: block;
}
@media (prefers-reduced-motion: reduce) {
.showcase-media { animation: none !important; }
}
.showcase-content h3 {
color: var(--fg-primary);
margin: 0;
}
.showcase-content p {
color: var(--fg-secondary);
margin: 0 0 32px;
max-width: 460px;
}
.showcase-callout {
position: relative; z-index: 1;
align-self: center;
background: var(--red-500);
color: var(--fg-inverse);
border-radius: var(--radius-md);
padding: 28px;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
max-width: 360px;
box-shadow: 0 12px 40px rgba(237,22,66,0.35);
}
.showcase-callout .callout-eyebrow {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 8px;
}
/* ─── Integrations strip ────────────────────────────────── */
.integrations {
padding: 64px 0 96px;
}
body[data-page="workflow"] .integrations { padding-bottom: 48px; }
.integrations-title {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 0;
margin-bottom: 18px;
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--fg-primary);
}
.integrations-blurb {
max-width: 760px;
margin: 0 auto 36px;
text-align: center;
color: var(--fg-secondary);
line-height: var(--leading-relaxed);
}
.integrations-title-icon {
height: 32px;
width: auto;
display: block;
}
.integrations-card {
background: var(--glass-bg-subtle);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
box-shadow: var(--glass-shadow-lg);
overflow: hidden;
}
.integration-cell {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 36px 22px;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.integration-cell:hover {
background: var(--white);
box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 8px 30px rgba(108,93,211,0.28), 0 0 40px rgba(237,22,66,0.10);
transform: translateY(-3px);
border-radius: var(--radius-lg);
z-index: 2;
}
.integration-cell .int-logo {
height: 38px;
max-width: 120px;
width: auto;
object-fit: contain;
display: block;
}
.integration-cell .int-desc {
margin: 0;
font-size: var(--text-sm);
color: var(--fg-secondary);
line-height: var(--leading-snug);
}
/* ─── Customer Quote / Case Study ───────────────────────── */
.testimonial {
padding: 0 0 96px;
}
.testimonial-row {
display: block;
}
.tm-arrow {
width: 56px; height: 56px; border-radius: 50%;
background: var(--neutral-900); color: var(--white);
display: grid; place-items: center; cursor: pointer;
border: none;
justify-self: center;
transition: background 0.2s ease, transform 0.2s ease;
}
.tm-arrow:hover { background: var(--neutral-700); }
.testimonial-card {
display: grid;
grid-template-columns: 380px 1fr;
gap: 56px;
align-items: stretch;
}
.tm-image {
position: relative;
min-height: 420px;
border-radius: var(--radius-lg);
background-color: var(--purple-200);
background-size: cover;
background-position: center;
overflow: hidden;
display: flex; align-items: end; padding: 24px;
}
.tm-image .img-placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
color: rgba(255,255,255,0.7);
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.tm-image-overlay {
position: relative;
background: rgba(15,15,15,0.55);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-radius: var(--radius-md);
padding: 16px 18px;
color: var(--white);
width: 100%;
}
.tm-image-overlay .tag {
font-size: var(--text-xs); font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
opacity: 0.8; margin-bottom: 6px;
}
.tm-image-overlay h4 {
color: var(--white);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
margin: 0 0 10px;
}
.tm-image-overlay .read-more {
font-size: var(--text-xs); font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
color: rgba(255,255,255,0.9);
}
.tm-quote {
display: flex; flex-direction: column;
justify-content: center;
}
.tm-quote blockquote {
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--fg-primary);
margin: 0 0 24px;
font-weight: var(--weight-medium);
}
.tm-attribution {
font-size: var(--text-sm);
color: var(--fg-secondary);
}
.tm-attribution strong {
color: var(--fg-primary);
font-weight: var(--weight-semibold);
display: block;
margin-bottom: 2px;
}
.cta-banner-wrap {
padding-bottom: 96px;
}
/* ─── CTA Banner ───────────────────────────────────────── */
.cta-banner {
margin: 0 auto;
width: calc(100% - 48px);
max-width: 1360px;
background: var(--red-500);
color: var(--fg-inverse);
border: none;
border-radius: var(--radius-xl);
padding: 64px;
position: relative;
overflow: hidden;
box-shadow: 0 12px 40px rgba(237,22,66,0.25);
}
.cta-banner::before { display: none; }
.cta-banner-inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
}
.cta-banner h2 {
color: var(--fg-inverse);
font-size: var(--text-3xl);
margin: 0;
max-width: 640px;
}
.cta-h2-medium { font-weight: var(--weight-medium); }
.cta-h2-medium strong { font-weight: var(--weight-bold); }
.cta-banner-actions {
display: flex; justify-content: end; align-items: center; gap: 16px;
}
.cta-banner .btn-primary {
background: var(--white);
color: var(--red-500);
}
.cta-banner .btn-primary:hover {
background: var(--neutral-50);
color: var(--red-600);
}
/* ─── FAQ ──────────────────────────────────────────────── */
.faq { padding: 96px 0; }
.faq-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 48px; }
.faq-head h2 { margin: 12px 0 0; }
.faq-head p { color: var(--fg-secondary); margin: 0; }
.faq-list {
display: flex; flex-direction: column; gap: 12px;
}
.faq-item {
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 24px 28px;
cursor: pointer;
}
.faq-item summary {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--fg-primary);
list-style: none;
cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-size: 24px;
font-weight: var(--weight-light);
color: var(--fg-secondary);
transition: transform 200ms ease-out;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
color: var(--fg-secondary);
margin: 16px 0 0;
font-size: var(--text-base);
line-height: var(--leading-relaxed);
}
/* ─── Footer + Form ────────────────────────────────────── */
.footer {
background: var(--black);
color: var(--fg-inverse);
padding: 96px 0 0;
position: relative;
overflow: hidden;
border-top: none;
}
.footer::before { display: none; }
/* Global site footer — red background, all-white logo */
.site-footer { background: var(--red-500); }
.site-footer .footer-brand img { height: 80px; margin-top: -22px; }
.site-footer .footer-meta { border-top-color: rgba(255,255,255,0.22); }
.footer-form-section {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
padding-bottom: 96px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-form-section h2 {
color: var(--fg-inverse);
font-size: var(--text-4xl);
margin: 0 0 16px;
}
.footer-form-section p {
color: rgba(255,255,255,0.65);
max-width: 380px;
margin: 0;
}
.footer-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.footer-form .field-wide { grid-column: span 2; }
.footer-form input,
.footer-form select,
.footer-form textarea {
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.18);
color: var(--fg-inverse);
border-radius: var(--radius-sm);
padding: 14px 16px;
font-family: var(--font-sans);
font-size: var(--text-base);
outline: none;
}
.footer-form input::placeholder,
.footer-form textarea::placeholder { color: rgba(255,255,255,0.4); }
.footer-form input:focus,
.footer-form select:focus,
.footer-form textarea:focus {
border-color: var(--red-500);
background: rgba(255,255,255,0.10);
box-shadow: 0 0 0 3px rgba(237,22,66,0.15);
}
.footer-form select { appearance: none; cursor: pointer; }
.footer-form .field-group { display: flex; flex-direction: column; }
.form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: 8px; color: rgba(255,255,255,0.7); }
.footer-demo .form-label { color: var(--fg-secondary); }
.footer-form textarea { min-height: 96px; resize: vertical; }
.footer-form .submit-row {
grid-column: span 2;
display: flex; justify-content: space-between; align-items: center;
margin-top: 8px;
}
.footer-form .checkbox-row {
grid-column: span 2;
display: flex; gap: 12px; align-items: flex-start;
color: rgba(255,255,255,0.55);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
.footer-form .checkbox-row input { width: auto; margin-top: 4px; }
.footer-form .submit {
background: var(--red-500);
color: var(--white);
border: none;
padding: 16px 32px;
border-radius: var(--radius-full);
font-weight: var(--weight-semibold);
font-size: var(--text-base);
cursor: pointer;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
white-space: nowrap;
transition: background 0.2s ease, opacity 0.2s ease;
}
.footer-form .submit:hover { background: var(--red-600); }
.footer-form .submit:disabled { opacity: 0.6; cursor: default; }
/* Consent line + submit feedback states (API-wired forms) */
.footer-demo .footer-form .checkbox-row { color: var(--fg-secondary); }
.footer-form .form-status {
grid-column: span 2;
margin: 4px 0 0;
color: var(--red-500);
font-size: var(--text-sm);
}
.form-success h3 {
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
color: var(--fg-primary);
letter-spacing: var(--tracking-tight);
margin: 0 0 8px;
}
.form-success p { color: var(--fg-secondary); margin: 0; font-size: var(--text-lg); }
/* ─── Demo form — floating translucent card on a light gradient ─── */
.footer-demo {
background:
radial-gradient(900px 520px at 10% 6%, rgba(108,93,211,0.18), transparent 60%),
radial-gradient(820px 540px at 94% 96%, rgba(237,22,66,0.10), transparent 60%),
linear-gradient(165deg, #f7f7fb 0%, #dcdce8 55%, #ddddea 100%);
padding: 112px 0;
overflow: visible;
}
.footer-demo .footer-form-section {
border-bottom: none;
padding: 56px;
gap: 56px;
align-items: center;
border-radius: var(--radius-xl);
background: rgba(255,255,255,0.55);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid rgba(255,255,255,0.70);
box-shadow: 0 30px 80px rgba(45,49,66,0.16), inset 0 1px 0 rgba(255,255,255,0.6);
}
.footer-demo .footer-form-section h2 { color: var(--fg-primary); font-size: 40px; line-height: 1.1; font-weight: var(--weight-medium); }
.footer-demo .footer-form-section h2 strong { font-weight: var(--weight-bold); }
.footer-demo .footer-form-section p { color: var(--fg-secondary); }
.footer-demo .footer-form input,
.footer-demo .footer-form select,
.footer-demo .footer-form textarea {
background: rgba(255,255,255,0.65);
border: 1px solid var(--border-default);
color: var(--fg-primary);
}
.footer-demo .footer-form input::placeholder,
.footer-demo .footer-form textarea::placeholder { color: var(--fg-tertiary); }
.footer-demo .footer-form input:focus,
.footer-demo .footer-form select:focus,
.footer-demo .footer-form textarea:focus {
border-color: var(--red-500);
background: #fff;
box-shadow: 0 0 0 3px rgba(237,22,66,0.14);
}
.footer-demo .form-fineprint { color: var(--fg-secondary); }
.footer-bottom {
position: relative; z-index: 1;
padding: 48px 0;
display: grid;
grid-template-columns: 280px 1fr;
gap: 80px;
align-items: start;
}
.footer-brand img { height: 28px; }
.footer-tagline {
color: #fff;
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: 1.15;
letter-spacing: var(--tracking-tight);
margin: 10px 0 16px;
}
.footer-brand p {
color: #ffffff;
font-size: 14px;
margin: 16px 0 0;
line-height: var(--leading-relaxed);
}
.footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.footer-col h6 {
color: #ffffff;
font-size: 18px;
font-weight: var(--weight-semibold);
letter-spacing: 0;
text-transform: none;
margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col li a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
transition: opacity 0.2s ease;
}
.footer-col li a:hover { opacity: 0.75; }
.footer-col li a:hover { color: var(--white); }
.footer-meta {
border-top: 1px solid rgba(255,255,255,0.22);
padding: 24px 0;
display: flex; justify-content: center; align-items: center;
color: #ffffff;
font-size: var(--text-sm);
}
/* utility */
.muted { color: var(--fg-secondary); }
.placeholder-text {
font-style: italic;
opacity: 0.7;
}
/* ─── Role eyebrow (on white showcase card) ─────────────── */
.role-eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--fg-secondary);
margin-bottom: 14px;
}
/* ─── Case-study quote column refinements ──────────────── */
.tm-headline {
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
margin: 0 0 20px;
line-height: var(--leading-snug);
text-wrap: pretty;
}
.tm-body {
font-size: var(--text-md);
color: var(--fg-secondary);
line-height: var(--leading-relaxed);
margin: 0 0 28px;
max-width: 640px;
}
/* ════════════════════════════════════════════════════════════════
GO-TO-MARKET ARCHITECTURE — finalized module (overrides base .gtm)
════════════════════════════════════════════════════════════════ */
/* Sequenced reveal (story order via data-seq) */
.gtm-seq-stage {
opacity: 0;
transform: translateX(-18px);
transition: opacity .5s ease, transform .5s ease;
}
.gtm-seq-stage.is-in { opacity: 1; transform: none; }
.gtm-seq-arrow { visibility: hidden; transition: opacity 0.35s ease; }
.gtm-seq-arrow.is-in { visibility: visible; }
.gtm-seq-arrow.flow-arrow-h { animation: flow-x 1.8s ease-in-out 1; animation-play-state: paused; }
.gtm-seq-arrow.flow-arrow-v { animation: flow-y 1.8s ease-in-out 1; animation-play-state: paused; }
.gtm-seq-arrow.is-in.flow-arrow-h,
.gtm-seq-arrow.is-in.flow-arrow-v { animation-play-state: running; }
.gtm-seq-arrow.is-rerun.flow-arrow-h { animation: flow-x-rerun 0.95s ease-out 1 !important; animation-play-state: running !important; }
.gtm-seq-arrow.is-rerun.flow-arrow-v { animation: flow-y-rerun 0.95s ease-out 1 !important; animation-play-state: running !important; }
@keyframes flow-x-rerun {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
18% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
60% { transform: translate(-50%, -50%) translateX(12px) scale(1.05); opacity: 1; }
100% { transform: translate(-50%, -50%) translateX(22px) scale(1); opacity: 0; }
}
@keyframes flow-y-rerun {
0% { transform: translate(-50%, -50%) rotate(90deg) scale(1); opacity: 1; }
18% { transform: translate(-50%, -50%) rotate(90deg) scale(1.12); opacity: 1; }
60% { transform: translate(-50%, -50%) rotate(90deg) translateX(12px) scale(1.05); opacity: 1; }
100% { transform: translate(-50%, -50%) rotate(90deg) translateX(22px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.gtm-seq-stage { opacity: 1; transform: none; transition: none; }
.gtm-seq-arrow { visibility: visible; animation-play-state: running; }
}
/* Process label divider */
.gtm-process-line {
display: flex; align-items: center; gap: 18px;
margin: 0 0 20px;
color: var(--neutral-400);
font-size: 11px; font-weight: 600;
letter-spacing: .24em; text-transform: uppercase;
}
.gtm-process-line::before,
.gtm-process-line::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, #cdd2e2 50%, transparent);
}
/* Platform "window": white container reads as entering the product */
.gtm-panel { padding: 0; overflow: hidden; position: relative; }
.gtm-panel-header {
position: relative;
display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 18px;
background: transparent;
z-index: 1;
}
.gtm-panel-header img { height: 45px; width: auto; display: block; }
.gtm-panel-header::before {
content: ""; position: absolute; top: -18px; left: 50%;
width: 220px; height: 60px; transform: translateX(-50%);
background: radial-gradient(60% 100% at 50% 0%, rgba(108,93,211,0.14), transparent 70%);
pointer-events: none;
}
.gtm-panel-body { padding: 5px 24px 24px; position: relative; z-index: 1; }
.gtm-panel::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(90deg,
#eef0f7 0 25%, #e7e6f3 25% 50%, #ddd9ef 50% 75%, #d3cdea 75% 100%);
opacity: .75;
}
/* Top phase stages: no border, soft gradient (light-gray → purple) */
.gtm-stages .gtm-stage { border: none; background: none; }
.gtm-stages .gtm-stage:nth-child(1) { background: linear-gradient(155deg, #f3f4f9 0%, #e6e8f1 100%); }
.gtm-stages .gtm-stage:nth-child(2) { background: linear-gradient(155deg, #ecebf6 0%, #dcd9ef 100%); }
.gtm-stages .gtm-stage:nth-child(3) { background: linear-gradient(155deg, #e5e1f2 0%, #d0caea 100%); }
.gtm-stages .gtm-stage:nth-child(4) { background: linear-gradient(155deg, #ddd6ef 0%, #c5bce4 100%); }
/* Finer matrix grid so T1 Campaigns can start at 75% of Concept */
.gtm-matrix { grid-template-columns: repeat(16, 1fr); }
.gtm-pos-ent { grid-column: 1 / 5; grid-row: 1 / 3; }
.gtm-pos-browse { grid-column: 5 / 17; grid-row: 1; z-index: 25; }
.gtm-pos-white { grid-column: 5 / 17; grid-row: 2; z-index: 25; }
.gtm-pos-camp { grid-column: 8 / 17; grid-row: 3; }
.gtm-pos-merch { grid-column: 9 / 17; grid-row: 4; }
.gtm-layer.gtm-pos-camp, .gtm-layer.gtm-pos-merch, .gtm-layer.gtm-pos-orders, .gtm-layer.gtm-pos-forecast { justify-content: flex-start; }
.gtm-pos-orders { grid-column: 9 / 13; grid-row: 5; }
.gtm-pos-forecast { grid-column: 13 / 17; grid-row: 5; }
/* Browse/Whiteboard box look + semi-transparent module fills */
.gtm-layer-box {
display: flex; align-items: center; justify-content: flex-start;
gap: 8px; flex-wrap: nowrap;
padding: 8px 16px;
background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.8); border-radius: var(--radius-md);
backdrop-filter: blur(3px);
box-sizing: border-box; position: relative;
}
.gtm-pos-camp, .gtm-pos-merch, .gtm-pos-orders, .gtm-pos-forecast {
background: rgba(255,255,255,0.62) !important;
border-color: rgba(255,255,255,0.8) !important;
backdrop-filter: blur(3px);
}
.gtm-arr-seam {
background: rgba(70,78,118,0.55) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
left: -34px; top: 50%; z-index: 30;
}
.flow-arrow-h, .flow-arrow-v { background: #ffffff0a !important; }
.flow-arrow-v, .flow-arrow-v.gtm-arr-v { background: rgba(70,78,118,0.55) !important; }
.flow-arrow-h.gtm-arr-seam { background: rgba(70,78,118,0.55) !important; }
.gtm-layer-box p { margin: 0; font-size: var(--text-base); color: var(--fg-primary); }
.gtm-layer-box p strong { font-weight: var(--weight-semibold); }
.gtm-layer-box p span { color: var(--fg-secondary); font-style: italic; }
.gtm-box-icon { width: 45px; height: 45px; object-fit: contain; flex-shrink: 0; }
.gtm-layer { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 8px 16px; }
/* 2nd-block reveal: panel background + logo fade */
.gtm-seq-panel {
opacity: 0; transform: translateY(-8px) scale(.992);
transition: opacity .55s ease, transform .55s ease;
}
.gtm-seq-panel.is-in { opacity: 1; transform: none; }
.gtm-seq-fade { opacity: 0; transition: opacity .5s ease; }
.gtm-seq-fade.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.gtm-seq-panel, .gtm-seq-fade { opacity: 1; transform: none; transition: none; }
}
.gtm-bar-glass {
inset: 0 -1% 0 1%;
transform: none;
background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(255,255,255,0.08));
border: 1px solid rgba(255,255,255,0.5);
}
/* Arrow appearance — tuned via the GTM workbench tweak panel */
.gtm-stages .flow-arrow-h:not(.gtm-arr-seam) {
background: rgba(255,255,255,0.49) !important;
backdrop-filter: blur(7.5px) !important;
-webkit-backdrop-filter: blur(7.5px) !important;
filter: none !important;
}
.gtm-stages .flow-arrow-v.gtm-arr-v {
background: rgba(245,117,140,0.51) !important;
backdrop-filter: blur(13px) !important;
-webkit-backdrop-filter: blur(13px) !important;
filter: none !important;
}
.gtm-matrix .flow-arrow-h.gtm-arr-seam {
background: rgba(185,65,65,0.55) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
filter: drop-shadow(0 0 14px #6c5dd3) !important;
}
/* ── Home: stat context + hero + scroll wheel ───────────── */
.stat-card .stat-context { margin: 14px 0 0; font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-snug); }
.hero-home { text-align: left; background: linear-gradient(105deg, rgba(247,247,251,0.92) 0%, rgba(247,247,251,0.62) 42%, rgba(247,247,251,0.15) 100%), url('../assets/img/hero-home-bg.jpg') center right / cover no-repeat, #eef0f7; }
.hero-home-inner { position: relative; z-index: 2; max-width: 720px; margin: 0; padding: 72px 0 56px; }
.hero-home h1 { margin: 18px 0 16px; max-width: 660px; }
.hero-home-sub { font-size: var(--text-lg); color: var(--fg-secondary); margin: 0 0 32px; }
.hero-home-lede { max-width: 640px; margin: 44px 0 0; color: var(--fg-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); }
/* ── Home wheel: Apple-style pinned scroll ─────────────── */
/* height trimmed from 420vh now the words scene is its own module — the old
value left a long stretch of empty/dead scroll before & between scenes. */
.wheelscroll { position: relative; height: 300vh; }
/* Subtle hairline divider between full-bleed white home sections */
.home-divider {
width: min(1120px, 88vw);
height: 1px;
margin: 0 auto;
background: linear-gradient(90deg, transparent, var(--glass-border) 16%, var(--glass-border) 84%, transparent);
}
/* Scroll cue — "keep scrolling" hint during the wheel statement scene */
.ws-scrollcue {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%) translateY(10px);
display: flex; flex-direction: column; align-items: center; gap: 9px;
opacity: 0;
pointer-events: none;
z-index: 6;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.ws-scrollcue.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ws-scrollcue-label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--fg-tertiary, #9aa0b4);
}
.ws-scrollcue-track {
width: 26px; height: 42px;
border: 1.5px solid var(--glass-border);
border-radius: var(--radius-full);
display: flex; align-items: flex-start; justify-content: center;
padding-top: 6px;
color: var(--red-500);
}
.ws-scrollcue-track svg { width: 16px; height: 16px; animation: wsScrollNudge 1.5s ease-in-out infinite; }
@keyframes wsScrollNudge {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ws-scrollcue-track svg { animation: none; }
}
.wheelscroll-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Scene 1 — big word reveal */
.ws-words { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; pointer-events: none; transition: opacity 0.3s ease; }
.ws-word { font-size: clamp(48px, 8.5vw, 120px); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 0.96; color: var(--fg-primary); will-change: transform, opacity, filter; }
.ws-word.is-focus { color: var(--red-500); }
/* Per-stage scattered objects (varied depth/size/distance) */
.ws-stage-objects { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ws-obj {
position: absolute;
height: auto;
opacity: 0;
transform: translateY(30px) scale(0.9);
transition: opacity 0.6s ease, transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.6s ease;
will-change: transform, opacity;
}
.ws-obj.is-on { opacity: 1; }
.ws-obj { filter: blur(3px); }
/* Per-word floating object — appears when its word is in focus, alternating sides */
.ws-word { position: relative; }
.ws-word-obj {
position: absolute;
top: 50%;
width: 240px;
height: auto;
opacity: 0;
filter: blur(3px);
pointer-events: none;
z-index: 0;
transition: opacity 0.5s ease, transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.5s ease;
}
.ws-word-obj.wo-right { left: 100%; transform: translate(10px, -50%) scale(0.82); }
.ws-word-obj.wo-left { right: 100%; transform: translate(-10px, -50%) scale(0.82); }
.ws-word.is-focus .ws-word-obj { opacity: 0.5; filter: blur(2.5px); }
.ws-word.is-focus .ws-word-obj.wo-right { transform: translate(40px, -50%) scale(1); }
.ws-word.is-focus .ws-word-obj.wo-left { transform: translate(-40px, -50%) scale(1); }
/* Vary the vertical anchor per word so they don't all sit centred */
.ws-word:nth-child(1) .ws-word-obj { top: 6%; }
.ws-word:nth-child(2) .ws-word-obj { top: 86%; }
.ws-word:nth-child(3) .ws-word-obj { top: 84%; }
.ws-word:nth-child(4) .ws-word-obj { top: 8%; }
/* Wheel apparatus — centre by default, slides left for stages */
.ws-wheelwrap { position: absolute; top: 50%; left: 50%; width: min(46vw, 460px, 56vh); transform: translate(-50%, -50%) scale(0.86); opacity: 0; transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
.ws-wheelwrap.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ws-wheelwrap.is-left { left: 27%; top: 50%; transform: translate(-50%, -50%) scale(0.92); }
.ws-wheelwrap.is-stmt { top: 56%; }
/* scale the cloud DOWN in the statement scene so the top pills pull toward
centre (away from the high-positioned copy) instead of crowding it */
.ws-modcloud.is-stmt { transform: translateY(5%) scale(0.84); }
@media (max-width: 900px) { .ws-wheelwrap.is-left { left: 50%; top: 38%; } }
/* Short viewports: shrink the whole statement constellation so the wheel,
the orbiting module chips, and the "Why Trasix?" copy never collide. */
@media (max-height: 880px) {
.ws-wheelwrap.is-stmt { top: 60%; }
.ws-modcloud.is-stmt { transform: translateY(12%) scale(0.70); }
.ws-statement { top: 10%; }
}
@media (max-height: 740px) {
.ws-wheelwrap.is-stmt { top: 64%; }
.ws-modcloud.is-stmt { transform: translateY(19%) scale(0.56); }
.ws-statement { top: 7%; }
}
/* Scene 2 — statement */
/* Scene 2 — statement (sits ABOVE the wheel) */
.ws-statement { position: absolute; left: 50%; top: 15%; transform: translateX(-50%) translateY(-20px); width: min(760px, 86vw); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.6s ease, transform 0.6s ease; z-index: 5; }
.ws-statement.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ws-statement h2 { margin: 0 0 14px; }
.ws-why { color: var(--fg-primary); font-weight: var(--weight-bold); }
.ws-why .ws-what { font-weight: var(--weight-medium); }
.ws-statement p { color: var(--fg-secondary); font-size: var(--text-lg); margin: 0; }
.ws-statement strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* Scene 3 — per-stage copy on the right */
.ws-stages { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: min(40vw, 460px); display: grid; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.ws-stages.is-visible { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .ws-stages { right: 50%; transform: translate(50%,-50%); top: 70%; text-align: center; width: 86vw; } }
.ws-panel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity 0.55s ease; pointer-events: none; }
.ws-panel .ws-num { align-self: flex-start; }
.ws-mods { margin-top: 26px; }
.ws-mods-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 12px; }
.ws-mod-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-mod-list li { display: flex; align-items: center; gap: 11px; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-primary); }
.ws-mod-list li img { width: 50px; height: 50px; object-fit: contain; display: block; }
.ws-mod-new { font-size: 9px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: #fff; background: var(--red-500); border-radius: var(--radius-full); padding: 2px 8px; }
.ws-integrates { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border-default); font-size: var(--text-sm); color: var(--fg-secondary); }
.ws-int-label { color: var(--fg-secondary); margin-right: 2px; }
.ws-int-icon { height: 22px; width: auto; object-fit: contain; display: block; }
.ws-int-logo { height: 22px; width: auto; max-width: 64px; object-fit: contain; display: block; }
.ws-integrates strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
.ws-panel.is-active { opacity: 1; pointer-events: auto; }
.ws-num { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.ws-num b { font-weight: var(--weight-bold); }
.ws-panel.pp-plan .ws-num { background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%); color: #fff; text-shadow: 1px 1px 1px #a9acc7; }
.ws-panel.pp-plan .ws-num b { color: #b4b6cb; text-shadow: none; }
.ws-panel.pp-exec .ws-num { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); }
.ws-panel.pp-opt .ws-num { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); }
.ws-panel h3 { font-size: var(--text-2xl); margin: 0 0 12px; font-weight: var(--weight-medium); }
.ws-panel h3 b { font-weight: var(--weight-bold); }
.ws-panel p { color: var(--fg-secondary); margin: 0; font-size: var(--text-md); }
@media (prefers-reduced-motion: reduce) {
.wheelscroll { height: auto; }
.wheelscroll-stage { position: static; height: auto; flex-direction: column; padding: 80px 0; gap: 40px; }
.ws-words { position: static; flex-direction: row; flex-wrap: wrap; gap: 16px; }
.ws-word { font-size: 56px; opacity: 1 !important; filter: none !important; transform: none !important; }
.ws-wheelwrap { position: static; transform: none; opacity: 1; }
.ws-statement { position: static; transform: none; opacity: 1; }
.ws-stages { position: static; transform: none; opacity: 1; width: auto; }
.ws-panel { position: relative; opacity: 1; transform: none; margin-bottom: 28px; }
}
/* Home intro statement band */
.home-intro { padding: 96px 0 32px; }
.home-intro-head {
max-width: 1000px;
margin: 0 auto 24px;
text-align: center;
font-size: clamp(27px, 4.4vw, 48px);
font-weight: var(--weight-medium);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-primary);
}
.home-intro-head .intro-brand { color: var(--red-500); font-weight: var(--weight-bold); }
.home-intro-head strong { font-weight: var(--weight-bold); }
.brand { font-weight: var(--weight-bold); }
.home-intro-sub {
max-width: 820px;
margin: 0 auto;
text-align: center;
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--fg-secondary);
}
/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
/* (cursor glow removed) */
.home-intro-lede {
max-width: 920px;
margin: 0 auto;
text-align: center;
font-size: var(--text-2xl);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
color: var(--fg-secondary);
}
.home-intro-lede strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* ── Home testimonials ─────────────────────────────────── */
.tmls { padding: 96px 0; position: relative; }
/* Slightly different surface so the glass cards read as a distinct band */
.tmls::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(120% 90% at 85% 0%, rgba(237,22,66,0.06) 0%, rgba(237,22,66,0) 55%),
linear-gradient(180deg, #f6f4f9 0%, #efedf4 100%);
border-top: 1px solid var(--border-default);
border-bottom: 1px solid var(--border-default);
}
.tmls-head { text-align: center; margin-bottom: 48px; }
.tmls-head h2 { margin: 12px 0 0; }
.tmls-metrics { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 32px; }
.tmls-metric { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tmls-metric-num { font-size: 48px; font-weight: var(--weight-bold); color: var(--red-500); line-height: 1; letter-spacing: var(--tracking-tight); }
.tmls-plus { font-size: 28px; vertical-align: super; }
.tmls-metric-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-secondary); }
.tmls-metric-sep { width: 1px; height: 52px; background: var(--border-default); }
.tmls-cert { display: inline-flex; align-items: center; gap: 9px; margin: 26px auto 0; padding: 9px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: rgba(255,255,255,0.55); backdrop-filter: blur(6px); color: var(--fg-secondary); font-size: var(--text-sm); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.tmls-cert:hover { border-color: var(--red-500); color: var(--fg-primary); }
/* stats-only variant (e.g. workflow page): no head spacing reserved for a grid */
.tmls-statsonly .tmls-head { margin-bottom: 0; }
.tmls-cert-icon { color: var(--red-500); flex-shrink: 0; }
.tmls-cert strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* ── Quotes block: header + horizontal carousel ─────────── */
.tmls-quotes-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.tmls-quotes-head h3 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.tmls-quotes-head p { margin: 12px 0 0; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg-secondary); }
.tmls-carousel { position: relative; display: flex; align-items: center; gap: 14px; }
.tmls-track {
display: flex; gap: 22px; flex: 1;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
padding: 6px 4px 18px; margin: -6px -4px -18px;
scrollbar-width: none;
}
.tmls-track::-webkit-scrollbar { display: none; }
.tml-card {
margin: 0; display: flex; flex-direction: column; gap: 20px;
flex: 0 0 clamp(280px, 32%, 360px); scroll-snap-align: start;
padding: 32px 30px;
background: var(--glass-bg-strong);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--glass-shadow);
}
.tml-card blockquote {
margin: 0; flex: 1;
font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--fg-primary);
position: relative;
}
.tml-card blockquote::before { content: "\201C"; color: var(--red-500); font-weight: var(--weight-bold); }
.tml-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.tml-name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.tml-org { font-size: var(--text-sm); color: var(--fg-secondary); }
.tmls-nav {
flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full); border: 1px solid var(--border-default);
background: rgba(255,255,255,0.75); backdrop-filter: blur(6px); color: var(--fg-primary);
cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.tmls-nav:hover { background: var(--red-500); border-color: var(--red-500); color: #fff; }
.tmls-nav:disabled { opacity: 0.35; cursor: default; }
.tmls-nav:disabled:hover { background: rgba(255,255,255,0.75); border-color: var(--border-default); color: var(--fg-primary); }
@media (max-width: 900px) {
.tml-card { flex-basis: 80%; }
.tmls-nav { display: none; }
.tmls-track { scroll-snap-type: x proximity; }
}
/* ════════════════════════════════════════════════════════════════
GTM Architecture — wheel-matched colour-coding + platform framing
════════════════════════════════════════════════════════════════ */
/* Trasix reads as its own dedicated platform window, not part of the graph */
.gtm-panel {
border: 1.5px solid rgba(70,78,118,0.20);
border-radius: var(--radius-lg);
box-shadow: 0 26px 64px rgba(40,44,80,0.16), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Line Plan + Execute capsules — white glass (NOT purple) */
.gtm-grp-plan,
.gtm-grp-exec {
background: rgba(255,255,255,0.62) !important;
border: 1px solid rgba(255,255,255,0.8) !important;
}
/* Enterprise Line Planning rail — brand red, white text */
.gtm-enterprise {
background: linear-gradient(135deg, #ED1642 0%, #C4102F 100%) !important;
}
.gtm-enterprise-label { color: #fff !important; }
/* (Optimize group = the red bottom bars, already in the brand-red family) */
/* ════════════════════════════════════════════════════════════════
MOBILE / RESPONSIVE — structural pass (nav, footer, base safety)
Wheel/animation mobile treatment handled separately (deferred).
════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) { .page { overflow-x: clip; } }
/* ── Hamburger button ─────────────────────────────────────── */
.nav-burger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; padding: 0; margin: 0;
border: none; background: transparent; cursor: pointer; border-radius: var(--radius-md);
}
.nav-burger span {
display: block; width: 22px; height: 2px; margin: 0 auto;
background: var(--fg-primary); border-radius: 2px;
transition: transform .22s ease, opacity .22s ease;
}
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 880px) {
.nav-inner { flex-wrap: wrap; }
.nav-logo { order: 1; }
.nav-burger { display: inline-flex; order: 2; margin-left: auto; }
.nav-links, .nav-cta { order: 3; flex-basis: 100%; }
.nav-links { display: none; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; }
.nav-cta { display: none; margin-top: 8px; }
.nav.is-open .nav-links { display: flex; }
.nav.is-open .nav-cta { display: flex; }
/* Open menu: drop the pill radius (otherwise the tall open bar reads as a
rounded blob) and use a solid fill so the hero's decorative glow can't
show through the frosted glass behind the links. */
.nav.is-open .nav-inner {
border-radius: var(--radius-lg);
background: #fff;
}
.nav-links > a, .nav-item > a { width: 100%; padding: 12px 14px; border-radius: var(--radius-md); }
.nav-links > a:hover, .nav-item > a:hover { background: var(--glass-bg); }
.nav-cta .btn { width: 100%; justify-content: center; }
/* Solutions: hover dropdown -> tap accordion */
.nav-item { width: 100%; flex-direction: column; align-items: stretch; position: static; }
.nav-item > a { justify-content: space-between; }
.nav-item.is-expanded .nav-caret { transform: rotate(180deg); }
.nav-mega, .nav-mega-3 {
position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
display: none; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 2px 0 6px 12px;
background: transparent; border: none; box-shadow: none;
}
.nav-item.is-expanded .nav-mega, .nav-item.is-expanded .nav-mega-3 { display: grid; }
.nav-mega-col { border: none !important; padding: 0 !important; }
.nav-mega-col a { padding: 10px 12px; white-space: normal; }
}
/* ── Footer (stacks on small screens) ─────────────────────── */
@media (max-width: 860px) {
.footer-form-section { grid-template-columns: 1fr; gap: 32px; padding-bottom: 56px; }
.footer-form-section h2 { font-size: var(--text-3xl); }
.footer-demo { padding: 64px 0; }
.footer-demo .footer-form-section { padding: 32px; gap: 28px; }
.footer-bottom { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
.footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 520px) {
.footer-form { grid-template-columns: 1fr; }
.footer-form .field-wide, .footer-form .submit-row, .footer-form .checkbox-row { grid-column: span 1; }
.footer-form .submit-row { flex-direction: column; align-items: stretch; gap: 14px; }
.footer-form .submit { width: 100%; }
}
/* ════════════════════════════════════════════════════════════════
HOME HERO + general text centering on mobile
════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
/* Hero copy centers and the CTAs stack full-width, one above the other */
.hero-home { text-align: center; }
.hero-home-inner { margin: 0 auto; }
.hero-home h1, .hero-home-sub, .hero-home-lede { margin-left: auto; margin-right: auto; }
.hero-cta-row { flex-direction: column; align-items: stretch; justify-content: center; }
.hero-cta-row .btn { width: 100%; justify-content: center; }
/* Less side spacing so hero content (and the GIF) isn't squeezed thin.
The big 80px desktop padding left ~180px of usable width on a phone.
Applies to every .hero — home + solutions sub-pages (~95% width). */
.hero { width: calc(100% - 22px); padding: 30px 16px 38px; min-height: 0; }
/* Solution sub-page GIF: full width, fully visible. The desktop rule pins
it absolute with object-fit:cover inside a fixed 460px frame → cropped.
Let the frame size to the GIF and show it whole. */
.hero-visual { height: auto; }
.hero-appnav { position: static; width: 100%; height: auto; object-fit: contain; display: block; }
/* Simple content heroes (e.g. /demo-request/) — center the text */
.content-hero .container { text-align: center; }
.content-hero .content-lede { margin-left: auto; margin-right: auto; }
}
/* Testimonials: swipe affordance (the prev/next arrows are hidden on mobile) */
.tmls-hint { display: none; }
@media (max-width: 900px) {
.tmls-hint {
display: block; text-align: center; margin: 18px 0 0;
font-size: var(--text-sm); font-weight: var(--weight-medium);
color: var(--fg-secondary); letter-spacing: 0.02em;
}
}
/* ── Base mobile safety: hide decorative scatter ── */
@media (max-width: 880px) {
.bg-crystals, .ws-stage-objects, .ws-word-obj, .ws-modcloud { display: none !important; }
body { overflow-x: clip; }
.ws-words { display: none !important; }
}
/* ════════════════════════════════════════════════════════════════
WHEEL — mobile treatment.
The desktop section is a 300vh pinned-scroll animation (js/home.js).
On a phone that pin leaves dead space above the wheel and overlaps the
stage copy (01/02/03) on top of it. home.js bails out below 900px, so
here we unpin it and lay the scene out as a normal vertical stack:
wheel → "What is Trasix" → the three stages, each in full.
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.wheelscroll { height: auto; }
.wheelscroll-stage {
position: static; height: auto; overflow: visible;
flex-direction: column; align-items: center;
padding: 0 0 16px; gap: 36px; /* no top padding — kills the dead space */
}
.ws-wheelwrap {
/* relative (not static) so the absolutely-positioned logo/orb/ring inside
still anchor to the wheel, not to the whole section / page.
left/top reset is essential: the desktop rule pins left:50%/top:50% and
recenters with a -50% translate. We kill the translate here, so without
resetting the offsets the wheel slides ~half its width off-screen right. */
position: relative; left: auto; top: auto;
transform: none !important; opacity: 1 !important;
margin: 0 auto; width: min(74vw, 320px);
}
.ws-statement {
position: static; transform: none !important; opacity: 1 !important;
top: auto; left: auto; width: 100%; pointer-events: auto;
}
.ws-stages {
position: static; transform: none !important; opacity: 1 !important;
top: auto; right: auto; width: 100%;
display: flex; flex-direction: column; gap: 32px; text-align: center;
}
/* Phase copy (01/02/03) becomes a tabbed "pill cloud": a row of pills is
injected before .ws-stages by js/includes.js, and only the chosen panel
shows — mirroring the by-role showcase. */
.ws-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto; }
.ws-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; font-family: var(--font-sans);
font-size: var(--text-sm); font-weight: var(--weight-semibold);
color: var(--fg-primary); background: #fff; line-height: 1; cursor: pointer;
border: 1px solid var(--border-default); border-radius: var(--radius-full);
}
.ws-pill b { font-weight: var(--weight-bold); }
/* Active pill takes its phase identity colour (matching the .ws-num badges):
01 Line Plan = light lavender, 02 Execute = purple, 03 Optimize = red. */
.ws-pill.active { color: #fff; border-color: var(--red-500); background: var(--red-500); }
.ws-pill.pp-plan.active { background: linear-gradient(135deg, #e6e9f8 0%, #babcda 100%); border-color: #b4b6cb; color: #5c5f7e; }
.ws-pill.pp-exec.active { background: linear-gradient(135deg, #9f81c9 0%, #8f6fbc 100%); border-color: #8f6fbc; color: #fff; }
.ws-pill.pp-opt.active { background: linear-gradient(135deg, #ec4463 0%, #e41b43 100%); border-color: #e41b43; color: #fff; }
.ws-panel {
position: relative; grid-area: auto;
opacity: 1 !important; transform: none !important; pointer-events: auto;
margin: 0; align-items: center;
display: none; /* tabbed: only the active panel shows */
}
.ws-panel.is-active { display: flex; }
.ws-panel .ws-num { display: none; } /* the pill carries the 01/02/03 label */
.ws-mods, .ws-mod-list { align-items: center; }
.ws-mod-list { display: inline-flex; flex-direction: column; gap: 10px; text-align: left; }
.ws-integrates { justify-content: center; flex-wrap: wrap; }
}
/* ════════════════════════════════════════════════════════════════
03 · WORD REVEAL (heading + focus-in word + ranked bg objects)
Driven by js/word-reveal.js
════════════════════════════════════════════════════════════════ */
.wr {
position: relative;
width: 100%;
min-height: 40vh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: clamp(18px, 3.2vw, 40px);
overflow: hidden;
text-align: center;
padding: 28px 24px 0;
box-sizing: border-box;
}
.wr-head {
position: relative; z-index: 3;
margin: 0;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-tight);
line-height: 1.08;
color: var(--fg-primary);
font-size: clamp(26px, 4vw, 44px);
max-width: 16ch;
}
.wr-stage {
position: relative; z-index: 3;
height: clamp(70px, 11vw, 150px);
display: flex; align-items: center; justify-content: center;
width: 100%;
}
.wr-word {
position: absolute;
left: 50%; top: 50%;
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: 1;
font-size: clamp(56px, 11vw, 150px);
color: var(--red-500);
white-space: pre;
/* comes into focus: starts blurred + smaller, resolves to sharp + full */
opacity: 0;
filter: blur(16px);
transform: translate(-50%, -50%) scale(.6);
will-change: opacity, transform, filter;
transition: opacity .55s ease, transform .8s cubic-bezier(.2,.7,.3,1), filter .8s ease;
}
.wr-word.is-in { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1); }
.wr-word.is-out { opacity: 0; transition: opacity .5s ease; }
/* background object layer */
.wr-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wr-obj { position: absolute; transform: translate(-50%, -50%); } /* placement (center-anchored) */
.wr-obj img {
display: block;
width: 100%;
opacity: 0;
filter: blur(calc(var(--blur, 0px) + 7px));
transform: scale(.72);
will-change: opacity, transform, filter;
transition: opacity .65s ease, transform .9s cubic-bezier(.2,.7,.3,1), filter .85s ease;
}
.wr-obj.is-in img { opacity: var(--op, .9); filter: blur(var(--blur, 0px)); transform: scale(1); }
.wr-obj.is-out img { opacity: 0; transform: scale(1.04); }
@media (max-width: 768px) {
.wr {
min-height: auto;
padding: 48px 20px;
gap: clamp(16px, 3vw, 28px);
}
.wr-head {
font-size: clamp(22px, 4.8vw, 30px);
max-width: 13ch;
}
.wr-stage {
height: clamp(58px, 11vw, 105px);
}
.wr-word {
font-size: clamp(44px, 9.6vw, 100px);
}
/* keep the floating background objects (David wants them visible on mobile);
.wr clips overflow so they can't widen the page. */
}
@media (prefers-reduced-motion: reduce) {
.wr-word, .wr-word.is-in, .wr-word.is-out { transform: translate(-50%,-50%); filter: none; transition: opacity .3s ease; }
.wr-obj img, .wr-obj.is-in img, .wr-obj.is-out img { transform: none; transition: opacity .3s ease; }
}
/* ════════════════════════════════════════════════════════════════
SOLUTIONS PAGE
════════════════════════════════════════════════════════════════ */
.sol-hero {
position: relative;
padding: 72px 0 56px;
text-align: center;
}
.sol-hero .container { max-width: min(1080px, calc(100% - 64px)); }
.sol-tracy-badge {
display: inline-flex;
margin: 0 auto 28px;
}
.sol-tracy-badge img { height: 46px; width: auto; display: block; filter: drop-shadow(0 10px 26px rgba(120,40,160,0.22)); }
/* "Powered by Tracy AI" pill (animated gif orb) — hero badge */
.sol-tracy-pill {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 auto 30px;
padding: 6px 22px 6px 8px;
border-radius: var(--radius-full);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur-lg);
-webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-lg);
text-decoration: none;
white-space: nowrap;
}
.sol-tracy-pill img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.sol-tracy-pill span { font-size: var(--text-base); color: var(--fg-secondary); letter-spacing: var(--tracking-wide); }
.sol-tracy-pill strong { color: #000; font-weight: var(--weight-bold); }
.sol-hero h1 {
margin: 0 auto;
max-width: 24ch;
font-size: clamp(34px, 4vw, 45px);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: 1.12;
color: var(--fg-primary);
text-wrap: balance;
}
.sol-hero h1 .sol-h1-soft { font-weight: var(--weight-medium); color: var(--fg-secondary); }
.sol-hero-lede {
margin: 26px auto 0;
max-width: 64ch;
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--fg-secondary);
text-wrap: pretty;
}
.sol-hero-lede strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
.sol-hero-cta { margin-top: 34px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
/* Systems diagram — "sits between these systems" */
.sol-systems { padding: 8px 0 88px; }
.sol-systems-card {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
padding: 56px clamp(20px, 4vw, 64px) 60px;
background:
radial-gradient(900px 420px at 50% -10%, rgba(120,127,205,0.10), transparent 60%),
radial-gradient(700px 380px at 88% 120%, rgba(237,22,66,0.05), transparent 60%),
linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
border: 1px solid var(--glass-border);
box-shadow: 0 26px 64px rgba(40,44,80,0.10);
}
.sol-systems-logo { display: flex; justify-content: center; margin-bottom: 22px; }
.sol-systems-logo img { height: 38px; width: auto; display: block; }
.sol-systems-head {
text-align: center;
margin: 0 auto 44px;
max-width: 35ch;
font-size: clamp(22px, 3vw, 32px);
font-weight: var(--weight-medium);
line-height: 1.2;
color: var(--fg-primary);
}
.sol-systems-head strong { font-weight: var(--weight-bold); }
.sol-systems-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
align-items: start;
}
.sol-sys-col {
position: relative;
padding-top: 26px;
display: flex;
flex-direction: column;
align-items: center;
}
.sol-sys-pill {
position: absolute;
top: 0;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 22px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
color: #fff;
box-shadow: 0 8px 20px rgba(40,44,80,0.18);
}
.sol-sys-pill.is-plm { background: linear-gradient(135deg, #ED1642 0%, #C4102F 100%); }
.sol-sys-pill.is-erp { background: linear-gradient(135deg, #8a90a0 0%, #5b6273 100%); }
.sol-sys-pill.is-commerce { background: linear-gradient(135deg, #c7cbf0 0%, #a4aae0 100%); color: #fff; }
.sol-sys-pill.is-partners { background: linear-gradient(135deg, #a98fd6 0%, #8f6fbc 100%); }
.sol-sys-pill.is-pim { background: linear-gradient(135deg, #4aa9ec 0%, #2f7fd4 100%); }
.sol-sys-body {
width: 100%;
min-height: 132px;
padding: 34px 16px 20px;
border-radius: var(--radius-lg);
background: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.85);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 28px rgba(40,44,80,0.06);
text-align: center;
}
.sol-sys-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.sol-sys-list li {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--fg-primary);
}
.sol-sys-list li::before {
content: "";
width: 13px; height: 13px;
border-radius: 4px;
background: linear-gradient(135deg, #d7dae8 0%, #c2c6da 100%);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.7);
flex-shrink: 0;
}
.sol-sys-col.is-edge .sol-sys-body { background: rgba(247,248,251,0.7); }
.sol-sys-note { font-size: var(--text-base); color: var(--fg-secondary); line-height: 1.4; }
@media (max-width: 900px) {
.sol-systems-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
.sol-sys-col.is-pim { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.sol-systems-grid { grid-template-columns: 1fr; }
.sol-sys-col.is-pim { grid-column: auto; }
}
/* ════════════════════════════════════════════════════════════════
ABOUT PAGE — glass-forward
════════════════════════════════════════════════════════════════ */
.about-hero {
position: relative;
text-align: left;
background:
linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.88) 24%, rgba(255,255,255,0.35) 46%, rgba(255,255,255,0) 64%),
url('../assets/img/Background_08.png') right center / cover no-repeat,
#ffffff;
}
/* Mobile: drop the hero background image (it crowds the text) + center copy */
@media (max-width: 760px) {
.about-hero { background: #ffffff; text-align: center; }
.about-hero-inner { margin-left: auto; margin-right: auto; }
/* h1/lede have max-width caps (14ch / 46ch) with no side margins, so
text-align:center alone left the narrow box pinned left. On mobile drop
the caps and center both the box and the text. */
.about-hero h1, .about-hero-lede { max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
}
.about-hero-inner {
position: relative; z-index: 2;
max-width: 760px;
padding: 84px 0 72px;
}
.about-eyebrow {
display: inline-block;
font-size: var(--text-sm); font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wider); text-transform: uppercase;
color: var(--red-500);
margin-bottom: 18px;
}
.about-hero h1 {
margin: 0 0 22px;
max-width: 14ch;
font-size: clamp(34px, 4.4vw, 52px);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: 1.08;
color: var(--fg-primary);
text-wrap: balance;
}
.about-hero h1 .ah-soft { font-weight: var(--weight-medium); }
.about-hero h1 .ah-strong { font-weight: var(--weight-bold); }
.about-hero-lede {
max-width: 46ch;
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--fg-secondary);
margin: 0;
text-wrap: pretty;
}
.about-hero-lede strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* Stats breakout row */
.about-stats { margin-top: -38px; position: relative; z-index: 3; padding-bottom: 72px; }
.about-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.about-stat {
padding: 30px 26px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 100%);
backdrop-filter: var(--glass-blur-lg) saturate(150%); -webkit-backdrop-filter: var(--glass-blur-lg) saturate(150%);
border: 1px solid rgba(255,255,255,0.9);
box-shadow: var(--glass-shadow-lg);
text-align: center;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.about-stat-num {
font-size: clamp(40px, 4vw, 56px);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: 1;
color: var(--red-500);
}
.about-stat-num.is-text { font-size: clamp(24px, 2.4vw, 32px); color: var(--fg-primary); }
.about-stat-num.is-iso { color: #73559D; }
.about-stat-label {
margin-top: 12px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--fg-secondary);
}
.about-stat-note { margin-top: 10px; font-size: var(--text-sm); color: var(--fg-tertiary, #8a90a6); line-height: var(--leading-snug); }
/* Content panels */
.about-body { padding-bottom: 40px; }
.about-grid-2 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; }
.about-panel {
padding: 40px clamp(26px, 3vw, 48px);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.78) 100%);
backdrop-filter: var(--glass-blur-lg) saturate(150%); -webkit-backdrop-filter: var(--glass-blur-lg) saturate(150%);
border: 1px solid rgba(255,255,255,0.85);
box-shadow: var(--glass-shadow-lg);
display: flex; flex-direction: column; justify-content: center;
}
.about-grid-2 { align-items: stretch; }
.about-kicker {
font-size: var(--text-sm); font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wider); text-transform: uppercase;
color: var(--red-500);
margin: 0 0 12px;
}
.about-panel h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 32px); color: var(--fg-primary); letter-spacing: var(--tracking-tight); }
.about-panel p { margin: 0; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-secondary); text-wrap: pretty; }
.about-panel p strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* Commitment cards */
.about-promises { padding: 18px 0 64px; }
.about-promises-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.about-promises-head h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 36px); color: var(--fg-primary); letter-spacing: var(--tracking-tight); }
.about-promises-head p { margin: 0; color: var(--fg-secondary); font-size: var(--text-lg); }
.about-promise-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.about-promise {
padding: 32px 30px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.74) 100%);
backdrop-filter: var(--glass-blur-lg) saturate(150%); -webkit-backdrop-filter: var(--glass-blur-lg) saturate(150%);
border: 1px solid rgba(255,255,255,0.82);
box-shadow: var(--glass-shadow);
}
.about-promise-num {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: var(--radius-md);
background: linear-gradient(135deg, #ED1642 0%, #C4102F 100%);
color: #fff; font-weight: var(--weight-bold); font-size: var(--text-md);
margin-bottom: 18px;
}
.about-promise h3 { margin: 0 0 10px; font-size: var(--text-xl); color: var(--fg-primary); letter-spacing: var(--tracking-tight); }
.about-promise p { margin: 0; color: var(--fg-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
/* Closing CTA banner */
.about-cta { padding: 0 0 88px; }
.about-cta-inner {
position: relative; overflow: hidden;
text-align: center;
padding: 64px clamp(24px, 4vw, 72px);
border-radius: var(--radius-xl);
background:
radial-gradient(700px 360px at 50% -20%, rgba(237,22,66,0.10), transparent 60%),
var(--glass-bg-strong);
backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow-lg);
}
.about-cta-eyebrow {
font-size: clamp(18px, 2vw, 24px); font-weight: var(--weight-bold);
color: var(--red-500); margin: 0 0 10px; letter-spacing: var(--tracking-tight);
}
.about-cta-inner h2 { margin: 0 auto 26px; max-width: 40ch; font-size: clamp(26px, 3vw, 38px); color: var(--fg-primary); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.about-cta-inner .btn { font-size: var(--text-lg); padding: 14px 30px; }
/* About contact-form heading (first word of each statement bold, rest medium) */
body[data-page="about"] .footer-demo h2 { font-weight: var(--weight-medium); }
body[data-page="about"] .footer-demo h2 strong { font-weight: var(--weight-bold); }
@media (max-width: 900px) {
.about-stats-grid { grid-template-columns: repeat(2, 1fr); }
.about-grid-2 { grid-template-columns: 1fr; }
.about-promise-grid { grid-template-columns: 1fr; }
/* "Where we stand" + "Our vision" — center their contents on mobile */
.about-panel { text-align: center; }
}
@media (max-width: 560px) {
.about-stats-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
MOBILE / RESPONSIVE — QA round 2 (home overflow cleanup)
Found via _source/tools/_probe.html: at 390px these blocks extended
past their parent and were getting clipped (no page scroll, but cut off).
════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* Stats: 3-up grid can't hold 48px numbers on a phone → stack */
.stats-grid, .stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.stats-grid, .stats-grid-4 { grid-template-columns: 1fr; }
}
/* Trust bar: the 220px-label + 1fr-logos grid crushes the logos into a
~58px column on a phone → stack label above a full-width centred logo row */
@media (max-width: 760px) {
.trust-inner { grid-template-columns: 1fr; gap: 22px; text-align: center; }
.trust-logos { flex-wrap: wrap; justify-content: center; gap: 18px 26px; }
.trust-logo { flex: 0 1 auto; min-width: 84px; }
}
/* Testimonials/stats metrics row (10,000+ · 120 · 0%) overflows → wrap, drop dividers */
@media (max-width: 560px) {
.tmls-metrics { flex-wrap: wrap; gap: 22px 30px; }
.tmls-metric-sep { display: none; }
}
/* Home intro statement: fluid size handles the type scaling (see base rule);
here we just tighten the section padding on a phone. */
@media (max-width: 560px) {
.home-intro { padding: 64px 0 24px; }
}
/* ════════════════════════════════════════════════════════════════
SOLUTIONS DETAIL TEMPLATE — mobile pass
Shared modules used by the 9 solution pages + Tracy AI (hero, phase
pills, "what X does" head, by-role showcase, case study, contact
heading). These pages were viewport-locked at width=1440, so their
desktop 2-col / oversized-type modules had no mobile treatment.
════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* Hero — stack, center, scale the headline down */
.hero-grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(28px, 7.4vw, 44px); margin: 14px 0 20px; }
.hero-rotator { width: 100%; }
.hero-benefit { justify-content: center; }
.hero-rotator-rail { justify-content: center; }
.hero-cta-row { justify-content: center; }
/* Top bar — phase pills show ONLY the active one; tighten "Up next" */
/* Stack the active phase pill above "Up next" (line break between them) */
.hero-topbar { flex-direction: column; align-items: center; gap: 14px; margin-bottom: 22px; }
.phase-pills { justify-content: center; margin-bottom: 0; }
.phase-pill:not(.active), .phase-pill-sep { display: none; }
/* "Up next" on its own line — its labels run long, so let it size to the
content (no width cap, no ellipsis) and wrap if needed. */
.hero-next { max-width: 100%; width: auto; }
.hero-next-name { white-space: normal; overflow: visible; }
/* "What X does" — single column, centered: label → title → text */
.features-head { flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 32px; }
.features-head h2, .features-head p { max-width: 100%; }
/* By-role — tabs become a centered, wrapped "word cloud"; panel stacks */
.showcase-tabs { flex-wrap: wrap; gap: 8px; border-bottom: none; }
.showcase-tab {
padding: 9px 15px; margin-bottom: 0; font-size: var(--text-sm);
border: 1px solid var(--border-default); border-radius: var(--radius-full);
}
.showcase-tab.active { border-color: var(--red-500); background: var(--red-500); color: #fff; }
.showcase-card { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; min-height: 0; text-align: center; }
.showcase-content { display: flex; flex-direction: column; align-items: center; }
/* Case study — stack image over quote, shorter image, centered */
.testimonial-card { grid-template-columns: 1fr; gap: 22px; }
.tm-image { min-height: 200px; }
.tm-quote { text-align: center; }
.tm-quote .btn { align-self: center !important; }
/* Contact heading — center + size down (overrides the generic footer rule) */
.footer-demo .footer-form-section > div:first-child { text-align: center; }
.footer-demo .footer-form-section h2 { font-size: clamp(26px, 6.6vw, 34px); line-height: 1.12; }
}
/* ════════════════════════════════════════════════════════════════
PHASE-PILL CURSOR — simple light-purple dot (pills only)
════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
.phase-pill { cursor: none; } /* hide the link hand so only the dot shows */
.cc-cursor {
position: fixed; left: 0; top: 0; z-index: 99999;
width: 14px; height: 14px; border-radius: 50%;
background: rgba(209, 207, 234, 0.5);
pointer-events: none; opacity: 0;
transform: translate(-50%, -50%);
transition: opacity .15s ease;
will-change: transform;
}
.cc-cursor.is-visible { opacity: 1; }
}
/* ════════════════════════════════════════════════════════════════
===== TRACY AI PAGE (distinct layout) =====
════════════════════════════════════════════════════════════════ */
.tracy-hero { position: relative; padding: 56px 0 76px; overflow: hidden; }
.tracy-hero h1 strong { font-weight: var(--weight-bold); }
/* Futuristic gradient hero backdrop */
.tracy-hero-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(620px 520px at 82% 34%, rgba(110,43,232,0.20), transparent 62%),
radial-gradient(560px 480px at 96% 70%, rgba(237,22,66,0.16), transparent 60%),
radial-gradient(700px 600px at 60% 0%, rgba(162,41,176,0.10), transparent 60%),
linear-gradient(180deg, #fbfaff 0%, #f3f1fb 100%);
}
.tracy-hero-bg::after {
content: ""; position: absolute; inset: 0;
background-image: linear-gradient(rgba(120,90,180,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,90,180,0.05) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(circle at 80% 45%, #000 0%, transparent 62%);
mask-image: radial-gradient(circle at 80% 45%, #000 0%, transparent 62%);
}
.tracy-hero .container { position: relative; z-index: 1; max-width: min(1140px, calc(100% - 64px)); margin: 0 auto; }
.tracy-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 5vw, 72px); align-items: center; padding-top: clamp(20px, 3.5vw, 52px); }
.tracy-hero-copy { padding-left: clamp(8px, 2vw, 32px); }
.tracy-hero-visual { position: relative; }
.tracy-3d-frame { width: 90%; margin: 0 auto; aspect-ratio: 1 / 1; max-height: 432px; border: 0; background: transparent; display: block; }
.tracy-3d-name { text-align: center; margin-top: -8px; font-size: clamp(40px, 5vw, 68px); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1; }
.tracy-3d-name .t3d-dark { color: var(--fg-primary); }
.tracy-3d-name .t3d-grad { background: var(--t3d-gradient, linear-gradient(100deg, #6E2BE8 0%, #A640AB 50%, #ED1642 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Reusable gradient "AI" wordmark (used in "Powered by TRACY AI" links too) */
.t3d-grad { background: var(--t3d-gradient, linear-gradient(100deg, #6E2BE8 0%, #A640AB 50%, #ED1642 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tracy-badge { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.tracy-badge img { width: 38px; height: 38px; border-radius: 50%; display: block; }
.tracy-badge span { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--fg-primary); }
.tracy-hero h1 { margin: 0 0 20px; font-size: clamp(34px, 4.2vw, 52px); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: 1.08; color: var(--fg-primary); text-wrap: balance; }
.tracy-hero-lede { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-secondary); margin: 0 0 30px; max-width: 54ch; }
.tracy-hero-lede strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
/* Image placeholder (user fills later) */
.img-ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-lg); border: 1.5px dashed rgba(120,90,180,.42); background: linear-gradient(180deg, rgba(245,243,251,.85), rgba(236,234,248,.6)); color: #8b86b8; text-align: center; padding: 24px; }
.img-ph svg { width: 38px; height: 38px; opacity: .7; }
.img-ph span { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: .03em; }
.img-ph small { font-size: var(--text-xs); opacity: .8; }
/* Philosophy */
.tracy-philosophy { padding: 16px 0 60px; }
.tracy-phil-card { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: 56px clamp(28px,5vw,72px); text-align: center; background: radial-gradient(700px 360px at 50% -10%, rgba(115,85,157,.12), transparent 60%), var(--glass-bg-strong); backdrop-filter: var(--glass-blur-lg); -webkit-backdrop-filter: var(--glass-blur-lg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow-lg); }
.tracy-phil-kicker { font-size: 20px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin: 0 0 16px; display: inline-block; background: var(--t3d-gradient, linear-gradient(100deg, #6E2BE8 0%, #A640AB 50%, #ED1642 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tracy-phil-quote { font-size: clamp(28px,3.6vw,44px); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--fg-primary); margin: 0 auto 20px; max-width: 28ch; line-height: 1.1; }
.tracy-phil-quote strong { font-weight: var(--weight-bold); }
.tracy-phil-body { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-secondary); margin: 0 auto 26px; max-width: 86ch; }
/* Roles grid */
.tracy-roles { padding: 8px 0 60px; }
.tracy-roles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.tracy-role { padding: 28px 26px; border-radius: var(--radius-lg); background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.tracy-role-eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; color: #73559D; margin-bottom: 12px; }
.tracy-role h3 { margin: 0 0 10px; font-size: var(--text-lg); color: var(--fg-primary); }
.tracy-role p { margin: 0; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-secondary); }
/* Compare */
.tracy-compare { padding: 8px 0 60px; }
.tracy-compare-head { text-align: center; max-width: 100ch; margin: 0 auto 36px; }
.tracy-compare-head h2 { margin: 0 0 12px; font-size: clamp(28px,3.4vw,42px); color: var(--fg-primary); letter-spacing: var(--tracking-tight); line-height: 1.12; }
.tracy-compare-head p { margin: 0 auto; max-width: 60ch; color: var(--fg-secondary); font-size: var(--text-lg); }
.tracy-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.tracy-col { border-radius: var(--radius-lg); padding: 34px 32px; }
.tracy-col-generic { background: rgba(120,124,150,.06); border: 1px solid var(--border-default); }
.tracy-col-tracy { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,246,252,.82)); border: 1.5px solid rgba(115,85,157,.4); box-shadow: var(--glass-shadow-lg); }
.tracy-col h3 { margin: 0 0 18px; font-size: var(--text-xl); color: var(--fg-primary); }
.tracy-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.tracy-col li { display: flex; gap: 12px; font-size: var(--text-base); line-height: 1.5; color: var(--fg-secondary); }
.tracy-col li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.tracy-col-generic li svg { color: #b9bccb; }
.tracy-col-tracy li svg { color: #2f9e6b; }
.tracy-col-tracy li { color: var(--fg-primary); }
/* Outcomes */
.tracy-outcomes { padding: 8px 0 72px; }
.tracy-out-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tracy-out { padding: 30px 28px; border-radius: var(--radius-lg); background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.tracy-out-num { display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(135deg,#9f81c9,#73559D);color:#fff;font-weight:var(--weight-bold);margin-bottom:16px;font-size:var(--text-sm); }
.tracy-out h3 { margin: 0 0 10px; font-size: var(--text-lg); color: var(--fg-primary); }
.tracy-out p { margin: 0; font-size: var(--text-base); color: var(--fg-secondary); line-height: var(--leading-relaxed); }
@media (max-width: 900px) {
.tracy-hero-grid { grid-template-columns: 1fr; padding-top: 0; }
.tracy-hero-copy { padding-left: 0; text-align: center; }
.tracy-hero-lede { margin-left: auto; margin-right: auto; } /* 54ch cap → center the box */
.tracy-hero-copy .hero-cta-row { justify-content: center; }
.tracy-roles-grid { grid-template-columns: repeat(2,1fr); }
.tracy-compare-grid { grid-template-columns: 1fr; }
.tracy-out-grid { grid-template-columns: 1fr; }
}
/* "Built for every role" reads better as a single column on phones */
@media (max-width: 600px) {
.tracy-roles-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════
WORKFLOW PAGE HERO — mobile
Reorder to: "Powered by Tracy AI" (top, centered) → phase pills →
10px gap → the wheel. (Side spacing is handled by the shared .hero
rule in the 760px block above.)
════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
body[data-page="workflow"] .hero { display: flex; flex-direction: column; align-items: center; }
/* Powered-by badge: from pinned bottom-left → static, centered, first */
body[data-page="workflow"] .hero-tracy-powered {
position: static; order: -1; left: auto; bottom: auto;
justify-content: center; align-self: center; pointer-events: auto;
margin: 0 0 6px;
}
body[data-page="workflow"] #wf-pills { order: 0; justify-content: center; margin-bottom: 10px; }
body[data-page="workflow"] .hero-grid-plan { order: 1; width: 100%; }
}
/* ════════════════════════════════════════════════════════════════
UTILITY / CONTENT PAGES — legal, accessibility, partner, resource-hub
Simple readable prose + a light hero, all on brand tokens.
════════════════════════════════════════════════════════════════ */
.content-hero { padding: 56px 0 8px; }
.content-hero .container { max-width: min(880px, calc(100% - 64px)); }
.content-eyebrow {
display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wider); text-transform: uppercase;
color: var(--fg-accent); margin-bottom: 14px;
}
.content-hero h1 {
font-size: clamp(32px, 5vw, 48px); font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
color: var(--fg-primary); margin: 0 0 12px;
}
.content-updated { font-size: var(--text-sm); color: var(--fg-tertiary); margin: 0; }
.content-lede { font-size: var(--text-lg); color: var(--fg-secondary); line-height: var(--leading-relaxed); margin: 14px 0 0; max-width: 64ch; }
.content-body { padding: 28px 0 88px; }
.content-body .container { max-width: min(880px, calc(100% - 64px)); }
.prose { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--neutral-800); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--fg-primary); letter-spacing: var(--tracking-tight); margin: 40px 0 12px; }
.prose h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--fg-primary); margin: 26px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--action-primary); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--fg-primary); font-weight: var(--weight-semibold); }
.prose hr { border: none; border-top: 1px solid var(--border-default); margin: 36px 0; }
.prose .prose-contact { background: var(--glass-bg-strong); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 22px 24px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
/* Become-a-partner — benefit list + model cards */
.partner-benefits { padding: 8px 0 16px; }
.partner-benefits .container { max-width: min(880px, calc(100% - 64px)); }
.partner-benefits h2 { font-size: var(--text-2xl); color: var(--fg-primary); letter-spacing: var(--tracking-tight); margin: 0 0 20px; }
.benefit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.benefit-list li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--text-md); color: var(--fg-secondary); line-height: var(--leading-relaxed); }
.benefit-list li svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; color: var(--action-primary); }
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.model-card { padding: 30px 28px; border-radius: var(--radius-lg); background: var(--glass-bg-strong); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
.model-card h3 { margin: 0 0 10px; font-size: var(--text-xl); color: var(--fg-primary); }
.model-card p { margin: 0; font-size: var(--text-base); color: var(--fg-secondary); line-height: var(--leading-relaxed); }
/* Resource-hub — guide promo */
.guide-topics { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.guide-topics li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-md); color: var(--fg-secondary); line-height: var(--leading-relaxed); }
.guide-topics li svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #2f9e6b; }
@media (max-width: 720px) {
.model-grid { grid-template-columns: 1fr; }
}
/* Shared grids used on the new content pages (and solutions) — mobile stacking */
@media (max-width: 760px) {
.feature-grid { grid-template-columns: 1fr 1fr; }
.integrations-card { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.feature-grid { grid-template-columns: 1fr; }
}
/* ===== FAQ — two-column accordion (content in DOM for SEO/AI) ===== */
.faq {
padding: 76px 0;
background:
radial-gradient(640px 340px at 12% 6%, rgba(108,93,211,0.08), transparent 62%),
radial-gradient(640px 340px at 88% 94%, rgba(237,22,66,0.06), transparent 62%),
linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-canvas) 100%);
}
.faq-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--fg-primary); text-align: center; margin: 0 0 36px; }
.faq-list {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.faq-item {
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
background: linear-gradient(150deg, #ffffff 0%, #f4f6fd 60%, #eaeefb 100%);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.faq-q { list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--font-sans); font-weight: 600; font-size: 1.02rem; color: var(--fg-primary); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--fg-accent); transition: transform 0.2s ease; line-height: 1; }
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { padding: 0 22px 20px; color: var(--fg-secondary); font-size: 0.98rem; line-height: 1.6; overflow: hidden; transition: height 0.3s ease; }
.faq-a p { margin: 0; }
.faq-a a { color: var(--fg-accent); font-weight: 600; }
@media (max-width: 760px) {
.faq-list { grid-template-columns: 1fr; max-width: 640px; }
}
@media (max-width: 600px) {
.faq { padding: 48px 0; }
.faq-q { padding: 16px; font-size: 0.98rem; }
.faq-a { padding: 0 16px 18px; }
}
/* Home: FAQ is mobile-only — hidden on desktop, shown on phones. Kept in the DOM
so the FAQPage schema is still seen by mobile-first crawlers. */
body[data-page="home"] .faq { display: none; }
@media (max-width: 760px) { body[data-page="home"] .faq { display: block; } }